@nordhealth/components 4.25.1 → 4.26.0

package/lib/focus-D8oSvIcN.js

@@ -0,0 +1,2 @@
+function e(o){var t;return(null===(t=o.activeElement)||void 0===t?void 0:t.shadowRoot)?e(o.activeElement.shadowRoot):o.activeElement||void 0}export{e as g};
+//# sourceMappingURL=focus-D8oSvIcN.js.map

package/lib/focus-D8oSvIcN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-D8oSvIcN.js","sources":["../src/common/focus.ts"],"sourcesContent":["/**\n * Gets the currently focused element, taking shadow roots into account.\n */\nexport function getFocusedElement(root: Document | ShadowRoot): Element | undefined {\n  if (root.activeElement?.shadowRoot) {\n    return getFocusedElement(root.activeElement.shadowRoot)\n  }\n\n  return root.activeElement || undefined\n}\n"],"names":["getFocusedElement","root","activeElement","_a","shadowRoot","undefined"],"mappings":"AAGM,SAAUA,EAAkBC,SAChC,OAAwB,UAApBA,EAAKC,qBAAe,IAAAC,OAAA,EAAAA,EAAAC,YACfJ,EAAkBC,EAAKC,cAAcE,YAGvCH,EAAKC,oBAAiBG,CAC/B"}

package/lib/index.js

