@pantoken/components 1.0.0 → 1.0.2

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 (58) hide show
  1. package/dist/alert.css +1 -1
  2. package/dist/billboard.css +1 -1
  3. package/dist/breadcrumb.css +1 -1
  4. package/dist/breadcrumb.link.css +1 -1
  5. package/dist/calendar.css +1 -1
  6. package/dist/checkbox.css +1 -1
  7. package/dist/close-button.css +1 -1
  8. package/dist/components.css +1 -1
  9. package/dist/context-view.css +1 -1
  10. package/dist/file-drop.css +1 -1
  11. package/dist/form-field-group.css +1 -1
  12. package/dist/form-field-messages.css +1 -1
  13. package/dist/form-field.css +1 -1
  14. package/dist/img.css +1 -1
  15. package/dist/in-place-edit.css +1 -1
  16. package/dist/index.mjs +160 -160
  17. package/dist/link.css +1 -1
  18. package/dist/list.css +1 -1
  19. package/dist/list.item.css +1 -1
  20. package/dist/mask.css +1 -1
  21. package/dist/menu.css +1 -1
  22. package/dist/menu.group.css +1 -1
  23. package/dist/menu.item.css +1 -1
  24. package/dist/menu.separator.css +1 -1
  25. package/dist/modal.body.css +1 -1
  26. package/dist/modal.css +1 -1
  27. package/dist/modal.footer.css +1 -1
  28. package/dist/modal.header.css +1 -1
  29. package/dist/pagination.css +1 -1
  30. package/dist/pagination.page.css +1 -1
  31. package/dist/pill.css +1 -1
  32. package/dist/popover.css +1 -1
  33. package/dist/progress-circle.css +1 -1
  34. package/dist/progress.css +1 -1
  35. package/dist/radio-input-group.css +1 -1
  36. package/dist/radio.css +1 -1
  37. package/dist/range-input.css +1 -1
  38. package/dist/rating.css +1 -1
  39. package/dist/scaffold-preset.d.mts +10 -0
  40. package/dist/scaffold-preset.mjs +14 -0
  41. package/dist/select.css +1 -1
  42. package/dist/side-nav-bar.css +1 -1
  43. package/dist/side-nav-bar.item.css +1 -1
  44. package/dist/table.css +1 -1
  45. package/dist/tabs.css +1 -1
  46. package/dist/tabs.panel.css +1 -1
  47. package/dist/tabs.tab.css +1 -1
  48. package/dist/tag.css +1 -1
  49. package/dist/text.css +1 -1
  50. package/dist/toggle-details.css +1 -1
  51. package/dist/toggle-group.css +1 -1
  52. package/dist/tray.css +1 -1
  53. package/dist/tree-browser.css +1 -1
  54. package/dist/utilities/icon.css +1 -1
  55. package/dist/utilities/screen-reader-content.css +1 -1
  56. package/dist/utilities/transition.css +1 -1
  57. package/dist/utilities.css +1 -1
  58. package/package.json +15 -12
package/dist/index.mjs CHANGED
@@ -292,9 +292,9 @@ const defineRule = (input) => make("rule", input);
292
292
  */
293
293
  const SENTINEL = "pfx-";
294
294
  const alert$1 = {
295
- "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 — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 0;\n}\n\n.pfx-alert {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
296
- "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 — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 0;\n}\n\n.pfx-alert {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
297
- "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 — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 0;\n}\n\n.pfx-alert {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
295
+ "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 * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n & {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n\n /* 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-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\n /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n &::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 &::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 &: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 /* 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 &.-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 &.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &.-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 &.-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 &.-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 &[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n }\n\n &[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\n &.-timeout-1 {\n --timeout: 1000;\n }\n\n &.-timeout-2 {\n --timeout: 2000;\n }\n\n &.-timeout-3 {\n --timeout: 3000;\n }\n\n &.-timeout-4 {\n --timeout: 4000;\n }\n\n &.-timeout-5 {\n --timeout: 5000;\n }\n\n /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n &:is(.-has-shadow-false, .-without-shadow) {\n box-shadow: none;\n }\n\n &:is(.-variant-info, .-color-info) {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &:is(.-variant-success, .-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 &:is(.-variant-warning, .-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 &:is(.-variant-error, .-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",
296
+ "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 * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n & {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n\n /* 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-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\n /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n &::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 &::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 &: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 /* 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 &.-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 &.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &.-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 &.-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 &.-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 &[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n }\n\n &[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\n &.-timeout-1 {\n --timeout: 1000;\n }\n\n &.-timeout-2 {\n --timeout: 2000;\n }\n\n &.-timeout-3 {\n --timeout: 3000;\n }\n\n &.-timeout-4 {\n --timeout: 4000;\n }\n\n &.-timeout-5 {\n --timeout: 5000;\n }\n\n /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n &:is(.-has-shadow-false, .-without-shadow) {\n box-shadow: none;\n }\n\n &:is(.-variant-info, .-color-info) {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &:is(.-variant-success, .-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 &:is(.-variant-warning, .-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 &:is(.-variant-error, .-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",
297
+ "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 * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n & {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n\n /* 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-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\n /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n &::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 &::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 &: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 /* 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 &.-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 &.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &.-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 &.-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 &.-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 &[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n }\n\n &[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\n &.-timeout-1 {\n --timeout: 1000;\n }\n\n &.-timeout-2 {\n --timeout: 2000;\n }\n\n &.-timeout-3 {\n --timeout: 3000;\n }\n\n &.-timeout-4 {\n --timeout: 4000;\n }\n\n &.-timeout-5 {\n --timeout: 5000;\n }\n\n /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n &:is(.-has-shadow-false, .-without-shadow) {\n box-shadow: none;\n }\n\n &:is(.-variant-info, .-color-info) {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &:is(.-variant-success, .-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 &:is(.-variant-warning, .-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 &:is(.-variant-error, .-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"
298
298
  }.rebrand;
299
299
  const avatar$1 = {
300
300
  "rebrand": "/**\n * @component avatar\n * @selector .pfx-avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border-always — Force the border ring on, even over an image or an inverse fill.\n * @modifier -show-border-never — Force the border ring off.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (the default).\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @modifier -show-border — @alias {@link -show-border-always}\n * @part .name — Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.\n * @part .first-name — Optional (pairs with .last-name): wraps the given name, clipped to its leading letter.\n * @part .last-name — Optional (pairs with .first-name): wraps the family name, clipped to its leading letter.\n * @a11y Give an image avatar a meaningful `alt` (the person's name), not a generic \"avatar\"; for initials-only avatars, prefer real name content (bare text, data-initials, .name, or .first-name/.last-name) over pre-abbreviated letters, so assistive tech announces the real name.\n * @example\n * ```html\n * <span class=\"pfx-avatar --me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai --me-sm\">AI</span>\n * <span class=\"pfx-avatar --me-sm\" data-initials=\"NV\">Dr. Nguyen Van Thoc</span>\n * <span class=\"pfx-avatar\"><span class=\"name\">Miguel Sanchez</span></span>\n * <span class=\"pfx-avatar\"><span class=\"first-name\">Miguel</span> <span class=\"last-name\">Sanchez</span></span>\n * ```\n * @structure\n * The avatar shows one of: an <img>, bare/data-initials text, a .name wrap, or a .first-name/.last-name pair.\n * .pfx-avatar {\n * img:optional {}\n * .name:optional {}\n * .first-name:optional {}\n * .last-name:optional {}\n * }\n * @related byline — Can host an avatar as its leading hero figure.\n * @sealed\n * @stable\n */\n@scope (.pfx-avatar) {\n :scope {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n white-space: nowrap;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid transparent;\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n\n &.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n }\n\n /* showBorder (unset/auto): only an avatar without an image gets the default border ring. */\n &:not(:has(> img)) {\n border-color: var(--instui-component-avatar-border-color);\n }\n\n /* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n &[data-initials] {\n font-size: 0;\n\n &::before {\n content: attr(data-initials);\n font-size: var(--instui-component-avatar-font-size-md);\n }\n }\n\n /* A photo: an <img> child fills the chip and covers the initials (image takes priority). Its\n radius is duplicated per shape (not `inherit`) so a sealed record never carries a reset-like\n value. */\n > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: 50%;\n }\n\n &.-shape-rectangle > img {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n }\n\n /* .name / .first-name+.last-name are mutually exclusive alternatives for a display name, so each\n guards against the other's markup also being present; either way, each part clips to a single\n leading letter — an inline-block can be clamped to 1ch independently of the host's own fixed\n dimensions, which a bare text node inside the flex host cannot. Missing one of first/last just\n leaves the other centred (the host is already a centred flex box) — a precise no-data-initials,\n no-JS fallback either way. */\n &:not(:has([class*=\"-name\"])) .name,\n &:not(:has(.name)) .first-name,\n &:not(:has(.name)) .last-name {\n display: inline-block;\n max-width: 1ch;\n overflow: hidden;\n white-space: nowrap;\n vertical-align: middle;\n }\n }\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n/* Explicit (redundant-with-default) so the medium long-form size alias has a rule to clone. */\n.pfx-avatar.-size-md {\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n font-size: var(--instui-component-avatar-font-size-md);\n}\n\n.pfx-avatar.-size-2xs[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-sm[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-lg[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border-always {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* showBorder=\"never\": force the ring off, even without an image. */\n.pfx-avatar.-show-border-never {\n border-color: transparent;\n}\n",
@@ -307,20 +307,20 @@ const badge$1 = {
307
307
  "canvasHighContrast": "/**\n * @component badge\n * @selector .pfx-badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * ```html\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * ```\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-badge) {\n :scope {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n\n &.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n }\n\n &.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n }\n\n /* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n &.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n }\n\n /* Notification: a small dot, no count. */\n &.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n }\n\n /* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n &.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n }\n\n /* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n &.-placement-top-end,\n &.-placement-top-start,\n &.-placement-bottom-end,\n &.-placement-bottom-start,\n &.-placement-start-center,\n &.-placement-end-center {\n position: absolute;\n }\n\n &.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n }\n\n &.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n }\n\n &.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n }\n\n &.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n }\n\n &.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n }\n\n &.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n }\n\n /* Standalone: the inline chip, in flow — resets any placement. */\n &.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n }\n }\n}\n"
308
308
  }.rebrand;
309
309
  const billboardByTheme = {
310
- "rebrand": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n",
311
- "canvas": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: dashed;\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n border-style: dashed;\n background: var(--instui-focus-outline-color);\n border-color: var(--instui-component-link-text-color);\n }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n",
312
- "canvasHighContrast": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: dashed;\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n border-style: dashed;\n background: var(--instui-focus-outline-color);\n border-color: var(--instui-component-link-text-color);\n }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n"
310
+ "rebrand": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n :scope {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n &.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-md > .hero,\n &.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n &.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-md > .hero[class*=\"-icon-\"],\n &.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n &.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n &.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n &.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n }\n}\n",
311
+ "canvas": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: dashed;\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n border-style: dashed;\n background: var(--instui-focus-outline-color);\n border-color: var(--instui-component-link-text-color);\n }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n :scope {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n &.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-md > .hero,\n &.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n &.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-md > .hero[class*=\"-icon-\"],\n &.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n &.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n &.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n &.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n }\n}\n",
312
+ "canvasHighContrast": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: dashed;\n border-color: var(--instui-component-link-text-color);\n }\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n border-style: dashed;\n background: var(--instui-focus-outline-color);\n border-color: var(--instui-component-link-text-color);\n }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n :scope {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n &.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-md > .hero,\n &.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n &.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n &.-size-md > .hero[class*=\"-icon-\"],\n &.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n &.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n &.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n &.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n &.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n }\n}\n"
313
313
  };
314
314
  billboardByTheme.rebrand;
315
315
  const breadcrumb$1 = {
316
- "rebrand": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n * ol {\n * li:one-or-more {}\n * }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <ol>\n * <li>\n * <a class=\"-icon-house\" href=\"#\">Home</a>\n * </li>\n * <li><a href=\"#\">Guides</a></li>\n * <li><a href=\"#\">Components</a></li>\n * <li aria-current=\"page\">Breadcrumb</li>\n * </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n\n.pfx-breadcrumb {\n display: block;\n}\n\n/* Hide the breadcrumb if it has no links. */\n.pfx-breadcrumb:not(:has(> ol > li > a)) {\n display: none;\n}\n\n.pfx-breadcrumb > ol {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm > ol {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-md > ol {\n gap: var(--instui-component-breadcrumb-gap-md);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-lg > ol {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n",
317
- "canvas": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n * ol {\n * li:one-or-more {}\n * }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <ol>\n * <li>\n * <a class=\"-icon-house\" href=\"#\">Home</a>\n * </li>\n * <li><a href=\"#\">Guides</a></li>\n * <li><a href=\"#\">Components</a></li>\n * <li aria-current=\"page\">Breadcrumb</li>\n * </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n\n.pfx-breadcrumb {\n display: block;\n}\n\n/* Hide the breadcrumb if it has no links. */\n.pfx-breadcrumb:not(:has(> ol > li > a)) {\n display: none;\n}\n\n.pfx-breadcrumb > ol {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm > ol {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-md > ol {\n gap: var(--instui-component-breadcrumb-gap-md);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-lg > ol {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n",
318
- "canvasHighContrast": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n * ol {\n * li:one-or-more {}\n * }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <ol>\n * <li>\n * <a class=\"-icon-house\" href=\"#\">Home</a>\n * </li>\n * <li><a href=\"#\">Guides</a></li>\n * <li><a href=\"#\">Components</a></li>\n * <li aria-current=\"page\">Breadcrumb</li>\n * </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n\n.pfx-breadcrumb {\n display: block;\n}\n\n/* Hide the breadcrumb if it has no links. */\n.pfx-breadcrumb:not(:has(> ol > li > a)) {\n display: none;\n}\n\n.pfx-breadcrumb > ol {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm > ol {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-md > ol {\n gap: var(--instui-component-breadcrumb-gap-md);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-lg > ol {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n"
316
+ "rebrand": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n * ol {\n * li:one-or-more {}\n * }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <ol>\n * <li>\n * <a class=\"-icon-house\" href=\"#\">Home</a>\n * </li>\n * <li><a href=\"#\">Guides</a></li>\n * <li><a href=\"#\">Components</a></li>\n * <li aria-current=\"page\">Breadcrumb</li>\n * </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n@scope (.pfx-breadcrumb) {\n & {\n display: block;\n }\n\n /* Hide the breadcrumb if it has no links. */\n &:not(:has(> ol > li > a)) {\n display: none;\n }\n\n & > ol {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n }\n\n &.-size-sm > ol {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n }\n\n &.-size-md > ol {\n gap: var(--instui-component-breadcrumb-gap-md);\n font-size: var(--instui-component-link-font-size-md);\n }\n\n &.-size-lg > ol {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n }\n}\n",
317
+ "canvas": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n * ol {\n * li:one-or-more {}\n * }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <ol>\n * <li>\n * <a class=\"-icon-house\" href=\"#\">Home</a>\n * </li>\n * <li><a href=\"#\">Guides</a></li>\n * <li><a href=\"#\">Components</a></li>\n * <li aria-current=\"page\">Breadcrumb</li>\n * </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n@scope (.pfx-breadcrumb) {\n & {\n display: block;\n }\n\n /* Hide the breadcrumb if it has no links. */\n &:not(:has(> ol > li > a)) {\n display: none;\n }\n\n & > ol {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n }\n\n &.-size-sm > ol {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n }\n\n &.-size-md > ol {\n gap: var(--instui-component-breadcrumb-gap-md);\n font-size: var(--instui-component-link-font-size-md);\n }\n\n &.-size-lg > ol {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n }\n}\n",
318
+ "canvasHighContrast": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n * ol {\n * li:one-or-more {}\n * }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <ol>\n * <li>\n * <a class=\"-icon-house\" href=\"#\">Home</a>\n * </li>\n * <li><a href=\"#\">Guides</a></li>\n * <li><a href=\"#\">Components</a></li>\n * <li aria-current=\"page\">Breadcrumb</li>\n * </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n@scope (.pfx-breadcrumb) {\n & {\n display: block;\n }\n\n /* Hide the breadcrumb if it has no links. */\n &:not(:has(> ol > li > a)) {\n display: none;\n }\n\n & > ol {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n }\n\n &.-size-sm > ol {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n }\n\n &.-size-md > ol {\n gap: var(--instui-component-breadcrumb-gap-md);\n font-size: var(--instui-component-link-font-size-md);\n }\n\n &.-size-lg > ol {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n }\n}\n"
319
319
  }.rebrand;
320
320
  const breadcrumbLink$1 = {
321
- "rebrand": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n :scope.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n :scope.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n :scope > ol > li {\n margin: 0;\n }\n\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n :scope li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] :scope li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n :scope li:not(:last-child)::after {\n display: none;\n }\n\n :scope li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] :scope > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n}\n",
322
- "canvas": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n :scope.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n :scope.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n :scope > ol > li {\n margin: 0;\n }\n\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n :scope li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] :scope li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n :scope li:not(:last-child)::after {\n display: none;\n }\n\n :scope li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] :scope > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n}\n",
323
- "canvasHighContrast": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n :scope.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n :scope.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n :scope > ol > li {\n margin: 0;\n }\n\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n :scope li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] :scope li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n :scope li:not(:last-child)::after {\n display: none;\n }\n\n :scope li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] :scope > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n}\n"
321
+ "rebrand": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope {\n &.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n &.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n &.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n > ol > li {\n margin: 0;\n }\n\n a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n li:not(:last-child)::after {\n display: none;\n }\n\n li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n }\n}\n",
322
+ "canvas": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope {\n &.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n &.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n &.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n > ol > li {\n margin: 0;\n }\n\n a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n li:not(:last-child)::after {\n display: none;\n }\n\n li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n }\n}\n",
323
+ "canvasHighContrast": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope {\n &.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n &.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n &.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n > ol > li {\n margin: 0;\n }\n\n a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n li:not(:last-child)::after {\n display: none;\n }\n\n li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n }\n}\n"
324
324
  }.rebrand;
