@pantoken/components 0.7.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/avatar.css +1 -1
  2. package/dist/badge.css +1 -1
  3. package/dist/byline.css +1 -1
  4. package/dist/components.css +1 -1
  5. package/dist/drawer-layout.content.css +1 -0
  6. package/dist/drawer-layout.css +1 -0
  7. package/dist/drawer-layout.tray.css +1 -0
  8. package/dist/index.d.mts +13 -1
  9. package/dist/index.mjs +132 -85
  10. package/dist/metric.css +1 -1
  11. package/dist/prose.css +1 -1
  12. package/dist/spinner.css +1 -1
  13. package/dist/text.css +1 -1
  14. package/dist/tooltip.css +1 -1
  15. package/dist/tray.css +1 -1
  16. package/dist/utilities/cursor.css +1 -1
  17. package/dist/utilities/mask.css +1 -1
  18. package/dist/utilities/position.css +1 -1
  19. package/dist/utilities/stacking.css +1 -1
  20. package/dist/utilities.css +1 -1
  21. package/package.json +7 -7
package/dist/index.mjs CHANGED
@@ -310,14 +310,14 @@ const alert$1 = {
310
310
  "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 pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @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"
311
311
  }.rebrand;
312
312
  const avatar$1 = {
313
- "rebrand": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. 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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n 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\n.pfx-avatar.-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.pfx-avatar:not(:has(> img)) {\n border-color: var(--instui-component-avatar-border-color);\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/* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n.pfx-avatar[data-initials] {\n font-size: 0;\n}\n\n.pfx-avatar[data-initials]::before {\n content: attr(data-initials);\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\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.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.pfx-avatar.-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@scope (.pfx-avatar) {\n :scope:not(:has([class*=\"-name\"])) .name,\n :scope:not(:has(.name)) .first-name,\n :scope: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",
314
- "canvas": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. 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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n 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\n.pfx-avatar.-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.pfx-avatar:not(:has(> img)) {\n border-color: var(--instui-component-avatar-border-color);\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/* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n.pfx-avatar[data-initials] {\n font-size: 0;\n}\n\n.pfx-avatar[data-initials]::before {\n content: attr(data-initials);\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\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.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.pfx-avatar.-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@scope (.pfx-avatar) {\n :scope:not(:has([class*=\"-name\"])) .name,\n :scope:not(:has(.name)) .first-name,\n :scope: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",
315
- "canvasHighContrast": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. 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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n 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\n.pfx-avatar.-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.pfx-avatar:not(:has(> img)) {\n border-color: var(--instui-component-avatar-border-color);\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/* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n.pfx-avatar[data-initials] {\n font-size: 0;\n}\n\n.pfx-avatar[data-initials]::before {\n content: attr(data-initials);\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\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.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.pfx-avatar.-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@scope (.pfx-avatar) {\n :scope:not(:has([class*=\"-name\"])) .name,\n :scope:not(:has(.name)) .first-name,\n :scope: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"
313
+ "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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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",
314
+ "canvas": "/**\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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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",
315
+ "canvasHighContrast": "/**\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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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"
316
316
  }.rebrand;
317
317
  const badge$1 = {
318
- "rebrand": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n",
319
- "canvas": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n",
320
- "canvasHighContrast": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n"
318
+ "rebrand": "/**\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",
319
+ "canvas": "/**\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",
320
+ "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"
321
321
  }.rebrand;
322
322
  const billboardByTheme = {
323
323
  "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",
@@ -331,24 +331,24 @@ const breadcrumb$1 = {
331
331
  "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"
332
332
  }.rebrand;
333
333
  const breadcrumbLink$1 = {
334
- "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 * @scope (.pfx-breadcrumb) {\n * li {\n * a { }\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",
335
- "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 * @scope (.pfx-breadcrumb) {\n * li {\n * a { }\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",
336
- "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 * @scope (.pfx-breadcrumb) {\n * li {\n * a { }\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"
334
+ "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",
335
+ "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",
336
+ "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"
337
337
  }.rebrand;
338
338
  const byline$1 = {
339
- "rebrand": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n",
340
- "canvas": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n",
341
- "canvasHighContrast": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n"
339
+ "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",
340
+ "canvas": "/**\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",
341
+ "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"
342
342
  }.rebrand;
343
343
  const calendar$1 = {
344
- "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 * }\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",
345
- "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 * }\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",
346
- "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 * }\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"
344
+ "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",
345
+ "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",
346
+ "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"
347
347
  }.rebrand;
348
348
  const calendarDay$1 = {
349
- "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 * @scope (.pfx-calendar) {\n * .day {}\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",
350
- "canvas": "/**\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 * @scope (.pfx-calendar) {\n * .day {}\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",
351
- "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 * @scope (.pfx-calendar) {\n * .day {}\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"
349
+ "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",
350
+ "canvas": "/**\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",
351
+ "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"
352
352
  }.rebrand;
353
353
  const checkbox$1 = {
354
354
  "rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --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",
@@ -365,6 +365,21 @@ const contextView$1 = {
365
365
  "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",
366
366
  "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"
367
367
  }.rebrand;
368
+ const drawerLayout$1 = {
369
+ "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",
370
+ "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",
371
+ "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"
372
+ }.rebrand;
373
+ const drawerLayoutContent$1 = {
374
+ "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",
375
+ "canvas": "/**\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",
376
+ "canvasHighContrast": "/**\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"
377
+ }.rebrand;
378
+ const drawerLayoutTray$1 = {
379
+ "rebrand": "/**\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",
380
+ "canvas": "/**\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",
381
+ "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"
382
+ }.rebrand;
368
383
  const fileDrop$1 = {
369
384
  "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",
370
385
  "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",
@@ -401,14 +416,14 @@ const link$1 = {
401
416
  "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"
402
417
  }.rebrand;
403
418
  const list$1 = {
404
- "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 * @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",
405
- "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 * @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
- "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 * @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"
419
+ "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",
420
+ "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",
421
+ "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"
407
422
  }.rebrand;
408
423
  const listItem$1 = {
409
- "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 * .pfx-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",
410
- "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 * .pfx-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
- "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 * .pfx-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"
424
+ "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",
425
+ "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",
426
+ "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"
412
427
  }.rebrand;
413
428
  const mask$1 = {
414
429
  "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",
@@ -416,29 +431,29 @@ const mask$1 = {
416
431
  "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"
417
432
  }.rebrand;
418
433
  const menu$1 = {
419
- "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 * @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",
420
- "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 * @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
- "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 * @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"
434
+ "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",
435
+ "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",
436
+ "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"
422
437
  }.rebrand;
423
438
  const menuGroup$1 = {
424
- "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 * @scope (.pfx-menu) {\n * :scope > .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",
425
- "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 * @scope (.pfx-menu) {\n * :scope > .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
- "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 * @scope (.pfx-menu) {\n * :scope > .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"
439
+ "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",
440
+ "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",
441
+ "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"
427
442
  }.rebrand;
428
443
  const menuItem$1 = {
429
- "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 * @scope (.pfx-menu) {\n * :scope > .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",
430
- "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 * @scope (.pfx-menu) {\n * :scope > .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
- "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 * @scope (.pfx-menu) {\n * :scope > .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"
444
+ "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",
445
+ "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",
446
+ "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"
432
447
  }.rebrand;
433
448
  const menuSeparator$1 = {
434
- "rebrand": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @scope (.pfx-menu) {\n * :scope > .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",
435
- "canvas": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @scope (.pfx-menu) {\n * :scope > .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
- "canvasHighContrast": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @scope (.pfx-menu) {\n * :scope > .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"
449
+ "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",
450
+ "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",
451
+ "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"
437
452
  }.rebrand;
438
453
  const metric$1 = {
439
- "rebrand": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n",
440
- "canvas": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n",
441
- "canvasHighContrast": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n"
454
+ "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",
455
+ "canvas": "/**\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",
456
+ "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"
442
457
  }.rebrand;
443
458
  const modal$1 = {
444
459
  "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",
@@ -446,29 +461,29 @@ const modal$1 = {
446
461
  "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"
447
462
  }.rebrand;
448
463
  const modalBody$1 = {
449
- "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 * @scope (.pfx-modal) {\n * :scope > .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",
450
- "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 * @scope (.pfx-modal) {\n * :scope > .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
- "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 * @scope (.pfx-modal) {\n * :scope > .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"
464
+ "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",
465
+ "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",
466
+ "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"
452
467
  }.rebrand;
453
468
  const modalFooter$1 = {
454
- "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 * @scope (.pfx-modal) {\n * :scope > .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",
455
- "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 * @scope (.pfx-modal) {\n * :scope > .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
- "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 * @scope (.pfx-modal) {\n * :scope > .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"
469
+ "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",
470
+ "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",
471
+ "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"
457
472
  }.rebrand;
458
473
  const modalHeader$1 = {
459
- "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 * @scope (.pfx-modal) {\n * :scope > .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",
460
- "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 * @scope (.pfx-modal) {\n * :scope > .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
- "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 * @scope (.pfx-modal) {\n * :scope > .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"
474
+ "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",
475
+ "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",
476
+ "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"
462
477
  }.rebrand;
463
478
  const pagination$1 = {
464
- "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 * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A 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",
465
- "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 * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A 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
- "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 * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A 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"
479
+ "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",
480
+ "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",
481
+ "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"
467
482
  }.rebrand;
468
483
  const paginationPage$1 = {
469
- "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 * @scope (.pfx-pagination) {\n * :scope > .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",
470
- "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 * @scope (.pfx-pagination) {\n * :scope > .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
- "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 * @scope (.pfx-pagination) {\n * :scope > .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"
484
+ "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",
485
+ "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",
486
+ "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"
472
487
  }.rebrand;
473
488
  const pill$1 = {
474
489
  "rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
@@ -516,24 +531,24 @@ const select = {
516
531
  "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"
517
532
  }.rebrand;
518
533
  const sideNavBar$1 = {
519
- "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 * @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",
520
- "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 * @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
- "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 * @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"
534
+ "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",
535
+ "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",
536
+ "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"
522
537
  }.rebrand;
523
538
  const sideNavBarItem$1 = {
524
- "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 * @scope (.pfx-side-nav-bar) {\n * :scope > .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",
525
- "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 * @scope (.pfx-side-nav-bar) {\n * :scope > .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
- "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 * @scope (.pfx-side-nav-bar) {\n * :scope > .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"
539
+ "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",
540
+ "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",
541
+ "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"
527
542
  }.rebrand;
528
543
  const spinner$1 = {
529
- "rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
530
- "canvas": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
531
- "canvasHighContrast": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n"
544
+ "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",
545
+ "canvas": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@scope (.pfx-spinner) {\n :scope {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n &.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n }\n }\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
546
+ "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"
532
547
  }.rebrand;
533
548
  const table$1 = {
534
- "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 * }\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",
535
- "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 * }\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
- "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 * }\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"
549
+ "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",
550
+ "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",
551
+ "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"
537
552
  }.rebrand;
538
553
  const tableBody$1 = {
539
554
  "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",
@@ -566,19 +581,19 @@ const tableRowHeader$1 = {
566
581
  "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"
567
582
  }.rebrand;
568
583
  const tabs$1 = {
569
- "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 * }\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",
570
- "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 * }\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
- "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 * }\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"
584
+ "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",
585
+ "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",
586
+ "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"
572
587
  }.rebrand;
573
588
  const tabsPanel$1 = {
574
- "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 * @scope (.pfx-tabs) {\n * :scope > .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",
575
- "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 * @scope (.pfx-tabs) {\n * :scope > .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
- "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 * @scope (.pfx-tabs) {\n * :scope > .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"
589
+ "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",
590
+ "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",
591
+ "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"
577
592
  }.rebrand;
578
593
  const tabsTab$1 = {
579
- "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 * @scope (.pfx-tabs) {\n * .tab {}\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",
580
- "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 * @scope (.pfx-tabs) {\n * .tab {}\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
- "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 * @scope (.pfx-tabs) {\n * .tab {}\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"
594
+ "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",
595
+ "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",
596
+ "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"
582
597
  }.rebrand;
583
598
  const tag$1 = {
584
599
  "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",
@@ -586,9 +601,9 @@ const tag$1 = {
586
601
  "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"
587
602
  }.rebrand;
588
603
  const text$1 = {
589
- "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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-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 /* @todo - `--instui-component-text-content-quote-font-weight` token is broken upstream */\n font-weight: 500;\n font-style: italic;\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",
590
- "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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-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 /* @todo - `--instui-component-text-content-quote-font-weight` token is broken upstream */\n font-weight: 500;\n font-style: italic;\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
- "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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-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 /* @todo - `--instui-component-text-content-quote-font-weight` token is broken upstream */\n font-weight: 500;\n font-style: italic;\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"
604
+ "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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-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",
605
+ "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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-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",
606
+ "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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-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
607
  }.rebrand;
593
608
  const toggleDetails$1 = {
594
609
  "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",
@@ -601,14 +616,14 @@ const toggleGroup$1 = {
601
616
  "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"
602
617
  }.rebrand;
603
618
  const tooltip$1 = {
604
- "rebrand": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n",
605
- "canvas": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n",
606
- "canvasHighContrast": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n"
619
+ "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",
620
+ "canvas": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n :scope {\n position: relative;\n display: inline-flex;\n\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n\n /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n &.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n }\n\n &.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n }\n\n &.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n }\n }\n\n /* Show on hover or keyboard focus of the trigger. */\n &:hover > .tip,\n &:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n",
621
+ "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"
607
622
  }.rebrand;