@@ -1,2 +1,2 @@
-export{default as Avatar}from"./Avatar.js";export{default as Badge}from"./Badge.js";export{default as Banner}from"./Banner.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Button}from"./Button.js";export{C as Calendar}from"./Calendar-B5X2WKNb.js";export{default as Card}from"./Card.js";export{default as Checkbox}from"./Checkbox.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as DatePicker}from"./DatePicker.js";export{default as Divider}from"./Divider.js";export{default as Drawer}from"./Drawer.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownSubmenu}from"./DropdownSubmenu.js";export{default as Dropdown}from"./Dropdown.js";export{default as EmptyState}from"./EmptyState.js";export{default as Fieldset}from"./Fieldset.js";export{default as Footer}from"./Footer.js";export{default as Header}from"./Header.js";export{default as Icon}from"./Icon.js";export{default as Input}from"./Input.js";export{default as Layout}from"./Layout.js";export{NavOpenChangeEvent}from"./NavOpenChangeEvent.js";export{NavResizeEvent}from"./NavResizeEvent.js";export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Message}from"./Message.js";export{default as Modal,ModalCancelEvent,ModalCloseEvent}from"./Modal.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{N as NavToggle}from"./NavToggle-BQxuLW2X.js";export{default as Navigation}from"./Navigation.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as Notification}from"./Notification.js";export{P as Popout}from"./Popout-DtEL0HZ0.js";export{default as ProgressBar}from"./ProgressBar.js";export{default as Progress}from"./Progress.js";export{default as Qrcode}from"./Qrcode.js";export{default as Radio}from"./Radio.js";export{default as Range}from"./Range.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as Select}from"./Select.js";export{default as Skeleton}from"./Skeleton.js";export{default as Spinner}from"./Spinner.js";export{default as Stack}from"./Stack.js";export{default as TabGroup}from"./TabGroup.js";export{default as TabPanel}from"./TabPanel.js";export{default as Tab}from"./Tab.js";export{default as Table}from"./Table.js";export{default as TagGroup}from"./TagGroup.js";export{default as Tag}from"./Tag.js";export{default as Textarea}from"./Textarea.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Toast}from"./Toast.js";export{default as Toggle}from"./Toggle.js";export{default as Tooltip}from"./Tooltip.js";export{default as TopBar}from"./TopBar.js";export{default as Truncate}from"./Truncate.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./observe-D0n0zOfU.js";import"./fsm-Bq5jMQrK.js";import"./Component-DSU3Qp0O.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./dates-CAAlPKZi.js";import"./number-Dg2vCfGd.js";import"./LocalizeController.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./DateSelectEvent.js";import"./events-Bv6wNHwJ.js";import"./interface-checked-small-BQmkNgCI.js";import"lit/directives/if-defined.js";import"./FormAssociatedMixin-B4Qj-CQN.js";import"./FormDataController-OUt5L5uC.js";import"./SizeMixin-CU9cLbLC.js";import"./FormField-BFaVzUjk.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./interface-close-small-CnpAFMO3.js";import"./TextField-B955GOhe.js";import"./date-adapter.js";import"./DropdownItem-Cb-7cHMg.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./Sticky-DqnqENYN.js";import"./ModalController.js";import"./ScrollbarController-BFC67Y2x.js";import"./NotificationMixin-DOUQsx7N.js";import"./positioning-D-K8Mueq.js";import"./LightSlotController-Coyy4nqS.js";
+export{default as AsideDrawer,AsideDrawerWidthChangeEvent}from"./AsideDrawer.js";export{default as AsideTrigger}from"./AsideTrigger.js";export{default as Aside,AsideActiveDrawerChangeEvent,AsideDrawerCloseEvent,AsideDrawerOpenEvent,AsideDrawerResizeEvent,AsideHandleModeChangeEvent}from"./Aside.js";export{default as Avatar}from"./Avatar.js";export{default as Badge}from"./Badge.js";export{default as Banner}from"./Banner.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Button}from"./Button.js";export{C as Calendar}from"./Calendar-ChNZdVRO.js";export{default as Card}from"./Card.js";export{default as Checkbox}from"./Checkbox.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as DatePicker}from"./DatePicker.js";export{default as Divider}from"./Divider.js";export{default as Drawer}from"./Drawer.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownSubmenu}from"./DropdownSubmenu.js";export{default as Dropdown}from"./Dropdown.js";export{default as EmptyState}from"./EmptyState.js";export{default as Fieldset}from"./Fieldset.js";export{default as Footer}from"./Footer.js";export{default as Header}from"./Header.js";export{default as Icon}from"./Icon.js";export{default as Input}from"./Input.js";export{default as Layout}from"./Layout.js";export{NavOpenChangeEvent}from"./NavOpenChangeEvent.js";export{NavResizeEvent}from"./NavResizeEvent.js";export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Message}from"./Message.js";export{default as Modal,ModalCancelEvent,ModalCloseEvent}from"./Modal.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{N as NavToggle}from"./NavToggle-DzKbd-El.js";export{default as Navigation}from"./Navigation.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as Notification}from"./Notification.js";export{P as Popout}from"./Popout-DtEL0HZ0.js";export{default as ProgressBar}from"./ProgressBar.js";export{default as Progress}from"./Progress.js";export{default as Qrcode}from"./Qrcode.js";export{default as Radio}from"./Radio.js";export{default as Range}from"./Range.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as Select}from"./Select.js";export{default as Skeleton}from"./Skeleton.js";export{default as Spinner}from"./Spinner.js";export{default as Stack}from"./Stack.js";export{default as TabGroup}from"./TabGroup.js";export{default as TabPanel}from"./TabPanel.js";export{default as Tab}from"./Tab.js";export{default as Table}from"./Table.js";export{default as TagGroup}from"./TagGroup.js";export{default as Tag}from"./Tag.js";export{default as Textarea}from"./Textarea.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Toast}from"./Toast.js";export{default as Toggle}from"./Toggle.js";export{default as Tooltip}from"./Tooltip.js";export{default as TopBar}from"./TopBar.js";export{default as Truncate}from"./Truncate.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";import"./number-Dg2vCfGd.js";import"./storage-CGZ-YX4-.js";import"./Component-DSU3Qp0O.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/class-map.js";import"./focus-D8oSvIcN.js";import"./fsm-Bq5jMQrK.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./dates-CAAlPKZi.js";import"./LocalizeController.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./DateSelectEvent.js";import"./interface-checked-small-BQmkNgCI.js";import"lit/directives/if-defined.js";import"./FormAssociatedMixin-B4Qj-CQN.js";import"./FormDataController-OUt5L5uC.js";import"./SizeMixin-CU9cLbLC.js";import"./FormField-BFaVzUjk.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./interface-close-small-CnpAFMO3.js";import"./TextField-B955GOhe.js";import"./date-adapter.js";import"./DropdownItem-Cb-7cHMg.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./Sticky-DqnqENYN.js";import"./ModalController.js";import"./ScrollbarController-BFC67Y2x.js";import"./NotificationMixin-DOUQsx7N.js";import"./positioning-D-K8Mueq.js";import"./LightSlotController-Coyy4nqS.js";
 //# sourceMappingURL=index.js.map

package/lib/react.d.ts