325
325
  const byline$1 = {
326
326
  "rebrand": "/**\n * @component byline\n * @selector .pfx-byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * ```\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n@scope (.pfx-byline) {\n :scope {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n\n /* alignContent=\"top\" (default is center, from align-items above). */\n &.-align-content-top {\n align-items: flex-start;\n }\n\n &.-align-content-center {\n align-items: center;\n }\n }\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope {\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n }\n}\n",
@@ -328,9 +328,9 @@ const byline$1 = {
328
328
  "canvasHighContrast": "/**\n * @component byline\n * @selector .pfx-byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * ```\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n@scope (.pfx-byline) {\n :scope {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n\n /* alignContent=\"top\" (default is center, from align-items above). */\n &.-align-content-top {\n align-items: flex-start;\n }\n\n &.-align-content-center {\n align-items: center;\n }\n }\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope {\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n }\n}\n"
329
329
  }.rebrand;
330
330
  const calendar$1 = {
331
- "rebrand": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\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:many {}\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\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\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\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-weight: var(--instui-font-weight-interactive);\n }\n}\n",
332
- "canvas": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\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:many {}\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\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\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\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-weight: var(--instui-font-weight-interactive);\n }\n}\n",
333
- "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 * @remarks See the `calendar.day` member for the individual day cells.\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:many {}\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\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\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\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-weight: var(--instui-font-weight-interactive);\n }\n}\n"
331
+ "rebrand": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\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:many {}\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\n@scope (.pfx-calendar) {\n :scope {\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 > .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\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 > .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\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-weight: var(--instui-font-weight-interactive);\n }\n }\n}\n",
332
+ "canvas": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\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:many {}\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\n@scope (.pfx-calendar) {\n :scope {\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 > .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\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 > .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\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-weight: var(--instui-font-weight-interactive);\n }\n }\n}\n",
333
+ "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 * @remarks See the `calendar.day` member for the individual day cells.\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:many {}\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\n@scope (.pfx-calendar) {\n :scope {\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 > .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\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 > .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\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-weight: var(--instui-font-weight-interactive);\n }\n }\n}\n"
334
334
  }.rebrand;
335
335
  const calendarDay$1 = {
336
336
  "rebrand": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n * .grid {\n * .day {}\n * }\n * }\n */\n@scope (.pfx-calendar) {\n .day {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-size: var(--instui-component-calendar-day-font-size);\n color: var(--instui-component-calendar-day-color);\n background: var(--instui-component-calendar-day-background);\n cursor: pointer;\n }\n\n .day.-outside-month {\n color: var(--instui-component-calendar-day-outside-month-color);\n }\n\n .day.-today {\n background: var(--instui-component-calendar-day-today-background);\n color: var(--instui-component-calendar-day-today-color);\n border-radius: var(--instui-component-calendar-day-today-border-radius);\n }\n\n .day.-selected {\n background: var(--instui-component-calendar-day-selected-background);\n color: var(--instui-component-calendar-day-selected-color);\n border-radius: var(--instui-component-calendar-day-selected-border-radius);\n }\n}\n",
@@ -338,24 +338,24 @@ const calendarDay$1 = {
338
338
  "canvasHighContrast": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n * .grid {\n * .day {}\n * }\n * }\n */\n@scope (.pfx-calendar) {\n .day {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n font-size: var(--instui-component-calendar-day-font-size);\n color: var(--instui-component-calendar-day-color);\n background: var(--instui-component-calendar-day-background);\n cursor: pointer;\n }\n\n .day.-outside-month {\n color: var(--instui-component-calendar-day-outside-month-color);\n }\n\n .day.-today {\n background: var(--instui-component-calendar-day-today-background);\n color: var(--instui-component-calendar-day-today-color);\n border-radius: var(--instui-component-calendar-day-today-border-radius);\n }\n\n .day.-selected {\n background: var(--instui-component-calendar-day-selected-background);\n color: var(--instui-component-calendar-day-selected-color);\n border-radius: var(--instui-component-calendar-day-selected-border-radius);\n }\n}\n"
339
339
  }.rebrand;
340
340
  const checkbox$1 = {
341
- "rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope.-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",
342
- "canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope.-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",
343
- "canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope.-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"
341
+ "rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope {\n &.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
342
+ "canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope {\n &.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
343
+ "canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope {\n &.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
344
344
  }.rebrand;
345
345
  const closeButton$1 = {
346
- "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",
347
- "canvas": "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n}\n.pfx-close-button::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n",
348
- "canvasHighContrast": "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n}\n.pfx-close-button::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n"
346
+ "rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n }\n\n &::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n }\n\n &.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n &.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n }\n\n &.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n }\n}\n",
347
+ "canvas": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n }\n\n &::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n }\n\n &.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n &.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n }\n\n &.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n }\n}\n",
348
+ "canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n }\n\n &::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n }\n\n &.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n &.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n }\n\n &.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n }\n}\n"
349
349
  }.rebrand;
350
350
  const contextView$1 = {
351
- "rebrand": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n",
352
- "canvas": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n",
353
- "canvasHighContrast": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n"
351
+ "rebrand": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n & {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n }\n\n /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n }\n\n /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n &::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n }\n\n &::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"bottom\": caret on the top edge, pointing up. */\n &.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n &.-placement-start::before,\n &.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n &.-placement-end::before,\n &.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n &.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n &[popover] {\n position: fixed;\n overflow: visible;\n margin: 0;\n }\n\n &[popover]:not(:popover-open) {\n display: none;\n }\n\n /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n}\n",
352
+ "canvas": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n & {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n }\n\n /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n }\n\n /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n &::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n }\n\n &::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"bottom\": caret on the top edge, pointing up. */\n &.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n &.-placement-start::before,\n &.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n &.-placement-end::before,\n &.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n &.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n &[popover] {\n position: fixed;\n overflow: visible;\n margin: 0;\n }\n\n &[popover]:not(:popover-open) {\n display: none;\n }\n\n /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n}\n",
353
+ "canvasHighContrast": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n & {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n }\n\n /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n }\n\n /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n &::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n }\n\n &::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"bottom\": caret on the top edge, pointing up. */\n &.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n &.-placement-start::before,\n &.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n &.-placement-end::before,\n &.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n &.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n &[popover] {\n position: fixed;\n overflow: visible;\n margin: 0;\n }\n\n &[popover]:not(:popover-open) {\n display: none;\n }\n\n /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n}\n"
354
354
  }.rebrand;
355
355
  const drawerLayout$1 = {
356
- "rebrand": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent. \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n * <aside class=\"tray\">Navigation</aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n * @member tray {}\n * @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n display: flex;\n block-size: 100%;\n position: relative;\n /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n container: pantoken-drawer-layout / inline-size;\n\n &[placement=\"start\"],\n &.-placement-start {\n flex-direction: row;\n }\n\n &[placement=\"end\"],\n &.-placement-end {\n flex-direction: row-reverse;\n }\n\n &:not([open]):not(.-open) > .tray {\n display: none;\n }\n\n &[should-overlay-tray],\n &.-should-overlay-tray {\n min-inline-size: 0;\n }\n }\n}\n",
357
- "canvas": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent. \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n * <aside class=\"tray\">Navigation</aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n * @member tray {}\n * @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n display: flex;\n block-size: 100%;\n position: relative;\n /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n container: pantoken-drawer-layout / inline-size;\n\n &[placement=\"start\"],\n &.-placement-start {\n flex-direction: row;\n }\n\n &[placement=\"end\"],\n &.-placement-end {\n flex-direction: row-reverse;\n }\n\n &:not([open]):not(.-open) > .tray {\n display: none;\n }\n\n &[should-overlay-tray],\n &.-should-overlay-tray {\n min-inline-size: 0;\n }\n }\n}\n",
358
- "canvasHighContrast": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent. \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n * <aside class=\"tray\">Navigation</aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n * @member tray {}\n * @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n display: flex;\n block-size: 100%;\n position: relative;\n /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n container: pantoken-drawer-layout / inline-size;\n\n &[placement=\"start\"],\n &.-placement-start {\n flex-direction: row;\n }\n\n &[placement=\"end\"],\n &.-placement-end {\n flex-direction: row-reverse;\n }\n\n &:not([open]):not(.-open) > .tray {\n display: none;\n }\n\n &[should-overlay-tray],\n &.-should-overlay-tray {\n min-inline-size: 0;\n }\n }\n}\n"
356
+ "rebrand": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — @interaction Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent. \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n * <aside class=\"tray\">Navigation</aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n * @member tray {}\n * @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n display: flex;\n block-size: 100%;\n position: relative;\n /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n container: pantoken-drawer-layout / inline-size;\n\n &[placement=\"start\"],\n &.-placement-start {\n flex-direction: row;\n }\n\n &[placement=\"end\"],\n &.-placement-end {\n flex-direction: row-reverse;\n }\n\n &:not([open]):not(.-open) > .tray {\n display: none;\n }\n\n &[should-overlay-tray],\n &.-should-overlay-tray {\n min-inline-size: 0;\n }\n }\n}\n",
357
+ "canvas": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — @interaction Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent. \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n * <aside class=\"tray\">Navigation</aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n * @member tray {}\n * @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n display: flex;\n block-size: 100%;\n position: relative;\n /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n container: pantoken-drawer-layout / inline-size;\n\n &[placement=\"start\"],\n &.-placement-start {\n flex-direction: row;\n }\n\n &[placement=\"end\"],\n &.-placement-end {\n flex-direction: row-reverse;\n }\n\n &:not([open]):not(.-open) > .tray {\n display: none;\n }\n\n &[should-overlay-tray],\n &.-should-overlay-tray {\n min-inline-size: 0;\n }\n }\n}\n",
358
+ "canvasHighContrast": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — @interaction Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent. \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n * <aside class=\"tray\">Navigation</aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n * @member tray {}\n * @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n display: flex;\n block-size: 100%;\n position: relative;\n /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n container: pantoken-drawer-layout / inline-size;\n\n &[placement=\"start\"],\n &.-placement-start {\n flex-direction: row;\n }\n\n &[placement=\"end\"],\n &.-placement-end {\n flex-direction: row-reverse;\n }\n\n &:not([open]):not(.-open) > .tray {\n display: none;\n }\n\n &[should-overlay-tray],\n &.-should-overlay-tray {\n min-inline-size: 0;\n }\n }\n}\n"
359
359
  }.rebrand;
360
360
  const drawerLayoutContent$1 = {
361
361
  "rebrand": "/**\n * @component drawer-layout.content\n * @memberOf drawer-layout\n * @selector .content\n * @summary The primary content pane that fills remaining space beside the tray.\n * @remarks `min-inline-size` follows `--pantoken-bp-md` (fallback `30em`) so narrow layouts can switch tray to overlay mode.\n * @remarks `overflow: auto` keeps the tray and content independently scrollable.\n * @remarks Once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint), a `@container` query on the parent's `pantoken-drawer-layout` container drops this member's `min-inline-size` to `0` automatically, matching the manual `[should-overlay-tray]` override.\n * @related drawer-layout.tray — The adjacent panel in the same flex row.\n * @accessibility Carry `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @structure\n * @scope (@component drawer-layout) {\n * .content {\n * slot {}\n * }\n * }\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\">\n * <div class=\"content\" role=\"region\">\n * <p class=\"pfx-text\">Tray content</p>\n * </div>\n * </div>\n * ```\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n > .content {\n flex: 1 1 auto;\n overflow: auto;\n min-inline-size: var(--drawer-layout-content-min-inline-size, var(--pantoken-bp-md, 30em));\n }\n\n &[should-overlay-tray] > .content,\n &.-should-overlay-tray > .content {\n min-inline-size: 0;\n }\n }\n}\n\n/* Automatic overlay: no JS required. 46em = 16em tray width + 30em content breakpoint. */\n@container pantoken-drawer-layout (max-width: 46em) {\n .pfx-drawer-layout > .content {\n min-inline-size: 0;\n }\n}\n",
@@ -368,74 +368,74 @@ const drawerLayoutTray$1 = {
368
368
  "canvasHighContrast": "/**\n * @component drawer-layout.tray\n * @memberOf drawer-layout\n * @selector .tray\n * @summary The side panel beside main content, with optional overlay and tray-like surface modifiers.\n * @modifier -placement-end — Dock this tray to inline-end when overlay mode is active.\n * @modifier -without-border — Remove the panel edge border.\n * @modifier -without-shadow — Remove elevation when overlay mode is active.\n * @remarks Inline mode keeps the tray in flex flow; overlay mode (set on `drawer-layout`) absolutely positions it above content.\n * @remarks Overlay mode also applies automatically — via a `@container` query on the parent's `pantoken-drawer-layout` container — once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint).\n * @remarks Positioning uses `inset-inline-start`/`inset-inline` (never `left`/`right`), so `-placement-end` docks to the true trailing edge in both LTR and RTL.\n * @accessibility If used as navigation, wrap links in a semantic `<nav>` and provide an accessible name.\n * @related drawer-layout.content — The primary pane that flexes alongside this member.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" open>\n * <aside class=\"tray\" aria-label=\"Course navigation\">\n * <a class=\"pfx-link\" href=\"#\">Modules</a>\n * </aside>\n * <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * @scope (@component drawer-layout) {\n * .tray {\n * slot {}\n * }\n * }\n */\n\n@scope (.pfx-drawer-layout) {\n :scope {\n > .tray {\n flex: 0 0 var(--instui-component-tray-width-xs, 16em);\n inline-size: var(--drawer-layout-tray-width, var(--instui-component-tray-width-xs, 16em));\n max-inline-size: 100%;\n overflow: auto;\n background: var(--instui-color-background-elevated-surface-base);\n border-inline-end: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n }\n\n > .tray.-without-border {\n border-inline: 0;\n }\n\n &[should-overlay-tray] > .tray,\n &.-should-overlay-tray > .tray {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: var(--instui-component-tray-z-index, 9999);\n box-shadow: var(--instui-elevation-topmost);\n }\n\n &[should-overlay-tray] > .tray.-placement-end,\n &.-should-overlay-tray > .tray.-placement-end,\n &[should-overlay-tray][placement=\"end\"] > .tray,\n &.-should-overlay-tray[placement=\"end\"] > .tray,\n &[should-overlay-tray].-placement-end > .tray,\n &.-should-overlay-tray.-placement-end > .tray {\n inset-inline: auto 0;\n }\n\n &[should-overlay-tray] > .tray.-without-shadow,\n &.-should-overlay-tray > .tray.-without-shadow {\n box-shadow: none;\n }\n }\n}\n\n/* Automatic overlay: no JS required. 46em = 16em tray width + 30em content breakpoint. */\n@container pantoken-drawer-layout (max-width: 46em) {\n .pfx-drawer-layout > .tray {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: var(--instui-component-tray-z-index, 1);\n box-shadow: var(--instui-elevation-topmost);\n }\n\n .pfx-drawer-layout > .tray.-placement-end,\n .pfx-drawer-layout[placement=\"end\"] > .tray,\n .pfx-drawer-layout.-placement-end > .tray {\n inset-inline: auto 0;\n }\n\n .pfx-drawer-layout > .tray.-without-shadow {\n box-shadow: none;\n }\n}\n"
369
369
  }.rebrand;
370
370
  const fileDrop$1 = {
371
- "rebrand": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n",
372
- "canvas": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n",
373
- "canvasHighContrast": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n"
371
+ "rebrand": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n@scope (.pfx-file-drop) {\n & {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n }\n\n &:hover,\n &.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n }\n\n &.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n }\n\n &.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n }\n\n & > [class*=\"-icon-\"] {\n line-height: 1;\n }\n}\n",
372
+ "canvas": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n@scope (.pfx-file-drop) {\n & {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n }\n\n &:hover,\n &.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n }\n\n &.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n }\n\n &.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n }\n\n & > [class*=\"-icon-\"] {\n line-height: 1;\n }\n}\n",
373
+ "canvasHighContrast": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n@scope (.pfx-file-drop) {\n & {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n }\n\n &:hover,\n &.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n }\n\n &.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n }\n\n &.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n }\n\n & > [class*=\"-icon-\"] {\n line-height: 1;\n }\n}\n"
374
374
  }.rebrand;