608
623
  const tray$1 = {
609
- "rebrand": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n",
610
- "canvas": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n",
611
- "canvasHighContrast": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n"
624
+ "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",
625
+ "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",
626
+ "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"
612
627
  }.rebrand;
613
628
  const treeBrowser$1 = {
614
629
  "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",
@@ -1064,6 +1079,33 @@ const contextView = defineComponent({
1064
1079
  /** Standalone `contextView` stylesheet — the prefixed CSS for the caret callout, ready to ship as a `.css` file. */
1065
1080
  const contextViewCss = contextView.css;
1066
1081
  //#endregion
1082
+ //#region src/components/drawer-layout/index.ts
1083
+ /** The `drawer-layout` component record: a side tray plus main content in a resizable row. */
1084
+ const drawerLayout = defineComponent({
1085
+ name: "drawer-layout",
1086
+ css: (p) => drawerLayout$1.replaceAll(SENTINEL, p)
1087
+ });
1088
+ /** Standalone `drawer-layout` stylesheet — the prefixed CSS for a resizable side tray layout. */
1089
+ const drawerLayoutCss = drawerLayout.css;
1090
+ //#endregion
1091
+ //#region src/components/drawer-layout/members/content/index.ts
1092
+ /** The `drawer-layout.content` member record: the primary scrollable content pane. */
1093
+ const drawerLayoutContent = defineComponent({
1094
+ name: "drawer-layout.content",
1095
+ css: (p) => drawerLayoutContent$1.replaceAll(SENTINEL, p)
1096
+ });
1097
+ /** Standalone `drawer-layout.content` stylesheet. */
1098
+ const drawerLayoutContentCss = drawerLayoutContent.css;
1099
+ //#endregion
1100
+ //#region src/components/drawer-layout/members/tray/index.ts
1101
+ /** The `drawer-layout.tray` member record: the resizable side panel. */
1102
+ const drawerLayoutTray = defineComponent({
1103
+ name: "drawer-layout.tray",
1104
+ css: (p) => drawerLayoutTray$1.replaceAll(SENTINEL, p)
1105
+ });
1106
+ /** Standalone `drawer-layout.tray` stylesheet. */
1107
+ const drawerLayoutTrayCss = drawerLayoutTray.css;
1108
+ //#endregion
1067
1109
  //#region src/components/file-drop/index.ts
1068
1110
  /** The `fileDrop` component record: a file dropzone with hover, accepted, and rejected states. */
1069
1111
  const fileDrop = defineComponent({
@@ -2184,6 +2226,9 @@ const COMPONENTS = [
2184
2226
  rating,
2185
2227
  toggleGroup,
2186
2228
  contextView,
2229
+ drawerLayout,
2230
+ drawerLayoutTray,
2231
+ drawerLayoutContent,
2187
2232
  progressCircle,
2188
2233
  pagination,
2189
2234
  paginationPage,
@@ -2358,6 +2403,8 @@ ${s} blockquote {
2358
2403
  color: var(--instui-component-text-base-color);
2359
2404
  font-size: var(--instui-component-text-content-quote-font-size);
2360
2405
  line-height: var(--instui-component-text-content-quote-line-height);
2406
+ font-weight: var(--instui-component-text-content-quote-font-weight);
2407
+ font-style: var(--instui-component-text-content-quote-font-style);
2361
2408
  }
2362
2409
 
2363
2410
  ${s} code {
@@ -3240,4 +3287,4 @@ function componentsCss(options = {}) {
3240
3287
  return `/* InstUI component styles (@pantoken/components) — prefix: ${prefix} */\n${COMPONENTS.map((d) => d.rules(ns(prefix), options).trim()).join("\n\n")}\n`;
3241
3288
  }
3242
3289
  //#endregion
3243
- export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, breadcrumbLinkCss, buttonCss, bylineCss, calendarCss, calendarDayCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, cursorUtilitiesCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, gapCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, listItemCss, maskCss, maskUtilityCss, menuCss, menuGroupCss, menuItemCss, menuSeparatorCss, metricCss, modalBodyCss, modalCss, modalFooterCss, modalHeaderCss, numberInputCss, overflowUtilitiesCss, paginationCss, paginationPageCss, pillCss, popoverCss, positionUtilitiesCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, sideNavBarItemCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, stackingUtilityCss, tableBodyCss, tableCellCss, tableColHeaderCss, tableCss, tableHeadCss, tableRowCss, tableRowHeaderCss, tabsCss, tabsPanelCss, tabsTabCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, transitionCss, trayCss, treeBrowserCss, truncateCss, viewCss, visualDebugCss };
3290
+ export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, breadcrumbLinkCss, buttonCss, bylineCss, calendarCss, calendarDayCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, cursorUtilitiesCss, drawerLayoutContentCss, drawerLayoutCss, drawerLayoutTrayCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, gapCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, listItemCss, maskCss, maskUtilityCss, menuCss, menuGroupCss, menuItemCss, menuSeparatorCss, metricCss, modalBodyCss, modalCss, modalFooterCss, modalHeaderCss, numberInputCss, overflowUtilitiesCss, paginationCss, paginationPageCss, pillCss, popoverCss, positionUtilitiesCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, sideNavBarItemCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, stackingUtilityCss, tableBodyCss, tableCellCss, tableColHeaderCss, tableCss, tableHeadCss, tableRowCss, tableRowHeaderCss, tabsCss, tabsPanelCss, tabsTabCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, transitionCss, trayCss, treeBrowserCss, truncateCss, viewCss, visualDebugCss };