@@ -13,6 +13,51 @@ type MapEvents<T> = {
 declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
+      "nord-aside": WCProps<Components.Aside> &
+        React.RefAttributes<Components.Aside> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched when `active-drawer` changes, with `activeDrawer` / `previousDrawer` properties. Fires on every transition including open, switch, and close.
+           */
+          "onactive-drawer-change"?: (event: Event) => void;
+
+          /**
+           * Dispatched when all drawers close (active-drawer went from a non-empty value to empty). Has a `previousDrawer` property.
+           */
+          "ondrawer-close"?: (event: Event) => void;
+
+          /**
+           * Dispatched when transitioning from no active drawer to an active one (i.e. a drawer opened from the closed state). Has an `activeDrawer` property.
+           */
+          "ondrawer-open"?: (event: Event) => void;
+
+          /**
+           * Dispatched when the active drawer's width changes, with `drawerId` (the specific drawer that changed) and `width` properties. Unlike active-drawer-change, this names a single drawer by id rather than describing a transition between drawers.
+           */
+          "ondrawer-resize"?: (event: Event) => void;
+
+          /**
+           * Dispatched when the resize handle's mode changes (`col-resize` / `pointer` / `default`). Mirrors the current value to the host's `data-handle-mode` attribute so consumers can also read it synchronously. Has `mode` / `previous` properties.
+           */
+          "onhandle-mode-change"?: (event: Event) => void;
+        };
+
+      "nord-aside-drawer": WCProps<Components.AsideDrawer> &
+        React.RefAttributes<Components.AsideDrawer> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched when the drawer's width changes. The event exposes `width` (the new applied inline-size in px) and `source` (`'drag' | 'keyboard' | 'attribute' | 'storage'`).
+           */
+          "onwidth-change"?: (event: Event) => void;
+        };
+
+      "nord-aside-trigger": WCProps<Components.AsideTrigger> &
+        React.RefAttributes<Components.AsideTrigger> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {};
+
       "nord-avatar": WCProps<Components.Avatar> &
         React.RefAttributes<Components.Avatar> &
         React.HTMLAttributes<HTMLElement> &
@@ -241,16 +286,6 @@ declare module "react" {
            * Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.
            */
           "onnav-resize"?: (event: Event) => void;
-
-          /**
-           * undefined
-           */
-          onnavopen?: (event: Event) => void;
-
-          /**
-           * undefined
-           */
-          onnavwidth?: (event: Event) => void;
         };
 
       "nord-message": WCProps<Components.Message> &
@@ -271,16 +306,6 @@ declare module "react" {
            * Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.
            */
           onclose?: (event: Event) => void;
-
-          /**
-           * undefined
-           */
-          onclosetrigger?: (event: Event) => void;
-
-          /**
-           * undefined
-           */
-          ontrigger?: (event: Event) => void;
         };
 
       "nord-nav-group": WCProps<Components.NavGroup> &

package/lib/src/aside/Aside.d.ts

