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

package/fesm2022/slotted-angular-breadcrumb.mjs

@@ -0,0 +1,544 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, signal, output, computed, HostAttributeToken, Injector, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, forwardRef, ElementRef, EnvironmentInjector, ApplicationRef, effect, afterRenderEffect, untracked, DestroyRef, createComponent, Directive, numberAttribute } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { breadcrumbMessages } from '@slotted/core/i18n';
+import { createCollapse } from '@slotted/core/overflow';
+import { createControllable } from '@slotted/core/state';
+
+const BREADCRUMB_DEFAULT_MAX_ITEMS = 8;
+const BREADCRUMB_DEFAULT_ITEMS_BEFORE = 1;
+const BREADCRUMB_DEFAULT_ITEMS_AFTER = 2;
+const BREADCRUMB_DEFAULT_OVERFLOW = 'collapse';
+const BREADCRUMB_DEFAULTS_TOKEN = new InjectionToken('slotted breadcrumb defaults', { providedIn: 'root', factory: () => ({}) });
+/**
+ * An application decides once how deep its trails may get before they fold,
+ * whether they fold for want of width, and what is drawn between two crumbs. A
+ * trail that states any of those itself still wins: an explicit input is never
+ * overridden by the token. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideBreadcrumbDefaults(defaults) {
+    return { provide: BREADCRUMB_DEFAULTS_TOKEN, useValue: defaults };
+}
+function injectBreadcrumbDefaults() {
+    return inject(BREADCRUMB_DEFAULTS_TOKEN);
+}
+/**
+ * Which crumbs survive a collapse, as indices into the trail. Shared with the
+ * React binding's own copy through the tests that assert the same table, and
+ * deliberately not shared through `@slotted/core`: it is four lines, and a core
+ * module exists for arithmetic two bindings would otherwise get *differently*
+ * wrong, not for arithmetic they would each get right.
+ */
+function collapsedRange(count, before, after) {
+    const kept = Math.max(0, before) + Math.max(0, after);
+    if (count <= kept)
+        return undefined;
+    return { start: Math.max(0, before), end: count - Math.max(0, after) };
+}
+
+/**
+ * The trail of ancestors above the current page.
+ *
+ * **The landmark and the list are the platform's.** `nav` makes the trail
+ * findable and `ol` carries the hierarchy and the set size, which is the whole
+ * of the APG's Breadcrumb pattern: it lists no keyboard interaction and two
+ * attributes, and both are written here rather than reimplemented.
+ *
+ * **The collapse expands in place.** An overlay would need a layer, a
+ * positioner and a dismissal policy; this needs none of them. The hidden
+ * crumbs carry `hidden`, so they leave the accessibility tree with the page,
+ * and the button that hides them names the count.
+ *
+ * **A trail that does not fit folds.** With `overflow="collapse"` the list
+ * measures itself and folds the middle crumbs its width cannot hold into the
+ * same ellipsis, nearest the root first; what folded is read from the layout
+ * and reported in `data-collapsed`, not owned by anyone.
+ *
+ * **It is a component on the consumer's own `nav`.** A directive carries no
+ * `styleUrl`, and the element was never the family's to choose.
+ */
+class SlBreadcrumb {
+    /**
+     * Present means controlled, for the life of the component, which is why the
+     * unset value is `undefined` rather than `false`: a family that read `false`
+     * as a consumer's answer would never own its own state.
+     */
+    expandedValue = input(undefined, { ...(ngDevMode ? { debugName: "expandedValue" } : /* istanbul ignore next */ {}), alias: 'expanded',
+        transform: (value) => value === undefined ? undefined : booleanAttribute(value) });
+    /** What an uncontrolled trail starts from, read once. */
+    defaultExpanded = input(false, { ...(ngDevMode ? { debugName: "defaultExpanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * landmark's name (`label`) and the ellipsis. A static `aria-label` still wins.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    maxItems = input(undefined, { ...(ngDevMode ? { debugName: "maxItems" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    itemsBeforeCollapse = input(undefined, { ...(ngDevMode ? { debugName: "itemsBeforeCollapse" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    itemsAfterCollapse = input(undefined, { ...(ngDevMode ? { debugName: "itemsAfterCollapse" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    separator = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** What the trail does with crumbs its width cannot hold. */
+    overflow = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    /** How many crumbs are folded into the ellipsis, written by the list. */
+    collapsedCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted before the trail expands, carrying the value it replaces, the
+     * reason and the event it came from. It is not the second half of
+     * `[(expanded)]`: a two-way binding has one slot and can carry none of those.
+     */
+    expandedChange = output();
+    own = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => this.expandedValue() ?? this.own(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    defaults = injectBreadcrumbDefaults();
+    /** A static `aria-label` the consumer wrote survives the host binding. */
+    ownLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    /** The family's words in the language in force, with this trail's `messages` laid over them. */
+    t = injectMessages(breadcrumbMessages, this.messages);
+    accessibleLabel = computed(() => this.ownLabel ?? this.t('label'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
+    maxItemsValue = computed(() => this.maxItems() ?? this.defaults.maxItems ?? BREADCRUMB_DEFAULT_MAX_ITEMS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxItemsValue" }] : /* istanbul ignore next */ []));
+    beforeValue = computed(() => this.itemsBeforeCollapse() ??
+        this.defaults.itemsBeforeCollapse ??
+        BREADCRUMB_DEFAULT_ITEMS_BEFORE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "beforeValue" }] : /* istanbul ignore next */ []));
+    afterValue = computed(() => this.itemsAfterCollapse() ??
+        this.defaults.itemsAfterCollapse ??
+        BREADCRUMB_DEFAULT_ITEMS_AFTER, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "afterValue" }] : /* istanbul ignore next */ []));
+    separatorValue = computed(() => this.separator() ?? this.defaults.separator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorValue" }] : /* istanbul ignore next */ []));
+    overflowValue = computed(() => this.overflow() ?? this.defaults.overflow ?? BREADCRUMB_DEFAULT_OVERFLOW, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Where focus goes once the ellipsis stops existing, registered by the list —
+     * the only part that can see which crumb the ellipsis replaced. React reaches
+     * the same crumb through an id it generates; Angular reaches it through the
+     * query it already has, and neither writes anything the other does not.
+     */
+    focusAfterExpand;
+    registerFocusTarget(focus) {
+        this.focusAfterExpand = focus;
+    }
+    injector = inject(Injector);
+    /**
+     * The ellipsis stops existing the moment it is pressed, and focus on a
+     * removed element is lost to the body — so it is given to the first crumb the
+     * expansion revealed. The move waits a microtask because that crumb is still
+     * hidden while this runs.
+     */
+    expand(reason, source) {
+        if (this.expanded())
+            return;
+        const state = createControllable({
+            controlled: this.expandedValue(),
+            initial: this.expanded(),
+            onRequest: (request) => this.expandedChange.emit(request),
+        });
+        if (state.request(true, reason, source))
+            this.own.set(true);
+        /**
+         * After the render, not after a microtask: the crumb focus moves to is
+         * still hidden while this runs, and a microtask fires before Angular has
+         * written the DOM. Focus then stayed on a removed button and fell to the
+         * body, which the spec caught and nothing else would have.
+         */
+        afterNextRender(() => this.focusAfterExpand?.(), { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlBreadcrumb, isStandalone: true, selector: "nav[slBreadcrumb]", inputs: { expandedValue: { classPropertyName: "expandedValue", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { attributes: { "data-ui": "breadcrumb", "data-part": "root" }, properties: { "attr.aria-label": "accessibleLabel()", "attr.data-expanded": "expanded() ? \"\" : null", "attr.data-collapsed": "collapsedCount() > 0 ? collapsedCount() : null" } }, exportAs: ["slBreadcrumb"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=breadcrumb]{--_rest: var(--slotted-breadcrumb-color, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-breadcrumb-color-current, var(--slotted-text, CanvasText));--_hover: var( --slotted-breadcrumb-color-hover, color-mix(in oklab, var(--_rest) 30%, var(--_strong)) );--_separator: var( --slotted-breadcrumb-separator-color, color-mix(in oklab, var(--_rest) 72%, transparent) );--_gap: var(--slotted-breadcrumb-gap, var(--slotted-control-gap-md, 8px));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_ellipsis-hover: var(--slotted-tone-secondary-subtle-hover);--_ellipsis-active: var(--slotted-tone-secondary-subtle-active);color:var(--_rest);display:block;font-family:var(--slotted-breadcrumb-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-breadcrumb-font-size, var(--slotted-control-font-size-md, 13px));line-height:round(nearest,calc(var(--slotted-breadcrumb-line-height, var(--slotted-line-height-md, 1.5)) * 1em),2px)}[data-ui=breadcrumb] [data-part=list]{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;column-gap:var(--_gap);row-gap:max(var(--slotted-breadcrumb-row-gap, var(--slotted-space-2, .25rem)),calc(var(--slotted-target-min, 24px) - 1lh))}[data-ui=breadcrumb] [data-part=item]{align-items:center;column-gap:var(--_gap);display:flex;min-inline-size:0;max-inline-size:100%}[data-ui=breadcrumb] [data-part=item][hidden]{display:none}[data-ui=breadcrumb][data-expanded] [data-part=item]{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=breadcrumb][data-expanded] [data-part=item]{opacity:0}}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger]){border-radius:var(--slotted-breadcrumb-radius, var(--slotted-control-radius, 4px));display:block;max-inline-size:var(--slotted-breadcrumb-item-measure, 100%);min-inline-size:0;overflow:hidden;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:var(--slotted-breadcrumb-underline-thickness, from-font);text-overflow:ellipsis;text-underline-offset:var(--slotted-breadcrumb-underline-offset, .2em);transition:color var(--slotted-duration-short) var(--slotted-easing-standard),text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);white-space:nowrap}[data-ui=breadcrumb] [data-part=link]{color:inherit}[data-ui=breadcrumb] [data-part=trigger]{appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:0;text-align:start}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>:is([data-ui=icon],[data-ui=avatar]){margin-inline-end:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>[data-ui=badge]{margin-inline-start:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] [data-part=trigger]>[data-ui=icon]:last-child{margin-inline:var(--slotted-space-2, 4px) 0;transition:rotate var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=trigger][data-open]>[data-ui=icon]:last-child{rotate:180deg}[data-ui=breadcrumb] [data-part=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):hover{color:var(--_hover);text-decoration-color:currentColor}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):is(:active,[data-open]){color:var(--_strong);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):hover{color:var(--_strong)}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):is(:active,[data-open]){color:var(--_hover)}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-breadcrumb-focus-ring-offset, 1px);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=ellipsis]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-breadcrumb-ellipsis-focus-ring-offset, calc(-1 * var(--slotted-focus-ring-width, 2px)) )}[data-ui=breadcrumb] [data-part=separator]{align-items:center;color:var(--_separator);display:flex;flex:none;justify-content:center}[data-ui=breadcrumb] [data-part=separator]:empty{background-color:currentColor;block-size:round(nearest,var(--slotted-breadcrumb-separator-length, .9em),1px);border-radius:var(--slotted-radius-full, 9999px);inline-size:var( --slotted-breadcrumb-separator-thickness, var(--slotted-border-width-thin, 1px) );rotate:var(--slotted-breadcrumb-separator-skew, 20deg)}[data-ui=breadcrumb] [data-part=separator]:empty:dir(rtl){rotate:calc(-1 * var(--slotted-breadcrumb-separator-skew, 20deg))}[data-ui=breadcrumb] [data-part=ellipsis]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:1lh;border:0;border-radius:var(--slotted-breadcrumb-ellipsis-radius, var(--slotted-radius-xs, 2px));color:inherit;cursor:pointer;display:flex;font:inherit;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;margin-inline:min(0px,calc(var(--slotted-space-2, .25rem) - var(--_gap)));padding:0;position:relative;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=ellipsis]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=breadcrumb] [data-part=ellipsis]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):hover{background-color:var(--slotted-breadcrumb-ellipsis-background-hover, var(--_ellipsis-hover))}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):active{background-color:var(--slotted-breadcrumb-ellipsis-background-active, var(--_ellipsis-active))}@media(forced-colors:active){[data-ui=breadcrumb] [data-part=separator]:empty{background-color:GrayText}[data-ui=breadcrumb] [data-part=ellipsis]{border:var(--slotted-border-width-thin, 1px) solid ButtonBorder}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'nav[slBreadcrumb]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slBreadcrumb', host: {
+                        'data-ui': 'breadcrumb',
+                        'data-part': 'root',
+                        '[attr.aria-label]': 'accessibleLabel()',
+                        '[attr.data-expanded]': 'expanded() ? "" : null',
+                        '[attr.data-collapsed]': 'collapsedCount() > 0 ? collapsedCount() : null',
+                    }, styles: ["@layer slotted.components{[data-ui=breadcrumb]{--_rest: var(--slotted-breadcrumb-color, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-breadcrumb-color-current, var(--slotted-text, CanvasText));--_hover: var( --slotted-breadcrumb-color-hover, color-mix(in oklab, var(--_rest) 30%, var(--_strong)) );--_separator: var( --slotted-breadcrumb-separator-color, color-mix(in oklab, var(--_rest) 72%, transparent) );--_gap: var(--slotted-breadcrumb-gap, var(--slotted-control-gap-md, 8px));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_ellipsis-hover: var(--slotted-tone-secondary-subtle-hover);--_ellipsis-active: var(--slotted-tone-secondary-subtle-active);color:var(--_rest);display:block;font-family:var(--slotted-breadcrumb-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-breadcrumb-font-size, var(--slotted-control-font-size-md, 13px));line-height:round(nearest,calc(var(--slotted-breadcrumb-line-height, var(--slotted-line-height-md, 1.5)) * 1em),2px)}[data-ui=breadcrumb] [data-part=list]{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;column-gap:var(--_gap);row-gap:max(var(--slotted-breadcrumb-row-gap, var(--slotted-space-2, .25rem)),calc(var(--slotted-target-min, 24px) - 1lh))}[data-ui=breadcrumb] [data-part=item]{align-items:center;column-gap:var(--_gap);display:flex;min-inline-size:0;max-inline-size:100%}[data-ui=breadcrumb] [data-part=item][hidden]{display:none}[data-ui=breadcrumb][data-expanded] [data-part=item]{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=breadcrumb][data-expanded] [data-part=item]{opacity:0}}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger]){border-radius:var(--slotted-breadcrumb-radius, var(--slotted-control-radius, 4px));display:block;max-inline-size:var(--slotted-breadcrumb-item-measure, 100%);min-inline-size:0;overflow:hidden;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:var(--slotted-breadcrumb-underline-thickness, from-font);text-overflow:ellipsis;text-underline-offset:var(--slotted-breadcrumb-underline-offset, .2em);transition:color var(--slotted-duration-short) var(--slotted-easing-standard),text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);white-space:nowrap}[data-ui=breadcrumb] [data-part=link]{color:inherit}[data-ui=breadcrumb] [data-part=trigger]{appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:0;text-align:start}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>:is([data-ui=icon],[data-ui=avatar]){margin-inline-end:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>[data-ui=badge]{margin-inline-start:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] [data-part=trigger]>[data-ui=icon]:last-child{margin-inline:var(--slotted-space-2, 4px) 0;transition:rotate var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=trigger][data-open]>[data-ui=icon]:last-child{rotate:180deg}[data-ui=breadcrumb] [data-part=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):hover{color:var(--_hover);text-decoration-color:currentColor}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):is(:active,[data-open]){color:var(--_strong);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):hover{color:var(--_strong)}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):is(:active,[data-open]){color:var(--_hover)}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-breadcrumb-focus-ring-offset, 1px);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=ellipsis]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-breadcrumb-ellipsis-focus-ring-offset, calc(-1 * var(--slotted-focus-ring-width, 2px)) )}[data-ui=breadcrumb] [data-part=separator]{align-items:center;color:var(--_separator);display:flex;flex:none;justify-content:center}[data-ui=breadcrumb] [data-part=separator]:empty{background-color:currentColor;block-size:round(nearest,var(--slotted-breadcrumb-separator-length, .9em),1px);border-radius:var(--slotted-radius-full, 9999px);inline-size:var( --slotted-breadcrumb-separator-thickness, var(--slotted-border-width-thin, 1px) );rotate:var(--slotted-breadcrumb-separator-skew, 20deg)}[data-ui=breadcrumb] [data-part=separator]:empty:dir(rtl){rotate:calc(-1 * var(--slotted-breadcrumb-separator-skew, 20deg))}[data-ui=breadcrumb] [data-part=ellipsis]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:1lh;border:0;border-radius:var(--slotted-breadcrumb-ellipsis-radius, var(--slotted-radius-xs, 2px));color:inherit;cursor:pointer;display:flex;font:inherit;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;margin-inline:min(0px,calc(var(--slotted-space-2, .25rem) - var(--_gap)));padding:0;position:relative;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=ellipsis]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=breadcrumb] [data-part=ellipsis]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):hover{background-color:var(--slotted-breadcrumb-ellipsis-background-hover, var(--_ellipsis-hover))}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):active{background-color:var(--slotted-breadcrumb-ellipsis-background-active, var(--_ellipsis-active))}@media(forced-colors:active){[data-ui=breadcrumb] [data-part=separator]:empty{background-color:GrayText}[data-ui=breadcrumb] [data-part=ellipsis]{border:var(--slotted-border-width-thin, 1px) solid ButtonBorder}}}\n"] }]
+        }], propDecorators: { expandedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+/**
+ * The control that reveals what the collapse hides, in an item of its own.
+ *
+ * The list creates it rather than any crumb drawing it, because it has to be a
+ * sibling of the crumbs: a crumb that drew it inside itself hid it together
+ * with itself, since the first crumb the collapse hides is the one it stands
+ * in front of. Its accessible name carries the count, because three dots say
+ * nothing about how much is behind them.
+ */
+class SlBreadcrumbEllipsis {
+    trail = inject(SlBreadcrumb);
+    /* Declared below this class, and read only when an instance is created. */
+    list = inject(SlBreadcrumbList);
+    label = computed(() => this.trail.t('showHidden', { count: this.list.hiddenCount() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    onKeydown(event) {
+        /* `Enter` and `Space` both activate a button and the browser turns each
+           into a click; this is what tells the two apart in the request. */
+        if (event.key === 'Enter' || event.key === ' ')
+            this.trail.expand('keyboard', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlBreadcrumbEllipsis, isStandalone: true, selector: "li[slBreadcrumbEllipsis]", host: { attributes: { "data-part": "item" } }, ngImport: i0, template: `
+    <button
+      [attr.aria-label]="label()"
+      aria-expanded="false"
+      data-part="ellipsis"
+      type="button"
+      (click)="trail.expand('pointer', $event)"
+      (keydown)="onKeydown($event)"
+    >
+      <span slIcon><svg slGlyph name="ellipsis"></svg></span>
+    </button>
+    <span aria-hidden="true" data-part="separator">
+      <ng-container *ngTemplateOutlet="trail.separatorValue() ?? null"></ng-container>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SlBreadcrumbEllipsis, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[slBreadcrumbEllipsis]',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, SlGlyph, SlIcon],
+                    template: `
+    <button
+      [attr.aria-label]="label()"
+      aria-expanded="false"
+      data-part="ellipsis"
+      type="button"
+      (click)="trail.expand('pointer', $event)"
+      (keydown)="onKeydown($event)"
+    >
+      <span slIcon><svg slGlyph name="ellipsis"></svg></span>
+    </button>
+    <span aria-hidden="true" data-part="separator">
+      <ng-container *ngTemplateOutlet="trail.separatorValue() ?? null"></ng-container>
+    </span>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'item' },
+                }]
+        }] });
+/**
+ * The ordered list, and the one part that knows how many crumbs there are.
+ *
+ * It queries its items rather than projecting them blindly, because two facts
+ * about a crumb can only be known from the outside: whether it is the last —
+ * the last draws no separator — and whether the count collapse is hiding it.
+ * It also owns the ellipsis, which it places in front of the first crumb that
+ * can fold, and the width collapse.
+ *
+ * That is where the two bindings differ and the DOM does not: React maps its
+ * children, Angular writes the same facts back onto queried items and inserts
+ * the ellipsis's item itself.
+ */
+class SlBreadcrumbList {
+    trail = inject(SlBreadcrumb);
+    /* The crumb is declared below this class, and the dev-server transform puts
+       the query predicate in a static initializer — a direct reference would read
+       the binding before it exists. `forwardRef` defers the read to the query. */
+    items = contentChildren(forwardRef(() => SlBreadcrumbItem), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef).nativeElement;
+    injector = inject(Injector);
+    environment = inject(EnvironmentInjector);
+    application = inject(ApplicationRef);
+    ellipsis = null;
+    collapse = null;
+    folded = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []));
+    /**
+     * The range is computed whether or not the trail is expanded, because two
+     * different things read it. The collapse reads it only while folded; the
+     * focus target reads it afterwards, and it has to still be there — the id
+     * used to disappear with the ellipsis, which left focus on a removed button
+     * and therefore on the body.
+     */
+    range = computed(() => {
+        const count = this.items().length;
+        const maxItems = this.trail.maxItemsValue();
+        return maxItems <= 0 || count <= maxItems
+            ? undefined
+            : collapsedRange(count, this.trail.beforeValue(), this.trail.afterValue());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    counted = computed(() => (this.trail.expanded() ? undefined : this.range()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counted" }] : /* istanbul ignore next */ []));
+    /** Whether there is a middle at all: crumbs outside the ones that never fold. */
+    middle = computed(() => this.items().length >
+        Math.max(0, this.trail.beforeValue()) + Math.max(0, this.trail.afterValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "middle" }] : /* istanbul ignore next */ []));
+    /**
+     * The width collapse runs only while the count has hidden nothing: a trail
+     * the count already folded shows only the crumbs that never fold. One writer
+     * per `hidden` attribute keeps the two from undoing each other — the item's
+     * host binding writes it for the count, `createCollapse` for the width.
+     */
+    measuring = computed(() => this.trail.overflowValue() === 'collapse' &&
+        !this.trail.expanded() &&
+        this.range() === undefined &&
+        this.middle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuring" }] : /* istanbul ignore next */ []));
+    hiddenCount = computed(() => {
+        const counted = this.counted();
+        return counted === undefined ? this.folded() : counted.end - counted.start;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const items = this.items();
+            const counted = this.counted();
+            for (const [index, item] of items.entries()) {
+                item.last.set(index === items.length - 1);
+                item.collapsed.set(counted !== undefined && index >= counted.start && index < counted.end);
+            }
+            /* The first crumb an expansion reveals, whichever collapse hid it. */
+            const revealed = this.middle() ? items[Math.max(0, this.trail.beforeValue())] : undefined;
+            this.trail.registerFocusTarget(revealed === undefined ? undefined : () => revealed.focus());
+            this.trail.collapsedCount.set(this.hiddenCount());
+        });
+        afterRenderEffect(() => {
+            const items = this.items();
+            const counted = this.counted() !== undefined;
+            const measuring = this.measuring();
+            const anchor = counted || measuring ? items[Math.max(0, this.trail.beforeValue())] : undefined;
+            untracked(() => this.place(anchor?.element, counted, measuring));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.collapse?.destroy();
+            this.ellipsis?.destroy();
+        });
+    }
+    /**
+     * Puts the ellipsis's item in front of the first crumb that can fold, or
+     * takes it away, and starts or stops the width measurement.
+     */
+    place(anchor, counted, measuring) {
+        if (!measuring) {
+            this.collapse?.destroy();
+            this.collapse = null;
+            this.folded.set(0);
+        }
+        if (anchor === undefined) {
+            if (this.ellipsis !== null) {
+                this.application.detachView(this.ellipsis.hostView);
+                this.ellipsis.destroy();
+                this.ellipsis = null;
+            }
+            return;
+        }
+        const item = this.ensureEllipsis();
+        if (item.nextElementSibling !== anchor)
+            this.host.insertBefore(item, anchor);
+        if (counted) {
+            item.removeAttribute('hidden');
+            return;
+        }
+        if (this.collapse === null) {
+            /* Until the width has been measured the ellipsis stands for nothing. */
+            item.setAttribute('hidden', '');
+            const units = () => [...this.host.children].filter((unit) => unit instanceof HTMLElement && unit !== item);
+            const before = Math.max(0, this.trail.beforeValue());
+            const after = Math.max(0, this.trail.afterValue());
+            this.collapse = createCollapse(this.host, {
+                /* Only the middle folds: the first crumbs and the last ones never do. */
+                collapsible: (unit) => {
+                    const index = units().indexOf(unit);
+                    return index >= before && index < units().length - after;
+                },
+                onChange: (hidden) => this.folded.set(hidden.length),
+                /* Nearest the root first, so the folded run stays beside the ellipsis. */
+                rank: (unit) => units().indexOf(unit),
+                trigger: () => item,
+                units,
+            });
+        }
+        else {
+            this.collapse.refresh();
+        }
+    }
+    ensureEllipsis() {
+        if (this.ellipsis === null) {
+            this.ellipsis = createComponent(SlBreadcrumbEllipsis, {
+                elementInjector: this.injector,
+                environmentInjector: this.environment,
+                hostElement: this.host.ownerDocument.createElement('li'),
+            });
+            this.application.attachView(this.ellipsis.hostView);
+        }
+        return this.ellipsis.location.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.7", type: SlBreadcrumbList, isStandalone: true, selector: "ol[slBreadcrumbList]", host: { attributes: { "data-part": "list" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => SlBreadcrumbItem), isSignal: true }], exportAs: ["slBreadcrumbList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ol[slBreadcrumbList]',
+                    standalone: true,
+                    exportAs: 'slBreadcrumbList',
+                    host: { 'data-part': 'list' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [forwardRef(() => SlBreadcrumbItem), { isSignal: true }] }] } });
+/**
+ * One ancestor, or the current page. It carries the separator after it, so a
+ * consumer writes none and never leaves a trailing one behind.
+ */
+class SlBreadcrumbItem {
+    trail = inject(SlBreadcrumb);
+    element = inject(ElementRef).nativeElement;
+    /** Written by the list, which is the only part that can see the whole trail. */
+    last = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
+    collapsed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** The crumb's own control, whatever the consumer made it. */
+    focus() {
+        this.element.querySelector('a, button, [tabindex]')?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlBreadcrumbItem, isStandalone: true, selector: "li[slBreadcrumbItem]", host: { attributes: { "data-part": "item" }, properties: { "attr.hidden": "collapsed() ? \"\" : null" } }, exportAs: ["slBreadcrumbItem"], ngImport: i0, template: `
+    <ng-content></ng-content>
+    @if (!last()) {
+      <span aria-hidden="true" data-part="separator">
+        <ng-container *ngTemplateOutlet="trail.separatorValue() ?? null"></ng-container>
+      </span>
+    }
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=breadcrumb]{--_rest: var(--slotted-breadcrumb-color, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-breadcrumb-color-current, var(--slotted-text, CanvasText));--_hover: var( --slotted-breadcrumb-color-hover, color-mix(in oklab, var(--_rest) 30%, var(--_strong)) );--_separator: var( --slotted-breadcrumb-separator-color, color-mix(in oklab, var(--_rest) 72%, transparent) );--_gap: var(--slotted-breadcrumb-gap, var(--slotted-control-gap-md, 8px));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_ellipsis-hover: var(--slotted-tone-secondary-subtle-hover);--_ellipsis-active: var(--slotted-tone-secondary-subtle-active);color:var(--_rest);display:block;font-family:var(--slotted-breadcrumb-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-breadcrumb-font-size, var(--slotted-control-font-size-md, 13px));line-height:round(nearest,calc(var(--slotted-breadcrumb-line-height, var(--slotted-line-height-md, 1.5)) * 1em),2px)}[data-ui=breadcrumb] [data-part=list]{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;column-gap:var(--_gap);row-gap:max(var(--slotted-breadcrumb-row-gap, var(--slotted-space-2, .25rem)),calc(var(--slotted-target-min, 24px) - 1lh))}[data-ui=breadcrumb] [data-part=item]{align-items:center;column-gap:var(--_gap);display:flex;min-inline-size:0;max-inline-size:100%}[data-ui=breadcrumb] [data-part=item][hidden]{display:none}[data-ui=breadcrumb][data-expanded] [data-part=item]{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=breadcrumb][data-expanded] [data-part=item]{opacity:0}}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger]){border-radius:var(--slotted-breadcrumb-radius, var(--slotted-control-radius, 4px));display:block;max-inline-size:var(--slotted-breadcrumb-item-measure, 100%);min-inline-size:0;overflow:hidden;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:var(--slotted-breadcrumb-underline-thickness, from-font);text-overflow:ellipsis;text-underline-offset:var(--slotted-breadcrumb-underline-offset, .2em);transition:color var(--slotted-duration-short) var(--slotted-easing-standard),text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);white-space:nowrap}[data-ui=breadcrumb] [data-part=link]{color:inherit}[data-ui=breadcrumb] [data-part=trigger]{appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:0;text-align:start}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>:is([data-ui=icon],[data-ui=avatar]){margin-inline-end:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>[data-ui=badge]{margin-inline-start:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] [data-part=trigger]>[data-ui=icon]:last-child{margin-inline:var(--slotted-space-2, 4px) 0;transition:rotate var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=trigger][data-open]>[data-ui=icon]:last-child{rotate:180deg}[data-ui=breadcrumb] [data-part=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):hover{color:var(--_hover);text-decoration-color:currentColor}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):is(:active,[data-open]){color:var(--_strong);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):hover{color:var(--_strong)}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):is(:active,[data-open]){color:var(--_hover)}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-breadcrumb-focus-ring-offset, 1px);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=ellipsis]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-breadcrumb-ellipsis-focus-ring-offset, calc(-1 * var(--slotted-focus-ring-width, 2px)) )}[data-ui=breadcrumb] [data-part=separator]{align-items:center;color:var(--_separator);display:flex;flex:none;justify-content:center}[data-ui=breadcrumb] [data-part=separator]:empty{background-color:currentColor;block-size:round(nearest,var(--slotted-breadcrumb-separator-length, .9em),1px);border-radius:var(--slotted-radius-full, 9999px);inline-size:var( --slotted-breadcrumb-separator-thickness, var(--slotted-border-width-thin, 1px) );rotate:var(--slotted-breadcrumb-separator-skew, 20deg)}[data-ui=breadcrumb] [data-part=separator]:empty:dir(rtl){rotate:calc(-1 * var(--slotted-breadcrumb-separator-skew, 20deg))}[data-ui=breadcrumb] [data-part=ellipsis]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:1lh;border:0;border-radius:var(--slotted-breadcrumb-ellipsis-radius, var(--slotted-radius-xs, 2px));color:inherit;cursor:pointer;display:flex;font:inherit;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;margin-inline:min(0px,calc(var(--slotted-space-2, .25rem) - var(--_gap)));padding:0;position:relative;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=ellipsis]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=breadcrumb] [data-part=ellipsis]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):hover{background-color:var(--slotted-breadcrumb-ellipsis-background-hover, var(--_ellipsis-hover))}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):active{background-color:var(--slotted-breadcrumb-ellipsis-background-active, var(--_ellipsis-active))}@media(forced-colors:active){[data-ui=breadcrumb] [data-part=separator]:empty{background-color:GrayText}[data-ui=breadcrumb] [data-part=ellipsis]{border:var(--slotted-border-width-thin, 1px) solid ButtonBorder}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[slBreadcrumbItem]', standalone: true, imports: [NgTemplateOutlet], template: `
+    <ng-content></ng-content>
+    @if (!last()) {
+      <span aria-hidden="true" data-part="separator">
+        <ng-container *ngTemplateOutlet="trail.separatorValue() ?? null"></ng-container>
+      </span>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slBreadcrumbItem', host: {
+                        'data-part': 'item',
+                        '[attr.hidden]': 'collapsed() ? "" : null',
+                    }, styles: ["@layer slotted.components{[data-ui=breadcrumb]{--_rest: var(--slotted-breadcrumb-color, var(--slotted-text-muted, GrayText));--_strong: var(--slotted-breadcrumb-color-current, var(--slotted-text, CanvasText));--_hover: var( --slotted-breadcrumb-color-hover, color-mix(in oklab, var(--_rest) 30%, var(--_strong)) );--_separator: var( --slotted-breadcrumb-separator-color, color-mix(in oklab, var(--_rest) 72%, transparent) );--_gap: var(--slotted-breadcrumb-gap, var(--slotted-control-gap-md, 8px));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_ellipsis-hover: var(--slotted-tone-secondary-subtle-hover);--_ellipsis-active: var(--slotted-tone-secondary-subtle-active);color:var(--_rest);display:block;font-family:var(--slotted-breadcrumb-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--slotted-breadcrumb-font-size, var(--slotted-control-font-size-md, 13px));line-height:round(nearest,calc(var(--slotted-breadcrumb-line-height, var(--slotted-line-height-md, 1.5)) * 1em),2px)}[data-ui=breadcrumb] [data-part=list]{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;column-gap:var(--_gap);row-gap:max(var(--slotted-breadcrumb-row-gap, var(--slotted-space-2, .25rem)),calc(var(--slotted-target-min, 24px) - 1lh))}[data-ui=breadcrumb] [data-part=item]{align-items:center;column-gap:var(--_gap);display:flex;min-inline-size:0;max-inline-size:100%}[data-ui=breadcrumb] [data-part=item][hidden]{display:none}[data-ui=breadcrumb][data-expanded] [data-part=item]{transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=breadcrumb][data-expanded] [data-part=item]{opacity:0}}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger]){border-radius:var(--slotted-breadcrumb-radius, var(--slotted-control-radius, 4px));display:block;max-inline-size:var(--slotted-breadcrumb-item-measure, 100%);min-inline-size:0;overflow:hidden;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:var(--slotted-breadcrumb-underline-thickness, from-font);text-overflow:ellipsis;text-underline-offset:var(--slotted-breadcrumb-underline-offset, .2em);transition:color var(--slotted-duration-short) var(--slotted-easing-standard),text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);white-space:nowrap}[data-ui=breadcrumb] [data-part=link]{color:inherit}[data-ui=breadcrumb] [data-part=trigger]{appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:0;text-align:start}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>:is([data-ui=icon],[data-ui=avatar]){margin-inline-end:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] :is([data-part=link],[data-part=page],[data-part=trigger])>[data-ui=badge]{margin-inline-start:var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px))}[data-ui=breadcrumb] [data-part=trigger]>[data-ui=icon]:last-child{margin-inline:var(--slotted-space-2, 4px) 0;transition:rotate var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=trigger][data-open]>[data-ui=icon]:last-child{rotate:180deg}[data-ui=breadcrumb] [data-part=page]{color:var(--_strong);font-weight:var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500))}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):hover{color:var(--_hover);text-decoration-color:currentColor}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):not([data-disabled]):is(:active,[data-open]){color:var(--_strong);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):hover{color:var(--_strong)}[data-ui=breadcrumb] [data-part=trigger][aria-current=page]:not([data-disabled]):is(:active,[data-open]){color:var(--_hover)}[data-ui=breadcrumb] :is([data-part=link],[data-part=trigger]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-breadcrumb-focus-ring-offset, 1px);text-decoration-color:currentColor}[data-ui=breadcrumb] [data-part=ellipsis]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-breadcrumb-ellipsis-focus-ring-offset, calc(-1 * var(--slotted-focus-ring-width, 2px)) )}[data-ui=breadcrumb] [data-part=separator]{align-items:center;color:var(--_separator);display:flex;flex:none;justify-content:center}[data-ui=breadcrumb] [data-part=separator]:empty{background-color:currentColor;block-size:round(nearest,var(--slotted-breadcrumb-separator-length, .9em),1px);border-radius:var(--slotted-radius-full, 9999px);inline-size:var( --slotted-breadcrumb-separator-thickness, var(--slotted-border-width-thin, 1px) );rotate:var(--slotted-breadcrumb-separator-skew, 20deg)}[data-ui=breadcrumb] [data-part=separator]:empty:dir(rtl){rotate:calc(-1 * var(--slotted-breadcrumb-separator-skew, 20deg))}[data-ui=breadcrumb] [data-part=ellipsis]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:1lh;border:0;border-radius:var(--slotted-breadcrumb-ellipsis-radius, var(--slotted-radius-xs, 2px));color:inherit;cursor:pointer;display:flex;font:inherit;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;margin-inline:min(0px,calc(var(--slotted-space-2, .25rem) - var(--_gap)));padding:0;position:relative;transition:background-color var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=breadcrumb] [data-part=ellipsis]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=breadcrumb] [data-part=ellipsis]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):hover{background-color:var(--slotted-breadcrumb-ellipsis-background-hover, var(--_ellipsis-hover))}[data-ui=breadcrumb] [data-part=ellipsis]:not([data-disabled]):active{background-color:var(--slotted-breadcrumb-ellipsis-background-active, var(--_ellipsis-active))}@media(forced-colors:active){[data-ui=breadcrumb] [data-part=separator]:empty{background-color:GrayText}[data-ui=breadcrumb] [data-part=ellipsis]{border:var(--slotted-border-width-thin, 1px) solid ButtonBorder}}}\n"] }]
+        }] });
+/**
+ * An ancestor that can be reached. The directive sits on the consumer's own
+ * anchor, so the role, `Enter`, the context menu and every modified click are
+ * the platform's — and `routerLink` composes on the same element, because the
+ * element was never the family's to begin with.
+ */
+class SlBreadcrumbLink {
+    element = inject(ElementRef).nativeElement;
+    focus() {
+        this.element.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlBreadcrumbLink, isStandalone: true, selector: "a[slBreadcrumbLink]", host: { attributes: { "data-part": "link" } }, exportAs: ["slBreadcrumbLink"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[slBreadcrumbLink]',
+                    standalone: true,
+                    exportAs: 'slBreadcrumbLink',
+                    host: { 'data-part': 'link' },
+                }]
+        }] });
+/**
+ * The page the reader is on. It is text rather than a link, because a link to
+ * the page you are already on goes nowhere, and it carries `aria-current="page"`
+ * — the value the ARIA specification names for a link within a set of pages.
+ */
+class SlBreadcrumbPage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlBreadcrumbPage, isStandalone: true, selector: "[slBreadcrumbPage]", host: { attributes: { "data-part": "page", "aria-current": "page" } }, exportAs: ["slBreadcrumbPage"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbPage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slBreadcrumbPage]',
+                    standalone: true,
+                    exportAs: 'slBreadcrumbPage',
+                    host: {
+                        'data-part': 'page',
+                        'aria-current': 'page',
+                    },
+                }]
+        }] });
+/**
+ * A crumb that opens a menu of its siblings — the organisation, the project,
+ * the environment. It is a component on the consumer's own `button`, because an
+ * `a` without `href` takes no focus, and it draws the chevron after the label.
+ * The menu composes on the same element:
+ *
+ * ```html
+ * <button slBreadcrumbTrigger current [slMenuTriggerFor]="environments">Production</button>
+ * ```
+ *
+ * `current` keeps `aria-current="page"` on the switcher of the page the reader
+ * is on, which a switcher does not stop being.
+ */
+class SlBreadcrumbTrigger {
+    current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ownType = inject(new HostAttributeToken('type'), { optional: true });
+    ownCurrent = inject(new HostAttributeToken('aria-current'), {
+        optional: true,
+    });
+    element = inject(ElementRef).nativeElement;
+    constructor() {
+        /**
+         * `slMenuTriggerFor` on the same element binds `data-part` to `null` when
+         * its trigger is a plain control, which erased this part and the whole
+         * crumb's styling with it. The erasing expression is a constant, so the
+         * part written back after the first render is never erased again —
+         * `docs/build-briefing.md` records the rule.
+         */
+        afterNextRender(() => this.element.setAttribute('data-part', 'trigger'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBreadcrumbTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlBreadcrumbTrigger, isStandalone: true, selector: "button[slBreadcrumbTrigger]", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "trigger" }, properties: { "attr.type": "ownType ?? \"button\"", "attr.aria-current": "current() ? \"page\" : ownCurrent" } }, exportAs: ["slBreadcrumbTrigger"], ngImport: i0, template: `<ng-content></ng-content><span slIcon><svg slGlyph name="chevron-down"></svg></span>`, isInline: true, 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: SlBreadcrumbTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slBreadcrumbTrigger]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content></ng-content><span slIcon><svg slGlyph name="chevron-down"></svg></span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'slBreadcrumbTrigger',
+                    host: {
+                        'data-part': 'trigger',
+                        '[attr.type]': 'ownType ?? "button"',
+                        '[attr.aria-current]': 'current() ? "page" : ownCurrent',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
+/**
+ * Absence has to survive the transform: `numberAttribute` maps an unset input
+ * to `NaN`, and a family that read that would stop deferring to the provider.
+ */
+function optionalNumber(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const parsed = numberAttribute(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BREADCRUMB_DEFAULTS_TOKEN, BREADCRUMB_DEFAULT_ITEMS_AFTER, BREADCRUMB_DEFAULT_ITEMS_BEFORE, BREADCRUMB_DEFAULT_MAX_ITEMS, BREADCRUMB_DEFAULT_OVERFLOW, SlBreadcrumb, SlBreadcrumbItem, SlBreadcrumbLink, SlBreadcrumbList, SlBreadcrumbPage, SlBreadcrumbTrigger, collapsedRange, injectBreadcrumbDefaults, provideBreadcrumbDefaults };
+//# sourceMappingURL=slotted-angular-breadcrumb.mjs.map