@nldd/design-system 0.8.37

package/dist/components/lists-and-menus/menu/menu.d.ts

@@ -0,0 +1,166 @@
+import { LitElement } from 'lit';
+import type { NLDDMenuTranslations } from './menu.i18n.js';
+import type { QueryMarkMode } from '../../../utilities/render-marked.js';
+import '../../lists-and-menus/cells/icon-cell/icon-cell.js';
+import '../../lists-and-menus/cells/spacer-cell/spacer-cell.js';
+import '../../lists-and-menus/cells/text-cell/text-cell.js';
+import '../../content/icon/icon.js';
+import '../../status-and-feedback/inline-dialog/inline-dialog.js';
+export declare class NLDDMenuDivider extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A single item within an nldd-menu.
+ *
+ * @attr {string}  text      - Display text. Supports **bold** markdown syntax.
+ * @attr {string}  value     - Form value. Falls back to text when not set.
+ * @attr {string}  aliases   - Space-separated alternative search terms.
+ * @attr {string}  details   - Secondary label shown on the right side.
+ * @attr {string}  icon      - Icon name rendered before the text (nldd-icon name).
+ * @attr {string}  type      - Item type: 'button' | 'checkbox' | 'radio'. Default: 'button'.
+ * @attr {boolean} selected        - Selected state for checkbox and radio types.
+ * @attr {boolean} disabled        - Disabled state.
+ * @attr {string}  query           - Query substring to bold-highlight in text. Set by menu's filter(); also settable by consumers.
+ * @attr {string}  query-mark-mode - 'match' | 'predictive' (default: 'predictive'). See text-cell for details.
+ *
+ * @fires select - Fired when the item is clicked and not disabled.
+ */
+export declare class NLDDMenuItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    text: string;
+    value: string;
+    /** Space-separated alternative search terms used by nldd-menu's filter. */
+    aliases: string;
+    details: string;
+    /** Icon name rendered before the text (looked up via nldd-icon). */
+    icon: string;
+    type: 'button' | 'checkbox' | 'radio';
+    selected: boolean;
+    disabled: boolean;
+    query: string;
+    queryMarkMode: QueryMarkMode;
+    /** Set by nldd-menu. Not part of the public API. */
+    menuVariant: 'menu' | 'listbox';
+    private static _idCounter;
+    connectedCallback(): void;
+    focus(options?: FocusOptions): void;
+    _handleClick(): void;
+    /** Programmatically select this item. */
+    select(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A floating menu component using the Popover API.
+ * Positioned relative to an anchor element using Floating UI.
+ *
+ * Supports filtering, keyboard navigation, and highlight management.
+ * Use nldd-menu-item and nldd-menu-divider as children.
+ *
+ * Note: Only type="button" items are supported when used inside nldd-combo-box-field.
+ * Radio and checkbox types may be used in standalone menus.
+ *
+ * @attr {string}  anchor               - ID of the anchor element.
+ * @attr {string}  placement            - Floating UI placement. Default: 'bottom-start'.
+ * @attr {string}  empty-text           - Text of the default empty-state dialog. Falls back
+ *                                        to Dutch i18n "Geen opties beschikbaar".
+ * @attr {string}  empty-supporting-text - Supporting text of the default empty-state dialog.
+ * @attr {string}  width                - Explicit width. Sets --_menu-width internally.
+ * @attr {number}  max-items            - Maximum number of visible items before scrolling.
+ *                                        Sets --_menu-max-items internally. Default: 0 (no limit).
+ * @attr {object}  translations         - Override one or more translation keys.
+ * @attr {Function} filterFn            - Custom filter function (query, item) => boolean.
+ *
+ * @slot - nldd-menu-item and nldd-menu-divider elements.
+ * @slot empty - Shown when no items are visible. Defaults to `nldd-inline-dialog`
+ *               driven by `empty-text` / `empty-supporting-text`. Slot content
+ *               overrides the default dialog entirely.
+ */
+export declare class NLDDMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+    anchor: string;
+    anchorElement: Element | null;
+    placement: string;
+    /**
+     * Render variant. Use 'listbox' when the menu serves as a combobox popup —
+     * this switches role to "listbox" and item roles to "option" per ARIA spec.
+     * Default: 'menu'.
+     */
+    variant: 'menu' | 'listbox';
+    emptyText: string;
+    emptySupportingText: string;
+    /** Explicit width. Sets --_menu-width internally. */
+    width: string;
+    /**
+     * Maximum number of visible items before the menu scrolls.
+     * Sets --_menu-max-items internally. Default: 0 (no limit).
+     */
+    maxItems: number;
+    /**
+     * Override one or more translation keys.
+     * Unset keys fall back to the Dutch default.
+     */
+    translations: Partial<NLDDMenuTranslations>;
+    /**
+     * Custom filter function. Defaults to case-insensitive substring match
+     * on text, value, and aliases attributes.
+     */
+    filterFn: (query: string, item: NLDDMenuItem) => boolean;
+    private _isEmpty;
+    private _isOpen;
+    private _closedAt;
+    private _t;
+    /** Resolved empty text: emptyText attribute takes precedence, then i18n fallback. */
+    get _resolvedEmptyText(): string;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _getAnchorEl;
+    private _handleDocumentClick;
+    private _handleMenuItemMouseenter;
+    private _handleMouseleave;
+    private _handleMenuItemFocused;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _getVisibleItems;
+    private _getFocusedIndex;
+    private _clearHighlight;
+    private _setHighlight;
+    private _updateEmptyState;
+    private _updateDividerVisibility;
+    /**
+     * Filter items based on a query string.
+     *
+     * Matching items are kept visible. Non-matching items are hidden. Matching
+     * items receive `query=<query>` so their text-cell bolds the non-typed
+     * remainder (predictive completion — the ARIA APG pattern for combobox).
+     *
+     * When the query is empty, all items are shown and `query` is cleared.
+     */
+    filter(query: string): void;
+    /**
+     * Move both focus and highlight to the next, previous, or first visible item.
+     */
+    focusItem(direction: 'next' | 'prev' | 'first'): void;
+    /**
+     * Move the highlight to the next or previous visible item without moving focus.
+     * Useful when keyboard navigation should keep focus on the input.
+     */
+    moveHighlight(direction: 'next' | 'prev'): void;
+    /** Returns the currently highlighted item, or null if none. */
+    getHighlighted(): NLDDMenuItem | null;
+    /** Returns the ID of the currently highlighted item, or empty string if none. */
+    getHighlightedId(): string;
+    /** Recalculate position and size relative to the anchor element. */
+    reposition(): Promise<void>;
+    private _handleKeydown;
+    private _handleToggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-menu': NLDDMenu;
+        'nldd-menu-item': NLDDMenuItem;
+        'nldd-menu-divider': NLDDMenuDivider;
+    }
+}
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/lists-and-menus/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/menu/menu.ts"],"names":[],"mappings":"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"}

package/dist/components/lists-and-menus/menu/menu.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddMenuTranslations: {
+    'components.menu.empty-text': string;
+};
+export type NLDDMenuTranslations = typeof nlddMenuTranslations;
+//# sourceMappingURL=menu.i18n.d.ts.map

package/dist/components/lists-and-menus/menu/menu.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/menu/menu.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;CAEhC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC"}

package/dist/components/lists-and-menus/menu/menu.i18n.js

@@ -0,0 +1,4 @@
+export const nlddMenuTranslations = {
+    'components.menu.empty-text': 'Geen opties beschikbaar',
+};
+//# sourceMappingURL=menu.i18n.js.map

package/dist/components/lists-and-menus/menu/menu.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.i18n.js","sourceRoot":"","sources":["../../../../src/components/lists-and-menus/menu/menu.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IACnC,4BAA4B,EAAE,yBAAyB;CACvD,CAAC"}