@@ -0,0 +1,388 @@
+import { LitElement } from 'lit';
+import { NordEvent } from '../common/events.js';
+import '../tooltip/Tooltip.js';
+export type AsideHandleClick = 'toggle' | 'close' | 'none';
+export type AsideHandleMode = 'col-resize' | 'pointer' | 'default';
+/**
+ * Event dispatched when the aside's active drawer changes — on open,
+ * switch, and close. `activeDrawer` is the new active drawer id (empty
+ * string when all drawers closed); `previousDrawer` is the prior one.
+ */
+export declare class AsideActiveDrawerChangeEvent extends NordEvent {
+    activeDrawer: string;
+    previousDrawer: string;
+    constructor(activeDrawer: string, previousDrawer: string);
+}
+/**
+ * Event dispatched when a drawer opens from the fully-closed state.
+ * `activeDrawer` is the id of the drawer that opened.
+ */
+export declare class AsideDrawerOpenEvent extends NordEvent {
+    activeDrawer: string;
+    constructor(activeDrawer: string);
+}
+/**
+ * Event dispatched when all drawers close. `previousDrawer` is the id of
+ * the drawer that was open before closing.
+ */
+export declare class AsideDrawerCloseEvent extends NordEvent {
+    previousDrawer: string;
+    constructor(previousDrawer: string);
+}
+/**
+ * Event dispatched when the active drawer's width changes. `drawerId`
+ * names the specific drawer whose width changed (unlike the
+ * active-drawer-change event, which describes a transition between
+ * drawers); `width` is the new width in px.
+ */
+export declare class AsideDrawerResizeEvent extends NordEvent {
+    drawerId: string;
+    width: number;
+    constructor(drawerId: string, width: number);
+}
+/**
+ * Event dispatched when the resize handle's interaction mode changes.
+ * `mode` is the new mode; `previous` is the prior mode.
+ */
+export declare class AsideHandleModeChangeEvent extends NordEvent {
+    mode: AsideHandleMode;
+    previous: AsideHandleMode;
+    constructor(mode: AsideHandleMode, previous: AsideHandleMode);
+}
+/**
+ * Container for the right-side rail + drawer pattern in the app shell.
+ *
+ * @status new
+ * @category structure
+ * @slot rail - Free-form content placed in the rail column.
+ * @slot tooltip-divider - Tooltip anchored to the resize handle on hover.
+ * @slot - Default slot for `<nord-aside-drawer>` panels.
+ *
+ * @fires {AsideActiveDrawerChangeEvent} active-drawer-change - Dispatched
+ * when `active-drawer` changes, with `activeDrawer` / `previousDrawer`
+ * properties. Fires on every transition including open, switch, and close.
+ * @fires {AsideDrawerOpenEvent} drawer-open - Dispatched when transitioning
+ * from no active drawer to an active one (i.e. a drawer opened from the
+ * closed state). Has an `activeDrawer` property.
+ * @fires {AsideDrawerCloseEvent} drawer-close - Dispatched when all drawers
+ * close (active-drawer went from a non-empty value to empty). Has a
+ * `previousDrawer` property.
+ * @fires {AsideDrawerResizeEvent} drawer-resize - Dispatched when the active
+ * drawer's width changes, with `drawerId` (the specific drawer that changed)
+ * and `width` properties. Unlike active-drawer-change, this names a single
+ * drawer by id rather than describing a transition between drawers.
+ * @fires {AsideHandleModeChangeEvent} handle-mode-change - Dispatched when
+ * the resize handle's mode changes (`col-resize` / `pointer` / `default`).
+ * Mirrors the current value to the host's `data-handle-mode` attribute so
+ * consumers can also read it synchronously. Has `mode` / `previous` properties.
+ *
+ * @cssprop [--n-aside-rail-width=48px] - Controls the inline-size of the rail column.
+ * @cssprop [--n-aside-rail-gap=var(--n-space-s)] - Controls the gap between the rail and the active drawer.
+ * @cssprop [--n-aside-rail-background-color=var(--n-color-surface)] - Controls the background color of the rail column.
+ * @cssprop [--n-aside-background-color=var(--n-color-background)] - Controls the background color of the aside container (matches the layout's main area by default).
+ * @cssprop [--n-aside-drawers-margin-inline-start=0] - Inline-start margin of the drawers wrapper — creates a gap between the layout's main area and the active drawer card. The resize handle follows this margin so it stays at the drawer's edge.
+ * @cssprop [--n-aside-rail-narrow-block-size=56px] - Block-size of the rail when it renders as a bottom bar at <768px.
+ * @cssprop [--n-aside-rail-narrow-padding-inline=var(--n-space-m)] - Inline padding inside the bottom rail at <768px.
+ * @cssprop [--n-aside-rail-narrow-padding-block=var(--n-space-s)] - Block padding inside the bottom rail at <768px.
+ * @cssprop [--n-aside-rail-narrow-border-block-start-width=1px] - Top border width of the bottom rail at <768px. Set to 0 to remove.
+ * @cssprop [--n-aside-rail-narrow-border-color=var(--n-aside-rail-border-color)] - Top border color of the bottom rail at <768px.
+ * @cssprop [--n-aside-drawer-floating-inset-block-start=var(--n-layout-header-size, 60px)] - Distance from the viewport top to the floating drawer at <768px (clears the layout header).
+ * @cssprop [--n-aside-drawer-floating-inset-inline=0px] - Inline gap between the floating drawer and each viewport edge at <768px. Default 0 = full viewport width.
+ * @cssprop [--n-aside-drawer-slide-duration=300ms] - Duration of the slide-up animation when a drawer opens at <768px.
+ * @cssprop [--n-aside-drawer-slide-easing=cubic-bezier(0.4, 0, 0.2, 1)] - Easing of the slide-up animation when a drawer opens at <768px.
+ * @cssprop [--n-aside-drawer-floating-inset-block-end=calc(rail-size - bottom-offset)] - Distance from the viewport bottom to the floating drawer at <768px. By default the drawer's bottom edge meets the rail's top edge.
+ * @cssprop [--n-aside-drawer-floating-bottom-offset=0] - Subtracts from the floating drawer's `inset-block-end` to let the drawer extend past the rail's top edge (visual overlap). Default 0.
+ * @cssprop [--n-aside-backdrop-background=rgb(0 0 0 / 0.4)] - Background color of the backdrop behind the floating drawer at <768px.
+ * @cssprop [--n-aside-z-backdrop=calc(var(--n-index-top-bar) + 2)] - z-index of the backdrop at <768px (above the sticky footer so it dims the footer too).
+ * @cssprop [--n-aside-z-drawer-floating=calc(var(--n-index-top-bar) + 3)] - z-index of the floating drawer overlay at <768px (above the backdrop).
+ * @cssprop [--n-aside-z-rail-narrow=calc(var(--n-index-top-bar) + 4)] - z-index of the bottom rail at <768px (above the drawer so it remains tappable).
+ */
+export default class Aside extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The id of the currently-active `<nord-aside-drawer>`. Empty string
+     * means no drawer is open. Setting to an unknown / disabled id is a
+     * silent no-op.
+     */
+    activeDrawer: string;
+    /**
+     * Width of the rail column in px.
+     */
+    railWidth: number;
+    /**
+     * Gap between rail and the active drawer panel in px.
+     */
+    railGap: number;
+    /**
+     * Controls what clicking (no-drag) the resize handle does.
+     * Drag-for-resize is independent of this attribute.
+     */
+    handleClick: AsideHandleClick;
+    /**
+     * Session-only memory of the most-recent non-empty `active-drawer`.
+     * Does not persist across page reload. Used by the resize-handle
+     * click in `toggle` mode to reopen the last drawer.
+     * @internal
+     */
+    private lastDrawer;
+    private isDragging;
+    private wideScreen;
+    private hasRailItems;
+    private handleEl?;
+    private resizeTooltipEl?;
+    private tooltipSlot;
+    private readonly resizeTooltipId;
+    private childObserver?;
+    private dragStartX;
+    private hasDragged;
+    render(): import("lit").TemplateResult<1>;
+    private handleRailSlotChange;
+    private handleBackdropClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleMediaChange;
+    /**
+     * Esc closes the active drawer when it's floating (narrow + open).
+     * Wide-screen handling is unchanged — Esc has no effect at desktop.
+     */
+    private handleHostKeyDown;
+    /**
+     * Compute narrow-mode state from viewport + slot + layout context, and
+     * reflect two attributes on the aside host AND its containing layout:
+     *
+     * - `data-narrow-rail-bottom`: rail is a bottom-fixed bar.
+     *   Active when narrow + rail has slotted items.
+     * - `data-narrow-floating-drawer`: drawer is a floating overlay.
+     *   Active when narrow + a drawer is active (regardless of collapse-mode
+     *   or fullscreen — fullscreen is neutralized at narrow).
+     *
+     * Also writes `--n-aside-rail-narrow-inset-block-end` on the host so
+     * the rail lifts above the layout's sticky-footer when one is present.
+     * Suspends `--n-layout-drawer-inline-size` (sets to 0) at narrow so
+     * the layout's main area doesn't reserve drawer space.
+     */
+    /**
+     * Tracks whether THIS aside currently holds a body-scroll lock so we
+     * don't double-lock or leak a lock across disconnect. The lock helper
+     * itself is ref-counted globally; this flag is per-instance bookkeeping.
+     */
+    private holdsBodyScrollLock;
+    private syncNarrowState;
+    /**
+     * Tracks whether the narrow floating-drawer focus trap is currently
+     * engaged, so `syncNarrowState` only enters / exits on a real
+     * transition (mirrors `holdsBodyScrollLock`).
+     */
+    private floatingFocusActive;
+    /**
+     * The element that was focused when the floating drawer opened (the
+     * activating trigger). Focus is returned here on close if it's still
+     * connected.
+     */
+    private floatingFocusReturnElement;
+    /**
+     * The drawer currently held in the floating focus trap. Cached so
+     * `exitFloatingFocus` can clear the contract `floating` flag and the
+     * fallback `tabindex` even after `activeDrawer` has already changed.
+     */
+    private trappedDrawer;
+    /**
+     * Engage the floating-drawer focus trap. SSR-safe: only runs when a
+     * document is available (it's only ever called from `syncNarrowState`,
+     * which runs in client lifecycle, but guard anyway).
+     */
+    private enterFloatingFocus;
+    /**
+     * Release the floating-drawer focus trap and restore focus to the
+     * captured trigger if it's still connected.
+     */
+    private exitFloatingFocus;
+    /**
+     * Trap Tab / Shift+Tab within the floating drawer. Focusable elements
+     * are queried live each keystroke because the drawer's content lives in
+     * slotted light DOM and can change. Wraps from last to first and back.
+     */
+    private handleFloatingFocusKeydown;
+    /**
+     * Whether the currently-focused element lives inside the drawer's
+     * subtree (light DOM or nested shadow roots). Used to redirect focus
+     * back into the trap when Tab would otherwise escape it.
+     */
+    private drawerContainsFocus;
+    /**
+     * Query the drawer's currently-focusable descendants in DOM order.
+     * Slotted light DOM, so a live `querySelectorAll` reflects the latest
+     * content. Filters out disabled / hidden / non-tabbable elements.
+     */
+    private focusableElementsInDrawer;
+    private firstFocusableInDrawer;
+    private isFocusable;
+    private clearNarrowState;
+    /**
+     * Re-broadcast a drawer's local `width-change` as the aside's
+     * `drawer-resize` so consumers only need one listener.
+     */
+    private handleDrawerWidthChange;
+    /**
+     * Cached references to the listened-to layout. Cleared on disconnect.
+     */
+    private syncedLayout?;
+    private get hostLayout();
+    /**
+     * When slotted into `<nord-layout slot="drawer">`, push the aside's
+     * outer width into `--n-layout-drawer-inline-size` so the layout's
+     * drawer slot grows/shrinks to fit. No-op when the aside isn't slotted
+     * into a layout.
+     */
+    private attachLayoutSync;
+    private detachLayoutSync;
+    /**
+     * Push the aside's intended outer width (rail + active drawer + margins
+     * + gap) into `--n-layout-drawer-inline-size` so the layout's drawer
+     * slot wrapper grows/shrinks to fit. Also pins
+     * `--n-layout-drawer-min-inline-size` to the rail's outer width so
+     * narrow viewports (where the layout would otherwise drop the content
+     * margin and overlay the rail) still reserve room for the rail.
+     */
+    private syncLayoutDrawerSize;
+    /**
+     * Surface `rail-width` / `rail-gap` as custom properties so the slotted
+     * rail content can react without the host needing a re-render.
+     */
+    protected applyRailVars(): void;
+    protected handleActiveDrawerChange(previousDrawer: string, activeDrawer: string): void;
+    private findDrawer;
+    private get activeDrawerEl();
+    private updateDrawerVisibility;
+    private observeChildren;
+    /**
+     * Reflect a `data-fullscreen` attribute on the host whenever any
+     * direct `<nord-aside-drawer>` child is currently fullscreen OR
+     * transitioning into/out of fullscreen. CSS selectors target this
+     * attribute to bump the rail above the fullscreen drawer's z-index.
+     */
+    private syncFullscreenAttr;
+    private startDragging;
+    /**
+     * Aside geometry captured at `startDragging` and reused for every
+     * pointermove until `stopDragging`. Cleared on drag end.
+     */
+    private dragGeometry?;
+    private stopDragging;
+    private handlePointerLeave;
+    /**
+     * Follow the pointer vertically so the tooltip floats next to the cursor
+     * along the handle's full height instead of staying anchored to its
+     * midpoint. Mirrors `<nord-layout>`'s handleResizeHoverMove.
+     */
+    private handleResizeHoverMove;
+    private handleDrag;
+    /**
+     * Viewport-x where the drawer's inline-start edge must stop. Unified
+     * rule that drives drag, keyboard, and fullscreen sizing:
+     *
+     * - `collapse-mode="rail"` → `max(0, nav.right)`. Nav stays visible
+     *   as a rail, so the cap is the nav's right edge regardless of
+     *   open/closed state (rail width vs expanded width).
+     * - otherwise → `max(nav.right, DRAWER_VIEWPORT_LEFT_OFFSET)`. The
+     *   nav can translate fully off-screen; the 54px viewport floor only
+     *   kicks in when the nav is actually off-screen — when the nav is
+     *   on-screen and wider than 54, its right edge wins.
+     *
+     * Returns `undefined` when no host layout is present.
+     */
+    private getLeftCapViewportX;
+    /**
+     * Derive the drawer's maximum inline-size from {@link getLeftCapViewportX}
+     * WITHOUT reserving the layout's main-panel floor — the drawer grows
+     * all the way to the layout's main-panel edge. Used by fullscreen sizing.
+     *
+     * Returns `undefined` when no host layout is present.
+     */
+    private drawerWidthAtCap;
+    /**
+     * Derive the drawer's maximum inline-size from {@link getLeftCapViewportX}
+     * WITH the layout's main-panel floor reserved — drag / keyboard resize
+     * can never push the main body below `--n-layout-main-min-inline-size`
+     * (default `0` below 1240px, `600px` above). Used by drag, keyboard, and
+     * the drag-cap reconcile.
+     *
+     * Returns `undefined` when no host layout is present.
+     */
+    private drawerWidthAtCapWithMainFloor;
+    /**
+     * Shared core for {@link drawerWidthAtCap} /
+     * {@link drawerWidthAtCapWithMainFloor}. Subtracts:
+     * - `--n-layout-main-min-inline-size` when `reserveMainMin === true`.
+     *
+     * Reads the aside's geometry (bounding rect + computed style) once;
+     * callers in the same coalesced frame may pass a precomputed
+     * {@link AsideGeometry} to avoid redundant layout reads.
+     *
+     * Returns `undefined` when no host layout is present.
+     */
+    private computeDrawerWidthAtCap;
+    private parseLengthVar;
+    /**
+     * Publishes the layout's left-cap (the maximum the fullscreen drawer
+     * can grow to without overlapping the nav) as
+     * `--_n-aside-drawer-fullscreen-available` on the active drawer.
+     *
+     * The drawer's `:host([fullscreen])` rule uses CSS `min()` to clamp
+     * its own ceiling (`--_n-aside-drawer-fullscreen-max`) by this
+     * available value — so a consumer who sets `max-fullscreen-width`
+     * higher than the layout cap can never overflow past the main-panel
+     * edge. Pure-CSS resolution; this method just publishes the input.
+     *
+     * Coalesced via rAF so a flurry of nav/viewport/slot events collapses
+     * to one write per frame. The host's geometry (bounding rect + computed
+     * style) is read once per frame and threaded into both flushes so a
+     * single frame never re-reads layout.
+     */
+    private scheduleLeftCapReconcile;
+    private leftCapReconcileScheduled;
+    private flushFullscreenAvailable;
+    /**
+     * If the active drawer's docked width now exceeds the drag cap (e.g.
+     * the nav just expanded and the cap tightened), shrink the drawer
+     * down to the new cap. Skipped while a drag is in flight so the
+     * user's interaction stays unbroken; skipped for fullscreen drawers
+     * since fullscreen has its own cap path. Reconciles the same events
+     * `flushFullscreenAvailable` listens to.
+     */
+    private flushDragCap;
+    /**
+     * Remove the published `--_n-aside-drawer-fullscreen-available` var
+     * so the drawer's CSS `min()` rule falls back to `100vw` and the
+     * drawer's own `--_n-aside-drawer-fullscreen-max` becomes the
+     * effective cap. Called when the drawer leaves fullscreen.
+     */
+    private clearFullscreenSizeOverride;
+    private handleLayoutNavChange;
+    private handleViewportResize;
+    private navResizeObserver?;
+    /**
+     * Apply the `handle-click` matrix. Called by `stopDragging` when the
+     * pointer hasn't moved past the drag threshold.
+     */
+    private handleHandleClick;
+    private findFirstTriggerDrawer;
+    private handleKeyboardResize;
+    /**
+     * "Is the handle interactive right now?" — single computation that
+     * drives cursor, tooltip-divider visibility, and `aria-disabled`.
+     * @internal
+     */
+    get handleInteractive(): {
+        enabled: boolean;
+        dragOk: boolean;
+        clickOk: boolean;
+        cursor: 'col-resize' | 'pointer' | 'default';
+        tooltip: boolean;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-aside': Aside;
+    }
+}

