@pantoken/components 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +15 -15
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -217,9 +217,9 @@ const defineRule = (input) => make("rule", input);
|
|
|
217
217
|
*/
|
|
218
218
|
const SENTINEL = "pfx-";
|
|
219
219
|
const alert$1 = {
|
|
220
|
-
"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
221
|
-
"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
222
|
-
"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
|
|
220
|
+
"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
221
|
+
"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
|
|
222
|
+
"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
|
|
223
223
|
}.rebrand;
|
|
224
224
|
const avatar$1 = {
|
|
225
225
|
"rebrand": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid\n var(--instui-component-avatar-border-color);\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n",
|
|
@@ -308,9 +308,9 @@ const list$1 = {
|
|
|
308
308
|
"canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n * <li>First item</li>\n * <li>Second item</li>\n * <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n * li {}\n * }\n */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n margin: 0;\n}\n"
|
|
309
309
|
}.rebrand;
|
|
310
310
|
const menu$1 = {
|
|
311
|
-
"rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n
|
|
312
|
-
"canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n
|
|
313
|
-
"canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n
|
|
311
|
+
"rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n",
|
|
312
|
+
"canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n",
|
|
313
|
+
"canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n"
|
|
314
314
|
}.rebrand;
|
|
315
315
|
const metric$1 = {
|
|
316
316
|
"rebrand": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n",
|
|
@@ -328,9 +328,9 @@ const pagination$1 = {
|
|
|
328
328
|
"canvasHighContrast": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page {}\n * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page,\n :scope > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .page:hover,\n :scope > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :scope > .page[aria-current],\n :scope > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n :scope > .page[aria-current]:hover,\n :scope > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n :scope > .arrow:disabled,\n :scope > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n :scope > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n :scope > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
|
|
329
329
|
}.rebrand;
|
|
330
330
|
const pill$1 = {
|
|
331
|
-
"rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"
|
|
332
|
-
"canvas": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"
|
|
333
|
-
"canvasHighContrast": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"
|
|
331
|
+
"rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
|
|
332
|
+
"canvas": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
|
|
333
|
+
"canvasHighContrast": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n"
|
|
334
334
|
}.rebrand;
|
|
335
335
|
const popover$1 = {
|
|
336
336
|
"rebrand": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n",
|
|
@@ -348,9 +348,9 @@ const progress$1 = {
|
|
|
348
348
|
"canvasHighContrast": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n * <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n :scope.-should-animate > .bar {\n transition: width 0.5s ease;\n }\n}\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n"
|
|
349
349
|
}.rebrand;
|
|
350
350
|
const radioInputGroup$1 = {
|
|
351
|
-
"rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
|
|
352
|
-
"canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
|
|
353
|
-
"canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n"
|
|
351
|
+
"rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
|
|
352
|
+
"canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
|
|
353
|
+
"canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n"
|
|
354
354
|
}.rebrand;
|
|
355
355
|
const radio$1 = {
|
|
356
356
|
"rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n",
|
|
@@ -378,9 +378,9 @@ const sideNavBar$1 = {
|
|
|
378
378
|
"canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n * <a class=\"item -selected\" href=\"#\">\n * <span class=\"pfx-icon -icon-house\"></span>\n * <span class=\"label\">Home</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-inbox\"></span>\n * <span class=\"label\">Inbox</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-calendar\"></span>\n * <span class=\"label\">Calendar</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-settings\"></span>\n * <span class=\"label\">Settings</span>\n * </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n.pfx-side-nav-bar {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-side-nav-bar-content-gap);\n padding: var(--instui-component-side-nav-bar-content-margin);\n box-sizing: border-box;\n inline-size: fit-content;\n /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n block-size: 100%;\n min-block-size: 100%;\n background: var(--instui-component-side-nav-bar-background-color);\n color: var(--instui-component-side-nav-bar-font-color);\n font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n :scope > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n :scope > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n :scope > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n display: none;\n}\n"
|
|
379
379
|
}.rebrand;
|
|
380
380
|
const spinner$1 = {
|
|
381
|
-
"rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -
|
|
382
|
-
"canvas": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -
|
|
383
|
-
"canvasHighContrast": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -
|
|
381
|
+
"rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
|
|
382
|
+
"canvas": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
|
|
383
|
+
"canvasHighContrast": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n"
|
|
384
384
|
}.rebrand;
|
|
385
385
|
const table$1 = {
|
|
386
386
|
"rebrand": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * tr {\n * th {}\n * }\n * }\n * tbody {\n * tr {\n * th {}\n * td {}\n * }\n * }\n * }\n */\n.pfx-table {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n table-layout: fixed;\n}\n.pfx-table thead {\n background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n text-align: start;\n background: var(--instui-component-table-col-header-background);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n line-height: var(--instui-component-table-col-header-line-height);\n padding: var(--instui-component-table-col-header-padding-vertical)\n var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n background: var(--instui-component-table-row-header-background);\n color: var(--instui-component-table-row-header-color);\n font-weight: var(--instui-component-table-row-header-font-weight);\n line-height: var(--instui-component-table-row-header-line-height);\n padding: var(--instui-component-table-row-header-padding-vertical)\n var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n color: var(--instui-component-table-cell-color);\n line-height: var(--instui-component-table-cell-line-height);\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n display: block;\n width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n padding: var(--instui-component-table-row-padding-vertical)\n var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n content: attr(data-label);\n display: block;\n font-weight: var(--instui-component-table-head-font-weight);\n color: var(--instui-component-table-col-header-color);\n}\n",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pantoken/components",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "An InstUI-look CSS component library from the pantoken tokens: prose/content styling plus class-based components (button, alert, badge).",
|
|
5
5
|
"homepage": "https://pantoken.iywahl.com",
|
|
6
6
|
"bugs": "https://github.com/thedannywahl/pantoken/issues",
|