@nordhealth/components 4.22.0 → 4.23.0

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{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-DL74d1aQ.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-vR6LxNS9.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 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-BtICPEsp.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-Cp-z3XA9.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 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{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-QzUt-7lX.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-vR6LxNS9.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 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-BtICPEsp.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-Cp-z3XA9.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

@@ -231,7 +231,17 @@ declare module "react" {
       "nord-layout": WCProps<Components.Layout> &
         React.RefAttributes<Components.Layout> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {};
+        React.Attributes & {
+          /**
+           * Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.
+           */
+          "onnav-open-change"?: (event: Event) => void;
+
+          /**
+           * undefined
+           */
+          onnavopen?: (event: Event) => void;
+        };
 
       "nord-message": WCProps<Components.Message> &
         React.RefAttributes<Components.Message> &

package/lib/src/card/Card.d.ts

@@ -11,6 +11,7 @@ import { LitElement } from 'lit';
  * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.
  * @slot footer - Optional slot that holds footer content for the card.
  *
+ * @cssprop [--n-card-background-color=var(--n-color-surface)] - Controls the background color of the card.
  * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).
  * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).
  * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.

package/lib/src/index.d.ts

@@ -22,6 +22,7 @@ export { default as Header } from './header/Header.js';
 export { default as Icon } from './icon/Icon.js';
 export { default as Input } from './input/Input.js';
 export { default as Layout } from './layout/Layout.js';
+export { NavOpenChangeEvent } from './layout/NavOpenChangeEvent.js';
 export { isTranslationRegistered, registerTranslation } from './localization/translation.js';
 export type { Translation } from './localization/translation.js';
 export { default as Message } from './message/Message.js';

package/lib/src/layout/Layout.d.ts

@@ -17,7 +17,9 @@ type NavState = States<typeof navMachine>;
  * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.
  * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.
  * @slot drawer - Used to place additional content/details relating to a selected item.
- * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.
+ * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.
+ *
+ * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.
  *
  * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).
  * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.