package/lib/src/aside-drawer/AsideDrawer.d.ts

@@ -0,0 +1,153 @@
+import { LitElement } from 'lit';
+import { NordEvent } from '../common/events.js';
+export type AsideDrawerWidthSource = 'drag' | 'keyboard' | 'attribute' | 'storage';
+/**
+ * Event dispatched when the drawer's width changes. The `width` property is
+ * the new applied inline-size in px, and `source` is the cause of the change.
+ */
+export declare class AsideDrawerWidthChangeEvent extends NordEvent {
+    width: number;
+    source: AsideDrawerWidthSource;
+    constructor(width: number, source: AsideDrawerWidthSource);
+}
+/**
+ * A drawer panel inside `<nord-aside>`.
+ *
+ * @status new
+ * @category structure
+ * @slot - Default slot. Place arbitrary drawer content here.
+ *
+ * @fires {AsideDrawerWidthChangeEvent} width-change - Dispatched when the
+ * drawer's width changes. The event exposes `width` (the new applied
+ * inline-size in px) and `source` (`'drag' | 'keyboard' | 'attribute' | 'storage'`).
+ */
+export default class AsideDrawer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Initial width in px. The persisted value overrides this on load; if
+     * `default-width` changes between sessions, the persisted value is
+     * re-seeded to the new default.
+     */
+    defaultWidth: number;
+    /**
+     * Resize clamp lower bound in px.
+     */
+    minWidth: number;
+    /**
+     * Resize clamp upper bound in px. Defaults to `Number.MAX_SAFE_INTEGER`
+     * so an unset `max-width` doesn't constrain the drawer — the consumer's
+     * layout (or the rail / nav anchoring) determines the practical ceiling.
+     * Set an explicit value to clamp.
+     *
+     * Not reflected: an unset cap is the `Number.MAX_SAFE_INTEGER` sentinel,
+     * which must never render into the DOM as `max-width="9007199254740991"`.
+     */
+    maxWidth: number;
+    /**
+     * Maximum inline-size in px the drawer can reach when `[fullscreen]`
+     * is active. Independent of `max-width` (which only caps the docked
+     * drag / keyboard resize) — fullscreen typically wants to grow
+     * larger than the docked maximum. Defaults to `Number.MAX_SAFE_INTEGER`
+     * so an unset value lets fullscreen fill all available room (bounded
+     * by the layout's left-cap rule in `<nord-aside>`).
+     *
+     * Not reflected: an unset cap is the `Number.MAX_SAFE_INTEGER` sentinel,
+     * which must never render into the DOM.
+     */
+    maxFullscreenWidth: number;
+    /**
+     * When set, the drawer cannot be opened. Programmatic opens are silently
+     * ignored; if the drawer is already open and this flips on, the drawer
+     * stays open until closed normally.
+     */
+    disabled: boolean;
+    /**
+     * Reflected. Phase 3 wires the overlay sizing internally.
+     */
+    fullscreen: boolean;
+    /**
+     * Set by the parent `<nord-aside>` when the drawer renders as a narrow
+     * floating overlay (rather than a docked region). When `true` the host
+     * becomes an accessible modal dialog (`role="dialog"` + `aria-modal`);
+     * when `false` the host is a `role="region"` landmark. Drive this only
+     * through the parent — it owns the floating-vs-docked decision.
+     */
+    floating: boolean;
+    /**
+     * Currently-applied width in px. Public read-only-ish; use `setWidth()`
+     * (or drive via `default-width` + min/max attrs) rather than poking
+     * this directly.
+     * @internal
+     */
+    width: number;
+    private widthSeeded;
+    private fullscreenSeeded;
+    private fullscreenAnimationCleanup?;
+    private fullscreenAnimation?;
+    private observedWidth;
+    private fullscreenResizeObserver?;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(): void;
+    /**
+     * Animate the fullscreen toggle ONLY when the user flips the attribute.
+     * Not on initial mount, not on drag-resize, not on show/hide, not on
+     * nav-state-driven size changes.
+     *
+     * Uses Web Animations API with explicit `from`/`to` keyframes because
+     * the drawer's `position` flips between `relative` (docked, in flex
+     * flow) and `fixed` (fullscreen, overlay). CSS transitions don't
+     * reliably interpolate `inline-size` across a position-type change.
+     *
+     * `fromWidth` comes from `observedWidth` — the last size painted by
+     * the browser, captured by ResizeObserver BEFORE the consumer flipped
+     * the attribute. Reading `getBoundingClientRect()` here would return
+     * the post-toggle size (Lit has already reflected the attribute), so
+     * the cached value is the only reliable pre-toggle width.
+     *
+     * `toWidth` is measured inside rAF, after Lit has committed the new
+     * attribute and Aside has updated `--_n-aside-drawer-fullscreen-size`.
+     *
+     * Exiting also resets the drawer's docked width to its declared
+     * `default-width` so the user lands at a predictable size after
+     * collapsing.
+     */
+    protected handleFullscreenChange(_oldValue: boolean | undefined, newValue: boolean): void;
+    protected handleBoundsChange(): void;
+    protected handleFloatingChange(): void;
+    /**
+     * Single writer for the host's landmark/dialog role. A floating overlay
+     * is an accessible modal (`role="dialog"` + `aria-modal="true"`); a docked
+     * drawer is a `role="region"` landmark with no aria-modal.
+     */
+    private applyFloatingRole;
+    protected applyWidthVars(): void;
+    /**
+     * Update the drawer width, clamped to `[min-width, max-width]`. Persists
+     * to localStorage and dispatches `width-change` with the given source.
+     */
+    setWidth(width: number, source: AsideDrawerWidthSource): void;
+    /**
+     * Whether the drawer is pinned — `min === max === default`. A pinned
+     * drawer's resize handle is a drag no-op.
+     */
+    get isPinned(): boolean;
+    /**
+     * Lift Layout.ts's re-seed pattern: if the consumer-provided
+     * `default-width` differs from the last default we wrote for this id,
+     * the persisted width is reset to the new default.
+     */
+    private seedWidth;
+    /**
+     * Resolve the matching `<nord-aside-trigger drawer="<this.id>">` inside
+     * the ancestor `<nord-aside>` and use it as the drawer's aria-labelledby
+     * target. Falls back to no label when no matching trigger exists.
+     */
+    private applyAriaLabelledby;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-aside-drawer': AsideDrawer;
+    }
+}