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

package/fesm2022/slotted-angular-drawer.mjs

@@ -10,6 +10,7 @@ import { createPresence } from '@slotted/core/presence';
 import { createControllable } from '@slotted/core/state';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, model, input, booleanAttribute, output, ElementRef, PLATFORM_ID, DestroyRef, HostAttributeToken, viewChild, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { hostSelectorKey } from '@slotted/core/selector-key';
 import { SlGlyph, SlIcon } from '@slotted/angular/icon';
 
 const FALLBACK = {
@@ -520,9 +521,13 @@ class SlDrawer {
                 const own = inline ? panel.offsetWidth : panel.offsetHeight;
                 this.rest.set(Math.round((own / span) * 1000) / 1000);
             };
-            read();
-            if (typeof ResizeObserver === 'undefined')
+            /* The observer's first report arrives after the layout that placed the
+               panel, so reading there lays nothing out; a read here, as the panel
+               mounts, forced that layout early. */
+            if (typeof ResizeObserver === 'undefined') {
+                read();
                 return;
+            }
             const observer = new ResizeObserver(read);
             observer.observe(panel);
             observer.observe(box);
@@ -768,7 +773,9 @@ class SlDrawer {
       <div
         #layer
         data-ui="drawer"
+        data-ui-drawer=""
         data-part="root"
+        data-part-root=""
         [attr.data-mode]="resolvedMode()"
         [attr.data-side]="resolvedSide()"
         [attr.data-size]="resolvedSize()"
@@ -783,11 +790,12 @@ class SlDrawer {
         [style.--slotted-drawer-extent]="extentLength()"
       >
         @if (showBackdrop()) {
-          <div data-part="backdrop"></div>
+          <div data-part="backdrop" data-part-backdrop=""></div>
         }
         <div
           #panel
           data-part="panel"
+          data-part-panel=""
           [id]="panelId"
           [attr.role]="role()"
           [attr.aria-modal]="resolvedModal() ? 'true' : null"
@@ -799,7 +807,7 @@ class SlDrawer {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=drawer]{--_step: var(--slotted-drawer-extent-md, 24rem);--_extent: var(--slotted-drawer-extent, var(--_step));--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);--_resizer-line: var(--slotted-border-width-thick, 2px);--_radius: var(--slotted-radius-lg, 8px);--_slide: var(--slotted-duration-long) var(--slotted-easing-enter);--_move: var(--slotted-duration-medium) var(--slotted-easing-enter);--_reveal: content-visibility var(--slotted-duration-medium) allow-discrete;box-sizing:border-box;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);color:var(--slotted-drawer-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:var(--_reveal)}[data-ui=drawer]:not([data-open]){--_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);--_move: var(--slotted-duration-medium) var(--slotted-easing-exit)}[data-ui=drawer][data-dragging]{--_move: var(--slotted-duration-instant) var(--slotted-easing-standard)}[data-ui=drawer][data-size=sm]{--_step: var(--slotted-drawer-extent-sm, 18rem);--_padding-inline: var(--slotted-space-6, 1rem)}[data-ui=drawer][data-size=lg]{--_step: var(--slotted-drawer-extent-lg, 30rem)}[data-ui=drawer][data-size=xl]{--_step: var(--slotted-drawer-extent-xl, 40rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_title-font-size: var(--slotted-font-size-xl, 1.125rem)}[data-ui=drawer][data-size=full]{--_step: 100%}[data-ui=drawer][data-mode=overlay]{position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0))}[data-ui=drawer][data-mode=inline]{overflow:clip}[data-ui=drawer][data-mode=inline][data-side=start],[data-ui=drawer][data-mode=inline][data-side=end]{inline-size:0;transition:inline-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-side=top],[data-ui=drawer][data-mode=inline][data-side=bottom]{block-size:0;transition:block-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-open][data-side=start],[data-ui=drawer][data-mode=inline][data-open][data-side=end]{inline-size:var(--_extent);max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]{block-size:var(--_extent);max-block-size:100%}[data-ui=drawer][inert]{content-visibility:hidden;pointer-events:none}[data-ui=drawer]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=drawer][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=drawer]>[data-part=panel]{grid-area:1 / 1;box-sizing:border-box;transition:inline-size var(--_move),block-size var(--_move);position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;min-block-size:0;--_row-padding-inline-start: var(--_padding-inline);--_row-padding-inline-end: var(--_padding-inline);background:var(--slotted-drawer-surface, var(--slotted-surface-raised, Canvas));border-color:var(--slotted-drawer-border-color, var(--slotted-border-subtle, ButtonBorder));border-style:solid;border-width:0;overflow:hidden}[data-ui=drawer][data-mode=overlay]>[data-part=panel]{box-shadow:var(--slotted-shadow-lg);translate:0 0;transition:translate var(--_slide),inline-size var(--_move),block-size var(--_move)}[data-ui=drawer][data-mode=overlay]:not([data-open])>[data-part=panel]{translate:var(--_shift-x, 0) var(--_shift-y, 0)}[data-ui=drawer][data-dragging]>[data-part=panel]{transition:none}[data-ui=drawer][data-dragging][data-mode=overlay]>[data-part=panel]{transition:translate var(--_slide)}[data-ui=drawer][data-dragging][data-mode=inline][data-side=start],[data-ui=drawer][data-dragging][data-mode=inline][data-side=end],[data-ui=drawer][data-dragging][data-mode=inline][data-side=top],[data-ui=drawer][data-dragging][data-mode=inline][data-side=bottom]{transition:var(--_reveal)}@media(prefers-reduced-motion:reduce){[data-ui=drawer][data-mode=overlay]>[data-part=panel]{translate:0 0;transition:inline-size var(--_move),block-size var(--_move)}}[data-ui=drawer][data-side=start]>[data-part=panel],[data-ui=drawer][data-side=end]>[data-part=panel]{align-self:stretch;inline-size:min(var(--_extent),100%);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=drawer][data-side=top]>[data-part=panel],[data-ui=drawer][data-side=bottom]>[data-part=panel]{justify-self:stretch;block-size:min(var(--_extent),100%)}[data-ui=drawer][data-side=start]>[data-part=panel]{justify-self:start;--_shift-x: -100%;--_row-padding-inline-end: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-end-width:var(--_rule-size)}[data-ui=drawer][data-side=end]>[data-part=panel]{justify-self:end;--_shift-x: 100%;--_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-start-width:var(--_rule-size)}[data-ui=drawer][data-side=top]>[data-part=panel]{align-self:start;grid-template-rows:auto minmax(0,1fr) auto auto;--_shift-y: -100%;border-block-end-width:var(--_rule-size);border-end-start-radius:var(--slotted-drawer-radius, var(--_radius));border-end-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]{align-self:end;grid-template-rows:auto auto minmax(0,1fr) auto;--_shift-y: 100%;border-block-start-width:var(--_rule-size);border-start-start-radius:var(--slotted-drawer-radius, var(--_radius));border-start-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=header]{grid-row:2}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]{grid-row:3}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{grid-row:4}[data-ui=drawer][data-mode=overlay][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=overlay][data-side=bottom]>[data-part=panel]{justify-self:center;inline-size:min(100%,var(--slotted-drawer-sheet-inline-size, var(--slotted-drawer-extent-xl, 40rem)));border-inline-width:var(--_rule-size)}[data-ui=drawer][data-size=content]{--_step: auto;--_content-cap: min( var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))), 100% );interpolate-size:allow-keywords}[data-ui=drawer][data-size=content][data-side=start],[data-ui=drawer][data-size=content][data-side=end]{--_step: max-content}[data-ui=drawer][data-size=content][data-side=start]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=end]>[data-part=panel]{inline-size:var(--_extent);max-inline-size:var(--_content-cap)}[data-ui=drawer][data-size=content][data-side=top]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=bottom]>[data-part=panel]{block-size:var(--_extent);max-block-size:var(--_content-cap)}[data-ui=drawer][data-mode=overlay]{padding-block-end:var(--slotted-keyboard-inset, 0px)}[data-ui=drawer][data-undimmed]>[data-part=backdrop]{opacity:0;pointer-events:none}[data-ui=drawer][data-undimmed]{pointer-events:none}[data-ui=drawer][data-undimmed]>[data-part=panel]{pointer-events:auto}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]:last-child{padding-block-end:calc(var(--_padding-block) + env(safe-area-inset-bottom,0px))}[data-ui=drawer][data-side=start]:dir(rtl)>[data-part=panel]{--_shift-x: 100%}[data-ui=drawer][data-side=end]:dir(rtl)>[data-part=panel]{--_shift-x: -100%}[data-ui=drawer][data-size=full]>[data-part=panel]{border-width:0;border-radius:0}[data-ui=drawer][data-mode=inline][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=end]>[data-part=panel]{inline-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=bottom]>[data-part=panel]{block-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-open][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=end]>[data-part=panel]{max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]>[data-part=panel]{max-block-size:100%}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]{display:flex;align-items:center;justify-content:center;gap:min(var(--slotted-space-9, 2rem),12%);background:transparent;touch-action:none;--_rest: var(--slotted-drawer-resizer-line-color, var(--slotted-border-strong, ButtonBorder));--_active: var( --slotted-drawer-resizer-line-active-color, var(--slotted-text-muted, ButtonText) )}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover,[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible,[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]{gap:var(--slotted-space-4, .5rem)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{flex-direction:column}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:before{content:\"\";position:absolute;--_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]:before{inset-block:0;inset-inline:var(--_reach-overhang)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:before{inset-inline:0;inset-block:var(--_reach-overhang)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{position:absolute;inset-block:0;inline-size:var(--_resizer-thickness);cursor:col-resize}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]{inset-inline-end:0}[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{inset-inline-start:0}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{position:relative;block-size:var(--_resizer-thickness);cursor:row-resize}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{grid-row:1}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]{grid-row:4}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex:0 1 min(var(--slotted-space-12, 4rem),20%);min-block-size:0;min-inline-size:0;inline-size:var(--slotted-border-width-thin, 1px);border-radius:var(--slotted-radius-sm, 2px);transition:flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child{background:linear-gradient(to bottom,transparent,var(--_rest))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child{background:linear-gradient(to top,transparent,var(--_rest))}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=line],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=line],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex-basis:100%;background:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{flex: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=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_rest);background-image:radial-gradient(circle at center,currentColor 40%,transparent 42%);background-size:var(--slotted-space-2, .25rem) var(--slotted-space-2, .25rem);inline-size:calc(2 * var(--slotted-space-2, .25rem));block-size:calc(3 * var(--slotted-space-2, .25rem))}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_rest);border-radius:var(--slotted-radius-full, 9999px);block-size:var(--slotted-space-2, .25rem);inline-size:var(--slotted-space-11, 3rem)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=line],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=line]{display:none}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_active)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer][data-dragging][data-side=start]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=end]>[data-part=panel]{will-change:inline-size}[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]{will-change:block-size}[data-ui=drawer]>[data-part=panel]>[data-part=header]{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--_gap);row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end)}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=title]{grid-column:1;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-drawer-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--slotted-drawer-title-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=description]{grid-column:1;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-description-color, var(--slotted-text-muted, GrayText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-drawer-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;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))}@media(pointer:coarse){[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{position:relative}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-drawer-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-drawer-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer]>[data-part=panel]>[data-part=body]{grid-row:2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-body-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=body][data-inset=none]{padding:0}[data-ui=drawer]>[data-part=panel]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=drawer][data-loading]>[data-part=panel]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=drawer]>[data-part=panel]>[data-part=footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);background:var(--slotted-drawer-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{padding-block-end:calc(var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom,0px))}[data-ui=drawer]>[data-part=panel]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}@media(forced-colors:active){[data-ui=drawer]>[data-part=panel]{border-width:var(--slotted-border-width-thick, 2px);border-color:CanvasText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-drawer]{--_step: var(--slotted-drawer-extent-md, 24rem);--_extent: var(--slotted-drawer-extent, var(--_step));--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);--_resizer-line: var(--slotted-border-width-thick, 2px);--_radius: var(--slotted-radius-lg, 8px);--_slide: var(--slotted-duration-long) var(--slotted-easing-enter);--_move: var(--slotted-duration-medium) var(--slotted-easing-enter);--_reveal: content-visibility var(--slotted-duration-medium) allow-discrete;box-sizing:border-box;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);color:var(--slotted-drawer-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:var(--_reveal)}[data-ui-drawer]:not([data-open]){--_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);--_move: var(--slotted-duration-medium) var(--slotted-easing-exit)}[data-ui-drawer][data-dragging]{--_move: var(--slotted-duration-instant) var(--slotted-easing-standard)}[data-ui-drawer][data-size=sm]{--_step: var(--slotted-drawer-extent-sm, 18rem);--_padding-inline: var(--slotted-space-6, 1rem)}[data-ui-drawer][data-size=lg]{--_step: var(--slotted-drawer-extent-lg, 30rem)}[data-ui-drawer][data-size=xl]{--_step: var(--slotted-drawer-extent-xl, 40rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_title-font-size: var(--slotted-font-size-xl, 1.125rem)}[data-ui-drawer][data-size=full]{--_step: 100%}[data-ui-drawer][data-mode=overlay]{position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0))}[data-ui-drawer][data-mode=inline]{overflow:clip}[data-ui-drawer][data-mode=inline][data-side=start],[data-ui-drawer][data-mode=inline][data-side=end]{inline-size:0;transition:inline-size var(--_move),var(--_reveal)}[data-ui-drawer][data-mode=inline][data-side=top],[data-ui-drawer][data-mode=inline][data-side=bottom]{block-size:0;transition:block-size var(--_move),var(--_reveal)}[data-ui-drawer][data-mode=inline][data-open][data-side=start],[data-ui-drawer][data-mode=inline][data-open][data-side=end]{inline-size:var(--_extent);max-inline-size:100%}[data-ui-drawer][data-mode=inline][data-open][data-side=top],[data-ui-drawer][data-mode=inline][data-open][data-side=bottom]{block-size:var(--_extent);max-block-size:100%}[data-ui-drawer][inert]{content-visibility:hidden;pointer-events:none}[data-ui-drawer]>[data-part-backdrop]{grid-area:1 / 1;background:var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-drawer][data-open]>[data-part-backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui-drawer]>[data-part-panel]{grid-area:1 / 1;box-sizing:border-box;transition:inline-size var(--_move),block-size var(--_move);position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;min-block-size:0;--_row-padding-inline-start: var(--_padding-inline);--_row-padding-inline-end: var(--_padding-inline);background:var(--slotted-drawer-surface, var(--slotted-surface-raised, Canvas));border-color:var(--slotted-drawer-border-color, var(--slotted-border-subtle, ButtonBorder));border-style:solid;border-width:0;overflow:hidden}[data-ui-drawer][data-mode=overlay]>[data-part-panel]{box-shadow:var(--slotted-shadow-lg);translate:0 0;transition:translate var(--_slide),inline-size var(--_move),block-size var(--_move)}[data-ui-drawer][data-mode=overlay]:not([data-open])>[data-part-panel]{translate:var(--_shift-x, 0) var(--_shift-y, 0)}[data-ui-drawer][data-dragging]>[data-part-panel]{transition:none}[data-ui-drawer][data-dragging][data-mode=overlay]>[data-part-panel]{transition:translate var(--_slide)}[data-ui-drawer][data-dragging][data-mode=inline][data-side=start],[data-ui-drawer][data-dragging][data-mode=inline][data-side=end],[data-ui-drawer][data-dragging][data-mode=inline][data-side=top],[data-ui-drawer][data-dragging][data-mode=inline][data-side=bottom]{transition:var(--_reveal)}@media(prefers-reduced-motion:reduce){[data-ui-drawer][data-mode=overlay]>[data-part-panel]{translate:0 0;transition:inline-size var(--_move),block-size var(--_move)}}[data-ui-drawer][data-side=start]>[data-part-panel],[data-ui-drawer][data-side=end]>[data-part-panel]{align-self:stretch;inline-size:min(var(--_extent),100%);grid-template-rows:auto minmax(0,1fr) auto}[data-ui-drawer][data-side=top]>[data-part-panel],[data-ui-drawer][data-side=bottom]>[data-part-panel]{justify-self:stretch;block-size:min(var(--_extent),100%)}[data-ui-drawer][data-side=start]>[data-part-panel]{justify-self:start;--_shift-x: -100%;--_row-padding-inline-end: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-end-width:var(--_rule-size)}[data-ui-drawer][data-side=end]>[data-part-panel]{justify-self:end;--_shift-x: 100%;--_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-start-width:var(--_rule-size)}[data-ui-drawer][data-side=top]>[data-part-panel]{align-self:start;grid-template-rows:auto minmax(0,1fr) auto auto;--_shift-y: -100%;border-block-end-width:var(--_rule-size);border-end-start-radius:var(--slotted-drawer-radius, var(--_radius));border-end-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui-drawer][data-side=bottom]>[data-part-panel]{align-self:end;grid-template-rows:auto auto minmax(0,1fr) auto;--_shift-y: 100%;border-block-start-width:var(--_rule-size);border-start-start-radius:var(--slotted-drawer-radius, var(--_radius));border-start-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-header]{grid-row:2}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-body]{grid-row:3}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-footer]{grid-row:4}[data-ui-drawer][data-mode=overlay][data-side=top]>[data-part-panel],[data-ui-drawer][data-mode=overlay][data-side=bottom]>[data-part-panel]{justify-self:center;inline-size:min(100%,var(--slotted-drawer-sheet-inline-size, var(--slotted-drawer-extent-xl, 40rem)));border-inline-width:var(--_rule-size)}[data-ui-drawer][data-size=content]{--_step: auto;--_content-cap: min( var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))), 100% );interpolate-size:allow-keywords}[data-ui-drawer][data-size=content][data-side=start],[data-ui-drawer][data-size=content][data-side=end]{--_step: max-content}[data-ui-drawer][data-size=content][data-side=start]>[data-part-panel],[data-ui-drawer][data-size=content][data-side=end]>[data-part-panel]{inline-size:var(--_extent);max-inline-size:var(--_content-cap)}[data-ui-drawer][data-size=content][data-side=top]>[data-part-panel],[data-ui-drawer][data-size=content][data-side=bottom]>[data-part-panel]{block-size:var(--_extent);max-block-size:var(--_content-cap)}[data-ui-drawer][data-mode=overlay]{padding-block-end:var(--slotted-keyboard-inset, 0px)}[data-ui-drawer][data-undimmed]>[data-part-backdrop]{opacity:0;pointer-events:none}[data-ui-drawer][data-undimmed]{pointer-events:none}[data-ui-drawer][data-undimmed]>[data-part-panel]{pointer-events:auto}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-body]:last-child{padding-block-end:calc(var(--_padding-block) + env(safe-area-inset-bottom,0px))}[data-ui-drawer][data-side=start]:dir(rtl)>[data-part-panel]{--_shift-x: 100%}[data-ui-drawer][data-side=end]:dir(rtl)>[data-part-panel]{--_shift-x: -100%}[data-ui-drawer][data-size=full]>[data-part-panel]{border-width:0;border-radius:0}[data-ui-drawer][data-mode=inline][data-side=start]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-side=end]>[data-part-panel]{inline-size:var(--_extent)}[data-ui-drawer][data-mode=inline][data-side=top]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-side=bottom]>[data-part-panel]{block-size:var(--_extent)}[data-ui-drawer][data-mode=inline][data-open][data-side=start]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-open][data-side=end]>[data-part-panel]{max-inline-size:100%}[data-ui-drawer][data-mode=inline][data-open][data-side=top]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-open][data-side=bottom]>[data-part-panel]{max-block-size:100%}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]{display:flex;align-items:center;justify-content:center;gap:min(var(--slotted-space-9, 2rem),12%);background:transparent;touch-action:none;--_rest: var(--slotted-drawer-resizer-line-color, var(--slotted-border-strong, ButtonBorder));--_active: var( --slotted-drawer-resizer-line-active-color, var(--slotted-text-muted, ButtonText) )}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover,[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible,[data-ui-drawer][data-dragging]>[data-part-panel]>[data-part-resizer]{gap:var(--slotted-space-4, .5rem)}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer],[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]{flex-direction:column}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:before{content:\"\";position:absolute;--_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2)}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]:before,[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]:before{inset-block:0;inset-inline:var(--_reach-overhang)}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]:before,[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]:before{inset-inline:0;inset-block:var(--_reach-overhang)}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer],[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]{position:absolute;inset-block:0;inline-size:var(--_resizer-thickness);cursor:col-resize}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]{inset-inline-end:0}[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]{inset-inline-start:0}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]{position:relative;block-size:var(--_resizer-thickness);cursor:row-resize}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]{grid-row:1}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]{grid-row:4}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]>[data-part-line]{flex:0 1 min(var(--slotted-space-12, 4rem),20%);min-block-size:0;min-inline-size:0;inline-size:var(--slotted-border-width-thin, 1px);border-radius:var(--slotted-radius-sm, 2px);transition:flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]>[data-part-line]:first-child,[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]>[data-part-line]:first-child{background:linear-gradient(to bottom,transparent,var(--_rest))}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]>[data-part-line]:last-child,[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]>[data-part-line]:last-child{background:linear-gradient(to top,transparent,var(--_rest))}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-line],[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-line],[data-ui-drawer][data-dragging]>[data-part-panel]>[data-part-resizer]>[data-part-line]{flex-basis:100%;background:var(--_active)}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{flex: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-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]>[data-part-grip],[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{color:var(--_rest);background-image:radial-gradient(circle at center,currentColor 40%,transparent 42%);background-size:var(--slotted-space-2, .25rem) var(--slotted-space-2, .25rem);inline-size:calc(2 * var(--slotted-space-2, .25rem));block-size:calc(3 * var(--slotted-space-2, .25rem))}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]>[data-part-grip],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{background-color:var(--_rest);border-radius:var(--slotted-radius-full, 9999px);block-size:var(--slotted-space-2, .25rem);inline-size:var(--slotted-space-11, 3rem)}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]>[data-part-line],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]>[data-part-line]{display:none}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-grip],[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-grip],[data-ui-drawer][data-dragging]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{color:var(--_active)}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-grip],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-grip],[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-grip],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-grip],[data-ui-drawer][data-dragging][data-side=top]>[data-part-panel]>[data-part-resizer]>[data-part-grip],[data-ui-drawer][data-dragging][data-side=bottom]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{background-color:var(--_active)}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui-drawer][data-dragging][data-side=start]>[data-part-panel],[data-ui-drawer][data-dragging][data-side=end]>[data-part-panel]{will-change:inline-size}[data-ui-drawer][data-dragging][data-side=top]>[data-part-panel],[data-ui-drawer][data-dragging][data-side=bottom]>[data-part-panel]{will-change:block-size}[data-ui-drawer]>[data-part-panel]>[data-part-header]{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--_gap);row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end)}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-title]{grid-column:1;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-drawer-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--slotted-drawer-title-color, var(--slotted-text, CanvasText))}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-description]{grid-column:1;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-description-color, var(--slotted-text-muted, GrayText))}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]{--slotted-icon-size: var(--_icon-size);grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-drawer-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;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))}@media(pointer:coarse){[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]{position:relative}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:not(:disabled):hover{background-color:var( --slotted-drawer-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:not(:disabled):active{background-color:var( --slotted-drawer-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui-drawer]>[data-part-panel]>[data-part-body]{grid-row:2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-body-color, var(--slotted-text, CanvasText))}[data-ui-drawer]>[data-part-panel]>[data-part-body][data-inset=none]{padding:0}[data-ui-drawer]>[data-part-panel]>[data-part-body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui-drawer][data-loading]>[data-part-panel]>[data-part-body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui-drawer]>[data-part-panel]>[data-part-footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);background:var(--slotted-drawer-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-footer]{padding-block-end:calc(var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom,0px))}[data-ui-drawer]>[data-part-panel]>[data-part-footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}@media(forced-colors:active){[data-ui-drawer]>[data-part-panel]{border-width:var(--slotted-border-width-thick, 2px);border-color:CanvasText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawer, decorators: [{
             type: Component,
@@ -808,7 +816,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <div
         #layer
         data-ui="drawer"
+        data-ui-drawer=""
         data-part="root"
+        data-part-root=""
         [attr.data-mode]="resolvedMode()"
         [attr.data-side]="resolvedSide()"
         [attr.data-size]="resolvedSize()"
@@ -823,11 +833,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         [style.--slotted-drawer-extent]="extentLength()"
       >
         @if (showBackdrop()) {
-          <div data-part="backdrop"></div>
+          <div data-part="backdrop" data-part-backdrop=""></div>
         }
         <div
           #panel
           data-part="panel"
+          data-part-panel=""
           [id]="panelId"
           [attr.role]="role()"
           [attr.aria-modal]="resolvedModal() ? 'true' : null"
@@ -839,7 +850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
       </div>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, styles: ["@layer slotted.components{[data-ui=drawer]{--_step: var(--slotted-drawer-extent-md, 24rem);--_extent: var(--slotted-drawer-extent, var(--_step));--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);--_resizer-line: var(--slotted-border-width-thick, 2px);--_radius: var(--slotted-radius-lg, 8px);--_slide: var(--slotted-duration-long) var(--slotted-easing-enter);--_move: var(--slotted-duration-medium) var(--slotted-easing-enter);--_reveal: content-visibility var(--slotted-duration-medium) allow-discrete;box-sizing:border-box;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);color:var(--slotted-drawer-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:var(--_reveal)}[data-ui=drawer]:not([data-open]){--_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);--_move: var(--slotted-duration-medium) var(--slotted-easing-exit)}[data-ui=drawer][data-dragging]{--_move: var(--slotted-duration-instant) var(--slotted-easing-standard)}[data-ui=drawer][data-size=sm]{--_step: var(--slotted-drawer-extent-sm, 18rem);--_padding-inline: var(--slotted-space-6, 1rem)}[data-ui=drawer][data-size=lg]{--_step: var(--slotted-drawer-extent-lg, 30rem)}[data-ui=drawer][data-size=xl]{--_step: var(--slotted-drawer-extent-xl, 40rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_title-font-size: var(--slotted-font-size-xl, 1.125rem)}[data-ui=drawer][data-size=full]{--_step: 100%}[data-ui=drawer][data-mode=overlay]{position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0))}[data-ui=drawer][data-mode=inline]{overflow:clip}[data-ui=drawer][data-mode=inline][data-side=start],[data-ui=drawer][data-mode=inline][data-side=end]{inline-size:0;transition:inline-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-side=top],[data-ui=drawer][data-mode=inline][data-side=bottom]{block-size:0;transition:block-size var(--_move),var(--_reveal)}[data-ui=drawer][data-mode=inline][data-open][data-side=start],[data-ui=drawer][data-mode=inline][data-open][data-side=end]{inline-size:var(--_extent);max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]{block-size:var(--_extent);max-block-size:100%}[data-ui=drawer][inert]{content-visibility:hidden;pointer-events:none}[data-ui=drawer]>[data-part=backdrop]{grid-area:1 / 1;background:var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=drawer][data-open]>[data-part=backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui=drawer]>[data-part=panel]{grid-area:1 / 1;box-sizing:border-box;transition:inline-size var(--_move),block-size var(--_move);position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;min-block-size:0;--_row-padding-inline-start: var(--_padding-inline);--_row-padding-inline-end: var(--_padding-inline);background:var(--slotted-drawer-surface, var(--slotted-surface-raised, Canvas));border-color:var(--slotted-drawer-border-color, var(--slotted-border-subtle, ButtonBorder));border-style:solid;border-width:0;overflow:hidden}[data-ui=drawer][data-mode=overlay]>[data-part=panel]{box-shadow:var(--slotted-shadow-lg);translate:0 0;transition:translate var(--_slide),inline-size var(--_move),block-size var(--_move)}[data-ui=drawer][data-mode=overlay]:not([data-open])>[data-part=panel]{translate:var(--_shift-x, 0) var(--_shift-y, 0)}[data-ui=drawer][data-dragging]>[data-part=panel]{transition:none}[data-ui=drawer][data-dragging][data-mode=overlay]>[data-part=panel]{transition:translate var(--_slide)}[data-ui=drawer][data-dragging][data-mode=inline][data-side=start],[data-ui=drawer][data-dragging][data-mode=inline][data-side=end],[data-ui=drawer][data-dragging][data-mode=inline][data-side=top],[data-ui=drawer][data-dragging][data-mode=inline][data-side=bottom]{transition:var(--_reveal)}@media(prefers-reduced-motion:reduce){[data-ui=drawer][data-mode=overlay]>[data-part=panel]{translate:0 0;transition:inline-size var(--_move),block-size var(--_move)}}[data-ui=drawer][data-side=start]>[data-part=panel],[data-ui=drawer][data-side=end]>[data-part=panel]{align-self:stretch;inline-size:min(var(--_extent),100%);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=drawer][data-side=top]>[data-part=panel],[data-ui=drawer][data-side=bottom]>[data-part=panel]{justify-self:stretch;block-size:min(var(--_extent),100%)}[data-ui=drawer][data-side=start]>[data-part=panel]{justify-self:start;--_shift-x: -100%;--_row-padding-inline-end: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-end-width:var(--_rule-size)}[data-ui=drawer][data-side=end]>[data-part=panel]{justify-self:end;--_shift-x: 100%;--_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-start-width:var(--_rule-size)}[data-ui=drawer][data-side=top]>[data-part=panel]{align-self:start;grid-template-rows:auto minmax(0,1fr) auto auto;--_shift-y: -100%;border-block-end-width:var(--_rule-size);border-end-start-radius:var(--slotted-drawer-radius, var(--_radius));border-end-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]{align-self:end;grid-template-rows:auto auto minmax(0,1fr) auto;--_shift-y: 100%;border-block-start-width:var(--_rule-size);border-start-start-radius:var(--slotted-drawer-radius, var(--_radius));border-start-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=header]{grid-row:2}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]{grid-row:3}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{grid-row:4}[data-ui=drawer][data-mode=overlay][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=overlay][data-side=bottom]>[data-part=panel]{justify-self:center;inline-size:min(100%,var(--slotted-drawer-sheet-inline-size, var(--slotted-drawer-extent-xl, 40rem)));border-inline-width:var(--_rule-size)}[data-ui=drawer][data-size=content]{--_step: auto;--_content-cap: min( var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))), 100% );interpolate-size:allow-keywords}[data-ui=drawer][data-size=content][data-side=start],[data-ui=drawer][data-size=content][data-side=end]{--_step: max-content}[data-ui=drawer][data-size=content][data-side=start]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=end]>[data-part=panel]{inline-size:var(--_extent);max-inline-size:var(--_content-cap)}[data-ui=drawer][data-size=content][data-side=top]>[data-part=panel],[data-ui=drawer][data-size=content][data-side=bottom]>[data-part=panel]{block-size:var(--_extent);max-block-size:var(--_content-cap)}[data-ui=drawer][data-mode=overlay]{padding-block-end:var(--slotted-keyboard-inset, 0px)}[data-ui=drawer][data-undimmed]>[data-part=backdrop]{opacity:0;pointer-events:none}[data-ui=drawer][data-undimmed]{pointer-events:none}[data-ui=drawer][data-undimmed]>[data-part=panel]{pointer-events:auto}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=body]:last-child{padding-block-end:calc(var(--_padding-block) + env(safe-area-inset-bottom,0px))}[data-ui=drawer][data-side=start]:dir(rtl)>[data-part=panel]{--_shift-x: 100%}[data-ui=drawer][data-side=end]:dir(rtl)>[data-part=panel]{--_shift-x: -100%}[data-ui=drawer][data-size=full]>[data-part=panel]{border-width:0;border-radius:0}[data-ui=drawer][data-mode=inline][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=end]>[data-part=panel]{inline-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-side=bottom]>[data-part=panel]{block-size:var(--_extent)}[data-ui=drawer][data-mode=inline][data-open][data-side=start]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=end]>[data-part=panel]{max-inline-size:100%}[data-ui=drawer][data-mode=inline][data-open][data-side=top]>[data-part=panel],[data-ui=drawer][data-mode=inline][data-open][data-side=bottom]>[data-part=panel]{max-block-size:100%}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]{display:flex;align-items:center;justify-content:center;gap:min(var(--slotted-space-9, 2rem),12%);background:transparent;touch-action:none;--_rest: var(--slotted-drawer-resizer-line-color, var(--slotted-border-strong, ButtonBorder));--_active: var( --slotted-drawer-resizer-line-active-color, var(--slotted-text-muted, ButtonText) )}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover,[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible,[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]{gap:var(--slotted-space-4, .5rem)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{flex-direction:column}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:before{content:\"\";position:absolute;--_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]:before{inset-block:0;inset-inline:var(--_reach-overhang)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:before,[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:before{inset-inline:0;inset-block:var(--_reach-overhang)}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{position:absolute;inset-block:0;inline-size:var(--_resizer-thickness);cursor:col-resize}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]{inset-inline-end:0}[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]{inset-inline-start:0}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{position:relative;block-size:var(--_resizer-thickness);cursor:row-resize}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]{grid-row:1}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]{grid-row:4}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex:0 1 min(var(--slotted-space-12, 4rem),20%);min-block-size:0;min-inline-size:0;inline-size:var(--slotted-border-width-thin, 1px);border-radius:var(--slotted-radius-sm, 2px);transition:flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:first-child{background:linear-gradient(to bottom,transparent,var(--_rest))}[data-ui=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child,[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=line]:last-child{background:linear-gradient(to top,transparent,var(--_rest))}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=line],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=line],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=line]{flex-basis:100%;background:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{flex: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=drawer][data-side=start]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=end]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_rest);background-image:radial-gradient(circle at center,currentColor 40%,transparent 42%);background-size:var(--slotted-space-2, .25rem) var(--slotted-space-2, .25rem);inline-size:calc(2 * var(--slotted-space-2, .25rem));block-size:calc(3 * var(--slotted-space-2, .25rem))}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_rest);border-radius:var(--slotted-radius-full, 9999px);block-size:var(--slotted-space-2, .25rem);inline-size:var(--slotted-space-11, 3rem)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=line],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=line]{display:none}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{color:var(--_active)}[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):hover>[data-part=grip],[data-ui=drawer][data-side=top]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=resizer]:not([data-disabled]):focus-visible>[data-part=grip],[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel]>[data-part=resizer]>[data-part=grip],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]>[data-part=resizer]>[data-part=grip]{background-color:var(--_active)}[data-ui=drawer]>[data-part=panel]>[data-part=resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer][data-dragging][data-side=start]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=end]>[data-part=panel]{will-change:inline-size}[data-ui=drawer][data-dragging][data-side=top]>[data-part=panel],[data-ui=drawer][data-dragging][data-side=bottom]>[data-part=panel]{will-change:block-size}[data-ui=drawer]>[data-part=panel]>[data-part=header]{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--_gap);row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end)}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=title]{grid-column:1;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-drawer-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--slotted-drawer-title-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=description]{grid-column:1;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-description-color, var(--slotted-text-muted, GrayText))}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{--slotted-icon-size: var(--_icon-size);grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-drawer-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;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))}@media(pointer:coarse){[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]{position:relative}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):hover{background-color:var( --slotted-drawer-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:not(:disabled):active{background-color:var( --slotted-drawer-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=drawer]>[data-part=panel]>[data-part=header]>[data-part=close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=drawer]>[data-part=panel]>[data-part=body]{grid-row:2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-body-color, var(--slotted-text, CanvasText))}[data-ui=drawer]>[data-part=panel]>[data-part=body][data-inset=none]{padding:0}[data-ui=drawer]>[data-part=panel]>[data-part=body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=drawer][data-loading]>[data-part=panel]>[data-part=body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui=drawer]>[data-part=panel]>[data-part=footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);background:var(--slotted-drawer-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui=drawer][data-side=bottom]>[data-part=panel]>[data-part=footer]{padding-block-end:calc(var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom,0px))}[data-ui=drawer]>[data-part=panel]>[data-part=footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}@media(forced-colors:active){[data-ui=drawer]>[data-part=panel]{border-width:var(--slotted-border-width-thick, 2px);border-color:CanvasText}}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, styles: ["@layer slotted.components{[data-ui-drawer]{--_step: var(--slotted-drawer-extent-md, 24rem);--_extent: var(--slotted-drawer-extent, var(--_step));--_padding-inline: var(--slotted-space-7, 1.25rem);--_padding-block: var(--slotted-space-6, 1rem);--_gap: var(--slotted-space-5, .75rem);--_rule-size: var(--slotted-border-width-thin, 1px);--_title-font-size: var(--slotted-font-size-lg, 1rem);--_description-font-size: var(--slotted-font-size-md, .875rem);--_body-font-size: var(--slotted-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_close-size: max( var(--slotted-target-min, 24px), min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);--_resizer-line: var(--slotted-border-width-thick, 2px);--_radius: var(--slotted-radius-lg, 8px);--_slide: var(--slotted-duration-long) var(--slotted-easing-enter);--_move: var(--slotted-duration-medium) var(--slotted-easing-enter);--_reveal: content-visibility var(--slotted-duration-medium) allow-discrete;box-sizing:border-box;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);color:var(--slotted-drawer-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, var(--slotted-font-family-sans));content-visibility:visible;transition:var(--_reveal)}[data-ui-drawer]:not([data-open]){--_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);--_move: var(--slotted-duration-medium) var(--slotted-easing-exit)}[data-ui-drawer][data-dragging]{--_move: var(--slotted-duration-instant) var(--slotted-easing-standard)}[data-ui-drawer][data-size=sm]{--_step: var(--slotted-drawer-extent-sm, 18rem);--_padding-inline: var(--slotted-space-6, 1rem)}[data-ui-drawer][data-size=lg]{--_step: var(--slotted-drawer-extent-lg, 30rem)}[data-ui-drawer][data-size=xl]{--_step: var(--slotted-drawer-extent-xl, 40rem);--_padding-inline: var(--slotted-space-8, 1.5rem);--_title-font-size: var(--slotted-font-size-xl, 1.125rem)}[data-ui-drawer][data-size=full]{--_step: 100%}[data-ui-drawer][data-mode=overlay]{position:fixed;inset:0;z-index:calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0))}[data-ui-drawer][data-mode=inline]{overflow:clip}[data-ui-drawer][data-mode=inline][data-side=start],[data-ui-drawer][data-mode=inline][data-side=end]{inline-size:0;transition:inline-size var(--_move),var(--_reveal)}[data-ui-drawer][data-mode=inline][data-side=top],[data-ui-drawer][data-mode=inline][data-side=bottom]{block-size:0;transition:block-size var(--_move),var(--_reveal)}[data-ui-drawer][data-mode=inline][data-open][data-side=start],[data-ui-drawer][data-mode=inline][data-open][data-side=end]{inline-size:var(--_extent);max-inline-size:100%}[data-ui-drawer][data-mode=inline][data-open][data-side=top],[data-ui-drawer][data-mode=inline][data-open][data-side=bottom]{block-size:var(--_extent);max-block-size:100%}[data-ui-drawer][inert]{content-visibility:hidden;pointer-events:none}[data-ui-drawer]>[data-part-backdrop]{grid-area:1 / 1;background:var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-drawer][data-open]>[data-part-backdrop]{opacity:1;transition:opacity var(--slotted-duration-long) var(--slotted-easing-standard)}[data-ui-drawer]>[data-part-panel]{grid-area:1 / 1;box-sizing:border-box;transition:inline-size var(--_move),block-size var(--_move);position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;min-block-size:0;--_row-padding-inline-start: var(--_padding-inline);--_row-padding-inline-end: var(--_padding-inline);background:var(--slotted-drawer-surface, var(--slotted-surface-raised, Canvas));border-color:var(--slotted-drawer-border-color, var(--slotted-border-subtle, ButtonBorder));border-style:solid;border-width:0;overflow:hidden}[data-ui-drawer][data-mode=overlay]>[data-part-panel]{box-shadow:var(--slotted-shadow-lg);translate:0 0;transition:translate var(--_slide),inline-size var(--_move),block-size var(--_move)}[data-ui-drawer][data-mode=overlay]:not([data-open])>[data-part-panel]{translate:var(--_shift-x, 0) var(--_shift-y, 0)}[data-ui-drawer][data-dragging]>[data-part-panel]{transition:none}[data-ui-drawer][data-dragging][data-mode=overlay]>[data-part-panel]{transition:translate var(--_slide)}[data-ui-drawer][data-dragging][data-mode=inline][data-side=start],[data-ui-drawer][data-dragging][data-mode=inline][data-side=end],[data-ui-drawer][data-dragging][data-mode=inline][data-side=top],[data-ui-drawer][data-dragging][data-mode=inline][data-side=bottom]{transition:var(--_reveal)}@media(prefers-reduced-motion:reduce){[data-ui-drawer][data-mode=overlay]>[data-part-panel]{translate:0 0;transition:inline-size var(--_move),block-size var(--_move)}}[data-ui-drawer][data-side=start]>[data-part-panel],[data-ui-drawer][data-side=end]>[data-part-panel]{align-self:stretch;inline-size:min(var(--_extent),100%);grid-template-rows:auto minmax(0,1fr) auto}[data-ui-drawer][data-side=top]>[data-part-panel],[data-ui-drawer][data-side=bottom]>[data-part-panel]{justify-self:stretch;block-size:min(var(--_extent),100%)}[data-ui-drawer][data-side=start]>[data-part-panel]{justify-self:start;--_shift-x: -100%;--_row-padding-inline-end: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-end-width:var(--_rule-size)}[data-ui-drawer][data-side=end]>[data-part-panel]{justify-self:end;--_shift-x: 100%;--_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));border-inline-start-width:var(--_rule-size)}[data-ui-drawer][data-side=top]>[data-part-panel]{align-self:start;grid-template-rows:auto minmax(0,1fr) auto auto;--_shift-y: -100%;border-block-end-width:var(--_rule-size);border-end-start-radius:var(--slotted-drawer-radius, var(--_radius));border-end-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui-drawer][data-side=bottom]>[data-part-panel]{align-self:end;grid-template-rows:auto auto minmax(0,1fr) auto;--_shift-y: 100%;border-block-start-width:var(--_rule-size);border-start-start-radius:var(--slotted-drawer-radius, var(--_radius));border-start-end-radius:var(--slotted-drawer-radius, var(--_radius))}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-header]{grid-row:2}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-body]{grid-row:3}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-footer]{grid-row:4}[data-ui-drawer][data-mode=overlay][data-side=top]>[data-part-panel],[data-ui-drawer][data-mode=overlay][data-side=bottom]>[data-part-panel]{justify-self:center;inline-size:min(100%,var(--slotted-drawer-sheet-inline-size, var(--slotted-drawer-extent-xl, 40rem)));border-inline-width:var(--_rule-size)}[data-ui-drawer][data-size=content]{--_step: auto;--_content-cap: min( var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))), 100% );interpolate-size:allow-keywords}[data-ui-drawer][data-size=content][data-side=start],[data-ui-drawer][data-size=content][data-side=end]{--_step: max-content}[data-ui-drawer][data-size=content][data-side=start]>[data-part-panel],[data-ui-drawer][data-size=content][data-side=end]>[data-part-panel]{inline-size:var(--_extent);max-inline-size:var(--_content-cap)}[data-ui-drawer][data-size=content][data-side=top]>[data-part-panel],[data-ui-drawer][data-size=content][data-side=bottom]>[data-part-panel]{block-size:var(--_extent);max-block-size:var(--_content-cap)}[data-ui-drawer][data-mode=overlay]{padding-block-end:var(--slotted-keyboard-inset, 0px)}[data-ui-drawer][data-undimmed]>[data-part-backdrop]{opacity:0;pointer-events:none}[data-ui-drawer][data-undimmed]{pointer-events:none}[data-ui-drawer][data-undimmed]>[data-part-panel]{pointer-events:auto}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-body]:last-child{padding-block-end:calc(var(--_padding-block) + env(safe-area-inset-bottom,0px))}[data-ui-drawer][data-side=start]:dir(rtl)>[data-part-panel]{--_shift-x: 100%}[data-ui-drawer][data-side=end]:dir(rtl)>[data-part-panel]{--_shift-x: -100%}[data-ui-drawer][data-size=full]>[data-part-panel]{border-width:0;border-radius:0}[data-ui-drawer][data-mode=inline][data-side=start]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-side=end]>[data-part-panel]{inline-size:var(--_extent)}[data-ui-drawer][data-mode=inline][data-side=top]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-side=bottom]>[data-part-panel]{block-size:var(--_extent)}[data-ui-drawer][data-mode=inline][data-open][data-side=start]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-open][data-side=end]>[data-part-panel]{max-inline-size:100%}[data-ui-drawer][data-mode=inline][data-open][data-side=top]>[data-part-panel],[data-ui-drawer][data-mode=inline][data-open][data-side=bottom]>[data-part-panel]{max-block-size:100%}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]{display:flex;align-items:center;justify-content:center;gap:min(var(--slotted-space-9, 2rem),12%);background:transparent;touch-action:none;--_rest: var(--slotted-drawer-resizer-line-color, var(--slotted-border-strong, ButtonBorder));--_active: var( --slotted-drawer-resizer-line-active-color, var(--slotted-text-muted, ButtonText) )}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover,[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible,[data-ui-drawer][data-dragging]>[data-part-panel]>[data-part-resizer]{gap:var(--slotted-space-4, .5rem)}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer],[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]{flex-direction:column}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:before{content:\"\";position:absolute;--_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2)}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]:before,[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]:before{inset-block:0;inset-inline:var(--_reach-overhang)}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]:before,[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]:before{inset-inline:0;inset-block:var(--_reach-overhang)}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer],[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]{position:absolute;inset-block:0;inline-size:var(--_resizer-thickness);cursor:col-resize}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]{inset-inline-end:0}[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]{inset-inline-start:0}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]{position:relative;block-size:var(--_resizer-thickness);cursor:row-resize}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]{grid-row:1}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]{grid-row:4}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]>[data-part-line]{flex:0 1 min(var(--slotted-space-12, 4rem),20%);min-block-size:0;min-inline-size:0;inline-size:var(--slotted-border-width-thin, 1px);border-radius:var(--slotted-radius-sm, 2px);transition:flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard)),background-color var(--slotted-control-transition-duration, var(--slotted-duration-short)) var(--slotted-control-transition-easing, var(--slotted-easing-standard))}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]>[data-part-line]:first-child,[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]>[data-part-line]:first-child{background:linear-gradient(to bottom,transparent,var(--_rest))}[data-ui-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]>[data-part-line]:last-child,[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]>[data-part-line]:last-child{background:linear-gradient(to top,transparent,var(--_rest))}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-line],[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-line],[data-ui-drawer][data-dragging]>[data-part-panel]>[data-part-resizer]>[data-part-line]{flex-basis:100%;background:var(--_active)}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{flex: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-drawer][data-side=start]>[data-part-panel]>[data-part-resizer]>[data-part-grip],[data-ui-drawer][data-side=end]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{color:var(--_rest);background-image:radial-gradient(circle at center,currentColor 40%,transparent 42%);background-size:var(--slotted-space-2, .25rem) var(--slotted-space-2, .25rem);inline-size:calc(2 * var(--slotted-space-2, .25rem));block-size:calc(3 * var(--slotted-space-2, .25rem))}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]>[data-part-grip],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{background-color:var(--_rest);border-radius:var(--slotted-radius-full, 9999px);block-size:var(--slotted-space-2, .25rem);inline-size:var(--slotted-space-11, 3rem)}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]>[data-part-line],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]>[data-part-line]{display:none}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-grip],[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-grip],[data-ui-drawer][data-dragging]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{color:var(--_active)}[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-grip],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):hover>[data-part-grip],[data-ui-drawer][data-side=top]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-grip],[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-resizer]:not([data-disabled]):focus-visible>[data-part-grip],[data-ui-drawer][data-dragging][data-side=top]>[data-part-panel]>[data-part-resizer]>[data-part-grip],[data-ui-drawer][data-dragging][data-side=bottom]>[data-part-panel]>[data-part-resizer]>[data-part-grip]{background-color:var(--_active)}[data-ui-drawer]>[data-part-panel]>[data-part-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui-drawer][data-dragging][data-side=start]>[data-part-panel],[data-ui-drawer][data-dragging][data-side=end]>[data-part-panel]{will-change:inline-size}[data-ui-drawer][data-dragging][data-side=top]>[data-part-panel],[data-ui-drawer][data-dragging][data-side=bottom]>[data-part-panel]{will-change:block-size}[data-ui-drawer]>[data-part-panel]>[data-part-header]{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--_gap);row-gap:var(--slotted-space-2, .25rem);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end)}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-title]{grid-column:1;grid-row:1;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-family:var( --slotted-drawer-title-font-family, var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) ) );font-size:var(--_title-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-lg, 1.5);color:var(--slotted-drawer-title-color, var(--slotted-text, CanvasText))}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-description]{grid-column:1;grid-row:2;margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:var(--_description-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-description-color, var(--slotted-text-muted, GrayText))}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]{--slotted-icon-size: var(--_icon-size);grid-column:2;grid-row:1 / span 2;align-self:start;display:inline-grid;place-items:center;block-size:var(--_close-size);inline-size:var(--_close-size);margin-inline-end:calc(-1 * (var(--_close-size) - var(--_icon-size)) / 2);padding:0;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-drawer-close-color, var(--slotted-text-muted, GrayText));cursor:pointer;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))}@media(pointer:coarse){[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]{position:relative}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:not(:disabled):hover{background-color:var( --slotted-drawer-close-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:not(:disabled):active{background-color:var( --slotted-drawer-close-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-drawer]>[data-part-panel]>[data-part-header]>[data-part-close]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui-drawer]>[data-part-panel]>[data-part-body]{grid-row:2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);font-size:var(--_body-font-size);line-height:var(--slotted-line-height-md, 1.5);color:var(--slotted-drawer-body-color, var(--slotted-text, CanvasText))}[data-ui-drawer]>[data-part-panel]>[data-part-body][data-inset=none]{padding:0}[data-ui-drawer]>[data-part-panel]>[data-part-body]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui-drawer][data-loading]>[data-part-panel]>[data-part-body]{min-block-size:var(--slotted-space-12, 4rem)}[data-ui-drawer]>[data-part-panel]>[data-part-footer]{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--_gap);padding-block:var(--_padding-block);padding-inline:var(--_row-padding-inline-start) var(--_row-padding-inline-end);background:var(--slotted-drawer-footer-surface, var(--slotted-surface-sunken, Canvas))}[data-ui-drawer][data-side=bottom]>[data-part-panel]>[data-part-footer]{padding-block-end:calc(var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom,0px))}[data-ui-drawer]>[data-part-panel]>[data-part-footer]:not(:first-child){border-block-start:var(--_rule-size) solid var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder))}@media(forced-colors:active){[data-ui-drawer]>[data-part-panel]{border-width:var(--slotted-border-width-thick, 2px);border-color:CanvasText}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], extent: [{ type: i0.Input, args: [{ isSignal: true, alias: "extent", required: false }] }, { type: i0.Output, args: ["extentChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", 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 }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], outsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsidePress", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], scrimFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrimFrom", required: false }] }], minExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "minExtent", required: false }] }], maxExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExtent", required: false }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], finalFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "finalFocus", required: false }] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], extentChangeRequest: [{ type: i0.Output, args: ["extentChangeRequest"] }], closed: [{ type: i0.Output, args: ["closed"] }], layerRef: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