375
375
  const formField$1 = {
376
- "rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n :scope > .controls {\n grid-area: controls;\n }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
377
- "canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n :scope > .controls {\n grid-area: controls;\n }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
378
- "canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n :scope > .controls {\n grid-area: controls;\n }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n"
376
+ "rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n :scope {\n > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n > .controls {\n grid-area: controls;\n }\n }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
377
+ "canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n :scope {\n > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n > .controls {\n grid-area: controls;\n }\n }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
378
+ "canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n :scope {\n > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n > .controls {\n grid-area: controls;\n }\n }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n"
379
379
  }.rebrand;
380
380
  const formFieldGroup$1 = {
381
- "rebrand": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n",
382
- "canvas": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n",
383
- "canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n"
381
+ "rebrand": "/**\n * @component form-field-group\n * @selector .pfx-form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n@scope (.pfx-form-field-group) {\n & {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n & > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n &.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n }\n\n &.-layout-columns,\n &.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n }\n\n &.-row-spacing-none {\n row-gap: 0;\n }\n\n &.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n }\n\n &.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n }\n\n &.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n }\n\n &.-col-spacing-none {\n column-gap: 0;\n }\n\n &.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n }\n\n &.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n }\n\n &.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n }\n\n &.-v-align-top {\n align-items: start;\n }\n\n &.-v-align-middle {\n align-items: center;\n }\n\n &.-v-align-bottom {\n align-items: end;\n }\n\n /* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n @supports (grid-template-columns: subgrid) {\n &.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n\n &.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n }\n}\n",
382
+ "canvas": "/**\n * @component form-field-group\n * @selector .pfx-form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n@scope (.pfx-form-field-group) {\n & {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n & > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n &.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n }\n\n &.-layout-columns,\n &.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n }\n\n &.-row-spacing-none {\n row-gap: 0;\n }\n\n &.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n }\n\n &.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n }\n\n &.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n }\n\n &.-col-spacing-none {\n column-gap: 0;\n }\n\n &.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n }\n\n &.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n }\n\n &.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n }\n\n &.-v-align-top {\n align-items: start;\n }\n\n &.-v-align-middle {\n align-items: center;\n }\n\n &.-v-align-bottom {\n align-items: end;\n }\n\n /* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n @supports (grid-template-columns: subgrid) {\n &.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n\n &.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n }\n}\n",
383
+ "canvasHighContrast": "/**\n * @component form-field-group\n * @selector .pfx-form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n@scope (.pfx-form-field-group) {\n & {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n & > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n &.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n }\n\n &.-layout-columns,\n &.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n }\n\n &.-row-spacing-none {\n row-gap: 0;\n }\n\n &.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n }\n\n &.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n }\n\n &.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n }\n\n &.-col-spacing-none {\n column-gap: 0;\n }\n\n &.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n }\n\n &.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n }\n\n &.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n }\n\n &.-v-align-top {\n align-items: start;\n }\n\n &.-v-align-middle {\n align-items: center;\n }\n\n &.-v-align-bottom {\n align-items: end;\n }\n\n /* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n @supports (grid-template-columns: subgrid) {\n &.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n\n &.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n }\n}\n"
384
384
  }.rebrand;
385
385
  const formFieldMessages$1 = {
386
- "rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
387
- "canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
388
- "canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
386
+ "rebrand": "/**\n * @component form-field-messages\n * @selector .pfx-form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n@scope (.pfx-form-field-messages) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n }\n}\n\n@scope (.pfx-form-field-message) {\n & {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n }\n\n &.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n }\n\n &.-type-error::before,\n &.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n }\n\n &.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n }\n\n &.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n &.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n",
387
+ "canvas": "/**\n * @component form-field-messages\n * @selector .pfx-form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n@scope (.pfx-form-field-messages) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n }\n}\n\n@scope (.pfx-form-field-message) {\n & {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n }\n\n &.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n }\n\n &.-type-error::before,\n &.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n }\n\n &.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n }\n\n &.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n &.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n",
388
+ "canvasHighContrast": "/**\n * @component form-field-messages\n * @selector .pfx-form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n@scope (.pfx-form-field-messages) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n }\n}\n\n@scope (.pfx-form-field-message) {\n & {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n }\n\n &.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n }\n\n &.-type-error::before,\n &.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n }\n\n &.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n }\n\n &.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n &.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n"
389
389
  }.rebrand;
390
390
  const img$1 = {
391
- "rebrand": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n",
392
- "canvas": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n",
393
- "canvasHighContrast": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n"
391
+ "rebrand": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n & {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n }\n\n &.-display-block {\n display: block;\n }\n\n /* constrain: fill a sized box (the consumer sets width/height). */\n &.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n &.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n }\n\n /* Effects compose through the custom property, so grayscale + blur can apply together. */\n &.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n }\n\n &.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n }\n\n &.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n }\n}\n",
392
+ "canvas": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n & {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n }\n\n &.-display-block {\n display: block;\n }\n\n /* constrain: fill a sized box (the consumer sets width/height). */\n &.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n &.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n }\n\n /* Effects compose through the custom property, so grayscale + blur can apply together. */\n &.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n }\n\n &.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n }\n\n &.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n }\n}\n",
393
+ "canvasHighContrast": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n & {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n }\n\n &.-display-block {\n display: block;\n }\n\n /* constrain: fill a sized box (the consumer sets width/height). */\n &.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n &.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n }\n\n /* Effects compose through the custom property, so grayscale + blur can apply together. */\n &.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n }\n\n &.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n }\n\n &.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n }\n}\n"
394
394
  }.rebrand;
395
395
  const inPlaceEdit$1 = {
396
- "rebrand": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n",
397
- "canvas": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n",
398
- "canvasHighContrast": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n"
396
+ "rebrand": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n & {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n }\n\n /* Hover affordance: it's editable. */\n &:hover {\n background: var(--instui-color-background-muted);\n }\n\n /* Focus = edit mode: input chrome + the focus ring. */\n &:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n }\n\n &.-readonly {\n cursor: default;\n }\n\n &.-readonly:hover {\n background: transparent;\n }\n}\n",
397
+ "canvas": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n & {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n }\n\n /* Hover affordance: it's editable. */\n &:hover {\n background: var(--instui-color-background-muted);\n }\n\n /* Focus = edit mode: input chrome + the focus ring. */\n &:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n }\n\n &.-readonly {\n cursor: default;\n }\n\n &.-readonly:hover {\n background: transparent;\n }\n}\n",
398
+ "canvasHighContrast": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n & {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n }\n\n /* Hover affordance: it's editable. */\n &:hover {\n background: var(--instui-color-background-muted);\n }\n\n /* Focus = edit mode: input chrome + the focus ring. */\n &:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n }\n\n &.-readonly {\n cursor: default;\n }\n\n &.-readonly:hover {\n background: transparent;\n }\n}\n"
399
399
  }.rebrand;
400
400
  const link$1 = {
401
- "rebrand": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
402
- "canvas": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
403
- "canvasHighContrast": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n"
401
+ "rebrand": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n }\n\n &:hover {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n }\n\n &.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n }\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
402
+ "canvas": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n }\n\n &:hover {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n }\n\n &.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n }\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
403
+ "canvasHighContrast": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n }\n\n &:hover {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n }\n\n &.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n }\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n"
404
404
  }.rebrand;
405
405
  const list$1 = {
406
- "rebrand": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n * li:many {}\n * }\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 */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n margin: 0;\n}\n",
407
- "canvas": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n * li:many {}\n * }\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 */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n margin: 0;\n}\n",
408
- "canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n * li:many {}\n * }\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 */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n margin: 0;\n}\n"
406
+ "rebrand": "/**\n * @component list\n * @selector .pfx-list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n * li:many {}\n * }\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 */\n@scope (.pfx-list) {\n & {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n &.-size-md {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n /* isUnstyled: strip markers and indentation. */\n &.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n }\n\n /* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n &.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n }\n\n &.-inline > li {\n margin: 0;\n }\n}\n",
407
+ "canvas": "/**\n * @component list\n * @selector .pfx-list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n * li:many {}\n * }\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 */\n@scope (.pfx-list) {\n & {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n &.-size-md {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n /* isUnstyled: strip markers and indentation. */\n &.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n }\n\n /* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n &.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n }\n\n &.-inline > li {\n margin: 0;\n }\n}\n",
408
+ "canvasHighContrast": "/**\n * @component list\n * @selector .pfx-list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n * li:many {}\n * }\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 */\n@scope (.pfx-list) {\n & {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n &.-size-md {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n /* isUnstyled: strip markers and indentation. */\n &.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n }\n\n /* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n &.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n }\n\n &.-inline > li {\n margin: 0;\n }\n}\n"
409
409
  }.rebrand;
410
410
  const listItem$1 = {
411
- "rebrand": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n * li {}\n * }\n */\n\n@scope (.pfx-list) {\n :scope > li {\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 }\n\n :scope.-size-sm > li {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n :scope.-size-md > li {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n :scope.-size-lg > li {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n :scope.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n }\n\n :scope.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n }\n\n :scope.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n\n :scope.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n}\n",
412
- "canvas": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n * li {}\n * }\n */\n\n@scope (.pfx-list) {\n :scope > li {\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 }\n\n :scope.-size-sm > li {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n :scope.-size-md > li {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n :scope.-size-lg > li {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n :scope.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n }\n\n :scope.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n }\n\n :scope.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n\n :scope.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n}\n",
413
- "canvasHighContrast": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n * li {}\n * }\n */\n\n@scope (.pfx-list) {\n :scope > li {\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 }\n\n :scope.-size-sm > li {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n :scope.-size-md > li {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n :scope.-size-lg > li {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n :scope.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n }\n\n :scope.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n }\n\n :scope.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n\n :scope.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n}\n"
411
+ "rebrand": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n * li {}\n * }\n */\n\n@scope (.pfx-list) {\n :scope {\n > li {\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 }\n\n &.-size-sm > li {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n &.-size-md > li {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n &.-size-lg > li {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n &.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n }\n\n &.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n }\n\n &.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n\n &.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n }\n}\n",
412
+ "canvas": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n * li {}\n * }\n */\n\n@scope (.pfx-list) {\n :scope {\n > li {\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 }\n\n &.-size-sm > li {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n &.-size-md > li {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n &.-size-lg > li {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n &.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n }\n\n &.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n }\n\n &.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n\n &.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n }\n}\n",
413
+ "canvasHighContrast": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n * li {}\n * }\n */\n\n@scope (.pfx-list) {\n :scope {\n > li {\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 }\n\n &.-size-sm > li {\n font-size: var(--instui-component-list-item-font-size-small);\n }\n\n &.-size-md > li {\n font-size: var(--instui-component-list-item-font-size-medium);\n }\n\n &.-size-lg > li {\n font-size: var(--instui-component-list-item-font-size-large);\n }\n\n &.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n }\n\n &.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n }\n\n &.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n\n &.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n }\n }\n}\n"
414
414
  }.rebrand;
415
415
  const mask$1 = {
416
- "rebrand": "/**\n * @component 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). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\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\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n",
417
- "canvas": "/**\n * @component 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). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\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\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n",
418
- "canvasHighContrast": "/**\n * @component 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). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\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\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n"
416
+ "rebrand": "/**\n * @component mask\n * @selector .pfx-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). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\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@scope (.pfx-mask) {\n & {\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\n &.-fullscreen {\n position: fixed;\n z-index: 999;\n }\n\n &.-blur {\n backdrop-filter: blur(0.5rem);\n }\n}\n",
417
+ "canvas": "/**\n * @component mask\n * @selector .pfx-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). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\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@scope (.pfx-mask) {\n & {\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\n &.-fullscreen {\n position: fixed;\n z-index: 999;\n }\n\n &.-blur {\n backdrop-filter: blur(0.5rem);\n }\n}\n",
418
+ "canvasHighContrast": "/**\n * @component mask\n * @selector .pfx-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). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\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@scope (.pfx-mask) {\n & {\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\n &.-fullscreen {\n position: fixed;\n z-index: 999;\n }\n\n &.-blur {\n backdrop-filter: blur(0.5rem);\n }\n}\n"
419
419
  }.rebrand;
420
420
  const menu$1 = {
421
- "rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n * .group:optional {}\n * .item:many {}\n * .separator:optional {}\n * }\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 * @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",
422
- "canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n * .group:optional {}\n * .item:many {}\n * .separator:optional {}\n * }\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 * @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",
423
- "canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n * .group:optional {}\n * .item:many {}\n * .separator:optional {}\n * }\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 * @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"
421
+ "rebrand": "/**\n * @component menu\n * @selector .pfx-menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n * .group:optional {}\n * .item:many {}\n * .separator:optional {}\n * }\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 * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n@scope (.pfx-menu) {\n & {\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",
422
+ "canvas": "/**\n * @component menu\n * @selector .pfx-menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n * .group:optional {}\n * .item:many {}\n * .separator:optional {}\n * }\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 * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n@scope (.pfx-menu) {\n & {\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",
423
+ "canvasHighContrast": "/**\n * @component menu\n * @selector .pfx-menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n * .group:optional {}\n * .item:many {}\n * .separator:optional {}\n * }\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 * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n@scope (.pfx-menu) {\n & {\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"
424
424
  }.rebrand;
425
425
  const menuGroup$1 = {
426
- "rebrand": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n * .group {}\n * }\n */\n@scope (.pfx-menu) {\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",
427
- "canvas": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n * .group {}\n * }\n */\n@scope (.pfx-menu) {\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",
428
- "canvasHighContrast": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n * .group {}\n * }\n */\n@scope (.pfx-menu) {\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"
426
+ "rebrand": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n * .group {}\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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}\n",
427
+ "canvas": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n * .group {}\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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}\n",
428
+ "canvasHighContrast": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n * .group {}\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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}\n"
429
429
  }.rebrand;
