@nordhealth/components 5.0.0-alpha.0 → 5.0.1

package/lib/src/drawer/Drawer.d.ts

@@ -5,7 +5,7 @@ import '../footer/Footer.js';
  * Drawer doesn’t block users from completing their task, like a modal would.
  *
  * @status new
- * @category structure
+ * @category layout
  * @slot header - Optional slot that holds a header for the drawer.
  * @slot - Default slot.
  * @slot footer - Optional slot that holds footer content for the drawer.

package/lib/src/dropdown/Dropdown.d.ts

@@ -53,6 +53,9 @@ export default class Dropdown extends Dropdown_base {
     get deepestSubmenu(): DropdownSubmenu | undefined;
     /**
      * Controls whether the toggle slot expands to fill the width of its container.
+     * Note that this only stretches the slot itself — the slotted toggle must
+     * also expand to fill it, e.g. a `<nord-button slot="toggle">` needs its own
+     * `expand` attribute as well.
      */
     expand: boolean;
     /**

package/lib/src/footer/Footer.d.ts

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
  * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.
  *
  * @status new
- * @category structure
+ * @category layout
  * @slot - The footer content.
  *
  * @cssprop [--n-footer-padding-inline=var(--n-space-l)] - Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).

package/lib/src/header/Header.d.ts

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
  * viewed context as well as providing primary actions.
  *
  * @status ready
- * @category structure
+ * @category layout
  * @slot - The header content.
  * @slot end - Optional slot for buttons, toggles, etc.
  *

package/lib/src/icon/Icon.d.ts

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * Icon component allows you to display an icon from the Nordicons library.
  *
  * @status ready
- * @category image
+ * @category content
  * @slot - The default slot used for placing a custom SVG icon.
  */
 export default class Icon extends LitElement {

package/lib/src/index.d.ts

@@ -86,6 +86,8 @@ export { default as Notification } from './notification/Notification.js';
 export { getCurrencySymbol, resolveCurrencyPlacement } from './number-field/currency.js';
 export { default as NumberField, NumberFieldChangeEvent } from './number-field/NumberField.js';
 export { default as OtpField, OtpFieldCompleteEvent, OtpFieldInvalidEvent } from './otp-field/OtpField.js';
+export { NordOutlineChangeEvent, default as Outline } from './outline/Outline.js';
+export { default as OutlineItem } from './outline/OutlineItem.js';
 export { ELLIPSIS, paginate, type PaginationToken } from './pagination/paginate.js';
 export { default as Pagination } from './pagination/Pagination.js';
 export { default as PaginationContent } from './pagination/PaginationContent.js';

package/lib/src/kbd/Kbd.d.ts

@@ -5,7 +5,7 @@ declare const Kbd_base: typeof LitElement;
  * should press. Group related keys together with [Kbd Group](/components/kbd-group/).
  *
  * @status draft
- * @category text
+ * @category content
  * @lightDom true
  *
  * @slot - Default slot for the key label (text or an icon).

package/lib/src/kbd/KbdGroup.d.ts

@@ -5,7 +5,7 @@ declare const KbdGroup_base: typeof LitElement;
  * to represent a multi-key shortcut such as <kbd>Ctrl</kbd> <kbd>K</kbd>.
  *
  * @status draft
- * @category text
+ * @category content
  * @lightDom true
  *
  * @slot - Default slot for [Kbd](/components/kbd/) elements.

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

@@ -11,7 +11,7 @@ type NavState = States<typeof navMachine>;
  * currently comes with one main configuration: two-column.
  *
  * @status ready
- * @category structure
+ * @category layout
  * @slot - The default main section content.
  * @slot nav - Used to place content inside the navigation sidebar.
  * @slot top-bar - Used to place the [Top Bar](/components/top-bar/) component.
@@ -36,6 +36,9 @@ type NavState = States<typeof navMachine>;
  * @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).
  * @cssprop [--n-layout-drawer-border-inline-start-width=1px] - Controls the inline-start border width of the drawer on wide viewports.
  * @cssprop [--n-layout-drawer-border-inline-start-color=var(--n-color-border)] - Controls the inline-start border color of the drawer on wide viewports.
+ *
+ * @localization resizeNavigation - Accessible label for the nav resize separator.
+ * @localization navigationCollapsed - Announced by the nav resize separator (`aria-valuetext`) while the navigation is collapsed.
  */
 export default class Layout extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -49,6 +52,7 @@ export default class Layout extends LitElement {
     private dividerTooltipSlot;
     private direction;
     private events;
+    private localization;
     private lightDismiss;
     private applyingRemote;
     private broadcast;
@@ -174,6 +178,14 @@ export default class Layout extends LitElement {
     private handleMouseEnter;
     private handleMouseLeave;
     private handleTransitionEnd;
+    /**
+     * `aria-valuenow` for the focusable resize separator (ARIA window splitter
+     * pattern): the current nav width in pixels, bounded by the `min-nav-width`
+     * / `max-nav-width` props exposed as `aria-valuemin` / `aria-valuemax`.
+     * While the nav is collapsed the value must stay within those bounds, so it
+     * reports the minimum and `aria-valuetext` announces the collapsed state.
+     */
+    private get resizeValueNow();
     private handleKeyboardResize;
     private setNavWidth;
     private dragStartX;

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

@@ -0,0 +1,5 @@
+declare const localization: {
+    resizeNavigation: string;
+    navigationCollapsed: string;
+};
+export default localization;

package/lib/src/localization/en-us.d.ts

@@ -64,6 +64,10 @@ declare const en: {
         presetCurrentYear: string;
         presetQuarter: (quarter: number, year: number) => string;
     };
+    'nord-layout': {
+        resizeNavigation: string;
+        navigationCollapsed: string;
+    };
     'nord-modal': {
         closeLabel: string;
     };
@@ -90,6 +94,9 @@ declare const en: {
     'nord-otp-field': {
         characterLabel: (position: number, total: number) => string;
     };
+    'nord-outline': {
+        label: string;
+    };
     'nord-pagination': {
         label: string;
     };

package/lib/src/localization/translation.d.ts

@@ -107,6 +107,10 @@ export declare function resolveTranslation(langCode: string): {
         presetCurrentYear: string;
         presetQuarter: (quarter: number, year: number) => string;
     };
+    'nord-layout': {
+        resizeNavigation: string;
+        navigationCollapsed: string;
+    };
     'nord-modal': {
         closeLabel: string;
     };
@@ -133,6 +137,9 @@ export declare function resolveTranslation(langCode: string): {
     'nord-otp-field': {
         characterLabel: (position: number, total: number) => string;
     };
+    'nord-outline': {
+        label: string;
+    };
     'nord-pagination': {
         label: string;
     };

package/lib/src/nav-group/NavGroup.d.ts

@@ -17,6 +17,7 @@ import '../icon/Icon.js';
  */
 export default class NavGroup extends LitElement {
     static styles: import("lit").CSSResult[];
+    private listProvider;
     private layoutObserver?;
     private observedLayout?;
     /**

package/lib/src/nav-group/nav-context.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Signals to a [NavItem](/components/nav-item/) that it is rendered inside a
+ * [NavGroup](/components/nav-group/), which exposes `role="list"`. The nav-item
+ * consumes this to decide whether to emit `role="listitem"`: a `listitem`
+ * without a `list` ancestor is an accessibility violation
+ * (`aria-required-parent`), so standalone nav-items (e.g. directly in
+ * `nord-navigation` or used as a `nord-dropdown` toggle) omit the role instead.
+ */
+export declare const navListContext: {
+    __context__: boolean;
+};

package/lib/src/nav-item/NavItem.d.ts

@@ -72,6 +72,15 @@ export default class NavItem extends NavItem_base {
      * @internal
      */
     private railCollapsed;
+    /**
+     * Whether this item is inside a `nord-nav-group` (which exposes `role="list"`).
+     * Only then may it emit `role="listitem"` — a listitem without a list ancestor
+     * fails the `aria-required-parent` accessibility check. Standalone items (e.g.
+     * directly in `nord-navigation` or used as a `nord-dropdown` toggle) omit the role.
+     * @internal
+     */
+    private inList;
+    private listConsumer;
     /**
      * Used for indicating the current page. This gives a prominent background to the nav item,
      * and marks the item as the current page for assistive technology.
@@ -95,6 +104,20 @@ export default class NavItem extends NavItem_base {
      * Note: this is only used if you have nested navigation using the "subnav" slot.
      */
     open: boolean;
+    /**
+     * Distance in pixels between the rail-mode tooltip and the item, forwarded
+     * to the internal [Tooltip](/components/tooltip/)'s `side-offset` (the
+     * Floating UI `offset` main axis). When unset, the tooltip's own default
+     * (`8`) applies. Useful for lining up rail-item tooltips with neighbouring
+     * standalone tooltips.
+     */
+    sideOffset?: number;
+    /**
+     * Offset in pixels along the alignment axis for the rail-mode tooltip,
+     * forwarded to the internal [Tooltip](/components/tooltip/)'s
+     * `align-offset`. When unset, the tooltip's own default (`0`) applies.
+     */
+    alignOffset?: number;
     /**
      * @internal
      */

package/lib/src/otp-field/OtpField.d.ts

@@ -108,6 +108,17 @@ export default class OtpField extends OtpField_base {
      */
     get value(): string;
     set value(next: string);
+    /**
+     * Function that normalizes the value after whitespace and `type` filtering —
+     * e.g. `el.normalizeValue = v => v.toUpperCase()`. It runs whenever the field
+     * normalizes a value (initial, programmatic, and user edits), inside the
+     * component's own pipeline, so live normalization never fights the per-cell
+     * focus handling. The result is filtered by `type` again, then clamped to
+     * `length`; it should be idempotent since the same value may be normalized
+     * more than once. Characters rejected while normalizing are reported through
+     * `value-invalid`. Mirrors Base UI's `normalizeValue`.
+     */
+    normalizeValue?: (value: string) => string;
     /** The validation config for the current `type`. */
     private get config();
     /** Whether `length` is a usable positive integer. */

package/lib/src/outline/Outline.d.ts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+import { NordEvent } from '../common/events.js';
+import { LocalizeController } from '../localization/LocalizeController.js';
+import './OutlineItem.js';
+/**
+ * Event dispatched when the active section of an Outline changes, either via the
+ * built-in scroll-spy, a click on one of its items, or a programmatic change.
+ * The event's `activeId` is the id of the newly active heading.
+ */
+export declare class NordOutlineChangeEvent extends NordEvent {
+    activeId: string;
+    constructor(activeId: string);
+}
+declare const Outline_base: typeof LitElement;
+/**
+ * Outline is an in-page table of contents that lists a page's headings and
+ * highlights the section currently in view as you scroll.
+ *
+ * Provide [Outline Item](/components/outline-item/) children, or point `for` at
+ * a container to build the list from its headings.
+ *
+ * @status draft
+ * @category navigation
+ *
+ * @slot - The default slot for [Outline Item](/components/outline-item/) children.
+ * @slot header - Custom header content shown above the list. Overrides the default localized "On this page" heading. Set `hide-header` to remove the header entirely.
+ *
+ * @fires {NordOutlineChangeEvent} change - Dispatched when the active section changes. Includes an `activeId` property.
+ *
+ * @localization label - Accessible label for the outline navigation landmark, and the default header text.
+ *
+ * @cssprop [--n-outline-indicator-color=var(--n-color-accent)] - Color of the sliding active indicator.
+ * @cssprop [--n-outline-track-color=var(--n-color-border)] - Color of the static track behind the indicator.
+ * @cssprop [--n-outline-indicator-width=2px] - Thickness of the track and indicator.
+ * @cssprop [--n-outline-indent=var(--n-space-m)] - Indentation step applied per heading level.
+ * @cssprop [--n-outline-header-color=var(--n-color-text-weaker)] - Color of the default header text.
+ * @cssprop [--n-outline-header-font-size=var(--n-font-size-s)] - Font size of the default header text.
+ */
+export default class Outline extends Outline_base {
+    static styles: import("lit").CSSResult[];
+    protected localize: LocalizeController<"nord-outline">;
+    private headerSlot;
+    /**
+     * The id of the active heading. Setting this puts the Outline in controlled
+     * mode and disables the built-in scroll-spy, so your own logic owns the
+     * highlight (mirrors providing `activeId` in other libraries).
+     */
+    active?: string;
+    /**
+     * Tightens spacing for dense sidebars where vertical space is at a premium.
+     */
+    density: 'default' | 'compact';
+    /**
+     * DOM-scan mode: the id (or any CSS selector) of the content container whose
+     * headings should populate the outline. When set, slotted children are
+     * ignored and items are generated from the matched headings.
+     */
+    for?: string;
+    /**
+     * The selector used to find headings when `for` is set.
+     */
+    headingSelector: string;
+    /**
+     * CSS selector for the element that scrolls the content, used as the
+     * scroll-spy `IntersectionObserver` root. Point this at your scroll container
+     * when the page scrolls inside an element rather than the window — otherwise
+     * the observer watches the window and never sees the headings move. If the
+     * selector resolves to a `nord-scroll-area`, its scroll viewport is used.
+     *
+     * When unset, the nearest ancestor `nord-scroll-area` of the scanned content
+     * is detected automatically, falling back to the window.
+     */
+    scrollContainer?: string;
+    /**
+     * Hides the header. By default Outline shows a localized "On this page"
+     * heading (or the `header` slot's content) above the list.
+     */
+    hideHeader: boolean;
+    private scanned;
+    private containerEl?;
+    private indicatorEl?;
+    private controlled;
+    private observer?;
+    private resizeObserver?;
+    private mutationObserver?;
+    private readonly intersecting;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Re-derive entries, restart scroll-spy and reposition the indicator. */
+    private refresh;
+    /** The ordered list of items, normalised across slotted and scan modes. */
+    private get entries();
+    private scanContent;
+    private observeTargets;
+    private handleIntersect;
+    private setActive;
+    private applyActiveToItems;
+    private updateIndicator;
+    private handleClick;
+    private handleSlotChange;
+    private renderHeader;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-outline': Outline;
+    }
+}
+export {};

package/lib/src/outline/OutlineItem.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+declare const OutlineItem_base: typeof LitElement;
+/**
+ * Outline Item is a single link within an [Outline](/components/outline/). It
+ * points at an in-page heading via its `href` and indents according to its
+ * `level`. Its `active` state is managed by the parent Outline — you normally
+ * don't set it yourself.
+ *
+ * @status draft
+ * @category navigation
+ *
+ * @slot - The label text for the heading this item links to.
+ *
+ * @cssprop [--n-outline-item-color=var(--n-color-text-weak)] - Text color in the default state.
+ * @cssprop [--n-outline-item-color-hover=var(--n-color-text)] - Text color on hover.
+ * @cssprop [--n-outline-item-color-active=var(--n-color-text-link)] - Text color when the item is active.
+ *
+ * @parent Outline
+ */
+export default class OutlineItem extends OutlineItem_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The URL fragment of the heading this item links to, e.g. `#installation`.
+     */
+    href: string;
+    /**
+     * Heading depth from 1 to 4. Controls how far the item is indented.
+     */
+    level: 1 | 2 | 3 | 4;
+    /**
+     * Whether this item represents the currently active section. Managed by the
+     * parent [Outline](/components/outline/) via its scroll-spy or `active` property.
+     */
+    active: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nord-outline-item': OutlineItem;
+    }
+}
+export {};

package/lib/src/outline/localization.d.ts

@@ -0,0 +1,4 @@
+declare const outlineLocalization: {
+    label: string;
+};
+export default outlineLocalization;

package/lib/src/qrcode/Qrcode.d.ts

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
  * to users which they can quickly scan with their smartphone.
  *
  * @status ready
- * @category image
+ * @category content
  * @displayName QR Code
  */
 export default class Qrcode extends LitElement {

package/lib/src/scroll-area/ScrollArea.d.ts

@@ -12,7 +12,7 @@ declare const ScrollArea_base: typeof LitElement;
  * The scroll machinery lives in shadow DOM; slot your content directly inside.
  *
  * @status draft
- * @category structure
+ * @category layout
  *
  * @slot - The scrollable content.
  *

package/lib/src/stack/Stack.d.ts

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
  * vertical or horizontal axis with optional spacing between each child.
  *
  * @status ready
- * @category structure
+ * @category layout
  * @slot - The stack content.
  *
  * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).

package/lib/src/tag/Tag.d.ts

@@ -6,7 +6,7 @@ declare const Tag_base: (new (...args: any[]) => import("../common/mixins/InputM
  * and organize objects. Commonly used to signify the attributes of an object.
  *
  * @status new
- * @category text
+ * @category content
  * @slot - The tag content.
  *
  * @localization removeLabel - Accessible label for the remove button.

package/lib/src/tag-group/TagGroup.d.ts

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
  * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.
  *
  * @status new
- * @category structure
+ * @category content
  * @slot - The tag group content
  *
  * @fires {NordEvent} change - Fired whenever a tag has been checked or unchecked via user interaction.

package/lib/src/top-bar/TopBar.d.ts

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
  * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.
  *
  * @status ready
- * @category structure
+ * @category layout
  * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.
  * @slot end - Optional slot for menus, buttons, toggles, etc.
  */

package/lib/src/truncate/Truncate.d.ts

@@ -5,7 +5,7 @@ import '../tooltip/Tooltip.js';
  * Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.
  *
  * @status ready
- * @category text
+ * @category content
  * @slot - The full text content. Plain text is recommended; rich markup is
  *   not supported (only `textContent` is read for truncation).
  */

package/lib/src/visually-hidden/VisuallyHidden.d.ts

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * hidden.
  *
  * @status ready
- * @category text
+ * @category content
  * @slot - The visually hidden content.
  */
 export default class VisuallyHidden extends LitElement {

package/lib/tinykeys-DwvDXsEb.js

@@ -0,0 +1,2 @@
+let e=["Shift","Meta","Alt","Control"],t=1e3,n="object"==typeof navigator?navigator.platform:"",o=/Mac|iPod|iPhone|iPad/.test(n)?"Meta":"Control",r="Win32"===n?["Control","Alt"]:["Alt"];function i(e){let t=e.target;return e.repeat||e.isComposing||t!==e.currentTarget&&t.matches("[contenteditable],input,select,textarea")}function a(e,t){return"function"==typeof e.getModifierState&&(e.getModifierState(t)||r.includes(t)&&e.getModifierState("AltGraph"))}function l(t,[n,o,i]){const l=n.includes("AltGraph");return!((i instanceof RegExp?!i.test(t.key)&&!i.test(t.code):i.toUpperCase()!==t.key.toUpperCase()&&i!==t.code)||n.find((e=>!a(t,e)))||e.find((e=>!n.includes(e)&&!o.includes(e)&&i!==e&&a(t,e)&&!(l&&r.includes(e)))))}function c(e,n={}){let r=n.timeout??t,c=n.ignore??i,s=Object.keys(e).map((t=>{return[t,(n=t,n.trim().split(" ").map((e=>{let t=e.split(/(?<=\w|\])\+/),n=t.pop(),r=n.match(/^\((.+)\)$/),i=r?new RegExp(`^(?:${r[1]})$`,"iv"):n,a=[],l=[];for(const e of t){let t=e.match(/^\[(.*)\]$/),n=t?.[1]??e;n="$mod"===n?o:n,t?l.push(n):a.push(n)}return[a,l,i]}))),e[t]];var n})),u=new Map,f=null;return e=>{if(!function(e){return!!(e.key&&e.code&&e.getModifierState)}(e)||c(e))return;let t=[];for(let[n,o,r]of s){let i=u.get(n),[c,...s]=i||o;if(l(e,c))if(s.length>0)u.set(n,s),t.push(n);else{if(u.delete(n),!t.length){r(e);break}console.warn(`tinykeys: Conflict found, "${n}" did not fire, waiting for:`,t)}else a(e,e.key)||u.delete(n)}f&&clearTimeout(f),f=setTimeout((()=>u.clear()),r)}}function s(e,t,n={}){let o=n.event??"keydown",r=c(t,n);return e.addEventListener(o,r,n.capture),()=>{e.removeEventListener(o,r,n.capture)}}export{c,s as t};
+//# sourceMappingURL=tinykeys-DwvDXsEb.js.map

package/lib/tinykeys-DwvDXsEb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinykeys-DwvDXsEb.js","sources":["../../../node_modules/.pnpm/tinykeys@4.0.0/node_modules/tinykeys/dist/tinykeys.mjs"],"sourcesContent":["//#region src/tinykeys.ts\n/**\n* These are the modifier keys that change the meaning of keybindings.\n*\n* Note: Ignoring \"AltGraph\" because it is covered by the others.\n*/\nlet KEYBINDING_MODIFIER_KEYS = [\n\t\"Shift\",\n\t\"Meta\",\n\t\"Alt\",\n\t\"Control\"\n];\n/**\n* Keybinding sequences should timeout if individual key presses are more than\n* 1s apart by default.\n*/\nlet DEFAULT_TIMEOUT = 1e3;\n/**\n* Keybinding sequences should bind to this event by default.\n*/\nlet DEFAULT_EVENT = \"keydown\";\n/**\n* Platform detection code.\n* @see https://github.com/jamiebuilds/tinykeys/issues/184\n*/\nlet PLATFORM = typeof navigator === \"object\" ? navigator.platform : \"\";\n/**\n* An alias for creating platform-specific keybinding aliases.\n*/\nlet MOD = /Mac|iPod|iPhone|iPad/.test(PLATFORM) ? \"Meta\" : \"Control\";\n/**\n* Meaning of `AltGraph`, from MDN:\n* - Windows: Both Alt and Ctrl keys are pressed, or AltGr key is pressed\n* - Mac: ⌥ Option key pressed\n* - Linux: Level 3 Shift key (or Level 5 Shift key) pressed\n* - Android: Not supported\n* @see https://github.com/jamiebuilds/tinykeys/issues/185\n*/\nlet ALT_GRAPH_ALIASES = PLATFORM === \"Win32\" ? [\"Control\", \"Alt\"] : [\"Alt\"];\n/**\n* Ensure and stop any event that isn't a full keyboard event.\n* Autocomplete option navigation and selection would fire an Event,\n* instead of the expected KeyboardEvent\n*/\nfunction isKeyboardEvent(event) {\n\treturn !!(event.key && event.code && event.getModifierState);\n}\n/**\n* Ignores keyboard events from contenteditable and form elements unless they\n* are the current target.\n*/\nfunction defaultKeybindingsHandlerIgnore(event) {\n\tlet target = event.target;\n\treturn event.repeat || event.isComposing || target !== event.currentTarget && target.matches(\"[contenteditable],input,select,textarea\");\n}\n/**\n* There's a bug in Chrome that causes event.getModifierState not to exist on\n* KeyboardEvent's for F1/F2/etc keys.\n*/\nfunction getModifierState(event, mod) {\n\treturn typeof event.getModifierState === \"function\" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState(\"AltGraph\") : false;\n}\n/**\n* Parses a keybinding string into its parts.\n*\n* ```\n* grammar    = `<sequence>`\n* <sequence> = `<press> <press> <press> ...`\n* <press>    = `<key>` or `<mods>+<key>`\n* <mods>     = `<mod>+<mod>+...`\n* <mod>      = `<modifier>` (required) or `[<modifier>]` (optional)\n* <key>      = `<KeyboardEvent.key>` or `<KeyboardEvent.code>` (case-insensitive)\n* <key>      = `(<regex>)` -> `/^(?:<regex>)$/iy` (case-insensitive)\n* ```\n*/\nfunction parseKeybinding(str) {\n\treturn str.trim().split(\" \").map((press) => {\n\t\tlet parts = press.split(/(?<=\\w|\\])\\+/);\n\t\tlet last = parts.pop();\n\t\tlet regex = last.match(/^\\((.+)\\)$/);\n\t\tlet key = regex ? new RegExp(`^(?:${regex[1]})$`, \"iv\") : last;\n\t\tlet requiredModifiers = [];\n\t\tlet optionalModifiers = [];\n\t\tfor (const part of parts) {\n\t\t\tlet optional = part.match(/^\\[(.*)\\]$/);\n\t\t\tlet mod = optional?.[1] ?? part;\n\t\t\tmod = mod === \"$mod\" ? MOD : mod;\n\t\t\tif (optional) optionalModifiers.push(mod);\n\t\t\telse requiredModifiers.push(mod);\n\t\t}\n\t\treturn [\n\t\t\trequiredModifiers,\n\t\t\toptionalModifiers,\n\t\t\tkey\n\t\t];\n\t});\n}\n/**\n* This tells us if a single keyboard event matches a single keybinding press.\n*/\nfunction matchKeybindingPress(event, [requiredModifiers, optionalModifiers, key]) {\n\tconst hasAltGraph = requiredModifiers.includes(\"AltGraph\");\n\treturn !((key instanceof RegExp ? !(key.test(event.key) || key.test(event.code)) : key.toUpperCase() !== event.key.toUpperCase() && key !== event.code) || requiredModifiers.find((mod) => {\n\t\treturn !getModifierState(event, mod);\n\t}) || KEYBINDING_MODIFIER_KEYS.find((mod) => {\n\t\treturn !requiredModifiers.includes(mod) && !optionalModifiers.includes(mod) && key !== mod && getModifierState(event, mod) && !(hasAltGraph && ALT_GRAPH_ALIASES.includes(mod));\n\t}));\n}\n/**\n* Creates an event listener for handling keybindings.\n*\n* @example\n* ```js\n* import { createKeybindingsHandler } from \"../src/keybindings\"\n*\n* let handler = createKeybindingsHandler({\n* \t\"Shift+d\": () => {\n* \t\talert(\"The 'Shift' and 'd' keys were pressed at the same time\")\n* \t},\n* \t\"y e e t\": () => {\n* \t\talert(\"The keys 'y', 'e', 'e', and 't' were pressed in order\")\n* \t},\n* \t\"$mod+d\": () => {\n* \t\talert(\"Either 'Control+d' or 'Meta+d' were pressed\")\n* \t},\n* })\n*\n* window.addEventListener(\"keydown\", handler)\n* ```\n*/\nfunction createKeybindingsHandler(keybindingsMap, options = {}) {\n\tlet timeout = options.timeout ?? DEFAULT_TIMEOUT;\n\tlet ignore = options.ignore ?? defaultKeybindingsHandlerIgnore;\n\tlet keybindings = Object.keys(keybindingsMap).map((input) => {\n\t\treturn [\n\t\t\tinput,\n\t\t\tparseKeybinding(input),\n\t\t\tkeybindingsMap[input]\n\t\t];\n\t});\n\tlet pending = /* @__PURE__ */ new Map();\n\tlet timer = null;\n\treturn (event) => {\n\t\tif (!isKeyboardEvent(event) || ignore(event)) return;\n\t\tlet conflicts = [];\n\t\tfor (let [input, sequence, handler] of keybindings) {\n\t\t\tlet prev = pending.get(input);\n\t\t\tlet [current, ...rest] = prev ? prev : sequence;\n\t\t\tif (!matchKeybindingPress(event, current)) {\n\t\t\t\tif (!getModifierState(event, event.key)) pending.delete(input);\n\t\t\t} else if (rest.length > 0) {\n\t\t\t\tpending.set(input, rest);\n\t\t\t\tconflicts.push(input);\n\t\t\t} else {\n\t\t\t\tpending.delete(input);\n\t\t\t\tif (conflicts.length) console.warn(`tinykeys: Conflict found, \"${input}\" did not fire, waiting for:`, conflicts);\n\t\t\t\telse {\n\t\t\t\t\thandler(event);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif (timer) clearTimeout(timer);\n\t\ttimer = setTimeout(() => pending.clear(), timeout);\n\t};\n}\n/**\n* Subscribes to keybindings.\n*\n* Returns an unsubscribe method.\n*\n* @example\n* ```js\n* import { tinykeys } from \"../src/tinykeys\"\n*\n* tinykeys(window, {\n* \t\"Shift+d\": () => {\n* \t\talert(\"The 'Shift' and 'd' keys were pressed at the same time\")\n* \t},\n* \t\"y e e t\": () => {\n* \t\talert(\"The keys 'y', 'e', 'e', and 't' were pressed in order\")\n* \t},\n* \t\"$mod+d\": () => {\n* \t\talert(\"Either 'Control+d' or 'Meta+d' were pressed\")\n* \t},\n* })\n* ```\n*/\nfunction tinykeys(target, keybindingMap, options = {}) {\n\tlet event = options.event ?? DEFAULT_EVENT;\n\tlet onKeyEvent = createKeybindingsHandler(keybindingMap, options);\n\ttarget.addEventListener(event, onKeyEvent, options.capture);\n\treturn () => {\n\t\ttarget.removeEventListener(event, onKeyEvent, options.capture);\n\t};\n}\n//#endregion\nexport { createKeybindingsHandler, defaultKeybindingsHandlerIgnore, matchKeybindingPress, parseKeybinding, tinykeys };\n\n//# sourceMappingURL=tinykeys.mjs.map"],"names":["KEYBINDING_MODIFIER_KEYS","DEFAULT_TIMEOUT","PLATFORM","navigator","platform","MOD","test","ALT_GRAPH_ALIASES","defaultKeybindingsHandlerIgnore","event","target","repeat","isComposing","currentTarget","matches","getModifierState","mod","includes","matchKeybindingPress","requiredModifiers","optionalModifiers","key","hasAltGraph","RegExp","code","toUpperCase","find","createKeybindingsHandler","keybindingsMap","options","timeout","ignore","keybindings","Object","keys","map","input","str","trim","split","press","parts","last","pop","regex","match","part","optional","push","pending","Map","timer","isKeyboardEvent","conflicts","sequence","handler","prev","get","current","rest","length","set","delete","console","warn","clearTimeout","setTimeout","clear","tinykeys","keybindingMap","onKeyEvent","addEventListener","capture","removeEventListener"],"mappings":"AAMA,IAAIA,EAA2B,CAC9B,QACA,OACA,MACA,WAMGC,EAAkB,IASlBC,EAAgC,iBAAdC,UAAyBA,UAAUC,SAAW,GAIhEC,EAAM,uBAAuBC,KAAKJ,GAAY,OAAS,UASvDK,EAAiC,UAAbL,EAAuB,CAAC,UAAW,OAAS,CAAC,OAarE,SAASM,EAAgCC,GACxC,IAAIC,EAASD,EAAMC,OACnB,OAAOD,EAAME,QAAUF,EAAMG,aAAeF,IAAWD,EAAMI,eAAiBH,EAAOI,QAAQ,0CAC9F,CAKA,SAASC,EAAiBN,EAAOO,GAChC,MAAyC,mBAA3BP,EAAMM,mBAAkCN,EAAMM,iBAAiBC,IAAQT,EAAkBU,SAASD,IAAQP,EAAMM,iBAAiB,YAChJ,CAuCA,SAASG,EAAqBT,GAAQU,EAAmBC,EAAmBC,IAC3E,MAAMC,EAAcH,EAAkBF,SAAS,YAC/C,SAAUI,aAAeE,QAAWF,EAAIf,KAAKG,EAAMY,OAAQA,EAAIf,KAAKG,EAAMe,MAASH,EAAII,gBAAkBhB,EAAMY,IAAII,eAAiBJ,IAAQZ,EAAMe,OAASL,EAAkBO,MAAMV,IAC1KD,EAAiBN,EAAOO,MAC3BhB,EAAyB0B,MAAMV,IAC5BG,EAAkBF,SAASD,KAASI,EAAkBH,SAASD,IAAQK,IAAQL,GAAOD,EAAiBN,EAAOO,MAAUM,GAAef,EAAkBU,SAASD,MAE5K,CAuBA,SAASW,EAAyBC,EAAgBC,EAAU,IAC3D,IAAIC,EAAUD,EAAQC,SAAW7B,EAC7B8B,EAASF,EAAQE,QAAUvB,EAC3BwB,EAAcC,OAAOC,KAAKN,GAAgBO,KAAKC,IAClD,MAAO,CACNA,GA5DsBC,EA6DND,EA5DXC,EAAIC,OAAOC,MAAM,KAAKJ,KAAKK,IACjC,IAAIC,EAAQD,EAAMD,MAAM,gBACpBG,EAAOD,EAAME,MACbC,EAAQF,EAAKG,MAAM,cACnBxB,EAAMuB,EAAQ,IAAIrB,OAAO,OAAOqB,EAAM,OAAQ,MAAQF,EACtDvB,EAAoB,GACpBC,EAAoB,GACxB,IAAK,MAAM0B,KAAQL,EAAO,CACzB,IAAIM,EAAWD,EAAKD,MAAM,cACtB7B,EAAM+B,IAAW,IAAMD,EAC3B9B,EAAc,SAARA,EAAiBX,EAAMW,EACzB+B,EAAU3B,EAAkB4B,KAAKhC,GAChCG,EAAkB6B,KAAKhC,EAC5B,CACD,MAAO,CACNG,EACAC,EACAC,EACA,KA2CAO,EAAeQ,IA9DlB,IAAyBC,CA+DtB,IAEEY,EAA0B,IAAIC,IAC9BC,EAAQ,KACZ,OAAQ1C,IACP,IAnGF,SAAyBA,GACxB,SAAUA,EAAMY,KAAOZ,EAAMe,MAAQf,EAAMM,iBAC5C,CAiGOqC,CAAgB3C,IAAUsB,EAAOtB,GAAQ,OAC9C,IAAI4C,EAAY,GAChB,IAAK,IAAKjB,EAAOkB,EAAUC,KAAYvB,EAAa,CACnD,IAAIwB,EAAOP,EAAQQ,IAAIrB,IAClBsB,KAAYC,GAAQH,GAAcF,EACvC,GAAKpC,EAAqBT,EAAOiD,GAE1B,GAAIC,EAAKC,OAAS,EACxBX,EAAQY,IAAIzB,EAAOuB,GACnBN,EAAUL,KAAKZ,OACT,CAEN,GADAa,EAAQa,OAAO1B,IACXiB,EAAUO,OACT,CACJL,EAAQ9C,GACR,KACA,CAJqBsD,QAAQC,KAAK,8BAA8B5B,gCAAqCiB,EAKtG,MAXKtC,EAAiBN,EAAOA,EAAMY,MAAM4B,EAAQa,OAAO1B,EAYzD,CACGe,GAAOc,aAAad,GACxBA,EAAQe,YAAW,IAAMjB,EAAQkB,SAASrC,EAAQ,CAEpD,CAuBA,SAASsC,EAAS1D,EAAQ2D,EAAexC,EAAU,CAAA,GAClD,IAAIpB,EAAQoB,EAAQpB,OAzKD,UA0Kf6D,EAAa3C,EAAyB0C,EAAexC,GAEzD,OADAnB,EAAO6D,iBAAiB9D,EAAO6D,EAAYzC,EAAQ2C,SAC5C,KACN9D,EAAO+D,oBAAoBhE,EAAO6D,EAAYzC,EAAQ2C,QAAQ,CAEhE","x_google_ignoreList":[0]}

package/lib/translation.js

@@ -1,2 +1,2 @@
-import{isServer as o}from"lit";import t from"./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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";const i=new Set,n=new Set,a=new Map;function r(o,t){if(!l(t))return t;if(!l(o))return t;const i={...o};for(const o in t){const n=t[o],a=i[o];l(n)&&l(a)?i[o]=r(a,n):i[o]=n}return i}function l(o){return null!==o&&"object"==typeof o&&!Array.isArray(o)}if(!o){new MutationObserver((function(){for(const o of i)o()})).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]})}function c(){a.clear()}function e(...o){o.forEach((o=>{const t=o.$lang.toLowerCase(),i=a.get(t),n=i?r(i,o):o;a.set(t,n)})),function(){for(const o of n)o()}()}function s(o){return i.add(o),()=>i.delete(o)}function m(o){return n.add(o),()=>n.delete(o)}function p(o){return a.has(o)}function u(o){const i=o.toLowerCase(),[n]=i.split("-");return a.get(i)||a.get(n)||t}export{c as clearTranslations,t as fallback,p as isTranslationRegistered,e as registerTranslation,u as resolveTranslation,s as subscribeToDocumentLang,m as subscribeToTranslationRegistration};
+import{isServer as o}from"lit";import t from"./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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";const i=new Set,n=new Set,a=new Map;function r(o,t){if(!l(t))return t;if(!l(o))return t;const i={...o};for(const o in t){const n=t[o],a=i[o];l(n)&&l(a)?i[o]=r(a,n):i[o]=n}return i}function l(o){return null!==o&&"object"==typeof o&&!Array.isArray(o)}if(!o){new MutationObserver((function(){for(const o of i)o()})).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]})}function c(){a.clear()}function e(...o){o.forEach((o=>{const t=o.$lang.toLowerCase(),i=a.get(t),n=i?r(i,o):o;a.set(t,n)})),function(){for(const o of n)o()}()}function s(o){return i.add(o),()=>i.delete(o)}function m(o){return n.add(o),()=>n.delete(o)}function p(o){return a.has(o)}function j(o){const i=o.toLowerCase(),[n]=i.split("-");return a.get(i)||a.get(n)||t}export{c as clearTranslations,t as fallback,p as isTranslationRegistered,e as registerTranslation,j as resolveTranslation,s as subscribeToDocumentLang,m as subscribeToTranslationRegistration};
 //# sourceMappingURL=translation.js.map

package/lib/translation.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation.js","sources":["../src/localization/translation.ts"],"sourcesContent":["import { isServer } from 'lit'\nimport en from './en-us.js'\n\n// gets list of properties beginning prefix\ntype PickStartsWith<T, Prefix extends string> = T extends `${Prefix}${string}` ? T : never\n\n// Recursively make all properties optional\ntype DeepPartial<T> = T extends object\n  ? {\n      [P in keyof T]?: DeepPartial<T[P]>\n    }\n  : T\n\nexport type Translation = typeof en\nexport type PartialTranslation = {\n  $lang: string\n  $name?: string\n  $dir?: 'ltr' | 'rtl'\n} & DeepPartial<Omit<Translation, '$lang' | '$name' | '$dir'>>\nexport type WellKnownKeys = PickStartsWith<keyof Translation, '$'>\n\nconst documentLangSubscribers = new Set<() => void>()\nconst translationRegistrationSubscribers = new Set<() => void>()\nconst translations = new Map<string, Translation>()\n\nfunction notifyDocumentLangChange() {\n  for (const subscriber of documentLangSubscribers) {\n    subscriber()\n  }\n}\n\nfunction notifyTranslationRegistration() {\n  for (const subscriber of translationRegistrationSubscribers) {\n    subscriber()\n  }\n}\n\nfunction deepMerge(target: unknown, source: unknown): unknown {\n  if (!isObject(source))\n    return source\n\n  if (!isObject(target))\n    return source\n\n  const result = { ...target }\n\n  for (const key in source) {\n    const sourceValue = (source as Record<string, unknown>)[key]\n    const targetValue = result[key]\n\n    if (isObject(sourceValue) && isObject(targetValue)) {\n      result[key] = deepMerge(targetValue, sourceValue)\n    }\n    else {\n      result[key] = sourceValue\n    }\n  }\n\n  return result\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n}\n\n// observe changes to the document's lang\nif (!isServer) {\n  const observer = new MutationObserver(notifyDocumentLangChange)\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['lang'],\n  })\n}\n\n/**\n * Removes all registered translations\n */\nexport function clearTranslations() {\n  translations.clear()\n}\n\n/**\n * Registers one or more translations. If a translation for the same language\n * already exists, the new translation will be deep-merged with the existing one.\n * Translations can be partial — only the fields you provide will override existing values.\n */\nexport function registerTranslation(...translation: (Translation | PartialTranslation)[]) {\n  translation.forEach((t) => {\n    const lang = t.$lang.toLowerCase()\n    const existing = translations.get(lang)\n\n    // Deep merge: keep existing keys, override with new ones\n    const merged = existing ? (deepMerge(existing, t) as Translation) : (t as Translation)\n    translations.set(lang, merged)\n  })\n\n  notifyTranslationRegistration()\n}\n\n/**\n * subscribe to document language changes\n * @param onChange callback for when document `lang` attr changes\n * @returns cleanup function\n */\nexport function subscribeToDocumentLang(onChange: () => void): () => void {\n  documentLangSubscribers.add(onChange)\n  return () => documentLangSubscribers.delete(onChange)\n}\n\n/**\n * subscribe to translation registration changes\n * @param onChange callback for when new translations are registered\n * @returns cleanup function\n */\nexport function subscribeToTranslationRegistration(onChange: () => void): () => void {\n  translationRegistrationSubscribers.add(onChange)\n  return () => translationRegistrationSubscribers.delete(onChange)\n}\n\n/**\n * Check whether there is a translation registered for the given lang\n * @param lang the lang code e.g. \"en\" or \"en-GB\"\n */\nexport function isTranslationRegistered(lang: string) {\n  return translations.has(lang)\n}\n\n/**\n * Picks the most appropriate translation for the given language, from most specific to least specific.\n * First tries lang + region, then lang only, then fallback.\n */\nexport function resolveTranslation(langCode: string) {\n  const lang = langCode.toLowerCase()\n  const [langOnly] = lang.split('-')\n\n  return translations.get(lang) || translations.get(langOnly) || en\n}\n\nexport { en as fallback }\n"],"names":["documentLangSubscribers","Set","translationRegistrationSubscribers","translations","Map","deepMerge","target","source","isObject","result","key","sourceValue","targetValue","value","Array","isArray","isServer","MutationObserver","subscriber","observe","document","documentElement","attributes","attributeFilter","clearTranslations","clear","registerTranslation","translation","forEach","t","lang","$lang","toLowerCase","existing","get","merged","set","notifyTranslationRegistration","subscribeToDocumentLang","onChange","add","delete","subscribeToTranslationRegistration","isTranslationRegistered","has","resolveTranslation","langCode","langOnly","split","en"],"mappings":"upBAqBA,MAAMA,EAA0B,IAAIC,IAC9BC,EAAqC,IAAID,IACzCE,EAAe,IAAIC,IAczB,SAASC,EAAUC,EAAiBC,GAClC,IAAKC,EAASD,GACZ,OAAOA,EAET,IAAKC,EAASF,GACZ,OAAOC,EAET,MAAME,EAAS,IAAKH,GAEpB,IAAK,MAAMI,KAAOH,EAAQ,CACxB,MAAMI,EAAeJ,EAAmCG,GAClDE,EAAcH,EAAOC,GAEvBF,EAASG,IAAgBH,EAASI,GACpCH,EAAOC,GAAOL,EAAUO,EAAaD,GAGrCF,EAAOC,GAAOC,CAEjB,CAED,OAAOF,CACT,CAEA,SAASD,EAASK,GAChB,OAAiB,OAAVA,GAAmC,iBAAVA,IAAuBC,MAAMC,QAAQF,EACvE,CAGA,IAAKG,EAAU,CACI,IAAIC,kBA1CvB,WACE,IAAK,MAAMC,KAAclB,EACvBkB,GAEJ,IAwCWC,QAAQC,SAASC,gBAAiB,CACzCC,YAAY,EACZC,gBAAiB,CAAC,SAEtB,UAKgBC,IACdrB,EAAasB,OACf,CAOgB,SAAAC,KAAuBC,GACrCA,EAAYC,SAASC,IACnB,MAAMC,EAAOD,EAAEE,MAAMC,cACfC,EAAW9B,EAAa+B,IAAIJ,GAG5BK,EAASF,EAAY5B,EAAU4B,EAAUJ,GAAsBA,EACrE1B,EAAaiC,IAAIN,EAAMK,EAAO,IA/DlC,WACE,IAAK,MAAMjB,KAAchB,EACvBgB,GAEJ,CA8DEmB,EACF,CAOM,SAAUC,EAAwBC,GAEtC,OADAvC,EAAwBwC,IAAID,GACrB,IAAMvC,EAAwByC,OAAOF,EAC9C,CAOM,SAAUG,EAAmCH,GAEjD,OADArC,EAAmCsC,IAAID,GAChC,IAAMrC,EAAmCuC,OAAOF,EACzD,CAMM,SAAUI,EAAwBb,GACtC,OAAO3B,EAAayC,IAAId,EAC1B,CAMM,SAAUe,EAAmBC,GACjC,MAAMhB,EAAOgB,EAASd,eACfe,GAAYjB,EAAKkB,MAAM,KAE9B,OAAO7C,EAAa+B,IAAIJ,IAAS3B,EAAa+B,IAAIa,IAAaE,CACjE"}
+{"version":3,"file":"translation.js","sources":["../src/localization/translation.ts"],"sourcesContent":["import { isServer } from 'lit'\nimport en from './en-us.js'\n\n// gets list of properties beginning prefix\ntype PickStartsWith<T, Prefix extends string> = T extends `${Prefix}${string}` ? T : never\n\n// Recursively make all properties optional\ntype DeepPartial<T> = T extends object\n  ? {\n      [P in keyof T]?: DeepPartial<T[P]>\n    }\n  : T\n\nexport type Translation = typeof en\nexport type PartialTranslation = {\n  $lang: string\n  $name?: string\n  $dir?: 'ltr' | 'rtl'\n} & DeepPartial<Omit<Translation, '$lang' | '$name' | '$dir'>>\nexport type WellKnownKeys = PickStartsWith<keyof Translation, '$'>\n\nconst documentLangSubscribers = new Set<() => void>()\nconst translationRegistrationSubscribers = new Set<() => void>()\nconst translations = new Map<string, Translation>()\n\nfunction notifyDocumentLangChange() {\n  for (const subscriber of documentLangSubscribers) {\n    subscriber()\n  }\n}\n\nfunction notifyTranslationRegistration() {\n  for (const subscriber of translationRegistrationSubscribers) {\n    subscriber()\n  }\n}\n\nfunction deepMerge(target: unknown, source: unknown): unknown {\n  if (!isObject(source))\n    return source\n\n  if (!isObject(target))\n    return source\n\n  const result = { ...target }\n\n  for (const key in source) {\n    const sourceValue = (source as Record<string, unknown>)[key]\n    const targetValue = result[key]\n\n    if (isObject(sourceValue) && isObject(targetValue)) {\n      result[key] = deepMerge(targetValue, sourceValue)\n    }\n    else {\n      result[key] = sourceValue\n    }\n  }\n\n  return result\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n}\n\n// observe changes to the document's lang\nif (!isServer) {\n  const observer = new MutationObserver(notifyDocumentLangChange)\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['lang'],\n  })\n}\n\n/**\n * Removes all registered translations\n */\nexport function clearTranslations() {\n  translations.clear()\n}\n\n/**\n * Registers one or more translations. If a translation for the same language\n * already exists, the new translation will be deep-merged with the existing one.\n * Translations can be partial — only the fields you provide will override existing values.\n */\nexport function registerTranslation(...translation: (Translation | PartialTranslation)[]) {\n  translation.forEach((t) => {\n    const lang = t.$lang.toLowerCase()\n    const existing = translations.get(lang)\n\n    // Deep merge: keep existing keys, override with new ones\n    const merged = existing ? (deepMerge(existing, t) as Translation) : (t as Translation)\n    translations.set(lang, merged)\n  })\n\n  notifyTranslationRegistration()\n}\n\n/**\n * subscribe to document language changes\n * @param onChange callback for when document `lang` attr changes\n * @returns cleanup function\n */\nexport function subscribeToDocumentLang(onChange: () => void): () => void {\n  documentLangSubscribers.add(onChange)\n  return () => documentLangSubscribers.delete(onChange)\n}\n\n/**\n * subscribe to translation registration changes\n * @param onChange callback for when new translations are registered\n * @returns cleanup function\n */\nexport function subscribeToTranslationRegistration(onChange: () => void): () => void {\n  translationRegistrationSubscribers.add(onChange)\n  return () => translationRegistrationSubscribers.delete(onChange)\n}\n\n/**\n * Check whether there is a translation registered for the given lang\n * @param lang the lang code e.g. \"en\" or \"en-GB\"\n */\nexport function isTranslationRegistered(lang: string) {\n  return translations.has(lang)\n}\n\n/**\n * Picks the most appropriate translation for the given language, from most specific to least specific.\n * First tries lang + region, then lang only, then fallback.\n */\nexport function resolveTranslation(langCode: string) {\n  const lang = langCode.toLowerCase()\n  const [langOnly] = lang.split('-')\n\n  return translations.get(lang) || translations.get(langOnly) || en\n}\n\nexport { en as fallback }\n"],"names":["documentLangSubscribers","Set","translationRegistrationSubscribers","translations","Map","deepMerge","target","source","isObject","result","key","sourceValue","targetValue","value","Array","isArray","isServer","MutationObserver","subscriber","observe","document","documentElement","attributes","attributeFilter","clearTranslations","clear","registerTranslation","translation","forEach","t","lang","$lang","toLowerCase","existing","get","merged","set","notifyTranslationRegistration","subscribeToDocumentLang","onChange","add","delete","subscribeToTranslationRegistration","isTranslationRegistered","has","resolveTranslation","langCode","langOnly","split","en"],"mappings":"+sBAqBA,MAAMA,EAA0B,IAAIC,IAC9BC,EAAqC,IAAID,IACzCE,EAAe,IAAIC,IAczB,SAASC,EAAUC,EAAiBC,GAClC,IAAKC,EAASD,GACZ,OAAOA,EAET,IAAKC,EAASF,GACZ,OAAOC,EAET,MAAME,EAAS,IAAKH,GAEpB,IAAK,MAAMI,KAAOH,EAAQ,CACxB,MAAMI,EAAeJ,EAAmCG,GAClDE,EAAcH,EAAOC,GAEvBF,EAASG,IAAgBH,EAASI,GACpCH,EAAOC,GAAOL,EAAUO,EAAaD,GAGrCF,EAAOC,GAAOC,CAEjB,CAED,OAAOF,CACT,CAEA,SAASD,EAASK,GAChB,OAAiB,OAAVA,GAAmC,iBAAVA,IAAuBC,MAAMC,QAAQF,EACvE,CAGA,IAAKG,EAAU,CACI,IAAIC,kBA1CvB,WACE,IAAK,MAAMC,KAAclB,EACvBkB,GAEJ,IAwCWC,QAAQC,SAASC,gBAAiB,CACzCC,YAAY,EACZC,gBAAiB,CAAC,SAEtB,UAKgBC,IACdrB,EAAasB,OACf,CAOgB,SAAAC,KAAuBC,GACrCA,EAAYC,SAASC,IACnB,MAAMC,EAAOD,EAAEE,MAAMC,cACfC,EAAW9B,EAAa+B,IAAIJ,GAG5BK,EAASF,EAAY5B,EAAU4B,EAAUJ,GAAsBA,EACrE1B,EAAaiC,IAAIN,EAAMK,EAAO,IA/DlC,WACE,IAAK,MAAMjB,KAAchB,EACvBgB,GAEJ,CA8DEmB,EACF,CAOM,SAAUC,EAAwBC,GAEtC,OADAvC,EAAwBwC,IAAID,GACrB,IAAMvC,EAAwByC,OAAOF,EAC9C,CAOM,SAAUG,EAAmCH,GAEjD,OADArC,EAAmCsC,IAAID,GAChC,IAAMrC,EAAmCuC,OAAOF,EACzD,CAMM,SAAUI,EAAwBb,GACtC,OAAO3B,EAAayC,IAAId,EAC1B,CAMM,SAAUe,EAAmBC,GACjC,MAAMhB,EAAOgB,EAASd,eACfe,GAAYjB,EAAKkB,MAAM,KAE9B,OAAO7C,EAAa+B,IAAIJ,IAAS3B,EAAa+B,IAAIa,IAAaE,CACjE"}

package/lib/vue.d.ts

@@ -685,6 +685,17 @@ interface NordComponents {
     }
   >;
 
+  "nord-outline": DefineComponent<
+    WCProps<Components.Outline> & {
+      /**
+       * Dispatched when the active section changes. Includes an `activeId` property.
+       */
+      onChange?: (event: Event) => void;
+    }
+  >;
+
+  "nord-outline-item": DefineComponent<WCProps<Components.OutlineItem> & {}>;
+
   "nord-pagination": DefineComponent<WCProps<Components.Pagination> & {}>;
 
   "nord-pagination-content": DefineComponent<

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordhealth/components",
   "type": "module",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.1",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -44,14 +44,14 @@
     "@tanstack/virtual-core": "3.17.1",
     "lit": "^3.3.2",
     "qr": "^0.4.2",
-    "tinykeys": "^1.4.0"
+    "tinykeys": "^4.0.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@nordhealth/css": "^4.4.1",
     "@nordhealth/fonts": "^3.0.4",
-    "@nordhealth/themes": "^10.0.0-alpha.0",
-    "@nordhealth/tokens": "^9.0.0-alpha.0",
+    "@nordhealth/themes": "^10.0.1",
+    "@nordhealth/tokens": "^9.0.1",
     "@open-wc/testing-helpers": "^3.0.1",
     "@playwright/test": "1.58.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
@@ -88,5 +88,5 @@
       "rollup": "~4.21.3"
     }
   },
-  "gitHead": "d2dc72c154367b3cfd96fef8d316315df2e9f246"
+  "gitHead": "9499a03daba4b5ffa56d49bf43d163edf119a372"
 }