@slotted/angular 0.1.0-beta.7 → 0.1.0-beta.9

package/fesm2022/slotted-angular-inline-message.mjs

@@ -210,35 +210,37 @@ class SlInlineMessage {
     prefixWord = computed(() => this.prefix() ?? this.defaults.prefixes[this.resolvedTone()] ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prefixWord" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlInlineMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlInlineMessage, isStandalone: true, selector: "[slInlineMessage]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, mark: { classPropertyName: "mark", publicName: "mark", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, reserve: { classPropertyName: "reserve", publicName: "reserve", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "inline-message", "data-part": "root" }, properties: { "attr.data-tone": "resolvedTone()", "attr.data-size": "resolvedSize()", "attr.data-live": "resolvedLive()", "attr.data-mark": "resolvedMark()", "attr.data-loading": "loading() ? '' : null", "attr.data-disabled": "disabled() === true ? '' : null", "attr.data-reserve": "reserve() ? '' : null", "attr.role": "role()", "attr.id": "messageId" } }, exportAs: ["slInlineMessage"], ngImport: i0, template: `@if (prefixWord() !== '') {
-      <span data-part="prefix">{{ prefixWord() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlInlineMessage, isStandalone: true, selector: "[slInlineMessage]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, mark: { classPropertyName: "mark", publicName: "mark", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, reserve: { classPropertyName: "reserve", publicName: "reserve", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "inline-message", "data-ui-inline-message": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-tone": "resolvedTone()", "attr.data-size": "resolvedSize()", "attr.data-live": "resolvedLive()", "attr.data-mark": "resolvedMark()", "attr.data-loading": "loading() ? '' : null", "attr.data-disabled": "disabled() === true ? '' : null", "attr.data-reserve": "reserve() ? '' : null", "attr.role": "role()", "attr.id": "messageId" } }, exportAs: ["slInlineMessage"], ngImport: i0, template: `@if (prefixWord() !== '') {
+      <span data-part="prefix" data-part-prefix="">{{ prefixWord() }}</span>
     }
     @if (!hideIcon()) {
-      <span aria-hidden="true" data-part="icon"
+      <span aria-hidden="true" data-part="icon" data-part-icon=""
         ><ng-content select="[slInlineMessageIcon]">
           @if (glyph(); as name) {
             <span slIcon><svg slGlyph [name]="name"></svg></span>
           }</ng-content
       ></span>
     }
-    <span data-part="text"><ng-content /></span>`, isInline: true, styles: ["@layer slotted.components{[data-ui=inline-message][data-part=root]{--_text: var(--slotted-text-muted);--_font-size: var(--slotted-control-font-size-sm, 12px);--_mark-size: 1em;--_column-gap: var(--slotted-inline-message-column-gap, var(--slotted-space-4, .5rem));color:var(--_text);display:grid;font-family:var( --slotted-inline-message-font-family, var(--slotted-control-font-family, sans-serif) );font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);line-height:var(--slotted-inline-message-line-height, var(--slotted-line-height-md, 1.5));margin:0;position:relative}[data-ui=inline-message][data-part=root][data-tone=accent]{--_text: var(--slotted-tone-accent-text)}[data-ui=inline-message][data-part=root][data-tone=secondary]{--_text: var(--slotted-text-muted)}[data-ui=inline-message][data-part=root][data-tone=success]{--_text: var(--slotted-tone-success-text)}[data-ui=inline-message][data-part=root][data-tone=warning]{--_text: var(--slotted-tone-warning-text)}[data-ui=inline-message][data-part=root][data-tone=danger]{--_text: var(--slotted-tone-danger-text)}[data-ui=inline-message][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px)}[data-ui=inline-message][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px)}[data-ui=inline-message][data-part=root][data-reserve]{min-block-size:1lh}[data-ui=inline-message]>[data-part=prefix]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=inline-message]>[data-part=icon]{--slotted-icon-size: var(--_mark-size);align-items:center;align-self:start;block-size:var(--_mark-size);box-sizing:border-box;display:flex;grid-column:1;grid-row:1;inline-size:var(--_mark-size);justify-content:center;margin-block-start:calc((1lh - var(--_mark-size)) / 2);margin-inline-end:var(--_column-gap)}[data-ui=inline-message][data-part=root][data-mark=dot]{--_dot-size: calc(var(--_mark-size) / 3)}[data-ui=inline-message][data-mark=dot]>[data-part=icon]:has(>[data-ui=icon]>[data-glyph=dot]){--slotted-icon-size: calc(var(--_dot-size) * 2);inline-size:var(--_dot-size)}[data-ui=inline-message][data-tone=secondary]:not([data-loading]):not([data-mark=dot])>[data-part=icon]:empty{display:none}[data-ui=inline-message][data-mark=none]:not([data-loading])>[data-part=icon]:empty{display:none}[data-ui=inline-message]>[data-part=text]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=inline-message]:has([data-part=text]:empty)>[data-part=icon],[data-ui=inline-message]:has([data-part=text]:empty)>[data-part=prefix]{display:none}[data-ui=inline-message][data-loading]>[data-part=icon]{animation:slotted-inline-message-spin var(--slotted-duration-loop-fast) linear infinite;block-size:var(--_mark-size);border:max(var(--slotted-border-width-thin, 1px),calc(var(--_mark-size) / 8)) solid currentcolor;border-inline-end-color:transparent;border-radius:var(--slotted-radius-full, 9999px);display:block;inline-size:var(--_mark-size);margin-block-start:calc((1lh - var(--_mark-size)) / 2)}[data-ui=inline-message][data-loading]>[data-part=icon]>*{display:none}[data-ui=inline-message][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=inline-message][data-disabled]>[data-part=icon]{animation:none}@media(prefers-reduced-motion:reduce){[data-ui=inline-message][data-loading]>[data-part=icon]{animation:none}}@media(forced-colors:active){[data-ui=inline-message]>[data-part=icon]{color:CanvasText}[data-ui=inline-message][data-part=root][data-disabled]>[data-part=icon]{color:GrayText}[data-ui=inline-message][data-loading]>[data-part=icon]{border-color:CanvasText;border-inline-end-color:Canvas}}}@keyframes slotted-inline-message-spin{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <span data-part="text" data-part-text=""><ng-content /></span>`, isInline: true, styles: ["@layer slotted.components{[data-ui-inline-message][data-part-root]{--_text: var(--slotted-text-muted);--_font-size: var(--slotted-control-font-size-sm, 12px);--_mark-size: 1em;--_column-gap: var(--slotted-inline-message-column-gap, var(--slotted-space-4, .5rem));color:var(--_text);display:grid;font-family:var( --slotted-inline-message-font-family, var(--slotted-control-font-family, sans-serif) );font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);line-height:var(--slotted-inline-message-line-height, var(--slotted-line-height-md, 1.5));margin:0;position:relative}[data-ui-inline-message][data-part-root][data-tone=accent]{--_text: var(--slotted-tone-accent-text)}[data-ui-inline-message][data-part-root][data-tone=secondary]{--_text: var(--slotted-text-muted)}[data-ui-inline-message][data-part-root][data-tone=success]{--_text: var(--slotted-tone-success-text)}[data-ui-inline-message][data-part-root][data-tone=warning]{--_text: var(--slotted-tone-warning-text)}[data-ui-inline-message][data-part-root][data-tone=danger]{--_text: var(--slotted-tone-danger-text)}[data-ui-inline-message][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px)}[data-ui-inline-message][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px)}[data-ui-inline-message][data-part-root][data-reserve]{min-block-size:1lh}[data-ui-inline-message]>[data-part-prefix]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-inline-message]>[data-part-icon]{--slotted-icon-size: var(--_mark-size);align-items:center;align-self:start;block-size:var(--_mark-size);box-sizing:border-box;display:flex;grid-column:1;grid-row:1;inline-size:var(--_mark-size);justify-content:center;margin-block-start:calc((1lh - var(--_mark-size)) / 2);margin-inline-end:var(--_column-gap)}[data-ui-inline-message][data-part-root][data-mark=dot]{--_dot-size: calc(var(--_mark-size) / 3)}[data-ui-inline-message][data-mark=dot]>[data-part-icon]:has(>[data-ui-icon]>[data-glyph=dot]){--slotted-icon-size: calc(var(--_dot-size) * 2);inline-size:var(--_dot-size)}[data-ui-inline-message][data-tone=secondary]:not([data-loading]):not([data-mark=dot])>[data-part-icon]:empty{display:none}[data-ui-inline-message][data-mark=none]:not([data-loading])>[data-part-icon]:empty{display:none}[data-ui-inline-message]>[data-part-text]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui-inline-message]:has([data-part-text]:empty)>[data-part-icon],[data-ui-inline-message]:has([data-part-text]:empty)>[data-part-prefix]{display:none}[data-ui-inline-message][data-loading]>[data-part-icon]{animation:slotted-inline-message-spin var(--slotted-duration-loop-fast) linear infinite;block-size:var(--_mark-size);border:max(var(--slotted-border-width-thin, 1px),calc(var(--_mark-size) / 8)) solid currentcolor;border-inline-end-color:transparent;border-radius:var(--slotted-radius-full, 9999px);display:block;inline-size:var(--_mark-size);margin-block-start:calc((1lh - var(--_mark-size)) / 2)}[data-ui-inline-message][data-loading]>[data-part-icon]>*{display:none}[data-ui-inline-message][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui-inline-message][data-disabled]>[data-part-icon]{animation:none}@media(prefers-reduced-motion:reduce){[data-ui-inline-message][data-loading]>[data-part-icon]{animation:none}}@media(forced-colors:active){[data-ui-inline-message]>[data-part-icon]{color:CanvasText}[data-ui-inline-message][data-part-root][data-disabled]>[data-part-icon]{color:GrayText}[data-ui-inline-message][data-loading]>[data-part-icon]{border-color:CanvasText;border-inline-end-color:Canvas}}}@keyframes slotted-inline-message-spin{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlInlineMessage, decorators: [{
             type: Component,
             args: [{ selector: '[slInlineMessage]', standalone: true, exportAs: 'slInlineMessage', imports: [SlGlyph, SlIcon], template: `@if (prefixWord() !== '') {
-      <span data-part="prefix">{{ prefixWord() }}</span>
+      <span data-part="prefix" data-part-prefix="">{{ prefixWord() }}</span>
     }
     @if (!hideIcon()) {
-      <span aria-hidden="true" data-part="icon"
+      <span aria-hidden="true" data-part="icon" data-part-icon=""
         ><ng-content select="[slInlineMessageIcon]">
           @if (glyph(); as name) {
             <span slIcon><svg slGlyph [name]="name"></svg></span>
           }</ng-content
       ></span>
     }
-    <span data-part="text"><ng-content /></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+    <span data-part="text" data-part-text=""><ng-content /></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'inline-message',
+                        'data-ui-inline-message': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-tone]': 'resolvedTone()',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-live]': 'resolvedLive()',
@@ -248,7 +250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-reserve]': "reserve() ? '' : null",
                         '[attr.role]': 'role()',
                         '[attr.id]': 'messageId',
-                    }, styles: ["@layer slotted.components{[data-ui=inline-message][data-part=root]{--_text: var(--slotted-text-muted);--_font-size: var(--slotted-control-font-size-sm, 12px);--_mark-size: 1em;--_column-gap: var(--slotted-inline-message-column-gap, var(--slotted-space-4, .5rem));color:var(--_text);display:grid;font-family:var( --slotted-inline-message-font-family, var(--slotted-control-font-family, sans-serif) );font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);line-height:var(--slotted-inline-message-line-height, var(--slotted-line-height-md, 1.5));margin:0;position:relative}[data-ui=inline-message][data-part=root][data-tone=accent]{--_text: var(--slotted-tone-accent-text)}[data-ui=inline-message][data-part=root][data-tone=secondary]{--_text: var(--slotted-text-muted)}[data-ui=inline-message][data-part=root][data-tone=success]{--_text: var(--slotted-tone-success-text)}[data-ui=inline-message][data-part=root][data-tone=warning]{--_text: var(--slotted-tone-warning-text)}[data-ui=inline-message][data-part=root][data-tone=danger]{--_text: var(--slotted-tone-danger-text)}[data-ui=inline-message][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px)}[data-ui=inline-message][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px)}[data-ui=inline-message][data-part=root][data-reserve]{min-block-size:1lh}[data-ui=inline-message]>[data-part=prefix]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=inline-message]>[data-part=icon]{--slotted-icon-size: var(--_mark-size);align-items:center;align-self:start;block-size:var(--_mark-size);box-sizing:border-box;display:flex;grid-column:1;grid-row:1;inline-size:var(--_mark-size);justify-content:center;margin-block-start:calc((1lh - var(--_mark-size)) / 2);margin-inline-end:var(--_column-gap)}[data-ui=inline-message][data-part=root][data-mark=dot]{--_dot-size: calc(var(--_mark-size) / 3)}[data-ui=inline-message][data-mark=dot]>[data-part=icon]:has(>[data-ui=icon]>[data-glyph=dot]){--slotted-icon-size: calc(var(--_dot-size) * 2);inline-size:var(--_dot-size)}[data-ui=inline-message][data-tone=secondary]:not([data-loading]):not([data-mark=dot])>[data-part=icon]:empty{display:none}[data-ui=inline-message][data-mark=none]:not([data-loading])>[data-part=icon]:empty{display:none}[data-ui=inline-message]>[data-part=text]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=inline-message]:has([data-part=text]:empty)>[data-part=icon],[data-ui=inline-message]:has([data-part=text]:empty)>[data-part=prefix]{display:none}[data-ui=inline-message][data-loading]>[data-part=icon]{animation:slotted-inline-message-spin var(--slotted-duration-loop-fast) linear infinite;block-size:var(--_mark-size);border:max(var(--slotted-border-width-thin, 1px),calc(var(--_mark-size) / 8)) solid currentcolor;border-inline-end-color:transparent;border-radius:var(--slotted-radius-full, 9999px);display:block;inline-size:var(--_mark-size);margin-block-start:calc((1lh - var(--_mark-size)) / 2)}[data-ui=inline-message][data-loading]>[data-part=icon]>*{display:none}[data-ui=inline-message][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=inline-message][data-disabled]>[data-part=icon]{animation:none}@media(prefers-reduced-motion:reduce){[data-ui=inline-message][data-loading]>[data-part=icon]{animation:none}}@media(forced-colors:active){[data-ui=inline-message]>[data-part=icon]{color:CanvasText}[data-ui=inline-message][data-part=root][data-disabled]>[data-part=icon]{color:GrayText}[data-ui=inline-message][data-loading]>[data-part=icon]{border-color:CanvasText;border-inline-end-color:Canvas}}}@keyframes slotted-inline-message-spin{to{transform:rotate(1turn)}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-inline-message][data-part-root]{--_text: var(--slotted-text-muted);--_font-size: var(--slotted-control-font-size-sm, 12px);--_mark-size: 1em;--_column-gap: var(--slotted-inline-message-column-gap, var(--slotted-space-4, .5rem));color:var(--_text);display:grid;font-family:var( --slotted-inline-message-font-family, var(--slotted-control-font-family, sans-serif) );font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);line-height:var(--slotted-inline-message-line-height, var(--slotted-line-height-md, 1.5));margin:0;position:relative}[data-ui-inline-message][data-part-root][data-tone=accent]{--_text: var(--slotted-tone-accent-text)}[data-ui-inline-message][data-part-root][data-tone=secondary]{--_text: var(--slotted-text-muted)}[data-ui-inline-message][data-part-root][data-tone=success]{--_text: var(--slotted-tone-success-text)}[data-ui-inline-message][data-part-root][data-tone=warning]{--_text: var(--slotted-tone-warning-text)}[data-ui-inline-message][data-part-root][data-tone=danger]{--_text: var(--slotted-tone-danger-text)}[data-ui-inline-message][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px)}[data-ui-inline-message][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px)}[data-ui-inline-message][data-part-root][data-reserve]{min-block-size:1lh}[data-ui-inline-message]>[data-part-prefix]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-inline-message]>[data-part-icon]{--slotted-icon-size: var(--_mark-size);align-items:center;align-self:start;block-size:var(--_mark-size);box-sizing:border-box;display:flex;grid-column:1;grid-row:1;inline-size:var(--_mark-size);justify-content:center;margin-block-start:calc((1lh - var(--_mark-size)) / 2);margin-inline-end:var(--_column-gap)}[data-ui-inline-message][data-part-root][data-mark=dot]{--_dot-size: calc(var(--_mark-size) / 3)}[data-ui-inline-message][data-mark=dot]>[data-part-icon]:has(>[data-ui-icon]>[data-glyph=dot]){--slotted-icon-size: calc(var(--_dot-size) * 2);inline-size:var(--_dot-size)}[data-ui-inline-message][data-tone=secondary]:not([data-loading]):not([data-mark=dot])>[data-part-icon]:empty{display:none}[data-ui-inline-message][data-mark=none]:not([data-loading])>[data-part-icon]:empty{display:none}[data-ui-inline-message]>[data-part-text]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui-inline-message]:has([data-part-text]:empty)>[data-part-icon],[data-ui-inline-message]:has([data-part-text]:empty)>[data-part-prefix]{display:none}[data-ui-inline-message][data-loading]>[data-part-icon]{animation:slotted-inline-message-spin var(--slotted-duration-loop-fast) linear infinite;block-size:var(--_mark-size);border:max(var(--slotted-border-width-thin, 1px),calc(var(--_mark-size) / 8)) solid currentcolor;border-inline-end-color:transparent;border-radius:var(--slotted-radius-full, 9999px);display:block;inline-size:var(--_mark-size);margin-block-start:calc((1lh - var(--_mark-size)) / 2)}[data-ui-inline-message][data-loading]>[data-part-icon]>*{display:none}[data-ui-inline-message][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui-inline-message][data-disabled]>[data-part-icon]{animation:none}@media(prefers-reduced-motion:reduce){[data-ui-inline-message][data-loading]>[data-part-icon]{animation:none}}@media(forced-colors:active){[data-ui-inline-message]>[data-part-icon]{color:CanvasText}[data-ui-inline-message][data-part-root][data-disabled]>[data-part-icon]{color:GrayText}[data-ui-inline-message][data-loading]>[data-part-icon]{border-color:CanvasText;border-inline-end-color:Canvas}}}@keyframes slotted-inline-message-spin{to{transform:rotate(1turn)}}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], mark: [{ type: i0.Input, args: [{ isSignal: true, alias: "mark", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], reserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserve", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**

package/fesm2022/slotted-angular-inline-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotted-angular-inline-message.mjs","sources":["../../inline-message/src/inline-message-defaults.ts","../../inline-message/src/inline-message.ts","../../inline-message/src/inline-message-parts.ts","../../inline-message/src/slotted-angular-inline-message.ts"],"sourcesContent":["import { inject, Injectable, InjectionToken } from '@angular/core';\n\n/** Which of the five semantic colours the message speaks in. */\nexport type InlineMessageTone = 'accent' | 'secondary' | 'success' | 'warning' | 'danger';\n\n/**\n * The type step the message sits at. `sm` is the message of a field; `md` is\n * the message of a section. Both read the control scales, which the theme\n * restates per density.\n */\nexport type InlineMessageSize = 'sm' | 'md';\n\n/**\n * Which mark the message draws. `glyph` is the tone's own silhouette — the\n * circled information, check, triangle and circled exclamation. `dot` is a\n * neutral bullet in the tone's ink, the same shape for every tone including\n * the help tone that draws no silhouette at all, so a column of messages under\n * one field starts on one left edge. `none` draws nothing, and the tone is\n * then said by the ink and by the weight of the sentence: it is what `field`\n * and `field-group` ask for, because a silhouette repeated under every control\n * of a form is texture rather than a warning (F2).\n */\nexport type InlineMessageMark = 'glyph' | 'dot' | 'none';\n\n/**\n * Whether the message announces itself, and how loudly. `off` is the default,\n * because the WAI-ARIA APG records that a message already present when the page\n * finishes loading is not announced whatever role it carries.\n */\nexport type InlineMessageLive = 'off' | 'polite' | 'assertive';\n\n/**\n * The word a reader hears before the message. `null` is a tone that is not a\n * severity — help and information announce themselves by their sentence.\n */\nexport type InlineMessagePrefixes = Record<InlineMessageTone, string | null>;\n\n/**\n * The word a reader hears before the message, per tone.\n *\n * GOV.UK's Error message component publishes the idea and hard-codes the word;\n * this table generalises it to every tone that is a severity and puts it behind\n * the token below, which is the only translation surface this library has\n * today. `accent` and `secondary` carry none: information and help announce\n * themselves by their sentence, and a reader told “Information:” before every\n * hint hears one more word per field for nothing.\n */\nexport const INLINE_MESSAGE_PREFIXES: InlineMessagePrefixes = {\n  accent: null,\n  secondary: null,\n  success: 'Success:',\n  warning: 'Warning:',\n  danger: 'Error:',\n};\n\nexport interface InlineMessageDefaults {\n  live: InlineMessageLive;\n  mark: InlineMessageMark;\n  prefixes: InlineMessagePrefixes;\n  size: InlineMessageSize;\n  tone: InlineMessageTone;\n}\n\nconst FALLBACK: InlineMessageDefaults = {\n  live: 'off',\n  mark: 'glyph',\n  prefixes: INLINE_MESSAGE_PREFIXES,\n  size: 'sm',\n  tone: 'secondary',\n};\n\nexport const INLINE_MESSAGE_DEFAULTS = new InjectionToken<InlineMessageDefaults>(\n  'slotted inline message defaults',\n  { providedIn: 'root', factory: () => FALLBACK },\n);\n\n/**\n * An application decides once what its messages are painted like and — the one\n * that matters — what its severities are called, rather than repeating the same\n * inputs on every field in a form. A message that states any of them itself\n * still wins: an explicit input is never overridden by the token.\n *\n * `prefixes` is merged over the shipped table rather than replacing it, so a\n * Portuguese application writes the three words it has and inherits the shape.\n */\nexport function provideInlineMessageDefaults(\n  defaults: Partial<Omit<InlineMessageDefaults, 'prefixes'>> & {\n    prefixes?: Partial<InlineMessagePrefixes>;\n  },\n) {\n  return {\n    provide: INLINE_MESSAGE_DEFAULTS,\n    useFactory: (): InlineMessageDefaults => ({\n      live: defaults.live ?? FALLBACK.live,\n      mark: defaults.mark ?? FALLBACK.mark,\n      prefixes: { ...FALLBACK.prefixes, ...defaults.prefixes },\n      size: defaults.size ?? FALLBACK.size,\n      tone: defaults.tone ?? FALLBACK.tone,\n    }),\n  };\n}\n\n/** What a message renders as here, before it states anything of its own. */\nexport function injectInlineMessageDefaults(): InlineMessageDefaults {\n  return inject(INLINE_MESSAGE_DEFAULTS);\n}\n\n/**\n * Application-scoped rather than module-scoped, for the reason `tag` records: a\n * module-level counter produces colliding sequences when two applications\n * render in one server process, and the server and the client sequences must\n * match for hydration.\n */\n@Injectable({ providedIn: 'root' })\nexport class SlInlineMessageIdFactory {\n  private count = 0;\n\n  next() {\n    this.count += 1;\n    return `slotted-inline-message-${this.count}`;\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostAttributeToken,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport type { GlyphName } from '@slotted/angular/icon';\n\nimport { injectInlineMessageDefaults, SlInlineMessageIdFactory } from './inline-message-defaults';\nimport type {\n  InlineMessageLive,\n  InlineMessageMark,\n  InlineMessageSize,\n  InlineMessageTone,\n} from './inline-message-defaults';\n\nexport type {\n  InlineMessageLive,\n  InlineMessageMark,\n  InlineMessagePrefixes,\n  InlineMessageSize,\n  InlineMessageTone,\n} from './inline-message-defaults';\n\n/**\n * The glyph each tone draws: `specs/components/inline-message/contract.json`\n * holds the map. Help is not a severity and draws none.\n */\nconst TONE_GLYPH: Record<InlineMessageTone, GlyphName | null> = {\n  accent: 'circle-info',\n  secondary: null,\n  success: 'circle-check',\n  warning: 'triangle-alert',\n  danger: 'circle-alert',\n};\n\n/**\n * The two roles that announce, and the value that does not. Both roles imply\n * `aria-live` and `aria-atomic`, so the whole message is read rather than the\n * word that changed, and nothing here writes either attribute by hand.\n */\nconst LIVE_ROLE: Record<InlineMessageLive, string | null> = {\n  off: null,\n  polite: 'status',\n  assertive: 'alert',\n};\n\n/**\n * One sentence about something else: a field, a section, an action. Help, an\n * error, a warning, a confirmation, or a wait.\n *\n * The directive is written on the consumer's own element, and the element it\n * belongs on is a `p`: the message is a sentence of prose about something else,\n * and a paragraph is the box a screen reader reads as one unit.\n *\n * **The severity is a word as well as a colour.** A reader who cannot see the\n * message hears the sentence and nothing else — neither the red ink nor the\n * crossed circle reaches the accessibility tree — so the family writes the\n * severity in clipped text before the message, which is GOV.UK's answer\n * generalised to every tone and to a table an application replaces once.\n *\n * **The role goes on this element, not on an inner one.** `slAlert` puts its\n * live role on the text part because it has a dismiss button beside the text,\n * and MDN's `alert` role reference is explicit that the role is for text\n * content alone. This family has no controls, so there is nothing to keep out.\n */\n@Component({\n  selector: '[slInlineMessage]',\n  standalone: true,\n  exportAs: 'slInlineMessage',\n  imports: [SlGlyph, SlIcon],\n  template: `@if (prefixWord() !== '') {\n      <span data-part=\"prefix\">{{ prefixWord() }}</span>\n    }\n    @if (!hideIcon()) {\n      <span aria-hidden=\"true\" data-part=\"icon\"\n        ><ng-content select=\"[slInlineMessageIcon]\">\n          @if (glyph(); as name) {\n            <span slIcon><svg slGlyph [name]=\"name\"></svg></span>\n          }</ng-content\n      ></span>\n    }\n    <span data-part=\"text\"><ng-content /></span>`,\n  styleUrl: '../../../styles/src/inline-message/inline-message.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'inline-message',\n    'data-part': 'root',\n    '[attr.data-tone]': 'resolvedTone()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-live]': 'resolvedLive()',\n    '[attr.data-mark]': 'resolvedMark()',\n    '[attr.data-loading]': \"loading() ? '' : null\",\n    '[attr.data-disabled]': \"disabled() === true ? '' : null\",\n    '[attr.data-reserve]': \"reserve() ? '' : null\",\n    '[attr.role]': 'role()',\n    '[attr.id]': 'messageId',\n  },\n})\nexport class SlInlineMessage {\n  /** Defaults to the token, then to `secondary` — help text. */\n  readonly tone = input<InlineMessageTone | undefined>(undefined);\n  /** Defaults to the token, then to `sm`. */\n  readonly size = input<InlineMessageSize | undefined>(undefined);\n  /** Defaults to the token, then to `off`. */\n  readonly live = input<InlineMessageLive | undefined>(undefined);\n  /**\n   * Which mark is drawn. Defaults to the token, then to `glyph`. `slField` and\n   * `slFieldGroup` ask for `none` instead, because a form reads a column of\n   * sentences rather than a column of silhouettes.\n   */\n  readonly mark = input<InlineMessageMark | undefined>(undefined);\n  /**\n   * The word read before the message. Unstated is the tone's own — `Error:`,\n   * `Warning:`, `Success:` — and the empty string removes it, for a message\n   * whose sentence already names the severity.\n   */\n  readonly prefix = input<string | undefined>(undefined);\n  /**\n   * Removes the mark's box from the markup, for a message that carries its own\n   * artwork beside it. `mark='none'` is the other way to draw nothing: it is an\n   * axis a provider can set for every message under it, and it leaves the box\n   * in place for `reserve` to hold a line open with.\n   */\n  readonly hideIcon = input(false, { transform: booleanAttribute });\n  /** The message is waiting for something: the mark becomes a turning ring. */\n  readonly loading = input(false, { transform: booleanAttribute });\n  /**\n   * Unstated rather than `false`, so a `field` can answer it once this family\n   * is inside one. Stated, it wins.\n   */\n  readonly disabled = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /**\n   * Holds one line box open whether or not there is a message, so the form\n   * below does not move when the error arrives.\n   */\n  readonly reserve = input(false, { transform: booleanAttribute });\n\n  private readonly defaults = injectInlineMessageDefaults();\n\n  /**\n   * An identifier bound by whatever renders the message. It is what a family\n   * that composes with this one — `field`, whose description and error *are*\n   * inline messages — uses to give the message an identifier derived from its\n   * own base, which a static attribute cannot express and a directive on the\n   * same element cannot write.\n   */\n  readonly id = input<string | undefined>(undefined);\n\n  private readonly writtenId = inject(new HostAttributeToken('id'), { optional: true });\n  private readonly generatedId = inject(SlInlineMessageIdFactory).next();\n\n  /**\n   * The identifier an `aria-describedby` or an `aria-errormessage` points at.\n   * A consumer's own is never replaced, and the generated one is reachable from\n   * a template through `exportAs` — which is the reach an Angular template has\n   * and a React consumer answers with `useId` in their own component.\n   *\n   * A getter rather than a signal, so `message.messageId` keeps reading as a\n   * value in every template that already writes it. The host binding below\n   * calls it in a reactive context, so the `id` input above is tracked.\n   */\n  get messageId(): string {\n    return this.id() ?? this.writtenId ?? this.generatedId;\n  }\n\n  /**\n   * A role the consumer wrote is never replaced by the family's. A host binding\n   * wins over a static attribute in Angular, so the written value has to be\n   * read before the binding is computed rather than after — the asymmetry with\n   * React, where a consumer's prop simply spreads over the family's.\n   */\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n\n  protected readonly resolvedTone = computed(() => this.tone() ?? this.defaults.tone);\n  protected readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  protected readonly resolvedLive = computed(() => this.live() ?? this.defaults.live);\n  protected readonly resolvedMark = computed(() => this.mark() ?? this.defaults.mark);\n  /* The glyph the family draws when the page supplies none. A message that is\n     waiting draws a ring instead, and one that asked for no mark draws none. */\n  protected readonly glyph = computed<GlyphName | null>(() => {\n    const mark = this.resolvedMark();\n    if (this.loading() || mark === 'none') return null;\n    return mark === 'dot' ? 'dot' : TONE_GLYPH[this.resolvedTone()];\n  });\n  protected readonly role = computed(() => this.writtenRole ?? LIVE_ROLE[this.resolvedLive()]);\n\n  /* Unstated asks the table; the empty string is a consumer removing the word. */\n  protected readonly prefixWord = computed(\n    () => this.prefix() ?? this.defaults.prefixes[this.resolvedTone()] ?? '',\n  );\n}\n","import { Directive } from '@angular/core';\n\n/**\n * A mark the page supplies instead of the tone's own. It is projected into the\n * box the family draws, so it keeps the size, the colour and the place on the\n * message's first line the tone's mark would have had.\n *\n * It is a marker rather than a component: what goes inside is the page's own\n * artwork, and the family has nothing to add to it beyond where it sits.\n */\n@Directive({\n  selector: '[slInlineMessageIcon]',\n  standalone: true,\n  exportAs: 'slInlineMessageIcon',\n})\nexport class SlInlineMessageIcon {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slotted-angular-inline-message.mjs","sources":["../../inline-message/src/inline-message-defaults.ts","../../inline-message/src/inline-message.ts","../../inline-message/src/inline-message-parts.ts","../../inline-message/src/slotted-angular-inline-message.ts"],"sourcesContent":["import { inject, Injectable, InjectionToken } from '@angular/core';\n\n/** Which of the five semantic colours the message speaks in. */\nexport type InlineMessageTone = 'accent' | 'secondary' | 'success' | 'warning' | 'danger';\n\n/**\n * The type step the message sits at. `sm` is the message of a field; `md` is\n * the message of a section. Both read the control scales, which the theme\n * restates per density.\n */\nexport type InlineMessageSize = 'sm' | 'md';\n\n/**\n * Which mark the message draws. `glyph` is the tone's own silhouette — the\n * circled information, check, triangle and circled exclamation. `dot` is a\n * neutral bullet in the tone's ink, the same shape for every tone including\n * the help tone that draws no silhouette at all, so a column of messages under\n * one field starts on one left edge. `none` draws nothing, and the tone is\n * then said by the ink and by the weight of the sentence: it is what `field`\n * and `field-group` ask for, because a silhouette repeated under every control\n * of a form is texture rather than a warning (F2).\n */\nexport type InlineMessageMark = 'glyph' | 'dot' | 'none';\n\n/**\n * Whether the message announces itself, and how loudly. `off` is the default,\n * because the WAI-ARIA APG records that a message already present when the page\n * finishes loading is not announced whatever role it carries.\n */\nexport type InlineMessageLive = 'off' | 'polite' | 'assertive';\n\n/**\n * The word a reader hears before the message. `null` is a tone that is not a\n * severity — help and information announce themselves by their sentence.\n */\nexport type InlineMessagePrefixes = Record<InlineMessageTone, string | null>;\n\n/**\n * The word a reader hears before the message, per tone.\n *\n * GOV.UK's Error message component publishes the idea and hard-codes the word;\n * this table generalises it to every tone that is a severity and puts it behind\n * the token below, which is the only translation surface this library has\n * today. `accent` and `secondary` carry none: information and help announce\n * themselves by their sentence, and a reader told “Information:” before every\n * hint hears one more word per field for nothing.\n */\nexport const INLINE_MESSAGE_PREFIXES: InlineMessagePrefixes = {\n  accent: null,\n  secondary: null,\n  success: 'Success:',\n  warning: 'Warning:',\n  danger: 'Error:',\n};\n\nexport interface InlineMessageDefaults {\n  live: InlineMessageLive;\n  mark: InlineMessageMark;\n  prefixes: InlineMessagePrefixes;\n  size: InlineMessageSize;\n  tone: InlineMessageTone;\n}\n\nconst FALLBACK: InlineMessageDefaults = {\n  live: 'off',\n  mark: 'glyph',\n  prefixes: INLINE_MESSAGE_PREFIXES,\n  size: 'sm',\n  tone: 'secondary',\n};\n\nexport const INLINE_MESSAGE_DEFAULTS = new InjectionToken<InlineMessageDefaults>(\n  'slotted inline message defaults',\n  { providedIn: 'root', factory: () => FALLBACK },\n);\n\n/**\n * An application decides once what its messages are painted like and — the one\n * that matters — what its severities are called, rather than repeating the same\n * inputs on every field in a form. A message that states any of them itself\n * still wins: an explicit input is never overridden by the token.\n *\n * `prefixes` is merged over the shipped table rather than replacing it, so a\n * Portuguese application writes the three words it has and inherits the shape.\n */\nexport function provideInlineMessageDefaults(\n  defaults: Partial<Omit<InlineMessageDefaults, 'prefixes'>> & {\n    prefixes?: Partial<InlineMessagePrefixes>;\n  },\n) {\n  return {\n    provide: INLINE_MESSAGE_DEFAULTS,\n    useFactory: (): InlineMessageDefaults => ({\n      live: defaults.live ?? FALLBACK.live,\n      mark: defaults.mark ?? FALLBACK.mark,\n      prefixes: { ...FALLBACK.prefixes, ...defaults.prefixes },\n      size: defaults.size ?? FALLBACK.size,\n      tone: defaults.tone ?? FALLBACK.tone,\n    }),\n  };\n}\n\n/** What a message renders as here, before it states anything of its own. */\nexport function injectInlineMessageDefaults(): InlineMessageDefaults {\n  return inject(INLINE_MESSAGE_DEFAULTS);\n}\n\n/**\n * Application-scoped rather than module-scoped, for the reason `tag` records: a\n * module-level counter produces colliding sequences when two applications\n * render in one server process, and the server and the client sequences must\n * match for hydration.\n */\n@Injectable({ providedIn: 'root' })\nexport class SlInlineMessageIdFactory {\n  private count = 0;\n\n  next() {\n    this.count += 1;\n    return `slotted-inline-message-${this.count}`;\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostAttributeToken,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport type { GlyphName } from '@slotted/angular/icon';\n\nimport { injectInlineMessageDefaults, SlInlineMessageIdFactory } from './inline-message-defaults';\nimport type {\n  InlineMessageLive,\n  InlineMessageMark,\n  InlineMessageSize,\n  InlineMessageTone,\n} from './inline-message-defaults';\n\nexport type {\n  InlineMessageLive,\n  InlineMessageMark,\n  InlineMessagePrefixes,\n  InlineMessageSize,\n  InlineMessageTone,\n} from './inline-message-defaults';\n\n/**\n * The glyph each tone draws: `specs/components/inline-message/contract.json`\n * holds the map. Help is not a severity and draws none.\n */\nconst TONE_GLYPH: Record<InlineMessageTone, GlyphName | null> = {\n  accent: 'circle-info',\n  secondary: null,\n  success: 'circle-check',\n  warning: 'triangle-alert',\n  danger: 'circle-alert',\n};\n\n/**\n * The two roles that announce, and the value that does not. Both roles imply\n * `aria-live` and `aria-atomic`, so the whole message is read rather than the\n * word that changed, and nothing here writes either attribute by hand.\n */\nconst LIVE_ROLE: Record<InlineMessageLive, string | null> = {\n  off: null,\n  polite: 'status',\n  assertive: 'alert',\n};\n\n/**\n * One sentence about something else: a field, a section, an action. Help, an\n * error, a warning, a confirmation, or a wait.\n *\n * The directive is written on the consumer's own element, and the element it\n * belongs on is a `p`: the message is a sentence of prose about something else,\n * and a paragraph is the box a screen reader reads as one unit.\n *\n * **The severity is a word as well as a colour.** A reader who cannot see the\n * message hears the sentence and nothing else — neither the red ink nor the\n * crossed circle reaches the accessibility tree — so the family writes the\n * severity in clipped text before the message, which is GOV.UK's answer\n * generalised to every tone and to a table an application replaces once.\n *\n * **The role goes on this element, not on an inner one.** `slAlert` puts its\n * live role on the text part because it has a dismiss button beside the text,\n * and MDN's `alert` role reference is explicit that the role is for text\n * content alone. This family has no controls, so there is nothing to keep out.\n */\n@Component({\n  selector: '[slInlineMessage]',\n  standalone: true,\n  exportAs: 'slInlineMessage',\n  imports: [SlGlyph, SlIcon],\n  template: `@if (prefixWord() !== '') {\n      <span data-part=\"prefix\" data-part-prefix=\"\">{{ prefixWord() }}</span>\n    }\n    @if (!hideIcon()) {\n      <span aria-hidden=\"true\" data-part=\"icon\" data-part-icon=\"\"\n        ><ng-content select=\"[slInlineMessageIcon]\">\n          @if (glyph(); as name) {\n            <span slIcon><svg slGlyph [name]=\"name\"></svg></span>\n          }</ng-content\n      ></span>\n    }\n    <span data-part=\"text\" data-part-text=\"\"><ng-content /></span>`,\n  styleUrl: '../../../styles/src/inline-message/inline-message.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'inline-message',\n    'data-ui-inline-message': '',\n    'data-part': 'root',\n    'data-part-root': '',\n    '[attr.data-tone]': 'resolvedTone()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-live]': 'resolvedLive()',\n    '[attr.data-mark]': 'resolvedMark()',\n    '[attr.data-loading]': \"loading() ? '' : null\",\n    '[attr.data-disabled]': \"disabled() === true ? '' : null\",\n    '[attr.data-reserve]': \"reserve() ? '' : null\",\n    '[attr.role]': 'role()',\n    '[attr.id]': 'messageId',\n  },\n})\nexport class SlInlineMessage {\n  /** Defaults to the token, then to `secondary` — help text. */\n  readonly tone = input<InlineMessageTone | undefined>(undefined);\n  /** Defaults to the token, then to `sm`. */\n  readonly size = input<InlineMessageSize | undefined>(undefined);\n  /** Defaults to the token, then to `off`. */\n  readonly live = input<InlineMessageLive | undefined>(undefined);\n  /**\n   * Which mark is drawn. Defaults to the token, then to `glyph`. `slField` and\n   * `slFieldGroup` ask for `none` instead, because a form reads a column of\n   * sentences rather than a column of silhouettes.\n   */\n  readonly mark = input<InlineMessageMark | undefined>(undefined);\n  /**\n   * The word read before the message. Unstated is the tone's own — `Error:`,\n   * `Warning:`, `Success:` — and the empty string removes it, for a message\n   * whose sentence already names the severity.\n   */\n  readonly prefix = input<string | undefined>(undefined);\n  /**\n   * Removes the mark's box from the markup, for a message that carries its own\n   * artwork beside it. `mark='none'` is the other way to draw nothing: it is an\n   * axis a provider can set for every message under it, and it leaves the box\n   * in place for `reserve` to hold a line open with.\n   */\n  readonly hideIcon = input(false, { transform: booleanAttribute });\n  /** The message is waiting for something: the mark becomes a turning ring. */\n  readonly loading = input(false, { transform: booleanAttribute });\n  /**\n   * Unstated rather than `false`, so a `field` can answer it once this family\n   * is inside one. Stated, it wins.\n   */\n  readonly disabled = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /**\n   * Holds one line box open whether or not there is a message, so the form\n   * below does not move when the error arrives.\n   */\n  readonly reserve = input(false, { transform: booleanAttribute });\n\n  private readonly defaults = injectInlineMessageDefaults();\n\n  /**\n   * An identifier bound by whatever renders the message. It is what a family\n   * that composes with this one — `field`, whose description and error *are*\n   * inline messages — uses to give the message an identifier derived from its\n   * own base, which a static attribute cannot express and a directive on the\n   * same element cannot write.\n   */\n  readonly id = input<string | undefined>(undefined);\n\n  private readonly writtenId = inject(new HostAttributeToken('id'), { optional: true });\n  private readonly generatedId = inject(SlInlineMessageIdFactory).next();\n\n  /**\n   * The identifier an `aria-describedby` or an `aria-errormessage` points at.\n   * A consumer's own is never replaced, and the generated one is reachable from\n   * a template through `exportAs` — which is the reach an Angular template has\n   * and a React consumer answers with `useId` in their own component.\n   *\n   * A getter rather than a signal, so `message.messageId` keeps reading as a\n   * value in every template that already writes it. The host binding below\n   * calls it in a reactive context, so the `id` input above is tracked.\n   */\n  get messageId(): string {\n    return this.id() ?? this.writtenId ?? this.generatedId;\n  }\n\n  /**\n   * A role the consumer wrote is never replaced by the family's. A host binding\n   * wins over a static attribute in Angular, so the written value has to be\n   * read before the binding is computed rather than after — the asymmetry with\n   * React, where a consumer's prop simply spreads over the family's.\n   */\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n\n  protected readonly resolvedTone = computed(() => this.tone() ?? this.defaults.tone);\n  protected readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  protected readonly resolvedLive = computed(() => this.live() ?? this.defaults.live);\n  protected readonly resolvedMark = computed(() => this.mark() ?? this.defaults.mark);\n  /* The glyph the family draws when the page supplies none. A message that is\n     waiting draws a ring instead, and one that asked for no mark draws none. */\n  protected readonly glyph = computed<GlyphName | null>(() => {\n    const mark = this.resolvedMark();\n    if (this.loading() || mark === 'none') return null;\n    return mark === 'dot' ? 'dot' : TONE_GLYPH[this.resolvedTone()];\n  });\n  protected readonly role = computed(() => this.writtenRole ?? LIVE_ROLE[this.resolvedLive()]);\n\n  /* Unstated asks the table; the empty string is a consumer removing the word. */\n  protected readonly prefixWord = computed(\n    () => this.prefix() ?? this.defaults.prefixes[this.resolvedTone()] ?? '',\n  );\n}\n","import { Directive } from '@angular/core';\n\n/**\n * A mark the page supplies instead of the tone's own. It is projected into the\n * box the family draws, so it keeps the size, the colour and the place on the\n * message's first line the tone's mark would have had.\n *\n * It is a marker rather than a component: what goes inside is the page's own\n * artwork, and the family has nothing to add to it beyond where it sits.\n */\n@Directive({\n  selector: '[slInlineMessageIcon]',\n  standalone: true,\n  exportAs: 'slInlineMessageIcon',\n})\nexport class SlInlineMessageIcon {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/slotted-angular-inline.mjs

@@ -27,13 +27,15 @@ class SlInline {
     wrap = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "wrap" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlInline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlInline, isStandalone: true, selector: "[slInline]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "inline", "data-part": "root" }, properties: { "attr.data-gap": "gap() ?? null", "attr.data-align": "align() ?? null", "attr.align": "null", "attr.data-justify": "justify() ?? null", "attr.data-wrap": "wrap() ?? null" } }, exportAs: ["slInline"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=inline]{--_gap: var(--slotted-space-4, .5rem);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--_gap);min-inline-size:0}[data-ui=inline][data-gap=\"0\"]{--_gap: 0}[data-ui=inline][data-gap=\"1\"]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=inline][data-gap=\"2\"]{--_gap: var(--slotted-space-2, .25rem)}[data-ui=inline][data-gap=\"3\"]{--_gap: var(--slotted-space-3, .375rem)}[data-ui=inline][data-gap=\"4\"]{--_gap: var(--slotted-space-4, .5rem)}[data-ui=inline][data-gap=\"5\"]{--_gap: var(--slotted-space-5, .75rem)}[data-ui=inline][data-gap=\"6\"]{--_gap: var(--slotted-space-6, 1rem)}[data-ui=inline][data-gap=\"7\"]{--_gap: var(--slotted-space-7, 1.25rem)}[data-ui=inline][data-gap=\"8\"]{--_gap: var(--slotted-space-8, 1.5rem)}[data-ui=inline][data-gap=\"9\"]{--_gap: var(--slotted-space-9, 2rem)}[data-ui=inline][data-gap=\"10\"]{--_gap: var(--slotted-space-10, 2.5rem)}[data-ui=inline][data-gap=\"11\"]{--_gap: var(--slotted-space-11, 3rem)}[data-ui=inline][data-gap=\"12\"]{--_gap: var(--slotted-space-12, 4rem)}[data-ui=inline][data-align=start]{align-items:start}[data-ui=inline][data-align=center]{align-items:center}[data-ui=inline][data-align=end]{align-items:end}[data-ui=inline][data-align=stretch]{align-items:stretch}[data-ui=inline][data-align=baseline]{align-items:baseline}[data-ui=inline][data-justify=start]{justify-content:start}[data-ui=inline][data-justify=center]{justify-content:center}[data-ui=inline][data-justify=end]{justify-content:end}[data-ui=inline][data-justify=between]{justify-content:space-between}[data-ui=inline][data-justify=around]{justify-content:space-around}[data-ui=inline][data-justify=evenly]{justify-content:space-evenly}[data-ui=inline][data-wrap=wrap]{flex-wrap:wrap}[data-ui=inline][data-wrap=nowrap]{flex-wrap:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlInline, isStandalone: true, selector: "[slInline]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "inline", "data-ui-inline": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-gap": "gap() ?? null", "attr.data-align": "align() ?? null", "attr.align": "null", "attr.data-justify": "justify() ?? null", "attr.data-wrap": "wrap() ?? null" } }, exportAs: ["slInline"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui-inline]{--_gap: var(--slotted-space-4, .5rem);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--_gap);min-inline-size:0}[data-ui-inline][data-gap=\"0\"]{--_gap: 0}[data-ui-inline][data-gap=\"1\"]{--_gap: var(--slotted-space-1, .125rem)}[data-ui-inline][data-gap=\"2\"]{--_gap: var(--slotted-space-2, .25rem)}[data-ui-inline][data-gap=\"3\"]{--_gap: var(--slotted-space-3, .375rem)}[data-ui-inline][data-gap=\"4\"]{--_gap: var(--slotted-space-4, .5rem)}[data-ui-inline][data-gap=\"5\"]{--_gap: var(--slotted-space-5, .75rem)}[data-ui-inline][data-gap=\"6\"]{--_gap: var(--slotted-space-6, 1rem)}[data-ui-inline][data-gap=\"7\"]{--_gap: var(--slotted-space-7, 1.25rem)}[data-ui-inline][data-gap=\"8\"]{--_gap: var(--slotted-space-8, 1.5rem)}[data-ui-inline][data-gap=\"9\"]{--_gap: var(--slotted-space-9, 2rem)}[data-ui-inline][data-gap=\"10\"]{--_gap: var(--slotted-space-10, 2.5rem)}[data-ui-inline][data-gap=\"11\"]{--_gap: var(--slotted-space-11, 3rem)}[data-ui-inline][data-gap=\"12\"]{--_gap: var(--slotted-space-12, 4rem)}[data-ui-inline][data-align=start]{align-items:start}[data-ui-inline][data-align=center]{align-items:center}[data-ui-inline][data-align=end]{align-items:end}[data-ui-inline][data-align=stretch]{align-items:stretch}[data-ui-inline][data-align=baseline]{align-items:baseline}[data-ui-inline][data-justify=start]{justify-content:start}[data-ui-inline][data-justify=center]{justify-content:center}[data-ui-inline][data-justify=end]{justify-content:end}[data-ui-inline][data-justify=between]{justify-content:space-between}[data-ui-inline][data-justify=around]{justify-content:space-around}[data-ui-inline][data-justify=evenly]{justify-content:space-evenly}[data-ui-inline][data-wrap=wrap]{flex-wrap:wrap}[data-ui-inline][data-wrap=nowrap]{flex-wrap:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlInline, decorators: [{
             type: Component,
             args: [{ selector: '[slInline]', standalone: true, exportAs: 'slInline', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'inline',
+                        'data-ui-inline': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-gap]': 'gap() ?? null',
                         '[attr.data-align]': 'align() ?? null',
                         /* `align` is also an obsolete HTML attribute a browser still honours on a
@@ -41,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.align]': 'null',
                         '[attr.data-justify]': 'justify() ?? null',
                         '[attr.data-wrap]': 'wrap() ?? null',
-                    }, styles: ["@layer slotted.components{[data-ui=inline]{--_gap: var(--slotted-space-4, .5rem);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--_gap);min-inline-size:0}[data-ui=inline][data-gap=\"0\"]{--_gap: 0}[data-ui=inline][data-gap=\"1\"]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=inline][data-gap=\"2\"]{--_gap: var(--slotted-space-2, .25rem)}[data-ui=inline][data-gap=\"3\"]{--_gap: var(--slotted-space-3, .375rem)}[data-ui=inline][data-gap=\"4\"]{--_gap: var(--slotted-space-4, .5rem)}[data-ui=inline][data-gap=\"5\"]{--_gap: var(--slotted-space-5, .75rem)}[data-ui=inline][data-gap=\"6\"]{--_gap: var(--slotted-space-6, 1rem)}[data-ui=inline][data-gap=\"7\"]{--_gap: var(--slotted-space-7, 1.25rem)}[data-ui=inline][data-gap=\"8\"]{--_gap: var(--slotted-space-8, 1.5rem)}[data-ui=inline][data-gap=\"9\"]{--_gap: var(--slotted-space-9, 2rem)}[data-ui=inline][data-gap=\"10\"]{--_gap: var(--slotted-space-10, 2.5rem)}[data-ui=inline][data-gap=\"11\"]{--_gap: var(--slotted-space-11, 3rem)}[data-ui=inline][data-gap=\"12\"]{--_gap: var(--slotted-space-12, 4rem)}[data-ui=inline][data-align=start]{align-items:start}[data-ui=inline][data-align=center]{align-items:center}[data-ui=inline][data-align=end]{align-items:end}[data-ui=inline][data-align=stretch]{align-items:stretch}[data-ui=inline][data-align=baseline]{align-items:baseline}[data-ui=inline][data-justify=start]{justify-content:start}[data-ui=inline][data-justify=center]{justify-content:center}[data-ui=inline][data-justify=end]{justify-content:end}[data-ui=inline][data-justify=between]{justify-content:space-between}[data-ui=inline][data-justify=around]{justify-content:space-around}[data-ui=inline][data-justify=evenly]{justify-content:space-evenly}[data-ui=inline][data-wrap=wrap]{flex-wrap:wrap}[data-ui=inline][data-wrap=nowrap]{flex-wrap:nowrap}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-inline]{--_gap: var(--slotted-space-4, .5rem);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--_gap);min-inline-size:0}[data-ui-inline][data-gap=\"0\"]{--_gap: 0}[data-ui-inline][data-gap=\"1\"]{--_gap: var(--slotted-space-1, .125rem)}[data-ui-inline][data-gap=\"2\"]{--_gap: var(--slotted-space-2, .25rem)}[data-ui-inline][data-gap=\"3\"]{--_gap: var(--slotted-space-3, .375rem)}[data-ui-inline][data-gap=\"4\"]{--_gap: var(--slotted-space-4, .5rem)}[data-ui-inline][data-gap=\"5\"]{--_gap: var(--slotted-space-5, .75rem)}[data-ui-inline][data-gap=\"6\"]{--_gap: var(--slotted-space-6, 1rem)}[data-ui-inline][data-gap=\"7\"]{--_gap: var(--slotted-space-7, 1.25rem)}[data-ui-inline][data-gap=\"8\"]{--_gap: var(--slotted-space-8, 1.5rem)}[data-ui-inline][data-gap=\"9\"]{--_gap: var(--slotted-space-9, 2rem)}[data-ui-inline][data-gap=\"10\"]{--_gap: var(--slotted-space-10, 2.5rem)}[data-ui-inline][data-gap=\"11\"]{--_gap: var(--slotted-space-11, 3rem)}[data-ui-inline][data-gap=\"12\"]{--_gap: var(--slotted-space-12, 4rem)}[data-ui-inline][data-align=start]{align-items:start}[data-ui-inline][data-align=center]{align-items:center}[data-ui-inline][data-align=end]{align-items:end}[data-ui-inline][data-align=stretch]{align-items:stretch}[data-ui-inline][data-align=baseline]{align-items:baseline}[data-ui-inline][data-justify=start]{justify-content:start}[data-ui-inline][data-justify=center]{justify-content:center}[data-ui-inline][data-justify=end]{justify-content:end}[data-ui-inline][data-justify=between]{justify-content:space-between}[data-ui-inline][data-justify=around]{justify-content:space-around}[data-ui-inline][data-justify=evenly]{justify-content:space-evenly}[data-ui-inline][data-wrap=wrap]{flex-wrap:wrap}[data-ui-inline][data-wrap=nowrap]{flex-wrap:nowrap}}\n"] }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
 
 /**

package/fesm2022/slotted-angular-inline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotted-angular-inline.mjs","sources":["../../inline/src/inline.ts","../../inline/src/slotted-angular-inline.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A step on the space scale. Separation is chosen from the scale rather than\n * stated as a length, so a theme retunes every layout at once and no component\n * invents a rhythm of its own. `0` is the absence of separation.\n */\nexport type InlineGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\n/** Across the flow, which for a run is the block axis. */\nexport type InlineAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n\n/** Along the flow, which for a run is the inline axis. */\nexport type InlineJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\nexport type InlineWrap = 'wrap' | 'nowrap';\n\n/**\n * Inline arranges its children along the inline axis and lets them wrap. It\n * paints nothing and adds no semantics: the element is the one the consumer\n * wrote, so a list of tags stays a list.\n *\n * An axis reaches the stylesheet only when someone decided it. The base rule\n * already carries the family defaults — wrapping, centred, separated by half a\n * rem — and a layout is the most numerous element in a document.\n *\n * There is no input that reverses the children. The order they are written in\n * is the order they are read in, by a screen reader and by the Tab key alike.\n */\n@Component({\n  selector: '[slInline]',\n  standalone: true,\n  exportAs: 'slInline',\n  template: '<ng-content></ng-content>',\n  styleUrl: '../../../styles/src/inline/inline.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'inline',\n    'data-part': 'root',\n    '[attr.data-gap]': 'gap() ?? null',\n    '[attr.data-align]': 'align() ?? null',\n    /* `align` is also an obsolete HTML attribute a browser still honours on a\n       div, centring its text; written statically for the input it would stay. */\n    '[attr.align]': 'null',\n    '[attr.data-justify]': 'justify() ?? null',\n    '[attr.data-wrap]': 'wrap() ?? null',\n  },\n})\nexport class SlInline {\n  /** Positions items across the flow. `baseline` puts their type on one line. */\n  readonly align = input<InlineAlign>();\n  /** Separation between items, as a step on the space scale. */\n  readonly gap = input<InlineGap>();\n  /** Positions items along the flow, and distributes the space between them. */\n  readonly justify = input<InlineJustify>();\n  /** `nowrap` keeps one line, and overflows a container narrower than it. */\n  readonly wrap = input<InlineWrap>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAiBA;;;;;;;;;;;AAWG;MAqBU,QAAQ,CAAA;;AAEV,IAAA,KAAK,GAAG,KAAK;yFAAe;;AAE5B,IAAA,GAAG,GAAG,KAAK;uFAAa;;AAExB,IAAA,OAAO,GAAG,KAAK;2FAAiB;;AAEhC,IAAA,IAAI,GAAG,KAAK;wFAAc;uGARxB,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,u0BAhBT,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ozDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAgB1B,QAAQ,EAAA,UAAA,EAAA,CAAA;kBApBpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,QAAA,EACN,UAAU,YACV,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,QAAQ;AACnB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,iBAAiB,EAAE,eAAe;AAClC,wBAAA,mBAAmB,EAAE,iBAAiB;AACtC;AAC6E;AAC7E,wBAAA,cAAc,EAAE,MAAM;AACtB,wBAAA,qBAAqB,EAAE,mBAAmB;AAC1C,wBAAA,kBAAkB,EAAE,gBAAgB;AACrC,qBAAA,EAAA,MAAA,EAAA,CAAA,ozDAAA,CAAA,EAAA;;;AC/CH;;AAEG;;"}
+{"version":3,"file":"slotted-angular-inline.mjs","sources":["../../inline/src/inline.ts","../../inline/src/slotted-angular-inline.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A step on the space scale. Separation is chosen from the scale rather than\n * stated as a length, so a theme retunes every layout at once and no component\n * invents a rhythm of its own. `0` is the absence of separation.\n */\nexport type InlineGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\n/** Across the flow, which for a run is the block axis. */\nexport type InlineAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n\n/** Along the flow, which for a run is the inline axis. */\nexport type InlineJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\nexport type InlineWrap = 'wrap' | 'nowrap';\n\n/**\n * Inline arranges its children along the inline axis and lets them wrap. It\n * paints nothing and adds no semantics: the element is the one the consumer\n * wrote, so a list of tags stays a list.\n *\n * An axis reaches the stylesheet only when someone decided it. The base rule\n * already carries the family defaults — wrapping, centred, separated by half a\n * rem — and a layout is the most numerous element in a document.\n *\n * There is no input that reverses the children. The order they are written in\n * is the order they are read in, by a screen reader and by the Tab key alike.\n */\n@Component({\n  selector: '[slInline]',\n  standalone: true,\n  exportAs: 'slInline',\n  template: '<ng-content></ng-content>',\n  styleUrl: '../../../styles/src/inline/inline.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'inline',\n    'data-ui-inline': '',\n    'data-part': 'root',\n    'data-part-root': '',\n    '[attr.data-gap]': 'gap() ?? null',\n    '[attr.data-align]': 'align() ?? null',\n    /* `align` is also an obsolete HTML attribute a browser still honours on a\n       div, centring its text; written statically for the input it would stay. */\n    '[attr.align]': 'null',\n    '[attr.data-justify]': 'justify() ?? null',\n    '[attr.data-wrap]': 'wrap() ?? null',\n  },\n})\nexport class SlInline {\n  /** Positions items across the flow. `baseline` puts their type on one line. */\n  readonly align = input<InlineAlign>();\n  /** Separation between items, as a step on the space scale. */\n  readonly gap = input<InlineGap>();\n  /** Positions items along the flow, and distributes the space between them. */\n  readonly justify = input<InlineJustify>();\n  /** `nowrap` keeps one line, and overflows a container narrower than it. */\n  readonly wrap = input<InlineWrap>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAiBA;;;;;;;;;;;AAWG;MAuBU,QAAQ,CAAA;;AAEV,IAAA,KAAK,GAAG,KAAK;yFAAe;;AAE5B,IAAA,GAAG,GAAG,KAAK;uFAAa;;AAExB,IAAA,OAAO,GAAG,KAAK;2FAAiB;;AAEhC,IAAA,IAAI,GAAG,KAAK;wFAAc;uGARxB,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,m3BAlBT,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ozDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAkB1B,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAtBpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,QAAA,EACN,UAAU,YACV,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,QAAQ;AACnB,wBAAA,gBAAgB,EAAE,EAAE;AACpB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,gBAAgB,EAAE,EAAE;AACpB,wBAAA,iBAAiB,EAAE,eAAe;AAClC,wBAAA,mBAAmB,EAAE,iBAAiB;AACtC;AAC6E;AAC7E,wBAAA,cAAc,EAAE,MAAM;AACtB,wBAAA,qBAAqB,EAAE,mBAAmB;AAC1C,wBAAA,kBAAkB,EAAE,gBAAgB;AACrC,qBAAA,EAAA,MAAA,EAAA,CAAA,ozDAAA,CAAA,EAAA;;;ACjDH;;AAEG;;"}

package/fesm2022/slotted-angular-kbd.mjs

@@ -155,19 +155,21 @@ class SlKbd {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlKbd, isStandalone: true, selector: "kbd[slKbd]", inputs: { keyName: { classPropertyName: "keyName", publicName: "keyName", isSignal: true, isRequired: false, transformFunction: null }, platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "kbd", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-key": "key()?.token ?? null", "attr.data-platform": "keyName() ? resolvedPlatform() : null", "attr.data-disabled": "resolvedDisabled() ? \"\" : null" } }, exportAs: ["slKbd"], ngImport: i0, template: `<span data-part="legend" [attr.aria-hidden]="key() ? true : null" [attr.data-legend]="key()?.symbolic ? 'symbol' : null">@if (key(); as resolved) {{{ resolved.legend }}} @else {<ng-content></ng-content>}</span>@if (key()?.name; as name) {<span data-part="name">{{ name }}</span>}`, isInline: true, styles: ["@layer slotted.components{[data-ui=kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui=kbd][data-part=root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui=kbd] [data-part=legend]{text-box:trim-both cap alphabetic}[data-ui=kbd] [data-part=legend][data-legend=symbol]{text-box:normal}}[data-ui=kbd] [data-part=legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui=kbd] [data-part=name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=kbd][data-part=shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui=kbd][data-part=shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-part=shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui=kbd] [data-part=separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui=kbd] [data-part=separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui=kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui=kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui=kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui=kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui=kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui=kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui=kbd][data-part=root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui=kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-disabled] [data-part=separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-variant=outline][data-disabled],[data-ui=kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui=kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlKbd, isStandalone: true, selector: "kbd[slKbd]", inputs: { keyName: { classPropertyName: "keyName", publicName: "keyName", isSignal: true, isRequired: false, transformFunction: null }, platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "kbd", "data-ui-kbd": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-key": "key()?.token ?? null", "attr.data-platform": "keyName() ? resolvedPlatform() : null", "attr.data-disabled": "resolvedDisabled() ? \"\" : null" } }, exportAs: ["slKbd"], ngImport: i0, template: `<span data-part="legend" data-part-legend="" [attr.aria-hidden]="key() ? true : null" [attr.data-legend]="key()?.symbolic ? 'symbol' : null">@if (key(); as resolved) {{{ resolved.legend }}} @else {<ng-content></ng-content>}</span>@if (key()?.name; as name) {<span data-part="name" data-part-name="">{{ name }}</span>}`, isInline: true, styles: ["@layer slotted.components{[data-ui-kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui-kbd][data-part-root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui-kbd] [data-part-legend]{text-box:trim-both cap alphabetic}[data-ui-kbd] [data-part-legend][data-legend=symbol]{text-box:normal}}[data-ui-kbd] [data-part-legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui-kbd] [data-part-name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-kbd][data-part-shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui-kbd][data-part-shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-part-shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui-kbd] [data-part-separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui-kbd] [data-part-separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui-kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui-kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui-kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui-kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui-kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui-kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui-kbd][data-part-root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui-kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-disabled] [data-part-separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-variant=outline][data-disabled],[data-ui-kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui-kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlKbd, decorators: [{
             type: Component,
-            args: [{ selector: 'kbd[slKbd]', standalone: true, exportAs: 'slKbd', template: `<span data-part="legend" [attr.aria-hidden]="key() ? true : null" [attr.data-legend]="key()?.symbolic ? 'symbol' : null">@if (key(); as resolved) {{{ resolved.legend }}} @else {<ng-content></ng-content>}</span>@if (key()?.name; as name) {<span data-part="name">{{ name }}</span>}`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbd[slKbd]', standalone: true, exportAs: 'slKbd', template: `<span data-part="legend" data-part-legend="" [attr.aria-hidden]="key() ? true : null" [attr.data-legend]="key()?.symbolic ? 'symbol' : null">@if (key(); as resolved) {{{ resolved.legend }}} @else {<ng-content></ng-content>}</span>@if (key()?.name; as name) {<span data-part="name" data-part-name="">{{ name }}</span>}`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'kbd',
+                        'data-ui-kbd': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[attr.data-key]': 'key()?.token ?? null',
                         '[attr.data-platform]': 'keyName() ? resolvedPlatform() : null',
                         '[attr.data-disabled]': 'resolvedDisabled() ? "" : null',
-                    }, styles: ["@layer slotted.components{[data-ui=kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui=kbd][data-part=root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui=kbd] [data-part=legend]{text-box:trim-both cap alphabetic}[data-ui=kbd] [data-part=legend][data-legend=symbol]{text-box:normal}}[data-ui=kbd] [data-part=legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui=kbd] [data-part=name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=kbd][data-part=shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui=kbd][data-part=shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-part=shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui=kbd] [data-part=separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui=kbd] [data-part=separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui=kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui=kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui=kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui=kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui=kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui=kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui=kbd][data-part=root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui=kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-disabled] [data-part=separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-variant=outline][data-disabled],[data-ui=kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui=kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui-kbd][data-part-root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui-kbd] [data-part-legend]{text-box:trim-both cap alphabetic}[data-ui-kbd] [data-part-legend][data-legend=symbol]{text-box:normal}}[data-ui-kbd] [data-part-legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui-kbd] [data-part-name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-kbd][data-part-shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui-kbd][data-part-shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-part-shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui-kbd] [data-part-separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui-kbd] [data-part-separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui-kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui-kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui-kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui-kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui-kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui-kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui-kbd][data-part-root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui-kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-disabled] [data-part-separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-variant=outline][data-disabled],[data-ui-kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui-kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"] }]
         }], propDecorators: { keyName: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyName", required: false }] }], platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 /**
@@ -241,17 +243,17 @@ class SlShortcut {
     empty = computed(() => this.resolved()?.steps.length === 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlShortcut, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlShortcut, isStandalone: true, selector: "kbd[slShortcut]", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, names: { classPropertyName: "names", publicName: "names", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "kbd", "data-part": "shortcut" }, properties: { "attr.data-platform": "resolvedPlatform()", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-disabled": "disabled() ? \"\" : null", "style.display": "empty() ? \"none\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlShortcut, isStandalone: true, selector: "kbd[slShortcut]", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, names: { classPropertyName: "names", publicName: "names", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "kbd", "data-ui-kbd": "", "data-part": "shortcut", "data-part-shortcut": "" }, properties: { "attr.data-platform": "resolvedPlatform()", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-disabled": "disabled() ? \"\" : null", "style.display": "empty() ? \"none\" : null" } }, providers: [
             {
                 provide: SlShortcutAxes.token,
                 /* The decorator runs before the class binding exists. */
                 useExisting: forwardRef(() => SlShortcut),
             },
-        ], exportAs: ["slShortcut"], ngImport: i0, template: `@if (resolved(); as shortcut) {@for (step of shortcut.steps; track $index) {@if (!$first) {<span data-part="separator" data-separator="then">{{ shortcut.thenLabel }}</span>}@for (key of step; track $index) {@if (!$first && shortcut.separator) {<span aria-hidden="true" data-part="separator" data-separator="plus">{{ shortcut.separator }}</span>}<kbd data-ui="kbd" data-part="root" [attr.data-key]="key.token" [attr.data-platform]="shortcut.platform" [attr.data-size]="resolvedSize()" [attr.data-variant]="resolvedVariant()" [attr.data-disabled]="disabled() ? '' : null"><span data-part="legend" aria-hidden="true" [attr.data-legend]="key.symbolic ? 'symbol' : null">{{ key.legend }}</span>@if (key.name; as name) {<span data-part="name">{{ name }}</span>}</kbd>}}} @else {<ng-content></ng-content>}`, isInline: true, styles: ["@layer slotted.components{[data-ui=kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui=kbd][data-part=root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui=kbd] [data-part=legend]{text-box:trim-both cap alphabetic}[data-ui=kbd] [data-part=legend][data-legend=symbol]{text-box:normal}}[data-ui=kbd] [data-part=legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui=kbd] [data-part=name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=kbd][data-part=shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui=kbd][data-part=shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-part=shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui=kbd] [data-part=separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui=kbd] [data-part=separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui=kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui=kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui=kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui=kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui=kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui=kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui=kbd][data-part=root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui=kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-disabled] [data-part=separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-variant=outline][data-disabled],[data-ui=kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui=kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["slShortcut"], ngImport: i0, template: `@if (resolved(); as shortcut) {@for (step of shortcut.steps; track $index) {@if (!$first) {<span data-part="separator" data-part-separator="" data-separator="then">{{ shortcut.thenLabel }}</span>}@for (key of step; track $index) {@if (!$first && shortcut.separator) {<span aria-hidden="true" data-part="separator" data-part-separator="" data-separator="plus">{{ shortcut.separator }}</span>}<kbd data-ui="kbd" data-ui-kbd="" data-part="root" data-part-root="" [attr.data-key]="key.token" [attr.data-platform]="shortcut.platform" [attr.data-size]="resolvedSize()" [attr.data-variant]="resolvedVariant()" [attr.data-disabled]="disabled() ? '' : null"><span data-part="legend" data-part-legend="" aria-hidden="true" [attr.data-legend]="key.symbolic ? 'symbol' : null">{{ key.legend }}</span>@if (key.name; as name) {<span data-part="name" data-part-name="">{{ name }}</span>}</kbd>}}} @else {<ng-content></ng-content>}`, isInline: true, styles: ["@layer slotted.components{[data-ui-kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui-kbd][data-part-root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui-kbd] [data-part-legend]{text-box:trim-both cap alphabetic}[data-ui-kbd] [data-part-legend][data-legend=symbol]{text-box:normal}}[data-ui-kbd] [data-part-legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui-kbd] [data-part-name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-kbd][data-part-shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui-kbd][data-part-shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-part-shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui-kbd] [data-part-separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui-kbd] [data-part-separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui-kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui-kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui-kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui-kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui-kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui-kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui-kbd][data-part-root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui-kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-disabled] [data-part-separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-variant=outline][data-disabled],[data-ui-kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui-kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlShortcut, decorators: [{
             type: Component,
-            args: [{ selector: 'kbd[slShortcut]', standalone: true, exportAs: 'slShortcut', template: `@if (resolved(); as shortcut) {@for (step of shortcut.steps; track $index) {@if (!$first) {<span data-part="separator" data-separator="then">{{ shortcut.thenLabel }}</span>}@for (key of step; track $index) {@if (!$first && shortcut.separator) {<span aria-hidden="true" data-part="separator" data-separator="plus">{{ shortcut.separator }}</span>}<kbd data-ui="kbd" data-part="root" [attr.data-key]="key.token" [attr.data-platform]="shortcut.platform" [attr.data-size]="resolvedSize()" [attr.data-variant]="resolvedVariant()" [attr.data-disabled]="disabled() ? '' : null"><span data-part="legend" aria-hidden="true" [attr.data-legend]="key.symbolic ? 'symbol' : null">{{ key.legend }}</span>@if (key.name; as name) {<span data-part="name">{{ name }}</span>}</kbd>}}} @else {<ng-content></ng-content>}`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'kbd[slShortcut]', standalone: true, exportAs: 'slShortcut', template: `@if (resolved(); as shortcut) {@for (step of shortcut.steps; track $index) {@if (!$first) {<span data-part="separator" data-part-separator="" data-separator="then">{{ shortcut.thenLabel }}</span>}@for (key of step; track $index) {@if (!$first && shortcut.separator) {<span aria-hidden="true" data-part="separator" data-part-separator="" data-separator="plus">{{ shortcut.separator }}</span>}<kbd data-ui="kbd" data-ui-kbd="" data-part="root" data-part-root="" [attr.data-key]="key.token" [attr.data-platform]="shortcut.platform" [attr.data-size]="resolvedSize()" [attr.data-variant]="resolvedVariant()" [attr.data-disabled]="disabled() ? '' : null"><span data-part="legend" data-part-legend="" aria-hidden="true" [attr.data-legend]="key.symbolic ? 'symbol' : null">{{ key.legend }}</span>@if (key.name; as name) {<span data-part="name" data-part-name="">{{ name }}</span>}</kbd>}}} @else {<ng-content></ng-content>}`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: SlShortcutAxes.token,
                             /* The decorator runs before the class binding exists. */
@@ -259,7 +261,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         },
                     ], host: {
                         'data-ui': 'kbd',
+                        'data-ui-kbd': '',
                         'data-part': 'shortcut',
+                        'data-part-shortcut': '',
                         '[attr.data-platform]': 'resolvedPlatform()',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
@@ -273,7 +277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                          * `display: inline-flex`, which the `hidden` attribute would lose to.
                          */
                         '[style.display]': 'empty() ? "none" : null',
-                    }, styles: ["@layer slotted.components{[data-ui=kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui=kbd][data-part=root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui=kbd] [data-part=legend]{text-box:trim-both cap alphabetic}[data-ui=kbd] [data-part=legend][data-legend=symbol]{text-box:normal}}[data-ui=kbd] [data-part=legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui=kbd] [data-part=name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=kbd][data-part=shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui=kbd][data-part=shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-part=shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui=kbd] [data-part=separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui=kbd] [data-part=separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui=kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui=kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui=kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui=kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui=kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui=kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui=kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui=kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui=kbd][data-part=root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui=kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-disabled] [data-part=separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=kbd][data-variant=outline][data-disabled],[data-ui=kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui=kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-kbd]{--_size: var(--slotted-space-8, 1.5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_inset-inline: var(--slotted-space-3, .375rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-md, 6px));--_gap: var(--slotted-space-2, .25rem);--_edge-width: var(--slotted-kbd-border-width, var(--slotted-border-width-thin, 1px));--_base-width: var(--_edge-width);--_block-size: var(--slotted-control-inner-size, var(--_size));--_background: var(--slotted-surface-raised, Canvas);--_face: none;--_border: var(--slotted-control-border-color, ButtonBorder);--_base: var(--slotted-border-strong, ButtonBorder);--_color: var(--slotted-text, CanvasText)}[data-ui-kbd][data-part-root]{background-color:var(--_background);background-image:var(--_face);block-size:var(--_block-size);border:var(--_edge-width) solid var(--_border);border-block-end:var(--_base-width) solid var(--_base);border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:inline-grid;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-kbd-font-weight, var(--slotted-font-weight-medium, 500));line-height:1;min-inline-size:var(--_block-size);place-items:center;padding-block:0;padding-inline:var(--_inset-inline);white-space:nowrap;vertical-align:middle;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}@supports (text-box: trim-both cap alphabetic){[data-ui-kbd] [data-part-legend]{text-box:trim-both cap alphabetic}[data-ui-kbd] [data-part-legend][data-legend=symbol]{text-box:normal}}[data-ui-kbd] [data-part-legend][data-legend=symbol]{font-family:var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));font-size:1.1em}[data-ui-kbd] [data-part-name]{block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-kbd][data-part-shortcut]{align-items:center;direction:ltr;display:inline-flex;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));line-height:1;flex-wrap:wrap;gap:var(--_gap);max-inline-size:100%;vertical-align:middle}[data-ui-kbd][data-part-shortcut][data-platform=mac]{--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-part-shortcut][data-platform=mac][data-size=inherit]{--_gap: .125em}[data-ui-kbd] [data-part-separator]{color:var(--slotted-text-muted, GrayText);flex:none;font-family:var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);line-height:1}[data-ui-kbd] [data-part-separator][data-separator=then]{font-family:var(--slotted-control-font-family, sans-serif);padding-inline:var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=xs]{--_size: var(--slotted-space-6, 1rem);--_font-size: .6875rem;--_inset-inline: var(--slotted-space-2, .25rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-sm, 4px));--_gap: var(--slotted-space-1, .125rem)}[data-ui-kbd][data-size=sm]{--_size: var(--slotted-space-7, 1.25rem);--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-inline: var(--slotted-space-2, .25rem)}[data-ui-kbd][data-size=lg]{--_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, .25rem));--_font-size: var(--slotted-control-font-size-lg, 14px);--_inset-inline: var(--slotted-space-4, .5rem);--_radius: var(--slotted-kbd-radius, var(--slotted-radius-lg, 8px))}[data-ui-kbd][data-size=inherit]{--_size: 1.5em;--_font-size: .8em;--_inset-inline: .4em;--_radius: var(--slotted-kbd-radius, .375em);--_gap: .25em}@supports (inline-size: round(nearest,1.5em,1px)){[data-ui-kbd][data-size=inherit]{--_size: round(nearest, 1.5em, 1px)}}[data-ui-kbd][data-variant=raised]{--_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));--_face: linear-gradient( to bottom, var(--_background) 40%, color-mix(in oklab, var(--_background), var(--_base) 10%) )}[data-ui-kbd][data-variant=outline]{--_background: transparent;--_border: var(--slotted-border-strong, ButtonBorder);--_color: inherit}[data-ui-kbd][data-variant=soft]{--_background: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_base: var(--slotted-tone-secondary-border);--_color: var(--slotted-tone-secondary-text)}[data-ui-kbd][data-variant=plain]{--_background: transparent;--_border: transparent;--_base: transparent;--_color: inherit}[data-ui-kbd][data-part-root][data-variant=plain]{min-inline-size:0;padding-inline:0}[data-ui-kbd][data-disabled]{--_background: var(--slotted-disabled-background, Canvas);--_face: none;--_border: var(--slotted-disabled-border, GrayText);--_base: var(--slotted-disabled-border, GrayText);--_color: var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-disabled] [data-part-separator]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-kbd][data-variant=outline][data-disabled],[data-ui-kbd][data-variant=plain][data-disabled]{--_background: transparent}[data-ui-kbd][data-variant=plain][data-disabled]{--_border: transparent;--_base: transparent}}\n"] }]
         }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }], platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], names: [{ type: i0.Input, args: [{ isSignal: true, alias: "names", required: false }] }] } });
 
 /**