430
430
  const menuItem$1 = {
431
- "rebrand": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n * .item {\n * .item-info {}\n * }\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",
432
- "canvas": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n * .item {\n * .item-info {}\n * }\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",
433
- "canvasHighContrast": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n * .item {\n * .item-info {}\n * }\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"
431
+ "rebrand": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n * .item {\n * .item-info {}\n * }\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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 > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n > .item:hover,\n > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n > .item.-active,\n > .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 > .item.-active:hover,\n > .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 > .item:hover .item-info,\n > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n }\n}\n",
432
+ "canvas": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n * .item {\n * .item-info {}\n * }\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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 > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n > .item:hover,\n > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n > .item.-active,\n > .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 > .item.-active:hover,\n > .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 > .item:hover .item-info,\n > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n }\n}\n",
433
+ "canvasHighContrast": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n * .item {\n * .item-info {}\n * }\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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 > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n > .item:hover,\n > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n > .item.-active,\n > .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 > .item.-active:hover,\n > .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 > .item:hover .item-info,\n > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n }\n}\n"
434
434
  }.rebrand;
435
435
  const menuSeparator$1 = {
436
- "rebrand": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n * .separator {}\n * }\n */\n@scope (.pfx-menu) {\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",
437
- "canvas": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n * .separator {}\n * }\n */\n@scope (.pfx-menu) {\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",
438
- "canvasHighContrast": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n * .separator {}\n * }\n */\n@scope (.pfx-menu) {\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"
436
+ "rebrand": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n * .separator {}\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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}\n",
437
+ "canvas": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n * .separator {}\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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}\n",
438
+ "canvasHighContrast": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n * .separator {}\n * }\n */\n@scope (.pfx-menu) {\n :scope {\n > .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}\n"
439
439
  }.rebrand;
440
440
  const metric$1 = {
441
441
  "rebrand": "/**\n * @component metric\n * @selector .pfx-metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * ```html\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * ```\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n@scope (.pfx-metric) {\n :scope {\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 > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n\n > .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 &.-text-align-start {\n align-items: flex-start;\n text-align: start;\n }\n\n &.-text-align-center {\n align-items: center;\n text-align: center;\n }\n\n &.-text-align-end {\n align-items: flex-end;\n text-align: end;\n }\n }\n}\n",
@@ -443,89 +443,89 @@ const metric$1 = {
443
443
  "canvasHighContrast": "/**\n * @component metric\n * @selector .pfx-metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * ```html\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * ```\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n@scope (.pfx-metric) {\n :scope {\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 > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n\n > .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 &.-text-align-start {\n align-items: flex-start;\n text-align: start;\n }\n\n &.-text-align-center {\n align-items: center;\n text-align: center;\n }\n\n &.-text-align-end {\n align-items: flex-end;\n text-align: end;\n }\n }\n}\n"
444
444
  }.rebrand;
445
445
  const modal$1 = {
446
- "rebrand": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n * .header {}\n * .body {}\n * .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\n\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\n\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n",
447
- "canvas": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n * .header {}\n * .body {}\n * .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\n\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\n\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n",
448
- "canvasHighContrast": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n * .header {}\n * .body {}\n * .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\n\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\n\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n"
446
+ "rebrand": "/**\n * @component modal\n * @selector .pfx-modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n * .header {}\n * .body {}\n * .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n@scope (.pfx-modal) {\n & {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n }\n\n /* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\n &[is=\"dialog\"],\n dialog& {\n margin: auto;\n padding: 0;\n }\n\n &[is=\"dialog\"]::backdrop,\n dialog&::backdrop {\n background: var(--instui-component-mask-background-color);\n }\n\n &[is=\"dialog\"].-blur::backdrop,\n dialog&.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n }\n\n &.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n }\n\n &.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n }\n\n &.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n }\n\n /* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n &.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n }\n\n /* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n &.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n }\n\n &.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n }\n}\n",
447
+ "canvas": "/**\n * @component modal\n * @selector .pfx-modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n * .header {}\n * .body {}\n * .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n@scope (.pfx-modal) {\n & {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n }\n\n /* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\n &[is=\"dialog\"],\n dialog& {\n margin: auto;\n padding: 0;\n }\n\n &[is=\"dialog\"]::backdrop,\n dialog&::backdrop {\n background: var(--instui-component-mask-background-color);\n }\n\n &[is=\"dialog\"].-blur::backdrop,\n dialog&.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n }\n\n &.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n }\n\n &.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n }\n\n &.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n }\n\n /* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n &.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n }\n\n /* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n &.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n }\n\n &.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n }\n}\n",
448
+ "canvasHighContrast": "/**\n * @component modal\n * @selector .pfx-modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n * .header {}\n * .body {}\n * .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n@scope (.pfx-modal) {\n & {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n }\n\n /* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\n &[is=\"dialog\"],\n dialog& {\n margin: auto;\n padding: 0;\n }\n\n &[is=\"dialog\"]::backdrop,\n dialog&::backdrop {\n background: var(--instui-component-mask-background-color);\n }\n\n &[is=\"dialog\"].-blur::backdrop,\n dialog&.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n }\n\n &.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n }\n\n &.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n }\n\n &.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n }\n\n /* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n &.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n }\n\n /* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n &.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n }\n\n &.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n }\n}\n"
449
449
  }.rebrand;
450
450
  const modalBody$1 = {
451
- "rebrand": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .body {\n * code {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n}\n",
452
- "canvas": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .body {\n * code {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n}\n",
453
- "canvasHighContrast": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .body {\n * code {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n}\n"
451
+ "rebrand": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .body {\n * code {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n &.-overflow-fit > .body {\n overflow-y: auto;\n }\n\n > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n > .body:has(> img) {\n padding: 0;\n }\n\n > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n\n &.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n\n &.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n }\n}\n",
452
+ "canvas": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .body {\n * code {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n &.-overflow-fit > .body {\n overflow-y: auto;\n }\n\n > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n > .body:has(> img) {\n padding: 0;\n }\n\n > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n\n &.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n\n &.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n }\n}\n",
453
+ "canvasHighContrast": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .body {\n * code {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n &.-overflow-fit > .body {\n overflow-y: auto;\n }\n\n > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n > .body:has(> img) {\n padding: 0;\n }\n\n > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n\n &.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n\n &.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n }\n}\n"
454
454
  }.rebrand;
455
455
  const modalFooter$1 = {
456
- "rebrand": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .footer {\n * @component button {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n",
457
- "canvas": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .footer {\n * @component button {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n",
458
- "canvasHighContrast": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .footer {\n * @component button {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n"
456
+ "rebrand": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .footer {\n * @component button {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n\n &.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n\n &.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n }\n}\n",
457
+ "canvas": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .footer {\n * @component button {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n\n &.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n\n &.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n }\n}\n",
458
+ "canvasHighContrast": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .footer {\n * @component button {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n\n &.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n\n &.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n }\n}\n"
459
459
  }.rebrand;
460
460
  const modalHeader$1 = {
461
- "rebrand": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n}\n",
462
- "canvas": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n}\n",
463
- "canvasHighContrast": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n}\n"
461
+ "rebrand": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n &.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n &.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n }\n}\n",
462
+ "canvas": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n &.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n &.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n }\n}\n",
463
+ "canvasHighContrast": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n &.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n &.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n }\n}\n"
464
464
  }.rebrand;
465
465
  const pagination$1 = {
466
- "rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n * .ellipsis:optional {}\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 nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\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 > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\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",
467
- "canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n * .ellipsis:optional {}\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 nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\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 > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\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",
468
- "canvasHighContrast": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n * .ellipsis:optional {}\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 nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\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 > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\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"
466
+ "rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n * .ellipsis:optional {}\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 :scope {\n /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .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 > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n > .arrow:disabled,\n > .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 > .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 > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\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",
467
+ "canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n * .ellipsis:optional {}\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 :scope {\n /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .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 > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n > .arrow:disabled,\n > .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 > .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 > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\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",
468
+ "canvasHighContrast": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n * .ellipsis:optional {}\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 :scope {\n /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .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 > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n > .arrow:disabled,\n > .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 > .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 > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\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"
469
469
  }.rebrand;
470
470
  const paginationPage$1 = {
471
- "rebrand": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n * .page {}\n * }\n */\n@scope (.pfx-pagination) {\n /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .page:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :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",
472
- "canvas": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n * .page {}\n * }\n */\n@scope (.pfx-pagination) {\n /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .page:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :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",
473
- "canvasHighContrast": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n * .page {}\n * }\n */\n@scope (.pfx-pagination) {\n /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .page:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :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"
471
+ "rebrand": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n * .page {}\n * }\n */\n@scope (.pfx-pagination) {\n :scope {\n /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n > .page:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n > .page[aria-current],\n > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n > .page[aria-current]:hover,\n > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n }\n}\n",
472
+ "canvas": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n * .page {}\n * }\n */\n@scope (.pfx-pagination) {\n :scope {\n /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n > .page:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n > .page[aria-current],\n > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n > .page[aria-current]:hover,\n > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n }\n}\n",
473
+ "canvasHighContrast": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n * .page {}\n * }\n */\n@scope (.pfx-pagination) {\n :scope {\n /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n > .page:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n > .page[aria-current],\n > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n > .page[aria-current]:hover,\n > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n }\n}\n"
474
474
  }.rebrand;
475
475
  const pill$1 = {
476
- "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=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.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",
477
- "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=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.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",
478
- "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=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.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"
476
+ "rebrand": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n & {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n }\n\n /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n &[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n }\n\n &.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n }\n\n &.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n }\n\n &.-color-info,\n &.-color-success,\n &.-color-warning,\n &.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n }\n}\n",
477
+ "canvas": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n & {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n }\n\n /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n &[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n }\n\n &.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n }\n\n &.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n }\n\n &.-color-info,\n &.-color-success,\n &.-color-warning,\n &.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n }\n}\n",
478
+ "canvasHighContrast": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n & {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n }\n\n /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n &[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n }\n\n &.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n }\n\n &.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n }\n\n &.-color-info,\n &.-color-success,\n &.-color-warning,\n &.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n }\n}\n"
479
479
  }.rebrand;
480
480
  const popover$1 = {
481
- "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",
482
- "canvas": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n",
483
- "canvasHighContrast": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n"
481
+ "rebrand": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n & {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n }\n\n &[popover] {\n margin: 0;\n }\n\n /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n\n /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n @supports (transition-behavior: allow-discrete) {\n &[popover] {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n\n &[popover]:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n\n @starting-style {\n &[popover]:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n }\n}\n",
482
+ "canvas": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n & {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n }\n\n &[popover] {\n margin: 0;\n }\n\n /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n\n /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n @supports (transition-behavior: allow-discrete) {\n &[popover] {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n\n &[popover]:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n\n @starting-style {\n &[popover]:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n }\n}\n",
483
+ "canvasHighContrast": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n & {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n }\n\n &[popover] {\n margin: 0;\n }\n\n /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n\n /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n @supports (transition-behavior: allow-discrete) {\n &[popover] {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n\n &[popover]:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n\n @starting-style {\n &[popover]:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n }\n}\n"
484
484
  }.rebrand;
485
485
  const progress$1 = {
486
- "rebrand": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n 0% {\n left: -40%;\n }\n\n 100% {\n left: 100%;\n }\n}\n\n.pfx-progress {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n\n :scope > .value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n }\n\n :scope.-color-inverse > .value,\n :scope > .value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n :scope:indeterminate > .bar {\n position: absolute;\n width: 40%;\n animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n :scope:indeterminate > .value {\n visibility: hidden;\n }\n}\n\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n.pfx-progress.-should-animate > .bar {\n transition: all 0.5s;\n}\n",
487
- "canvas": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n 0% {\n left: -40%;\n }\n\n 100% {\n left: 100%;\n }\n}\n\n.pfx-progress {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n\n :scope > .value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n }\n\n :scope.-color-inverse > .value,\n :scope > .value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n :scope:indeterminate > .bar {\n position: absolute;\n width: 40%;\n animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n :scope:indeterminate > .value {\n visibility: hidden;\n }\n}\n\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n.pfx-progress.-should-animate > .bar {\n transition: all 0.5s;\n}\n",
488
- "canvasHighContrast": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n 0% {\n left: -40%;\n }\n\n 100% {\n left: 100%;\n }\n}\n\n.pfx-progress {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n\n :scope > .value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n }\n\n :scope.-color-inverse > .value,\n :scope > .value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n :scope:indeterminate > .bar {\n position: absolute;\n width: 40%;\n animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n :scope:indeterminate > .value {\n visibility: hidden;\n }\n}\n\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n.pfx-progress.-should-animate > .bar {\n transition: all 0.5s;\n}\n"
486
+ "rebrand": "/**\n * @component progress\n * @selector .pfx-progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n 0% {\n left: -40%;\n }\n\n 100% {\n left: 100%;\n }\n}\n\n@scope (.pfx-progress) {\n & {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n }\n\n /* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n }\n\n &.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n }\n\n &.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n }\n\n &.-size-md {\n height: var(--instui-component-progress-bar-medium-height);\n }\n\n &.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n }\n\n & > .bar {\n height: 100%;\n width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n\n & > .value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n }\n\n &.-color-inverse > .value,\n & > .value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n &:indeterminate > .bar {\n position: absolute;\n width: 40%;\n animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n &:indeterminate > .value {\n visibility: hidden;\n }\n\n /* Color modifiers paired with deprecated meter-color aliases via :is(). */\n &:is(.-color-brand, .-meter-color-brand) > .bar {\n background: var(--instui-color-background-brand);\n }\n\n &:is(.-color-info, .-meter-color-info) > .bar {\n background: var(--instui-color-background-info);\n }\n\n &:is(.-color-success, .-meter-color-success) > .bar {\n background: var(--instui-color-background-success);\n }\n\n &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) > .bar {\n background: var(--instui-color-background-warning);\n }\n\n &:is(.-color-danger, .-meter-color-danger) > .bar {\n background: var(--instui-color-background-error);\n }\n\n /* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n &.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n &.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n }\n\n &.-color-primary-inverse > .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n }\n\n &.-render-value-inside > .value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n }\n\n /* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n &.-should-animate > .bar {\n transition: all 0.5s;\n }\n}\n",
487
+ "canvas": "/**\n * @component progress\n * @selector .pfx-progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n 0% {\n left: -40%;\n }\n\n 100% {\n left: 100%;\n }\n}\n\n@scope (.pfx-progress) {\n & {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n }\n\n /* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n }\n\n &.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n }\n\n &.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n }\n\n &.-size-md {\n height: var(--instui-component-progress-bar-medium-height);\n }\n\n &.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n }\n\n & > .bar {\n height: 100%;\n width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n\n & > .value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n }\n\n &.-color-inverse > .value,\n & > .value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n &:indeterminate > .bar {\n position: absolute;\n width: 40%;\n animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n &:indeterminate > .value {\n visibility: hidden;\n }\n\n /* Color modifiers paired with deprecated meter-color aliases via :is(). */\n &:is(.-color-brand, .-meter-color-brand) > .bar {\n background: var(--instui-color-background-brand);\n }\n\n &:is(.-color-info, .-meter-color-info) > .bar {\n background: var(--instui-color-background-info);\n }\n\n &:is(.-color-success, .-meter-color-success) > .bar {\n background: var(--instui-color-background-success);\n }\n\n &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) > .bar {\n background: var(--instui-color-background-warning);\n }\n\n &:is(.-color-danger, .-meter-color-danger) > .bar {\n background: var(--instui-color-background-error);\n }\n\n /* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n &.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n &.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n }\n\n &.-color-primary-inverse > .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n }\n\n &.-render-value-inside > .value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n }\n\n /* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n &.-should-animate > .bar {\n transition: all 0.5s;\n }\n}\n",
488
+ "canvasHighContrast": "/**\n * @component progress\n * @selector .pfx-progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress {\n * .bar {}\n * .value {}\n * }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n 0% {\n left: -40%;\n }\n\n 100% {\n left: 100%;\n }\n}\n\n@scope (.pfx-progress) {\n & {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n }\n\n /* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n }\n\n &.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n }\n\n &.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n }\n\n &.-size-md {\n height: var(--instui-component-progress-bar-medium-height);\n }\n\n &.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n }\n\n & > .bar {\n height: 100%;\n width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n\n & > .value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n }\n\n &.-color-inverse > .value,\n & > .value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n &:indeterminate > .bar {\n position: absolute;\n width: 40%;\n animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n &:indeterminate > .value {\n visibility: hidden;\n }\n\n /* Color modifiers paired with deprecated meter-color aliases via :is(). */\n &:is(.-color-brand, .-meter-color-brand) > .bar {\n background: var(--instui-color-background-brand);\n }\n\n &:is(.-color-info, .-meter-color-info) > .bar {\n background: var(--instui-color-background-info);\n }\n\n &:is(.-color-success, .-meter-color-success) > .bar {\n background: var(--instui-color-background-success);\n }\n\n &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) > .bar {\n background: var(--instui-color-background-warning);\n }\n\n &:is(.-color-danger, .-meter-color-danger) > .bar {\n background: var(--instui-color-background-error);\n }\n\n /* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n &.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n }\n\n &.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n }\n\n &.-color-primary-inverse > .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n }\n\n &.-render-value-inside > .value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n }\n\n /* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n &.-should-animate > .bar {\n transition: all 0.5s;\n }\n}\n"
489
489
  }.rebrand;
