@nordhealth/components 4.25.2 → 4.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/custom-elements.json +17419 -15503
  2. package/lib/Aside.js +8 -0
  3. package/lib/Aside.js.map +1 -0
  4. package/lib/AsideDrawer.js +14 -0
  5. package/lib/AsideDrawer.js.map +1 -0
  6. package/lib/AsideTrigger.js +5 -0
  7. package/lib/AsideTrigger.js.map +1 -0
  8. package/lib/{Calendar-B5X2WKNb.js → Calendar-ChNZdVRO.js} +2 -2
  9. package/lib/{Calendar-B5X2WKNb.js.map → Calendar-ChNZdVRO.js.map} +1 -1
  10. package/lib/Calendar.js +1 -1
  11. package/lib/Checkbox.js +1 -1
  12. package/lib/CommandMenu.js +1 -1
  13. package/lib/CommandMenu.js.map +1 -1
  14. package/lib/DatePicker.js +1 -1
  15. package/lib/Drawer.js +1 -1
  16. package/lib/Drawer.js.map +1 -1
  17. package/lib/DropdownItem.js +1 -1
  18. package/lib/DropdownSubmenu.js.map +1 -1
  19. package/lib/Footer.js +1 -1
  20. package/lib/Footer.js.map +1 -1
  21. package/lib/Header.js +1 -1
  22. package/lib/Header.js.map +1 -1
  23. package/lib/Icon.js +1 -1
  24. package/lib/Input.js +1 -1
  25. package/lib/Layout.js +3 -1
  26. package/lib/Layout.js.map +1 -1
  27. package/lib/Modal.js +1 -1
  28. package/lib/NavToggle-DzKbd-El.js +2 -0
  29. package/lib/NavToggle-DzKbd-El.js.map +1 -0
  30. package/lib/NavToggle.js +1 -1
  31. package/lib/Select.js +1 -1
  32. package/lib/TagGroup.js +1 -1
  33. package/lib/Toggle.js +1 -1
  34. package/lib/Truncate.js.map +1 -1
  35. package/lib/bundle.js +56 -38
  36. package/lib/bundle.js.map +1 -1
  37. package/lib/focus-D8oSvIcN.js +2 -0
  38. package/lib/focus-D8oSvIcN.js.map +1 -0
  39. package/lib/index.js +1 -1
  40. package/lib/react.d.ts +45 -20
  41. package/lib/src/aside/Aside.d.ts +388 -0
  42. package/lib/src/aside-drawer/AsideDrawer.d.ts +153 -0
  43. package/lib/src/aside-trigger/AsideTrigger.d.ts +84 -0
  44. package/lib/src/common/body-scroll-lock.d.ts +20 -0
  45. package/lib/src/drawer/Drawer.d.ts +2 -1
  46. package/lib/src/dropdown-submenu/DropdownSubmenu.d.ts +0 -6
  47. package/lib/src/header/Header.d.ts +1 -1
  48. package/lib/src/index.d.ts +3 -0
  49. package/lib/src/layout/Layout.d.ts +16 -2
  50. package/lib/src/nav-toggle/NavToggle.d.ts +1 -16
  51. package/lib/src/truncate/Truncate.d.ts +1 -10
  52. package/lib/storage-CGZ-YX4-.js +2 -0
  53. package/lib/storage-CGZ-YX4-.js.map +1 -0
  54. package/lib/vue.d.ts +40 -20
  55. package/package.json +7 -7
  56. package/lib/NavToggle-BQxuLW2X.js +0 -2
  57. package/lib/NavToggle-BQxuLW2X.js.map +0 -1
