@sb1/indeks-web 0.18.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sb1/indeks-web
 
+## 0.19.0
+
+### Minor Changes
+
+-   ef4f6e2: Ny DropdownMenu-komponent for handlingsmenyer og navigasjon. Komponenten følger APG Menu Button-mønsteret med full tastaturstøtte (piltaster, Home/End, Escape, typeahead), submenyer, og automatisk ARIA-oppsett. CSS-laget definerer `.ix-dropdown__menu`, `.ix-dropdown__item`, `.ix-dropdown__divider` og `.ix-dropdown__group`. Web component `<ix-dropdown>` håndterer åpne/lukke, posisjonering og fokusstyring. React-wrapperen `<DropdownMenu>` eksponerer `<DropdownMenu.Trigger>`, `<DropdownMenu.Menu>`, `<DropdownMenu.Item>`, `<DropdownMenu.Divider>` og `<DropdownMenu.Group>`.
+
 ## 0.18.1
 
 ## 0.18.0

package/dist/npm/index.d.ts

@@ -1,6 +1,7 @@
 import { IxCheckboxGroup } from './lib/components/checkbox-group/IxCheckboxGroup.js';
 import { IxCombobox } from './lib/components/combobox/IxCombobox.js';
 import { IxDateField } from './lib/components/date-field/IxDateField.js';
+import { IxDropdown } from './lib/components/dropdown/IxDropdown.js';
 import { IxField } from './lib/components/field/IxField.js';
 import { IxIcon, IconName } from './lib/components/icon/IxIcon.js';
 import { IxPhoneNumberField } from './lib/components/phone-number-field/IxPhoneNumberField.js';
@@ -13,6 +14,7 @@ export { IxRadioGroup };
 export { IxCheckboxGroup };
 export { IxCombobox };
 export { IxDateField };
+export { IxDropdown };
 export { IxPhoneNumberField };
 export { IxProgressBar };
 export type { ProgressBarState } from './lib/components/progress-bar/IxProgressBar.js';