490
490
  const progressCircle$1 = {
491
- "rebrand": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n.pfx-progress-circle {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n --animation-delay: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n transition: --value 1s;\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill)\n clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n\n transition:\n opacity 0.5s 0.2s,\n transform 0.5s;\n transform: translate3d(0, 0, 0) scale(1);\n}\n\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n to {\n transform: rotate(1turn);\n }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n --value: 25;\n --min: 0;\n --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n visibility: hidden;\n}\n\n.pfx-progress-circle > .value {\n transition:\n opacity 0.5s 1s,\n transform 0.5s 1s;\n transform: translate3d(0, 0, 0);\n}\n\n.pfx-progress-circle.-should-animate {\n --value: 0 !important;\n}\n\n.pfx-progress-circle.-should-animate::before {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.75);\n}\n\n.pfx-progress-circle.-should-animate > .value {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n}\n",
492
- "canvas": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n.pfx-progress-circle {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n --animation-delay: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n transition: --value 1s;\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill)\n clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n\n transition:\n opacity 0.5s 0.2s,\n transform 0.5s;\n transform: translate3d(0, 0, 0) scale(1);\n}\n\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n to {\n transform: rotate(1turn);\n }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n --value: 25;\n --min: 0;\n --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n visibility: hidden;\n}\n\n.pfx-progress-circle > .value {\n transition:\n opacity 0.5s 1s,\n transform 0.5s 1s;\n transform: translate3d(0, 0, 0);\n}\n\n.pfx-progress-circle.-should-animate {\n --value: 0 !important;\n}\n\n.pfx-progress-circle.-should-animate::before {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.75);\n}\n\n.pfx-progress-circle.-should-animate > .value {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n}\n",
493
- "canvasHighContrast": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n.pfx-progress-circle {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n --animation-delay: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n transition: --value 1s;\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill)\n clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n\n transition:\n opacity 0.5s 0.2s,\n transform 0.5s;\n transform: translate3d(0, 0, 0) scale(1);\n}\n\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n to {\n transform: rotate(1turn);\n }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n --value: 25;\n --min: 0;\n --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n visibility: hidden;\n}\n\n.pfx-progress-circle > .value {\n transition:\n opacity 0.5s 1s,\n transform 0.5s 1s;\n transform: translate3d(0, 0, 0);\n}\n\n.pfx-progress-circle.-should-animate {\n --value: 0 !important;\n}\n\n.pfx-progress-circle.-should-animate::before {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.75);\n}\n\n.pfx-progress-circle.-should-animate > .value {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n}\n"
491
+ "rebrand": "/**\n * @component progress-circle\n * @selector .pfx-progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --value-now {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --min {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --max {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 100;\n}\n\n@property --value-max {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 100;\n}\n\n@property --animation-delay {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@scope (.pfx-progress-circle) {\n & {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n --animation-delay: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n transition: --value 1s;\n }\n\n /* The ring is a masked conic donut on ::before; the value sits in the hole. */\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill)\n clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n transition:\n opacity 0.5s 0.2s,\n transform 0.5s;\n transform: translate3d(0, 0, 0) scale(1);\n }\n\n & .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n }\n\n &.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n }\n\n &.-size-md {\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n }\n\n &.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n }\n\n &:is(.-color-brand, .-meter-color-brand) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n }\n\n &.-color-primary-inverse:is(.-color-brand, .-meter-color-brand) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n }\n\n &:is(.-color-info, .-meter-color-info) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n }\n\n &.-color-primary-inverse:is(.-color-info, .-meter-color-info) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n }\n\n &:is(.-color-success, .-meter-color-success) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n }\n\n &.-color-primary-inverse:is(.-color-success, .-meter-color-success) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n }\n\n &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n }\n\n &.-color-primary-inverse:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n }\n\n &:is(.-color-danger, .-meter-color-danger) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n }\n\n &.-color-primary-inverse:is(.-color-danger, .-meter-color-danger) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n }\n\n &.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n }\n\n /* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a static, potentially-empty ring. */\n @keyframes pantoken-progress-circle-indeterminate {\n to {\n transform: rotate(1turn);\n }\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n &:indeterminate {\n --value: 25;\n --min: 0;\n --max: 100;\n }\n\n &:indeterminate::before {\n animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n }\n\n &:indeterminate .value {\n visibility: hidden;\n }\n\n & > .value {\n transition:\n opacity 0.5s 1s,\n transform 0.5s 1s;\n transform: translate3d(0, 0, 0);\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount) {\n --value: 0 !important;\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount)::before {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.75);\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount) > .value {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n }\n}\n",
492
+ "canvas": "/**\n * @component progress-circle\n * @selector .pfx-progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --value-now {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --min {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --max {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 100;\n}\n\n@property --value-max {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 100;\n}\n\n@property --animation-delay {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@scope (.pfx-progress-circle) {\n & {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n --animation-delay: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n transition: --value 1s;\n }\n\n /* The ring is a masked conic donut on ::before; the value sits in the hole. */\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill)\n clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n transition:\n opacity 0.5s 0.2s,\n transform 0.5s;\n transform: translate3d(0, 0, 0) scale(1);\n }\n\n & .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n }\n\n &.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n }\n\n &.-size-md {\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n }\n\n &.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n }\n\n &:is(.-color-brand, .-meter-color-brand) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n }\n\n &.-color-primary-inverse:is(.-color-brand, .-meter-color-brand) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n }\n\n &:is(.-color-info, .-meter-color-info) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n }\n\n &.-color-primary-inverse:is(.-color-info, .-meter-color-info) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n }\n\n &:is(.-color-success, .-meter-color-success) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n }\n\n &.-color-primary-inverse:is(.-color-success, .-meter-color-success) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n }\n\n &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n }\n\n &.-color-primary-inverse:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n }\n\n &:is(.-color-danger, .-meter-color-danger) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n }\n\n &.-color-primary-inverse:is(.-color-danger, .-meter-color-danger) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n }\n\n &.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n }\n\n /* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a static, potentially-empty ring. */\n @keyframes pantoken-progress-circle-indeterminate {\n to {\n transform: rotate(1turn);\n }\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n &:indeterminate {\n --value: 25;\n --min: 0;\n --max: 100;\n }\n\n &:indeterminate::before {\n animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n }\n\n &:indeterminate .value {\n visibility: hidden;\n }\n\n & > .value {\n transition:\n opacity 0.5s 1s,\n transform 0.5s 1s;\n transform: translate3d(0, 0, 0);\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount) {\n --value: 0 !important;\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount)::before {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.75);\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount) > .value {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n }\n}\n",
493
+ "canvasHighContrast": "/**\n * @component progress-circle\n * @selector .pfx-progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n * Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n * label {\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * }\n * @variant external-label {\n * label {}\n * .pfx-progress-circle {\n * .value {}\n * }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --value-now {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --min {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@property --max {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 100;\n}\n\n@property --value-max {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 100;\n}\n\n@property --animation-delay {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n\n@scope (.pfx-progress-circle) {\n & {\n --value: var(--value-now);\n --min: 0;\n --max: var(--value-max);\n --animation-delay: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n transition: --value 1s;\n }\n\n /* The ring is a masked conic donut on ::before; the value sits in the hole. */\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill)\n clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n transition:\n opacity 0.5s 0.2s,\n transform 0.5s;\n transform: translate3d(0, 0, 0) scale(1);\n }\n\n & .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n }\n\n &.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n }\n\n &.-size-md {\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n }\n\n &.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n }\n\n &:is(.-color-brand, .-meter-color-brand) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n }\n\n &.-color-primary-inverse:is(.-color-brand, .-meter-color-brand) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n }\n\n &:is(.-color-info, .-meter-color-info) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n }\n\n &.-color-primary-inverse:is(.-color-info, .-meter-color-info) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n }\n\n &:is(.-color-success, .-meter-color-success) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n }\n\n &.-color-primary-inverse:is(.-color-success, .-meter-color-success) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n }\n\n &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n }\n\n &.-color-primary-inverse:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n }\n\n &:is(.-color-danger, .-meter-color-danger) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n }\n\n &.-color-primary-inverse:is(.-color-danger, .-meter-color-danger) {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n }\n\n &.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n }\n\n /* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n --value) reads as loading rather than rendering a static, potentially-empty ring. */\n @keyframes pantoken-progress-circle-indeterminate {\n to {\n transform: rotate(1turn);\n }\n }\n\n /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n &:indeterminate {\n --value: 25;\n --min: 0;\n --max: 100;\n }\n\n &:indeterminate::before {\n animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n }\n\n &:indeterminate .value {\n visibility: hidden;\n }\n\n & > .value {\n transition:\n opacity 0.5s 1s,\n transform 0.5s 1s;\n transform: translate3d(0, 0, 0);\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount) {\n --value: 0 !important;\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount)::before {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.75);\n }\n\n &:is(.-should-animate, .-should-animate-on-mount, .-shold-animate-on-mount) > .value {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n }\n}\n"
494
494
  }.rebrand;
495
495
  const radio$1 = {
496
- "rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n",
497
- "canvas": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n",
498
- "canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n"
496
+ "rebrand": "/**\n * @component radio\n * @selector .pfx-radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@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@scope (.pfx-radio) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n }\n\n &:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n }\n\n &:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n }\n\n /* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n &.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n }\n\n /* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n &.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n &.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n }\n\n &.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n }\n\n &.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n }\n\n &.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n }\n\n /* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n &.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n }\n\n /* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n &.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n }\n\n &.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n }\n\n &.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n }\n\n &.-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}\n",
497
+ "canvas": "/**\n * @component radio\n * @selector .pfx-radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@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@scope (.pfx-radio) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n }\n\n &:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n }\n\n &:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n }\n\n /* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n &.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n }\n\n /* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n &.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n &.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n }\n\n &.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n }\n\n &.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n }\n\n &.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n }\n\n /* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n &.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n }\n\n /* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n &.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n }\n\n &.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n }\n\n &.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n }\n\n &.-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}\n",
498
+ "canvasHighContrast": "/**\n * @component radio\n * @selector .pfx-radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@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@scope (.pfx-radio) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n }\n\n &:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n }\n\n &:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n }\n\n &:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n }\n\n &:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n }\n\n /* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n &.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n }\n\n /* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n &.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n &.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n }\n\n &.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n }\n\n &.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n }\n\n &.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n }\n\n /* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n &.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n }\n\n /* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n &.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n }\n\n &.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n }\n\n &.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n }\n\n &.-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}\n"
499
499
  }.rebrand;
500
500
  const radioInputGroup$1 = {
501
- "rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
502
- "canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
503
- "canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n"
501
+ "rebrand": "/**\n * @component radio-input-group\n * @selector .pfx-radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n@scope (.pfx-radio-input-group) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n & > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n &.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n }\n\n /* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n &.-layout-columns,\n &.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n }\n\n &.-layout-columns > legend,\n &.-layout-inline > legend {\n flex-basis: 100%;\n }\n\n /* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n &.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n }\n\n &.-variant-toggle > legend {\n flex-basis: 100%;\n }\n\n &.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n }\n}\n",
502
+ "canvas": "/**\n * @component radio-input-group\n * @selector .pfx-radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n@scope (.pfx-radio-input-group) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n & > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n &.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n }\n\n /* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n &.-layout-columns,\n &.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n }\n\n &.-layout-columns > legend,\n &.-layout-inline > legend {\n flex-basis: 100%;\n }\n\n /* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n &.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n }\n\n &.-variant-toggle > legend {\n flex-basis: 100%;\n }\n\n &.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n }\n}\n",
503
+ "canvasHighContrast": "/**\n * @component radio-input-group\n * @selector .pfx-radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n@scope (.pfx-radio-input-group) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n & > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n\n &.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n }\n\n /* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n &.-layout-columns,\n &.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n }\n\n &.-layout-columns > legend,\n &.-layout-inline > legend {\n flex-basis: 100%;\n }\n\n /* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n &.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n }\n\n &.-variant-toggle > legend {\n flex-basis: 100%;\n }\n\n &.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n }\n}\n"
504
504
  }.rebrand;
505
505
  const rangeInput$1 = {
506
- "rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
507
- "canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
508
- "canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
506
+ "rebrand": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n & {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n }\n\n /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid\n var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid\n var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-moz-range-thumb {\n border-radius: 50%;\n cursor: pointer;\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n background: var(--instui-component-range-input-handle-background);\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n }\n\n &:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n }\n\n &:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n }\n\n &:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n }\n\n .pfx-range-input-value {\n & {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n }\n\n &.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n }\n\n &.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n }\n }\n}\n",
507
+ "canvas": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n & {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n }\n\n /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid\n var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid\n var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-moz-range-thumb {\n border-radius: 50%;\n cursor: pointer;\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n background: var(--instui-component-range-input-handle-background);\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n }\n\n &:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n }\n\n &:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n }\n\n &:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n }\n\n .pfx-range-input-value {\n & {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n }\n\n &.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n }\n\n &.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n }\n }\n}\n",
508
+ "canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n & {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n }\n\n /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid\n var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid\n var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n &::-moz-range-thumb {\n border-radius: 50%;\n cursor: pointer;\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n background: var(--instui-component-range-input-handle-background);\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n }\n\n &:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n }\n\n &:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n }\n\n &:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n }\n\n .pfx-range-input-value {\n & {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n }\n\n &.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n }\n\n &.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n }\n }\n}\n"
509
509
  }.rebrand;
510
510
  const rating$1 = {
511
- "rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n",
512
- "canvas": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n",
513
- "canvasHighContrast": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n"
511
+ "rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n :scope {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n }\n}\n",
512
+ "canvas": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n :scope {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n }\n}\n",
513
+ "canvasHighContrast": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n :scope {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n }\n}\n"
514
514
  }.rebrand;
515
515
  const select = {
516
- "rebrand": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n",
517
- "canvas": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n",
518
- "canvasHighContrast": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n"
516
+ "rebrand": "/**\n * @component simple-select\n * @selector .pfx-simple-select\n * @summary Experimental CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline). Enhances .pfx-simple-select; degrades to the plain control where unsupported.\n */\n@scope (.pfx-simple-select) {\n @supports (appearance: base-select) {\n & {\n appearance: base-select;\n }\n\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n &::picker-icon {\n display: none;\n }\n\n &::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n appearance: base-select;\n }\n\n & option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n & option::checkmark {\n display: none;\n }\n\n & option:hover,\n & option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n\n & option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n }\n}\n",
517
+ "canvas": "/**\n * @component simple-select\n * @selector .pfx-simple-select\n * @summary Experimental CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline). Enhances .pfx-simple-select; degrades to the plain control where unsupported.\n */\n@scope (.pfx-simple-select) {\n @supports (appearance: base-select) {\n & {\n appearance: base-select;\n }\n\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n &::picker-icon {\n display: none;\n }\n\n &::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n appearance: base-select;\n }\n\n & option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n & option::checkmark {\n display: none;\n }\n\n & option:hover,\n & option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n\n & option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n }\n}\n",
518
+ "canvasHighContrast": "/**\n * @component simple-select\n * @selector .pfx-simple-select\n * @summary Experimental CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline). Enhances .pfx-simple-select; degrades to the plain control where unsupported.\n */\n@scope (.pfx-simple-select) {\n @supports (appearance: base-select) {\n & {\n appearance: base-select;\n }\n\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n &::picker-icon {\n display: none;\n }\n\n &::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n appearance: base-select;\n }\n\n & option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n & option::checkmark {\n display: none;\n }\n\n & option:hover,\n & option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n\n & option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n }\n}\n"
519
519
  }.rebrand;
