@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-inline.mjs

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Inline arranges its children along the inline axis and lets them wrap. It
+ * paints nothing and adds no semantics: the element is the one the consumer
+ * wrote, so a list of tags stays a list.
+ *
+ * An axis reaches the stylesheet only when someone decided it. The base rule
+ * already carries the family defaults — wrapping, centred, separated by half a
+ * rem — and a layout is the most numerous element in a document.
+ *
+ * There is no input that reverses the children. The order they are written in
+ * is the order they are read in, by a screen reader and by the Tab key alike.
+ */
+class SlInline {
+    /** Positions items across the flow. `baseline` puts their type on one line. */
+    align = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Separation between items, as a step on the space scale. */
+    gap = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Positions items along the flow, and distributes the space between them. */
+    justify = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "justify" }] : /* istanbul ignore next */ []));
+    /** `nowrap` keeps one line, and overflows a container narrower than it. */
+    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 });
+}
+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-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
+                           div, centring its text; written statically for the input it would stay. */
+                        '[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"] }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlInline };
+//# sourceMappingURL=slotted-angular-inline.mjs.map

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

@@ -0,0 +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;;"}

package/fesm2022/slotted-angular-kbd.mjs

@@ -0,0 +1,284 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, isDevMode, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { keysMessages } from '@slotted/core/i18n';
+import { resolvePlatform, resolveKey, resolveShortcut } from '@slotted/core/keys';
+import { isPlatformBrowser } from '@angular/common';
+
+const FALLBACK = {
+    platform: 'auto',
+    size: 'md',
+    variant: 'raised',
+    separator: '+',
+    legends: undefined,
+    names: undefined,
+};
+const KBD_DEFAULTS = new InjectionToken('slotted kbd defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once which platform its shortcuts are written for, how
+ * its keys are painted, and which legends and names it writes in place of the
+ * catalog's for particular keys. A key that states any of them itself still
+ * wins: an explicit input is never overridden by the token. The words come from
+ * the `keys` catalog of the language in force (`provideSlotted`).
+ */
+function provideKbdDefaults(defaults) {
+    return {
+        provide: KBD_DEFAULTS,
+        useFactory: () => ({
+            platform: defaults.platform ?? FALLBACK.platform,
+            size: defaults.size ?? FALLBACK.size,
+            variant: defaults.variant ?? FALLBACK.variant,
+            separator: defaults.separator ?? FALLBACK.separator,
+            legends: defaults.legends ?? FALLBACK.legends,
+            names: defaults.names ?? FALLBACK.names,
+        }),
+    };
+}
+/** What a key renders as here, before it states anything of its own. */
+function injectKbdDefaults() {
+    return inject(KBD_DEFAULTS);
+}
+/**
+ * The reader's platform, resolved synchronously in the browser and never on the
+ * server.
+ *
+ * The asymmetry with the React binding is deliberate and is the one worth
+ * recording. React has `useSyncExternalStore`, which distinguishes a hydrating
+ * render from a plain client one, so it can be right on the first paint of a
+ * client-rendered page *and* free of hydration mismatches on a server-rendered
+ * one. Angular exposes no equivalent, so the choice is between a flash on every
+ * page and a mismatch on hydrated ones. This binding takes neither: it resolves
+ * at once in the browser, which is right for the client-rendered application,
+ * and an application that server-renders states `platform` through
+ * `provideKbdDefaults` — at which point nothing is detected at all.
+ *
+ * A development-mode warning is what stops that requirement from being
+ * discovered by a reader seeing `Ctrl` on their Mac.
+ */
+function injectKbdPlatform() {
+    const defaults = injectKbdDefaults();
+    const browser = isPlatformBrowser(inject(PLATFORM_ID));
+    if (!browser && defaults.platform === 'auto' && isDevMode()) {
+        console.warn('[slotted/kbd] The platform cannot be detected on the server, so every shortcut is ' +
+            'rendered for `other`. Call provideKbdDefaults({ platform }) to state it.');
+    }
+    return (stated) => {
+        const requested = stated ?? defaults.platform;
+        if (requested !== 'auto')
+            return requested;
+        return browser ? resolvePlatform('auto') : 'other';
+    };
+}
+
+const SHORTCUT_AXES = new InjectionToken('slotted kbd shortcut axes');
+/**
+ * A namespace rather than a class, because there is nothing to instantiate: the
+ * combination provides its own signals and a key reads them if it has a
+ * combination to read.
+ */
+const SlShortcutAxes = {
+    token: SHORTCUT_AXES,
+    injectOptional: () => inject(SHORTCUT_AXES, { optional: true, skipSelf: false }),
+};
+
+/**
+ * One key of a keyboard, drawn so a reader can find it on theirs.
+ *
+ * The directive is written on the consumer's own `<kbd>`, which is the element
+ * the HTML Standard defines for exactly this and the reason this binding needs
+ * no `render` prop: substituting the element is Angular's default.
+ *
+ * It is not a control: nothing here is focusable, nothing answers hover, and
+ * nothing binds a shortcut. Registering one is the application's, because WCAG
+ * 2.2 2.1.4 Character Key Shortcuts can only be answered by whoever knows
+ * whether the shortcut can be turned off.
+ */
+class SlKbd {
+    /**
+     * A token from the vocabulary — `mod`, `meta`, `shift`, `escape`, `up` — or
+     * any of its aliases. It resolves to the legend the reader's platform draws
+     * and the word a screen reader hears in place of it.
+     */
+    keyName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyName" }] : /* istanbul ignore next */ []));
+    /** Defaults to the combination, then to the provider, then to `auto`. */
+    platform = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "platform" }] : /* istanbul ignore next */ []));
+    /** Defaults to the combination, then to the provider, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the combination, then to the provider, then to `raised`. */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Dims the key without claiming the item's semantics. `kbd` may carry only
+     * the global ARIA attributes, and `aria-disabled` is not one of them, so the
+     * row this key belongs to is what says it is unavailable.
+     */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the `keys` catalog of the language in force, key by key:
+     * `legends.*` for what a cap shows, `names.*` for what a reader hears.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    defaults = injectKbdDefaults();
+    platformOf = injectKbdPlatform();
+    t = injectMessages(keysMessages, this.messages);
+    /**
+     * The combination this key sits in, when it sits in one. It is optional, so a
+     * key written on its own works, and a key written by hand inside a `Shortcut`
+     * is painted like the combination around it without repeating four inputs.
+     */
+    group = SlShortcutAxes.injectOptional();
+    resolvedPlatform = computed(() => this.platformOf(this.platform() ?? this.group?.platform()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlatform" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.group?.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.group?.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.group?.disabled() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    key = computed(() => {
+        const token = this.keyName();
+        if (token === undefined || token === '')
+            return undefined;
+        return resolveKey(token, {
+            platform: this.resolvedPlatform(),
+            t: this.t,
+            legends: this.defaults.legends,
+            names: this.defaults.names,
+        });
+    }, /* @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;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: {
+                        'data-ui': 'kbd',
+                        '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;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 }] }] } });
+
+/**
+ * A whole key combination, and the element the HTML Standard says it is:
+ * “nesting a `kbd` element within another `kbd` element represents an actual key
+ * or other unit of input as a portion of a larger input”. shadcn's `KbdGroup` is
+ * a `div`, and Chakra and Radix put the whole combination inside one `kbd` as
+ * text; this is the markup the specification describes.
+ *
+ * `keys` is written once and rendered for the reader's platform. The modifiers
+ * are reordered into that platform's own convention — the Apple Style Guide
+ * writes Fn, Control, Option, Shift, Command, and Microsoft writes the Windows
+ * key ahead of Ctrl, Alt and Shift — so one authored string is right on both.
+ * The escape hatch is composition rather than a fifth input: keys projected into
+ * this element are rendered exactly as written.
+ */
+class SlShortcut {
+    /**
+     * The shortcut, written once: `+` joins keys pressed together and whitespace
+     * joins the steps of a sequence.
+     */
+    keys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `auto`. */
+    platform = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "platform" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `raised`. */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Between two simultaneous keys. Defaults to the provider, then to `+`. */
+    separator = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the `keys` catalog of the language in force, key by key:
+     * `legends.*`, `names.*`, and `then` between two steps of a sequence.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Replaces what the eye sees, per key token. Defaults to the provider. */
+    legends = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legends" }] : /* istanbul ignore next */ []));
+    /** Replaces what a reader hears, per key token. Defaults to the provider. */
+    names = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []));
+    defaults = injectKbdDefaults();
+    platformOf = injectKbdPlatform();
+    t = injectMessages(keysMessages, this.messages);
+    resolvedPlatform = computed(() => this.platformOf(this.platform()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlatform" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => {
+        const keys = this.keys();
+        if (keys === undefined)
+            return undefined;
+        return resolveShortcut(keys, {
+            platform: this.resolvedPlatform(),
+            t: this.t,
+            legends: this.legends() ?? this.defaults.legends,
+            names: this.names() ?? this.defaults.names,
+            separator: this.separator() ?? this.defaults.separator,
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    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: [
+            {
+                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;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: [
+                        {
+                            provide: SlShortcutAxes.token,
+                            /* The decorator runs before the class binding exists. */
+                            useExisting: forwardRef(() => SlShortcut),
+                        },
+                    ], host: {
+                        'data-ui': 'kbd',
+                        'data-part': 'shortcut',
+                        '[attr.data-platform]': 'resolvedPlatform()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        /**
+                         * A combination with nothing in it is nothing, not an empty cap at the end
+                         * of a row announcing that a shortcut exists. The React binding returns
+                         * nothing; this directive is written on an element the consumer owns, so it
+                         * cannot un-write it, and `display: none` is the same outcome the platform
+                         * can give from here. The inline style is what beats the family's own
+                         * `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;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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KBD_DEFAULTS, SlKbd, SlShortcut, injectKbdDefaults, injectKbdPlatform, provideKbdDefaults };
+//# sourceMappingURL=slotted-angular-kbd.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-kbd.mjs","sources":["../../kbd/src/kbd-defaults.ts","../../kbd/src/kbd-axes.ts","../../kbd/src/kbd.ts","../../kbd/src/shortcut.ts","../../kbd/src/slotted-angular-kbd.ts"],"sourcesContent":["import { inject, InjectionToken, isDevMode, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nimport type { KbdPlatform, KbdPlatformInput } from '@slotted/core/keys';\nimport { resolvePlatform } from '@slotted/core/keys';\n\nexport type { KbdPlatform, KbdPlatformInput } from '@slotted/core/keys';\n\n/**\n * Four absolute heights — 16, 20, 24 and 28 pixels — and one that reads the text\n * around it. `inherit` is the step prose wants: an absolute cap inside a heading\n * is a stamp, and one in fine print is a slab.\n */\nexport type KbdSize = 'xs' | 'sm' | 'md' | 'lg' | 'inherit';\n\n/**\n * `raised` is the only value that looks like a key. `outline` owns no ground,\n * so it carries over any surface. `soft` is the tinted chip. `plain` is the\n * menu-row form, and it takes the colour of the text it sits in.\n */\nexport type KbdVariant = 'raised' | 'outline' | 'soft' | 'plain';\n\nexport interface KbdDefaults {\n  /**\n   * `auto` asks the runtime. State it instead where the page is rendered on a\n   * server: nothing is detected then, and the first paint is already right.\n   */\n  platform: KbdPlatformInput;\n  size: KbdSize;\n  variant: KbdVariant;\n  /** Between two simultaneous keys. A Mac joins with nothing whatever this says. */\n  separator: string;\n  /** Replaces what the eye sees, per key token: `{ ctrl: 'Strg' }`. */\n  legends: Readonly<Record<string, string>> | undefined;\n  /** Replaces what a reader hears, per key token: `{ ctrl: 'Steuerung' }`. */\n  names: Readonly<Record<string, string>> | undefined;\n}\n\nconst FALLBACK: KbdDefaults = {\n  platform: 'auto',\n  size: 'md',\n  variant: 'raised',\n  separator: '+',\n  legends: undefined,\n  names: undefined,\n};\n\nexport const KBD_DEFAULTS = new InjectionToken<KbdDefaults>('slotted kbd defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once which platform its shortcuts are written for, how\n * its keys are painted, and which legends and names it writes in place of the\n * catalog's for particular keys. A key that states any of them itself still\n * wins: an explicit input is never overridden by the token. The words come from\n * the `keys` catalog of the language in force (`provideSlotted`).\n */\nexport function provideKbdDefaults(defaults: Partial<KbdDefaults>) {\n  return {\n    provide: KBD_DEFAULTS,\n    useFactory: (): KbdDefaults => ({\n      platform: defaults.platform ?? FALLBACK.platform,\n      size: defaults.size ?? FALLBACK.size,\n      variant: defaults.variant ?? FALLBACK.variant,\n      separator: defaults.separator ?? FALLBACK.separator,\n      legends: defaults.legends ?? FALLBACK.legends,\n      names: defaults.names ?? FALLBACK.names,\n    }),\n  };\n}\n\n/** What a key renders as here, before it states anything of its own. */\nexport function injectKbdDefaults(): KbdDefaults {\n  return inject(KBD_DEFAULTS);\n}\n\n/**\n * The reader's platform, resolved synchronously in the browser and never on the\n * server.\n *\n * The asymmetry with the React binding is deliberate and is the one worth\n * recording. React has `useSyncExternalStore`, which distinguishes a hydrating\n * render from a plain client one, so it can be right on the first paint of a\n * client-rendered page *and* free of hydration mismatches on a server-rendered\n * one. Angular exposes no equivalent, so the choice is between a flash on every\n * page and a mismatch on hydrated ones. This binding takes neither: it resolves\n * at once in the browser, which is right for the client-rendered application,\n * and an application that server-renders states `platform` through\n * `provideKbdDefaults` — at which point nothing is detected at all.\n *\n * A development-mode warning is what stops that requirement from being\n * discovered by a reader seeing `Ctrl` on their Mac.\n */\nexport function injectKbdPlatform(): (stated?: KbdPlatformInput) => KbdPlatform {\n  const defaults = injectKbdDefaults();\n  const browser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  if (!browser && defaults.platform === 'auto' && isDevMode()) {\n    console.warn(\n      '[slotted/kbd] The platform cannot be detected on the server, so every shortcut is ' +\n        'rendered for `other`. Call provideKbdDefaults({ platform }) to state it.',\n    );\n  }\n\n  return (stated?: KbdPlatformInput) => {\n    const requested = stated ?? defaults.platform;\n    if (requested !== 'auto') return requested;\n    return browser ? resolvePlatform('auto') : 'other';\n  };\n}\n","import { inject, InjectionToken } from '@angular/core';\nimport type { Signal } from '@angular/core';\n\nimport type { KbdPlatformInput, KbdSize, KbdVariant } from './kbd-defaults';\n\n/**\n * What a combination hands to the keys inside it.\n *\n * Only what the combination was told is handed on: a key that states its own\n * size still wins, and a combination that states nothing hands on nothing, so\n * the provider's default is still what answers. Without this a page writing its\n * own keys inside a `Shortcut` would have to repeat four inputs on each of\n * them, and a key that forgot one would be painted differently from the\n * combination holding it.\n */\nexport interface SlShortcutAxesValue {\n  platform: Signal<KbdPlatformInput | undefined>;\n  size: Signal<KbdSize | undefined>;\n  variant: Signal<KbdVariant | undefined>;\n  disabled: Signal<boolean | undefined>;\n}\n\nconst SHORTCUT_AXES = new InjectionToken<SlShortcutAxesValue>('slotted kbd shortcut axes');\n\n/**\n * A namespace rather than a class, because there is nothing to instantiate: the\n * combination provides its own signals and a key reads them if it has a\n * combination to read.\n */\nexport const SlShortcutAxes = {\n  token: SHORTCUT_AXES,\n  injectOptional: (): SlShortcutAxesValue | null =>\n    inject(SHORTCUT_AXES, { optional: true, skipSelf: false }),\n} as const;\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { injectMessages } from '@slotted/angular/i18n';\nimport { keysMessages, type KeysMessages, type PartialMessages } from '@slotted/core/i18n';\nimport { resolveKey } from '@slotted/core/keys';\n\nimport { injectKbdDefaults, injectKbdPlatform } from './kbd-defaults';\nimport type { KbdPlatformInput, KbdSize, KbdVariant } from './kbd-defaults';\nimport { SlShortcutAxes } from './kbd-axes';\n\n/**\n * One key of a keyboard, drawn so a reader can find it on theirs.\n *\n * The directive is written on the consumer's own `<kbd>`, which is the element\n * the HTML Standard defines for exactly this and the reason this binding needs\n * no `render` prop: substituting the element is Angular's default.\n *\n * It is not a control: nothing here is focusable, nothing answers hover, and\n * nothing binds a shortcut. Registering one is the application's, because WCAG\n * 2.2 2.1.4 Character Key Shortcuts can only be answered by whoever knows\n * whether the shortcut can be turned off.\n */\n@Component({\n  selector: 'kbd[slKbd]',\n  standalone: true,\n  exportAs: 'slKbd',\n  /**\n   * A named key wins over projected content, because it is the more specific of\n   * two explicit instructions — and because content cannot be asked whether it\n   * exists, so any rule that depended on the answer would be one only the React\n   * binding could keep.\n   *\n   * Every space in this template is load-bearing: Angular collapses a newline\n   * between two nodes into a space, and a space inside the legend would be a\n   * space inside the key's word.\n   */\n  // prettier-ignore\n  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>}`,\n  styleUrl: '../../../styles/src/kbd/kbd.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'kbd',\n    'data-part': 'root',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-key]': 'key()?.token ?? null',\n    '[attr.data-platform]': 'keyName() ? resolvedPlatform() : null',\n    '[attr.data-disabled]': 'resolvedDisabled() ? \"\" : null',\n  },\n})\nexport class SlKbd {\n  /**\n   * A token from the vocabulary — `mod`, `meta`, `shift`, `escape`, `up` — or\n   * any of its aliases. It resolves to the legend the reader's platform draws\n   * and the word a screen reader hears in place of it.\n   */\n  readonly keyName = input<string | undefined>(undefined);\n  /** Defaults to the combination, then to the provider, then to `auto`. */\n  readonly platform = input<KbdPlatformInput | undefined>(undefined);\n  /** Defaults to the combination, then to the provider, then to `md`. */\n  readonly size = input<KbdSize | undefined>(undefined);\n  /** Defaults to the combination, then to the provider, then to `raised`. */\n  readonly variant = input<KbdVariant | undefined>(undefined);\n  /**\n   * Dims the key without claiming the item's semantics. `kbd` may carry only\n   * the global ARIA attributes, and `aria-disabled` is not one of them, so the\n   * row this key belongs to is what says it is unavailable.\n   */\n  readonly disabled = input(undefined, { transform: booleanAttribute });\n  /**\n   * Words laid over the `keys` catalog of the language in force, key by key:\n   * `legends.*` for what a cap shows, `names.*` for what a reader hears.\n   */\n  readonly messages = input<PartialMessages<KeysMessages> | undefined>(undefined);\n\n  private readonly defaults = injectKbdDefaults();\n  private readonly platformOf = injectKbdPlatform();\n  private readonly t = injectMessages(keysMessages, this.messages);\n  /**\n   * The combination this key sits in, when it sits in one. It is optional, so a\n   * key written on its own works, and a key written by hand inside a `Shortcut`\n   * is painted like the combination around it without repeating four inputs.\n   */\n  private readonly group = SlShortcutAxes.injectOptional();\n\n  protected readonly resolvedPlatform = computed(() =>\n    this.platformOf(this.platform() ?? this.group?.platform()),\n  );\n  protected readonly resolvedSize = computed(\n    () => this.size() ?? this.group?.size() ?? this.defaults.size,\n  );\n  protected readonly resolvedVariant = computed(\n    () => this.variant() ?? this.group?.variant() ?? this.defaults.variant,\n  );\n  protected readonly resolvedDisabled = computed(\n    () => this.disabled() ?? this.group?.disabled() ?? false,\n  );\n\n  protected readonly key = computed(() => {\n    const token = this.keyName();\n    if (token === undefined || token === '') return undefined;\n    return resolveKey(token, {\n      platform: this.resolvedPlatform(),\n      t: this.t,\n      legends: this.defaults.legends,\n      names: this.defaults.names,\n    });\n  });\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { injectMessages } from '@slotted/angular/i18n';\nimport { keysMessages, type KeysMessages, type PartialMessages } from '@slotted/core/i18n';\nimport { resolveShortcut } from '@slotted/core/keys';\n\nimport { SlShortcutAxes } from './kbd-axes';\nimport { injectKbdDefaults, injectKbdPlatform } from './kbd-defaults';\nimport type { KbdPlatformInput, KbdSize, KbdVariant } from './kbd-defaults';\n\n/**\n * A whole key combination, and the element the HTML Standard says it is:\n * “nesting a `kbd` element within another `kbd` element represents an actual key\n * or other unit of input as a portion of a larger input”. shadcn's `KbdGroup` is\n * a `div`, and Chakra and Radix put the whole combination inside one `kbd` as\n * text; this is the markup the specification describes.\n *\n * `keys` is written once and rendered for the reader's platform. The modifiers\n * are reordered into that platform's own convention — the Apple Style Guide\n * writes Fn, Control, Option, Shift, Command, and Microsoft writes the Windows\n * key ahead of Ctrl, Alt and Shift — so one authored string is right on both.\n * The escape hatch is composition rather than a fifth input: keys projected into\n * this element are rendered exactly as written.\n */\n@Component({\n  selector: 'kbd[slShortcut]',\n  standalone: true,\n  exportAs: 'slShortcut',\n  /**\n   * The key markup is written here as well as in `SlKbd`, because a rendered key\n   * has no token to hand back to that component — the combination resolved it\n   * already, under its own `legends` and `names`. The two are held identical by\n   * `kbd.spec.ts`, which renders the same key both ways and compares the DOM,\n   * rather than by a shared helper that could only serve one of them.\n   *\n   * Every space is load-bearing: Angular collapses a newline between two nodes\n   * into a space, and a space between two caps is a space the gap already owns.\n   */\n  // prettier-ignore\n  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>}`,\n  styleUrl: '../../../styles/src/kbd/kbd.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: SlShortcutAxes.token,\n      /* The decorator runs before the class binding exists. */\n      useExisting: forwardRef(() => SlShortcut),\n    },\n  ],\n  host: {\n    'data-ui': 'kbd',\n    'data-part': 'shortcut',\n    '[attr.data-platform]': 'resolvedPlatform()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    /**\n     * A combination with nothing in it is nothing, not an empty cap at the end\n     * of a row announcing that a shortcut exists. The React binding returns\n     * nothing; this directive is written on an element the consumer owns, so it\n     * cannot un-write it, and `display: none` is the same outcome the platform\n     * can give from here. The inline style is what beats the family's own\n     * `display: inline-flex`, which the `hidden` attribute would lose to.\n     */\n    '[style.display]': 'empty() ? \"none\" : null',\n  },\n})\nexport class SlShortcut {\n  /**\n   * The shortcut, written once: `+` joins keys pressed together and whitespace\n   * joins the steps of a sequence.\n   */\n  readonly keys = input<string | undefined>(undefined);\n  /** Defaults to the provider, then to `auto`. */\n  readonly platform = input<KbdPlatformInput | undefined>(undefined);\n  /** Defaults to the provider, then to `md`. */\n  readonly size = input<KbdSize | undefined>(undefined);\n  /** Defaults to the provider, then to `raised`. */\n  readonly variant = input<KbdVariant | undefined>(undefined);\n  readonly disabled = input(undefined, { transform: booleanAttribute });\n  /** Between two simultaneous keys. Defaults to the provider, then to `+`. */\n  readonly separator = input<string | undefined>(undefined);\n  /**\n   * Words laid over the `keys` catalog of the language in force, key by key:\n   * `legends.*`, `names.*`, and `then` between two steps of a sequence.\n   */\n  readonly messages = input<PartialMessages<KeysMessages> | undefined>(undefined);\n  /** Replaces what the eye sees, per key token. Defaults to the provider. */\n  readonly legends = input<Readonly<Record<string, string>> | undefined>(undefined);\n  /** Replaces what a reader hears, per key token. Defaults to the provider. */\n  readonly names = input<Readonly<Record<string, string>> | undefined>(undefined);\n\n  private readonly defaults = injectKbdDefaults();\n  private readonly platformOf = injectKbdPlatform();\n  private readonly t = injectMessages(keysMessages, this.messages);\n\n  protected readonly resolvedPlatform = computed(() => this.platformOf(this.platform()));\n  protected readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  protected readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n\n  protected readonly resolved = computed(() => {\n    const keys = this.keys();\n    if (keys === undefined) return undefined;\n    return resolveShortcut(keys, {\n      platform: this.resolvedPlatform(),\n      t: this.t,\n      legends: this.legends() ?? this.defaults.legends,\n      names: this.names() ?? this.defaults.names,\n      separator: this.separator() ?? this.defaults.separator,\n    });\n  });\n\n  protected readonly empty = computed(() => this.resolved()?.steps.length === 0);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}