@@ -32,6 +34,7 @@ declare global {
         'ix-checkbox-group': IxCheckboxGroup;
         'ix-combobox': IxCombobox;
         'ix-date-field': IxDateField;
+        'ix-dropdown': IxDropdown;
         'ix-phone-number-field': IxPhoneNumberField;
         'ix-progress-bar': IxProgressBar;
         'ix-tabs': IxTabs;
@@ -101,6 +104,11 @@ declare global {
                 class?: string;
                 children?: unknown;
             };
+            'ix-dropdown': {
+                open?: boolean | '';
+                placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+                'data-submenu'?: boolean | '';
+            };
             'ix-icon': {
                 name?: IconName;
                 'data-size'?: 'sm' | 'md' | 'lg' | 'xl';

package/dist/npm/index.js

@@ -506,7 +506,8 @@ var IxCombobox = class extends HTMLElement {
 		listbox.style.left = `${Math.max(8, r.left)}px`;
 		const ph = listbox.offsetHeight;
 		const spaceBelow = vh - r.bottom;
-		if (ph > spaceBelow && r.top > spaceBelow) listbox.style.top = `${Math.max(8, r.top - ph - gap)}px`;
+		const spaceAbove = r.top;
+		if (ph > spaceBelow && spaceAbove > spaceBelow) listbox.style.top = `${Math.max(8, r.top - ph - gap)}px`;
 		else listbox.style.top = `${r.bottom + gap}px`;
 	}
 	_addRepositionListeners() {
@@ -1321,6 +1322,492 @@ var IxDateField = class extends HTMLElement {
 	}
 };
 //#endregion
+//#region lib/components/dropdown/IxDropdown.ts
+/**
+* IxDropdown — ARIA-lim for en nedtrekksmeny med handlinger eller navigasjon.
+*
+* ## Designfilosofi
+*
+* Komponenten kobler en trigger-knapp med en meny. Forfatteren skriver en
+* <button> (trigger) og en .ix-dropdown__menu med .ix-dropdown__item-elementer
+* i light DOM. Komponentens jobb er å sette opp ARIA-attributter, håndtere
+* tastaturnavigasjon, posisjonere menyen, og styre åpen/lukket-tilstand.
+*
+* ## Roving tabindex
+*
+* Alle items har tabindex="-1" unntatt det aktive (fokuserte). Piltaster
+* flytter fokus mellom items. Dette følger APG Menu Button-mønsteret.
+*
+* ## Submenyer
+*
+* En submenu er en nøstet <ix-dropdown data-submenu> inne i parent-menyen.
+* ArrowRight på en submenu-trigger åpner submenyen, ArrowLeft lukker den.
+* Submenyen posisjoneres til høyre for parent-item (flipper ved plassmangel).
+*
+* ## Posisjonering
+*
+* Menyen posisjoneres manuelt med getBoundingClientRect + viewport-clamp
+* (samme grep som tooltip og combobox) — position: fixed, JS setter top/left.
+*
+* @example
+* <ix-dropdown>
+*   <button class="ix-button" data-variant="secondary">Handlinger</button>
+*   <div class="ix-dropdown__menu">
+*     <button class="ix-dropdown__item">Rediger</button>
+*     <button class="ix-dropdown__item">Dupliser</button>
+*     <hr class="ix-dropdown__divider" />
+*     <button class="ix-dropdown__item" data-danger>Slett</button>
+*   </div>
+* </ix-dropdown>
+*/
+var dropdownCounter = 0;
+var IxDropdown = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_instanceId", 0);
+		_defineProperty(this, "_trigger", null);
+		_defineProperty(this, "_menu", null);
+		_defineProperty(this, "_items", []);
+		_defineProperty(this, "_activeIndex", -1);
+		_defineProperty(this, "_onTriggerClick", null);
+		_defineProperty(this, "_onTriggerKeydown", null);
+		_defineProperty(this, "_onMenuKeydown", null);
+		_defineProperty(this, "_onMenuClick", null);
+		_defineProperty(this, "_onMenuPointerenter", null);
+		_defineProperty(this, "_onDocPointer", null);
+		_defineProperty(this, "_onFocusout", null);
+		_defineProperty(this, "_onReposition", null);
+		_defineProperty(this, "_itemObserver", null);
+		_defineProperty(this, "_typeaheadBuffer", "");
+		_defineProperty(this, "_typeaheadTimer", null);
+		_defineProperty(this, "_openedWithKeyboard", false);
+	}
+	static get observedAttributes() {
+		return [
+			"open",
+			"placement",
+			"data-controlled"
+		];
+	}
+	/**
+	* Kontrollert modus: når `data-controlled` er satt, endrer ikke komponenten
+	* egen åpen-tilstand. Den dispatcher kun `open-request` / `close-request`,
+	* og foreldren må sette `open`-attributtet for å faktisk åpne/lukke.
+	*/
+	get _isControlled() {
+		return this.hasAttribute("data-controlled");
+	}
+	connectedCallback() {
+		this._instanceId = ++dropdownCounter;
+		this._wire();
+	}
+	disconnectedCallback() {
+		if (this._trigger) {
+			if (this._onTriggerClick) this._trigger.removeEventListener("click", this._onTriggerClick);
+			if (this._onTriggerKeydown) this._trigger.removeEventListener("keydown", this._onTriggerKeydown);
+		}
+		if (this._menu) {
+			if (this._onMenuKeydown) this._menu.removeEventListener("keydown", this._onMenuKeydown);
+			if (this._onMenuClick) this._menu.removeEventListener("click", this._onMenuClick);
+			if (this._onMenuPointerenter) this._menu.removeEventListener("pointerenter", this._onMenuPointerenter, true);
+		}
+		if (this._onDocPointer) document.removeEventListener("pointerdown", this._onDocPointer, true);
+		if (this._onFocusout) this.removeEventListener("focusout", this._onFocusout);
+		this._removeRepositionListeners();
+		this._itemObserver?.disconnect();
+		if (this._typeaheadTimer) {
+			clearTimeout(this._typeaheadTimer);
+			this._typeaheadTimer = null;
+		}
+		this._onTriggerClick = null;
+		this._onTriggerKeydown = null;
+		this._onMenuKeydown = null;
+		this._onMenuClick = null;
+		this._onMenuPointerenter = null;
+		this._onDocPointer = null;
+		this._onFocusout = null;
+		this._onReposition = null;
+		this._itemObserver = null;
+		this._trigger = null;
+		this._menu = null;
+		this._items = [];
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (!this.isConnected) return;
+		if (name === "open") {
+			const shouldBeOpen = newValue !== null && newValue !== "false";
+			if (shouldBeOpen && !this._isOpen) this._doOpen();
+			else if (!shouldBeOpen && this._isOpen) this._doClose();
+		} else if (name === "placement" && this._isOpen) this._position();
+	}
+	get open() {
+		const attr = this.getAttribute("open");
+		return attr !== null && attr !== "false";
+	}
+	set open(value) {
+		this.toggleAttribute("open", value);
+	}
+	get _isOpen() {
+		return this.hasAttribute("data-open");
+	}
+	get _isSubmenu() {
+		return this.hasAttribute("data-submenu");
+	}
+	get _placement() {
+		return this.getAttribute("placement") ?? "bottom-start";
+	}
+	_wire() {
+		this._menu = this.querySelector(":scope > .ix-dropdown__menu");
+		if (this._isSubmenu) this._trigger = this.querySelector(":scope > .ix-dropdown__item");
+		else this._trigger = Array.from(this.children).find((child) => child instanceof HTMLElement && !child.classList.contains("ix-dropdown__menu")) ?? null;
+		if (!this._trigger || !this._menu) return;
+		if (!this._menu.id) this._menu.id = `ix-dropdown-menu-${this._instanceId}`;
+		if (!this._menu.getAttribute("role")) this._menu.setAttribute("role", "menu");
+		this._menu.hidden = true;
+		this._trigger.setAttribute("aria-haspopup", "menu");
+		this._trigger.setAttribute("aria-expanded", "false");
+		this._trigger.setAttribute("aria-controls", this._menu.id);
+		this._wireItems();
+		this._onTriggerClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this._openedWithKeyboard = false;
+			this._toggleOpen();
+		};
+		this._trigger.addEventListener("click", this._onTriggerClick);
+		this._onTriggerKeydown = (e) => this._handleTriggerKeydown(e);
+		this._trigger.addEventListener("keydown", this._onTriggerKeydown);
+		this._onMenuKeydown = (e) => this._handleMenuKeydown(e);
+		this._menu.addEventListener("keydown", this._onMenuKeydown);
+		this._onMenuClick = (e) => {
+			const item = e.target.closest(".ix-dropdown__item");
+			if (item && this._menu?.contains(item)) this._handleItemClick(e, item);
+		};
+		this._menu.addEventListener("click", this._onMenuClick);
+		this._onMenuPointerenter = (e) => {
+			const item = e.target.closest(".ix-dropdown__item");
+			if (item && this._menu?.contains(item)) {
+				const idx = this._items.indexOf(item);
+				if (idx !== -1) this._handleItemPointerEnter(idx);
+			}
+		};
+		this._menu.addEventListener("pointerenter", this._onMenuPointerenter, true);
+		this._onDocPointer = (e) => {
+			if (!this._isOpen) return;
+			const target = e.target;
+			if (!this.contains(target)) this._close();
+		};
+		document.addEventListener("pointerdown", this._onDocPointer, true);
+		this._onFocusout = (e) => {
+			if (!this._isOpen) return;
+			const relatedTarget = e.relatedTarget;
+			if (relatedTarget && this.contains(relatedTarget)) return;
+			const rootDropdown = this.closest("ix-dropdown:not([data-submenu])") ?? this;
+			if (relatedTarget && rootDropdown.contains(relatedTarget)) return;
+			this._close();
+		};
+		this.addEventListener("focusout", this._onFocusout);
+		this._itemObserver = new MutationObserver(() => this._rewireItems());
+		this._itemObserver.observe(this._menu, {
+			childList: true,
+			subtree: true
+		});
+		if (this.open) this._doOpen();
+	}
+	_wireItems() {
+		this._rewireItems();
+	}
+	_rewireItems() {
+		if (!this._menu) return;
+		const items = Array.from(this._menu.children).filter((child) => child instanceof HTMLElement && child.classList.contains("ix-dropdown__item"));
+		Array.from(this._menu.querySelectorAll(":scope > ix-dropdown[data-submenu]")).forEach((submenu) => {
+			const submenuTrigger = submenu.querySelector(":scope > .ix-dropdown__item");
+			if (submenuTrigger) {
+				items.push(submenuTrigger);
+				submenuTrigger.setAttribute("aria-haspopup", "menu");
+				submenuTrigger.setAttribute("aria-expanded", "false");
+			}
+		});
+		items.sort((a, b) => {
+			const position = a.compareDocumentPosition(b);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+			return 0;
+		});
+		items.forEach((item) => {
+			if (!item.getAttribute("role")) item.setAttribute("role", "menuitem");
+			item.setAttribute("tabindex", "-1");
+		});
+		this._menu.querySelectorAll(":scope > .ix-dropdown__divider").forEach((divider) => {
+			if (!divider.getAttribute("role")) divider.setAttribute("role", "separator");
+		});
+		this._items = items;
+	}
+	_handleTriggerKeydown(e) {
+		if (this._isSubmenu) return;
+		switch (e.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				e.preventDefault();
+				this._openedWithKeyboard = true;
+				this._open();
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				this._openedWithKeyboard = true;
+				this._open();
+				this._focusItem(this._items.length - 1);
+				break;
+		}
+	}
+	_handleMenuKeydown(e) {
+		const target = e.target;
+		if (!this._menu?.contains(target)) return;
+		const closestSubmenuMenu = target.closest("ix-dropdown[data-submenu] > .ix-dropdown__menu");
+		if (closestSubmenuMenu && closestSubmenuMenu !== this._menu && this._menu.contains(closestSubmenuMenu)) return;
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault();
+				e.stopPropagation();
+				this._close();
+				this._trigger?.focus();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				this._focusNextItem(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				this._focusNextItem(-1);
+				break;
+			case "Home":
+				e.preventDefault();
+				this._focusItem(0);
+				break;
+			case "End":
+				e.preventDefault();
+				this._focusItem(this._items.length - 1);
+				break;
+			case "ArrowRight": {
+				const submenu = target.closest("ix-dropdown[data-submenu]");
+				if (submenu && submenu !== this && target === submenu._trigger) {
+					e.preventDefault();
+					submenu._openedWithKeyboard = true;
+					submenu._open();
+				}
+				break;
+			}
+			case "ArrowLeft":
+				if (this._isSubmenu) {
+					e.preventDefault();
+					e.stopPropagation();
+					const parentDropdown = this.parentElement?.closest("ix-dropdown");
+					if (this._trigger) {
+						this._trigger.focus();
+						if (parentDropdown) {
+							const triggerIndex = parentDropdown._items.indexOf(this._trigger);
+							if (triggerIndex !== -1) parentDropdown._focusItem(triggerIndex);
+						}
+					}
+					this._close();
+				}
+				break;
+			case "Enter":
+			case " ":
+				if (target.classList.contains("ix-dropdown__item")) {
+					e.preventDefault();
+					const submenu = target.parentElement;
+					if (submenu?.hasAttribute("data-submenu") && target === submenu._trigger) {
+						submenu._openedWithKeyboard = true;
+						submenu._open();
+					} else target.click();
+				}
+				break;
+			case "Tab":
+				e.preventDefault();
+				this._closeAll();
+				break;
+			default: if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) this._handleTypeahead(e.key);
+		}
+	}
+	_handleItemPointerEnter(index) {
+		this._activeIndex = index;
+		if (this._menu?.contains(document.activeElement)) this._focusItem(index);
+	}
+	_handleItemClick(e, item) {
+		if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") {
+			e.preventDefault();
+			return;
+		}
+		const submenu = item.parentElement;
+		if (submenu?.hasAttribute("data-submenu") && item === submenu._trigger) {
+			e.stopPropagation();
+			return;
+		}
+		this._activeIndex = this._items.indexOf(item);
+		this._closeAll();
+	}
+	_handleTypeahead(char) {
+		this._typeaheadBuffer += char.toLowerCase();
+		if (this._typeaheadTimer) clearTimeout(this._typeaheadTimer);
+		this._typeaheadTimer = setTimeout(() => {
+			this._typeaheadBuffer = "";
+		}, 500);
+		const match = this._items.findIndex((item) => {
+			if (item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true") return false;
+			return (item.textContent ?? "").trim().toLowerCase().startsWith(this._typeaheadBuffer);
+		});
+		if (match !== -1) this._focusItem(match);
+	}
+	_focusItem(index) {
+		if (this._items.filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true").length === 0) return;
+		const clampedIndex = Math.max(0, Math.min(index, this._items.length - 1));
+		const item = this._items[clampedIndex];
+		if (item?.hasAttribute("disabled") || item?.getAttribute("aria-disabled") === "true") {
+			this._focusNextItem(1);
+			return;
+		}
+		this._items.forEach((i, idx) => {
+			i.setAttribute("tabindex", idx === clampedIndex ? "0" : "-1");
+			i.removeAttribute("data-active");
+		});
+		if (item) {
+			item.setAttribute("data-active", "");
+			item.focus();
+			this._activeIndex = clampedIndex;
+		}
+	}
+	_focusNextItem(delta) {
+		if (this._items.filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true").length === 0) return;
+		let currentIdx = this._activeIndex;
+		if (currentIdx === -1) currentIdx = delta > 0 ? -1 : this._items.length;
+		let nextIdx = currentIdx;
+		let iterations = 0;
+		do {
+			nextIdx = nextIdx + delta;
+			if (nextIdx < 0) nextIdx = this._items.length - 1;
+			if (nextIdx >= this._items.length) nextIdx = 0;
+			iterations++;
+		} while (iterations < this._items.length && (this._items[nextIdx]?.hasAttribute("disabled") || this._items[nextIdx]?.getAttribute("aria-disabled") === "true"));
+		this._focusItem(nextIdx);
+	}
+	_open() {
+		if (this._isOpen || !this._menu || !this._trigger) return;
+		if (this._isControlled) {
+			this.dispatchEvent(new CustomEvent("open-request", { bubbles: true }));
+			return;
+		}
+		this._doOpen();
+	}
+	_doOpen() {
+		if (this._isOpen || !this._menu || !this._trigger) return;
+		this.setAttribute("data-open", "");
+		this.setAttribute("open", "");
+		this._menu.hidden = false;
+		this._trigger.setAttribute("aria-expanded", "true");
+		this._position();
+		this._addRepositionListeners();
+		if (this._openedWithKeyboard) this._focusItem(0);
+		this.dispatchEvent(new CustomEvent("open", { bubbles: true }));
+	}
+	_close() {
+		if (!this._isOpen || !this._menu || !this._trigger) return;
+		if (this._isControlled) {
+			this.dispatchEvent(new CustomEvent("close-request", { bubbles: true }));
+			return;
+		}
+		this._doClose();
+	}
+	_doClose() {
+		if (!this._isOpen || !this._menu || !this._trigger) return;
+		this._closeAllSubmenus();
+		this.removeAttribute("data-open");
+		this.removeAttribute("open");
+		this._menu.hidden = true;
+		this._trigger.setAttribute("aria-expanded", "false");
+		this._items.forEach((item) => {
+			item.setAttribute("tabindex", "-1");
+			item.removeAttribute("data-active");
+		});
+		this._activeIndex = -1;
+		this._removeRepositionListeners();
+		this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+	}
+	_toggleOpen() {
+		if (this._isOpen) this._close();
+		else this._open();
+	}
+	_closeAll() {
+		let root = this.parentElement?.closest("ix-dropdown");
+		if (!root) {
+			this._close();
+			this._trigger?.focus();
+			return;
+		}
+		while (root.parentElement?.closest("ix-dropdown")) root = root.parentElement.closest("ix-dropdown");
+		root._close();
+		root._trigger?.focus();
+	}
+	_closeAllSubmenus() {
+		(this._menu?.querySelectorAll("ix-dropdown[data-submenu]"))?.forEach((submenu) => {
+			if (submenu._isOpen) submenu._close();
+		});
+	}
+	_position() {
+		if (!this._menu || !this._trigger) return;
+		const triggerRect = this._trigger.getBoundingClientRect();
+		const menuRect = this._menu.getBoundingClientRect();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const gap = 2;
+		let top;
+		let left;
+		if (this._isSubmenu) {
+			const parentMenuRect = this.parentElement?.getBoundingClientRect();
+			const anchorRight = parentMenuRect?.right ?? triggerRect.right;
+			const anchorLeft = parentMenuRect?.left ?? triggerRect.left;
+			const spaceRight = vw - anchorRight;
+			const spaceLeft = anchorLeft;
+			if (spaceRight >= menuRect.width || spaceRight >= spaceLeft) left = anchorRight + gap;
+			else left = anchorLeft - menuRect.width - gap;
+			top = triggerRect.top;
+			if (top + menuRect.height > vh - gap) top = Math.max(gap, vh - menuRect.height - gap);
+		} else {
+			const [vertical, horizontal] = this._placement.split("-");
+			const spaceBelow = vh - triggerRect.bottom;
+			const spaceAbove = triggerRect.top;
+			if (vertical === "bottom" && spaceBelow >= menuRect.height + gap) top = triggerRect.bottom + gap;
+			else if (vertical === "top" && spaceAbove >= menuRect.height + gap) top = triggerRect.top - menuRect.height - gap;
+			else if (spaceBelow >= spaceAbove) top = triggerRect.bottom + gap;
+			else top = triggerRect.top - menuRect.height - gap;
+			if (horizontal === "end") left = triggerRect.right - menuRect.width;
+			else left = triggerRect.left;
+			if (left + menuRect.width > vw - gap) left = vw - menuRect.width - gap;
+			if (left < gap) left = gap;
+		}
+		if (top + menuRect.height > vh - gap) top = Math.max(gap, vh - menuRect.height - gap);
+		if (top < gap) top = gap;
+		this._menu.style.top = `${top}px`;
+		this._menu.style.left = `${left}px`;
+	}
+	_addRepositionListeners() {
+		if (this._onReposition) return;
+		this._onReposition = () => {
+			if (this._isOpen) this._position();
+		};
+		window.addEventListener("scroll", this._onReposition, true);
+		window.addEventListener("resize", this._onReposition);
+	}
+	_removeRepositionListeners() {
+		if (this._onReposition) {
+			window.removeEventListener("scroll", this._onReposition, true);
+			window.removeEventListener("resize", this._onReposition);
+			this._onReposition = null;
+		}
+	}
+};
+//#endregion
 //#region lib/components/field/IxField.ts
 /**
 * IxField — tilgjengelighetslim mellom label, input og hjelpetekster.
@@ -3503,6 +3990,7 @@ customElements.define("ix-radio-group", IxRadioGroup);
 customElements.define("ix-checkbox-group", IxCheckboxGroup);
 customElements.define("ix-combobox", IxCombobox);
 customElements.define("ix-date-field", IxDateField);
+customElements.define("ix-dropdown", IxDropdown);
 customElements.define("ix-phone-number-field", IxPhoneNumberField);
 customElements.define("ix-progress-bar", IxProgressBar);
 customElements.define("ix-tabs", IxTabs);
@@ -3511,4 +3999,4 @@ customElements.define("ix-tab", IxTab);
 customElements.define("ix-tab-panel", IxTabPanel);
 globalThis.cn = cn;
 //#endregion
-export { BUILTIN_FORMAT_NAMES, COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxDateField, IxField, IxIcon, IxPhoneNumberField, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, cn, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };
+export { BUILTIN_FORMAT_NAMES, COMMON_ICON_NAMES, IxCheckboxGroup, IxCombobox, IxDateField, IxDropdown, IxField, IxIcon, IxPhoneNumberField, IxProgressBar, IxRadioGroup, IxTab, IxTabList, IxTabPanel, IxTabs, amountFormatterForLocale, cn, createAmountFormatter, createPatternFormatter, registerFormat, resolveFormat };

package/dist/npm/lib/components/dropdown/IxDropdown.d.ts

@@ -0,0 +1,91 @@
+/**
+ * IxDropdown — ARIA-lim for en nedtrekksmeny med handlinger eller navigasjon.
+ *
+ * ## Designfilosofi
+ *
+ * Komponenten kobler en trigger-knapp med en meny. Forfatteren skriver en
+ * <button> (trigger) og en .ix-dropdown__menu med .ix-dropdown__item-elementer
+ * i light DOM. Komponentens jobb er å sette opp ARIA-attributter, håndtere
+ * tastaturnavigasjon, posisjonere menyen, og styre åpen/lukket-tilstand.
+ *
+ * ## Roving tabindex
+ *
+ * Alle items har tabindex="-1" unntatt det aktive (fokuserte). Piltaster
+ * flytter fokus mellom items. Dette følger APG Menu Button-mønsteret.
+ *
+ * ## Submenyer
+ *
+ * En submenu er en nøstet <ix-dropdown data-submenu> inne i parent-menyen.
+ * ArrowRight på en submenu-trigger åpner submenyen, ArrowLeft lukker den.
+ * Submenyen posisjoneres til høyre for parent-item (flipper ved plassmangel).
+ *
+ * ## Posisjonering
+ *
+ * Menyen posisjoneres manuelt med getBoundingClientRect + viewport-clamp
+ * (samme grep som tooltip og combobox) — position: fixed, JS setter top/left.
+ *
+ * @example
+ * <ix-dropdown>
+ *   <button class="ix-button" data-variant="secondary">Handlinger</button>
+ *   <div class="ix-dropdown__menu">
+ *     <button class="ix-dropdown__item">Rediger</button>
+ *     <button class="ix-dropdown__item">Dupliser</button>
+ *     <hr class="ix-dropdown__divider" />
+ *     <button class="ix-dropdown__item" data-danger>Slett</button>
+ *   </div>
+ * </ix-dropdown>
+ */
+export declare class IxDropdown extends HTMLElement {
+    private _instanceId;
+    private _trigger;
+    private _menu;
+    private _items;
+    private _activeIndex;
+    private _onTriggerClick;
+    private _onTriggerKeydown;
+    private _onMenuKeydown;
+    private _onMenuClick;
+    private _onMenuPointerenter;
+    private _onDocPointer;
+    private _onFocusout;
+    private _onReposition;
+    private _itemObserver;
+    private _typeaheadBuffer;
+    private _typeaheadTimer;
+    private _openedWithKeyboard;
+    static get observedAttributes(): string[];
+    /**
+     * Kontrollert modus: når `data-controlled` er satt, endrer ikke komponenten
+     * egen åpen-tilstand. Den dispatcher kun `open-request` / `close-request`,
+     * og foreldren må sette `open`-attributtet for å faktisk åpne/lukke.
+     */
+    private get _isControlled();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get open(): boolean;
+    set open(value: boolean);
+    private get _isOpen();
+    private get _isSubmenu();
+    private get _placement();
+    private _wire;
+    private _wireItems;
+    private _rewireItems;
+    private _handleTriggerKeydown;
+    private _handleMenuKeydown;
+    private _handleItemPointerEnter;
+    private _handleItemClick;
+    private _handleTypeahead;
+    private _focusItem;
+    private _focusNextItem;
+    private _open;
+    private _doOpen;
+    private _close;
+    private _doClose;
+    private _toggleOpen;
+    private _closeAll;
+    private _closeAllSubmenus;
+    private _position;
+    private _addRepositionListeners;
+    private _removeRepositionListeners;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-web",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "type": "module",
   "description": "Web components for Indeks design system",
   "homepage": "https://design.sparebank1.no",