520
520
  const sideNavBar$1 = {
521
- "rebrand": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n * .item:one-or-more {}\n * }\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 */\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/* 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",
522
- "canvas": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n * .item:one-or-more {}\n * }\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 */\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/* 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",
523
- "canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n * .item:one-or-more {}\n * }\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 */\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/* 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"
521
+ "rebrand": "/**\n * @component side-nav-bar\n * @selector .pfx-side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .label — The nav item's text label.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n * .item:one-or-more {}\n * }\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 */\n@scope (.pfx-side-nav-bar) {\n & {\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 /* minimized: a narrow rail — the icons stay, the labels are hidden. */\n &.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n }\n\n &.-minimized .item .label {\n display: none;\n }\n}\n",
522
+ "canvas": "/**\n * @component side-nav-bar\n * @selector .pfx-side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .label — The nav item's text label.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n * .item:one-or-more {}\n * }\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 */\n@scope (.pfx-side-nav-bar) {\n & {\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 /* minimized: a narrow rail — the icons stay, the labels are hidden. */\n &.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n }\n\n &.-minimized .item .label {\n display: none;\n }\n}\n",
523
+ "canvasHighContrast": "/**\n * @component side-nav-bar\n * @selector .pfx-side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .label — The nav item's text label.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n * .item:one-or-more {}\n * }\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 */\n@scope (.pfx-side-nav-bar) {\n & {\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 /* minimized: a narrow rail — the icons stay, the labels are hidden. */\n &.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n }\n\n &.-minimized .item .label {\n display: none;\n }\n}\n"
524
524
  }.rebrand;
525
525
  const sideNavBarItem$1 = {
526
- "rebrand": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope > .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",
527
- "canvas": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope > .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",
528
- "canvasHighContrast": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope > .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"
526
+ "rebrand": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope {\n > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n }\n}\n",
527
+ "canvas": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope {\n > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n }\n}\n",
528
+ "canvasHighContrast": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope {\n > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n }\n}\n"
529
529
  }.rebrand;
530
530
  const spinner$1 = {
531
531
  "rebrand": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@scope (.pfx-spinner) {\n :scope {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n &.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n }\n }\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
@@ -533,9 +533,9 @@ const spinner$1 = {
533
533
  "canvasHighContrast": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@scope (.pfx-spinner) {\n :scope {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n &.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n }\n }\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n"
534
534
  }.rebrand;
535
535
  const table$1 = {
536
- "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`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * th {}\n * }\n * tbody {\n * tr {\n * td, th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n.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\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\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\n/* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n col-header/row-header members for how each part restacks. */\n.pfx-table.-layout-stacked {\n display: block;\n width: auto;\n}\n",
537
- "canvas": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * th {}\n * }\n * tbody {\n * tr {\n * td, th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n.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\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\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\n/* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n col-header/row-header members for how each part restacks. */\n.pfx-table.-layout-stacked {\n display: block;\n width: auto;\n}\n",
538
- "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`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * th {}\n * }\n * tbody {\n * tr {\n * td, th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n.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\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\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\n/* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n col-header/row-header members for how each part restacks. */\n.pfx-table.-layout-stacked {\n display: block;\n width: auto;\n}\n"
536
+ "rebrand": "/**\n * @component table\n * @selector .pfx-table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * th {}\n * }\n * tbody {\n * tr {\n * td, th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n@scope (.pfx-table) {\n & {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n }\n\n & caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n }\n\n /* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n &.-layout-fixed {\n table-layout: fixed;\n }\n\n /* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n col-header/row-header members for how each part restacks. */\n &.-layout-stacked {\n display: block;\n width: auto;\n }\n}\n",
537
+ "canvas": "/**\n * @component table\n * @selector .pfx-table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * th {}\n * }\n * tbody {\n * tr {\n * td, th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n@scope (.pfx-table) {\n & {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n }\n\n & caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n }\n\n /* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n &.-layout-fixed {\n table-layout: fixed;\n }\n\n /* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n col-header/row-header members for how each part restacks. */\n &.-layout-stacked {\n display: block;\n width: auto;\n }\n}\n",
538
+ "canvasHighContrast": "/**\n * @component table\n * @selector .pfx-table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * th {}\n * }\n * tbody {\n * tr {\n * td, th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n@scope (.pfx-table) {\n & {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n }\n\n & caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n }\n\n /* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n &.-layout-fixed {\n table-layout: fixed;\n }\n\n /* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n col-header/row-header members for how each part restacks. */\n &.-layout-stacked {\n display: block;\n width: auto;\n }\n}\n"
539
539
  }.rebrand;
540
540
  const tableBody$1 = {
541
541
  "rebrand": "/**\n * @component table.body\n * @memberOf table\n * @selector tbody\n * @summary The table's data row group (InstUI `Table.Body`).\n * @remarks The parent `table`'s `-layout-stacked` modifier restyles this member — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n * tbody {}\n * }\n */\n/* layout=\"stacked\": each row becomes a card; the body itself just stops being a table row-group box. */\n.pfx-table.-layout-stacked tbody {\n display: block;\n width: auto;\n}\n",
@@ -568,39 +568,39 @@ const tableRowHeader$1 = {
568
568
  "canvasHighContrast": "/**\n * @component table.row-header\n * @memberOf table\n * @selector th[scope=\"row\"]\n * @summary A row-header cell (InstUI `Table.RowHeader`); styled from the row-header tokens, not the column-header ones.\n * @remarks The parent `table`'s `-layout-stacked` modifier stacks this member as a block and labels it via `::before` — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n * tbody {\n * tr {\n * th[scope=\"row\"] {}\n * }\n * }\n * }\n */\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n background: var(--instui-component-table-row-header-background);\n color: var(--instui-component-table-row-header-color);\n font-weight: var(--instui-component-table-row-header-font-weight);\n line-height: var(--instui-component-table-row-header-line-height);\n padding: var(--instui-component-table-row-header-padding-vertical)\n var(--instui-component-table-row-header-padding-horizontal);\n}\n\n/* No border of its own — the separator lives on the row (see table.row). Reset with tbody specificity\n (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak in. */\n.pfx-table tbody th {\n border: 0;\n}\n\n/* layout=\"stacked\": stack as a block, labelled by its column via ::before (pure CSS can't pull the\n <th> text automatically, so the author supplies a `data-label` per cell). */\n.pfx-table.-layout-stacked th {\n display: block;\n width: auto;\n}\n\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n content: attr(data-label);\n display: block;\n font-weight: var(--instui-component-table-head-font-weight);\n color: var(--instui-component-table-col-header-color);\n}\n"
569
569
  }.rebrand;
570
570
  const tabs$1 = {
571
- "rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab:many {}\n * }\n * .panel:many {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope > .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",
572
- "canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab:many {}\n * }\n * .panel:many {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope > .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",
573
- "canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab:many {}\n * }\n * .panel:many {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope > .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"
571
+ "rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab:many {}\n * }\n * .panel:many {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope {\n > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n\n &.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n &.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n }\n}\n",
572
+ "canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab:many {}\n * }\n * .panel:many {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope {\n > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n\n &.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n &.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n }\n}\n",
573
+ "canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab:many {}\n * }\n * .panel:many {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope {\n > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n\n &.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n &.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n }\n}\n"
574
574
  }.rebrand;
575
575
  const tabsPanel$1 = {
576
- "rebrand": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n * .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n :scope > .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",
577
- "canvas": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n * .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n :scope > .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",
578
- "canvasHighContrast": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n * .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n :scope > .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"
576
+ "rebrand": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n * .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n :scope {\n > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n\n > .panel[hidden] {\n display: none;\n }\n }\n}\n",
577
+ "canvas": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n * .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n :scope {\n > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n\n > .panel[hidden] {\n display: none;\n }\n }\n}\n",
578
+ "canvasHighContrast": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n * .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n :scope {\n > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n\n > .panel[hidden] {\n display: none;\n }\n }\n}\n"
579
579
  }.rebrand;
580
580
  const tabsTab$1 = {
581
- "rebrand": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n * .list {\n * .tab {}\n * }\n * }\n */\n@scope (.pfx-tabs) {\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 (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n tab's bottom border matches the panel 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",
582
- "canvas": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n * .list {\n * .tab {}\n * }\n * }\n */\n@scope (.pfx-tabs) {\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 (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n tab's bottom border matches the panel 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",
583
- "canvasHighContrast": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n * .list {\n * .tab {}\n * }\n * }\n */\n@scope (.pfx-tabs) {\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 (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n tab's bottom border matches the panel 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"
581
+ "rebrand": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n * .list {\n * .tab {}\n * }\n * }\n */\n@scope (.pfx-tabs) {\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 (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n tab's bottom border matches the panel background so it visually connects into the panel below. */\n :scope {\n &.-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 &.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n\n &.-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 &.-variant-secondary .tab.-selected,\n &.-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}\n",
582
+ "canvas": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n * .list {\n * .tab {}\n * }\n * }\n */\n@scope (.pfx-tabs) {\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 (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n tab's bottom border matches the panel background so it visually connects into the panel below. */\n :scope {\n &.-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 &.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n\n &.-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 &.-variant-secondary .tab.-selected,\n &.-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}\n",
583
+ "canvasHighContrast": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n * .list {\n * .tab {}\n * }\n * }\n */\n@scope (.pfx-tabs) {\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 (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n tab's bottom border matches the panel background so it visually connects into the panel below. */\n :scope {\n &.-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 &.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n\n &.-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 &.-variant-secondary .tab.-selected,\n &.-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}\n"
584
584
  }.rebrand;
585
585
  const tag$1 = {
586
- "rebrand": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n",
587
- "canvas": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n",
588
- "canvasHighContrast": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n"
586
+ "rebrand": "/**\n * @component tag\n * @selector .pfx-tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n@scope (.pfx-tag) {\n & {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n }\n\n &:hover {\n background: var(--instui-component-tag-default-background-hover);\n }\n\n &.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n }\n\n &.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n }\n\n &.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n }\n\n &.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n }\n\n &.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n }\n\n /* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n &.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n }\n\n &.-readonly.-inline::after {\n display: none;\n }\n}\n",
587
+ "canvas": "/**\n * @component tag\n * @selector .pfx-tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n@scope (.pfx-tag) {\n & {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n }\n\n &:hover {\n background: var(--instui-component-tag-default-background-hover);\n }\n\n &.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n }\n\n &.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n }\n\n &.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n }\n\n &.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n }\n\n &.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n }\n\n /* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n &.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n }\n\n &.-readonly.-inline::after {\n display: none;\n }\n}\n",
588
+ "canvasHighContrast": "/**\n * @component tag\n * @selector .pfx-tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n@scope (.pfx-tag) {\n & {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n }\n\n &:hover {\n background: var(--instui-component-tag-default-background-hover);\n }\n\n &.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n }\n\n &.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n }\n\n &.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n }\n\n &.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n }\n\n &.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n }\n\n /* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n &.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n }\n\n &.-readonly.-inline::after {\n display: none;\n }\n}\n"
589
589
  }.rebrand;
590
590
  const text$1 = {
591
- "rebrand": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">AI highlight text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n font-style: italic;\n}\n\n.pfx-text.-color-primary {\n color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n}\n\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n\n.pfx-text.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n}\n\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n\n.pfx-text.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n}\n\n.pfx-text.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n}\n\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n",
592
- "canvas": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">AI highlight text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n font-style: italic;\n}\n\n.pfx-text.-color-primary {\n color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n}\n\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n\n.pfx-text.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n}\n\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n\n.pfx-text.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n}\n\n.pfx-text.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n}\n\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n",
593
- "canvasHighContrast": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">AI highlight text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n font-style: italic;\n}\n\n.pfx-text.-color-primary {\n color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n}\n\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n\n.pfx-text.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n}\n\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n\n.pfx-text.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n}\n\n.pfx-text.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n}\n\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n"
591
+ "rebrand": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n & {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n }\n\n &.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n }\n\n &.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n }\n\n &.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n }\n\n &.-style-italic {\n font-style: italic;\n }\n\n &.-color-primary {\n color: var(--instui-component-text-primary-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-text-muted-color);\n }\n\n &.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n }\n\n &.-color-success {\n color: var(--instui-component-text-success-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-text-error-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-text-warning-color);\n }\n\n &:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n }\n\n &.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n }\n\n &.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n }\n\n &.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n }\n\n &.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n }\n\n &.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n }\n\n &.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n &.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n }\n\n &.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n }\n\n &.-transform-uppercase {\n text-transform: uppercase;\n }\n\n &.-transform-lowercase {\n text-transform: lowercase;\n }\n\n &.-transform-capitalize {\n text-transform: capitalize;\n }\n}\n",
592
+ "canvas": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n & {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n }\n\n &.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n }\n\n &.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n }\n\n &.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n }\n\n &.-style-italic {\n font-style: italic;\n }\n\n &.-color-primary {\n color: var(--instui-component-text-primary-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-text-muted-color);\n }\n\n &.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n }\n\n &.-color-success {\n color: var(--instui-component-text-success-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-text-error-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-text-warning-color);\n }\n\n &:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n }\n\n &.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n }\n\n &.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n }\n\n &.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n }\n\n &.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n }\n\n &.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n }\n\n &.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n &.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n }\n\n &.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n }\n\n &.-transform-uppercase {\n text-transform: uppercase;\n }\n\n &.-transform-lowercase {\n text-transform: lowercase;\n }\n\n &.-transform-capitalize {\n text-transform: capitalize;\n }\n}\n",
593
+ "canvasHighContrast": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n & {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n }\n\n &.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n }\n\n &.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n }\n\n &.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n }\n\n &.-style-italic {\n font-style: italic;\n }\n\n &.-color-primary {\n color: var(--instui-component-text-primary-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-text-muted-color);\n }\n\n &.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n }\n\n &.-color-success {\n color: var(--instui-component-text-success-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-text-error-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-text-warning-color);\n }\n\n &:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n }\n\n &.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n }\n\n &.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n }\n\n &.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n }\n\n &.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n }\n\n &.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n }\n\n &.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n &.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n }\n\n &.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n }\n\n &.-transform-uppercase {\n text-transform: uppercase;\n }\n\n &.-transform-lowercase {\n text-transform: lowercase;\n }\n\n &.-transform-capitalize {\n text-transform: capitalize;\n }\n}\n"
594
594
  }.rebrand;
595
595
  const toggleDetails$1 = {
596
- "rebrand": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n",
597
- "canvas": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n",
598
- "canvasHighContrast": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n"
596
+ "rebrand": "/**\n * @component toggle-details\n * @selector .pfx-toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n@scope (.pfx-toggle-details) {\n & {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n }\n\n /* Kill the native disclosure marker; we supply a rotating chevron. */\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n &.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n }\n\n /* variant=\"filled\": the summary reads as an action-secondary button. */\n &.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n }\n\n & > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n }\n\n &.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n }\n\n &.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n}\n",
597
+ "canvas": "/**\n * @component toggle-details\n * @selector .pfx-toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n@scope (.pfx-toggle-details) {\n & {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n }\n\n /* Kill the native disclosure marker; we supply a rotating chevron. */\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n &.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n }\n\n /* variant=\"filled\": the summary reads as an action-secondary button. */\n &.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n }\n\n & > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n }\n\n &.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n }\n\n &.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n}\n",
598
+ "canvasHighContrast": "/**\n * @component toggle-details\n * @selector .pfx-toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n@scope (.pfx-toggle-details) {\n & {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n }\n\n /* Kill the native disclosure marker; we supply a rotating chevron. */\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n &.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n }\n\n /* variant=\"filled\": the summary reads as an action-secondary button. */\n &.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n }\n\n & > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n }\n\n &.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n }\n\n &.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n}\n"
599
599
  }.rebrand;