@@ -876,9 +887,7 @@ class SlDrawerTrigger {
      * two directives write one attribute, and the family the element is drawn by
      * keeps it, as React's `render` does by spreading the button's props last.
      */
-    part = this.native.hasAttribute('data-ui')
-        ? this.native.getAttribute('data-part')
-        : 'trigger';
+    part = hostSelectorKey(this.native, 'part', this.native.hasAttribute('data-ui') ? this.native.getAttribute('data-part') : 'trigger');
     controls = computed(() => this.drawer().mounted() ? this.drawer().panelId : null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
     haspopup = computed(() => this.drawer().resolvedMode() === 'overlay' ? 'dialog' : null, /* @ts-ignore */
@@ -921,7 +930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], propDecorators: { drawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDrawerTrigger", required: true }] }] } });
 class SlDrawerHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerHeader, isStandalone: true, selector: "[slDrawerHeader]", host: { attributes: { "data-part": "header" } }, exportAs: ["slDrawerHeader"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerHeader, isStandalone: true, selector: "[slDrawerHeader]", host: { attributes: { "data-part": "header", "data-part-header": "" } }, exportAs: ["slDrawerHeader"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerHeader, decorators: [{
             type: Directive,
@@ -929,7 +938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDrawerHeader]',
                     standalone: true,
                     exportAs: 'slDrawerHeader',
-                    host: { 'data-part': 'header' },
+                    host: { 'data-part': 'header', 'data-part-header': '' },
                 }]
         }] });
 /**
@@ -945,7 +954,7 @@ class SlDrawerTitle {
         this.drawer.hasTitle.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerTitle, isStandalone: true, selector: "[slDrawerTitle]", host: { attributes: { "data-part": "title" }, properties: { "id": "drawer.titleId" } }, exportAs: ["slDrawerTitle"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerTitle, isStandalone: true, selector: "[slDrawerTitle]", host: { attributes: { "data-part": "title", "data-part-title": "" }, properties: { "id": "drawer.titleId" } }, exportAs: ["slDrawerTitle"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerTitle, decorators: [{
             type: Directive,
@@ -953,7 +962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDrawerTitle]',
                     standalone: true,
                     exportAs: 'slDrawerTitle',
-                    host: { 'data-part': 'title', '[id]': 'drawer.titleId' },
+                    host: { 'data-part': 'title', 'data-part-title': '', '[id]': 'drawer.titleId' },
                 }]
         }] });
 /** The sentence that says what the drawer is about. */