package/lib/src/aside-trigger/AsideTrigger.d.ts ADDED
@@ -0,0 +1,84 @@
1
+ import { LitElement } from 'lit';
2
+ import '../button/Button.js';
3
+ import '../icon/Icon.js';
4
+ import '../tooltip/Tooltip.js';
5
+ /**
6
+ * Rail button that toggles a `<nord-aside-drawer>` inside `<nord-aside>`.
7
+ *
8
+ * @status new
9
+ * @category action
10
+ * @slot - Overrides the `icon` attribute for custom leading content.
11
+ * @slot tooltip - Overrides the tooltip body (falls back to `label`).
12
+ * Lets consumers add icons, shortcut hints, etc. — anything beyond the
13
+ * plain string label.
14
+ */
15
+ export default class AsideTrigger extends LitElement {
16
+ static styles: import("lit").CSSResult[];
17
+ private defaultSlot;
18
+ private tooltipSlot;
19
+ /**
20
+ * The id of the `<nord-aside-drawer>` this trigger toggles.
21
+ * Required.
22
+ */
23
+ drawer: string;
24
+ /**
25
+ * Nord icon name. Shortcut for the common case; equivalent to placing
26
+ * `<nord-icon name="…">` in the default slot.
27
+ */
28
+ icon?: string;
29
+ /**
30
+ * Accessible label (used for `aria-label` on the host).
31
+ */
32
+ label: string;
33
+ /**
34
+ * Optional badge content (forwarded to inner `<nord-badge>`).
35
+ */
36
+ badge?: string | number;
37
+ /**
38
+ * Makes the trigger disabled. Takes precedence over the target
39
+ * drawer's `disabled` state.
40
+ */
41
+ disabled: boolean;
42
+ /**
43
+ * Whether to render a `<nord-tooltip>` showing `label` on hover/focus.
44
+ * Defaults to `true` — set `tooltip="false"` (or omit `label`) to opt out.
45
+ */
46
+ tooltip: boolean;
47
+ /**
48
+ * Whether the ancestor `<nord-aside>`'s `active-drawer` currently
49
+ * matches this trigger's `drawer` id.
50
+ * @internal
51
+ */
52
+ private active;
53
+ /**
54
+ * Whether the target drawer exists and is not disabled. Drives
55
+ * `aria-disabled` on the host.
56
+ * @internal
57
+ */
58
+ private targetDisabled;
59
+ private observedAside?;
60
+ private readonly tooltipId;
61
+ render(): import("lit").TemplateResult<1>;
62
+ connectedCallback(): void;
63
+ disconnectedCallback(): void;
64
+ protected handleDrawerChange(): void;
65
+ protected handleDisabledChange(): void;
66
+ private get aside();
67
+ private readonly handleActiveDrawerChange;
68
+ /**
69
+ * Listen to the aside's own `active-drawer-change` event instead of each
70
+ * trigger installing its own subtree MutationObserver on the whole aside.
71
+ * One shared event covers open / switch / close, so N triggers no longer
72
+ * mean N observers waking on every aside DOM mutation.
73
+ */
74
+ private startObservingAside;
75
+ private stopObservingAside;
76
+ private syncFromAside;
77
+ private syncAria;
78
+ private handleClick;
79
+ }
80
+ declare global {
81
+ interface HTMLElementTagNameMap {
82
+ 'nord-aside-trigger': AsideTrigger;
83
+ }
84
+ }
package/lib/src/common/body-scroll-lock.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * iOS-safe body-scroll lock with reference counting.
3
+ *
4
+ * `overflow: hidden` on `<body>` is unreliable on iOS Safari — touch
5
+ * scroll still bleeds through. The canonical fix is to apply
6
+ * `position: fixed; top: -<savedScrollY>px` so the viewport's scroll
7
+ * container becomes the (now-unscrollable) viewport itself. On unlock
8
+ * we restore the original styles AND scroll position so the page
9
+ * looks unchanged.
10
+ *
11
+ * Ref-counted so multiple overlays (e.g. a floating drawer and a modal
12
+ * opened on top of it) can request the lock independently — the body
13
+ * stays locked until the last caller releases.
14
+ *
15
+ * Callers should pair every `lockBodyScroll()` with one
16
+ * `unlockBodyScroll()`. Each component should track its own lock state
17
+ * (a boolean) so disconnect / repeated calls don't desync the count.
18
+ */
19
+ export declare function lockBodyScroll(): void;
20
+ export declare function unlockBodyScroll(): void;
package/lib/src/drawer/Drawer.d.ts CHANGED
@@ -11,6 +11,7 @@ import '../footer/Footer.js';
11
11
  * @slot footer - Optional slot that holds footer content for the drawer.
12
12
  *
13
13
  * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).
14
+ * @cssprop [--n-drawer-background-color=var(--n-color-surface)] - Controls the background color of the drawer.
14
15
  */