600
600
  const toggleGroup$1 = {
601
- "rebrand": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n",
602
- "canvas": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n",
603
- "canvasHighContrast": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n"
601
+ "rebrand": "/**\n * @component toggle-group\n * @selector .pfx-toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n@scope (.pfx-toggle-group) {\n & {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n }\n\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* the collapsible content: separated from the header by a top border in the group colour */\n & > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary,\n &.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary,\n &.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n\n /* border={false} */\n &.-without-border {\n border: 0;\n }\n\n &.-without-border > :not(summary) {\n border-block-start: 0;\n }\n}\n",
602
+ "canvas": "/**\n * @component toggle-group\n * @selector .pfx-toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n@scope (.pfx-toggle-group) {\n & {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n }\n\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* the collapsible content: separated from the header by a top border in the group colour */\n & > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary,\n &.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary,\n &.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n\n /* border={false} */\n &.-without-border {\n border: 0;\n }\n\n &.-without-border > :not(summary) {\n border-block-start: 0;\n }\n}\n",
603
+ "canvasHighContrast": "/**\n * @component toggle-group\n * @selector .pfx-toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n@scope (.pfx-toggle-group) {\n & {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n }\n\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* the collapsible content: separated from the header by a top border in the group colour */\n & > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary,\n &.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary,\n &.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n\n /* border={false} */\n &.-without-border {\n border: 0;\n }\n\n &.-without-border > :not(summary) {\n border-block-start: 0;\n }\n}\n"
604
604
  }.rebrand;
605
605
  const tooltip$1 = {
606
606
  "rebrand": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n :scope {\n position: relative;\n display: inline-flex;\n\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n\n /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n &.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n }\n\n &.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n }\n\n &.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n }\n }\n\n /* Show on hover or keyboard focus of the trigger. */\n &:hover > .tip,\n &:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n",
@@ -608,29 +608,29 @@ const tooltip$1 = {
608
608
  "canvasHighContrast": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n :scope {\n position: relative;\n display: inline-flex;\n\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n\n /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n &.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n }\n\n &.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n }\n\n &.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n }\n }\n\n /* Show on hover or keyboard focus of the trigger. */\n &:hover > .tip,\n &:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n"
609
609
  }.rebrand;
610
610
  const tray$1 = {
611
- "rebrand": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n * <span class=\"pfx-heading -level-h3\">Filters</span>\n * <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n * @component close-button:optional {}\n * slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n\n.pfx-tray.-placement-start {\n inset-inline: 0 auto;\n}\n\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n\n.pfx-tray.-size-md {\n inline-size: var(--instui-component-tray-width-md);\n}\n\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n\n[popover].pfx-tray {\n margin: 0;\n}\n\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n --tray-slide-x: -100%;\n --tray-slide-y: 0%;\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translate(0, 0);\n }\n\n [popover].pfx-tray:not(:popover-open) {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n }\n\n /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n specificity, and the top/bottom resets must come after this generic flip in source order. */\n [dir=\"rtl\"] .pfx-tray {\n --tray-slide-x: 100%;\n }\n\n .pfx-tray.-placement-end {\n --tray-slide-x: 100%;\n }\n\n [dir=\"rtl\"] .pfx-tray.-placement-end {\n --tray-slide-x: -100%;\n }\n\n .pfx-tray.-placement-top {\n --tray-slide-x: 0%;\n --tray-slide-y: -100%;\n }\n\n .pfx-tray.-placement-bottom {\n --tray-slide-x: 0%;\n --tray-slide-y: 100%;\n }\n}\n",
612
- "canvas": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n * <span class=\"pfx-heading -level-h3\">Filters</span>\n * <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n * @component close-button:optional {}\n * slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n\n.pfx-tray.-placement-start {\n inset-inline: 0 auto;\n}\n\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n\n.pfx-tray.-size-md {\n inline-size: var(--instui-component-tray-width-md);\n}\n\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n\n[popover].pfx-tray {\n margin: 0;\n}\n\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n --tray-slide-x: -100%;\n --tray-slide-y: 0%;\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translate(0, 0);\n }\n\n [popover].pfx-tray:not(:popover-open) {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n }\n\n /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n specificity, and the top/bottom resets must come after this generic flip in source order. */\n [dir=\"rtl\"] .pfx-tray {\n --tray-slide-x: 100%;\n }\n\n .pfx-tray.-placement-end {\n --tray-slide-x: 100%;\n }\n\n [dir=\"rtl\"] .pfx-tray.-placement-end {\n --tray-slide-x: -100%;\n }\n\n .pfx-tray.-placement-top {\n --tray-slide-x: 0%;\n --tray-slide-y: -100%;\n }\n\n .pfx-tray.-placement-bottom {\n --tray-slide-x: 0%;\n --tray-slide-y: 100%;\n }\n}\n",
613
- "canvasHighContrast": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n * <span class=\"pfx-heading -level-h3\">Filters</span>\n * <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n * @component close-button:optional {}\n * slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n\n.pfx-tray.-placement-start {\n inset-inline: 0 auto;\n}\n\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n\n.pfx-tray.-size-md {\n inline-size: var(--instui-component-tray-width-md);\n}\n\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n\n[popover].pfx-tray {\n margin: 0;\n}\n\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n --tray-slide-x: -100%;\n --tray-slide-y: 0%;\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translate(0, 0);\n }\n\n [popover].pfx-tray:not(:popover-open) {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n }\n\n /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n specificity, and the top/bottom resets must come after this generic flip in source order. */\n [dir=\"rtl\"] .pfx-tray {\n --tray-slide-x: 100%;\n }\n\n .pfx-tray.-placement-end {\n --tray-slide-x: 100%;\n }\n\n [dir=\"rtl\"] .pfx-tray.-placement-end {\n --tray-slide-x: -100%;\n }\n\n .pfx-tray.-placement-top {\n --tray-slide-x: 0%;\n --tray-slide-y: -100%;\n }\n\n .pfx-tray.-placement-bottom {\n --tray-slide-x: 0%;\n --tray-slide-y: 100%;\n }\n}\n"
611
+ "rebrand": "/**\n * @component tray\n * @selector .pfx-tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n * <span class=\"pfx-heading -level-h3\">Filters</span>\n * <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n * @component close-button:optional {}\n * slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n@scope (.pfx-tray) {\n & {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid\n var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n }\n\n &.-placement-start {\n inset-inline: 0 auto;\n }\n\n &.-placement-end {\n inset-inline: auto 0;\n }\n\n &.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n }\n\n &.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n }\n\n &.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n }\n\n &.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n }\n\n &.-size-md {\n inline-size: var(--instui-component-tray-width-md);\n }\n\n &.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n }\n\n &.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n }\n\n &[popover] {\n margin: 0;\n }\n\n &[is=\"dialog\"],\n dialog& {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid\n var(--instui-component-tray-border-color);\n }\n\n /* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n @supports (transition-behavior: allow-discrete) {\n &[popover] {\n --tray-slide-x: -100%;\n --tray-slide-y: 0%;\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translate(0, 0);\n }\n\n &[popover]:not(:popover-open) {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n\n @starting-style {\n &[popover]:popover-open {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n }\n\n /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n specificity, and the top/bottom resets must come after this generic flip in source order. */\n [dir=\"rtl\"] & {\n --tray-slide-x: 100%;\n }\n\n &.-placement-end {\n --tray-slide-x: 100%;\n }\n\n [dir=\"rtl\"] &.-placement-end {\n --tray-slide-x: -100%;\n }\n\n &.-placement-top {\n --tray-slide-x: 0%;\n --tray-slide-y: -100%;\n }\n\n &.-placement-bottom {\n --tray-slide-x: 0%;\n --tray-slide-y: 100%;\n }\n }\n}\n",
612
+ "canvas": "/**\n * @component tray\n * @selector .pfx-tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n * <span class=\"pfx-heading -level-h3\">Filters</span>\n * <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n * @component close-button:optional {}\n * slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n@scope (.pfx-tray) {\n & {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid\n var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n }\n\n &.-placement-start {\n inset-inline: 0 auto;\n }\n\n &.-placement-end {\n inset-inline: auto 0;\n }\n\n &.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n }\n\n &.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n }\n\n &.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n }\n\n &.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n }\n\n &.-size-md {\n inline-size: var(--instui-component-tray-width-md);\n }\n\n &.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n }\n\n &.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n }\n\n &[popover] {\n margin: 0;\n }\n\n &[is=\"dialog\"],\n dialog& {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid\n var(--instui-component-tray-border-color);\n }\n\n /* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n @supports (transition-behavior: allow-discrete) {\n &[popover] {\n --tray-slide-x: -100%;\n --tray-slide-y: 0%;\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translate(0, 0);\n }\n\n &[popover]:not(:popover-open) {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n\n @starting-style {\n &[popover]:popover-open {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n }\n\n /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n specificity, and the top/bottom resets must come after this generic flip in source order. */\n [dir=\"rtl\"] & {\n --tray-slide-x: 100%;\n }\n\n &.-placement-end {\n --tray-slide-x: 100%;\n }\n\n [dir=\"rtl\"] &.-placement-end {\n --tray-slide-x: -100%;\n }\n\n &.-placement-top {\n --tray-slide-x: 0%;\n --tray-slide-y: -100%;\n }\n\n &.-placement-bottom {\n --tray-slide-x: 0%;\n --tray-slide-y: 100%;\n }\n }\n}\n",
613
+ "canvasHighContrast": "/**\n * @component tray\n * @selector .pfx-tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n * <span class=\"pfx-heading -level-h3\">Filters</span>\n * <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n * @component close-button:optional {}\n * slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n@scope (.pfx-tray) {\n & {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid\n var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n }\n\n &.-placement-start {\n inset-inline: 0 auto;\n }\n\n &.-placement-end {\n inset-inline: auto 0;\n }\n\n &.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n }\n\n &.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n }\n\n &.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n }\n\n &.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n }\n\n &.-size-md {\n inline-size: var(--instui-component-tray-width-md);\n }\n\n &.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n }\n\n &.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n }\n\n &[popover] {\n margin: 0;\n }\n\n &[is=\"dialog\"],\n dialog& {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid\n var(--instui-component-tray-border-color);\n }\n\n /* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n @supports (transition-behavior: allow-discrete) {\n &[popover] {\n --tray-slide-x: -100%;\n --tray-slide-y: 0%;\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translate(0, 0);\n }\n\n &[popover]:not(:popover-open) {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n\n @starting-style {\n &[popover]:popover-open {\n transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n }\n }\n\n /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n specificity, and the top/bottom resets must come after this generic flip in source order. */\n [dir=\"rtl\"] & {\n --tray-slide-x: 100%;\n }\n\n &.-placement-end {\n --tray-slide-x: 100%;\n }\n\n [dir=\"rtl\"] &.-placement-end {\n --tray-slide-x: -100%;\n }\n\n &.-placement-top {\n --tray-slide-x: 0%;\n --tray-slide-y: -100%;\n }\n\n &.-placement-bottom {\n --tray-slide-x: 0%;\n --tray-slide-y: 100%;\n }\n }\n}\n"
614
614
  }.rebrand;
615
615
  const treeBrowser$1 = {
616
- "rebrand": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n",
617
- "canvas": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n",
618
- "canvasHighContrast": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n"
616
+ "rebrand": "/**\n * @component tree-browser\n * @selector .pfx-tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n@scope (.pfx-tree-browser) {\n & {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n }\n\n /* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n & details > summary,\n & .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n }\n\n & details > summary [class*=\"-icon-\"],\n & .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n & details > summary::-webkit-details-marker {\n display: none;\n }\n\n /* The disclosure chevron rotates open (same technique as toggle-details). */\n & details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n & details[open] > summary::before {\n transform: rotate(90deg);\n }\n\n & details > summary:hover,\n & .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n }\n\n & details > summary.-selected,\n & .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n }\n\n /* Nested lists indent; the leaf list carries no bullets. */\n & ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n }\n\n &.-size-sm details > summary,\n &.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n }\n\n &.-size-lg details > summary,\n &.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n }\n}\n",
617
+ "canvas": "/**\n * @component tree-browser\n * @selector .pfx-tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n@scope (.pfx-tree-browser) {\n & {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n }\n\n /* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n & details > summary,\n & .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n }\n\n & details > summary [class*=\"-icon-\"],\n & .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n & details > summary::-webkit-details-marker {\n display: none;\n }\n\n /* The disclosure chevron rotates open (same technique as toggle-details). */\n & details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n & details[open] > summary::before {\n transform: rotate(90deg);\n }\n\n & details > summary:hover,\n & .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n }\n\n & details > summary.-selected,\n & .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n }\n\n /* Nested lists indent; the leaf list carries no bullets. */\n & ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n }\n\n &.-size-sm details > summary,\n &.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n }\n\n &.-size-lg details > summary,\n &.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n }\n}\n",
618
+ "canvasHighContrast": "/**\n * @component tree-browser\n * @selector .pfx-tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n@scope (.pfx-tree-browser) {\n & {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n }\n\n /* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n & details > summary,\n & .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n }\n\n & details > summary [class*=\"-icon-\"],\n & .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n & details > summary::-webkit-details-marker {\n display: none;\n }\n\n /* The disclosure chevron rotates open (same technique as toggle-details). */\n & details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n & details[open] > summary::before {\n transform: rotate(90deg);\n }\n\n & details > summary:hover,\n & .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n }\n\n & details > summary.-selected,\n & .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n }\n\n /* Nested lists indent; the leaf list carries no bullets. */\n & ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n }\n\n &.-size-sm details > summary,\n &.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n }\n\n &.-size-lg details > summary,\n &.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n }\n}\n"
619
619
  }.rebrand;
620
620
  const icon$1 = {
621
- "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, .-icon-icon, .-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",
622
- "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, .-icon-icon, .-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",
623
- "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, .-icon-icon, .-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"
621
+ "rebrand": "/**\n * @utility icon\n * @selector .pfx-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@scope (.pfx-icon) {\n & {\n display: inline-flex;\n }\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",
622
+ "canvas": "/**\n * @utility icon\n * @selector .pfx-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@scope (.pfx-icon) {\n & {\n display: inline-flex;\n }\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",
623
+ "canvasHighContrast": "/**\n * @utility icon\n * @selector .pfx-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@scope (.pfx-icon) {\n & {\n display: inline-flex;\n }\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"
624
624
  }.rebrand;
625
625
  const screenReaderContent$1 = {
626
- "rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n.pfx-screen-reader-content, .-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
627
- "canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n.pfx-screen-reader-content, .-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
628
- "canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n.pfx-screen-reader-content, .-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
626
+ "rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n@scope (.pfx-screen-reader-content) {\n & {\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",
627
+ "canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n@scope (.pfx-screen-reader-content) {\n & {\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",
628
+ "canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n@scope (.pfx-screen-reader-content) {\n & {\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"
629
629
  }.rebrand;
