@nldd/design-system 0.8.37

package/dist/components/actions/split-button/split-button.styles.js

@@ -0,0 +1,99 @@
+import { css } from 'lit';
+export const splitButtonStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-flex;
+		isolation: isolate;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+	:host([disabled]) nldd-button,
+	:host([disabled]) nldd-icon-button {
+		opacity: 1;
+	}
+
+
+	/* # Block */
+
+	.split-button {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+
+	/* # Focus */
+
+	nldd-button:focus-within,
+	nldd-icon-button:focus-within {
+		position: relative;
+		z-index: 1;
+	}
+
+
+	/* # Sizes */
+
+	/* ## Size: XS */
+
+	:host([size='xs']) .split-button {
+		border-radius: var(--semantics-controls-xs-corner-radius);
+	}
+
+	:host([size='xs']) .split-button__divider {
+		height: var(--semantics-buttons-xs-divider-length);
+	}
+
+	/* ## Size: SM */
+
+	:host([size='sm']) .split-button {
+		border-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
+	:host([size='sm']) .split-button__divider {
+		height: var(--semantics-buttons-sm-divider-length);
+	}
+
+	/* ## Size: MD */
+
+	:host([size='md']) .split-button,
+	:host(:not([size])) .split-button {
+		border-radius: var(--semantics-controls-md-corner-radius);
+	}
+
+	:host([size='md']) .split-button__divider,
+	:host(:not([size])) .split-button__divider {
+		height: var(--semantics-buttons-md-divider-length);
+	}
+
+
+	/* # Variants */
+
+	/* ## Variant: Neutral Tintend (Default) */
+
+	:host([variant="neutral-tinted"]) .split-button,
+	:host(:not([variant])) .split-button {
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+	}
+
+
+	/* # Divider */
+
+	.split-button__divider {
+		width: 1px;
+		flex-shrink: 0;
+		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
+	}
+`;
+//# sourceMappingURL=split-button.styles.js.map

package/dist/components/actions/split-button/split-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGnC,CAAC"}

package/dist/components/actions/split-button/split-button.template.d.ts

@@ -0,0 +1,3 @@
+import type { NLDDSplitButton } from './split-button.js';
+export declare function template(this: NLDDSplitButton): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=split-button.template.d.ts.map

package/dist/components/actions/split-button/split-button.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,eAAe,wCAyB7C"}

package/dist/components/actions/split-button/split-button.template.js

@@ -0,0 +1,28 @@
+import { html, nothing } from 'lit';
+export function template() {
+    return html `
+		<div class="split-button">
+			<nldd-button
+				variant=${this.variant}
+				size=${this.size}
+				text=${this.text}
+				start-icon=${this.startIcon || nothing}
+				?disabled=${this.disabled}
+				@click=${this._handleActionClick}
+			></nldd-button>
+			<div class="split-button__divider"></div>
+			<nldd-icon-button class="split-button__trigger"
+				variant=${this.variant}
+				size=${this.size}
+				icon="chevron-down-small"
+				text=${this._t('components.split-button.menu-action')}
+				?disabled=${this.disabled}
+				aria-haspopup="menu"
+				aria-expanded=${this._hasMenuItems ? String(this._menuIsOpen) : nothing}
+				@click=${this._handleMenuClick}
+			></nldd-icon-button>
+		</div>
+		<nldd-menu class="split-button__menu"></nldd-menu>
+	`;
+}
+//# sourceMappingURL=split-button.template.js.map

package/dist/components/actions/split-button/split-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;;;cAGE,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,IAAI;WACT,IAAI,CAAC,IAAI;iBACH,IAAI,CAAC,SAAS,IAAI,OAAO;gBAC1B,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,kBAAkB;;;;cAItB,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,IAAI;;WAET,IAAI,CAAC,EAAE,CAAC,qCAAqC,CAAC;gBACzC,IAAI,CAAC,QAAQ;;oBAET,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO;aAC9D,IAAI,CAAC,gBAAgB;;;;EAIhC,CAAC;AACH,CAAC"}

package/dist/components/actions/toolbar/toolbar.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Nederlandse Digitale Dienst Toolbar Component (Lit + TypeScript)
+ *
+ * @element nldd-toolbar
+ * @attr {string} size - Toolbar size, propagated to all child controls: 'sm' | 'md' (default: 'md')
+ * @attr {boolean} show-item-labels - When true, shows a text label below each toolbar item and the overflow button
+ * @attr {string} label - Accessible label for the toolbar. Only needed when multiple toolbars appear on the same page
+ *
+ * @slot start    - nldd-toolbar-item and nldd-toolbar-title-group elements placed at the start
+ * @slot center   - nldd-toolbar-item and nldd-toolbar-title-group elements placed at the center
+ * @slot end      - nldd-toolbar-item and nldd-toolbar-title-group elements placed at the end
+ * @slot overflow - nldd-menu-item and nldd-menu-divider elements always shown in the overflow menu
+ */
+import { LitElement } from 'lit';
+import type { NLDDToolbarTranslations } from './toolbar.i18n.js';
+type Size = 'sm' | 'md';
+export declare class NLDDToolbar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Controls the size of toolbar items. Propagated automatically to all child controls. */
+    size: Size;
+    /** When true, shows a text label below each toolbar item and the overflow button. */
+    showItemLabels: boolean;
+    /**
+     * Accessible label for the toolbar, exposed as `aria-label` on the `role="toolbar"` container.
+     * Only needed when multiple toolbars appear on the same page so screen readers can distinguish them.
+     * @example `<nldd-toolbar label="Formatting">`
+     */
+    label: string;
+    translations: Partial<NLDDToolbarTranslations>;
+    _t(key: keyof NLDDToolbarTranslations): string;
+    private _menuOpen;
+    private _startChildren;
+    private _centerChildren;
+    private _endChildren;
+    private _overflowIds;
+    private _leftSpacerZero;
+    private _rightSpacerZero;
+    private _pinnedOverflowItems;
+    private _childIds;
+    private _idCounter;
+    private _itemWidths;
+    private _observer;
+    private _resizeObserver;
+    private _menu;
+    private _isMeasuring;
+    private _isBuilding;
+    private _hasMeasured;
+    private _prioritizedItemsCache;
+    private _getId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _menuClosedAt;
+    private _handleOverflowButtonClick;
+    private _createMenu;
+    private _syncMenuAnchor;
+    /**
+     * Syncs overflow menu items by cloning the original `nldd-menu-item` elements.
+     * Note: `cloneNode` does not copy event listeners added via `addEventListener`.
+     * The `select` event works correctly since it is dispatched by `nldd-menu-item` internally.
+     * Consumers should avoid adding extra listeners directly on overflow `nldd-menu-item` elements.
+     */
+    private _syncMenuItems;
+    private _propagateSize;
+    private _getPrioritizedItems;
+    private _measureItemWidths;
+    private _computeAreaWidth;
+    private _computeSpacerZeros;
+    private _updateAreaVars;
+    private _measureAndUpdate;
+    private _measureOverflow;
+    private _buildChildrenForSlot;
+    private _buildPinnedOverflowItems;
+    private _restoreSlots;
+    private _buildChildren;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-toolbar': NLDDToolbar;
+        'nldd-toolbar-item': HTMLElement;
+        'nldd-toolbar-title-group': HTMLElement;
+    }
+}
+export {};
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/components/actions/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAkBjE,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIxB,qBACa,WAAY,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAiB;IAEvC,0FAA0F;IAE1F,IAAI,EAAE,IAAI,CAAQ;IAElB,qFAAqF;IAErF,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,KAAK,SAAM;IAGX,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAM;IAI7C,EAAE,CAAC,GAAG,EAAE,MAAM,uBAAuB,GAAG,MAAM;IAKrD,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,cAAc,CAAsB;IAG5C,OAAO,CAAC,eAAe,CAAsB;IAG7C,OAAO,CAAC,YAAY,CAAsB;IAG1C,OAAO,CAAC,YAAY,CAA0B;IAG9C,OAAO,CAAC,eAAe,CAAS;IAGhC,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,oBAAoB,CAAiB;IAE7C,OAAO,CAAC,SAAS,CAAkC;IACnD,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,sBAAsB,CAA0D;IAExF,OAAO,CAAC,MAAM;IAOL,iBAAiB,IAAI,IAAI;IAqBzB,oBAAoB,IAAI,IAAI;IAU5B,YAAY,IAAI,IAAI;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuB/D,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,0BAA0B;IASlC,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,eAAe;IAQvB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,eAAe;IA+BvB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,gBAAgB;IAuGxB,OAAO,CAAC,qBAAqB;IAqD7B,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,cAAc;IAoBb,MAAM;CA6Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;QAC5B,mBAAmB,EAAE,WAAW,CAAC;QACjC,0BAA0B,EAAE,WAAW,CAAC;KACxC;CACD"}

package/dist/components/actions/toolbar/toolbar.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddToolbarTranslations: {
+    'components.toolbar.overflow-action': string;
+};
+export type NLDDToolbarTranslations = typeof nlddToolbarTranslations;
+//# sourceMappingURL=toolbar.i18n.d.ts.map

package/dist/components/actions/toolbar/toolbar.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;CAEnC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,OAAO,uBAAuB,CAAC"}

package/dist/components/actions/toolbar/toolbar.i18n.js

@@ -0,0 +1,4 @@
+export const nlddToolbarTranslations = {
+    'components.toolbar.overflow-action': 'Meer',
+};
+//# sourceMappingURL=toolbar.i18n.js.map

package/dist/components/actions/toolbar/toolbar.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.i18n.js","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACtC,oCAAoC,EAAE,MAAM;CAC5C,CAAC"}