@@ -83,12 +85,20 @@ export default class Layout extends LitElement {
      * Controls whether the layout's footer has sticky positioning.
      */
     stickyFooter: boolean;
+    /**
+     * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for
+     * the `nav-toggle` slot. Set this when you've placed your own
+     * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside
+     * `<nord-header>`) and want the layout's default one hidden.
+     */
+    hideDefaultNavToggle: boolean;
     /**
      * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.
      * A narrow viewport is considered to be less than 768px wide.
      */
     get isNarrow(): boolean;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     willUpdate(): void;
     render(): import("lit").TemplateResult<1>;
     private renderNavToggle;
@@ -103,6 +113,9 @@ export default class Layout extends LitElement {
     private handleDropdownClose;
     private handleMediaQueryChange;
     private handleToggleClick;
+    private handleHostClick;
+    private handleHostMouseOver;
+    private handleHostMouseOut;
     private handleNavFocus;
     private handleMainFocus;
     private handleMouseEnter;

package/lib/src/layout/NavOpenChangeEvent.d.ts

@@ -0,0 +1,20 @@
+import { NordEvent } from '../common/events.js';
+/**
+ * Event dispatched when the layout's navigation open state changes.
+ * The `navOpen` property contains the new state — `true` when opened, `false` when closed.
+ */
+export declare class NavOpenChangeEvent extends NordEvent {
+    navOpen: boolean;
+    constructor(navOpen: boolean);
+}
+declare global {
+    interface HTMLElementEventMap {
+        'nav-open-change': NavOpenChangeEvent;
+    }
+    interface DocumentEventMap {
+        'nav-open-change': NavOpenChangeEvent;
+    }
+    interface WindowEventMap {
+        'nav-open-change': NavOpenChangeEvent;
+    }
+}

package/lib/src/nav-toggle/NavToggle.d.ts

@@ -4,8 +4,21 @@ import '../visually-hidden/VisuallyHidden.js';
 declare const NavToggle_base: (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
 /**
  * Nav toggle is meant for hiding and showing the primary navigation.
- * This component is used internally in the Layout component, but can also be
- * used separate to further customize the behavior.
+ *
+ * Used internally by `<nord-layout>` as the default contents of its
+ * `nav-toggle` slot. Can also be placed **anywhere inside `<nord-layout>`**
+ * (e.g. inside a `<nord-header>` next to the page title) — the layout
+ * listens for clicks on any descendant `<nord-nav-toggle>` and toggles the
+ * navigation accordingly. Outside of a `<nord-layout>` it renders as a
+ * presentational button with no behaviour.
+ *
+ * The two displayed icons can be customised via the `icon` and
+ * `icon-active` attributes. The first is shown in the resting state; the
+ * second replaces it on hover/focus (≥ 768px).
+ *
+ * Set `auto-hide` to have the toggle disappear automatically when the
+ * ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring
+ * the built-in fallback toggle's behaviour.
  *
  * @status ready
  * @category action
@@ -16,6 +29,34 @@ export default class NavToggle extends NavToggle_base {
     static styles: import("lit").CSSResult[];
     private direction;
     private localization;
+    private layoutObserver?;
+    private observedLayout?;
+    /**
+     * Icon shown in the resting state. Accepts any registered icon name.
+     * Defaults to `navigation-toggle`.
+     */
+    icon: string;
+    /**
+     * Icon shown on hover/focus (≥ 768px), swapping in for `icon`.
+     * Defaults to `navigation-toggle-lock`.
+     */
+    iconActive: string;
+    /**
+     * When set, the toggle finds its ancestor `<nord-layout>` and hides
+     * itself on wide viewports while the layout's nav is open. Useful when
+     * placing the toggle outside the `nav-toggle` slot.
+     */
+    autoHide: boolean;
+    /**
+     * Reflects whether `auto-hide` is engaged (i.e. the ancestor layout
+     * currently has `nav-open`). The CSS hides the host based on this.
+     */
+    private autoHidden;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private startAutoHide;
+    private stopAutoHide;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/lib/vue.d.ts

@@ -183,7 +183,19 @@ interface NordComponents {
     }
   >;
 
-  "nord-layout": DefineComponent<WCProps<Components.Layout> & {}>;
+  "nord-layout": DefineComponent<
+    WCProps<Components.Layout> & {
+      /**
+       * Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.
+       */
+      onNavOpenChange?: (event: Event) => void;
+
+      /**
+       * undefined
+       */
+      onNavOpen?: (event: Event) => void;
+    }
+  >;
 
   "nord-message": DefineComponent<WCProps<Components.Message> & {}>;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordhealth/components",
   "type": "module",
-  "version": "4.22.0",
+  "version": "4.23.0",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -90,5 +90,5 @@
       "rollup": "~4.21.3"
     }
   },
-  "gitHead": "f30db0e9e434f11b54c922087413b87c3387e13e"
+  "gitHead": "df121438147c1ac6d71e645a1c877409899fa22c"
 }

package/lib/NavToggle-DL74d1aQ.js

@@ -1,2 +0,0 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,LitElement as i}from"lit";import{customElement as r}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{ref as l}from"lit/directives/ref.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{F as a}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import m from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";const d="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron",title:d});const h="navigation-toggle";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',tags:"nordicon navigation hamburger menu toggle navigation three lines",title:h});const u=t`:host{color:var(--n-color-icon);display:inline-flex}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;m.registerIcon(p),m.registerIcon(v);let f=class extends(a(i)){constructor(){super(...arguments),this.direction=new s(this),this.localization=new g(this)}render(){return n`<nord-button variant="plain" ${l(this.focusableRef)} class="${e({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" name="${h}"></nord-icon><nord-icon size="m" name="${d}"></nord-icon></nord-button>`}};f.styles=[c,u],f=o([r("nord-nav-toggle")],f);var w=f;export{w as N,v as l};
-//# sourceMappingURL=NavToggle-DL74d1aQ.js.map

package/lib/NavToggle-DL74d1aQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavToggle-DL74d1aQ.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle-lock\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-toggle\";\nexport const tags =\n  \"nordicon navigation hamburger menu toggle navigation three lines\";\n","import * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport * as unlockIcon from '@nordhealth/icons/lib/assets/navigation-toggle.js'\nimport { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './NavToggle.css'\n\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status ready\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement('nord-nav-toggle')\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<'nord-nav-toggle'>(this)\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ 'is-rtl': this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term('label')}</nord-visually-hidden>\n        <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n        <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-toggle': NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"8gBACO,MAAMA,EAAQ,qEADN,oTAGb,0GCFK,MAAMA,EAAQ,gEADN,kMAGb,yjBCeFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATC,MAAAK,GACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}