630
630
  const transition$1 = {
631
- "rebrand": "/**\n * @utility transition\n * @selector .instui-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n syntax: \"<time>\";\n inherits: true;\n initial-value: 300ms;\n}\n\n@property --timing {\n syntax: \"*\";\n inherits: true;\n initial-value: ease-in-out;\n}\n\n.pfx-transition, .-transition-transition, .-transition {\n transition:\n opacity var(--duration) var(--timing),\n transform var(--duration) var(--timing);\n}\n\n.pfx-transition.-transition-fade-exiting,\n.-transition-transition-fade-exiting,\n.-transition-fade-exiting,\n.pfx-transition.-transition-fade-exited,\n.-transition-transition-fade-exited,\n.-transition-fade-exited {\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-fade-entering,\n.-transition-transition-fade-entering,\n.-transition-fade-entering,\n.pfx-transition.-transition-fade-entered,\n.-transition-transition-fade-entered,\n.-transition-fade-entered {\n opacity: 1;\n}\n\n.pfx-transition.-transition-scale-exiting,\n.-transition-transition-scale-exiting,\n.-transition-scale-exiting,\n.pfx-transition.-transition-scale-exited,\n.-transition-transition-scale-exited,\n.-transition-scale-exited {\n transform: scale(0.01) translate3d(0, 0, 0);\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-scale-entering,\n.-transition-transition-scale-entering,\n.-transition-scale-entering,\n.pfx-transition.-transition-scale-entered,\n.-transition-transition-scale-entered,\n.-transition-scale-entered {\n transform: scale(1) translate3d(0, 0, 0);\n opacity: 1;\n}\n\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-slide-right-exiting,\n.-transition-transition-slide-right-exiting,\n.-transition-slide-right-exiting,\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited {\n transform: translate3d(100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-left-exiting,\n.-transition-transition-slide-left-exiting,\n.-transition-slide-left-exiting,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited {\n transform: translate3d(-100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-up-exiting,\n.-transition-transition-slide-up-exiting,\n.-transition-slide-up-exiting,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited {\n transform: translate3d(0, -100%, 0);\n}\n\n.pfx-transition.-transition-slide-down-exiting,\n.-transition-transition-slide-down-exiting,\n.-transition-slide-down-exiting,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n transform: translate3d(0, 100%, 0);\n}\n\n.pfx-transition.-transition-slide-right-entering,\n.-transition-transition-slide-right-entering,\n.-transition-slide-right-entering,\n.pfx-transition.-transition-slide-left-entering,\n.-transition-transition-slide-left-entering,\n.-transition-slide-left-entering,\n.pfx-transition.-transition-slide-up-entering,\n.-transition-transition-slide-up-entering,\n.-transition-slide-up-entering,\n.pfx-transition.-transition-slide-down-entering,\n.-transition-transition-slide-down-entering,\n.-transition-slide-down-entering,\n.pfx-transition.-transition-slide-right-entered,\n.-transition-transition-slide-right-entered,\n.-transition-slide-right-entered,\n.pfx-transition.-transition-slide-left-entered,\n.-transition-transition-slide-left-entered,\n.-transition-slide-left-entered,\n.pfx-transition.-transition-slide-up-entered,\n.-transition-transition-slide-up-entered,\n.-transition-slide-up-entered,\n.pfx-transition.-transition-slide-down-entered,\n.-transition-transition-slide-down-entered,\n.-transition-slide-down-entered {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n",
632
- "canvas": "/**\n * @utility transition\n * @selector .instui-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n syntax: \"<time>\";\n inherits: true;\n initial-value: 300ms;\n}\n\n@property --timing {\n syntax: \"*\";\n inherits: true;\n initial-value: ease-in-out;\n}\n\n.pfx-transition, .-transition-transition, .-transition {\n transition:\n opacity var(--duration) var(--timing),\n transform var(--duration) var(--timing);\n}\n\n.pfx-transition.-transition-fade-exiting,\n.-transition-transition-fade-exiting,\n.-transition-fade-exiting,\n.pfx-transition.-transition-fade-exited,\n.-transition-transition-fade-exited,\n.-transition-fade-exited {\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-fade-entering,\n.-transition-transition-fade-entering,\n.-transition-fade-entering,\n.pfx-transition.-transition-fade-entered,\n.-transition-transition-fade-entered,\n.-transition-fade-entered {\n opacity: 1;\n}\n\n.pfx-transition.-transition-scale-exiting,\n.-transition-transition-scale-exiting,\n.-transition-scale-exiting,\n.pfx-transition.-transition-scale-exited,\n.-transition-transition-scale-exited,\n.-transition-scale-exited {\n transform: scale(0.01) translate3d(0, 0, 0);\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-scale-entering,\n.-transition-transition-scale-entering,\n.-transition-scale-entering,\n.pfx-transition.-transition-scale-entered,\n.-transition-transition-scale-entered,\n.-transition-scale-entered {\n transform: scale(1) translate3d(0, 0, 0);\n opacity: 1;\n}\n\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-slide-right-exiting,\n.-transition-transition-slide-right-exiting,\n.-transition-slide-right-exiting,\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited {\n transform: translate3d(100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-left-exiting,\n.-transition-transition-slide-left-exiting,\n.-transition-slide-left-exiting,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited {\n transform: translate3d(-100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-up-exiting,\n.-transition-transition-slide-up-exiting,\n.-transition-slide-up-exiting,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited {\n transform: translate3d(0, -100%, 0);\n}\n\n.pfx-transition.-transition-slide-down-exiting,\n.-transition-transition-slide-down-exiting,\n.-transition-slide-down-exiting,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n transform: translate3d(0, 100%, 0);\n}\n\n.pfx-transition.-transition-slide-right-entering,\n.-transition-transition-slide-right-entering,\n.-transition-slide-right-entering,\n.pfx-transition.-transition-slide-left-entering,\n.-transition-transition-slide-left-entering,\n.-transition-slide-left-entering,\n.pfx-transition.-transition-slide-up-entering,\n.-transition-transition-slide-up-entering,\n.-transition-slide-up-entering,\n.pfx-transition.-transition-slide-down-entering,\n.-transition-transition-slide-down-entering,\n.-transition-slide-down-entering,\n.pfx-transition.-transition-slide-right-entered,\n.-transition-transition-slide-right-entered,\n.-transition-slide-right-entered,\n.pfx-transition.-transition-slide-left-entered,\n.-transition-transition-slide-left-entered,\n.-transition-slide-left-entered,\n.pfx-transition.-transition-slide-up-entered,\n.-transition-transition-slide-up-entered,\n.-transition-slide-up-entered,\n.pfx-transition.-transition-slide-down-entered,\n.-transition-transition-slide-down-entered,\n.-transition-slide-down-entered {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n",
633
- "canvasHighContrast": "/**\n * @utility transition\n * @selector .instui-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n syntax: \"<time>\";\n inherits: true;\n initial-value: 300ms;\n}\n\n@property --timing {\n syntax: \"*\";\n inherits: true;\n initial-value: ease-in-out;\n}\n\n.pfx-transition, .-transition-transition, .-transition {\n transition:\n opacity var(--duration) var(--timing),\n transform var(--duration) var(--timing);\n}\n\n.pfx-transition.-transition-fade-exiting,\n.-transition-transition-fade-exiting,\n.-transition-fade-exiting,\n.pfx-transition.-transition-fade-exited,\n.-transition-transition-fade-exited,\n.-transition-fade-exited {\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-fade-entering,\n.-transition-transition-fade-entering,\n.-transition-fade-entering,\n.pfx-transition.-transition-fade-entered,\n.-transition-transition-fade-entered,\n.-transition-fade-entered {\n opacity: 1;\n}\n\n.pfx-transition.-transition-scale-exiting,\n.-transition-transition-scale-exiting,\n.-transition-scale-exiting,\n.pfx-transition.-transition-scale-exited,\n.-transition-transition-scale-exited,\n.-transition-scale-exited {\n transform: scale(0.01) translate3d(0, 0, 0);\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-scale-entering,\n.-transition-transition-scale-entering,\n.-transition-scale-entering,\n.pfx-transition.-transition-scale-entered,\n.-transition-transition-scale-entered,\n.-transition-scale-entered {\n transform: scale(1) translate3d(0, 0, 0);\n opacity: 1;\n}\n\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n opacity: 0.01;\n}\n\n.pfx-transition.-transition-slide-right-exiting,\n.-transition-transition-slide-right-exiting,\n.-transition-slide-right-exiting,\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited {\n transform: translate3d(100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-left-exiting,\n.-transition-transition-slide-left-exiting,\n.-transition-slide-left-exiting,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited {\n transform: translate3d(-100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-up-exiting,\n.-transition-transition-slide-up-exiting,\n.-transition-slide-up-exiting,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited {\n transform: translate3d(0, -100%, 0);\n}\n\n.pfx-transition.-transition-slide-down-exiting,\n.-transition-transition-slide-down-exiting,\n.-transition-slide-down-exiting,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n transform: translate3d(0, 100%, 0);\n}\n\n.pfx-transition.-transition-slide-right-entering,\n.-transition-transition-slide-right-entering,\n.-transition-slide-right-entering,\n.pfx-transition.-transition-slide-left-entering,\n.-transition-transition-slide-left-entering,\n.-transition-slide-left-entering,\n.pfx-transition.-transition-slide-up-entering,\n.-transition-transition-slide-up-entering,\n.-transition-slide-up-entering,\n.pfx-transition.-transition-slide-down-entering,\n.-transition-transition-slide-down-entering,\n.-transition-slide-down-entering,\n.pfx-transition.-transition-slide-right-entered,\n.-transition-transition-slide-right-entered,\n.-transition-slide-right-entered,\n.pfx-transition.-transition-slide-left-entered,\n.-transition-transition-slide-left-entered,\n.-transition-slide-left-entered,\n.pfx-transition.-transition-slide-up-entered,\n.-transition-transition-slide-up-entered,\n.-transition-slide-up-entered,\n.pfx-transition.-transition-slide-down-entered,\n.-transition-transition-slide-down-entered,\n.-transition-slide-down-entered {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n"
631
+ "rebrand": "/**\n * @utility transition\n * @selector .pfx-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n syntax: \"<time>\";\n inherits: true;\n initial-value: 300ms;\n}\n\n@property --timing {\n syntax: \"*\";\n inherits: true;\n initial-value: ease-in-out;\n}\n\n@scope (.pfx-transition) {\n & {\n transition:\n opacity var(--duration) var(--timing),\n transform var(--duration) var(--timing);\n }\n\n &.-transition-fade-exiting,\n &.-transition-fade-exited {\n opacity: 0.01;\n }\n\n &.-transition-fade-entering,\n &.-transition-fade-entered {\n opacity: 1;\n }\n\n &.-transition-scale-exiting,\n &.-transition-scale-exited {\n transform: scale(0.01) translate3d(0, 0, 0);\n opacity: 0.01;\n }\n\n &.-transition-scale-entering,\n &.-transition-scale-entered {\n transform: scale(1) translate3d(0, 0, 0);\n opacity: 1;\n }\n\n &.-transition-slide-right-exited,\n &.-transition-slide-left-exited,\n &.-transition-slide-up-exited,\n &.-transition-slide-down-exited {\n opacity: 0.01;\n }\n\n &.-transition-slide-right-exiting,\n &.-transition-slide-right-exited {\n transform: translate3d(100%, 0, 0);\n }\n\n &.-transition-slide-left-exiting,\n &.-transition-slide-left-exited {\n transform: translate3d(-100%, 0, 0);\n }\n\n &.-transition-slide-up-exiting,\n &.-transition-slide-up-exited {\n transform: translate3d(0, -100%, 0);\n }\n\n &.-transition-slide-down-exiting,\n &.-transition-slide-down-exited {\n transform: translate3d(0, 100%, 0);\n }\n\n &.-transition-slide-right-entering,\n &.-transition-slide-left-entering,\n &.-transition-slide-up-entering,\n &.-transition-slide-down-entering,\n &.-transition-slide-right-entered,\n &.-transition-slide-left-entered,\n &.-transition-slide-up-entered,\n &.-transition-slide-down-entered {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n",
632
+ "canvas": "/**\n * @utility transition\n * @selector .pfx-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n syntax: \"<time>\";\n inherits: true;\n initial-value: 300ms;\n}\n\n@property --timing {\n syntax: \"*\";\n inherits: true;\n initial-value: ease-in-out;\n}\n\n@scope (.pfx-transition) {\n & {\n transition:\n opacity var(--duration) var(--timing),\n transform var(--duration) var(--timing);\n }\n\n &.-transition-fade-exiting,\n &.-transition-fade-exited {\n opacity: 0.01;\n }\n\n &.-transition-fade-entering,\n &.-transition-fade-entered {\n opacity: 1;\n }\n\n &.-transition-scale-exiting,\n &.-transition-scale-exited {\n transform: scale(0.01) translate3d(0, 0, 0);\n opacity: 0.01;\n }\n\n &.-transition-scale-entering,\n &.-transition-scale-entered {\n transform: scale(1) translate3d(0, 0, 0);\n opacity: 1;\n }\n\n &.-transition-slide-right-exited,\n &.-transition-slide-left-exited,\n &.-transition-slide-up-exited,\n &.-transition-slide-down-exited {\n opacity: 0.01;\n }\n\n &.-transition-slide-right-exiting,\n &.-transition-slide-right-exited {\n transform: translate3d(100%, 0, 0);\n }\n\n &.-transition-slide-left-exiting,\n &.-transition-slide-left-exited {\n transform: translate3d(-100%, 0, 0);\n }\n\n &.-transition-slide-up-exiting,\n &.-transition-slide-up-exited {\n transform: translate3d(0, -100%, 0);\n }\n\n &.-transition-slide-down-exiting,\n &.-transition-slide-down-exited {\n transform: translate3d(0, 100%, 0);\n }\n\n &.-transition-slide-right-entering,\n &.-transition-slide-left-entering,\n &.-transition-slide-up-entering,\n &.-transition-slide-down-entering,\n &.-transition-slide-right-entered,\n &.-transition-slide-left-entered,\n &.-transition-slide-up-entered,\n &.-transition-slide-down-entered {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n",
633
+ "canvasHighContrast": "/**\n * @utility transition\n * @selector .pfx-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n syntax: \"<time>\";\n inherits: true;\n initial-value: 300ms;\n}\n\n@property --timing {\n syntax: \"*\";\n inherits: true;\n initial-value: ease-in-out;\n}\n\n@scope (.pfx-transition) {\n & {\n transition:\n opacity var(--duration) var(--timing),\n transform var(--duration) var(--timing);\n }\n\n &.-transition-fade-exiting,\n &.-transition-fade-exited {\n opacity: 0.01;\n }\n\n &.-transition-fade-entering,\n &.-transition-fade-entered {\n opacity: 1;\n }\n\n &.-transition-scale-exiting,\n &.-transition-scale-exited {\n transform: scale(0.01) translate3d(0, 0, 0);\n opacity: 0.01;\n }\n\n &.-transition-scale-entering,\n &.-transition-scale-entered {\n transform: scale(1) translate3d(0, 0, 0);\n opacity: 1;\n }\n\n &.-transition-slide-right-exited,\n &.-transition-slide-left-exited,\n &.-transition-slide-up-exited,\n &.-transition-slide-down-exited {\n opacity: 0.01;\n }\n\n &.-transition-slide-right-exiting,\n &.-transition-slide-right-exited {\n transform: translate3d(100%, 0, 0);\n }\n\n &.-transition-slide-left-exiting,\n &.-transition-slide-left-exited {\n transform: translate3d(-100%, 0, 0);\n }\n\n &.-transition-slide-up-exiting,\n &.-transition-slide-up-exited {\n transform: translate3d(0, -100%, 0);\n }\n\n &.-transition-slide-down-exiting,\n &.-transition-slide-down-exited {\n transform: translate3d(0, 100%, 0);\n }\n\n &.-transition-slide-right-entering,\n &.-transition-slide-left-entering,\n &.-transition-slide-up-entering,\n &.-transition-slide-down-entering,\n &.-transition-slide-right-entered,\n &.-transition-slide-left-entered,\n &.-transition-slide-up-entered,\n &.-transition-slide-down-entered {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n"
634
634
  }.rebrand;
635
635
  const visualDebug$1 = {
636
636
  "rebrand": "/**\n * @utility visual-debug\n * @selector .-with-visual-debug\n * @global\n * @summary A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance.\n * @cssproperty --pantoken-visual-debug-color — The outline colour (default a bright magenta); retint it to change every debug outline.\n * @example\n * <div class=\"instui-view -with-visual-debug\">\n * <span>Outlined child.</span>\n * </div>\n */\n.-with-visual-debug {\n outline: 0.0625rem solid var(--pantoken-visual-debug-color, #f42272);\n}\n\n.-with-visual-debug > * {\n outline: 0.0625rem dashed var(--pantoken-visual-debug-color, #f42272);\n}\n",
@@ -3141,7 +3141,7 @@ ${base} {
3141
3141
  overflow-wrap: break-word;
3142
3142
  word-break: break-all;
3143
3143
  font-family: var(--instui-component-truncate-text-font-family);
3144
- line-height: var(--instui-component-truncate-text-line-height);
3144
+ line-height: var(--instui-line-height-paragraph-base);
3145
3145
  }
3146
3146
 
3147
3147
  ${character} { word-break: break-all; }