@pantoken/components 1.1.3 → 1.1.4
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/avatar.css +1 -1
- package/dist/components.css +1 -1
- package/dist/index.mjs +3 -3
- package/dist/model.json +84 -82
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -305,9 +305,9 @@ const alert$1 = {
|
|
|
305
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"
|
|
306
306
|
}.rebrand;
|
|
307
307
|
const avatar$1 = {
|
|
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",
|
|
309
|
-
"canvas": "/**\n * @component avatar\n * @selector .pfx-avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border-always — Force the border ring on, even over an image or an inverse fill.\n * @modifier -show-border-never — Force the border ring off.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (the default).\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @modifier -show-border — @alias {@link -show-border-always}\n * @part .name — Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.\n * @part .first-name — Optional (pairs with .last-name): wraps the given name, clipped to its leading letter.\n * @part .last-name — Optional (pairs with .first-name): wraps the family name, clipped to its leading letter.\n * @a11y Give an image avatar a meaningful `alt` (the person's name), not a generic \"avatar\"; for initials-only avatars, prefer real name content (bare text, data-initials, .name, or .first-name/.last-name) over pre-abbreviated letters, so assistive tech announces the real name.\n * @example\n * ```html\n * <span class=\"pfx-avatar --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",
|
|
310
|
-
"canvasHighContrast": "/**\n * @component avatar\n * @selector .pfx-avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border-always — Force the border ring on, even over an image or an inverse fill.\n * @modifier -show-border-never — Force the border ring off.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (the default).\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @modifier -show-border — @alias {@link -show-border-always}\n * @part .name — Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.\n * @part .first-name — Optional (pairs with .last-name): wraps the given name, clipped to its leading letter.\n * @part .last-name — Optional (pairs with .first-name): wraps the family name, clipped to its leading letter.\n * @a11y Give an image avatar a meaningful `alt` (the person's name), not a generic \"avatar\"; for initials-only avatars, prefer real name content (bare text, data-initials, .name, or .first-name/.last-name) over pre-abbreviated letters, so assistive tech announces the real name.\n * @example\n * ```html\n * <span class=\"pfx-avatar --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"
|
|
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 — @deprecated {@link -color-grey}\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",
|
|
309
|
+
"canvas": "/**\n * @component avatar\n * @selector .pfx-avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — @deprecated {@link -color-grey}\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",
|
|
310
|
+
"canvasHighContrast": "/**\n * @component avatar\n * @selector .pfx-avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — @deprecated {@link -color-grey}\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"
|
|
311
311
|
}.rebrand;
|
|
312
312
|
const badge$1 = {
|
|
313
313
|
"rebrand": "/**\n * @component badge\n * @selector .pfx-badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * ```html\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * ```\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-badge) {\n :scope {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n\n &.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n }\n\n &.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n }\n\n /* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n &.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n }\n\n /* Notification: a small dot, no count. */\n &.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n }\n\n /* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n &.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n }\n\n /* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n &.-placement-top-end,\n &.-placement-top-start,\n &.-placement-bottom-end,\n &.-placement-bottom-start,\n &.-placement-start-center,\n &.-placement-end-center {\n position: absolute;\n }\n\n &.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n }\n\n &.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n }\n\n &.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n }\n\n &.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n }\n\n &.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n }\n\n &.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n }\n\n /* Standalone: the inline chip, in flow — resets any placement. */\n &.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n }\n }\n}\n",
|