@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.10

package/fesm2022/slotted-angular-menu.mjs

@@ -7,6 +7,7 @@ import { createControllable } from '@slotted/core/state';
 import { createTypeahead, isPrintable } from '@slotted/core/typeahead';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, signal, computed, model, output, numberAttribute, booleanAttribute, ViewContainerRef, viewChild, DestroyRef, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, HostAttributeToken, Directive } from '@angular/core';
+import { writeSelectorKey } from '@slotted/core/selector-key';
 import { createPointerIntent } from '@slotted/core/pointer-intent';
 import { keysMessages } from '@slotted/core/i18n';
 import { parseShortcut, canonicalKey, resolveShortcut, resolvePlatform } from '@slotted/core/keys';
@@ -39,6 +40,7 @@ const FALLBACK = {
     side: 'bottom',
     sideOffset: 0,
     size: 'md',
+    width: 'content',
     strategy: 'absolute',
     submenuCloseDelay: 300,
     submenuOpenDelay: 150,
@@ -130,6 +132,8 @@ class SlMenu {
     ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
     size = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     mount = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mount" }] : /* istanbul ignore next */ []));
     strategy = input(undefined, /* @ts-ignore */
@@ -217,6 +221,9 @@ class SlMenu {
     ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
     resolvedSize = computed(() => this.size() ?? (this.onBar ? this.bar?.size() : undefined) ?? this.defaults.size, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    /* A submenu hangs from an item, and an item's width is not a measure. */
+    resolvedWidth = computed(() => this.parent === null ? (this.width() ?? this.defaults.width) : 'content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
     resolvedDisabled = computed(() => (this.disabled() ?? this.defaults.disabled) ||
         (this.onBar && (this.bar?.disabled() ?? false)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
@@ -534,19 +541,23 @@ class SlMenu {
         (order[index + step] ?? trigger).focus({ preventScroll: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlMenu, isStandalone: true, selector: "sl-menu", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, submenuOpenDelay: { classPropertyName: "submenuOpenDelay", publicName: "submenuOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, submenuCloseDelay: { classPropertyName: "submenuCloseDelay", publicName: "submenuCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openChangeRequest: "openChangeRequest" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["layer"], descendants: true, isSignal: true }], exportAs: ["slMenu"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlMenu, isStandalone: true, selector: "sl-menu", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, submenuOpenDelay: { classPropertyName: "submenuOpenDelay", publicName: "submenuOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, submenuCloseDelay: { classPropertyName: "submenuCloseDelay", publicName: "submenuCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openChangeRequest: "openChangeRequest" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["layer"], descendants: true, isSignal: true }], exportAs: ["slMenu"], ngImport: i0, template: `
     <ng-template #layer>
       <div
         data-ui="menu"
+        data-ui-menu=""
         data-part="root"
+        data-part-root=""
         [attr.data-align]="resolvedAlign()"
         [attr.data-size]="resolvedSize()"
+        [attr.data-width]="resolvedWidth()"
         [attr.data-open]="isOpen() ? '' : null"
         [attr.inert]="isOpen() ? null : ''"
       >
         <div
           #surface
           data-part="content"
+          data-part-content=""
           role="menu"
           tabindex="-1"
           [id]="contentId"
@@ -561,7 +572,7 @@ class SlMenu {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=menu]{--_gap: var(--slotted-menu-gap, var(--slotted-space-2, .25rem));--_surface: var(--slotted-menu-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-menu-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-menu-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-menu-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-menu-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-menu-shadow, var(--slotted-shadow-md));--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-menu-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_accent: var(--_text);--_inset-block: var(--slotted-menu-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-menu-padding-inline, var(--slotted-space-2, .25rem));--_item-padding: var(--slotted-control-padding-inline-md, .8125rem);--_item-inset: calc(var(--_item-padding) - var(--_inset-inline));--_item-height: var(--slotted-control-height-md, 34px);--_item-radius: var(--slotted-menu-item-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_measure: var(--slotted-menu-measure, 16rem);--_min-measure: min( var(--slotted-menu-min-measure, 12rem), var(--slotted-positioner-available-width, 100vw) );position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--_min-measure);padding-block:var(--_gap);padding-inline:0;pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=menu][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui=menu][data-side=left]{translate:var(--_enter-distance) 0}[data-ui=menu]:is([data-side=left],[data-side=right]){padding-block:0;padding-inline:var(--_gap)}[data-ui=menu][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=menu][data-open][data-positioned]{animation:slotted-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=menu][data-open][data-positioned][data-side=top]{animation-name:slotted-menu-enter-up}[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-enter-from-start}[data-ui=menu][data-open][data-positioned][data-side=left]{animation-name:slotted-menu-enter-from-end}@keyframes slotted-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-menu-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-menu-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-menu-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=menu],[data-ui=menu][data-side=top],[data-ui=menu][data-side=left],[data-ui=menu][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-open][data-positioned],[data-ui=menu][data-open][data-positioned][data-side=top],[data-ui=menu][data-open][data-positioned][data-side=left],[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-fade}}[data-ui=menu][data-detached]{visibility:hidden}[data-ui=menu][data-size=sm]{--_item-padding: var(--slotted-control-padding-inline-sm, .625rem);--_item-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem);--_measure: var(--slotted-menu-measure-sm, 14rem)}[data-ui=menu][data-size=lg]{--_item-padding: var(--slotted-control-padding-inline-lg, 1rem);--_item-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem);--_measure: var(--slotted-menu-measure-lg, 20rem)}[data-ui=menu]>[data-part=content]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto auto;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);pointer-events:auto}[data-ui=menu]>[data-part=content]:focus-visible{outline:none}[data-ui=menu] [data-part=group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui=menu] [data-part=group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--_secondary-leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]{align-items:center;column-gap:var(--slotted-space-5, .75rem);display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);line-height:var(--_leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]>:not([data-part=label],[data-part=description]){grid-column:1;grid-row:1 / span 2}[data-ui=menu] [data-part=header]>[data-part=label]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=menu] [data-part=item]{appearance:none;background:transparent;border:0;border-radius:var(--_item-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1 / -1;grid-template-columns:subgrid;align-content:center;line-height:var(--_leading);min-block-size:var(--_item-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset);row-gap:var(--slotted-space-1, .125rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=menu] [data-part=item]:focus{background-color:var(--_highlight);color:var(--_accent)}[data-ui=menu] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=menu] [data-part=item]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui=menu] [data-part=item][data-open]{background-color:var(--_highlight)}[data-ui=menu] [data-part=item][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:var(--_highlight);color:var(--slotted-disabled-foreground, #64748b)}[data-ui=menu] :is([data-part=indicator],[data-part=icon]),[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{block-size:1lh}[data-ui=menu] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap);opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu] [data-part=item][data-checked]>[data-part=indicator]{opacity:1;scale:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui=menu] [data-part=item][role=menuitemradio]>[data-part=indicator]{--slotted-icon-size: calc(var(--_icon-size) * .7)}[data-ui=menu] [data-part=icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui=menu] [data-part=icon]>*{font-size:var(--_icon-size)}[data-ui=menu] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=item][data-disabled]>[data-part=description]{color:inherit}[data-ui=menu] [data-part=meta]{align-items:center;color:var(--_muted);column-gap:var(--slotted-space-2, .25rem);display:flex;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=shortcut]{color:var(--_muted);grid-column:4;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=item][data-disabled]>:is([data-part=shortcut],[data-part=meta]),[data-ui=menu] [data-part=item][data-disabled][aria-haspopup=menu]>[data-ui=icon]{color:inherit}[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1;justify-self:end;line-height:inherit;margin-inline-start:var(--_column-gap);color:var(--_muted)}[data-ui=menu] [data-part=separator]{background-color:var(--slotted-menu-separator-color, var(--_border-color));block-size:var(--_border-width);border:0;grid-column:1 / -1;margin-block:var(--slotted-space-2, .25rem);margin-inline:0}[data-ui=menu] [data-part=empty]{color:var(--_muted);grid-column:1 / -1;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_item-inset);text-align:center}[data-ui=menu]>[data-part=content][data-loading]{cursor:progress}[data-ui=menu] [data-part=item][data-tone=accent]{--_accent: var(--slotted-tone-accent-text);--_highlight: var(--slotted-tone-accent-surface);--_highlight-active: var(--slotted-tone-accent-subtle-active);color:var(--slotted-tone-accent-text)}[data-ui=menu] [data-part=item][data-tone=secondary]{--_accent: var(--slotted-tone-secondary-text);--_highlight: var(--slotted-tone-secondary-surface);--_highlight-active: var(--slotted-tone-secondary-subtle-active);color:var(--slotted-tone-secondary-text)}[data-ui=menu] [data-part=item][data-tone=success]{--_accent: var(--slotted-tone-success-text);--_highlight: var(--slotted-tone-success-surface);--_highlight-active: var(--slotted-tone-success-subtle-active);color:var(--slotted-tone-success-text)}[data-ui=menu] [data-part=item][data-tone=warning]{--_accent: var(--slotted-tone-warning-text);--_highlight: var(--slotted-tone-warning-surface);--_highlight-active: var(--slotted-tone-warning-subtle-active);color:var(--slotted-tone-warning-text)}[data-ui=menu] [data-part=item][data-tone=danger]{--_accent: var(--slotted-tone-danger-text);--_highlight: var(--slotted-tone-danger-surface);--_highlight-active: var(--slotted-tone-danger-subtle-active);color:var(--slotted-tone-danger-text)}[data-ui=menu] [data-part=item][data-tone][data-disabled]{--_accent: var(--slotted-disabled-foreground, #64748b);--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));color:var(--slotted-disabled-foreground, #64748b)}@media(forced-colors:active){[data-ui=menu] [data-part=item]:focus{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:Highlight;color:GrayText}}}\n", "@layer slotted.components{[data-ui=highlight] [data-part=match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=highlight] [data-part=match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui=highlight] [data-part=match],[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui=highlight] [data-part=match][data-current]{background-color:Highlight;color:HighlightText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-menu]{--_gap: var(--slotted-menu-gap, var(--slotted-space-2, .25rem));--_surface: var(--slotted-menu-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-menu-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-menu-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-menu-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-menu-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-menu-shadow, var(--slotted-shadow-md));--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-menu-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_accent: var(--_text);--_inset-block: var(--slotted-menu-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-menu-padding-inline, var(--slotted-space-2, .25rem));--_item-padding: var(--slotted-control-padding-inline-md, .8125rem);--_item-inset: calc(var(--_item-padding) - var(--_inset-inline));--_item-height: var(--slotted-control-height-md, 34px);--_item-radius: var(--slotted-menu-item-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_measure: var(--slotted-menu-measure, 16rem);--_min-measure: min( var(--slotted-menu-min-measure, 12rem), var(--slotted-positioner-available-width, 100vw) );position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--_min-measure);padding-block:var(--_gap);padding-inline:0;pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-menu][data-side=top]{translate:0 var(--_enter-distance)}[data-ui-menu][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui-menu][data-side=left]{translate:var(--_enter-distance) 0}[data-ui-menu]:is([data-side=left],[data-side=right]){padding-block:0;padding-inline:var(--_gap)}[data-ui-menu][data-open]{opacity:1;translate:0 0;transition:none}[data-ui-menu][data-open][data-positioned]{animation:slotted-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui-menu][data-open][data-positioned][data-side=top]{animation-name:slotted-menu-enter-up}[data-ui-menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-enter-from-start}[data-ui-menu][data-open][data-positioned][data-side=left]{animation-name:slotted-menu-enter-from-end}@keyframes slotted-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-menu-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-menu-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-menu-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui-menu],[data-ui-menu][data-side=top],[data-ui-menu][data-side=left],[data-ui-menu][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-menu][data-open][data-positioned],[data-ui-menu][data-open][data-positioned][data-side=top],[data-ui-menu][data-open][data-positioned][data-side=left],[data-ui-menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-fade}}[data-ui-menu][data-detached]{visibility:hidden}[data-ui-menu][data-width=anchor]{max-inline-size:var(--slotted-positioner-available-width, 100vw);min-inline-size:0}[data-ui-menu][data-width=anchor]>[data-part-content]{inline-size:var(--slotted-positioner-anchor-width, auto);max-inline-size:var(--slotted-positioner-available-width, 100vw);min-inline-size:min(var(--slotted-positioner-anchor-width, 0px),var(--slotted-positioner-available-width, 100vw))}[data-ui-menu][data-size=sm]{--_item-padding: var(--slotted-control-padding-inline-sm, .625rem);--_item-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem);--_measure: var(--slotted-menu-measure-sm, 14rem)}[data-ui-menu][data-size=lg]{--_item-padding: var(--slotted-control-padding-inline-lg, 1rem);--_item-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem);--_measure: var(--slotted-menu-measure-lg, 20rem)}[data-ui-menu]>[data-part-content]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto auto;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);pointer-events:auto}[data-ui-menu]>[data-part-content]:focus-visible{outline:none}[data-ui-menu] [data-part-group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui-menu] [data-part-group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--_secondary-leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui-menu] [data-part-header]{align-items:center;column-gap:var(--slotted-space-5, .75rem);display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);line-height:var(--_leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui-menu] [data-part-header]>:not([data-part-label],[data-part-description]){grid-column:1;grid-row:1 / span 2}[data-ui-menu] [data-part-header]>[data-part-label]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-menu] [data-part-item]{appearance:none;background:transparent;border:0;border-radius:var(--_item-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1 / -1;grid-template-columns:subgrid;align-content:center;line-height:var(--_leading);min-block-size:var(--_item-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset);row-gap:var(--slotted-space-1, .125rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui-menu] [data-part-item]:focus{background-color:var(--_highlight);color:var(--_accent)}[data-ui-menu] [data-part-item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui-menu] [data-part-item]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui-menu] [data-part-item][data-open]{background-color:var(--_highlight)}[data-ui-menu] [data-part-item][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui-menu] [data-part-item][data-disabled]:focus{background-color:var(--_highlight);color:var(--slotted-disabled-foreground, #64748b)}[data-ui-menu] :is([data-part-indicator],[data-part-icon]),[data-ui-menu] [data-part-item][aria-haspopup=menu]>[data-ui-icon]{block-size:1lh}[data-ui-menu] [data-part-indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap);opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-menu] [data-part-item][data-checked]>[data-part-indicator]{opacity:1;scale:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui-menu] [data-part-item][role=menuitemradio]>[data-part-indicator]{--slotted-icon-size: calc(var(--_icon-size) * .7)}[data-ui-menu] [data-part-icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui-menu] [data-part-icon]>*{font-size:var(--_icon-size)}[data-ui-menu] [data-part-label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui-menu] [data-part-description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow-wrap:anywhere}[data-ui-menu] [data-part-item][data-disabled]>[data-part-description]{color:inherit}[data-ui-menu] [data-part-meta]{align-items:center;color:var(--_muted);column-gap:var(--slotted-space-2, .25rem);display:flex;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui-menu] [data-part-shortcut]{color:var(--_muted);grid-column:4;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui-menu] [data-part-item][data-disabled]>:is([data-part-shortcut],[data-part-meta]),[data-ui-menu] [data-part-item][data-disabled][aria-haspopup=menu]>[data-ui-icon]{color:inherit}[data-ui-menu] [data-part-item][aria-haspopup=menu]>[data-ui-icon]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1;justify-self:end;line-height:inherit;margin-inline-start:var(--_column-gap);color:var(--_muted)}[data-ui-menu] [data-part-separator]{background-color:var(--slotted-menu-separator-color, var(--_border-color));block-size:var(--_border-width);border:0;grid-column:1 / -1;margin-block:var(--slotted-space-2, .25rem);margin-inline:0}[data-ui-menu] [data-part-empty]{color:var(--_muted);grid-column:1 / -1;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_item-inset);text-align:center}[data-ui-menu]>[data-part-content][data-loading]{cursor:progress}[data-ui-menu] [data-part-item][data-tone=accent]{--_accent: var(--slotted-tone-accent-text);--_highlight: var(--slotted-tone-accent-surface);--_highlight-active: var(--slotted-tone-accent-subtle-active);color:var(--slotted-tone-accent-text)}[data-ui-menu] [data-part-item][data-tone=secondary]{--_accent: var(--slotted-tone-secondary-text);--_highlight: var(--slotted-tone-secondary-surface);--_highlight-active: var(--slotted-tone-secondary-subtle-active);color:var(--slotted-tone-secondary-text)}[data-ui-menu] [data-part-item][data-tone=success]{--_accent: var(--slotted-tone-success-text);--_highlight: var(--slotted-tone-success-surface);--_highlight-active: var(--slotted-tone-success-subtle-active);color:var(--slotted-tone-success-text)}[data-ui-menu] [data-part-item][data-tone=warning]{--_accent: var(--slotted-tone-warning-text);--_highlight: var(--slotted-tone-warning-surface);--_highlight-active: var(--slotted-tone-warning-subtle-active);color:var(--slotted-tone-warning-text)}[data-ui-menu] [data-part-item][data-tone=danger]{--_accent: var(--slotted-tone-danger-text);--_highlight: var(--slotted-tone-danger-surface);--_highlight-active: var(--slotted-tone-danger-subtle-active);color:var(--slotted-tone-danger-text)}[data-ui-menu] [data-part-item][data-tone][data-disabled]{--_accent: var(--slotted-disabled-foreground, #64748b);--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));color:var(--slotted-disabled-foreground, #64748b)}@media(forced-colors:active){[data-ui-menu] [data-part-item]:focus{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui-menu] [data-part-item][data-disabled]:focus{background-color:Highlight;color:GrayText}}}\n", "@layer slotted.components{[data-ui-highlight] [data-part-match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui-highlight] [data-part-match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui-highlight]:is([data-disabled],[data-disabled] *) [data-part-match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui-highlight] [data-part-match],[data-ui-highlight]:is([data-disabled],[data-disabled] *) [data-part-match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui-highlight] [data-part-match][data-current]{background-color:Highlight;color:HighlightText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenu, decorators: [{
             type: Component,
@@ -569,15 +580,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     <ng-template #layer>
       <div
         data-ui="menu"
+        data-ui-menu=""
         data-part="root"
+        data-part-root=""
         [attr.data-align]="resolvedAlign()"
         [attr.data-size]="resolvedSize()"
+        [attr.data-width]="resolvedWidth()"
         [attr.data-open]="isOpen() ? '' : null"
         [attr.inert]="isOpen() ? null : ''"
       >
         <div
           #surface
           data-part="content"
+          data-part-content=""
           role="menu"
           tabindex="-1"
           [id]="contentId"
@@ -592,8 +607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
       </div>
     </ng-template>
-  `, styles: ["@layer slotted.components{[data-ui=menu]{--_gap: var(--slotted-menu-gap, var(--slotted-space-2, .25rem));--_surface: var(--slotted-menu-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-menu-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-menu-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-menu-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-menu-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-menu-shadow, var(--slotted-shadow-md));--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-menu-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_accent: var(--_text);--_inset-block: var(--slotted-menu-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-menu-padding-inline, var(--slotted-space-2, .25rem));--_item-padding: var(--slotted-control-padding-inline-md, .8125rem);--_item-inset: calc(var(--_item-padding) - var(--_inset-inline));--_item-height: var(--slotted-control-height-md, 34px);--_item-radius: var(--slotted-menu-item-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_measure: var(--slotted-menu-measure, 16rem);--_min-measure: min( var(--slotted-menu-min-measure, 12rem), var(--slotted-positioner-available-width, 100vw) );position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--_min-measure);padding-block:var(--_gap);padding-inline:0;pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=menu][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui=menu][data-side=left]{translate:var(--_enter-distance) 0}[data-ui=menu]:is([data-side=left],[data-side=right]){padding-block:0;padding-inline:var(--_gap)}[data-ui=menu][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=menu][data-open][data-positioned]{animation:slotted-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=menu][data-open][data-positioned][data-side=top]{animation-name:slotted-menu-enter-up}[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-enter-from-start}[data-ui=menu][data-open][data-positioned][data-side=left]{animation-name:slotted-menu-enter-from-end}@keyframes slotted-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-menu-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-menu-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-menu-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=menu],[data-ui=menu][data-side=top],[data-ui=menu][data-side=left],[data-ui=menu][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu][data-open][data-positioned],[data-ui=menu][data-open][data-positioned][data-side=top],[data-ui=menu][data-open][data-positioned][data-side=left],[data-ui=menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-fade}}[data-ui=menu][data-detached]{visibility:hidden}[data-ui=menu][data-size=sm]{--_item-padding: var(--slotted-control-padding-inline-sm, .625rem);--_item-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem);--_measure: var(--slotted-menu-measure-sm, 14rem)}[data-ui=menu][data-size=lg]{--_item-padding: var(--slotted-control-padding-inline-lg, 1rem);--_item-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem);--_measure: var(--slotted-menu-measure-lg, 20rem)}[data-ui=menu]>[data-part=content]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto auto;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);pointer-events:auto}[data-ui=menu]>[data-part=content]:focus-visible{outline:none}[data-ui=menu] [data-part=group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui=menu] [data-part=group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--_secondary-leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]{align-items:center;column-gap:var(--slotted-space-5, .75rem);display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);line-height:var(--_leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui=menu] [data-part=header]>:not([data-part=label],[data-part=description]){grid-column:1;grid-row:1 / span 2}[data-ui=menu] [data-part=header]>[data-part=label]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=menu] [data-part=item]{appearance:none;background:transparent;border:0;border-radius:var(--_item-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1 / -1;grid-template-columns:subgrid;align-content:center;line-height:var(--_leading);min-block-size:var(--_item-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset);row-gap:var(--slotted-space-1, .125rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=menu] [data-part=item]:focus{background-color:var(--_highlight);color:var(--_accent)}[data-ui=menu] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=menu] [data-part=item]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui=menu] [data-part=item][data-open]{background-color:var(--_highlight)}[data-ui=menu] [data-part=item][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:var(--_highlight);color:var(--slotted-disabled-foreground, #64748b)}[data-ui=menu] :is([data-part=indicator],[data-part=icon]),[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{block-size:1lh}[data-ui=menu] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap);opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=menu] [data-part=item][data-checked]>[data-part=indicator]{opacity:1;scale:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui=menu] [data-part=item][role=menuitemradio]>[data-part=indicator]{--slotted-icon-size: calc(var(--_icon-size) * .7)}[data-ui=menu] [data-part=icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui=menu] [data-part=icon]>*{font-size:var(--_icon-size)}[data-ui=menu] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow-wrap:anywhere}[data-ui=menu] [data-part=item][data-disabled]>[data-part=description]{color:inherit}[data-ui=menu] [data-part=meta]{align-items:center;color:var(--_muted);column-gap:var(--slotted-space-2, .25rem);display:flex;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=shortcut]{color:var(--_muted);grid-column:4;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui=menu] [data-part=item][data-disabled]>:is([data-part=shortcut],[data-part=meta]),[data-ui=menu] [data-part=item][data-disabled][aria-haspopup=menu]>[data-ui=icon]{color:inherit}[data-ui=menu] [data-part=item][aria-haspopup=menu]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1;justify-self:end;line-height:inherit;margin-inline-start:var(--_column-gap);color:var(--_muted)}[data-ui=menu] [data-part=separator]{background-color:var(--slotted-menu-separator-color, var(--_border-color));block-size:var(--_border-width);border:0;grid-column:1 / -1;margin-block:var(--slotted-space-2, .25rem);margin-inline:0}[data-ui=menu] [data-part=empty]{color:var(--_muted);grid-column:1 / -1;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_item-inset);text-align:center}[data-ui=menu]>[data-part=content][data-loading]{cursor:progress}[data-ui=menu] [data-part=item][data-tone=accent]{--_accent: var(--slotted-tone-accent-text);--_highlight: var(--slotted-tone-accent-surface);--_highlight-active: var(--slotted-tone-accent-subtle-active);color:var(--slotted-tone-accent-text)}[data-ui=menu] [data-part=item][data-tone=secondary]{--_accent: var(--slotted-tone-secondary-text);--_highlight: var(--slotted-tone-secondary-surface);--_highlight-active: var(--slotted-tone-secondary-subtle-active);color:var(--slotted-tone-secondary-text)}[data-ui=menu] [data-part=item][data-tone=success]{--_accent: var(--slotted-tone-success-text);--_highlight: var(--slotted-tone-success-surface);--_highlight-active: var(--slotted-tone-success-subtle-active);color:var(--slotted-tone-success-text)}[data-ui=menu] [data-part=item][data-tone=warning]{--_accent: var(--slotted-tone-warning-text);--_highlight: var(--slotted-tone-warning-surface);--_highlight-active: var(--slotted-tone-warning-subtle-active);color:var(--slotted-tone-warning-text)}[data-ui=menu] [data-part=item][data-tone=danger]{--_accent: var(--slotted-tone-danger-text);--_highlight: var(--slotted-tone-danger-surface);--_highlight-active: var(--slotted-tone-danger-subtle-active);color:var(--slotted-tone-danger-text)}[data-ui=menu] [data-part=item][data-tone][data-disabled]{--_accent: var(--slotted-disabled-foreground, #64748b);--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));color:var(--slotted-disabled-foreground, #64748b)}@media(forced-colors:active){[data-ui=menu] [data-part=item]:focus{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=menu] [data-part=item][data-disabled]:focus{background-color:Highlight;color:GrayText}}}\n", "@layer slotted.components{[data-ui=highlight] [data-part=match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui=highlight] [data-part=match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui=highlight] [data-part=match],[data-ui=highlight]:is([data-disabled],[data-disabled] *) [data-part=match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui=highlight] [data-part=match][data-current]{background-color:Highlight;color:HighlightText}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], submenuOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuOpenDelay", required: false }] }], submenuCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuCloseDelay", required: false }] }], typeaheadTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadTimeout", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOutsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePress", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "shift", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], template: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }] } });
+  `, styles: ["@layer slotted.components{[data-ui-menu]{--_gap: var(--slotted-menu-gap, var(--slotted-space-2, .25rem));--_surface: var(--slotted-menu-surface, var(--slotted-surface-raised, #ffffff));--_text: var(--slotted-menu-text, var(--slotted-text, #0f172a));--_muted: var(--slotted-menu-text-muted, var(--slotted-text-muted, #5b6b7f));--_border-color: var(--slotted-menu-border-color, var(--slotted-border-subtle, #e2e8f0));--_border-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-menu-radius, var(--slotted-radius-lg, 8px));--_shadow: var(--slotted-menu-shadow, var(--slotted-shadow-md));--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));--_highlight-active: var( --slotted-menu-highlight-active, var(--slotted-tone-secondary-subtle-active) );--_accent: var(--_text);--_inset-block: var(--slotted-menu-padding-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-menu-padding-inline, var(--slotted-space-2, .25rem));--_item-padding: var(--slotted-control-padding-inline-md, .8125rem);--_item-inset: calc(var(--_item-padding) - var(--_inset-inline));--_item-height: var(--slotted-control-height-md, 34px);--_item-radius: var(--slotted-menu-item-radius, var(--slotted-control-radius));--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_column-gap: var(--slotted-control-gap-md, .5rem);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_measure: var(--slotted-menu-measure, 16rem);--_min-measure: min( var(--slotted-menu-min-measure, 12rem), var(--slotted-positioner-available-width, 100vw) );position:absolute;inset-block-start:0;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));isolation:isolate;box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--_min-measure);padding-block:var(--_gap);padding-inline:0;pointer-events:none;opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-menu][data-side=top]{translate:0 var(--_enter-distance)}[data-ui-menu][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui-menu][data-side=left]{translate:var(--_enter-distance) 0}[data-ui-menu]:is([data-side=left],[data-side=right]){padding-block:0;padding-inline:var(--_gap)}[data-ui-menu][data-open]{opacity:1;translate:0 0;transition:none}[data-ui-menu][data-open][data-positioned]{animation:slotted-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui-menu][data-open][data-positioned][data-side=top]{animation-name:slotted-menu-enter-up}[data-ui-menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-enter-from-start}[data-ui-menu][data-open][data-positioned][data-side=left]{animation-name:slotted-menu-enter-from-end}@keyframes slotted-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-menu-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-menu-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-menu-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui-menu],[data-ui-menu][data-side=top],[data-ui-menu][data-side=left],[data-ui-menu][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-menu][data-open][data-positioned],[data-ui-menu][data-open][data-positioned][data-side=top],[data-ui-menu][data-open][data-positioned][data-side=left],[data-ui-menu][data-open][data-positioned][data-side=right]{animation-name:slotted-menu-fade}}[data-ui-menu][data-detached]{visibility:hidden}[data-ui-menu][data-width=anchor]{max-inline-size:var(--slotted-positioner-available-width, 100vw);min-inline-size:0}[data-ui-menu][data-width=anchor]>[data-part-content]{inline-size:var(--slotted-positioner-anchor-width, auto);max-inline-size:var(--slotted-positioner-available-width, 100vw);min-inline-size:min(var(--slotted-positioner-anchor-width, 0px),var(--slotted-positioner-available-width, 100vw))}[data-ui-menu][data-size=sm]{--_item-padding: var(--slotted-control-padding-inline-sm, .625rem);--_item-height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_secondary-font-size: var(--slotted-font-size-xs, .75rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_column-gap: var(--slotted-control-gap-sm, .375rem);--_measure: var(--slotted-menu-measure-sm, 14rem)}[data-ui-menu][data-size=lg]{--_item-padding: var(--slotted-control-padding-inline-lg, 1rem);--_item-height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_column-gap: var(--slotted-control-gap-lg, .5rem);--_measure: var(--slotted-menu-measure-lg, 20rem)}[data-ui-menu]>[data-part-content]{background:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr) auto auto;max-block-size:calc(var(--slotted-positioner-available-height, 100vh) - 2 * var(--_gap));outline:none;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);pointer-events:auto}[data-ui-menu]>[data-part-content]:focus-visible{outline:none}[data-ui-menu] [data-part-group]{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}[data-ui-menu] [data-part-group-label]{color:var(--_muted);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);grid-column:1 / -1;line-height:var(--_secondary-leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui-menu] [data-part-header]{align-items:center;column-gap:var(--slotted-space-5, .75rem);display:grid;grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);line-height:var(--_leading);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset)}[data-ui-menu] [data-part-header]>:not([data-part-label],[data-part-description]){grid-column:1;grid-row:1 / span 2}[data-ui-menu] [data-part-header]>[data-part-label]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-menu] [data-part-item]{appearance:none;background:transparent;border:0;border-radius:var(--_item-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1 / -1;grid-template-columns:subgrid;align-content:center;line-height:var(--_leading);min-block-size:var(--_item-height);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_item-inset);row-gap:var(--slotted-space-1, .125rem);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui-menu] [data-part-item]:focus{background-color:var(--_highlight);color:var(--_accent)}[data-ui-menu] [data-part-item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui-menu] [data-part-item]:not([data-disabled]):active{background-color:var(--_highlight-active)}[data-ui-menu] [data-part-item][data-open]{background-color:var(--_highlight)}[data-ui-menu] [data-part-item][data-disabled]{color:var(--slotted-disabled-foreground, #64748b);cursor:not-allowed}[data-ui-menu] [data-part-item][data-disabled]:focus{background-color:var(--_highlight);color:var(--slotted-disabled-foreground, #64748b)}[data-ui-menu] :is([data-part-indicator],[data-part-icon]),[data-ui-menu] [data-part-item][aria-haspopup=menu]>[data-ui-icon]{block-size:1lh}[data-ui-menu] [data-part-indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap);opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-menu] [data-part-item][data-checked]>[data-part-indicator]{opacity:1;scale:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}[data-ui-menu] [data-part-item][role=menuitemradio]>[data-part-indicator]{--slotted-icon-size: calc(var(--_icon-size) * .7)}[data-ui-menu] [data-part-icon]{--slotted-icon-size: var(--_icon-size);align-items:center;display:flex;grid-column:1;grid-row:1;inline-size:var(--_icon-size);justify-content:center;justify-self:center;margin-inline-end:var(--_column-gap)}[data-ui-menu] [data-part-icon]>*{font-size:var(--_icon-size)}[data-ui-menu] [data-part-label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere}[data-ui-menu] [data-part-description]{color:var(--_muted);font-size:var(--_secondary-font-size);grid-column:2;grid-row:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow-wrap:anywhere}[data-ui-menu] [data-part-item][data-disabled]>[data-part-description]{color:inherit}[data-ui-menu] [data-part-meta]{align-items:center;color:var(--_muted);column-gap:var(--slotted-space-2, .25rem);display:flex;font-variant-numeric:tabular-nums;grid-column:3;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui-menu] [data-part-shortcut]{color:var(--_muted);grid-column:4;grid-row:1;justify-self:end;margin-inline-start:var(--slotted-space-6, 1rem);white-space:nowrap}[data-ui-menu] [data-part-item][data-disabled]>:is([data-part-shortcut],[data-part-meta]),[data-ui-menu] [data-part-item][data-disabled][aria-haspopup=menu]>[data-ui-icon]{color:inherit}[data-ui-menu] [data-part-item][aria-haspopup=menu]>[data-ui-icon]{--slotted-icon-size: var(--_icon-size);grid-column:4;grid-row:1;justify-self:end;line-height:inherit;margin-inline-start:var(--_column-gap);color:var(--_muted)}[data-ui-menu] [data-part-separator]{background-color:var(--slotted-menu-separator-color, var(--_border-color));block-size:var(--_border-width);border:0;grid-column:1 / -1;margin-block:var(--slotted-space-2, .25rem);margin-inline:0}[data-ui-menu] [data-part-empty]{color:var(--_muted);grid-column:1 / -1;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--_item-inset);text-align:center}[data-ui-menu]>[data-part-content][data-loading]{cursor:progress}[data-ui-menu] [data-part-item][data-tone=accent]{--_accent: var(--slotted-tone-accent-text);--_highlight: var(--slotted-tone-accent-surface);--_highlight-active: var(--slotted-tone-accent-subtle-active);color:var(--slotted-tone-accent-text)}[data-ui-menu] [data-part-item][data-tone=secondary]{--_accent: var(--slotted-tone-secondary-text);--_highlight: var(--slotted-tone-secondary-surface);--_highlight-active: var(--slotted-tone-secondary-subtle-active);color:var(--slotted-tone-secondary-text)}[data-ui-menu] [data-part-item][data-tone=success]{--_accent: var(--slotted-tone-success-text);--_highlight: var(--slotted-tone-success-surface);--_highlight-active: var(--slotted-tone-success-subtle-active);color:var(--slotted-tone-success-text)}[data-ui-menu] [data-part-item][data-tone=warning]{--_accent: var(--slotted-tone-warning-text);--_highlight: var(--slotted-tone-warning-surface);--_highlight-active: var(--slotted-tone-warning-subtle-active);color:var(--slotted-tone-warning-text)}[data-ui-menu] [data-part-item][data-tone=danger]{--_accent: var(--slotted-tone-danger-text);--_highlight: var(--slotted-tone-danger-surface);--_highlight-active: var(--slotted-tone-danger-subtle-active);color:var(--slotted-tone-danger-text)}[data-ui-menu] [data-part-item][data-tone][data-disabled]{--_accent: var(--slotted-disabled-foreground, #64748b);--_highlight: var(--slotted-menu-highlight, var(--slotted-tone-secondary-subtle-hover));color:var(--slotted-disabled-foreground, #64748b)}@media(forced-colors:active){[data-ui-menu] [data-part-item]:focus{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui-menu] [data-part-item][data-disabled]:focus{background-color:Highlight;color:GrayText}}}\n", "@layer slotted.components{[data-ui-highlight] [data-part-match]{background-color:var( --slotted-highlight-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:var(--slotted-radius-none, 0px);color:var(--slotted-highlight-color, var(--slotted-tone-accent-text));font-weight:inherit;letter-spacing:inherit;padding:0;text-decoration-color:var(--slotted-highlight-rule-color, var(--slotted-tone-accent-border));text-decoration-line:underline;text-decoration-thickness:var(--slotted-border-width-thin, 1px);text-underline-offset:var(--slotted-space-1, .125rem)}[data-ui-highlight] [data-part-match][data-current]{background-color:var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));color:var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));text-decoration-line:none}[data-ui-highlight]:is([data-disabled],[data-disabled] *) [data-part-match]{background-color:var(--slotted-highlight-disabled-background, transparent);color:inherit;text-decoration-line:underline}@media(forced-colors:active){[data-ui-highlight] [data-part-match],[data-ui-highlight]:is([data-disabled],[data-disabled] *) [data-part-match]{background-color:Mark;color:MarkText;forced-color-adjust:none}[data-ui-highlight] [data-part-match][data-current]{background-color:Highlight;color:HighlightText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], submenuOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuOpenDelay", required: false }] }], submenuCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuCloseDelay", required: false }] }], typeaheadTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadTimeout", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOutsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePress", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "shift", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], template: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }] } });
 
 /** What ARIA calls each modifier, which is not what a reader sees. */
 const ARIA_MODIFIERS = {
@@ -778,18 +793,18 @@ class SlMenuItem {
             this.menu.closeAll('select', source);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMenuItem, isStandalone: true, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChangeRequest: "checkedChangeRequest", select: "select" }, host: { attributes: { "data-part": "item", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointermove": "onPointerMove()" }, properties: { "attr.role": "role", "attr.type": "isLink ? null : \"button\"", "attr.aria-checked": "role === \"menuitem\" ? null : isChecked()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-describedby": "describedBy() ?? null", "attr.aria-keyshortcuts": "announced()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-checked": "isChecked() ? \"\" : null", "attr.data-text-value": "textValue() ?? null", "attr.data-tone": "tone() ?? null" } }, exportAs: ["slMenuItem"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMenuItem, isStandalone: true, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChangeRequest: "checkedChangeRequest", select: "select" }, host: { attributes: { "data-part": "item", "data-part-item": "", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "pointermove": "onPointerMove()" }, properties: { "attr.role": "role", "attr.type": "isLink ? null : \"button\"", "attr.aria-checked": "role === \"menuitem\" ? null : isChecked()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-describedby": "describedBy() ?? null", "attr.aria-keyshortcuts": "announced()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-checked": "isChecked() ? \"\" : null", "attr.data-text-value": "textValue() ?? null", "attr.data-tone": "tone() ?? null" } }, exportAs: ["slMenuItem"], ngImport: i0, template: `
     @if (role !== 'menuitem') {
-      <span data-part="indicator"
+      <span data-part="indicator" data-part-indicator=""
         ><span slIcon><svg slGlyph [name]="role === 'menuitemradio' ? 'dot' : 'check'"></svg></span
       ></span>
     }
     <ng-content select="[slMenuItemIcon]" />
-    <span data-part="label"><ng-content /></span>
+    <span data-part="label" data-part-label=""><ng-content /></span>
     <ng-content select="[slMenuItemDescription]" />
     <ng-content select="[slMenuItemMeta]" />
     @if (legend(); as printed) {
-      <span data-part="shortcut" aria-hidden="true">{{ printed }}</span>
+      <span data-part="shortcut" data-part-shortcut="" aria-hidden="true">{{ printed }}</span>
     }
     @if (opensSubmenu()) {
       <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
@@ -807,6 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         'data-part': 'item',
+                        'data-part-item': '',
                         tabindex: '-1',
                         '[attr.role]': 'role',
                         '[attr.type]': 'isLink ? null : "button"',
@@ -824,16 +840,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     },
                     template: `
     @if (role !== 'menuitem') {
-      <span data-part="indicator"
+      <span data-part="indicator" data-part-indicator=""
         ><span slIcon><svg slGlyph [name]="role === 'menuitemradio' ? 'dot' : 'check'"></svg></span
       ></span>
     }
     <ng-content select="[slMenuItemIcon]" />
-    <span data-part="label"><ng-content /></span>
+    <span data-part="label" data-part-label=""><ng-content /></span>
     <ng-content select="[slMenuItemDescription]" />
     <ng-content select="[slMenuItemMeta]" />
     @if (legend(); as printed) {
-      <span data-part="shortcut" aria-hidden="true">{{ printed }}</span>
+      <span data-part="shortcut" data-part-shortcut="" aria-hidden="true">{{ printed }}</span>
     }
     @if (opensSubmenu()) {
       <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
@@ -844,14 +860,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** The mark in the item's first column: the consumer's own element. */
 class SlMenuItemIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemIcon, isStandalone: true, selector: "[slMenuItemIcon]", host: { attributes: { "data-part": "icon" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemIcon, isStandalone: true, selector: "[slMenuItemIcon]", host: { attributes: { "data-part": "icon", "data-part-icon": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slMenuItemIcon]',
                     standalone: true,
-                    host: { 'data-part': 'icon' },
+                    host: { 'data-part': 'icon', 'data-part-icon': '' },
                 }]
         }] });
 /**
@@ -868,14 +884,14 @@ class SlMenuItemDescription {
         this.item?.describedBy.set(this.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemDescription, isStandalone: true, selector: "[slMenuItemDescription]", host: { attributes: { "data-part": "description" }, properties: { "attr.id": "id" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemDescription, isStandalone: true, selector: "[slMenuItemDescription]", host: { attributes: { "data-part": "description", "data-part-description": "" }, properties: { "attr.id": "id" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slMenuItemDescription]',
                     standalone: true,
-                    host: { 'data-part': 'description', '[attr.id]': 'id' },
+                    host: { 'data-part': 'description', 'data-part-description': '', '[attr.id]': 'id' },
                 }]
         }], ctorParameters: () => [] });
 /**
@@ -885,14 +901,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class SlMenuItemMeta {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemMeta, isStandalone: true, selector: "[slMenuItemMeta]", host: { attributes: { "data-part": "meta" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuItemMeta, isStandalone: true, selector: "[slMenuItemMeta]", host: { attributes: { "data-part": "meta", "data-part-meta": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuItemMeta, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slMenuItemMeta]',
                     standalone: true,
-                    host: { 'data-part': 'meta' },
+                    host: { 'data-part': 'meta', 'data-part-meta': '' },
                 }]
         }] });
 /**
@@ -914,14 +930,14 @@ class SlMenuHeader {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuHeader, isStandalone: true, selector: "[slMenuHeader]", host: { attributes: { "data-part": "header" }, properties: { "attr.id": "id" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuHeader, isStandalone: true, selector: "[slMenuHeader]", host: { attributes: { "data-part": "header", "data-part-header": "" }, properties: { "attr.id": "id" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slMenuHeader]',
                     standalone: true,
-                    host: { 'data-part': 'header', '[attr.id]': 'id' },
+                    host: { 'data-part': 'header', 'data-part-header': '', '[attr.id]': 'id' },
                 }]
         }], ctorParameters: () => [] });
 /**
@@ -933,9 +949,9 @@ class SlMenuGroup {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     labelId = `sl-menu-group-${Math.random().toString(36).slice(2, 8)}`;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMenuGroup, isStandalone: true, selector: "sl-menu-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "role": "group" }, properties: { "attr.aria-labelledby": "label() === undefined ? null : labelId" } }, exportAs: ["slMenuGroup"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMenuGroup, isStandalone: true, selector: "sl-menu-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "data-part-group": "", "role": "group" }, properties: { "attr.aria-labelledby": "label() === undefined ? null : labelId" } }, exportAs: ["slMenuGroup"], ngImport: i0, template: `
     @if (label(); as words) {
-      <div data-part="group-label" [id]="labelId">{{ words }}</div>
+      <div data-part="group-label" data-part-group-label="" [id]="labelId">{{ words }}</div>
     }
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -950,12 +966,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         'data-part': 'group',
+                        'data-part-group': '',
                         role: 'group',
                         '[attr.aria-labelledby]': 'label() === undefined ? null : labelId',
                     },
                     template: `
     @if (label(); as words) {
-      <div data-part="group-label" [id]="labelId">{{ words }}</div>
+      <div data-part="group-label" data-part-group-label="" [id]="labelId">{{ words }}</div>
     }
     <ng-content />
   `,
@@ -977,7 +994,7 @@ class SlMenuRadioGroup {
             this.value.set(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlMenuRadioGroup, isStandalone: true, selector: "sl-menu-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest" }, host: { attributes: { "data-part": "group", "role": "group" } }, exportAs: ["slMenuRadioGroup"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlMenuRadioGroup, isStandalone: true, selector: "sl-menu-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest" }, host: { attributes: { "data-part": "group", "data-part-group": "", "role": "group" } }, exportAs: ["slMenuRadioGroup"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuRadioGroup, decorators: [{
             type: Component,
@@ -987,34 +1004,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slMenuRadioGroup',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'group', role: 'group' },
+                    host: { 'data-part': 'group', 'data-part-group': '', role: 'group' },
                     template: '<ng-content />',
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }] } });
 /** Not focusable and not interactive, which is what the pattern asks of it. */
 class SlMenuSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuSeparator, isStandalone: true, selector: "hr[slMenuSeparator]", host: { attributes: { "data-part": "separator", "role": "separator", "aria-orientation": "horizontal" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuSeparator, isStandalone: true, selector: "hr[slMenuSeparator]", host: { attributes: { "data-part": "separator", "data-part-separator": "", "role": "separator", "aria-orientation": "horizontal" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: 'hr[slMenuSeparator]',
                     standalone: true,
-                    host: { 'data-part': 'separator', role: 'separator', 'aria-orientation': 'horizontal' },
+                    host: {
+                        'data-part': 'separator',
+                        'data-part-separator': '',
+                        role: 'separator',
+                        'aria-orientation': 'horizontal',
+                    },
                 }]
         }] });
 /** What a menu whose items were all filtered away says instead of nothing. */
 class SlMenuEmpty {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuEmpty, isStandalone: true, selector: "[slMenuEmpty]", host: { attributes: { "data-part": "empty" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMenuEmpty, isStandalone: true, selector: "[slMenuEmpty]", host: { attributes: { "data-part": "empty", "data-part-empty": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMenuEmpty, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slMenuEmpty]',
                     standalone: true,
-                    host: { 'data-part': 'empty' },
+                    host: { 'data-part': 'empty', 'data-part-empty': '' },
                 }]
         }] });
 
@@ -1053,7 +1075,7 @@ class SlMenuTrigger {
            `slMenuItem`'s; only a bar's trigger takes them from here, written once
            because a bar's trigger is the bar's own element. */
         if (this.onBar) {
-            this.element.setAttribute('data-part', 'trigger');
+            writeSelectorKey(this.element, 'part', 'trigger');
             this.element.setAttribute('role', 'menuitem');
         }
         /* The menu is told which control anchors it, and a bar is told which