15
16
  export default class Drawer extends LitElement {
16
17
  static styles: import("lit").CSSResult[];
@@ -18,7 +19,7 @@ export default class Drawer extends LitElement {
18
19
  /**
19
20
  * Controls the padding of the drawer component.
20
21
  */
21
- padding: 'm' | 'none';
22
+ padding: 'l' | 'm' | 's' | 'none';
22
23
  render(): import("lit").TemplateResult<1>;
23
24
  }
24
25
  declare global {
package/lib/src/dropdown-submenu/DropdownSubmenu.d.ts CHANGED
@@ -2,12 +2,6 @@ import { LitElement } from 'lit';
2
2
  import '../popout/Popout.js';
3
3
  /**
4
4
  * Dropdown submenu nests a secondary menu within a parent dropdown.
5
- * The trigger slot contains the item that opens the submenu, and the default slot contains the submenu items.
6
- *
7
- * Supports both hover (non-touch) and click (touch-devices/accessibility) interactions.
8
- *
9
- * On small screens, uses mobile stack navigation: tapping a submenu trigger replaces the
10
- * dropdown's visible content with the submenu's items and shows a back button.
11
5
  *
12
6
  * @status ready
13
7
  * @category action
package/lib/src/header/Header.d.ts CHANGED
@@ -16,7 +16,7 @@ export default class Header extends LitElement {
16
16
  /**
17
17
  * Controls the size of the header component.
18
18
  */
19
- size: 'm' | 's';
19
+ size: 'm' | 's' | 'xs';
20
20
  render(): import("lit").TemplateResult<1>;
21
21
  }
22
22
  declare global {
package/lib/src/index.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ export { default as AsideDrawer, AsideDrawerWidthChangeEvent } from './aside-drawer/AsideDrawer.js';
2
+ export { default as AsideTrigger } from './aside-trigger/AsideTrigger.js';
3
+ export { default as Aside, AsideActiveDrawerChangeEvent, AsideDrawerCloseEvent, AsideDrawerOpenEvent, AsideDrawerResizeEvent, AsideHandleModeChangeEvent, } from './aside/Aside.js';
1
4
  export { default as Avatar } from './avatar/Avatar.js';
2
5
  export { default as Badge } from './badge/Badge.js';
3
6
  export { default as Banner } from './banner/Banner.js';
package/lib/src/layout/Layout.d.ts CHANGED
@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
3
3
  import '../nav-toggle/NavToggle.js';
4
4
  import '../tooltip/Tooltip.js';
5
5
  declare const navMachine: {
6
- transition(currentState: "closed" | "opened" | "peek" | "unpeek" | "wait" | "blocked", event: "click" | "close" | "focusin" | "focusout" | "pointerenter" | "pointerleave" | "toggle" | "transitionend" | "open" | "timeout" | "dropdownOpen" | "dropdownClose"): "closed" | "opened" | "peek" | "unpeek" | "wait" | "blocked";
6
+ transition(currentState: "closed" | "opened" | "peek" | "unpeek" | "wait" | "blocked", event: "click" | "close" | "focusin" | "focusout" | "pointerenter" | "pointerleave" | "toggle" | "transitionend" | "timeout" | "open" | "dropdownOpen" | "dropdownClose"): "closed" | "opened" | "peek" | "unpeek" | "wait" | "blocked";
7
7
  };
8
8
  type NavState = States<typeof navMachine>;
9
9
  /**
@@ -30,7 +30,7 @@ type NavState = States<typeof navMachine>;
30
30
  * @cssprop [--n-layout-resize-color=var(--n-color-accent)] - Controls the colour of the resize handle's accent bar (shown on hover, focus, and while dragging).
31
31
  * @cssprop [--n-layout-resize-block-size=100%] - Controls the block-axis (vertical) size of the resize handle. Set to a fixed length (e.g. `200px`) to constrain the handle so it doesn't span the full nav height.
32
32
  * @cssprop [--n-layout-resize-inset-inline-end=5px] - Controls the inline-end offset of the resize handle's accent bar (the visible vertical line shown on hover/focus/drag).
33
- * @cssprop [--n-layout-nav-rail-width=48px] - Controls the width of the navigation column when `collapse-mode="rail"` is active and the nav is closed.
33
+ * @cssprop [--n-layout-nav-rail-width=64px] - Controls the width of the navigation column when `collapse-mode="rail"` is active and the nav is closed. Equivalent to the `nav-rail-width` attribute / `navRailWidth` property; the CSS custom property takes precedence when set.
34
34
  * @cssprop [--n-layout-header-size=var(--n-space-xxl)] - Controls the block-axis (height) of the layout's header area. Also drives the size of the nav-toggle container and sticky-positioning offsets.
35
35
  * @cssprop [--n-layout-drawer-box-shadow=var(--n-box-shadow-nav)] - Controls the box-shadow applied to the drawer (aside) on narrow viewports.
36
36
  * @cssprop [--n-layout-drawer-box-shadow-wide=var(--n-box-shadow-header)] - Controls the box-shadow applied to the drawer (aside) on wide viewports (≥1240px).
@@ -54,6 +54,11 @@ export default class Layout extends LitElement {
54
54
  private broadcast;
55
55
  private navEl;
56
56
  private resizeTooltipEl?;
57
+ private stickyHeaderEl?;
58
+ private footerSlotEl?;
59
+ private headerSizeObserver?;
60
+ private footerSizeObserver?;
61
+ private observedFooterElement?;
57
62
  private navWidth;
58
63
  private isDragging;
59
64
  private navState;
@@ -87,6 +92,11 @@ export default class Layout extends LitElement {
87
92
  * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.
88
93
  */
89
94
  maxNavWidth: number;
95
+ /**
96
+ * Width (in pixels) of the rail column when `collapse-mode="rail"` is active
97
+ * and the nav is closed. Default 64.
98
+ */
99
+ navRailWidth: number;
90
100
  /**
91
101
  * Controls the padding of the default main section slot. When set to “none”,
92
102
  * the nav and header slots will still have padding.
@@ -138,6 +148,10 @@ export default class Layout extends LitElement {
138
148
  get isNarrow(): boolean;
139
149
  connectedCallback(): void;
140
150
  disconnectedCallback(): void;
151
+ protected firstUpdated(): void;
152
+ private publishHeaderSize;
153
+ private handleFooterSlotChange;
154
+ private publishFooterSize;
141
155
  willUpdate(): void;
142
156
  render(): import("lit").TemplateResult<1>;
143
157
  private renderNavToggle;
package/lib/src/nav-toggle/NavToggle.d.ts CHANGED
@@ -3,22 +3,7 @@ import '../button/Button.js';
3
3
  import '../visually-hidden/VisuallyHidden.js';
4
4
  declare const NavToggle_base: (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
5
5
  /**
6
- * Nav toggle is meant for hiding and showing the primary navigation.
7
- *
8
- * Used internally by `<nord-layout>` as the default contents of its
9
- * `nav-toggle` slot. Can also be placed **anywhere inside `<nord-layout>`**
10
- * (e.g. inside a `<nord-header>` next to the page title) — the layout
11
- * listens for clicks on any descendant `<nord-nav-toggle>` and toggles the
12
- * navigation accordingly. Outside of a `<nord-layout>` it renders as a
13
- * presentational button with no behaviour.
14
- *
15
- * The two displayed icons can be customised via the `icon` and
16
- * `icon-active` attributes. The first is shown in the resting state; the
17
- * second replaces it on hover/focus (≥ 768px).
18
- *
19
- * Set `auto-hide` to have the toggle disappear automatically when the
20
- * ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring
21
- * the built-in fallback toggle's behaviour.
6
+ * Nav toggle hides and shows the primary navigation inside `<nord-layout>`.
22
7
  *
23
8
  * @status ready
24
9
  * @category action
package/lib/src/truncate/Truncate.d.ts CHANGED
@@ -2,16 +2,7 @@ import type { PropertyValues } from 'lit';
2
2
  import { LitElement } from 'lit';
3
3
  import '../tooltip/Tooltip.js';
4
4
  /**
5
- * Truncate is a text wrapper that applies single-line or multi-line ellipsis
6
- * truncation and automatically reveals a tooltip with the full text when the
7
- * content actually overflows its container.
8
- *
9
- * Truncation is performed in JS (the DOM text node is replaced with a
10
- * pre-truncated string + ellipsis), matching the approach used by Ant Design
11
- * Pro's `Ellipsis` component. This avoids the well-known CSS
12
- * `text-overflow: ellipsis` quirk where clicking inside the clipped text
13
- * shifts the line and loses the ellipsis — there is no overflow to scroll
14
- * because the visible text fits exactly.
5
+ * Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.
15
6
  *
16
7
  * @status ready
17
8
  * @category text
package/lib/storage-CGZ-YX4-.js ADDED
@@ -0,0 +1,2 @@
1
+ function t(t,e,r=JSON.stringify,a=JSON.parse){return{get value(){try{const r=localStorage.getItem(t);return r?a(r):e}catch(t){return e}},set value(e){try{localStorage.setItem(t,r(e))}catch(t){}}}}export{t as s};
2
+ //# sourceMappingURL=storage-CGZ-YX4-.js.map
package/lib/storage-CGZ-YX4-.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"storage-CGZ-YX4-.js","sources":["../src/common/storage.ts"],"sourcesContent":["/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse,\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n }\n catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n }\n catch {\n // nothing we can do here\n }\n },\n }\n}\n"],"names":["storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem"],"mappings":"AAIgB,SAAAA,EACdC,EACAC,EACAC,EAAkCC,KAAKC,UACvCC,EAAoCF,KAAKG,OAEzC,MAAO,CACL,SAAIC,GACF,IACE,MAAMA,EAAQC,aAAaC,QAAQT,GACnC,OAAOO,EAAQF,EAAYE,GAASN,CACrC,CACD,MAAAS,GACE,OAAOT,CACR,CACF,EAED,SAAIM,CAAMA,GACR,IACEC,aAAaG,QAAQX,EAAKE,EAAUK,GACrC,CACD,MAAAG,GAEC,CACF,EAEL"}
package/lib/vue.d.ts CHANGED
@@ -18,6 +18,46 @@ type WCProps<TWebComponent extends HTMLElement> = Partial<
18
18
  >;
19
19
 
20
20
  interface NordComponents {
21
+ "nord-aside": DefineComponent<
22
+ WCProps<Components.Aside> & {
23
+ /**
24
+ * Dispatched when `active-drawer` changes, with `activeDrawer` / `previousDrawer` properties. Fires on every transition including open, switch, and close.
25
+ */
26
+ onActiveDrawerChange?: (event: Event) => void;
27
+
28
+ /**
29
+ * Dispatched when all drawers close (active-drawer went from a non-empty value to empty). Has a `previousDrawer` property.
30
+ */
31
+ onDrawerClose?: (event: Event) => void;
32
+
33
+ /**
34
+ * Dispatched when transitioning from no active drawer to an active one (i.e. a drawer opened from the closed state). Has an `activeDrawer` property.
35
+ */
36
+ onDrawerOpen?: (event: Event) => void;
37
+
38
+ /**
39
+ * 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.
40
+ */
41
+ onDrawerResize?: (event: Event) => void;
42
+
43
+ /**
44
+ * 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.
45
+ */
46
+ onHandleModeChange?: (event: Event) => void;
47
+ }
48
+ >;
49
+
50
+ "nord-aside-drawer": DefineComponent<
51
+ WCProps<Components.AsideDrawer> & {
52
+ /**
53
+ * Dispatched when the drawer's width changes. The event exposes `width` (the new applied inline-size in px) and `source` (`'drag' | 'keyboard' | 'attribute' | 'storage'`).
54
+ */
55
+ onWidthChange?: (event: Event) => void;
56
+ }
57
+ >;
58
+
59
+ "nord-aside-trigger": DefineComponent<WCProps<Components.AsideTrigger> & {}>;
60
+
21
61
  "nord-avatar": DefineComponent<WCProps<Components.Avatar> & {}>;
22
62
 
23
63
  "nord-badge": DefineComponent<WCProps<Components.Badge> & {}>;
@@ -194,16 +234,6 @@ interface NordComponents {
194
234
  * Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.
195
235
  */
196
236
  onNavResize?: (event: Event) => void;
197
-
198
- /**
199
- * undefined
200
- */
201
- onNavOpen?: (event: Event) => void;
202
-
203
- /**
204
- * undefined
205
- */
206
- onNavWidth?: (event: Event) => void;
207
237
  }
208
238
  >;
209
239
 
@@ -220,16 +250,6 @@ interface NordComponents {
220
250
  * 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.
221
251
  */
222
252
  onClose?: (event: Event) => void;
223
-
224
- /**
225
- * undefined
226
- */
227
- onCloseTrigger?: (event: Event) => void;
228
-
229
- /**
230
- * undefined
231
- */
232
- onTrigger?: (event: Event) => void;
233
253
  }
234
254
  >;
235
255
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nordhealth/components",
3
3
  "type": "module",
4
- "version": "4.25.2",
4
+ "version": "4.26.0",
5
5
  "description": "This package includes Nord Design System Web Components",
6
6
  "author": "Nordhealth <support@nordhealth.design>",
7
7
  "license": "SEE LICENSE IN LICENSE.md",
@@ -56,10 +56,10 @@
56
56
  "@rollup/plugin-replace": "^5.0.7",
57
57
  "@rollup/plugin-terser": "^0.4.4",
58
58
  "@rollup/plugin-typescript": "^11.1.6",
59
- "@storybook/addon-a11y": "^10.2.14",
60
- "@storybook/addon-docs": "^10.2.14",
61
- "@storybook/addon-themes": "^10.2.14",
62
- "@storybook/web-components-vite": "^10.2.14",
59
+ "@storybook/addon-a11y": "^10.4.6",
60
+ "@storybook/addon-docs": "^10.4.6",
61
+ "@storybook/addon-themes": "^10.4.6",
62
+ "@storybook/web-components-vite": "^10.4.6",
63
63
  "@types/node": "^22.19.11",
64
64
  "@typescript-eslint/eslint-plugin": "^8.56.0",
65
65
  "@typescript-eslint/parser": "^8.56.0",
@@ -80,7 +80,7 @@
80
80
  "rollup-plugin-lit-css": "^5.0.2",
81
81
  "rollup-plugin-minify-html-literals-v3": "^1.3.4",
82
82
  "rollup-plugin-summary": "^2.0.1",
83
- "storybook": "^10.2.14",
83
+ "storybook": "^10.4.6",
84
84
  "tslib": "^2.8.1",
85
85
  "typescript": "~5.5.4",
86
86
  "vitest": "^4.0.18",
@@ -91,5 +91,5 @@
91
91
  "rollup": "~4.21.3"
92
92
  }
