@pantoken/components 1.0.3 → 1.1.0
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/alert.css +1 -1
- package/dist/billboard.css +1 -1
- package/dist/breadcrumb.css +1 -1
- package/dist/breadcrumb.link.css +1 -1
- package/dist/button.css +1 -1
- package/dist/close-button.css +1 -1
- package/dist/components.css +1 -1
- package/dist/heading.css +1 -1
- package/dist/icons/user-round-star.css +1 -0
- package/dist/icons/venetian-mask-stem.css +1 -0
- package/dist/icons.css +1 -1
- package/dist/index.d.mts +95 -95
- package/dist/index.mjs +126 -774
- package/dist/input-group.css +1 -1
- package/dist/list.css +1 -1
- package/dist/list.item.css +1 -1
- package/dist/modal.css +1 -1
- package/dist/model.json +14903 -0
- package/dist/number-input.css +1 -1
- package/dist/progress-circle.css +1 -1
- package/dist/progress.css +1 -1
- package/dist/radio.css +1 -1
- package/dist/range-input.css +1 -1
- package/dist/rating.css +1 -1
- package/dist/scaffold-preset.d.mts +2 -3
- package/dist/simple-select.css +1 -1
- package/dist/tag.css +1 -1
- package/dist/text-area.css +1 -1
- package/dist/text-input.css +1 -1
- package/dist/text.css +1 -1
- package/dist/toggle-details.css +1 -1
- package/dist/toggle-group.css +1 -1
- package/dist/tray.css +1 -1
- package/dist/tree-browser.css +1 -1
- package/dist/view.css +1 -1
- package/package.json +17 -15
package/dist/index.mjs
CHANGED
|
@@ -15,6 +15,32 @@ function deprecatedAliasPairs(rawRecord) {
|
|
|
15
15
|
canonical: m[2]
|
|
16
16
|
}));
|
|
17
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* Append generated rules to a record body, landing them INSIDE a trailing `@scope (...) { … }` block
|
|
20
|
+
* (right before its closing brace) rather than after it — a top-level `&` outside any nesting context
|
|
21
|
+
* is invalid CSS, and several `.css`-authored records wrap their whole body in `@scope`. Falls back to a
|
|
22
|
+
* plain append when the body doesn't end in a `@scope` block. Exported for records that need to append
|
|
23
|
+
* their own interpolated, scope-relative (`&`) rules — e.g. button's AI-glyph mask and ghost washes.
|
|
24
|
+
*/
|
|
25
|
+
function appendGenerated(css, extra) {
|
|
26
|
+
const trimmed = css.trimEnd();
|
|
27
|
+
const startsWithScope = trimmed.startsWith("@scope ");
|
|
28
|
+
const scopeAt = startsWithScope ? 0 : trimmed.lastIndexOf("\n@scope ") + 1;
|
|
29
|
+
const openBrace = startsWithScope || scopeAt > 0 ? trimmed.indexOf("{", scopeAt) : -1;
|
|
30
|
+
if (openBrace < 0 || !trimmed.endsWith("}")) return `${css}\n${extra}\n`;
|
|
31
|
+
let depth = 0;
|
|
32
|
+
let closeIdx = -1;
|
|
33
|
+
for (let i = openBrace; i < trimmed.length; i++) if (trimmed[i] === "{") depth++;
|
|
34
|
+
else if (trimmed[i] === "}") {
|
|
35
|
+
depth--;
|
|
36
|
+
if (depth === 0) {
|
|
37
|
+
closeIdx = i;
|
|
38
|
+
break;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
if (closeIdx !== trimmed.length - 1) return `${css}\n${extra}\n`;
|
|
42
|
+
return `${trimmed.slice(0, closeIdx)}\n${extra}\n${trimmed.slice(closeIdx)}\n`;
|
|
43
|
+
}
|
|
18
44
|
/** Long-form spellings for the size scale — emitted as first-class aliases beside the short forms. */
|
|
19
45
|
const SIZE_LONG = {
|
|
20
46
|
"2xs": "xx-small",
|
|
@@ -36,7 +62,7 @@ function withSizeAliases(css) {
|
|
|
36
62
|
const long = selector.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\.-size-(2xs|xs|sm|md|lg|xl|2xl)\b/g, (_m, s) => `.-size-${SIZE_LONG[s]}`).trim();
|
|
37
63
|
extra.push(`${long} ${body}`);
|
|
38
64
|
}
|
|
39
|
-
return extra.length ?
|
|
65
|
+
return extra.length ? appendGenerated(css, `/* size aliases */\n${extra.join("\n")}`) : css;
|
|
40
66
|
}
|
|
41
67
|
/**
|
|
42
68
|
* Document the long-form size twins {@link withSizeAliases} emits: for every short size class the body
|
|
@@ -80,14 +106,14 @@ function withAliases(css, aliases) {
|
|
|
80
106
|
extra.push(`/* alias of .${canonical} */\n${dep} ${body}`);
|
|
81
107
|
}
|
|
82
108
|
}
|
|
83
|
-
return extra.length ?
|
|
109
|
+
return extra.length ? appendGenerated(css, extra.join("\n")) : css;
|
|
84
110
|
}
|
|
85
111
|
//#endregion
|
|
86
112
|
//#region src/lib/helpers.ts
|
|
87
113
|
/**
|
|
88
114
|
* Shared primitives for the component builders: the class-prefix namespace helper, the standalone-sheet
|
|
89
|
-
* `wrap` header,
|
|
90
|
-
*
|
|
115
|
+
* `wrap` header, and the spacing scales. These carry no per-record content — every
|
|
116
|
+
* `src/{components,utilities,rules,declarations}` module imports what it needs from here.
|
|
91
117
|
*
|
|
92
118
|
* @module
|
|
93
119
|
*/
|
|
@@ -98,24 +124,6 @@ const ns = (prefix) => prefix ? `${prefix}-` : "";
|
|
|
98
124
|
/** Prepend the standalone-sheet header comment to a rules string (used by each exported `xxxCss`). */
|
|
99
125
|
const wrap = (name, prefix, rules) => `/* InstUI ${name} (@pantoken/components) — prefix: ${prefix} */\n${rules.trim()}\n`;
|
|
100
126
|
/**
|
|
101
|
-
* A contained, centred mask value pointing at a shared `--instui-icon-<name>` token, painted via
|
|
102
|
-
* `background` (so the glyph takes the element's colour). Masks only — the token's `stroke=currentColor`
|
|
103
|
-
* is irrelevant since the alpha channel drives the mask. Painting a glyph as a `background-image`
|
|
104
|
-
* (which can't read `currentColor`) still needs a colour-baked data URI: see {@link SELECT_CHEVRON}.
|
|
105
|
-
*
|
|
106
|
-
* Only the glyphs still consumed by the TypeScript-authored records (button, the input controls) live
|
|
107
|
-
* here now; the migrated `.css` records inline their `var(--instui-icon-*)` masks directly.
|
|
108
|
-
*/
|
|
109
|
-
const iconMask = (name) => `var(--instui-icon-${name}) center / contain no-repeat`;
|
|
110
|
-
/** Lucide `chevron-down` in the InstUI icon grey — the SimpleSelect caret. A native `<select>` is a
|
|
111
|
-
* replaced element (no pseudo-elements), so the caret is a `background-image`, not `::after`; a data-URI
|
|
112
|
-
* background can't read `currentColor`, so the stroke is a fixed neutral grey that reads in both modes. */
|
|
113
|
-
const SELECT_CHEVRON = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")";
|
|
114
|
-
/** Lucide `chevron-up`/`chevron-down`, masked — the NumberInput spinner glyphs (painted in currentColor). */
|
|
115
|
-
const CHEVRON_UP_ICON = iconMask("chevron-up");
|
|
116
|
-
/** Lucide `chevron-down`, masked — the NumberInput down spinner glyph (painted in currentColor). */
|
|
117
|
-
const CHEVRON_DOWN_ICON = iconMask("chevron-down");
|
|
118
|
-
/**
|
|
119
127
|
* InstUI's `ai` glyph (Solid), inlined as a mask so it paints in the button's own colour — solid
|
|
120
128
|
* white on `--ai`, the violet→sea gradient on `--ai-secondary`. Source: `@instructure/ui-icons`.
|
|
121
129
|
*/
|
|
@@ -292,9 +300,9 @@ const defineRule = (input) => make("rule", input);
|
|
|
292
300
|
*/
|
|
293
301
|
const SENTINEL = "pfx-";
|
|
294
302
|
const alert$1 = {
|
|
295
|
-
"rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @selector .pfx-alert\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * <button class=\"pfx-close-button
|
|
296
|
-
"canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @selector .pfx-alert\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * <button class=\"pfx-close-button
|
|
297
|
-
"canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @selector .pfx-alert\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * <button class=\"pfx-close-button
|
|
303
|
+
"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. A direct close button defaults to small; add a size modifier to override it.\n * @selector .pfx-alert\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n & {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n\n /* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n > .pfx-close-button:not([class*=\"-size-\"]) {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n }\n }\n\n /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n &::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n }\n\n /* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n &::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n }\n\n &:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n }\n\n /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n &.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n\n &.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n }\n\n &.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n }\n\n &.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n }\n\n /* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n &[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n }\n\n &[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n }\n\n &.-timeout-1 {\n --timeout: 1000;\n }\n\n &.-timeout-2 {\n --timeout: 2000;\n }\n\n &.-timeout-3 {\n --timeout: 3000;\n }\n\n &.-timeout-4 {\n --timeout: 4000;\n }\n\n &.-timeout-5 {\n --timeout: 5000;\n }\n\n /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n &:is(.-has-shadow-false, .-without-shadow) {\n box-shadow: none;\n }\n\n &:is(.-variant-info, .-color-info) {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &:is(.-variant-success, .-color-success) {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n }\n\n &:is(.-variant-warning, .-color-warning) {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n }\n\n &:is(.-variant-error, .-color-danger) {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n }\n}\n",
|
|
304
|
+
"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. A direct close button defaults to small; add a size modifier to override it.\n * @selector .pfx-alert\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n & {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n\n /* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n > .pfx-close-button:not([class*=\"-size-\"]) {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n }\n }\n\n /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n &::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n }\n\n /* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n &::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n }\n\n &:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n }\n\n /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n &.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n\n &.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n }\n\n &.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n }\n\n &.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n }\n\n /* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n &[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n }\n\n &[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n }\n\n &.-timeout-1 {\n --timeout: 1000;\n }\n\n &.-timeout-2 {\n --timeout: 2000;\n }\n\n &.-timeout-3 {\n --timeout: 3000;\n }\n\n &.-timeout-4 {\n --timeout: 4000;\n }\n\n &.-timeout-5 {\n --timeout: 5000;\n }\n\n /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n &:is(.-has-shadow-false, .-without-shadow) {\n box-shadow: none;\n }\n\n &:is(.-variant-info, .-color-info) {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &:is(.-variant-success, .-color-success) {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n }\n\n &:is(.-variant-warning, .-color-warning) {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n }\n\n &:is(.-variant-error, .-color-danger) {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n }\n}\n",
|
|
305
|
+
"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. A direct close button defaults to small; add a size modifier to override it.\n * @selector .pfx-alert\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @alias {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n syntax: \"<integer>\";\n inherits: false;\n initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n & {\n --timeout: 0;\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n\n /* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n > .pfx-close-button:not([class*=\"-size-\"]) {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n }\n }\n\n /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n &::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n }\n\n /* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n &::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n }\n\n &:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n }\n\n /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n &.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n\n &.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n }\n\n &.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n }\n\n &.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n }\n\n /* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n &[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n }\n\n &[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n }\n\n &.-timeout-1 {\n --timeout: 1000;\n }\n\n &.-timeout-2 {\n --timeout: 2000;\n }\n\n &.-timeout-3 {\n --timeout: 3000;\n }\n\n &.-timeout-4 {\n --timeout: 4000;\n }\n\n &.-timeout-5 {\n --timeout: 5000;\n }\n\n /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n &:is(.-has-shadow-false, .-without-shadow) {\n box-shadow: none;\n }\n\n &:is(.-variant-info, .-color-info) {\n border-color: var(--instui-component-alert-info-border-color);\n }\n\n &:is(.-variant-success, .-color-success) {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n }\n\n &:is(.-variant-warning, .-color-warning) {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n }\n\n &:is(.-variant-error, .-color-danger) {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n }\n}\n"
|
|
298
306
|
}.rebrand;
|
|
299
307
|
const avatar$1 = {
|
|
300
308
|
"rebrand": "/**\n * @component avatar\n * @selector .pfx-avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border-always — Force the border ring on, even over an image or an inverse fill.\n * @modifier -show-border-never — Force the border ring off.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (the default).\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @modifier -show-border — @alias {@link -show-border-always}\n * @part .name — Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.\n * @part .first-name — Optional (pairs with .last-name): wraps the given name, clipped to its leading letter.\n * @part .last-name — Optional (pairs with .first-name): wraps the family name, clipped to its leading letter.\n * @a11y Give an image avatar a meaningful `alt` (the person's name), not a generic \"avatar\"; for initials-only avatars, prefer real name content (bare text, data-initials, .name, or .first-name/.last-name) over pre-abbreviated letters, so assistive tech announces the real name.\n * @example\n * ```html\n * <span class=\"pfx-avatar --me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai --me-sm\">AI</span>\n * <span class=\"pfx-avatar --me-sm\" data-initials=\"NV\">Dr. Nguyen Van Thoc</span>\n * <span class=\"pfx-avatar\"><span class=\"name\">Miguel Sanchez</span></span>\n * <span class=\"pfx-avatar\"><span class=\"first-name\">Miguel</span> <span class=\"last-name\">Sanchez</span></span>\n * ```\n * @structure\n * The avatar shows one of: an <img>, bare/data-initials text, a .name wrap, or a .first-name/.last-name pair.\n * .pfx-avatar {\n * img:optional {}\n * .name:optional {}\n * .first-name:optional {}\n * .last-name:optional {}\n * }\n * @related byline — Can host an avatar as its leading hero figure.\n * @sealed\n * @stable\n */\n@scope (.pfx-avatar) {\n :scope {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n white-space: nowrap;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid transparent;\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n\n &.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n }\n\n /* showBorder (unset/auto): only an avatar without an image gets the default border ring. */\n &:not(:has(> img)) {\n border-color: var(--instui-component-avatar-border-color);\n }\n\n /* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n &[data-initials] {\n font-size: 0;\n\n &::before {\n content: attr(data-initials);\n font-size: var(--instui-component-avatar-font-size-md);\n }\n }\n\n /* A photo: an <img> child fills the chip and covers the initials (image takes priority). Its\n radius is duplicated per shape (not `inherit`) so a sealed record never carries a reset-like\n value. */\n > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: 50%;\n }\n\n &.-shape-rectangle > img {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n }\n\n /* .name / .first-name+.last-name are mutually exclusive alternatives for a display name, so each\n guards against the other's markup also being present; either way, each part clips to a single\n leading letter — an inline-block can be clamped to 1ch independently of the host's own fixed\n dimensions, which a bare text node inside the flex host cannot. Missing one of first/last just\n leaves the other centred (the host is already a centred flex box) — a precise no-data-initials,\n no-JS fallback either way. */\n &:not(:has([class*=\"-name\"])) .name,\n &:not(:has(.name)) .first-name,\n &:not(:has(.name)) .last-name {\n display: inline-block;\n max-width: 1ch;\n overflow: hidden;\n white-space: nowrap;\n vertical-align: middle;\n }\n }\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n/* Explicit (redundant-with-default) so the medium long-form size alias has a rule to clone. */\n.pfx-avatar.-size-md {\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n font-size: var(--instui-component-avatar-font-size-md);\n}\n\n.pfx-avatar.-size-2xs[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-sm[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-lg[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl[data-initials]::before {\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border-always {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* showBorder=\"never\": force the ring off, even without an image. */\n.pfx-avatar.-show-border-never {\n border-color: transparent;\n}\n",
|
|
@@ -322,6 +330,11 @@ const breadcrumbLink$1 = {
|
|
|
322
330
|
"canvas": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope {\n &.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n &.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n &.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n > ol > li {\n margin: 0;\n }\n\n a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n li:not(:last-child)::after {\n display: none;\n }\n\n li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n }\n}\n",
|
|
323
331
|
"canvasHighContrast": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n * ol {\n * li {\n * a {}\n * }\n * }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n :scope {\n &.-size-sm li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n }\n\n &.-size-md li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n }\n\n &.-size-lg li:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n }\n\n > ol > li {\n margin: 0;\n }\n\n a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n a[class*=\"-icon-\"]::before {\n margin-inline-end: var(--instui-spacing-space2xs);\n }\n\n a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n li:not(:last-child) {\n color: var(--instui-color-text-muted);\n }\n\n li:not(:last-child)::after {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & li:not(:last-child)::after {\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n @media (max-width: 47.9375em) {\n > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n display: none;\n }\n\n li:not(:last-child)::after {\n display: none;\n }\n\n li:nth-last-child(2)::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n vertical-align: -0.125em;\n margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n }\n\n [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n }\n }\n }\n}\n"
|
|
324
332
|
}.rebrand;
|
|
333
|
+
const button$1 = {
|
|
334
|
+
"rebrand": "/**\n * @component button\n * @summary An accessible action control, styled from the token palette; primary by default.\n * @remarks The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and `-color-ai-secondary` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. `-without-background` hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.pfx-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.\n * @selector .pfx-button\n * @modifier -color-primary — (default) the primary action.\n * @modifier -color-secondary — A lower-emphasis secondary action.\n * @modifier -color-tertiary — A text-style action (no fill or border until hover).\n * @modifier -color-danger — A destructive action.\n * @modifier -shape-circle — A round icon button.\n * @modifier -condensed — Tighter padding for dense toolbars.\n * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).\n * @modifier -without-background — Drop the fill (ghost).\n * @modifier -color-success — A positive/confirming action.\n * @modifier -color-ai — An AI action.\n * @modifier -color-ai-secondary — A lower-emphasis AI action.\n * @modifier -color-primary-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @modifier -shape-square — A square icon button.\n * @modifier -display-block — Full-width block button.\n * @modifier -ghost — @deprecated {@link -color-tertiary}\n * @modifier -without-border — Remove the border.\n * @modifier -icon-* — Render a glyph from the icon set before the label (e.g. `-icon-arrow-right`), painted in the button's text colour; pair with `-shape-square`/`-shape-circle` for an icon-only button.\n * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.\n * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.\n * @cssstate disabled\n * @cssstate pressed\n * @a11y Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * ```html\n * <div class=\"pfx-button-group\">\n * <button class=\"pfx-button\">Primary</button>\n * <button class=\"pfx-button -color-secondary\">Secondary</button>\n * </div>\n * ```\n * @wrapper pfx-button-group\n * @structure\n * A group wrapper lays out adjacent buttons with the shared button gap.\n * .pfx-button-group:opt {\n * .pfx-button:one-or-more {}\n * }\n * @related close-button — The icon-only dismiss button.\n * @demo self:button\n */\n@scope (.pfx-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--instui-spacing-space-xs);\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs)\n var(--instui-component-base-button-medium-padding-horizontal);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-base-button-medium-font-size);\n font-weight: var(--instui-font-weight-interactive);\n line-height: var(--instui-line-height-standalone-text-base);\n border: var(--instui-border-width-sm) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n cursor: pointer;\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n &:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-primary-active);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-color);\n cursor: not-allowed;\n }\n\n &.-color-primary {\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-stroke-interactive-action-primary-base);\n }\n\n &.-color-primary:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n }\n\n &.-color-primary:active {\n background: var(--instui-color-background-interactive-action-primary-active);\n border-color: var(--instui-color-stroke-interactive-action-primary-active);\n }\n\n &.-color-primary:disabled,\n &.-color-primary[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-color);\n }\n\n &.-color-secondary {\n background: var(--instui-component-base-button-secondary-background);\n color: var(--instui-component-base-button-secondary-color);\n border-color: var(--instui-component-base-button-secondary-border-color);\n }\n\n &.-color-secondary:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &.-color-secondary:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n\n &.-color-secondary:disabled,\n &.-color-secondary[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-secondary-disabled-background-color);\n border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n color: var(--instui-component-base-button-secondary-disabled-text-color);\n }\n\n &.-color-danger {\n background: var(--instui-color-background-interactive-action-destructive-base);\n color: var(--instui-color-text-interactive-action-status-base);\n }\n\n &.-color-danger:hover {\n background: var(--instui-color-background-interactive-action-destructive-hover);\n }\n\n &.-color-danger:active {\n background: var(--instui-color-background-interactive-action-destructive-active);\n }\n\n &.-color-success {\n background: var(--instui-color-background-interactive-action-success-base);\n color: var(--instui-color-text-interactive-action-status-base);\n }\n\n &.-color-success:hover {\n background: var(--instui-color-background-interactive-action-success-hover);\n }\n\n &.-color-tertiary,\n &.-ghost {\n background: transparent;\n color: var(--instui-component-base-button-primary-ghost-color);\n border-color: var(--instui-component-base-button-primary-ghost-border-color);\n }\n\n &.-color-tertiary:hover,\n &.-ghost:hover {\n background: var(--instui-component-base-button-primary-ghost-hover-background);\n border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n color: var(--instui-component-base-button-tertiary-hover-text-color);\n }\n\n &.-color-tertiary:active,\n &.-ghost:active {\n background: var(--instui-component-base-button-primary-ghost-active-background);\n border-color: var(--instui-component-base-button-tertiary-active-border-color);\n color: var(--instui-component-base-button-tertiary-active-text-color);\n }\n\n &.-color-tertiary:disabled,\n &.-color-tertiary[aria-disabled=\"true\"],\n &.-ghost:disabled,\n &.-ghost[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n color: var(--instui-component-base-button-tertiary-disabled-text-color);\n }\n\n &.-color-primary-inverse {\n background: var(--instui-component-base-button-primary-inverse-background);\n color: var(--instui-component-base-button-primary-inverse-color);\n border-color: var(--instui-component-base-button-primary-inverse-border-color);\n }\n\n /* On hover the border tracks the (light) hover fill, so it reads as no visible border. */\n &.-color-primary-inverse:hover {\n background: var(--instui-component-base-button-primary-inverse-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n }\n\n &.-color-primary-inverse:active {\n background: var(--instui-component-base-button-primary-inverse-active-background);\n border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n }\n\n /*\n * --on-color composes with primary (default) and secondary for a button placed on a coloured\n * surface, reading the full base/hover/active/disabled set from the on-color colour tokens rather\n * than the component layer (which only aliases hover/active/disabled). Primary fills white with\n * dark text; secondary stays transparent with a white border and text — there's no\n * secondary-on-color background token, matching InstUI.\n */\n &.-on-color:not([class*=\"-color-\"]),\n &.-color-primary.-on-color {\n background: var(--instui-component-base-button-primary-inverse-background);\n border-color: var(--instui-component-base-button-primary-inverse-border-color);\n color: var(--instui-component-base-button-primary-inverse-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):hover,\n &.-color-primary.-on-color:hover {\n background: var(--instui-component-base-button-primary-inverse-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):active,\n &.-color-primary.-on-color:active {\n background: var(--instui-component-base-button-primary-inverse-active-background);\n border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n color: var(--instui-component-base-button-primary-on-color-active-text-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):disabled,\n &.-on-color:not([class*=\"-color-\"])[aria-disabled=\"true\"],\n &.-color-primary.-on-color:disabled,\n &.-color-primary.-on-color[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n }\n\n &.-color-secondary.-on-color {\n background: transparent;\n border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n }\n\n &.-color-secondary.-on-color:hover {\n background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n color: var(--instui-component-base-button-secondary-on-color-hover-text-color);\n }\n\n &.-color-secondary.-on-color:active {\n background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n color: var(--instui-component-base-button-secondary-on-color-active-text-color);\n }\n\n &.-color-secondary.-on-color:disabled,\n &.-color-secondary.-on-color[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n color: var(--instui-component-base-button-secondary-on-color-disabled-text-color);\n }\n\n /*\n * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)\n * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added\n * automatically via ::before (appended in index.ts, which needs the shared AI_ICON_MASK constant).\n */\n &.-color-ai {\n color: var(--instui-color-text-interactive-action-ai-base);\n border-color: transparent;\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n )\n border-box;\n }\n\n &.-color-ai:hover {\n color: var(--instui-color-text-interactive-action-ai-hover);\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%\n )\n border-box;\n }\n\n &.-color-ai:active {\n color: var(--instui-color-text-interactive-action-ai-active);\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%\n )\n border-box;\n }\n\n &.-color-ai:disabled,\n &.-color-ai[aria-disabled=\"true\"] {\n color: var(--instui-component-base-button-ai-disabled-text-color);\n border-color: var(--instui-component-base-button-ai-disabled-border-color);\n background: var(--instui-component-base-button-ai-disabled-background-color);\n }\n\n /*\n * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,\n * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph\n * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at\n * once, so — like InstUI's rest state — the centre stays transparent.\n */\n &.-color-ai-secondary {\n position: relative;\n border-color: transparent;\n background: linear-gradient(\n to bottom,\n var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%,\n var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n /*\n * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's\n * transparent border. The negative inset reaches out over that border; the radius is inherited, so\n * it stays concentric with the button's outer corners.\n */\n &.-color-ai-secondary::after {\n content: \"\";\n position: absolute;\n inset: calc(-1 * var(--instui-border-width-md));\n border-radius: inherit;\n padding: var(--instui-border-width-sm);\n background: linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n );\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n pointer-events: none;\n }\n\n /*\n * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —\n * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.\n */\n &.-color-ai-secondary:hover,\n &.-color-ai-secondary:active {\n -webkit-background-clip: border-box;\n background-clip: border-box;\n color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);\n -webkit-text-fill-color: currentColor;\n }\n\n &.-color-ai-secondary:hover {\n background: linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%,\n var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%\n );\n }\n\n &.-color-ai-secondary:active {\n background: linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%,\n var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%\n );\n }\n\n &.-color-ai-secondary:disabled,\n &.-color-ai-secondary[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-ai-disabled-border-color);\n color: var(--instui-component-base-button-ai-disabled-text-color);\n -webkit-text-fill-color: currentColor;\n }\n\n /* The ai glyph's background; the mask itself is appended in index.ts (needs the shared AI_ICON_MASK). */\n &.-color-ai::before {\n background: var(--instui-color-text-interactive-action-ai-base);\n }\n\n &.-color-ai-secondary::before {\n background: linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n );\n }\n\n &.-color-ai:disabled::before,\n &.-color-ai[aria-disabled=\"true\"]::before,\n &.-color-ai-secondary:disabled::before,\n &.-color-ai-secondary[aria-disabled=\"true\"]::before {\n background: var(--instui-component-icon-action-ai-disabled-color);\n }\n\n /*\n * --without-background is InstUI's withBackground={false}: a transparent button in the\n * primary ghost tokens. `-ghost` is a deprecated alias of `-color-tertiary` above.\n */\n &.-without-background {\n background: var(--instui-component-base-button-primary-ghost-background);\n color: var(--instui-component-base-button-primary-ghost-color);\n border-color: var(--instui-component-base-button-primary-ghost-border-color);\n }\n\n /* --block is InstUI's display=\"block\": a full-width button. */\n &.-display-block {\n display: flex;\n width: 100%;\n }\n\n &.-size-sm {\n font-size: var(--instui-component-base-button-small-font-size);\n min-height: var(--instui-component-base-button-small-height);\n padding-inline: var(--instui-component-base-button-small-padding-horizontal);\n }\n\n &.-size-md {\n font-size: var(--instui-component-base-button-medium-font-size);\n min-height: var(--instui-component-base-button-medium-height);\n padding-inline: var(--instui-component-base-button-medium-padding-horizontal);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-base-button-large-font-size);\n min-height: var(--instui-component-base-button-large-height);\n padding-inline: var(--instui-component-base-button-large-padding-horizontal);\n }\n\n &.-shape-square {\n padding: var(--instui-spacing-space-xs);\n aspect-ratio: 1;\n }\n\n &.-shape-circle {\n padding: var(--instui-spacing-space-xs);\n aspect-ratio: 1;\n border-radius: 50%;\n }\n\n /*\n * A composed `-icon-<name>` rides the shared icon painter (utilities/icon), so a text button needs no\n * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only\n * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a\n * (missing) label's cap height.\n */\n &.-shape-square[class*=\"-icon-\"]::before,\n &.-shape-circle[class*=\"-icon-\"]::before {\n inline-size: 1.25em;\n block-size: 1.25em;\n }\n\n &.-condensed {\n background: transparent;\n border-color: transparent;\n min-height: 0;\n color: var(--instui-color-text-interactive-action-secondary-base);\n padding-inline: var(--instui-spacing-space-xs);\n }\n\n &.-condensed:hover {\n background: var(--instui-color-background-muted);\n }\n\n &.-toggle[aria-pressed=\"true\"] {\n background: var(--instui-color-background-interactive-action-secondary-active);\n border-color: var(--instui-color-stroke-interactive-action-secondary-active);\n color: var(--instui-color-text-interactive-action-secondary-base);\n }\n\n /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */\n &.-without-border {\n border-style: none;\n }\n}\n\n.pfx-button-group {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n",
|
|
335
|
+
"canvas": "/**\n * @component button\n * @summary An accessible action control, styled from the token palette; primary by default.\n * @remarks The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and `-color-ai-secondary` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. `-without-background` hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.pfx-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.\n * @selector .pfx-button\n * @modifier -color-primary — (default) the primary action.\n * @modifier -color-secondary — A lower-emphasis secondary action.\n * @modifier -color-tertiary — A text-style action (no fill or border until hover).\n * @modifier -color-danger — A destructive action.\n * @modifier -shape-circle — A round icon button.\n * @modifier -condensed — Tighter padding for dense toolbars.\n * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).\n * @modifier -without-background — Drop the fill (ghost).\n * @modifier -color-success — A positive/confirming action.\n * @modifier -color-ai — An AI action.\n * @modifier -color-ai-secondary — A lower-emphasis AI action.\n * @modifier -color-primary-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @modifier -shape-square — A square icon button.\n * @modifier -display-block — Full-width block button.\n * @modifier -ghost — @deprecated {@link -color-tertiary}\n * @modifier -without-border — Remove the border.\n * @modifier -icon-* — Render a glyph from the icon set before the label (e.g. `-icon-arrow-right`), painted in the button's text colour; pair with `-shape-square`/`-shape-circle` for an icon-only button.\n * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.\n * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.\n * @cssstate disabled\n * @cssstate pressed\n * @a11y Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * ```html\n * <div class=\"pfx-button-group\">\n * <button class=\"pfx-button\">Primary</button>\n * <button class=\"pfx-button -color-secondary\">Secondary</button>\n * </div>\n * ```\n * @wrapper pfx-button-group\n * @structure\n * A group wrapper lays out adjacent buttons with the shared button gap.\n * .pfx-button-group:opt {\n * .pfx-button:one-or-more {}\n * }\n * @related close-button — The icon-only dismiss button.\n * @demo self:button\n */\n@scope (.pfx-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--instui-spacing-space-xs);\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs)\n var(--instui-component-base-button-medium-padding-horizontal);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-base-button-medium-font-size);\n font-weight: var(--instui-font-weight-interactive);\n line-height: var(--instui-line-height-standalone-text-base);\n border: var(--instui-border-width-sm) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n cursor: pointer;\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n &:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-primary-active);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-color);\n cursor: not-allowed;\n }\n\n &.-color-primary {\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-stroke-interactive-action-primary-base);\n }\n\n &.-color-primary:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n }\n\n &.-color-primary:active {\n background: var(--instui-color-background-interactive-action-primary-active);\n border-color: var(--instui-color-stroke-interactive-action-primary-active);\n }\n\n &.-color-primary:disabled,\n &.-color-primary[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-color);\n }\n\n &.-color-secondary {\n background: var(--instui-component-base-button-secondary-background);\n color: var(--instui-component-base-button-secondary-color);\n border-color: var(--instui-component-base-button-secondary-border-color);\n }\n\n &.-color-secondary:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &.-color-secondary:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n\n &.-color-secondary:disabled,\n &.-color-secondary[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-secondary-disabled-background-color);\n border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n color: var(--instui-component-base-button-secondary-disabled-text-color);\n }\n\n &.-color-danger {\n background: var(--instui-color-background-interactive-action-destructive-base);\n color: var(--instui-color-text-interactive-action-status-base);\n }\n\n &.-color-danger:hover {\n background: var(--instui-color-background-interactive-action-destructive-hover);\n }\n\n &.-color-danger:active {\n background: var(--instui-color-background-interactive-action-destructive-active);\n }\n\n &.-color-success {\n background: var(--instui-color-background-interactive-action-success-base);\n color: var(--instui-color-text-interactive-action-status-base);\n }\n\n &.-color-success:hover {\n background: var(--instui-color-background-interactive-action-success-hover);\n }\n\n &.-color-tertiary,\n &.-ghost {\n background: transparent;\n color: var(--instui-component-base-button-primary-ghost-color);\n border-color: var(--instui-component-base-button-primary-ghost-border-color);\n }\n\n &.-color-tertiary:hover,\n &.-ghost:hover {\n background: var(--instui-component-base-button-primary-ghost-hover-background);\n border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n color: var(--instui-component-base-button-tertiary-hover-text-color);\n }\n\n &.-color-tertiary:active,\n &.-ghost:active {\n background: var(--instui-component-base-button-primary-ghost-active-background);\n border-color: var(--instui-component-base-button-tertiary-active-border-color);\n color: var(--instui-component-base-button-tertiary-active-text-color);\n }\n\n &.-color-tertiary:disabled,\n &.-color-tertiary[aria-disabled=\"true\"],\n &.-ghost:disabled,\n &.-ghost[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n color: var(--instui-component-base-button-tertiary-disabled-text-color);\n }\n\n &.-color-primary-inverse {\n background: var(--instui-component-base-button-primary-inverse-background);\n color: var(--instui-component-base-button-primary-inverse-color);\n border-color: var(--instui-component-base-button-primary-inverse-border-color);\n }\n\n /* On hover the border tracks the (light) hover fill, so it reads as no visible border. */\n &.-color-primary-inverse:hover {\n background: var(--instui-component-base-button-primary-inverse-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n }\n\n &.-color-primary-inverse:active {\n background: var(--instui-component-base-button-primary-inverse-active-background);\n border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n }\n\n /*\n * --on-color composes with primary (default) and secondary for a button placed on a coloured\n * surface, reading the full base/hover/active/disabled set from the on-color colour tokens rather\n * than the component layer (which only aliases hover/active/disabled). Primary fills white with\n * dark text; secondary stays transparent with a white border and text — there's no\n * secondary-on-color background token, matching InstUI.\n */\n &.-on-color:not([class*=\"-color-\"]),\n &.-color-primary.-on-color {\n background: var(--instui-component-base-button-primary-inverse-background);\n border-color: var(--instui-component-base-button-primary-inverse-border-color);\n color: var(--instui-component-base-button-primary-inverse-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):hover,\n &.-color-primary.-on-color:hover {\n background: var(--instui-component-base-button-primary-inverse-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):active,\n &.-color-primary.-on-color:active {\n background: var(--instui-component-base-button-primary-inverse-active-background);\n border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n color: var(--instui-component-base-button-primary-on-color-active-text-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):disabled,\n &.-on-color:not([class*=\"-color-\"])[aria-disabled=\"true\"],\n &.-color-primary.-on-color:disabled,\n &.-color-primary.-on-color[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n }\n\n &.-color-secondary.-on-color {\n background: transparent;\n border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n }\n\n &.-color-secondary.-on-color:hover {\n background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n color: var(--instui-component-base-button-secondary-on-color-hover-text-color);\n }\n\n &.-color-secondary.-on-color:active {\n background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n color: var(--instui-component-base-button-secondary-on-color-active-text-color);\n }\n\n &.-color-secondary.-on-color:disabled,\n &.-color-secondary.-on-color[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n color: var(--instui-component-base-button-secondary-on-color-disabled-text-color);\n }\n\n /*\n * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)\n * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added\n * automatically via ::before (appended in index.ts, which needs the shared AI_ICON_MASK constant).\n */\n &.-color-ai {\n color: var(--instui-color-text-interactive-action-ai-base);\n border-color: transparent;\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n )\n border-box;\n }\n\n &.-color-ai:hover {\n color: var(--instui-color-text-interactive-action-ai-hover);\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%\n )\n border-box;\n }\n\n &.-color-ai:active {\n color: var(--instui-color-text-interactive-action-ai-active);\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%\n )\n border-box;\n }\n\n &.-color-ai:disabled,\n &.-color-ai[aria-disabled=\"true\"] {\n color: var(--instui-component-base-button-ai-disabled-text-color);\n border-color: var(--instui-component-base-button-ai-disabled-border-color);\n background: var(--instui-component-base-button-ai-disabled-background-color);\n }\n\n /*\n * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,\n * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph\n * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at\n * once, so — like InstUI's rest state — the centre stays transparent.\n */\n &.-color-ai-secondary {\n position: relative;\n border-color: transparent;\n background: linear-gradient(\n to bottom,\n var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%,\n var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n /*\n * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's\n * transparent border. The negative inset reaches out over that border; the radius is inherited, so\n * it stays concentric with the button's outer corners.\n */\n &.-color-ai-secondary::after {\n content: \"\";\n position: absolute;\n inset: calc(-1 * var(--instui-border-width-md));\n border-radius: inherit;\n padding: var(--instui-border-width-sm);\n background: linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n );\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n pointer-events: none;\n }\n\n /*\n * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —\n * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.\n */\n &.-color-ai-secondary:hover,\n &.-color-ai-secondary:active {\n -webkit-background-clip: border-box;\n background-clip: border-box;\n color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);\n -webkit-text-fill-color: currentColor;\n }\n\n &.-color-ai-secondary:hover {\n background: linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%,\n var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%\n );\n }\n\n &.-color-ai-secondary:active {\n background: linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%,\n var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%\n );\n }\n\n &.-color-ai-secondary:disabled,\n &.-color-ai-secondary[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-ai-disabled-border-color);\n color: var(--instui-component-base-button-ai-disabled-text-color);\n -webkit-text-fill-color: currentColor;\n }\n\n /* The ai glyph's background; the mask itself is appended in index.ts (needs the shared AI_ICON_MASK). */\n &.-color-ai::before {\n background: var(--instui-color-text-interactive-action-ai-base);\n }\n\n &.-color-ai-secondary::before {\n background: linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n );\n }\n\n &.-color-ai:disabled::before,\n &.-color-ai[aria-disabled=\"true\"]::before,\n &.-color-ai-secondary:disabled::before,\n &.-color-ai-secondary[aria-disabled=\"true\"]::before {\n background: var(--instui-component-icon-action-ai-disabled-color);\n }\n\n /*\n * --without-background is InstUI's withBackground={false}: a transparent button in the\n * primary ghost tokens. `-ghost` is a deprecated alias of `-color-tertiary` above.\n */\n &.-without-background {\n background: var(--instui-component-base-button-primary-ghost-background);\n color: var(--instui-component-base-button-primary-ghost-color);\n border-color: var(--instui-component-base-button-primary-ghost-border-color);\n }\n\n /* --block is InstUI's display=\"block\": a full-width button. */\n &.-display-block {\n display: flex;\n width: 100%;\n }\n\n &.-size-sm {\n font-size: var(--instui-component-base-button-small-font-size);\n min-height: var(--instui-component-base-button-small-height);\n padding-inline: var(--instui-component-base-button-small-padding-horizontal);\n }\n\n &.-size-md {\n font-size: var(--instui-component-base-button-medium-font-size);\n min-height: var(--instui-component-base-button-medium-height);\n padding-inline: var(--instui-component-base-button-medium-padding-horizontal);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-base-button-large-font-size);\n min-height: var(--instui-component-base-button-large-height);\n padding-inline: var(--instui-component-base-button-large-padding-horizontal);\n }\n\n &.-shape-square {\n padding: var(--instui-spacing-space-xs);\n aspect-ratio: 1;\n }\n\n &.-shape-circle {\n padding: var(--instui-spacing-space-xs);\n aspect-ratio: 1;\n border-radius: 50%;\n }\n\n /*\n * A composed `-icon-<name>` rides the shared icon painter (utilities/icon), so a text button needs no\n * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only\n * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a\n * (missing) label's cap height.\n */\n &.-shape-square[class*=\"-icon-\"]::before,\n &.-shape-circle[class*=\"-icon-\"]::before {\n inline-size: 1.25em;\n block-size: 1.25em;\n }\n\n &.-condensed {\n background: transparent;\n border-color: transparent;\n min-height: 0;\n color: var(--instui-color-text-interactive-action-secondary-base);\n padding-inline: var(--instui-spacing-space-xs);\n }\n\n &.-condensed:hover {\n background: var(--instui-color-background-muted);\n }\n\n &.-toggle[aria-pressed=\"true\"] {\n background: var(--instui-color-background-interactive-action-secondary-active);\n border-color: var(--instui-color-stroke-interactive-action-secondary-active);\n color: var(--instui-color-text-interactive-action-secondary-base);\n }\n\n /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */\n &.-without-border {\n border-style: none;\n }\n}\n\n.pfx-button-group {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n",
|
|
336
|
+
"canvasHighContrast": "/**\n * @component button\n * @summary An accessible action control, styled from the token palette; primary by default.\n * @remarks The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and `-color-ai-secondary` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. `-without-background` hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.pfx-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.\n * @selector .pfx-button\n * @modifier -color-primary — (default) the primary action.\n * @modifier -color-secondary — A lower-emphasis secondary action.\n * @modifier -color-tertiary — A text-style action (no fill or border until hover).\n * @modifier -color-danger — A destructive action.\n * @modifier -shape-circle — A round icon button.\n * @modifier -condensed — Tighter padding for dense toolbars.\n * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).\n * @modifier -without-background — Drop the fill (ghost).\n * @modifier -color-success — A positive/confirming action.\n * @modifier -color-ai — An AI action.\n * @modifier -color-ai-secondary — A lower-emphasis AI action.\n * @modifier -color-primary-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @modifier -shape-square — A square icon button.\n * @modifier -display-block — Full-width block button.\n * @modifier -ghost — @deprecated {@link -color-tertiary}\n * @modifier -without-border — Remove the border.\n * @modifier -icon-* — Render a glyph from the icon set before the label (e.g. `-icon-arrow-right`), painted in the button's text colour; pair with `-shape-square`/`-shape-circle` for an icon-only button.\n * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.\n * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.\n * @cssstate disabled\n * @cssstate pressed\n * @a11y Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * ```html\n * <div class=\"pfx-button-group\">\n * <button class=\"pfx-button\">Primary</button>\n * <button class=\"pfx-button -color-secondary\">Secondary</button>\n * </div>\n * ```\n * @wrapper pfx-button-group\n * @structure\n * A group wrapper lays out adjacent buttons with the shared button gap.\n * .pfx-button-group:opt {\n * .pfx-button:one-or-more {}\n * }\n * @related close-button — The icon-only dismiss button.\n * @demo self:button\n */\n@scope (.pfx-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--instui-spacing-space-xs);\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs)\n var(--instui-component-base-button-medium-padding-horizontal);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-base-button-medium-font-size);\n font-weight: var(--instui-font-weight-interactive);\n line-height: var(--instui-line-height-standalone-text-base);\n border: var(--instui-border-width-sm) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n cursor: pointer;\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n &:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-primary-active);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-color);\n cursor: not-allowed;\n }\n\n &.-color-primary {\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-stroke-interactive-action-primary-base);\n }\n\n &.-color-primary:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n }\n\n &.-color-primary:active {\n background: var(--instui-color-background-interactive-action-primary-active);\n border-color: var(--instui-color-stroke-interactive-action-primary-active);\n }\n\n &.-color-primary:disabled,\n &.-color-primary[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-color);\n }\n\n &.-color-secondary {\n background: var(--instui-component-base-button-secondary-background);\n color: var(--instui-component-base-button-secondary-color);\n border-color: var(--instui-component-base-button-secondary-border-color);\n }\n\n &.-color-secondary:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &.-color-secondary:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n\n &.-color-secondary:disabled,\n &.-color-secondary[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-secondary-disabled-background-color);\n border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n color: var(--instui-component-base-button-secondary-disabled-text-color);\n }\n\n &.-color-danger {\n background: var(--instui-color-background-interactive-action-destructive-base);\n color: var(--instui-color-text-interactive-action-status-base);\n }\n\n &.-color-danger:hover {\n background: var(--instui-color-background-interactive-action-destructive-hover);\n }\n\n &.-color-danger:active {\n background: var(--instui-color-background-interactive-action-destructive-active);\n }\n\n &.-color-success {\n background: var(--instui-color-background-interactive-action-success-base);\n color: var(--instui-color-text-interactive-action-status-base);\n }\n\n &.-color-success:hover {\n background: var(--instui-color-background-interactive-action-success-hover);\n }\n\n &.-color-tertiary,\n &.-ghost {\n background: transparent;\n color: var(--instui-component-base-button-primary-ghost-color);\n border-color: var(--instui-component-base-button-primary-ghost-border-color);\n }\n\n &.-color-tertiary:hover,\n &.-ghost:hover {\n background: var(--instui-component-base-button-primary-ghost-hover-background);\n border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n color: var(--instui-component-base-button-tertiary-hover-text-color);\n }\n\n &.-color-tertiary:active,\n &.-ghost:active {\n background: var(--instui-component-base-button-primary-ghost-active-background);\n border-color: var(--instui-component-base-button-tertiary-active-border-color);\n color: var(--instui-component-base-button-tertiary-active-text-color);\n }\n\n &.-color-tertiary:disabled,\n &.-color-tertiary[aria-disabled=\"true\"],\n &.-ghost:disabled,\n &.-ghost[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n color: var(--instui-component-base-button-tertiary-disabled-text-color);\n }\n\n &.-color-primary-inverse {\n background: var(--instui-component-base-button-primary-inverse-background);\n color: var(--instui-component-base-button-primary-inverse-color);\n border-color: var(--instui-component-base-button-primary-inverse-border-color);\n }\n\n /* On hover the border tracks the (light) hover fill, so it reads as no visible border. */\n &.-color-primary-inverse:hover {\n background: var(--instui-component-base-button-primary-inverse-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n }\n\n &.-color-primary-inverse:active {\n background: var(--instui-component-base-button-primary-inverse-active-background);\n border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n }\n\n /*\n * --on-color composes with primary (default) and secondary for a button placed on a coloured\n * surface, reading the full base/hover/active/disabled set from the on-color colour tokens rather\n * than the component layer (which only aliases hover/active/disabled). Primary fills white with\n * dark text; secondary stays transparent with a white border and text — there's no\n * secondary-on-color background token, matching InstUI.\n */\n &.-on-color:not([class*=\"-color-\"]),\n &.-color-primary.-on-color {\n background: var(--instui-component-base-button-primary-inverse-background);\n border-color: var(--instui-component-base-button-primary-inverse-border-color);\n color: var(--instui-component-base-button-primary-inverse-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):hover,\n &.-color-primary.-on-color:hover {\n background: var(--instui-component-base-button-primary-inverse-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):active,\n &.-color-primary.-on-color:active {\n background: var(--instui-component-base-button-primary-inverse-active-background);\n border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n color: var(--instui-component-base-button-primary-on-color-active-text-color);\n }\n\n &.-on-color:not([class*=\"-color-\"]):disabled,\n &.-on-color:not([class*=\"-color-\"])[aria-disabled=\"true\"],\n &.-color-primary.-on-color:disabled,\n &.-color-primary.-on-color[aria-disabled=\"true\"] {\n background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n }\n\n &.-color-secondary.-on-color {\n background: transparent;\n border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n }\n\n &.-color-secondary.-on-color:hover {\n background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n color: var(--instui-component-base-button-secondary-on-color-hover-text-color);\n }\n\n &.-color-secondary.-on-color:active {\n background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n color: var(--instui-component-base-button-secondary-on-color-active-text-color);\n }\n\n &.-color-secondary.-on-color:disabled,\n &.-color-secondary.-on-color[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n color: var(--instui-component-base-button-secondary-on-color-disabled-text-color);\n }\n\n /*\n * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)\n * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added\n * automatically via ::before (appended in index.ts, which needs the shared AI_ICON_MASK constant).\n */\n &.-color-ai {\n color: var(--instui-color-text-interactive-action-ai-base);\n border-color: transparent;\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n )\n border-box;\n }\n\n &.-color-ai:hover {\n color: var(--instui-color-text-interactive-action-ai-hover);\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%\n )\n border-box;\n }\n\n &.-color-ai:active {\n color: var(--instui-color-text-interactive-action-ai-active);\n background:\n linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%,\n var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%\n )\n padding-box,\n linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%\n )\n border-box;\n }\n\n &.-color-ai:disabled,\n &.-color-ai[aria-disabled=\"true\"] {\n color: var(--instui-component-base-button-ai-disabled-text-color);\n border-color: var(--instui-component-base-button-ai-disabled-border-color);\n background: var(--instui-component-base-button-ai-disabled-background-color);\n }\n\n /*\n * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,\n * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph\n * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at\n * once, so — like InstUI's rest state — the centre stays transparent.\n */\n &.-color-ai-secondary {\n position: relative;\n border-color: transparent;\n background: linear-gradient(\n to bottom,\n var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%,\n var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n /*\n * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's\n * transparent border. The negative inset reaches out over that border; the radius is inherited, so\n * it stays concentric with the button's outer corners.\n */\n &.-color-ai-secondary::after {\n content: \"\";\n position: absolute;\n inset: calc(-1 * var(--instui-border-width-md));\n border-radius: inherit;\n padding: var(--instui-border-width-sm);\n background: linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n );\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n pointer-events: none;\n }\n\n /*\n * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —\n * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.\n */\n &.-color-ai-secondary:hover,\n &.-color-ai-secondary:active {\n -webkit-background-clip: border-box;\n background-clip: border-box;\n color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);\n -webkit-text-fill-color: currentColor;\n }\n\n &.-color-ai-secondary:hover {\n background: linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%,\n var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%\n );\n }\n\n &.-color-ai-secondary:active {\n background: linear-gradient(\n to bottom,\n var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%,\n var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%\n );\n }\n\n &.-color-ai-secondary:disabled,\n &.-color-ai-secondary[aria-disabled=\"true\"] {\n background: transparent;\n border-color: var(--instui-component-base-button-ai-disabled-border-color);\n color: var(--instui-component-base-button-ai-disabled-text-color);\n -webkit-text-fill-color: currentColor;\n }\n\n /* The ai glyph's background; the mask itself is appended in index.ts (needs the shared AI_ICON_MASK). */\n &.-color-ai::before {\n background: var(--instui-color-text-interactive-action-ai-base);\n }\n\n &.-color-ai-secondary::before {\n background: linear-gradient(\n to bottom,\n var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n );\n }\n\n &.-color-ai:disabled::before,\n &.-color-ai[aria-disabled=\"true\"]::before,\n &.-color-ai-secondary:disabled::before,\n &.-color-ai-secondary[aria-disabled=\"true\"]::before {\n background: var(--instui-component-icon-action-ai-disabled-color);\n }\n\n /*\n * --without-background is InstUI's withBackground={false}: a transparent button in the\n * primary ghost tokens. `-ghost` is a deprecated alias of `-color-tertiary` above.\n */\n &.-without-background {\n background: var(--instui-component-base-button-primary-ghost-background);\n color: var(--instui-component-base-button-primary-ghost-color);\n border-color: var(--instui-component-base-button-primary-ghost-border-color);\n }\n\n /* --block is InstUI's display=\"block\": a full-width button. */\n &.-display-block {\n display: flex;\n width: 100%;\n }\n\n &.-size-sm {\n font-size: var(--instui-component-base-button-small-font-size);\n min-height: var(--instui-component-base-button-small-height);\n padding-inline: var(--instui-component-base-button-small-padding-horizontal);\n }\n\n &.-size-md {\n font-size: var(--instui-component-base-button-medium-font-size);\n min-height: var(--instui-component-base-button-medium-height);\n padding-inline: var(--instui-component-base-button-medium-padding-horizontal);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-base-button-large-font-size);\n min-height: var(--instui-component-base-button-large-height);\n padding-inline: var(--instui-component-base-button-large-padding-horizontal);\n }\n\n &.-shape-square {\n padding: var(--instui-spacing-space-xs);\n aspect-ratio: 1;\n }\n\n &.-shape-circle {\n padding: var(--instui-spacing-space-xs);\n aspect-ratio: 1;\n border-radius: 50%;\n }\n\n /*\n * A composed `-icon-<name>` rides the shared icon painter (utilities/icon), so a text button needs no\n * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only\n * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a\n * (missing) label's cap height.\n */\n &.-shape-square[class*=\"-icon-\"]::before,\n &.-shape-circle[class*=\"-icon-\"]::before {\n inline-size: 1.25em;\n block-size: 1.25em;\n }\n\n &.-condensed {\n background: transparent;\n border-color: transparent;\n min-height: 0;\n color: var(--instui-color-text-interactive-action-secondary-base);\n padding-inline: var(--instui-spacing-space-xs);\n }\n\n &.-condensed:hover {\n background: var(--instui-color-background-muted);\n }\n\n &.-toggle[aria-pressed=\"true\"] {\n background: var(--instui-color-background-interactive-action-secondary-active);\n border-color: var(--instui-color-stroke-interactive-action-secondary-active);\n color: var(--instui-color-text-interactive-action-secondary-base);\n }\n\n /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */\n &.-without-border {\n border-style: none;\n }\n}\n\n.pfx-button-group {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n"
|
|
337
|
+
}.rebrand;
|
|
325
338
|
const byline$1 = {
|
|
326
339
|
"rebrand": "/**\n * @component byline\n * @selector .pfx-byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * ```\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n@scope (.pfx-byline) {\n :scope {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n\n /* alignContent=\"top\" (default is center, from align-items above). */\n &.-align-content-top {\n align-items: flex-start;\n }\n\n &.-align-content-center {\n align-items: center;\n }\n }\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope {\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n }\n}\n",
|
|
327
340
|
"canvas": "/**\n * @component byline\n * @selector .pfx-byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * ```\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n@scope (.pfx-byline) {\n :scope {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n\n /* alignContent=\"top\" (default is center, from align-items above). */\n &.-align-content-top {\n align-items: flex-start;\n }\n\n &.-align-content-center {\n align-items: center;\n }\n }\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope {\n > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n }\n}\n",
|
|
@@ -343,9 +356,9 @@ const checkbox$1 = {
|
|
|
343
356
|
"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope {\n &.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
|
|
344
357
|
}.rebrand;
|
|
345
358
|
const closeButton$1 = {
|
|
346
|
-
"rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an
|
|
347
|
-
"canvas": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an
|
|
348
|
-
"canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an
|
|
359
|
+
"rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a close button placed on a coloured (non-neutral) surface.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-component-icon-base-color);\n cursor: pointer;\n }\n\n &::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &:hover {\n background: var(--instui-component-base-button-primary-ghost-hover-background);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-ghost-active-background);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-icon-disabled-base-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n &.-size-md {\n min-height: var(--instui-component-base-button-medium-height);\n }\n\n &.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n }\n\n &.-on-color,\n &.-color-inverse {\n color: var(--instui-component-icon-on-color);\n }\n\n &.-on-color:hover,\n &.-color-inverse:hover {\n background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n }\n\n &.-on-color:active,\n &.-color-inverse:active {\n background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n }\n\n &.-on-color:disabled,\n &.-on-color[aria-disabled=\"true\"],\n &.-color-inverse:disabled,\n &.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-icon-disabled-on-color);\n }\n}\n",
|
|
360
|
+
"canvas": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a close button placed on a coloured (non-neutral) surface.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-component-icon-base-color);\n cursor: pointer;\n }\n\n &::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &:hover {\n background: var(--instui-component-base-button-primary-ghost-hover-background);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-ghost-active-background);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-icon-disabled-base-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n &.-size-md {\n min-height: var(--instui-component-base-button-medium-height);\n }\n\n &.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n }\n\n &.-on-color,\n &.-color-inverse {\n color: var(--instui-component-icon-on-color);\n }\n\n &.-on-color:hover,\n &.-color-inverse:hover {\n background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n }\n\n &.-on-color:active,\n &.-color-inverse:active {\n background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n }\n\n &.-on-color:disabled,\n &.-on-color[aria-disabled=\"true\"],\n &.-color-inverse:disabled,\n &.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-icon-disabled-on-color);\n }\n}\n",
|
|
361
|
+
"canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a close button placed on a coloured (non-neutral) surface.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n & {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-component-icon-base-color);\n cursor: pointer;\n }\n\n &::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n }\n\n &:hover {\n background: var(--instui-component-base-button-primary-ghost-hover-background);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-ghost-active-background);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-icon-disabled-base-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n }\n\n &.-size-md {\n min-height: var(--instui-component-base-button-medium-height);\n }\n\n &.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n }\n\n &.-on-color,\n &.-color-inverse {\n color: var(--instui-component-icon-on-color);\n }\n\n &.-on-color:hover,\n &.-color-inverse:hover {\n background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n }\n\n &.-on-color:active,\n &.-color-inverse:active {\n background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n }\n\n &.-on-color:disabled,\n &.-on-color[aria-disabled=\"true\"],\n &.-color-inverse:disabled,\n &.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-icon-disabled-on-color);\n }\n}\n"
|
|
349
362
|
}.rebrand;
|
|
350
363
|
const contextView$1 = {
|
|
351
364
|
"rebrand": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n & {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n }\n\n /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n }\n\n /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n &::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n }\n\n &::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-width: var(--instui-component-context-view-arrow-size);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"bottom\": caret on the top edge, pointing up. */\n &.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n &.-placement-start::before,\n &.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n &.-placement-end::before,\n &.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n }\n\n &.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n }\n\n &.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n }\n\n /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n &.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n &.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n }\n\n &.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n }\n\n /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n &[popover] {\n position: fixed;\n overflow: visible;\n margin: 0;\n }\n\n &[popover]:not(:popover-open) {\n display: none;\n }\n\n /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n @supports (position-area: block-end) {\n &[popover] {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n\n &[popover].-placement-top {\n position-area: block-start;\n }\n\n &[popover].-placement-bottom {\n position-area: block-end;\n }\n\n &[popover].-placement-start {\n position-area: inline-start center;\n }\n\n &[popover].-placement-end {\n position-area: inline-end center;\n }\n }\n}\n",
|
|
@@ -387,6 +400,11 @@ const formFieldMessages$1 = {
|
|
|
387
400
|
"canvas": "/**\n * @component form-field-messages\n * @selector .pfx-form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n@scope (.pfx-form-field-messages) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n }\n}\n\n@scope (.pfx-form-field-message) {\n & {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n }\n\n &.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n }\n\n &.-type-error::before,\n &.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n }\n\n &.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n }\n\n &.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n &.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n",
|
|
388
401
|
"canvasHighContrast": "/**\n * @component form-field-messages\n * @selector .pfx-form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n@scope (.pfx-form-field-messages) {\n & {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n }\n}\n\n@scope (.pfx-form-field-message) {\n & {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n }\n\n &.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n }\n\n &.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n }\n\n &.-type-error::before,\n &.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n }\n\n &.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n }\n\n &.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n }\n\n /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n &.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n"
|
|
389
402
|
}.rebrand;
|
|
403
|
+
const heading$1 = {
|
|
404
|
+
"rebrand": "/**\n * @component heading\n * @summary Heading typography from `-level-h1` to `-level-h6`.\n * @remarks The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.\n * @selector .pfx-heading\n * @modifier -level-h1 — Render at the h1 type scale.\n * @modifier -level-h2 — Render at the h2 type scale.\n * @modifier -level-h3 — Render at the h3 type scale.\n * @modifier -level-h4 — Render at the h4 type scale.\n * @modifier -level-h5 — Render at the h5 type scale.\n * @modifier -level-h6 — Render at the h6 type scale.\n * @modifier -color-primary — (default) Primary colour.\n * @modifier -color-secondary — Secondary (muted) colour.\n * @modifier -color-ai — AI-accent colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) colour.\n * @modifier -border-top — Add a top rule.\n * @modifier -border-bottom — Add a bottom rule.\n * @modifier -variant-label — Label type preset.\n * @modifier -variant-title-page — Page-title preset.\n * @modifier -variant-title-section — Section-title preset.\n * @modifier -variant-title-card-mini — Mini card-title preset.\n * @modifier -variant-title-card-regular — Regular card-title preset.\n * @modifier -variant-title-card-section — Card section-title preset.\n * @accessibility These classes set the visual level only, so render a real `<h1>`–`<h6>` (or use `role=\"heading\"` with `aria-level`) to convey the heading level.\n * @example\n * <div class=\"pfx-heading -level-h1\">Heading h1</div>\n * @related text — Body typography for non-heading text.\n */\n@scope (.pfx-heading) {\n & {\n display: block;\n margin: 0;\n font-family: var(--instui-component-heading-h1-font-family);\n color: var(--instui-component-heading-base-color);\n line-height: var(--instui-component-heading-line-height);\n font-size: var(--instui-component-heading-h1-font-size);\n font-weight: var(--instui-component-heading-h1-font-weight);\n }\n\n &.-level-h1 {\n font-size: var(--instui-component-heading-h1-font-size);\n font-weight: var(--instui-component-heading-h1-font-weight);\n }\n\n &.-level-h2 {\n font-size: var(--instui-component-heading-h2-font-size);\n font-weight: var(--instui-component-heading-h2-font-weight);\n }\n\n &.-level-h3 {\n font-size: var(--instui-component-heading-h3-font-size);\n font-weight: var(--instui-component-heading-h3-font-weight);\n }\n\n &.-level-h4 {\n font-size: var(--instui-component-heading-h4-font-size);\n font-weight: var(--instui-component-heading-h4-font-weight);\n }\n\n &.-level-h5 {\n font-size: var(--instui-component-heading-h5-font-size);\n font-weight: var(--instui-component-heading-h5-font-weight);\n }\n\n &.-level-h6 {\n font-size: var(--instui-component-heading-h6-font-size);\n font-weight: var(--instui-component-heading-h6-font-weight);\n }\n\n &.-variant-title-page {\n font-size: var(--instui-component-heading-title-page-desktop-font-size);\n font-weight: var(--instui-component-heading-title-page-desktop-font-weight);\n }\n\n &.-variant-title-section {\n font-size: var(--instui-component-heading-title-section-font-size);\n font-weight: var(--instui-component-heading-title-section-font-weight);\n }\n\n &.-variant-title-card-section {\n font-size: var(--instui-component-heading-title-card-section-font-size);\n font-weight: var(--instui-component-heading-title-card-section-font-weight);\n }\n\n &.-variant-title-card-regular {\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n }\n\n &.-variant-title-card-mini {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n }\n\n &.-variant-label {\n font-size: var(--instui-component-heading-label-font-size);\n font-weight: var(--instui-component-heading-label-font-weight);\n }\n\n &.-color-primary {\n color: var(--instui-component-heading-base-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-heading-muted-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-heading-inverse-color);\n }\n\n &.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-heading-ai-text-top-gradient-color) 0%,\n var(--instui-component-heading-ai-text-bottom-gradient-color) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n &.-border-bottom {\n border-bottom: var(--instui-component-heading-border-width) solid\n var(--instui-component-heading-border-color);\n padding-bottom: var(--instui-component-heading-border-padding);\n }\n\n &.-border-top {\n border-top: var(--instui-component-heading-border-width) solid\n var(--instui-component-heading-border-color);\n padding-top: var(--instui-component-heading-border-padding);\n }\n}\n",
|
|
405
|
+
"canvas": "/**\n * @component heading\n * @summary Heading typography from `-level-h1` to `-level-h6`.\n * @remarks The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.\n * @selector .pfx-heading\n * @modifier -level-h1 — Render at the h1 type scale.\n * @modifier -level-h2 — Render at the h2 type scale.\n * @modifier -level-h3 — Render at the h3 type scale.\n * @modifier -level-h4 — Render at the h4 type scale.\n * @modifier -level-h5 — Render at the h5 type scale.\n * @modifier -level-h6 — Render at the h6 type scale.\n * @modifier -color-primary — (default) Primary colour.\n * @modifier -color-secondary — Secondary (muted) colour.\n * @modifier -color-ai — AI-accent colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) colour.\n * @modifier -border-top — Add a top rule.\n * @modifier -border-bottom — Add a bottom rule.\n * @modifier -variant-label — Label type preset.\n * @modifier -variant-title-page — Page-title preset.\n * @modifier -variant-title-section — Section-title preset.\n * @modifier -variant-title-card-mini — Mini card-title preset.\n * @modifier -variant-title-card-regular — Regular card-title preset.\n * @modifier -variant-title-card-section — Card section-title preset.\n * @accessibility These classes set the visual level only, so render a real `<h1>`–`<h6>` (or use `role=\"heading\"` with `aria-level`) to convey the heading level.\n * @example\n * <div class=\"pfx-heading -level-h1\">Heading h1</div>\n * @related text — Body typography for non-heading text.\n */\n@scope (.pfx-heading) {\n & {\n display: block;\n margin: 0;\n font-family: var(--instui-component-heading-h1-font-family);\n color: var(--instui-component-heading-base-color);\n line-height: var(--instui-component-heading-line-height);\n font-size: var(--instui-component-heading-h1-font-size);\n font-weight: var(--instui-component-heading-h1-font-weight);\n }\n\n &.-level-h1 {\n font-size: var(--instui-component-heading-h1-font-size);\n font-weight: var(--instui-component-heading-h1-font-weight);\n }\n\n &.-level-h2 {\n font-size: var(--instui-component-heading-h2-font-size);\n font-weight: var(--instui-component-heading-h2-font-weight);\n }\n\n &.-level-h3 {\n font-size: var(--instui-component-heading-h3-font-size);\n font-weight: var(--instui-component-heading-h3-font-weight);\n }\n\n &.-level-h4 {\n font-size: var(--instui-component-heading-h4-font-size);\n font-weight: var(--instui-component-heading-h4-font-weight);\n }\n\n &.-level-h5 {\n font-size: var(--instui-component-heading-h5-font-size);\n font-weight: var(--instui-component-heading-h5-font-weight);\n }\n\n &.-level-h6 {\n font-size: var(--instui-component-heading-h6-font-size);\n font-weight: var(--instui-component-heading-h6-font-weight);\n }\n\n &.-variant-title-page {\n font-size: var(--instui-component-heading-title-page-desktop-font-size);\n font-weight: var(--instui-component-heading-title-page-desktop-font-weight);\n }\n\n &.-variant-title-section {\n font-size: var(--instui-component-heading-title-section-font-size);\n font-weight: var(--instui-component-heading-title-section-font-weight);\n }\n\n &.-variant-title-card-section {\n font-size: var(--instui-component-heading-title-card-section-font-size);\n font-weight: var(--instui-component-heading-title-card-section-font-weight);\n }\n\n &.-variant-title-card-regular {\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n }\n\n &.-variant-title-card-mini {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n }\n\n &.-variant-label {\n font-size: var(--instui-component-heading-label-font-size);\n font-weight: var(--instui-component-heading-label-font-weight);\n }\n\n &.-color-primary {\n color: var(--instui-component-heading-base-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-heading-muted-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-heading-inverse-color);\n }\n\n &.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-heading-ai-text-top-gradient-color) 0%,\n var(--instui-component-heading-ai-text-bottom-gradient-color) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n &.-border-bottom {\n border-bottom: var(--instui-component-heading-border-width) solid\n var(--instui-component-heading-border-color);\n padding-bottom: var(--instui-component-heading-border-padding);\n }\n\n &.-border-top {\n border-top: var(--instui-component-heading-border-width) solid\n var(--instui-component-heading-border-color);\n padding-top: var(--instui-component-heading-border-padding);\n }\n}\n",
|
|
406
|
+
"canvasHighContrast": "/**\n * @component heading\n * @summary Heading typography from `-level-h1` to `-level-h6`.\n * @remarks The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.\n * @selector .pfx-heading\n * @modifier -level-h1 — Render at the h1 type scale.\n * @modifier -level-h2 — Render at the h2 type scale.\n * @modifier -level-h3 — Render at the h3 type scale.\n * @modifier -level-h4 — Render at the h4 type scale.\n * @modifier -level-h5 — Render at the h5 type scale.\n * @modifier -level-h6 — Render at the h6 type scale.\n * @modifier -color-primary — (default) Primary colour.\n * @modifier -color-secondary — Secondary (muted) colour.\n * @modifier -color-ai — AI-accent colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) colour.\n * @modifier -border-top — Add a top rule.\n * @modifier -border-bottom — Add a bottom rule.\n * @modifier -variant-label — Label type preset.\n * @modifier -variant-title-page — Page-title preset.\n * @modifier -variant-title-section — Section-title preset.\n * @modifier -variant-title-card-mini — Mini card-title preset.\n * @modifier -variant-title-card-regular — Regular card-title preset.\n * @modifier -variant-title-card-section — Card section-title preset.\n * @accessibility These classes set the visual level only, so render a real `<h1>`–`<h6>` (or use `role=\"heading\"` with `aria-level`) to convey the heading level.\n * @example\n * <div class=\"pfx-heading -level-h1\">Heading h1</div>\n * @related text — Body typography for non-heading text.\n */\n@scope (.pfx-heading) {\n & {\n display: block;\n margin: 0;\n font-family: var(--instui-component-heading-h1-font-family);\n color: var(--instui-component-heading-base-color);\n line-height: var(--instui-component-heading-line-height);\n font-size: var(--instui-component-heading-h1-font-size);\n font-weight: var(--instui-component-heading-h1-font-weight);\n }\n\n &.-level-h1 {\n font-size: var(--instui-component-heading-h1-font-size);\n font-weight: var(--instui-component-heading-h1-font-weight);\n }\n\n &.-level-h2 {\n font-size: var(--instui-component-heading-h2-font-size);\n font-weight: var(--instui-component-heading-h2-font-weight);\n }\n\n &.-level-h3 {\n font-size: var(--instui-component-heading-h3-font-size);\n font-weight: var(--instui-component-heading-h3-font-weight);\n }\n\n &.-level-h4 {\n font-size: var(--instui-component-heading-h4-font-size);\n font-weight: var(--instui-component-heading-h4-font-weight);\n }\n\n &.-level-h5 {\n font-size: var(--instui-component-heading-h5-font-size);\n font-weight: var(--instui-component-heading-h5-font-weight);\n }\n\n &.-level-h6 {\n font-size: var(--instui-component-heading-h6-font-size);\n font-weight: var(--instui-component-heading-h6-font-weight);\n }\n\n &.-variant-title-page {\n font-size: var(--instui-component-heading-title-page-desktop-font-size);\n font-weight: var(--instui-component-heading-title-page-desktop-font-weight);\n }\n\n &.-variant-title-section {\n font-size: var(--instui-component-heading-title-section-font-size);\n font-weight: var(--instui-component-heading-title-section-font-weight);\n }\n\n &.-variant-title-card-section {\n font-size: var(--instui-component-heading-title-card-section-font-size);\n font-weight: var(--instui-component-heading-title-card-section-font-weight);\n }\n\n &.-variant-title-card-regular {\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n }\n\n &.-variant-title-card-mini {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n }\n\n &.-variant-label {\n font-size: var(--instui-component-heading-label-font-size);\n font-weight: var(--instui-component-heading-label-font-weight);\n }\n\n &.-color-primary {\n color: var(--instui-component-heading-base-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-heading-muted-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-heading-inverse-color);\n }\n\n &.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-heading-ai-text-top-gradient-color) 0%,\n var(--instui-component-heading-ai-text-bottom-gradient-color) 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n\n &.-border-bottom {\n border-bottom: var(--instui-component-heading-border-width) solid\n var(--instui-component-heading-border-color);\n padding-bottom: var(--instui-component-heading-border-padding);\n }\n\n &.-border-top {\n border-top: var(--instui-component-heading-border-width) solid\n var(--instui-component-heading-border-color);\n padding-top: var(--instui-component-heading-border-padding);\n }\n}\n"
|
|
407
|
+
}.rebrand;
|
|
390
408
|
const img$1 = {
|
|
391
409
|
"rebrand": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n & {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n }\n\n &.-display-block {\n display: block;\n }\n\n /* constrain: fill a sized box (the consumer sets width/height). */\n &.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n &.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n }\n\n /* Effects compose through the custom property, so grayscale + blur can apply together. */\n &.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n }\n\n &.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n }\n\n &.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n }\n}\n",
|
|
392
410
|
"canvas": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n & {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n }\n\n &.-display-block {\n display: block;\n }\n\n /* constrain: fill a sized box (the consumer sets width/height). */\n &.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n &.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n }\n\n /* Effects compose through the custom property, so grayscale + blur can apply together. */\n &.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n }\n\n &.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n }\n\n &.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n }\n}\n",
|
|
@@ -397,6 +415,11 @@ const inPlaceEdit$1 = {
|
|
|
397
415
|
"canvas": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n & {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n }\n\n /* Hover affordance: it's editable. */\n &:hover {\n background: var(--instui-color-background-muted);\n }\n\n /* Focus = edit mode: input chrome + the focus ring. */\n &:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n }\n\n &.-readonly {\n cursor: default;\n }\n\n &.-readonly:hover {\n background: transparent;\n }\n}\n",
|
|
398
416
|
"canvasHighContrast": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n & {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n }\n\n /* Hover affordance: it's editable. */\n &:hover {\n background: var(--instui-color-background-muted);\n }\n\n /* Focus = edit mode: input chrome + the focus ring. */\n &:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n }\n\n &.-readonly {\n cursor: default;\n }\n\n &.-readonly:hover {\n background: transparent;\n }\n}\n"
|
|
399
417
|
}.rebrand;
|
|
418
|
+
const inputGroup$1 = {
|
|
419
|
+
"rebrand": "/**\n * @component input-group\n * @summary A facade around a text input with leading and trailing icon slots.\n * @remarks Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.\n * @selector .pfx-input-group\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @modifier -should-not-wrap — Keep the group on one line (no wrapping).\n * @part .before — The leading content slot.\n * @part .after — The trailing content slot.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @example\n * <span class=\"pfx-input-group\">\n * <span class=\"before\">@</span>\n * <input type=\"text\" placeholder=\"username\">\n * </span>\n * @related text-input — Wraps a text input, adding leading and trailing icon slots.\n */\n@scope (.pfx-input-group) {\n & {\n display: flex;\n align-items: center;\n inline-size: 100%;\n box-sizing: border-box;\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n gap: var(--instui-component-text-input-gap-content);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-component-text-input-text-color);\n font-family: var(--instui-component-text-input-font-family);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n /* The inner control is chromeless — the facade provides border/bg/ring. */\n & > input,\n & .pfx-text-input {\n flex: 1;\n min-inline-size: 0;\n border: 0;\n padding: 0;\n background: transparent;\n block-size: auto;\n font: inherit;\n color: inherit;\n outline: none;\n }\n\n & > input::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n /* Leading/trailing content slots (icons ride the -icon-* glyph painter). */\n & .before,\n & .after {\n display: inline-flex;\n align-items: center;\n flex: none;\n color: var(--instui-component-text-input-text-color);\n }\n\n &.-disabled,\n &:has(> input:disabled) {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring lives on the facade (the input has no chrome). */\n &:has(:focus-visible) {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n border-radius: var(--instui-focus-outline-radius);\n }\n\n &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n\n &.-should-not-wrap {\n flex-wrap: nowrap;\n }\n}\n",
|
|
420
|
+
"canvas": "/**\n * @component input-group\n * @summary A facade around a text input with leading and trailing icon slots.\n * @remarks Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.\n * @selector .pfx-input-group\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @modifier -should-not-wrap — Keep the group on one line (no wrapping).\n * @part .before — The leading content slot.\n * @part .after — The trailing content slot.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @example\n * <span class=\"pfx-input-group\">\n * <span class=\"before\">@</span>\n * <input type=\"text\" placeholder=\"username\">\n * </span>\n * @related text-input — Wraps a text input, adding leading and trailing icon slots.\n */\n@scope (.pfx-input-group) {\n & {\n display: flex;\n align-items: center;\n inline-size: 100%;\n box-sizing: border-box;\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n gap: var(--instui-component-text-input-gap-content);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-component-text-input-text-color);\n font-family: var(--instui-component-text-input-font-family);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n /* The inner control is chromeless — the facade provides border/bg/ring. */\n & > input,\n & .pfx-text-input {\n flex: 1;\n min-inline-size: 0;\n border: 0;\n padding: 0;\n background: transparent;\n block-size: auto;\n font: inherit;\n color: inherit;\n outline: none;\n }\n\n & > input::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n /* Leading/trailing content slots (icons ride the -icon-* glyph painter). */\n & .before,\n & .after {\n display: inline-flex;\n align-items: center;\n flex: none;\n color: var(--instui-component-text-input-text-color);\n }\n\n &.-disabled,\n &:has(> input:disabled) {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring lives on the facade (the input has no chrome). */\n &:has(:focus-visible) {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n border-radius: var(--instui-focus-outline-radius);\n }\n\n &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n\n &.-should-not-wrap {\n flex-wrap: nowrap;\n }\n}\n",
|
|
421
|
+
"canvasHighContrast": "/**\n * @component input-group\n * @summary A facade around a text input with leading and trailing icon slots.\n * @remarks Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.\n * @selector .pfx-input-group\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @modifier -should-not-wrap — Keep the group on one line (no wrapping).\n * @part .before — The leading content slot.\n * @part .after — The trailing content slot.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @example\n * <span class=\"pfx-input-group\">\n * <span class=\"before\">@</span>\n * <input type=\"text\" placeholder=\"username\">\n * </span>\n * @related text-input — Wraps a text input, adding leading and trailing icon slots.\n */\n@scope (.pfx-input-group) {\n & {\n display: flex;\n align-items: center;\n inline-size: 100%;\n box-sizing: border-box;\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n gap: var(--instui-component-text-input-gap-content);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-component-text-input-text-color);\n font-family: var(--instui-component-text-input-font-family);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n /* The inner control is chromeless — the facade provides border/bg/ring. */\n & > input,\n & .pfx-text-input {\n flex: 1;\n min-inline-size: 0;\n border: 0;\n padding: 0;\n background: transparent;\n block-size: auto;\n font: inherit;\n color: inherit;\n outline: none;\n }\n\n & > input::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n /* Leading/trailing content slots (icons ride the -icon-* glyph painter). */\n & .before,\n & .after {\n display: inline-flex;\n align-items: center;\n flex: none;\n color: var(--instui-component-text-input-text-color);\n }\n\n &.-disabled,\n &:has(> input:disabled) {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring lives on the facade (the input has no chrome). */\n &:has(:focus-visible) {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n border-radius: var(--instui-focus-outline-radius);\n }\n\n &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n\n &.-should-not-wrap {\n flex-wrap: nowrap;\n }\n}\n"
|
|
422
|
+
}.rebrand;
|
|
400
423
|
const link$1 = {
|
|
401
424
|
"rebrand": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n }\n\n &:hover {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n }\n\n &.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n }\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
|
|
402
425
|
"canvas": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n & {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n }\n\n &:hover {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n }\n\n &.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n }\n}\n\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
|
|
@@ -462,6 +485,11 @@ const modalHeader$1 = {
|
|
|
462
485
|
"canvas": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n &.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n &.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n }\n}\n",
|
|
463
486
|
"canvasHighContrast": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n * .header {\n * strong {}\n * }\n * }\n */\n@scope (.pfx-modal) {\n :scope {\n > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n\n &.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n\n &.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n }\n}\n"
|
|
464
487
|
}.rebrand;
|
|
488
|
+
const numberInput$1 = {
|
|
489
|
+
"rebrand": "/**\n * @component number-input\n * @summary A number-input facade with a +/- spinner column.\n * @remarks The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.\n * @selector .pfx-number-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @part .arrows — The +/- spinner column at the inline-end.\n * @part .down — The decrement button; the unclassed button increments.\n * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on `.down`.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @accessibility Put the accessible name on the `<input>` (e.g. `aria-label`) so the field owns the value; the +/- spinner buttons are decorative and marked `aria-hidden=\"true\"`.\n * @example\n * <span class=\"pfx-number-input\">\n * <input id=\"qty\" type=\"number\" value=\"1\" aria-label=\"Quantity\">\n * <span class=\"arrows\">\n * <button type=\"button\" id=\"up\" aria-hidden=\"true\"></button>\n * <button class=\"down\" type=\"button\" id=\"down\" aria-hidden=\"true\"></button>\n * </span>\n * </span>\n * @structure\n * .pfx-number-input {\n * input {}\n * .arrows {\n * button {}\n * .down {}\n * }\n * }\n * @related text-input — Shares the same input facade chrome.\n * @related range-input — Another numeric input control.\n */\n@scope (.pfx-number-input) {\n & {\n display: flex;\n align-items: center;\n inline-size: 100%;\n box-sizing: border-box;\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n gap: var(--instui-component-text-input-gap-content);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-component-text-input-text-color);\n font-family: var(--instui-component-text-input-font-family);\n font-size: var(--instui-component-text-input-font-size-md);\n /* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column\n to the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus\n ring is an outline, so overflow:hidden doesn't clip it. */\n padding-inline-end: 0;\n overflow: hidden;\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n /* The inner control is chromeless — the facade provides border/bg/ring. */\n & > input,\n & .pfx-text-input {\n flex: 1;\n min-inline-size: 0;\n border: 0;\n padding: 0;\n background: transparent;\n block-size: auto;\n font: inherit;\n color: inherit;\n outline: none;\n }\n\n & > input::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n /* native UA spinners off — we supply our own */\n & > input::-webkit-outer-spin-button,\n & > input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n & > input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n &.-disabled,\n &:has(> input:disabled) {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring lives on the facade (the input has no chrome). */\n &:has(:focus-visible) {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n border-radius: var(--instui-focus-outline-radius);\n }\n\n &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n\n & .arrows {\n display: flex;\n flex-direction: column;\n flex: none;\n align-self: stretch;\n /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */\n inline-size: 1.5rem;\n border-inline-start: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n }\n\n & .arrows button {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: var(--instui-component-text-input-arrows-background-color);\n color: var(--instui-color-icon-interactive-action-secondary-base);\n cursor: pointer;\n }\n\n & .arrows button + button {\n border-block-start: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n }\n\n & .arrows button:hover {\n background: var(--instui-component-text-input-arrows-background-hover-color);\n }\n\n & .arrows button:active {\n background: var(--instui-component-text-input-arrows-background-active-color);\n }\n\n & .arrows button:disabled {\n background: var(--instui-component-text-input-arrows-background-disabled-color);\n cursor: not-allowed;\n }\n\n & .arrows button::before {\n content: \"\";\n inline-size: 0.875em;\n block-size: 0.875em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n }\n\n & .arrows button.down::before {\n -webkit-mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n }\n}\n",
|
|
490
|
+
"canvas": "/**\n * @component number-input\n * @summary A number-input facade with a +/- spinner column.\n * @remarks The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.\n * @selector .pfx-number-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @part .arrows — The +/- spinner column at the inline-end.\n * @part .down — The decrement button; the unclassed button increments.\n * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on `.down`.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @accessibility Put the accessible name on the `<input>` (e.g. `aria-label`) so the field owns the value; the +/- spinner buttons are decorative and marked `aria-hidden=\"true\"`.\n * @example\n * <span class=\"pfx-number-input\">\n * <input id=\"qty\" type=\"number\" value=\"1\" aria-label=\"Quantity\">\n * <span class=\"arrows\">\n * <button type=\"button\" id=\"up\" aria-hidden=\"true\"></button>\n * <button class=\"down\" type=\"button\" id=\"down\" aria-hidden=\"true\"></button>\n * </span>\n * </span>\n * @structure\n * .pfx-number-input {\n * input {}\n * .arrows {\n * button {}\n * .down {}\n * }\n * }\n * @related text-input — Shares the same input facade chrome.\n * @related range-input — Another numeric input control.\n */\n@scope (.pfx-number-input) {\n & {\n display: flex;\n align-items: center;\n inline-size: 100%;\n box-sizing: border-box;\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n gap: var(--instui-component-text-input-gap-content);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-component-text-input-text-color);\n font-family: var(--instui-component-text-input-font-family);\n font-size: var(--instui-component-text-input-font-size-md);\n /* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column\n to the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus\n ring is an outline, so overflow:hidden doesn't clip it. */\n padding-inline-end: 0;\n overflow: hidden;\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n /* The inner control is chromeless — the facade provides border/bg/ring. */\n & > input,\n & .pfx-text-input {\n flex: 1;\n min-inline-size: 0;\n border: 0;\n padding: 0;\n background: transparent;\n block-size: auto;\n font: inherit;\n color: inherit;\n outline: none;\n }\n\n & > input::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n /* native UA spinners off — we supply our own */\n & > input::-webkit-outer-spin-button,\n & > input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n & > input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n &.-disabled,\n &:has(> input:disabled) {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring lives on the facade (the input has no chrome). */\n &:has(:focus-visible) {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n border-radius: var(--instui-focus-outline-radius);\n }\n\n &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n\n & .arrows {\n display: flex;\n flex-direction: column;\n flex: none;\n align-self: stretch;\n /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */\n inline-size: 1.5rem;\n border-inline-start: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n }\n\n & .arrows button {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: var(--instui-component-text-input-arrows-background-color);\n color: var(--instui-color-icon-interactive-action-secondary-base);\n cursor: pointer;\n }\n\n & .arrows button + button {\n border-block-start: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n }\n\n & .arrows button:hover {\n background: var(--instui-component-text-input-arrows-background-hover-color);\n }\n\n & .arrows button:active {\n background: var(--instui-component-text-input-arrows-background-active-color);\n }\n\n & .arrows button:disabled {\n background: var(--instui-component-text-input-arrows-background-disabled-color);\n cursor: not-allowed;\n }\n\n & .arrows button::before {\n content: \"\";\n inline-size: 0.875em;\n block-size: 0.875em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n }\n\n & .arrows button.down::before {\n -webkit-mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n }\n}\n",
|
|
491
|
+
"canvasHighContrast": "/**\n * @component number-input\n * @summary A number-input facade with a +/- spinner column.\n * @remarks The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.\n * @selector .pfx-number-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @part .arrows — The +/- spinner column at the inline-end.\n * @part .down — The decrement button; the unclassed button increments.\n * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on `.down`.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @accessibility Put the accessible name on the `<input>` (e.g. `aria-label`) so the field owns the value; the +/- spinner buttons are decorative and marked `aria-hidden=\"true\"`.\n * @example\n * <span class=\"pfx-number-input\">\n * <input id=\"qty\" type=\"number\" value=\"1\" aria-label=\"Quantity\">\n * <span class=\"arrows\">\n * <button type=\"button\" id=\"up\" aria-hidden=\"true\"></button>\n * <button class=\"down\" type=\"button\" id=\"down\" aria-hidden=\"true\"></button>\n * </span>\n * </span>\n * @structure\n * .pfx-number-input {\n * input {}\n * .arrows {\n * button {}\n * .down {}\n * }\n * }\n * @related text-input — Shares the same input facade chrome.\n * @related range-input — Another numeric input control.\n */\n@scope (.pfx-number-input) {\n & {\n display: flex;\n align-items: center;\n inline-size: 100%;\n box-sizing: border-box;\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n gap: var(--instui-component-text-input-gap-content);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-component-text-input-text-color);\n font-family: var(--instui-component-text-input-font-family);\n font-size: var(--instui-component-text-input-font-size-md);\n /* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column\n to the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus\n ring is an outline, so overflow:hidden doesn't clip it. */\n padding-inline-end: 0;\n overflow: hidden;\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n /* The inner control is chromeless — the facade provides border/bg/ring. */\n & > input,\n & .pfx-text-input {\n flex: 1;\n min-inline-size: 0;\n border: 0;\n padding: 0;\n background: transparent;\n block-size: auto;\n font: inherit;\n color: inherit;\n outline: none;\n }\n\n & > input::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n /* native UA spinners off — we supply our own */\n & > input::-webkit-outer-spin-button,\n & > input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n & > input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n &.-disabled,\n &:has(> input:disabled) {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring lives on the facade (the input has no chrome). */\n &:has(:focus-visible) {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n border-radius: var(--instui-focus-outline-radius);\n }\n\n &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:has(:focus-visible) {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n\n & .arrows {\n display: flex;\n flex-direction: column;\n flex: none;\n align-self: stretch;\n /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */\n inline-size: 1.5rem;\n border-inline-start: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n }\n\n & .arrows button {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: var(--instui-component-text-input-arrows-background-color);\n color: var(--instui-color-icon-interactive-action-secondary-base);\n cursor: pointer;\n }\n\n & .arrows button + button {\n border-block-start: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n }\n\n & .arrows button:hover {\n background: var(--instui-component-text-input-arrows-background-hover-color);\n }\n\n & .arrows button:active {\n background: var(--instui-component-text-input-arrows-background-active-color);\n }\n\n & .arrows button:disabled {\n background: var(--instui-component-text-input-arrows-background-disabled-color);\n cursor: not-allowed;\n }\n\n & .arrows button::before {\n content: \"\";\n inline-size: 0.875em;\n block-size: 0.875em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n }\n\n & .arrows button.down::before {\n -webkit-mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n }\n}\n"
|
|
492
|
+
}.rebrand;
|
|
465
493
|
const pagination$1 = {
|
|
466
494
|
"rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page:many {}\n * .ellipsis:optional {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n :scope {\n /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n > .arrow:disabled,\n > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
|
|
467
495
|
"canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @remarks See the `pagination.page` member for the individual page controls.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page:many {}\n * .ellipsis:optional {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n :scope {\n /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n > .arrow:disabled,\n > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
|
|
@@ -527,6 +555,11 @@ const sideNavBarItem$1 = {
|
|
|
527
555
|
"canvas": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope {\n > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n }\n}\n",
|
|
528
556
|
"canvasHighContrast": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n :scope {\n > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n }\n}\n"
|
|
529
557
|
}.rebrand;
|
|
558
|
+
const simpleSelect$1 = {
|
|
559
|
+
"rebrand": "/**\n * @component simple-select\n * @summary A styled native `<select>` with a caret, matching the text-input states and sizes.\n * @remarks Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.\n * @selector .pfx-simple-select\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <select class=\"pfx-simple-select\">\n * <option>Choose a fruit…</option>\n * <option>Apple</option>\n * <option>Orange</option>\n * <option>Pear</option>\n * </select>\n * @structure\n * .pfx-simple-select {\n * option {}\n * }\n * @related text-input — Shares the same field chrome, states, and sizes.\n * @related menu — The dropdown surface a richer select reuses.\n */\n@scope (.pfx-simple-select) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n color: var(--instui-component-text-input-text-color);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-md);\n appearance: none;\n -webkit-appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-text-input-padding-horizontal-md) center;\n background-size: 1em;\n }\n\n &::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-input-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n}\n",
|
|
560
|
+
"canvas": "/**\n * @component simple-select\n * @summary A styled native `<select>` with a caret, matching the text-input states and sizes.\n * @remarks Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.\n * @selector .pfx-simple-select\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <select class=\"pfx-simple-select\">\n * <option>Choose a fruit…</option>\n * <option>Apple</option>\n * <option>Orange</option>\n * <option>Pear</option>\n * </select>\n * @structure\n * .pfx-simple-select {\n * option {}\n * }\n * @related text-input — Shares the same field chrome, states, and sizes.\n * @related menu — The dropdown surface a richer select reuses.\n */\n@scope (.pfx-simple-select) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n color: var(--instui-component-text-input-text-color);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-md);\n appearance: none;\n -webkit-appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-text-input-padding-horizontal-md) center;\n background-size: 1em;\n }\n\n &::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-input-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n}\n",
|
|
561
|
+
"canvasHighContrast": "/**\n * @component simple-select\n * @summary A styled native `<select>` with a caret, matching the text-input states and sizes.\n * @remarks Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.\n * @selector .pfx-simple-select\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <select class=\"pfx-simple-select\">\n * <option>Choose a fruit…</option>\n * <option>Apple</option>\n * <option>Orange</option>\n * <option>Pear</option>\n * </select>\n * @structure\n * .pfx-simple-select {\n * option {}\n * }\n * @related text-input — Shares the same field chrome, states, and sizes.\n * @related menu — The dropdown surface a richer select reuses.\n */\n@scope (.pfx-simple-select) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n color: var(--instui-component-text-input-text-color);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-md);\n appearance: none;\n -webkit-appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-text-input-padding-horizontal-md) center;\n background-size: 1em;\n }\n\n &::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-input-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n}\n"
|
|
562
|
+
}.rebrand;
|
|
530
563
|
const spinner$1 = {
|
|
531
564
|
"rebrand": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@scope (.pfx-spinner) {\n :scope {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n &.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n }\n }\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
|
|
532
565
|
"canvas": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@scope (.pfx-spinner) {\n :scope {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n &.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n }\n }\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
|
|
@@ -592,6 +625,16 @@ const text$1 = {
|
|
|
592
625
|
"canvas": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n & {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n }\n\n &.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n }\n\n &.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n }\n\n &.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n }\n\n &.-style-italic {\n font-style: italic;\n }\n\n &.-color-primary {\n color: var(--instui-component-text-primary-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-text-muted-color);\n }\n\n &.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n }\n\n &.-color-success {\n color: var(--instui-component-text-success-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-text-error-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-text-warning-color);\n }\n\n &:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n }\n\n &.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n }\n\n &.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n }\n\n &.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n }\n\n &.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n }\n\n &.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n }\n\n &.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n &.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n }\n\n &.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n }\n\n &.-transform-uppercase {\n text-transform: uppercase;\n }\n\n &.-transform-lowercase {\n text-transform: lowercase;\n }\n\n &.-transform-capitalize {\n text-transform: capitalize;\n }\n}\n",
|
|
593
626
|
"canvasHighContrast": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n & {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n }\n\n &.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n }\n\n &.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n }\n\n &.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n }\n\n &.-style-italic {\n font-style: italic;\n }\n\n &.-color-primary {\n color: var(--instui-component-text-primary-color);\n }\n\n &.-color-secondary {\n color: var(--instui-component-text-muted-color);\n }\n\n &.-color-brand {\n color: light-dark(\n var(--instui-color-institutional-brand-primary),\n var(--instui-color-institutional-brand-font-color-dark)\n );\n }\n\n &.-color-success {\n color: var(--instui-component-text-success-color);\n }\n\n &.-color-danger {\n color: var(--instui-component-text-error-color);\n }\n\n &.-color-warning {\n color: var(--instui-component-text-warning-color);\n }\n\n &:is(.-color-ai-highlight, .-color-ai) {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n }\n\n &.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-secondary-inverse {\n color: var(--instui-component-text-inverse-color);\n }\n\n &.-color-primary-on {\n color: var(--instui-component-text-base-on-color);\n }\n\n &.-color-secondary-on {\n color: var(--instui-component-text-muted-on-color);\n }\n\n &.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n font-weight: var(--instui-component-text-description-page-font-weight);\n line-height: var(--instui-component-text-description-page-line-height);\n }\n\n &.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n font-weight: var(--instui-component-text-description-section-font-weight);\n line-height: var(--instui-component-text-description-section-line-height);\n }\n\n &.-variant-content {\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n font-weight: var(--instui-component-text-content-font-weight);\n }\n\n &.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n font-weight: var(--instui-component-text-content-small-font-weight);\n line-height: var(--instui-component-text-content-small-line-height);\n }\n\n &.-variant-content-important {\n font-size: var(--instui-component-text-content-important-font-size);\n line-height: var(--instui-component-text-content-important-line-height);\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n &.-variant-content-quote {\n font-size: var(--instui-component-text-content-quote-font-size);\n font-weight: var(--instui-component-text-content-quote-font-weight);\n font-style: var(--instui-component-text-content-quote-font-style);\n line-height: var(--instui-component-text-content-quote-line-height);\n }\n\n &.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n font-weight: var(--instui-component-text-legend-font-weight);\n }\n\n &.-transform-uppercase {\n text-transform: uppercase;\n }\n\n &.-transform-lowercase {\n text-transform: lowercase;\n }\n\n &.-transform-capitalize {\n text-transform: capitalize;\n }\n}\n"
|
|
594
627
|
}.rebrand;
|
|
628
|
+
const textArea$1 = {
|
|
629
|
+
"rebrand": "/**\n * @component text-area\n * @summary A styled, resizable native `<textarea>` with the same states and sizes as the text input.\n * @remarks Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.\n * @selector .pfx-text-area\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <textarea class=\"pfx-text-area\" placeholder=\"Write a comment…\"></textarea>\n * @related text-input — The single-line counterpart with the same states and sizes.\n */\n@scope (.pfx-text-area) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-area-font-family);\n font-weight: var(--instui-component-text-area-font-weight);\n color: var(--instui-component-text-area-text-color);\n background-color: var(--instui-component-text-area-background-color);\n border: var(--instui-component-text-area-border-width) solid\n var(--instui-component-text-area-border-color);\n border-radius: var(--instui-component-text-area-border-radius);\n padding: var(--instui-component-text-area-padding);\n font-size: var(--instui-component-text-area-font-size-md);\n line-height: 1.5;\n min-block-size: 4rem;\n resize: vertical;\n }\n\n &::placeholder {\n color: var(--instui-component-text-area-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-area-background-hover-color);\n border-color: var(--instui-component-text-area-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-area-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-area-background-disabled-color);\n border-color: var(--instui-component-text-area-border-disabled-color);\n color: var(--instui-component-text-area-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-area-background-readonly-color);\n border-color: var(--instui-component-text-area-border-readonly-color);\n color: var(--instui-component-text-area-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-area-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-area-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-area-font-size-sm);\n }\n\n &.-size-md {\n font-size: var(--instui-component-text-area-font-size-md);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-area-font-size-lg);\n }\n}\n",
|
|
630
|
+
"canvas": "/**\n * @component text-area\n * @summary A styled, resizable native `<textarea>` with the same states and sizes as the text input.\n * @remarks Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.\n * @selector .pfx-text-area\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <textarea class=\"pfx-text-area\" placeholder=\"Write a comment…\"></textarea>\n * @related text-input — The single-line counterpart with the same states and sizes.\n */\n@scope (.pfx-text-area) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-area-font-family);\n font-weight: var(--instui-component-text-area-font-weight);\n color: var(--instui-component-text-area-text-color);\n background-color: var(--instui-component-text-area-background-color);\n border: var(--instui-component-text-area-border-width) solid\n var(--instui-component-text-area-border-color);\n border-radius: var(--instui-component-text-area-border-radius);\n padding: var(--instui-component-text-area-padding);\n font-size: var(--instui-component-text-area-font-size-md);\n line-height: 1.5;\n min-block-size: 4rem;\n resize: vertical;\n }\n\n &::placeholder {\n color: var(--instui-component-text-area-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-area-background-hover-color);\n border-color: var(--instui-component-text-area-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-area-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-area-background-disabled-color);\n border-color: var(--instui-component-text-area-border-disabled-color);\n color: var(--instui-component-text-area-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-area-background-readonly-color);\n border-color: var(--instui-component-text-area-border-readonly-color);\n color: var(--instui-component-text-area-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-area-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-area-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-area-font-size-sm);\n }\n\n &.-size-md {\n font-size: var(--instui-component-text-area-font-size-md);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-area-font-size-lg);\n }\n}\n",
|
|
631
|
+
"canvasHighContrast": "/**\n * @component text-area\n * @summary A styled, resizable native `<textarea>` with the same states and sizes as the text input.\n * @remarks Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.\n * @selector .pfx-text-area\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <textarea class=\"pfx-text-area\" placeholder=\"Write a comment…\"></textarea>\n * @related text-input — The single-line counterpart with the same states and sizes.\n */\n@scope (.pfx-text-area) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-area-font-family);\n font-weight: var(--instui-component-text-area-font-weight);\n color: var(--instui-component-text-area-text-color);\n background-color: var(--instui-component-text-area-background-color);\n border: var(--instui-component-text-area-border-width) solid\n var(--instui-component-text-area-border-color);\n border-radius: var(--instui-component-text-area-border-radius);\n padding: var(--instui-component-text-area-padding);\n font-size: var(--instui-component-text-area-font-size-md);\n line-height: 1.5;\n min-block-size: 4rem;\n resize: vertical;\n }\n\n &::placeholder {\n color: var(--instui-component-text-area-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-area-background-hover-color);\n border-color: var(--instui-component-text-area-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-area-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-area-background-disabled-color);\n border-color: var(--instui-component-text-area-border-disabled-color);\n color: var(--instui-component-text-area-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-area-background-readonly-color);\n border-color: var(--instui-component-text-area-border-readonly-color);\n color: var(--instui-component-text-area-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-area-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-area-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n font-size: var(--instui-component-text-area-font-size-sm);\n }\n\n &.-size-md {\n font-size: var(--instui-component-text-area-font-size-md);\n }\n\n &.-size-lg {\n font-size: var(--instui-component-text-area-font-size-lg);\n }\n}\n"
|
|
632
|
+
}.rebrand;
|
|
633
|
+
const textInput$1 = {
|
|
634
|
+
"rebrand": "/**\n * @component text-input\n * @summary A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.\n * @remarks Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.\n * @selector .pfx-text-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * ```html\n * <input class=\"pfx-text-input\" placeholder=\"Default\">\n * ```\n * @related text-area — The multi-line counterpart with the same states and sizes.\n * @related number-input — The numeric-entry input sharing this chrome.\n * @related simple-select — The native select sharing this field chrome.\n * @related input-group — Wraps this input with leading and trailing slots.\n */\n@scope (.pfx-text-input) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n color: var(--instui-component-text-input-text-color);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-input-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n}\n",
|
|
635
|
+
"canvas": "/**\n * @component text-input\n * @summary A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.\n * @remarks Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.\n * @selector .pfx-text-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * ```html\n * <input class=\"pfx-text-input\" placeholder=\"Default\">\n * ```\n * @related text-area — The multi-line counterpart with the same states and sizes.\n * @related number-input — The numeric-entry input sharing this chrome.\n * @related simple-select — The native select sharing this field chrome.\n * @related input-group — Wraps this input with leading and trailing slots.\n */\n@scope (.pfx-text-input) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n color: var(--instui-component-text-input-text-color);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-input-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n}\n",
|
|
636
|
+
"canvasHighContrast": "/**\n * @component text-input\n * @summary A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.\n * @remarks Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.\n * @selector .pfx-text-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * ```html\n * <input class=\"pfx-text-input\" placeholder=\"Default\">\n * ```\n * @related text-area — The multi-line counterpart with the same states and sizes.\n * @related number-input — The numeric-entry input sharing this chrome.\n * @related simple-select — The native select sharing this field chrome.\n * @related input-group — Wraps this input with leading and trailing slots.\n */\n@scope (.pfx-text-input) {\n & {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n color: var(--instui-component-text-input-text-color);\n background-color: var(--instui-component-text-input-background-color);\n border: var(--instui-component-text-input-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-component-text-input-border-radius);\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &::placeholder {\n color: var(--instui-component-text-input-placeholder-color);\n }\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-input-placeholder-hover-color);\n }\n\n &:disabled,\n &.-disabled {\n background-color: var(--instui-component-text-input-background-disabled-color);\n border-color: var(--instui-component-text-input-border-disabled-color);\n color: var(--instui-component-text-input-text-disabled-color);\n cursor: not-allowed;\n }\n\n &.-readonly {\n background-color: var(--instui-component-text-input-background-readonly-color);\n border-color: var(--instui-component-text-input-border-readonly-color);\n color: var(--instui-component-text-input-text-readonly-color);\n }\n\n &.-invalid {\n border-color: var(--instui-component-text-input-error-border-color);\n }\n\n &.-success {\n border-color: var(--instui-component-text-input-success-border-color);\n }\n\n /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n &:is(.-invalid, :user-invalid):focus-visible {\n outline-color: var(--instui-focus-outline-color-danger);\n }\n\n &.-success:focus-visible {\n outline-color: var(--instui-focus-outline-color-success);\n }\n\n &.-size-sm {\n block-size: var(--instui-component-text-input-height-sm);\n padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n font-size: var(--instui-component-text-input-font-size-sm);\n }\n\n &.-size-md {\n block-size: var(--instui-component-text-input-height-md);\n padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n font-size: var(--instui-component-text-input-font-size-md);\n }\n\n &.-size-lg {\n block-size: var(--instui-component-text-input-height-lg);\n padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n font-size: var(--instui-component-text-input-font-size-lg);\n }\n}\n"
|
|
637
|
+
}.rebrand;
|
|
595
638
|
const toggleDetails$1 = {
|
|
596
639
|
"rebrand": "/**\n * @component toggle-details\n * @selector .pfx-toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n@scope (.pfx-toggle-details) {\n & {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n }\n\n /* Kill the native disclosure marker; we supply a rotating chevron. */\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n &.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n }\n\n /* variant=\"filled\": the summary reads as an action-secondary button. */\n &.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n }\n\n & > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n }\n\n &.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n }\n\n &.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n}\n",
|
|
597
640
|
"canvas": "/**\n * @component toggle-details\n * @selector .pfx-toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n@scope (.pfx-toggle-details) {\n & {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n }\n\n & > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n }\n\n /* Kill the native disclosure marker; we supply a rotating chevron. */\n & > summary::-webkit-details-marker {\n display: none;\n }\n\n & > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n &[open] > summary::before {\n transform: rotate(90deg);\n }\n\n /* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n &.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n }\n\n /* variant=\"filled\": the summary reads as an action-secondary button. */\n &.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n }\n\n & > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n }\n\n &.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n }\n\n &.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n }\n\n &.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n }\n\n &.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n }\n}\n",
|
|
@@ -617,6 +660,11 @@ const treeBrowser$1 = {
|
|
|
617
660
|
"canvas": "/**\n * @component tree-browser\n * @selector .pfx-tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n@scope (.pfx-tree-browser) {\n & {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n }\n\n /* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n & details > summary,\n & .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n }\n\n & details > summary [class*=\"-icon-\"],\n & .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n & details > summary::-webkit-details-marker {\n display: none;\n }\n\n /* The disclosure chevron rotates open (same technique as toggle-details). */\n & details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n & details[open] > summary::before {\n transform: rotate(90deg);\n }\n\n & details > summary:hover,\n & .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n }\n\n & details > summary.-selected,\n & .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n }\n\n /* Nested lists indent; the leaf list carries no bullets. */\n & ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n }\n\n &.-size-sm details > summary,\n &.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n }\n\n &.-size-lg details > summary,\n &.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n }\n}\n",
|
|
618
661
|
"canvasHighContrast": "/**\n * @component tree-browser\n * @selector .pfx-tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n@scope (.pfx-tree-browser) {\n & {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n }\n\n /* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n & details > summary,\n & .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n }\n\n & details > summary [class*=\"-icon-\"],\n & .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n & details > summary::-webkit-details-marker {\n display: none;\n }\n\n /* The disclosure chevron rotates open (same technique as toggle-details). */\n & details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n }\n\n & details[open] > summary::before {\n transform: rotate(90deg);\n }\n\n & details > summary:hover,\n & .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n }\n\n & details > summary.-selected,\n & .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n }\n\n /* Nested lists indent; the leaf list carries no bullets. */\n & ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n }\n\n &.-size-sm details > summary,\n &.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n }\n\n &.-size-lg details > summary,\n &.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n }\n}\n"
|
|
619
662
|
}.rebrand;
|
|
663
|
+
const view$1 = {
|
|
664
|
+
"rebrand": "/**\n * @component view\n * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities.\n * @selector .pfx-view\n * @modifier -background-primary — Primary surface background.\n * @modifier -background-secondary — Secondary surface background.\n * @modifier -background-primary-inverse — Inverse primary surface background.\n * @modifier -background-brand — Brand surface background.\n * @modifier -background-info — Info surface background.\n * @modifier -background-alert — Alert surface background.\n * @modifier -background-success — Success surface background.\n * @modifier -background-danger — Danger surface background.\n * @modifier -background-warning — Warning surface background.\n * @modifier -background-transparent — Transparent background.\n * @modifier -border-radius-small — Small corner radius.\n * @modifier -border-radius-medium — Medium corner radius.\n * @modifier -border-radius-large — Large corner radius.\n * @modifier -border-radius-circle — Fully circular (50%) radius.\n * @modifier -border-radius-pill — Pill (full) radius.\n * @modifier -border-width-small — Small solid border in the base stroke colour.\n * @modifier -border-width-medium — Medium solid border in the base stroke colour.\n * @modifier -border-width-large — Large solid border in the base stroke colour.\n * @modifier -border-color-primary — Base stroke border colour.\n * @modifier -border-color-brand — Brand stroke border colour.\n * @modifier -border-color-success — Success stroke border colour.\n * @modifier -border-color-info — Info stroke border colour.\n * @modifier -border-color-warning — Warning stroke border colour.\n * @modifier -border-color-danger — Error stroke border colour.\n * @modifier -shadow-resting — Resting elevation shadow.\n * @modifier -shadow-above — Above elevation shadow.\n * @modifier -shadow-topmost — Topmost elevation shadow.\n * @modifier -display-block — display: block.\n * @modifier -display-inline-block — display: inline-block.\n * @modifier -display-inline — display: inline.\n * @modifier -display-flex — display: flex.\n * @modifier -display-inline-flex — display: inline-flex.\n * @modifier -display-none — display: none.\n * @modifier -position-static — position: static.\n * @modifier -position-relative — position: relative.\n * @modifier -position-absolute — position: absolute.\n * @modifier -position-fixed — position: fixed.\n * @modifier -position-sticky — position: sticky.\n * @modifier -overflow-x-visible — overflow-x: visible.\n * @modifier -overflow-x-hidden — overflow-x: hidden.\n * @modifier -overflow-x-auto — overflow-x: auto.\n * @modifier -overflow-x-scroll — overflow-x: scroll.\n * @modifier -overflow-x-clip — overflow-x: clip.\n * @modifier -overflow-y-visible — overflow-y: visible.\n * @modifier -overflow-y-hidden — overflow-y: hidden.\n * @modifier -overflow-y-auto — overflow-y: auto.\n * @modifier -overflow-y-scroll — overflow-y: scroll.\n * @modifier -overflow-y-clip — overflow-y: clip.\n * @modifier -cursor-auto — cursor: auto.\n * @modifier -cursor-default — cursor: default.\n * @modifier -cursor-pointer — cursor: pointer.\n * @modifier -cursor-not-allowed — cursor: not-allowed.\n * @modifier -cursor-text — cursor: text.\n * @modifier -cursor-move — cursor: move.\n * @modifier -cursor-grab — cursor: grab.\n * @modifier -cursor-wait — cursor: wait.\n * @example\n * ```html\n * <div class=\"pfx-view -background-secondary -border-radius-medium -shadow-resting\">\n * A card-like surface.\n * </div>\n * ```\n */\n@scope (.pfx-view) {\n & {\n display: block;\n box-sizing: border-box;\n }\n}\n",
|
|
665
|
+
"canvas": "/**\n * @component view\n * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities.\n * @selector .pfx-view\n * @modifier -background-primary — Primary surface background.\n * @modifier -background-secondary — Secondary surface background.\n * @modifier -background-primary-inverse — Inverse primary surface background.\n * @modifier -background-brand — Brand surface background.\n * @modifier -background-info — Info surface background.\n * @modifier -background-alert — Alert surface background.\n * @modifier -background-success — Success surface background.\n * @modifier -background-danger — Danger surface background.\n * @modifier -background-warning — Warning surface background.\n * @modifier -background-transparent — Transparent background.\n * @modifier -border-radius-small — Small corner radius.\n * @modifier -border-radius-medium — Medium corner radius.\n * @modifier -border-radius-large — Large corner radius.\n * @modifier -border-radius-circle — Fully circular (50%) radius.\n * @modifier -border-radius-pill — Pill (full) radius.\n * @modifier -border-width-small — Small solid border in the base stroke colour.\n * @modifier -border-width-medium — Medium solid border in the base stroke colour.\n * @modifier -border-width-large — Large solid border in the base stroke colour.\n * @modifier -border-color-primary — Base stroke border colour.\n * @modifier -border-color-brand — Brand stroke border colour.\n * @modifier -border-color-success — Success stroke border colour.\n * @modifier -border-color-info — Info stroke border colour.\n * @modifier -border-color-warning — Warning stroke border colour.\n * @modifier -border-color-danger — Error stroke border colour.\n * @modifier -shadow-resting — Resting elevation shadow.\n * @modifier -shadow-above — Above elevation shadow.\n * @modifier -shadow-topmost — Topmost elevation shadow.\n * @modifier -display-block — display: block.\n * @modifier -display-inline-block — display: inline-block.\n * @modifier -display-inline — display: inline.\n * @modifier -display-flex — display: flex.\n * @modifier -display-inline-flex — display: inline-flex.\n * @modifier -display-none — display: none.\n * @modifier -position-static — position: static.\n * @modifier -position-relative — position: relative.\n * @modifier -position-absolute — position: absolute.\n * @modifier -position-fixed — position: fixed.\n * @modifier -position-sticky — position: sticky.\n * @modifier -overflow-x-visible — overflow-x: visible.\n * @modifier -overflow-x-hidden — overflow-x: hidden.\n * @modifier -overflow-x-auto — overflow-x: auto.\n * @modifier -overflow-x-scroll — overflow-x: scroll.\n * @modifier -overflow-x-clip — overflow-x: clip.\n * @modifier -overflow-y-visible — overflow-y: visible.\n * @modifier -overflow-y-hidden — overflow-y: hidden.\n * @modifier -overflow-y-auto — overflow-y: auto.\n * @modifier -overflow-y-scroll — overflow-y: scroll.\n * @modifier -overflow-y-clip — overflow-y: clip.\n * @modifier -cursor-auto — cursor: auto.\n * @modifier -cursor-default — cursor: default.\n * @modifier -cursor-pointer — cursor: pointer.\n * @modifier -cursor-not-allowed — cursor: not-allowed.\n * @modifier -cursor-text — cursor: text.\n * @modifier -cursor-move — cursor: move.\n * @modifier -cursor-grab — cursor: grab.\n * @modifier -cursor-wait — cursor: wait.\n * @example\n * ```html\n * <div class=\"pfx-view -background-secondary -border-radius-medium -shadow-resting\">\n * A card-like surface.\n * </div>\n * ```\n */\n@scope (.pfx-view) {\n & {\n display: block;\n box-sizing: border-box;\n }\n}\n",
|
|
666
|
+
"canvasHighContrast": "/**\n * @component view\n * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities.\n * @selector .pfx-view\n * @modifier -background-primary — Primary surface background.\n * @modifier -background-secondary — Secondary surface background.\n * @modifier -background-primary-inverse — Inverse primary surface background.\n * @modifier -background-brand — Brand surface background.\n * @modifier -background-info — Info surface background.\n * @modifier -background-alert — Alert surface background.\n * @modifier -background-success — Success surface background.\n * @modifier -background-danger — Danger surface background.\n * @modifier -background-warning — Warning surface background.\n * @modifier -background-transparent — Transparent background.\n * @modifier -border-radius-small — Small corner radius.\n * @modifier -border-radius-medium — Medium corner radius.\n * @modifier -border-radius-large — Large corner radius.\n * @modifier -border-radius-circle — Fully circular (50%) radius.\n * @modifier -border-radius-pill — Pill (full) radius.\n * @modifier -border-width-small — Small solid border in the base stroke colour.\n * @modifier -border-width-medium — Medium solid border in the base stroke colour.\n * @modifier -border-width-large — Large solid border in the base stroke colour.\n * @modifier -border-color-primary — Base stroke border colour.\n * @modifier -border-color-brand — Brand stroke border colour.\n * @modifier -border-color-success — Success stroke border colour.\n * @modifier -border-color-info — Info stroke border colour.\n * @modifier -border-color-warning — Warning stroke border colour.\n * @modifier -border-color-danger — Error stroke border colour.\n * @modifier -shadow-resting — Resting elevation shadow.\n * @modifier -shadow-above — Above elevation shadow.\n * @modifier -shadow-topmost — Topmost elevation shadow.\n * @modifier -display-block — display: block.\n * @modifier -display-inline-block — display: inline-block.\n * @modifier -display-inline — display: inline.\n * @modifier -display-flex — display: flex.\n * @modifier -display-inline-flex — display: inline-flex.\n * @modifier -display-none — display: none.\n * @modifier -position-static — position: static.\n * @modifier -position-relative — position: relative.\n * @modifier -position-absolute — position: absolute.\n * @modifier -position-fixed — position: fixed.\n * @modifier -position-sticky — position: sticky.\n * @modifier -overflow-x-visible — overflow-x: visible.\n * @modifier -overflow-x-hidden — overflow-x: hidden.\n * @modifier -overflow-x-auto — overflow-x: auto.\n * @modifier -overflow-x-scroll — overflow-x: scroll.\n * @modifier -overflow-x-clip — overflow-x: clip.\n * @modifier -overflow-y-visible — overflow-y: visible.\n * @modifier -overflow-y-hidden — overflow-y: hidden.\n * @modifier -overflow-y-auto — overflow-y: auto.\n * @modifier -overflow-y-scroll — overflow-y: scroll.\n * @modifier -overflow-y-clip — overflow-y: clip.\n * @modifier -cursor-auto — cursor: auto.\n * @modifier -cursor-default — cursor: default.\n * @modifier -cursor-pointer — cursor: pointer.\n * @modifier -cursor-not-allowed — cursor: not-allowed.\n * @modifier -cursor-text — cursor: text.\n * @modifier -cursor-move — cursor: move.\n * @modifier -cursor-grab — cursor: grab.\n * @modifier -cursor-wait — cursor: wait.\n * @example\n * ```html\n * <div class=\"pfx-view -background-secondary -border-radius-medium -shadow-resting\">\n * A card-like surface.\n * </div>\n * ```\n */\n@scope (.pfx-view) {\n & {\n display: block;\n box-sizing: border-box;\n }\n}\n"
|
|
667
|
+
}.rebrand;
|
|
620
668
|
const icon$1 = {
|
|
621
669
|
"rebrand": "/**\n * @utility icon\n * @selector .pfx-icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n@scope (.pfx-icon) {\n & {\n display: inline-flex;\n }\n}\n\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
|
|
622
670
|
"canvas": "/**\n * @utility icon\n * @selector .pfx-icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n@scope (.pfx-icon) {\n & {\n display: inline-flex;\n }\n}\n\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
|
|
@@ -730,186 +778,12 @@ const breadcrumbLinkCss = breadcrumbLink.css;
|
|
|
730
778
|
const css = (strings, ...values) => strings.reduce((out, chunk, i) => out + (i ? String(values[i - 1]) : "") + chunk, "");
|
|
731
779
|
//#endregion
|
|
732
780
|
//#region src/components/button/index.ts
|
|
733
|
-
/** The `button` component record: an accessible action control styled from the token palette, primary by default. */
|
|
734
|
-
const button = defineComponent({
|
|
735
|
-
name: "button",
|
|
736
|
-
css: (p) => css`
|
|
737
781
|
/**
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
* @modifier -color-danger — A destructive action.
|
|
744
|
-
* @modifier -shape-circle — A round icon button.
|
|
745
|
-
* @modifier -condensed — Tighter padding for dense toolbars.
|
|
746
|
-
* @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).
|
|
747
|
-
* @modifier -without-background — Drop the fill (ghost).
|
|
748
|
-
* @modifier -color-success — A positive/confirming action.
|
|
749
|
-
* @modifier -color-ai — An AI action.
|
|
750
|
-
* @modifier -color-ai-secondary — A lower-emphasis AI action.
|
|
751
|
-
* @modifier -color-primary-inverse — Primary action for dark backgrounds.
|
|
752
|
-
* @modifier -size-sm — Small.
|
|
753
|
-
* @modifier -size-lg — Large.
|
|
754
|
-
* @modifier -shape-square — A square icon button.
|
|
755
|
-
* @modifier -display-block — Full-width block button.
|
|
756
|
-
* @modifier -ghost — Outline (ghost) style: a border in the colour's ghost tokens, no fill.
|
|
757
|
-
* @modifier -without-border — Remove the border.
|
|
758
|
-
* @modifier -icon-* — Render a glyph from the icon set before the label (e.g. \`-icon-arrow-right\`), painted in the button's text colour; pair with \`-shape-square\`/\`-shape-circle\` for an icon-only button.
|
|
759
|
-
* @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.
|
|
760
|
-
* @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.
|
|
761
|
-
* @cssstate disabled
|
|
762
|
-
* @cssstate pressed
|
|
763
|
-
* @a11y Drive the \`-toggle\` variant's pressed state with \`aria-pressed\`, and mark a disabled button with \`aria-disabled\` (or the native \`disabled\`).
|
|
764
|
-
* @example
|
|
765
|
-
* <button class="${p}button">Primary</button>
|
|
766
|
-
* @related close-button — The icon-only dismiss button.
|
|
767
|
-
* @demo self:button
|
|
768
|
-
*/
|
|
769
|
-
.${p}button {
|
|
770
|
-
display: inline-flex;
|
|
771
|
-
align-items: center;
|
|
772
|
-
justify-content: center;
|
|
773
|
-
gap: var(--instui-spacing-space-xs);
|
|
774
|
-
min-height: var(--instui-component-base-button-medium-height);
|
|
775
|
-
padding: var(--instui-spacing-space-xs) var(--instui-component-base-button-medium-padding-horizontal);
|
|
776
|
-
font-family: var(--instui-font-family-base);
|
|
777
|
-
font-size: var(--instui-component-base-button-medium-font-size);
|
|
778
|
-
font-weight: var(--instui-font-weight-interactive);
|
|
779
|
-
line-height: var(--instui-line-height-standalone-text-base);
|
|
780
|
-
border: var(--instui-border-width-md) solid transparent;
|
|
781
|
-
border-radius: var(--instui-component-base-button-border-radius);
|
|
782
|
-
cursor: pointer;
|
|
783
|
-
background: var(--instui-color-background-interactive-action-primary-base);
|
|
784
|
-
color: var(--instui-color-text-interactive-action-primary-base);
|
|
785
|
-
}
|
|
786
|
-
.${p}button:hover { background: var(--instui-color-background-interactive-action-primary-hover); }
|
|
787
|
-
.${p}button:active { background: var(--instui-color-background-interactive-action-primary-active); }
|
|
788
|
-
.${p}button:disabled,
|
|
789
|
-
.${p}button[aria-disabled="true"] {
|
|
790
|
-
background: var(--instui-color-background-interactive-action-primary-disabled);
|
|
791
|
-
color: var(--instui-color-text-interactive-action-primary-disabled);
|
|
792
|
-
cursor: not-allowed;
|
|
793
|
-
}
|
|
794
|
-
.${p}button.-color-secondary {
|
|
795
|
-
background: var(--instui-color-background-interactive-action-secondary-base);
|
|
796
|
-
color: var(--instui-color-text-interactive-action-secondary-base);
|
|
797
|
-
border-color: var(--instui-color-stroke-interactive-action-secondary-base);
|
|
798
|
-
}
|
|
799
|
-
.${p}button.-color-secondary:hover {
|
|
800
|
-
background: var(--instui-color-background-interactive-action-secondary-hover);
|
|
801
|
-
border-color: var(--instui-color-stroke-interactive-action-secondary-hover);
|
|
802
|
-
}
|
|
803
|
-
.${p}button.-color-secondary:active {
|
|
804
|
-
background: var(--instui-color-background-interactive-action-secondary-active);
|
|
805
|
-
border-color: var(--instui-color-stroke-interactive-action-secondary-active);
|
|
806
|
-
}
|
|
807
|
-
.${p}button.-color-danger {
|
|
808
|
-
background: var(--instui-color-background-interactive-action-destructive-base);
|
|
809
|
-
color: var(--instui-color-text-interactive-action-status-base);
|
|
810
|
-
}
|
|
811
|
-
.${p}button.-color-danger:hover { background: var(--instui-color-background-interactive-action-destructive-hover); }
|
|
812
|
-
.${p}button.-color-danger:active { background: var(--instui-color-background-interactive-action-destructive-active); }
|
|
813
|
-
.${p}button.-color-success {
|
|
814
|
-
background: var(--instui-color-background-interactive-action-success-base);
|
|
815
|
-
color: var(--instui-color-text-interactive-action-status-base);
|
|
816
|
-
}
|
|
817
|
-
.${p}button.-color-success:hover { background: var(--instui-color-background-interactive-action-success-hover); }
|
|
818
|
-
.${p}button.-color-tertiary {
|
|
819
|
-
background: transparent;
|
|
820
|
-
color: var(--instui-color-text-interactive-action-tertiary-base);
|
|
821
|
-
border-color: var(--instui-color-stroke-interactive-action-tertiary-base);
|
|
822
|
-
}
|
|
823
|
-
.${p}button.-color-tertiary:hover { background: var(--instui-color-background-interactive-action-tertiary-hover); }
|
|
824
|
-
.${p}button.-color-tertiary:active { background: var(--instui-color-background-interactive-action-tertiary-active); }
|
|
825
|
-
.${p}button.-color-primary-inverse {
|
|
826
|
-
background: var(--instui-component-base-button-primary-inverse-background);
|
|
827
|
-
color: var(--instui-component-base-button-primary-inverse-color);
|
|
828
|
-
border-color: var(--instui-component-base-button-primary-inverse-border-color);
|
|
829
|
-
}
|
|
830
|
-
/* On hover the border tracks the (light) hover fill, so it reads as no visible border. */
|
|
831
|
-
.${p}button.-color-primary-inverse:hover {
|
|
832
|
-
background: var(--instui-component-base-button-primary-inverse-hover-background);
|
|
833
|
-
border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);
|
|
834
|
-
}
|
|
835
|
-
.${p}button.-color-primary-inverse:active {
|
|
836
|
-
background: var(--instui-component-base-button-primary-inverse-active-background);
|
|
837
|
-
border-color: var(--instui-component-base-button-primary-on-color-active-border-color);
|
|
838
|
-
}
|
|
839
|
-
/*
|
|
840
|
-
* AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)
|
|
841
|
-
* that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added
|
|
842
|
-
* automatically via ::before.
|
|
843
|
-
*/
|
|
844
|
-
.${p}button.-color-ai {
|
|
845
|
-
color: var(--instui-color-text-interactive-action-ai-base);
|
|
846
|
-
border-color: transparent;
|
|
847
|
-
background:
|
|
848
|
-
linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%) padding-box,
|
|
849
|
-
linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%) border-box;
|
|
850
|
-
}
|
|
851
|
-
.${p}button.-color-ai:hover {
|
|
852
|
-
color: var(--instui-color-text-interactive-action-ai-hover);
|
|
853
|
-
background:
|
|
854
|
-
linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%) padding-box,
|
|
855
|
-
linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%) border-box;
|
|
856
|
-
}
|
|
857
|
-
.${p}button.-color-ai:active {
|
|
858
|
-
color: var(--instui-color-text-interactive-action-ai-active);
|
|
859
|
-
background:
|
|
860
|
-
linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%) padding-box,
|
|
861
|
-
linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%) border-box;
|
|
862
|
-
}
|
|
863
|
-
/*
|
|
864
|
-
* ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,
|
|
865
|
-
* masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph
|
|
866
|
-
* (::before) picks up the same gradient. A single element can't paint gradient text and a fill at
|
|
867
|
-
* once, so — like InstUI's rest state — the centre stays transparent.
|
|
868
|
-
*/
|
|
869
|
-
.${p}button.-color-ai-secondary {
|
|
870
|
-
position: relative;
|
|
871
|
-
border-color: transparent;
|
|
872
|
-
background: linear-gradient(to bottom, var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%, var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%);
|
|
873
|
-
-webkit-background-clip: text;
|
|
874
|
-
background-clip: text;
|
|
875
|
-
-webkit-text-fill-color: transparent;
|
|
876
|
-
color: transparent;
|
|
877
|
-
}
|
|
878
|
-
/*
|
|
879
|
-
* The ring spans the border-box (outermost) edge, so it isn't inset past the base button's
|
|
880
|
-
* transparent border. The negative inset reaches out over that border; the radius is inherited, so
|
|
881
|
-
* it stays concentric with the button's outer corners.
|
|
882
|
-
*/
|
|
883
|
-
.${p}button.-color-ai-secondary::after {
|
|
884
|
-
content: "";
|
|
885
|
-
position: absolute;
|
|
886
|
-
inset: calc(-1 * var(--instui-border-width-md));
|
|
887
|
-
border-radius: inherit;
|
|
888
|
-
padding: var(--instui-border-width-sm);
|
|
889
|
-
background: linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);
|
|
890
|
-
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
891
|
-
-webkit-mask-composite: xor;
|
|
892
|
-
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
893
|
-
mask-composite: exclude;
|
|
894
|
-
pointer-events: none;
|
|
895
|
-
}
|
|
896
|
-
/*
|
|
897
|
-
* Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —
|
|
898
|
-
* one element can't paint clipped gradient text and a fill at once, so the interactive states fill.
|
|
899
|
-
*/
|
|
900
|
-
.${p}button.-color-ai-secondary:hover,
|
|
901
|
-
.${p}button.-color-ai-secondary:active {
|
|
902
|
-
-webkit-background-clip: border-box;
|
|
903
|
-
background-clip: border-box;
|
|
904
|
-
color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);
|
|
905
|
-
-webkit-text-fill-color: currentColor;
|
|
906
|
-
}
|
|
907
|
-
.${p}button.-color-ai-secondary:hover {
|
|
908
|
-
background: linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%);
|
|
909
|
-
}
|
|
910
|
-
.${p}button.-color-ai-secondary:active {
|
|
911
|
-
background: linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%);
|
|
912
|
-
}
|
|
782
|
+
* The rules requiring runtime interpolation — the shared `AI_ICON_MASK` mask value and the
|
|
783
|
+
* `@pantoken/plugin-colors` without-background hover/active washes — can't live in the `.css`-authored record
|
|
784
|
+
* (`button.css`), so they're appended here, scope-relative (`&`), via {@link appendGenerated}.
|
|
785
|
+
*/
|
|
786
|
+
const interpolatedRules = (p) => css`
|
|
913
787
|
/* The ai glyph, added automatically to every AI button and painted in its own colour. */
|
|
914
788
|
.${p}button.-color-ai::before,
|
|
915
789
|
.${p}button.-color-ai-secondary::before {
|
|
@@ -920,27 +794,8 @@ const button = defineComponent({
|
|
|
920
794
|
-webkit-mask: ${AI_ICON_MASK};
|
|
921
795
|
mask: ${AI_ICON_MASK};
|
|
922
796
|
}
|
|
923
|
-
.${p}button.-color-ai::before { background: var(--instui-color-text-interactive-action-ai-base); }
|
|
924
|
-
.${p}button.-color-ai-secondary::before {
|
|
925
|
-
background: linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);
|
|
926
|
-
}
|
|
927
|
-
/*
|
|
928
|
-
* --ghost is InstUI's withBackground={false}: an outline button in the colour's ghost tokens
|
|
929
|
-
* (transparent fill, coloured border + text). Defaults to primary; compose with --secondary for the
|
|
930
|
-
* secondary ghost.
|
|
931
|
-
*/
|
|
932
|
-
.${p}button.-without-background {
|
|
933
|
-
background: var(--instui-component-base-button-primary-ghost-background);
|
|
934
|
-
color: var(--instui-component-base-button-primary-ghost-color);
|
|
935
|
-
border-color: var(--instui-component-base-button-primary-ghost-border-color);
|
|
936
|
-
}
|
|
937
|
-
.${p}button.-color-secondary.-ghost {
|
|
938
|
-
background: var(--instui-component-base-button-secondary-ghost-background);
|
|
939
|
-
color: var(--instui-component-base-button-secondary-ghost-color);
|
|
940
|
-
border-color: var(--instui-component-base-button-secondary-ghost-border-color);
|
|
941
|
-
}
|
|
942
797
|
/*
|
|
943
|
-
*
|
|
798
|
+
* Without-background hover/active derive a subtle wash from the brand token via @pantoken/plugin-colors —
|
|
944
799
|
* a low-opacity, slightly-darkened brand, exactly as InstUI's runtime computes it
|
|
945
800
|
* (alpha(darken(brand), n)). The *-ghost-hover-background *tokens* resolve to the solid brand fill,
|
|
946
801
|
* which would print same-colour-on-same-colour text; deriving the wash keeps the rest text legible
|
|
@@ -952,62 +807,11 @@ const button = defineComponent({
|
|
|
952
807
|
.${p}button.-without-background:active {
|
|
953
808
|
background: ${alpha(darken("var(--instui-component-base-button-primary-ghost-color)", 10), 20)};
|
|
954
809
|
}
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
}
|
|
961
|
-
/* --block is InstUI's display="block": a full-width button. */
|
|
962
|
-
.${p}button.-display-block {
|
|
963
|
-
display: flex;
|
|
964
|
-
width: 100%;
|
|
965
|
-
}
|
|
966
|
-
.${p}button.-size-sm {
|
|
967
|
-
font-size: var(--instui-component-base-button-small-font-size);
|
|
968
|
-
min-height: var(--instui-component-base-button-small-height);
|
|
969
|
-
padding-inline: var(--instui-component-base-button-small-padding-horizontal);
|
|
970
|
-
}
|
|
971
|
-
.${p}button.-size-lg {
|
|
972
|
-
font-size: var(--instui-component-base-button-large-font-size);
|
|
973
|
-
min-height: var(--instui-component-base-button-large-height);
|
|
974
|
-
padding-inline: var(--instui-component-base-button-large-padding-horizontal);
|
|
975
|
-
}
|
|
976
|
-
.${p}button.-shape-square {
|
|
977
|
-
padding: var(--instui-spacing-space-xs);
|
|
978
|
-
aspect-ratio: 1;
|
|
979
|
-
}
|
|
980
|
-
.${p}button.-shape-circle {
|
|
981
|
-
padding: var(--instui-spacing-space-xs);
|
|
982
|
-
aspect-ratio: 1;
|
|
983
|
-
border-radius: 50%;
|
|
984
|
-
}
|
|
985
|
-
/*
|
|
986
|
-
* A composed \`-icon-<name>\` rides the shared icon painter (utilities/icon), so a text button needs no
|
|
987
|
-
* button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only
|
|
988
|
-
* shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a
|
|
989
|
-
* (missing) label's cap height.
|
|
990
|
-
*/
|
|
991
|
-
.${p}button.-shape-square[class*="-icon-"]::before,
|
|
992
|
-
.${p}button.-shape-circle[class*="-icon-"]::before {
|
|
993
|
-
inline-size: 1.25em;
|
|
994
|
-
block-size: 1.25em;
|
|
995
|
-
}
|
|
996
|
-
.${p}button.-condensed {
|
|
997
|
-
background: transparent;
|
|
998
|
-
border-color: transparent;
|
|
999
|
-
min-height: 0;
|
|
1000
|
-
color: var(--instui-color-text-interactive-action-secondary-base);
|
|
1001
|
-
padding-inline: var(--instui-spacing-space-xs);
|
|
1002
|
-
}
|
|
1003
|
-
.${p}button.-condensed:hover { background: var(--instui-color-background-muted); }
|
|
1004
|
-
.${p}button.-toggle[aria-pressed="true"] {
|
|
1005
|
-
background: var(--instui-color-background-interactive-action-secondary-active);
|
|
1006
|
-
border-color: var(--instui-color-stroke-interactive-action-secondary-active);
|
|
1007
|
-
color: var(--instui-color-text-interactive-action-secondary-base);
|
|
1008
|
-
}
|
|
1009
|
-
/* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */
|
|
1010
|
-
.${p}button.-without-border { border-style: none; }`
|
|
810
|
+
`;
|
|
811
|
+
/** The `button` component record: an accessible action control styled from the token palette, primary by default. */
|
|
812
|
+
const button = defineComponent({
|
|
813
|
+
name: "button",
|
|
814
|
+
css: (p) => appendGenerated(button$1.replaceAll(SENTINEL, p), interpolatedRules(p))
|
|
1011
815
|
});
|
|
1012
816
|
/** Standalone `button` stylesheet — the prefixed CSS for the action button, ready to ship as a `.css` file. */
|
|
1013
817
|
const buttonCss = button.css;
|
|
@@ -1129,93 +933,11 @@ const formFieldMessages = defineComponent({
|
|
|
1129
933
|
/** Standalone `formFieldMessages` stylesheet — the prefixed CSS for the field messages, ready to ship as a `.css` file. */
|
|
1130
934
|
const formFieldMessagesCss = formFieldMessages.css;
|
|
1131
935
|
//#endregion
|
|
1132
|
-
//#region src/lib/headings.ts
|
|
1133
|
-
/**
|
|
1134
|
-
* The six document heading levels and their per-level size/weight rules — shared by the Heading
|
|
1135
|
-
* component (`.instui-heading.-level-h1`) and prose (`.pantoken-prose h1`) so both read one source of
|
|
1136
|
-
* truth from the `--instui-component-heading-<level>-*` tokens.
|
|
1137
|
-
*
|
|
1138
|
-
* @module
|
|
1139
|
-
*/
|
|
1140
|
-
/** The six document heading levels, in order. */
|
|
1141
|
-
const HEADING_LEVELS = [
|
|
1142
|
-
"h1",
|
|
1143
|
-
"h2",
|
|
1144
|
-
"h3",
|
|
1145
|
-
"h4",
|
|
1146
|
-
"h5",
|
|
1147
|
-
"h6"
|
|
1148
|
-
];
|
|
1149
|
-
/**
|
|
1150
|
-
* Per-level heading size + weight, straight from the `--instui-component-heading-<level>-*` tokens.
|
|
1151
|
-
* `selector(level)` maps a level (`"h1"`) to the selector that should carry its type styles.
|
|
1152
|
-
*/
|
|
1153
|
-
const headingLevelRules = (selector) => HEADING_LEVELS.map((l) => `${selector(l)} { font-size: var(--instui-component-heading-${l}-font-size); font-weight: var(--instui-component-heading-${l}-font-weight); }`).join("\n");
|
|
1154
|
-
//#endregion
|
|
1155
936
|
//#region src/components/heading/index.ts
|
|
1156
937
|
/** The `heading` component record: heading typography from `-level-h1` through `-level-h6`. */
|
|
1157
938
|
const heading = defineComponent({
|
|
1158
939
|
name: "heading",
|
|
1159
|
-
css: (p) =>
|
|
1160
|
-
/**
|
|
1161
|
-
* @component heading
|
|
1162
|
-
* @summary Heading typography from \`-level-h1\` to \`-level-h6\`.
|
|
1163
|
-
* @remarks The \`-variant-*\` presets override a \`-level-*\`'s font-size and font-weight, so combine only one of each family per element.
|
|
1164
|
-
* @modifier -level-h1 — Render at the h1 type scale.
|
|
1165
|
-
* @modifier -level-h2 — Render at the h2 type scale.
|
|
1166
|
-
* @modifier -level-h3 — Render at the h3 type scale.
|
|
1167
|
-
* @modifier -level-h4 — Render at the h4 type scale.
|
|
1168
|
-
* @modifier -level-h5 — Render at the h5 type scale.
|
|
1169
|
-
* @modifier -level-h6 — Render at the h6 type scale.
|
|
1170
|
-
* @modifier -color-secondary — Secondary (muted) colour.
|
|
1171
|
-
* @modifier -color-ai — AI-accent colour.
|
|
1172
|
-
* @modifier -color-primary-inverse — On-dark (primary inverse) colour.
|
|
1173
|
-
* @modifier -border-top — Add a top rule.
|
|
1174
|
-
* @modifier -border-bottom — Add a bottom rule.
|
|
1175
|
-
* @modifier -variant-label — Label type preset.
|
|
1176
|
-
* @modifier -variant-title-page — Page-title preset.
|
|
1177
|
-
* @modifier -variant-title-section — Section-title preset.
|
|
1178
|
-
* @modifier -variant-title-card-mini — Mini card-title preset.
|
|
1179
|
-
* @modifier -variant-title-card-regular — Regular card-title preset.
|
|
1180
|
-
* @modifier -variant-title-card-section — Card section-title preset.
|
|
1181
|
-
* @accessibility These classes set the visual level only, so render a real \`<h1>\`–\`<h6>\` (or use \`role="heading"\` with \`aria-level\`) to convey the heading level.
|
|
1182
|
-
* @example
|
|
1183
|
-
* <div class="${p}heading -level-h1">Heading h1</div>
|
|
1184
|
-
* @related text — Body typography for non-heading text.
|
|
1185
|
-
*/
|
|
1186
|
-
.${p}heading {
|
|
1187
|
-
display: block;
|
|
1188
|
-
margin: 0;
|
|
1189
|
-
font-family: var(--instui-component-heading-h1-font-family);
|
|
1190
|
-
color: var(--instui-component-heading-base-color);
|
|
1191
|
-
line-height: var(--instui-component-heading-line-height);
|
|
1192
|
-
font-size: var(--instui-component-heading-h1-font-size);
|
|
1193
|
-
font-weight: var(--instui-component-heading-h1-font-weight);
|
|
1194
|
-
}
|
|
1195
|
-
${headingLevelRules((l) => `.${p}heading.-level-${l}`)}
|
|
1196
|
-
.${p}heading.-variant-title-page { font-size: var(--instui-component-heading-title-page-desktop-font-size); font-weight: var(--instui-component-heading-title-page-desktop-font-weight); }
|
|
1197
|
-
.${p}heading.-variant-title-section { font-size: var(--instui-component-heading-title-section-font-size); font-weight: var(--instui-component-heading-title-section-font-weight); }
|
|
1198
|
-
.${p}heading.-variant-title-card-section { font-size: var(--instui-component-heading-title-card-section-font-size); font-weight: var(--instui-component-heading-title-card-section-font-weight); }
|
|
1199
|
-
.${p}heading.-variant-title-card-regular { font-size: var(--instui-component-heading-title-card-regular-font-size); font-weight: var(--instui-component-heading-title-card-regular-font-weight); }
|
|
1200
|
-
.${p}heading.-variant-title-card-mini { font-size: var(--instui-component-heading-title-card-mini-font-size); font-weight: var(--instui-component-heading-title-card-mini-font-weight); }
|
|
1201
|
-
.${p}heading.-variant-label { font-size: var(--instui-component-heading-label-font-size); font-weight: var(--instui-component-heading-label-font-weight); }
|
|
1202
|
-
.${p}heading.-color-secondary { color: var(--instui-component-heading-muted-color); }
|
|
1203
|
-
.${p}heading.-color-primary-inverse { color: var(--instui-component-heading-inverse-color); }
|
|
1204
|
-
.${p}heading.-color-ai {
|
|
1205
|
-
background: linear-gradient(to bottom, var(--instui-component-heading-ai-text-top-gradient-color) 0%, var(--instui-component-heading-ai-text-bottom-gradient-color) 100%);
|
|
1206
|
-
-webkit-background-clip: text;
|
|
1207
|
-
background-clip: text;
|
|
1208
|
-
-webkit-text-fill-color: transparent;
|
|
1209
|
-
color: transparent;
|
|
1210
|
-
}
|
|
1211
|
-
.${p}heading.-border-bottom {
|
|
1212
|
-
border-bottom: var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);
|
|
1213
|
-
padding-bottom: var(--instui-component-heading-border-padding);
|
|
1214
|
-
}
|
|
1215
|
-
.${p}heading.-border-top {
|
|
1216
|
-
border-top: var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);
|
|
1217
|
-
padding-top: var(--instui-component-heading-border-padding);
|
|
1218
|
-
}`
|
|
940
|
+
css: (p) => heading$1.replaceAll(SENTINEL, p)
|
|
1219
941
|
});
|
|
1220
942
|
/** Standalone `heading` stylesheet — the prefixed CSS for the heading type, ready to ship as a `.css` file. */
|
|
1221
943
|
const headingCss = heading.css;
|
|
@@ -1238,158 +960,11 @@ const inPlaceEdit = defineComponent({
|
|
|
1238
960
|
/** Standalone `inPlaceEdit` stylesheet — the prefixed CSS for the in-place editor, ready to ship as a `.css` file. */
|
|
1239
961
|
const inPlaceEditCss = inPlaceEdit.css;
|
|
1240
962
|
//#endregion
|
|
1241
|
-
//#region src/lib/field-controls.ts
|
|
1242
|
-
/**
|
|
1243
|
-
* The shared form-control CSS bases used by several input records:
|
|
1244
|
-
* - {@link fieldControlBase} — the native-control chrome (border/bg/radius/states) for TextInput,
|
|
1245
|
-
* TextArea, and SimpleSelect, keyed off a `--instui-component-<family>-*` token family.
|
|
1246
|
-
* - {@link inputFacadeBase} — the wrapped-input facade (a flex row that carries the text-input chrome
|
|
1247
|
-
* so icon/arrow content can sit inside the field) shared by InputGroup and NumberInput.
|
|
1248
|
-
*
|
|
1249
|
-
* Both take the already-`ns()`-joined prefix `p` and return a CSS fragment; the component records that
|
|
1250
|
-
* use them interpolate the fragment into their own `css:(p)=>…` body.
|
|
1251
|
-
*
|
|
1252
|
-
* @module
|
|
1253
|
-
*/
|
|
1254
|
-
/** The native-control chrome for TextInput/TextArea/SimpleSelect, from the `<fam>-*` token family. */
|
|
1255
|
-
function fieldControlBase(p, cls, fam) {
|
|
1256
|
-
const t = (s) => `var(--instui-component-${fam}-${s})`;
|
|
1257
|
-
const root = `.${p}${cls}`;
|
|
1258
|
-
return `
|
|
1259
|
-
${root} {
|
|
1260
|
-
display: block;
|
|
1261
|
-
inline-size: 100%;
|
|
1262
|
-
box-sizing: border-box;
|
|
1263
|
-
font-family: ${t("font-family")};
|
|
1264
|
-
font-weight: ${t("font-weight")};
|
|
1265
|
-
color: ${t("text-color")};
|
|
1266
|
-
background-color: ${t("background-color")};
|
|
1267
|
-
border: ${t("border-width")} solid ${t("border-color")};
|
|
1268
|
-
border-radius: ${t("border-radius")};
|
|
1269
|
-
}
|
|
1270
|
-
${root}::placeholder { color: ${t("placeholder-color")}; }
|
|
1271
|
-
${root}:hover {
|
|
1272
|
-
background-color: ${t("background-hover-color")};
|
|
1273
|
-
border-color: ${t("border-hover-color")};
|
|
1274
|
-
}
|
|
1275
|
-
${root}:hover::placeholder { color: ${t("placeholder-hover-color")}; }
|
|
1276
|
-
${root}:disabled,
|
|
1277
|
-
${root}.-disabled {
|
|
1278
|
-
background-color: ${t("background-disabled-color")};
|
|
1279
|
-
border-color: ${t("border-disabled-color")};
|
|
1280
|
-
color: ${t("text-disabled-color")};
|
|
1281
|
-
cursor: not-allowed;
|
|
1282
|
-
}
|
|
1283
|
-
${root}.-readonly {
|
|
1284
|
-
background-color: ${t("background-readonly-color")};
|
|
1285
|
-
border-color: ${t("border-readonly-color")};
|
|
1286
|
-
color: ${t("text-readonly-color")};
|
|
1287
|
-
}
|
|
1288
|
-
${root}.-invalid { border-color: ${t("error-border-color")}; }
|
|
1289
|
-
${root}.-success { border-color: ${t("success-border-color")}; }
|
|
1290
|
-
/* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after the
|
|
1291
|
-
user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */
|
|
1292
|
-
${root}:is(.-invalid, :user-invalid):focus-visible { outline-color: var(--instui-focus-outline-color-danger); }
|
|
1293
|
-
${root}.-success:focus-visible { outline-color: var(--instui-focus-outline-color-success); }
|
|
1294
|
-
`;
|
|
1295
|
-
}
|
|
1296
|
-
/**
|
|
1297
|
-
* The wrapped-input facade shared by InputGroup and NumberInput: a flex row that carries the text-input
|
|
1298
|
-
* chrome (border/bg/radius/height/states/sizes from `text-input-*`) so icon/arrow content can sit INSIDE
|
|
1299
|
-
* the field beside the input. The real `<input>` inside sheds its own border/bg/padding; the facade shows
|
|
1300
|
-
* the focus ring (via `:has(:focus-visible)`) since the input is chromeless. `cls` is the root class.
|
|
1301
|
-
*/
|
|
1302
|
-
function inputFacadeBase(p, cls) {
|
|
1303
|
-
const t = (s) => `var(--instui-component-text-input-${s})`;
|
|
1304
|
-
const root = `.${p}${cls}`;
|
|
1305
|
-
return `
|
|
1306
|
-
${root} {
|
|
1307
|
-
display: flex;
|
|
1308
|
-
align-items: center;
|
|
1309
|
-
inline-size: 100%;
|
|
1310
|
-
box-sizing: border-box;
|
|
1311
|
-
block-size: ${t("height-md")};
|
|
1312
|
-
padding-inline: ${t("padding-horizontal-md")};
|
|
1313
|
-
gap: ${t("gap-content")};
|
|
1314
|
-
background-color: ${t("background-color")};
|
|
1315
|
-
border: ${t("border-width")} solid ${t("border-color")};
|
|
1316
|
-
border-radius: ${t("border-radius")};
|
|
1317
|
-
color: ${t("text-color")};
|
|
1318
|
-
font-family: ${t("font-family")};
|
|
1319
|
-
font-size: ${t("font-size-md")};
|
|
1320
|
-
}
|
|
1321
|
-
${root}:hover { background-color: ${t("background-hover-color")}; border-color: ${t("border-hover-color")}; }
|
|
1322
|
-
/* The inner control is chromeless — the facade provides border/bg/ring. */
|
|
1323
|
-
${root} > input,
|
|
1324
|
-
${root} .${p}text-input {
|
|
1325
|
-
flex: 1;
|
|
1326
|
-
min-inline-size: 0;
|
|
1327
|
-
border: 0;
|
|
1328
|
-
padding: 0;
|
|
1329
|
-
background: transparent;
|
|
1330
|
-
block-size: auto;
|
|
1331
|
-
font: inherit;
|
|
1332
|
-
color: inherit;
|
|
1333
|
-
outline: none;
|
|
1334
|
-
}
|
|
1335
|
-
${root} > input::placeholder { color: ${t("placeholder-color")}; }
|
|
1336
|
-
/* Leading/trailing content slots (icons ride the -icon-* glyph painter). */
|
|
1337
|
-
${root} .before,
|
|
1338
|
-
${root} .after { display: inline-flex; align-items: center; flex: none; color: ${t("text-color")}; }
|
|
1339
|
-
${root}.-disabled,
|
|
1340
|
-
${root}:has(> input:disabled) {
|
|
1341
|
-
background-color: ${t("background-disabled-color")};
|
|
1342
|
-
border-color: ${t("border-disabled-color")};
|
|
1343
|
-
color: ${t("text-disabled-color")};
|
|
1344
|
-
cursor: not-allowed;
|
|
1345
|
-
}
|
|
1346
|
-
${root}.-readonly {
|
|
1347
|
-
background-color: ${t("background-readonly-color")};
|
|
1348
|
-
border-color: ${t("border-readonly-color")};
|
|
1349
|
-
color: ${t("text-readonly-color")};
|
|
1350
|
-
}
|
|
1351
|
-
${root}.-invalid { border-color: ${t("error-border-color")}; }
|
|
1352
|
-
${root}.-success { border-color: ${t("success-border-color")}; }
|
|
1353
|
-
/* Focus ring lives on the facade (the input has no chrome). */
|
|
1354
|
-
${root}:has(:focus-visible) {
|
|
1355
|
-
outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);
|
|
1356
|
-
outline-offset: var(--instui-focus-outline-offset);
|
|
1357
|
-
border-radius: var(--instui-focus-outline-radius);
|
|
1358
|
-
}
|
|
1359
|
-
${root}:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) { outline-color: var(--instui-focus-outline-color-danger); }
|
|
1360
|
-
${root}.-success:has(:focus-visible) { outline-color: var(--instui-focus-outline-color-success); }
|
|
1361
|
-
${root}.-size-sm { block-size: ${t("height-sm")}; padding-inline: ${t("padding-horizontal-sm")}; font-size: ${t("font-size-sm")}; }
|
|
1362
|
-
${root}.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; font-size: ${t("font-size-lg")}; }
|
|
1363
|
-
`;
|
|
1364
|
-
}
|
|
1365
|
-
//#endregion
|
|
1366
963
|
//#region src/components/input-group/index.ts
|
|
1367
964
|
/** The `inputGroup` component record: a facade around a text input with leading and trailing icon slots. */
|
|
1368
965
|
const inputGroup = defineComponent({
|
|
1369
966
|
name: "input-group",
|
|
1370
|
-
css: (p) =>
|
|
1371
|
-
/**
|
|
1372
|
-
* @component input-group
|
|
1373
|
-
* @summary A facade around a text input with leading and trailing icon slots.
|
|
1374
|
-
* @remarks Wraps the same field chrome as \`text-input\` with icon slots either side of it; \`-should-not-wrap\` is only needed when the group's contents would otherwise overflow onto a second line.
|
|
1375
|
-
* @modifier -disabled — Disabled state.
|
|
1376
|
-
* @modifier -invalid — Invalid (error) state.
|
|
1377
|
-
* @modifier -readonly — Read-only state.
|
|
1378
|
-
* @modifier -success — Success (valid) state.
|
|
1379
|
-
* @modifier -size-sm — Small.
|
|
1380
|
-
* @modifier -size-lg — Large.
|
|
1381
|
-
* @modifier -should-not-wrap — Keep the group on one line (no wrapping).
|
|
1382
|
-
* @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.
|
|
1383
|
-
* @cssstate disabled
|
|
1384
|
-
* @example
|
|
1385
|
-
* <span class="${p}input-group">
|
|
1386
|
-
* <span class="before">@</span>
|
|
1387
|
-
* <input type="text" placeholder="username">
|
|
1388
|
-
* </span>
|
|
1389
|
-
* @related text-input — Wraps a text input, adding leading and trailing icon slots.
|
|
1390
|
-
*/
|
|
1391
|
-
${inputFacadeBase(p, "input-group")}
|
|
1392
|
-
.${p}input-group.-should-not-wrap { flex-wrap: nowrap; }`
|
|
967
|
+
css: (p) => inputGroup$1.replaceAll(SENTINEL, p)
|
|
1393
968
|
});
|
|
1394
969
|
/** Standalone `inputGroup` stylesheet — the prefixed CSS for the input group, ready to ship as a `.css` file. */
|
|
1395
970
|
const inputGroupCss = inputGroup.css;
|
|
@@ -1515,89 +1090,7 @@ const modalHeaderCss = modalHeader.css;
|
|
|
1515
1090
|
/** The `numberInput` component record: a number-input facade with a plus/minus spinner column. */
|
|
1516
1091
|
const numberInput = defineComponent({
|
|
1517
1092
|
name: "number-input",
|
|
1518
|
-
css: (p) =>
|
|
1519
|
-
const t = (s) => `var(--instui-component-text-input-${s})`;
|
|
1520
|
-
const a = (s) => `var(--instui-component-text-input-arrows-${s})`;
|
|
1521
|
-
const root = `.${p}number-input`;
|
|
1522
|
-
return css`
|
|
1523
|
-
/**
|
|
1524
|
-
* @component number-input
|
|
1525
|
-
* @summary A number-input facade with a +/- spinner column.
|
|
1526
|
-
* @remarks The \`.arrows\` buttons are \`aria-hidden\` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.
|
|
1527
|
-
* @modifier -disabled — Disabled state.
|
|
1528
|
-
* @modifier -invalid — Invalid (error) state.
|
|
1529
|
-
* @modifier -readonly — Read-only state.
|
|
1530
|
-
* @modifier -success — Success (valid) state.
|
|
1531
|
-
* @modifier -size-sm — Small.
|
|
1532
|
-
* @modifier -size-lg — Large.
|
|
1533
|
-
* @part .arrows — The +/- spinner column at the inline-end.
|
|
1534
|
-
* @part .down — The decrement button; the unclassed button increments.
|
|
1535
|
-
* @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on \`.down\`.
|
|
1536
|
-
* @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.
|
|
1537
|
-
* @cssstate disabled
|
|
1538
|
-
* @accessibility Put the accessible name on the \`<input>\` (e.g. \`aria-label\`) so the field owns the value; the +/- spinner buttons are decorative and marked \`aria-hidden="true"\`.
|
|
1539
|
-
* @example
|
|
1540
|
-
* <span class="${p}number-input">
|
|
1541
|
-
* <input id="qty" type="number" value="1" aria-label="Quantity">
|
|
1542
|
-
* <span class="arrows">
|
|
1543
|
-
* <button type="button" id="up" aria-hidden="true"></button>
|
|
1544
|
-
* <button class="down" type="button" id="down" aria-hidden="true"></button>
|
|
1545
|
-
* </span>
|
|
1546
|
-
* </span>
|
|
1547
|
-
* @structure
|
|
1548
|
-
* .${p}number-input {
|
|
1549
|
-
* input {}
|
|
1550
|
-
* .arrows {
|
|
1551
|
-
* button {}
|
|
1552
|
-
* .down {}
|
|
1553
|
-
* }
|
|
1554
|
-
* }
|
|
1555
|
-
* @related text-input — Shares the same input facade chrome.
|
|
1556
|
-
* @related range-input — Another numeric input control.
|
|
1557
|
-
*/
|
|
1558
|
-
${inputFacadeBase(p, "number-input")}
|
|
1559
|
-
/* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column to
|
|
1560
|
-
the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus ring
|
|
1561
|
-
is an outline, so overflow:hidden doesn't clip it. */
|
|
1562
|
-
${root} { padding-inline-end: 0; overflow: hidden; }
|
|
1563
|
-
/* native UA spinners off — we supply our own */
|
|
1564
|
-
${root} > input::-webkit-outer-spin-button,
|
|
1565
|
-
${root} > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
1566
|
-
${root} > input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
|
|
1567
|
-
${root} .arrows {
|
|
1568
|
-
display: flex;
|
|
1569
|
-
flex-direction: column;
|
|
1570
|
-
flex: none;
|
|
1571
|
-
align-self: stretch;
|
|
1572
|
-
/* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */
|
|
1573
|
-
inline-size: 1.5rem;
|
|
1574
|
-
border-inline-start: ${t("border-width")} solid ${t("border-color")};
|
|
1575
|
-
}
|
|
1576
|
-
${root} .arrows button {
|
|
1577
|
-
flex: 1;
|
|
1578
|
-
display: flex;
|
|
1579
|
-
align-items: center;
|
|
1580
|
-
justify-content: center;
|
|
1581
|
-
padding: 0;
|
|
1582
|
-
border: 0;
|
|
1583
|
-
background: ${a("background-color")};
|
|
1584
|
-
color: var(--instui-color-icon-interactive-action-secondary-base);
|
|
1585
|
-
cursor: pointer;
|
|
1586
|
-
}
|
|
1587
|
-
${root} .arrows button + button { border-block-start: ${t("border-width")} solid ${t("border-color")}; }
|
|
1588
|
-
${root} .arrows button:hover { background: ${a("background-hover-color")}; }
|
|
1589
|
-
${root} .arrows button:active { background: ${a("background-active-color")}; }
|
|
1590
|
-
${root} .arrows button:disabled { background: ${a("background-disabled-color")}; cursor: not-allowed; }
|
|
1591
|
-
${root} .arrows button::before {
|
|
1592
|
-
content: "";
|
|
1593
|
-
inline-size: 0.875em;
|
|
1594
|
-
block-size: 0.875em;
|
|
1595
|
-
background: currentColor;
|
|
1596
|
-
-webkit-mask: ${CHEVRON_UP_ICON};
|
|
1597
|
-
mask: ${CHEVRON_UP_ICON};
|
|
1598
|
-
}
|
|
1599
|
-
${root} .arrows button.down::before { -webkit-mask: ${CHEVRON_DOWN_ICON}; mask: ${CHEVRON_DOWN_ICON}; }`;
|
|
1600
|
-
}
|
|
1093
|
+
css: (p) => numberInput$1.replaceAll(SENTINEL, p)
|
|
1601
1094
|
});
|
|
1602
1095
|
/** Standalone `numberInput` stylesheet — the prefixed CSS for the number input, ready to ship as a `.css` file. */
|
|
1603
1096
|
const numberInputCss = numberInput.css;
|
|
@@ -1714,51 +1207,7 @@ const sideNavBarItemCss = sideNavBarItem.css;
|
|
|
1714
1207
|
/** The `simpleSelect` component record: a styled native `<select>` with a caret, matching the text-input states and sizes. */
|
|
1715
1208
|
const simpleSelect = defineComponent({
|
|
1716
1209
|
name: "simple-select",
|
|
1717
|
-
css: (p) =>
|
|
1718
|
-
const t = (s) => `var(--instui-component-text-input-${s})`;
|
|
1719
|
-
return css`
|
|
1720
|
-
/**
|
|
1721
|
-
* @component simple-select
|
|
1722
|
-
* @summary A styled native \`<select>\` with a caret, matching the text-input states and sizes.
|
|
1723
|
-
* @remarks Wraps a plain native \`<select>\` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with \`text-input\` via \`fieldControlBase\`.
|
|
1724
|
-
* @modifier -disabled — Disabled state.
|
|
1725
|
-
* @modifier -invalid — Invalid (error) state.
|
|
1726
|
-
* @modifier -readonly — Read-only state.
|
|
1727
|
-
* @modifier -success — Success (valid) state.
|
|
1728
|
-
* @modifier -size-sm — Small.
|
|
1729
|
-
* @modifier -size-lg — Large.
|
|
1730
|
-
* @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.
|
|
1731
|
-
* @cssstate disabled
|
|
1732
|
-
* @example
|
|
1733
|
-
* <select class="${p}simple-select">
|
|
1734
|
-
* <option>Choose a fruit…</option>
|
|
1735
|
-
* <option>Apple</option>
|
|
1736
|
-
* <option>Orange</option>
|
|
1737
|
-
* <option>Pear</option>
|
|
1738
|
-
* </select>
|
|
1739
|
-
* @structure
|
|
1740
|
-
* .${p}simple-select {
|
|
1741
|
-
* option {}
|
|
1742
|
-
* }
|
|
1743
|
-
* @related text-input — Shares the same field chrome, states, and sizes.
|
|
1744
|
-
* @related menu — The dropdown surface a richer select reuses.
|
|
1745
|
-
*/
|
|
1746
|
-
${fieldControlBase(p, "simple-select", "text-input")}
|
|
1747
|
-
.${p}simple-select {
|
|
1748
|
-
block-size: ${t("height-md")};
|
|
1749
|
-
padding-inline: ${t("padding-horizontal-md")};
|
|
1750
|
-
padding-inline-end: calc(${t("padding-horizontal-md")} + 1.5rem);
|
|
1751
|
-
font-size: ${t("font-size-md")};
|
|
1752
|
-
appearance: none;
|
|
1753
|
-
-webkit-appearance: none;
|
|
1754
|
-
background-image: ${SELECT_CHEVRON};
|
|
1755
|
-
background-repeat: no-repeat;
|
|
1756
|
-
background-position: right ${t("padding-horizontal-md")} center;
|
|
1757
|
-
background-size: 1em;
|
|
1758
|
-
}
|
|
1759
|
-
.${p}simple-select.-size-sm { block-size: ${t("height-sm")}; padding-inline: ${t("padding-horizontal-sm")}; padding-inline-end: calc(${t("padding-horizontal-sm")} + 1.5rem); font-size: ${t("font-size-sm")}; }
|
|
1760
|
-
.${p}simple-select.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; padding-inline-end: calc(${t("padding-horizontal-lg")} + 1.5rem); font-size: ${t("font-size-lg")}; }`;
|
|
1761
|
-
}
|
|
1210
|
+
css: (p) => simpleSelect$1.replaceAll(SENTINEL, p)
|
|
1762
1211
|
});
|
|
1763
1212
|
/** Standalone `simpleSelect` stylesheet — the prefixed CSS for the native select, ready to ship as a `.css` file. */
|
|
1764
1213
|
const simpleSelectCss = simpleSelect.css;
|
|
@@ -1884,36 +1333,7 @@ const textCss = text.css;
|
|
|
1884
1333
|
/** The `textArea` component record: a styled, resizable native `<textarea>` sharing the text input's states and sizes. */
|
|
1885
1334
|
const textArea = defineComponent({
|
|
1886
1335
|
name: "text-area",
|
|
1887
|
-
css: (p) =>
|
|
1888
|
-
const t = (s) => `var(--instui-component-text-area-${s})`;
|
|
1889
|
-
return css`
|
|
1890
|
-
/**
|
|
1891
|
-
* @component text-area
|
|
1892
|
-
* @summary A styled, resizable native \`<textarea>\` with the same states and sizes as the text input.
|
|
1893
|
-
* @remarks Shares \`fieldControlBase\` with \`text-input\` and \`simple-select\`, so it renders the same border, background, and focus states; only \`resize: vertical\` and the taller minimum height are unique to it.
|
|
1894
|
-
* @modifier -disabled — Disabled state.
|
|
1895
|
-
* @modifier -invalid — Invalid (error) state.
|
|
1896
|
-
* @modifier -readonly — Read-only state.
|
|
1897
|
-
* @modifier -success — Success (valid) state.
|
|
1898
|
-
* @modifier -size-sm — Small.
|
|
1899
|
-
* @modifier -size-lg — Large.
|
|
1900
|
-
* @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.
|
|
1901
|
-
* @cssstate disabled
|
|
1902
|
-
* @example
|
|
1903
|
-
* <textarea class="${p}text-area" placeholder="Write a comment…"></textarea>
|
|
1904
|
-
* @related text-input — The single-line counterpart with the same states and sizes.
|
|
1905
|
-
*/
|
|
1906
|
-
${fieldControlBase(p, "text-area", "text-area")}
|
|
1907
|
-
.${p}text-area {
|
|
1908
|
-
padding: ${t("padding")};
|
|
1909
|
-
font-size: ${t("font-size-md")};
|
|
1910
|
-
line-height: 1.5;
|
|
1911
|
-
min-block-size: 4rem;
|
|
1912
|
-
resize: vertical;
|
|
1913
|
-
}
|
|
1914
|
-
.${p}text-area.-size-sm { font-size: ${t("font-size-sm")}; }
|
|
1915
|
-
.${p}text-area.-size-lg { font-size: ${t("font-size-lg")}; }`;
|
|
1916
|
-
}
|
|
1336
|
+
css: (p) => textArea$1.replaceAll(SENTINEL, p)
|
|
1917
1337
|
});
|
|
1918
1338
|
/** Standalone `textArea` stylesheet — the prefixed CSS for the textarea, ready to ship as a `.css` file. */
|
|
1919
1339
|
const textAreaCss = textArea.css;
|
|
@@ -1922,37 +1342,7 @@ const textAreaCss = textArea.css;
|
|
|
1922
1342
|
/** The `textInput` component record: a styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes. */
|
|
1923
1343
|
const textInput = defineComponent({
|
|
1924
1344
|
name: "text-input",
|
|
1925
|
-
css: (p) =>
|
|
1926
|
-
const t = (s) => `var(--instui-component-text-input-${s})`;
|
|
1927
|
-
return css`
|
|
1928
|
-
/**
|
|
1929
|
-
* @component text-input
|
|
1930
|
-
* @summary A styled native \`<input>\` — including \`date\`, \`time\`, and \`datetime-local\`, where the browser supplies the picker — with validation states and sizes.
|
|
1931
|
-
* @remarks Shares its border, background, and state chrome with \`text-area\`, \`simple-select\`, \`number-input\`, and \`input-group\` via \`fieldControlBase\`; for \`date\`/\`time\`/\`datetime-local\` types the browser supplies its own picker UI, which this stylesheet doesn't style.
|
|
1932
|
-
* @modifier -disabled — Disabled state.
|
|
1933
|
-
* @modifier -invalid — Invalid (error) state.
|
|
1934
|
-
* @modifier -readonly — Read-only state.
|
|
1935
|
-
* @modifier -success — Success (valid) state.
|
|
1936
|
-
* @modifier -size-sm — Small.
|
|
1937
|
-
* @modifier -size-lg — Large.
|
|
1938
|
-
* @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.
|
|
1939
|
-
* @cssstate disabled
|
|
1940
|
-
* @example
|
|
1941
|
-
* <input class="${p}text-input" placeholder="Default">
|
|
1942
|
-
* @related text-area — The multi-line counterpart with the same states and sizes.
|
|
1943
|
-
* @related number-input — The numeric-entry input sharing this chrome.
|
|
1944
|
-
* @related simple-select — The native select sharing this field chrome.
|
|
1945
|
-
* @related input-group — Wraps this input with leading and trailing slots.
|
|
1946
|
-
*/
|
|
1947
|
-
${fieldControlBase(p, "text-input", "text-input")}
|
|
1948
|
-
.${p}text-input {
|
|
1949
|
-
block-size: ${t("height-md")};
|
|
1950
|
-
padding-inline: ${t("padding-horizontal-md")};
|
|
1951
|
-
font-size: ${t("font-size-md")};
|
|
1952
|
-
}
|
|
1953
|
-
.${p}text-input.-size-sm { block-size: ${t("height-sm")}; padding-inline: ${t("padding-horizontal-sm")}; font-size: ${t("font-size-sm")}; }
|
|
1954
|
-
.${p}text-input.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; font-size: ${t("font-size-lg")}; }`;
|
|
1955
|
-
}
|
|
1345
|
+
css: (p) => textInput$1.replaceAll(SENTINEL, p)
|
|
1956
1346
|
});
|
|
1957
1347
|
/** Standalone `textInput` stylesheet — the prefixed CSS for the text input, ready to ship as a `.css` file. */
|
|
1958
1348
|
const textInputCss = textInput.css;
|
|
@@ -2010,7 +1400,7 @@ const treeBrowserCss = treeBrowser.css;
|
|
|
2010
1400
|
* @module
|
|
2011
1401
|
*/
|
|
2012
1402
|
/** Generate rules for background modifiers. */
|
|
2013
|
-
const buildBackgroundRules = (
|
|
1403
|
+
const buildBackgroundRules = (rule) => {
|
|
2014
1404
|
return [...[
|
|
2015
1405
|
"primary",
|
|
2016
1406
|
"secondary",
|
|
@@ -2024,7 +1414,7 @@ const buildBackgroundRules = (p, rule) => {
|
|
|
2024
1414
|
].map((bg) => rule(`background-${bg}`, `background: var(--instui-component-view-background-${bg});`)), rule("background-transparent", "background: transparent;")];
|
|
2025
1415
|
};
|
|
2026
1416
|
/** Generate rules for border modifiers (radius, width, color). */
|
|
2027
|
-
const buildBorderRules = (
|
|
1417
|
+
const buildBorderRules = (rule) => {
|
|
2028
1418
|
const radiusRules = [
|
|
2029
1419
|
["small", "var(--instui-border-radius-sm)"],
|
|
2030
1420
|
["medium", "var(--instui-border-radius-md)"],
|
|
@@ -2052,7 +1442,7 @@ const buildBorderRules = (p, rule) => {
|
|
|
2052
1442
|
];
|
|
2053
1443
|
};
|
|
2054
1444
|
/** Generate rules for shadow, display, position, overflow, and cursor modifiers. */
|
|
2055
|
-
const buildEnumRules = (
|
|
1445
|
+
const buildEnumRules = (rule) => {
|
|
2056
1446
|
const shadowRules = [
|
|
2057
1447
|
"resting",
|
|
2058
1448
|
"above",
|
|
@@ -2102,74 +1492,13 @@ const buildEnumRules = (p, rule) => {
|
|
|
2102
1492
|
const view = defineComponent({
|
|
2103
1493
|
name: "view",
|
|
2104
1494
|
css: (p) => {
|
|
2105
|
-
const rule = (mod, decls) =>
|
|
2106
|
-
const rules = [
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
* @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the \`background\`/\`border\`/\`shadow\`/\`display\`/\`position\`/\`overflow\`/\`cursor\` utilities.
|
|
2113
|
-
* @modifier -background-primary — Primary surface background.
|
|
2114
|
-
* @modifier -background-secondary — Secondary surface background.
|
|
2115
|
-
* @modifier -background-primary-inverse — Inverse primary surface background.
|
|
2116
|
-
* @modifier -background-brand — Brand surface background.
|
|
2117
|
-
* @modifier -background-info — Info surface background.
|
|
2118
|
-
* @modifier -background-alert — Alert surface background.
|
|
2119
|
-
* @modifier -background-success — Success surface background.
|
|
2120
|
-
* @modifier -background-danger — Danger surface background.
|
|
2121
|
-
* @modifier -background-warning — Warning surface background.
|
|
2122
|
-
* @modifier -background-transparent — Transparent background.
|
|
2123
|
-
* @modifier -border-radius-small — Small corner radius.
|
|
2124
|
-
* @modifier -border-radius-medium — Medium corner radius.
|
|
2125
|
-
* @modifier -border-radius-large — Large corner radius.
|
|
2126
|
-
* @modifier -border-radius-circle — Fully circular (50%) radius.
|
|
2127
|
-
* @modifier -border-radius-pill — Pill (full) radius.
|
|
2128
|
-
* @modifier -border-width-small — Small solid border in the base stroke colour.
|
|
2129
|
-
* @modifier -border-width-medium — Medium solid border in the base stroke colour.
|
|
2130
|
-
* @modifier -border-width-large — Large solid border in the base stroke colour.
|
|
2131
|
-
* @modifier -border-color-primary — Base stroke border colour.
|
|
2132
|
-
* @modifier -border-color-brand — Brand stroke border colour.
|
|
2133
|
-
* @modifier -border-color-success — Success stroke border colour.
|
|
2134
|
-
* @modifier -border-color-info — Info stroke border colour.
|
|
2135
|
-
* @modifier -border-color-warning — Warning stroke border colour.
|
|
2136
|
-
* @modifier -border-color-danger — Error stroke border colour.
|
|
2137
|
-
* @modifier -shadow-resting — Resting elevation shadow.
|
|
2138
|
-
* @modifier -shadow-above — Above elevation shadow.
|
|
2139
|
-
* @modifier -shadow-topmost — Topmost elevation shadow.
|
|
2140
|
-
* @modifier -display-block — display: block.
|
|
2141
|
-
* @modifier -display-inline-block — display: inline-block.
|
|
2142
|
-
* @modifier -display-inline — display: inline.
|
|
2143
|
-
* @modifier -display-flex — display: flex.
|
|
2144
|
-
* @modifier -display-inline-flex — display: inline-flex.
|
|
2145
|
-
* @modifier -display-none — display: none.
|
|
2146
|
-
* @modifier -position-static — position: static.
|
|
2147
|
-
* @modifier -position-relative — position: relative.
|
|
2148
|
-
* @modifier -position-absolute — position: absolute.
|
|
2149
|
-
* @modifier -position-fixed — position: fixed.
|
|
2150
|
-
* @modifier -position-sticky — position: sticky.
|
|
2151
|
-
* @modifier -overflow-x-visible — overflow-x: visible.
|
|
2152
|
-
* @modifier -overflow-x-hidden — overflow-x: hidden.
|
|
2153
|
-
* @modifier -overflow-x-auto — overflow-x: auto.
|
|
2154
|
-
* @modifier -overflow-x-scroll — overflow-x: scroll.
|
|
2155
|
-
* @modifier -overflow-x-clip — overflow-x: clip.
|
|
2156
|
-
* @modifier -overflow-y-visible — overflow-y: visible.
|
|
2157
|
-
* @modifier -overflow-y-hidden — overflow-y: hidden.
|
|
2158
|
-
* @modifier -overflow-y-auto — overflow-y: auto.
|
|
2159
|
-
* @modifier -overflow-y-scroll — overflow-y: scroll.
|
|
2160
|
-
* @modifier -overflow-y-clip — overflow-y: clip.
|
|
2161
|
-
* @modifier -cursor-auto — cursor: auto.
|
|
2162
|
-
* @modifier -cursor-default — cursor: default.
|
|
2163
|
-
* @modifier -cursor-pointer — cursor: pointer.
|
|
2164
|
-
* @modifier -cursor-not-allowed — cursor: not-allowed.
|
|
2165
|
-
* @modifier -cursor-text — cursor: text.
|
|
2166
|
-
* @modifier -cursor-move — cursor: move.
|
|
2167
|
-
* @modifier -cursor-grab — cursor: grab.
|
|
2168
|
-
* @modifier -cursor-wait — cursor: wait.
|
|
2169
|
-
* @example
|
|
2170
|
-
* <div class="instui-view -background-secondary -border-radius-medium -shadow-resting">A card-like surface.</div>
|
|
2171
|
-
*/
|
|
2172
|
-
${rules.join("\n")}`;
|
|
1495
|
+
const rule = (mod, decls) => `&.-${mod} { ${decls} }`;
|
|
1496
|
+
const rules = [
|
|
1497
|
+
...buildBackgroundRules(rule),
|
|
1498
|
+
...buildBorderRules(rule),
|
|
1499
|
+
...buildEnumRules(rule)
|
|
1500
|
+
];
|
|
1501
|
+
return appendGenerated(view$1.replaceAll(SENTINEL, p), rules.join("\n"));
|
|
2173
1502
|
}
|
|
2174
1503
|
});
|
|
2175
1504
|
/** The View component as a standalone, header-wrapped stylesheet. */
|
|
@@ -2319,6 +1648,29 @@ function focusOutlineCss(options = {}) {
|
|
|
2319
1648
|
return css`${FOCUS_DOC}\n${tokenSelector} {\n${decls}\n}\n\n${focusOutlineRules$1(options.selector)}\n`;
|
|
2320
1649
|
}
|
|
2321
1650
|
//#endregion
|
|
1651
|
+
//#region src/lib/headings.ts
|
|
1652
|
+
/**
|
|
1653
|
+
* The six document heading levels and their per-level size/weight rules — shared by the Heading
|
|
1654
|
+
* component (`.instui-heading.-level-h1`) and prose (`.pantoken-prose h1`) so both read one source of
|
|
1655
|
+
* truth from the `--instui-component-heading-<level>-*` tokens.
|
|
1656
|
+
*
|
|
1657
|
+
* @module
|
|
1658
|
+
*/
|
|
1659
|
+
/** The six document heading levels, in order. */
|
|
1660
|
+
const HEADING_LEVELS = [
|
|
1661
|
+
"h1",
|
|
1662
|
+
"h2",
|
|
1663
|
+
"h3",
|
|
1664
|
+
"h4",
|
|
1665
|
+
"h5",
|
|
1666
|
+
"h6"
|
|
1667
|
+
];
|
|
1668
|
+
/**
|
|
1669
|
+
* Per-level heading size + weight, straight from the `--instui-component-heading-<level>-*` tokens.
|
|
1670
|
+
* `selector(level)` maps a level (`"h1"`) to the selector that should carry its type styles.
|
|
1671
|
+
*/
|
|
1672
|
+
const headingLevelRules = (selector) => HEADING_LEVELS.map((l) => `${selector(l)} { font-size: var(--instui-component-heading-${l}-font-size); font-weight: var(--instui-component-heading-${l}-font-weight); }`).join("\n");
|
|
1673
|
+
//#endregion
|
|
2322
1674
|
//#region src/rules/prose/index.ts
|
|
2323
1675
|
/**
|
|
2324
1676
|
* The `prose` rule — typographic defaults for raw HTML under a content-root scope. Unlike the other
|