@@ -966,7 +975,7 @@ class SlDrawerDescription {
         this.drawer.hasDescription.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerDescription, isStandalone: true, selector: "[slDrawerDescription]", host: { attributes: { "data-part": "description" }, properties: { "id": "drawer.descriptionId" } }, exportAs: ["slDrawerDescription"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerDescription, isStandalone: true, selector: "[slDrawerDescription]", host: { attributes: { "data-part": "description", "data-part-description": "" }, properties: { "id": "drawer.descriptionId" } }, exportAs: ["slDrawerDescription"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerDescription, decorators: [{
             type: Directive,
@@ -974,7 +983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDrawerDescription]',
                     standalone: true,
                     exportAs: 'slDrawerDescription',
-                    host: { 'data-part': 'description', '[id]': 'drawer.descriptionId' },
+                    host: { 'data-part': 'description', 'data-part-description': '', '[id]': 'drawer.descriptionId' },
                 }]
         }] });
 /**
@@ -989,7 +998,7 @@ class SlDrawerBody {
     inset = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerBody, isStandalone: true, selector: "[slDrawerBody]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "body" }, properties: { "attr.aria-busy": "drawer.loading() ? 'true' : null", "attr.data-inset": "inset() ?? null" } }, exportAs: ["slDrawerBody"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerBody, isStandalone: true, selector: "[slDrawerBody]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "body", "data-part-body": "" }, properties: { "attr.aria-busy": "drawer.loading() ? 'true' : null", "attr.data-inset": "inset() ?? null" } }, exportAs: ["slDrawerBody"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerBody, decorators: [{
             type: Directive,
@@ -999,6 +1008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slDrawerBody',
                     host: {
                         'data-part': 'body',
+                        'data-part-body': '',
                         '[attr.aria-busy]': "drawer.loading() ? 'true' : null",
                         '[attr.data-inset]': 'inset() ?? null',
                     },
@@ -1006,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
 class SlDrawerFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerFooter, isStandalone: true, selector: "[slDrawerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDrawerFooter"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDrawerFooter, isStandalone: true, selector: "[slDrawerFooter]", host: { attributes: { "data-part": "footer", "data-part-footer": "" } }, exportAs: ["slDrawerFooter"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerFooter, decorators: [{
             type: Directive,
@@ -1014,7 +1024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDrawerFooter]',
                     standalone: true,
                     exportAs: 'slDrawerFooter',
-                    host: { 'data-part': 'footer' },
+                    host: { 'data-part': 'footer', 'data-part-footer': '' },
                 }]
         }] });
 /**
@@ -1037,7 +1047,7 @@ class SlDrawerClose {
         this.drawer.request(false, 'dismiss', this.value(), event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerClose, isStandalone: true, selector: "[slDrawerClose]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "close", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.aria-label": "label()" } }, exportAs: ["slDrawerClose"], ngImport: i0, template: `<ng-content
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerClose, isStandalone: true, selector: "[slDrawerClose]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "close", "data-part-close": "", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.aria-label": "label()" } }, exportAs: ["slDrawerClose"], ngImport: i0, template: `<ng-content
     ><span slIcon><svg slGlyph name="x"></svg></span
   ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1055,6 +1065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'data-part': 'close',
+                        'data-part-close': '',
                         type: 'button',
                         '[attr.aria-label]': 'label()',
                         '(click)': 'press($event)',
@@ -1344,10 +1355,10 @@ class SlDrawerResizer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerResizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerResizer, isStandalone: true, selector: "[slDrawerResizer]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "resizer", "role": "separator", "tabindex": "0" }, listeners: { "pointerdown": "pointerDown($event)", "pointermove": "pointerMove($event)", "pointerup": "endDrag($event)", "lostpointercapture": "endDrag($event)", "keydown": "keyDown($event)", "dblclick": "restore($event)" }, properties: { "attr.aria-controls": "drawer.panelId", "attr.aria-labelledby": "labelledBy()", "attr.aria-orientation": "orientation()", "attr.aria-valuemin": "percent(floor())", "attr.aria-valuemax": "percent(drawer.bounds().max)", "attr.aria-valuenow": "valueNow()" } }, exportAs: ["slDrawerResizer"], ngImport: i0, template: `
-    <span data-part="line" aria-hidden="true"></span>
-    <span data-part="grip" aria-hidden="true"></span>
-    <span data-part="line" aria-hidden="true"></span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDrawerResizer, isStandalone: true, selector: "[slDrawerResizer]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "resizer", "data-part-resizer": "", "role": "separator", "tabindex": "0" }, listeners: { "pointerdown": "pointerDown($event)", "pointermove": "pointerMove($event)", "pointerup": "endDrag($event)", "lostpointercapture": "endDrag($event)", "keydown": "keyDown($event)", "dblclick": "restore($event)" }, properties: { "attr.aria-controls": "drawer.panelId", "attr.aria-labelledby": "labelledBy()", "attr.aria-orientation": "orientation()", "attr.aria-valuemin": "percent(floor())", "attr.aria-valuemax": "percent(drawer.bounds().max)", "attr.aria-valuenow": "valueNow()" } }, exportAs: ["slDrawerResizer"], ngImport: i0, template: `
+    <span data-part="line" data-part-line="" aria-hidden="true"></span>
+    <span data-part="grip" data-part-grip="" aria-hidden="true"></span>
+    <span data-part="line" data-part-line="" aria-hidden="true"></span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDrawerResizer, decorators: [{
@@ -1367,14 +1378,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                      * resort. The selector is unchanged, so no consumer's template moves.
                      */
                     template: `
-    <span data-part="line" aria-hidden="true"></span>
-    <span data-part="grip" aria-hidden="true"></span>
-    <span data-part="line" aria-hidden="true"></span>
+    <span data-part="line" data-part-line="" aria-hidden="true"></span>
+    <span data-part="grip" data-part-grip="" aria-hidden="true"></span>
+    <span data-part="line" data-part-line="" aria-hidden="true"></span>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         'data-part': 'resizer',
+                        'data-part-resizer': '',
                         role: 'separator',
                         tabindex: '0',
                         '[attr.aria-controls]': 'drawer.panelId',