npm - @pantoken/components - Versions diffs - 0.2.6 → 0.2.8 - Mend

@pantoken/components 0.2.6 → 0.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -26,16 +26,8 @@ interface ComponentOptions {
   theme?: ComponentTheme;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@cssdoc+core@0.7.9/node_modules/@cssdoc/core/dist/lite-CLGf1QSF.d.mts
-/**
- * What kind of CSS surface a record documents. `component` is a namespaced component class with
- * `-modifier`s and parts; `utility` a single-purpose class family; `rule` bare-element/reset styling;
- * `declaration` a custom-property / `@property` registration layer. The record-opening tag chooses it
- * (`@component`/`@utility`/`@rule`/`@declaration`); `@name` is an alias for `component`.
- */
-type CssRecordKind = "component" | "utility" | "rule" | "declaration";
-//#endregion
 //#region src/lib/define.d.ts
+type CssRecordKind = "component" | "utility" | "rule" | "declaration";
 /** A resolved record: `rules(prefix)` emits the doc block plus CSS body for the aggregator, and `css(options)` returns the standalone header-wrapped sheet. */
 interface Definition {
   name: string;

package/dist/index.mjs CHANGED Viewed

@@ -140,6 +140,14 @@ const SPACING_SIDES = {
 //#endregion
 //#region src/lib/define.ts
 /**
+* `defineComponent`/`defineUtility`/`defineRule`/`defineDeclaration` — the ergonomic wrappers over
+* {@link record}. Each takes the record metadata plus a `css: (p) => string` body builder and returns
+* a {@link Definition}: `rules(p)` (doc block + body, what the aggregator concatenates) and
+* `css(options)` (the wrapped standalone sheet, what the exported `xxxCss` returns).
+*
+* @module
+*/
+/**
 * Split a record's leading `/** … *\/` doc comment from its CSS body. The alias post-processors scan
 * for `{ … }` rule bodies, so they must never see the comment's `{@link …}` braces — `make()` runs them
 * on the body alone and recombines. Tolerates leading whitespace before `/**` (an authored template
@@ -208,9 +216,9 @@ const defineRule = (input) => make("rule", input);
 */
 const SENTINEL = "pfx-";
 const alert$1 = {
-	"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
-	"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
-	"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n"
+	"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
+	"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
+	"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n"
 }.rebrand;
 const avatar$1 = {
 	"rebrand": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--instui-component-avatar-background-color);\n  color: var(--instui-component-avatar-blue-text-color);\n  border: var(--instui-component-avatar-border-width-sm) solid\n    var(--instui-component-avatar-border-color);\n  font-family: var(--instui-component-avatar-font-family);\n  font-size: var(--instui-component-avatar-font-size-md);\n  font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n  border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n  width: var(--instui-component-avatar-size-sm);\n  height: var(--instui-component-avatar-size-sm);\n  font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n  width: var(--instui-component-avatar-size2xs);\n  height: var(--instui-component-avatar-size2xs);\n  font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n  width: var(--instui-component-avatar-size-xs);\n  height: var(--instui-component-avatar-size-xs);\n  font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n  width: var(--instui-component-avatar-size-lg);\n  height: var(--instui-component-avatar-size-lg);\n  font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n  width: var(--instui-component-avatar-size-xl);\n  height: var(--instui-component-avatar-size-xl);\n  font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n  width: var(--instui-component-avatar-size2xl);\n  height: var(--instui-component-avatar-size2xl);\n  font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n  color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n  background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n  color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n  color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n  background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n  color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n  background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n  color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n  background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n  color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n  background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n  background: linear-gradient(\n    to bottom,\n    var(--instui-component-avatar-ai-top-gradient-color),\n    var(--instui-component-avatar-ai-bottom-gradient-color)\n  );\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n   `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n  border-width: var(--instui-component-avatar-border-width-md);\n  border-style: solid;\n  border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n",
@@ -269,9 +277,9 @@ const formFieldGroup$1 = {
 	"canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n"
 }.rebrand;
 const formFieldMessages$1 = {
-	"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
+	"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
 }.rebrand;
 const formField$1 = {
 	"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
@@ -349,9 +357,9 @@ const radio$1 = {
 	"canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n"
 }.rebrand;
 const rangeInput$1 = {
-	"rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
-	"canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
-	"canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
+	"rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
+	"canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
+	"canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
 }.rebrand;
 const rating$1 = {
 	"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n",
@@ -434,9 +442,9 @@ const mask$1 = {
 	"canvasHighContrast": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n"
 }.rebrand;
 const screenReaderContent$1 = {
-	"rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
+	"rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
 }.rebrand;
 const base$1 = {
 	"rebrand": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n  margin: 0;\n}\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/components",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "An InstUI-look CSS component library from the pantoken tokens: prose/content styling plus class-based components (button, alert, badge).",
   "homepage": "https://pantoken.iywahl.com",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",