93
93
  },
94
- "gitHead": "4fb9f4d04568ddbb3835456bae7b5640e9a4df09"
94
+ "gitHead": "2d2cccb47ced684b6d9e7bafa8d8f15cc62e6bd7"
95
95
  }
package/lib/NavToggle-BQxuLW2X.js DELETED
@@ -1,2 +0,0 @@
1
- import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as i,LitElement as e}from"lit";import{property as r,state as s,customElement as n}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{ref as l}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{s as u}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";const p="navigation-toggle-lock";var m=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:p});const b="navigation-toggle";var g=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:b});const f=o`:host{color:var(--n-color-icon);display:inline-flex}@media (min-width:768px){:host([data-auto-hidden]){display:none}}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}.icon-active{display:none}.is-rtl .icon-active{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) .icon-active{display:block}:host(:is(:hover,:focus-within)) .icon-default{display:none}}`;h.registerIcon(g),h.registerIcon(m);let y=class extends(c(e)){constructor(){super(...arguments),this.direction=new d(this),this.localization=new v(this),this.icon=b,this.iconActive=p,this.autoHide=!1,this.square=!1,this.size="m",this.iconSize="m",this.autoHidden=!1}connectedCallback(){super.connectedCallback(),this.startAutoHide()}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoHide()}updated(t){var o;null===(o=super.updated)||void 0===o||o.call(this,t),t.has("autoHide")&&(this.stopAutoHide(),this.startAutoHide()),t.has("autoHidden")&&this.toggleAttribute("data-auto-hidden",this.autoHidden)}startAutoHide(){if(!this.autoHide)return;const t=this.closest("nord-layout");t&&(this.observedLayout=t,this.autoHidden=t.hasAttribute("nav-open"),this.layoutObserver=new MutationObserver((()=>{this.autoHidden=t.hasAttribute("nav-open")})),this.layoutObserver.observe(t,{attributes:!0,attributeFilter:["nav-open"]}))}stopAutoHide(){var t;null===(t=this.layoutObserver)||void 0===t||t.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.autoHidden=!1}render(){return i`<nord-button variant="plain" ?square="${this.square}" size="${this.size}" ${l(this.focusableRef)} class="${a({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="${this.iconSize}" class="icon-default" name="${this.icon}"></nord-icon><nord-icon size="${this.iconSize}" class="icon-active" name="${this.iconActive}"></nord-icon></nord-button>`}};y.styles=[u,f],t([r({reflect:!0})],y.prototype,"icon",void 0),t([r({reflect:!0,attribute:"icon-active"})],y.prototype,"iconActive",void 0),t([r({type:Boolean,reflect:!0,attribute:"auto-hide"})],y.prototype,"autoHide",void 0),t([r({type:Boolean,reflect:!0})],y.prototype,"square",void 0),t([r({reflect:!0})],y.prototype,"size",void 0),t([r({reflect:!0,attribute:"icon-size"})],y.prototype,"iconSize",void 0),t([s()],y.prototype,"autoHidden",void 0),y=t([n("nord-nav-toggle")],y);var z=y;export{z as N,m as l};
2
- //# sourceMappingURL=NavToggle-BQxuLW2X.js.map
package/lib/NavToggle-BQxuLW2X.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavToggle-BQxuLW2X.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, property, state } 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 *\n * Used internally by `<nord-layout>` as the default contents of its\n * `nav-toggle` slot. Can also be placed **anywhere inside `<nord-layout>`**\n * (e.g. inside a `<nord-header>` next to the page title) — the layout\n * listens for clicks on any descendant `<nord-nav-toggle>` and toggles the\n * navigation accordingly. Outside of a `<nord-layout>` it renders as a\n * presentational button with no behaviour.\n *\n * The two displayed icons can be customised via the `icon` and\n * `icon-active` attributes. The first is shown in the resting state; the\n * second replaces it on hover/focus (≥ 768px).\n *\n * Set `auto-hide` to have the toggle disappear automatically when the\n * ancestor `<nord-layout>`'s nav is open (on wide viewports), mirroring\n * the built-in fallback toggle's behaviour.\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 private layoutObserver?: MutationObserver\n private observedLayout?: HTMLElement\n\n /**\n * Icon shown in the resting state. Accepts any registered icon name.\n * Defaults to `navigation-toggle`.\n */\n @property({ reflect: true }) icon: string = unlockIcon.title\n\n /**\n * Icon shown on hover/focus (≥ 768px), swapping in for `icon`.\n * Defaults to `navigation-toggle-lock`.\n */\n @property({ reflect: true, attribute: 'icon-active' }) iconActive: string = lockIcon.title\n\n /**\n * When set, the toggle finds its ancestor `<nord-layout>` and hides\n * itself on wide viewports while the layout's nav is open. Useful when\n * placing the toggle outside the `nav-toggle` slot.\n */\n @property({ type: Boolean, reflect: true, attribute: 'auto-hide' }) autoHide: boolean = false\n\n /**\n * Forwards the `square` attribute to the underlying `<nord-button>`,\n * giving the toggle a fixed square footprint instead of the default\n * pill shape.\n */\n @property({ type: Boolean, reflect: true }) square: boolean = false\n\n /**\n * Size of the underlying `<nord-button>`. Defaults to `m`.\n */\n @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n /**\n * Size of the inner `<nord-icon>` elements. Accepts the same values\n * as `<nord-icon>`'s `size`. Defaults to `m`.\n */\n @property({ reflect: true, attribute: 'icon-size' }) iconSize: 'xxs' | 'xs' | 's' | 'm' | 'l' = 'm'\n\n /**\n * Reflects whether `auto-hide` is engaged (i.e. the ancestor layout\n * currently has `nav-open`). The CSS hides the host based on this.\n */\n @state() private autoHidden: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n this.startAutoHide()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.stopAutoHide()\n }\n\n protected updated(changed: Map<string, unknown>) {\n super.updated?.(changed)\n if (changed.has('autoHide')) {\n this.stopAutoHide()\n this.startAutoHide()\n }\n if (changed.has('autoHidden')) {\n this.toggleAttribute('data-auto-hidden', this.autoHidden)\n }\n }\n\n private startAutoHide() {\n if (!this.autoHide) {\n return\n }\n const layout = this.closest<HTMLElement>('nord-layout')\n if (!layout) {\n return\n }\n this.observedLayout = layout\n this.autoHidden = layout.hasAttribute('nav-open')\n this.layoutObserver = new MutationObserver(() => {\n this.autoHidden = layout.hasAttribute('nav-open')\n })\n this.layoutObserver.observe(layout, {\n attributes: true,\n attributeFilter: ['nav-open'],\n })\n }\n\n private stopAutoHide() {\n this.layoutObserver?.disconnect()\n this.layoutObserver = undefined\n this.observedLayout = undefined\n this.autoHidden = false\n }\n\n render() {\n return html`\n <nord-button variant=\"plain\" ?square=${this.square} size=${this.size} ${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=${this.iconSize} class=\"icon-default\" name=${this.icon}></nord-icon>\n <nord-icon size=${this.iconSize} class=\"icon-active\" name=${this.iconActive}></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","icon","unlockIcon.title","iconActive","lockIcon.title","autoHide","square","size","iconSize","autoHidden","connectedCallback","super","startAutoHide","disconnectedCallback","stopAutoHide","updated","changed","_a","call","has","toggleAttribute","layout","closest","observedLayout","hasAttribute","layoutObserver","MutationObserver","observe","attributes","attributeFilter","disconnect","undefined","render","html","ref","focusableRef","classMap","isRTL","term","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","state","customElement"],"mappings":"uiBACO,MAAMA,EAAQ,qEADN,oTAGb,0GCFK,MAAMA,EAAQ,gEADN,kMAGb,whBCeFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GA0BH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,MAQpCA,KAAAK,KAAeC,EAMWN,KAAAO,WAAqBC,EAORR,KAAQS,UAAY,EAO5CT,KAAMU,QAAY,EAKjCV,KAAIW,KAAc,IAMMX,KAAQY,SAAmC,IAM/EZ,KAAUa,YAAY,CA0DxC,CAxDC,iBAAAC,GACEC,MAAMD,oBACNd,KAAKgB,eACN,CAED,oBAAAC,GACEF,MAAME,uBACNjB,KAAKkB,cACN,CAES,OAAAC,CAAQC,SACA,QAAhBC,EAAAN,MAAMI,eAAU,IAAAE,GAAAA,EAAAC,KAAAtB,KAAAoB,GACZA,EAAQG,IAAI,cACdvB,KAAKkB,eACLlB,KAAKgB,iBAEHI,EAAQG,IAAI,eACdvB,KAAKwB,gBAAgB,mBAAoBxB,KAAKa,WAEjD,CAEO,aAAAG,GACN,IAAKhB,KAAKS,SACR,OAEF,MAAMgB,EAASzB,KAAK0B,QAAqB,eACpCD,IAGLzB,KAAK2B,eAAiBF,EACtBzB,KAAKa,WAAaY,EAAOG,aAAa,YACtC5B,KAAK6B,eAAiB,IAAIC,kBAAiB,KACzC9B,KAAKa,WAAaY,EAAOG,aAAa,WAAW,IAEnD5B,KAAK6B,eAAeE,QAAQN,EAAQ,CAClCO,YAAY,EACZC,gBAAiB,CAAC,cAErB,CAEO,YAAAf,SACe,QAArBG,EAAArB,KAAK6B,sBAAgB,IAAAR,GAAAA,EAAAa,aACrBlC,KAAK6B,oBAAiBM,EACtBnC,KAAK2B,oBAAiBQ,EACtBnC,KAAKa,YAAa,CACnB,CAED,MAAAuB,GACE,OAAOC,CAAI,yCAC8BrC,KAAKU,iBAAeV,KAAKW,SAAQ2B,EAAItC,KAAKuC,wBAAuBC,EAAS,CAAE,SAAUxC,KAAKC,UAAUwC,kCAClHzC,KAAKG,aAAauC,KAAK,mDAC7B1C,KAAKY,wCAAsCZ,KAAKK,sCAChDL,KAAKY,uCAAqCZ,KAAKO,wCAGtE,GAzGMX,EAAA+C,OAAS,CAACC,EAAgBC,GAWJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAuCpD,EAAAqD,UAAA,YAAA,GAMLH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAoDtD,EAAAqD,UAAA,kBAAA,GAOtBH,EAAA,CAAnEC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,EAAME,UAAW,eAAwCtD,EAAAqD,UAAA,gBAAA,GAOjDH,EAAA,CAA3CC,EAAS,CAAEI,KAAMC,QAASJ,SAAS,KAA+BpD,EAAAqD,UAAA,cAAA,GAKtCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BpD,EAAAqD,UAAA,YAAA,GAMGH,EAAA,CAApDC,EAAS,CAAEC,SAAS,EAAME,UAAW,eAA6DtD,EAAAqD,UAAA,gBAAA,GAMlFH,EAAA,CAAhBO,KAA2CzD,EAAAqD,UAAA,kBAAA,GAjDzBrD,EAASkD,EAAA,CAD7BQ,EAAc,oBACM1D,SAAAA"}