@eui/eds-wc 22.0.0-alpha.5 → 22.0.0-alpha.50

package/eds-loading-indicator/eds-wc-loading-indicator.d.ts

@@ -0,0 +1,61 @@
+import { EdsBaseElement } from '../shared/eds-base.js';
+import '../eds-icon/eds-wc-icon.js';
+/**
+ * Local narrowed size union — the loading indicator's size contract. Copied verbatim from
+ * the Angular `eds-loading-indicator` exported `EdsLoadingIndicatorSize` union. No shared-token
+ * import.
+ */
+export type EdsWcLoadingIndicatorSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+/**
+ * `<eds-wc-loading-indicator>` — EDS Loading Indicator Web Component.
+ *
+ * Displays a spinning icon with an optional label beneath it. Useful as a full-area or inline
+ * loading state placeholder. 1:1 projection of the Angular `eds-loading-indicator`.
+ *
+ * The host carries `role="progressbar"` and a computed accessible name
+ * (`ariaLabel || label || 'Loading'`) reflected as `aria-label`, so both ends of the naming
+ * relationship stay on the host element inside a single shadow root.
+ *
+ * @example
+ * ```html
+ * <eds-wc-loading-indicator></eds-wc-loading-indicator>
+ * <eds-wc-loading-indicator label="Loading data..." size="l"></eds-wc-loading-indicator>
+ * ```
+ */
+export declare class EdsWcLoadingIndicator extends EdsBaseElement {
+    /**
+     * Label text displayed below the spinner.
+     * When empty, only the spinner is shown.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Size of the loading indicator (drives the spinner icon size).
+     * @default 'm'
+     */
+    size: EdsWcLoadingIndicatorSize;
+    /**
+     * Accessible label for screen readers.
+     * Defaults to the label text, or 'Loading' if no label is provided.
+     * The computed value (`ariaLabel || label || 'Loading'`) is written to the host's
+     * `aria-label` in `updated()`, so this backing property is not itself reflected.
+     * @default ''
+     */
+    ariaLabel: string | null;
+    /**
+     * Data attribute for e2e testing.
+     * @default 'eds-loading-indicator'
+     */
+    e2eAttr: string;
+    /** Computed accessible name — mirrors the Angular `computedAriaLabel()`. */
+    private get computedAriaLabel();
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-loading-indicator': EdsWcLoadingIndicator;
+    }
+}
+//# sourceMappingURL=eds-wc-loading-indicator.d.ts.map

package/eds-loading-indicator/eds-wc-loading-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/eds-loading-indicator/eds-wc-loading-indicator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4BAA4B,CAAC;AAEpC;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAC/B,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,CAAC;AAEZ;;;;;;;;;;;;;;;GAeG;AACH,qBACa,qBAAsB,SAAQ,cAAc;IACrD;;;;OAIG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,EAAE,yBAAyB,CAAO;IAEtC;;;;;;OAMG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAM;IAEvC;;;OAGG;IAEH,OAAO,SAA2B;IAElC,4EAA4E;IAC5E,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAgB,MAAM,0BAgBpB;cAEiB,MAAM;cASN,OAAO,IAAI,IAAI;CAKrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,qBAAqB,CAAC;KACrD;CACJ"}

package/eds-loading-indicator/eds-wc-loading-indicator.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { EdsBaseElement } from '../shared/eds-base.js';
+import '../eds-icon/eds-wc-icon.js';
+/**
+ * `<eds-wc-loading-indicator>` — EDS Loading Indicator Web Component.
+ *
+ * Displays a spinning icon with an optional label beneath it. Useful as a full-area or inline
+ * loading state placeholder. 1:1 projection of the Angular `eds-loading-indicator`.
+ *
+ * The host carries `role="progressbar"` and a computed accessible name
+ * (`ariaLabel || label || 'Loading'`) reflected as `aria-label`, so both ends of the naming
+ * relationship stay on the host element inside a single shadow root.
+ *
+ * @example
+ * ```html
+ * <eds-wc-loading-indicator></eds-wc-loading-indicator>
+ * <eds-wc-loading-indicator label="Loading data..." size="l"></eds-wc-loading-indicator>
+ * ```
+ */
+let EdsWcLoadingIndicator = class EdsWcLoadingIndicator extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Label text displayed below the spinner.
+         * When empty, only the spinner is shown.
+         * @default ''
+         */
+        this.label = '';
+        /**
+         * Size of the loading indicator (drives the spinner icon size).
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Accessible label for screen readers.
+         * Defaults to the label text, or 'Loading' if no label is provided.
+         * The computed value (`ariaLabel || label || 'Loading'`) is written to the host's
+         * `aria-label` in `updated()`, so this backing property is not itself reflected.
+         * @default ''
+         */
+        this.ariaLabel = '';
+        /**
+         * Data attribute for e2e testing.
+         * @default 'eds-loading-indicator'
+         */
+        this.e2eAttr = 'eds-loading-indicator';
+    }
+    /** Computed accessible name — mirrors the Angular `computedAriaLabel()`. */
+    get computedAriaLabel() {
+        return this.ariaLabel || this.label || 'Loading';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--eds-sp-xs);
+        }
+
+        .eds-loading-indicator__label {
+            font: var(--eds-f-paragraph-s);
+            color: var(--eds-c-foreground-subtler);
+        }
+    `; }
+    render() {
+        return html `
+            <eds-wc-icon icon="circle-notch" loading size="${this.size}"></eds-wc-icon>
+            ${this.label
+            ? html `<span class="eds-loading-indicator__label">${this.label}</span>`
+            : ''}
+        `;
+    }
+    updated() {
+        // Mirror the Angular host bindings: always a progressbar with a computed accessible name.
+        this.setAttribute('role', 'progressbar');
+        this.setAttribute('aria-label', this.computedAriaLabel);
+    }
+};
+__decorate([
+    property({ type: String })
+], EdsWcLoadingIndicator.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcLoadingIndicator.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' })
+], EdsWcLoadingIndicator.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-e2e', reflect: true })
+], EdsWcLoadingIndicator.prototype, "e2eAttr", void 0);
+EdsWcLoadingIndicator = __decorate([
+    customElement('eds-wc-loading-indicator')
+], EdsWcLoadingIndicator);
+export { EdsWcLoadingIndicator };
+//# sourceMappingURL=eds-wc-loading-indicator.js.map

package/eds-loading-indicator/eds-wc-loading-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-loading-indicator.js","sourceRoot":"","sources":["../../src/eds-loading-indicator/eds-wc-loading-indicator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4BAA4B,CAAC;AAiBpC;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,cAAc;IAAlD;;QACH;;;;WAIG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;;WAGG;QAEH,SAAI,GAA8B,GAAG,CAAC;QAEtC;;;;;;WAMG;QAEM,cAAS,GAAkB,EAAE,CAAC;QAEvC;;;WAGG;QAEH,YAAO,GAAG,uBAAuB,CAAC;IAuCtC,CAAC;IArCG,4EAA4E;IAC5E,IAAY,iBAAiB;QACzB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;IACrD,CAAC;aAEe,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;KAgB3B,AAhBqB,CAgBpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;6DAC0C,IAAI,CAAC,IAAI;cACxD,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,IAAI,CAAA,8CAA8C,IAAI,CAAC,KAAK,SAAS;YACvE,CAAC,CAAC,EAAE;SACX,CAAC;IACN,CAAC;IAEkB,OAAO;QACtB,0FAA0F;QAC1F,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC5D,CAAC;;AA9DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAChB;AAOX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACJ;AAU7B;IADR,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;wDACb;AAOvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAC/B;AA/BzB,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAsEjC"}

package/eds-loading-indicator/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsWcLoadingIndicator } from './eds-wc-loading-indicator';
+export type { EdsWcLoadingIndicatorSize } from './eds-wc-loading-indicator';
+//# sourceMappingURL=index.d.ts.map

package/eds-loading-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-loading-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,YAAY,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC"}

package/eds-loading-indicator/index.js

@@ -0,0 +1,2 @@
+export { EdsWcLoadingIndicator } from './eds-wc-loading-indicator';
+//# sourceMappingURL=index.js.map

package/eds-loading-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-loading-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}

package/eds-message-box/eds-wc-message-box.js

@@ -67,7 +67,7 @@ let EdsWcMessageBox = class EdsWcMessageBox extends ColorMixin(EdsBaseElement) {
         :host([color="success"]) .header__icon svg { fill: var(--eds-c-foreground-success); }
         :host([color="warning"]) .header__icon svg { fill: var(--eds-c-foreground-warning); }
         :host([color="critical"]) .header__icon svg { fill: var(--eds-c-foreground-critical); }
-        .header__title { font: var(--eds-f-label-l-semi-bold); color: var(--eds-c-foreground-default); margin: 0; }
+        .header__title { font: var(--eds-f-label-l); font-weight: var(--eds-f-w-semibold); color: var(--eds-c-foreground-default); margin: 0; }
 
         .body { padding: var(--eds-sp-l); overflow-y: auto; flex: 1; font: var(--eds-f-paragraph-m); }
 

package/eds-multiselect/eds-wc-multiselect.d.ts

@@ -0,0 +1,118 @@
+import { EdsBaseElement } from '../shared/eds-base.js';
+/**
+ * A single option in the `<eds-wc-multiselect>` listbox.
+ *
+ * The Angular source projects `<eds-multiselect-option value label isDisabled>` children.
+ * The WC uses a **data-driven** option model instead of slotted children so that every
+ * ARIA relationship (`aria-activedescendant` / option `id`) stays inside one shadow root
+ * (Rule A1) — the guide's required approach for relational listbox/combobox widgets.
+ */
+export interface EdsMultiselectOption {
+    /** The value associated with this option. */
+    value: string;
+    /** The display label for this option. */
+    label: string;
+    /** Whether this option is disabled. @default false */
+    isDisabled?: boolean;
+}
+/**
+ * `<eds-wc-multiselect>` — EDS Multiselect Web Component.
+ *
+ * A combobox-style dropdown that allows multiple selections, implementing the WAI-ARIA
+ * multiselect combobox + listbox pattern with full keyboard navigation. Styled to match
+ * `eds-input-text` default/hover/focus/disabled states.
+ *
+ * Form-associated custom element (mirrors the Angular `ControlValueAccessor`): its value
+ * participates in the surrounding `<form>` via `ElementInternals` (submitted as repeated
+ * entries under the element `name`), and it supports reset / disabled callbacks.
+ *
+ * @example
+ * ```html
+ * <eds-wc-multiselect
+ *     placeholder="Select labels"
+ *     .options="${[{ value: 'important', label: 'Important' }, { value: 'work', label: 'Work' }]}">
+ * </eds-wc-multiselect>
+ * ```
+ *
+ * @fires value-change - Dispatched when the selection changes. `detail: { value: string[] }`
+ * @fires change - Dispatched when the selection changes (form-control parity). `detail: { value: string[] }`
+ */
+export declare class EdsWcMultiselect extends EdsBaseElement {
+    static formAssociated: boolean;
+    private _internals;
+    /** The selectable options (data-driven; mirrors the Angular projected option children). */
+    options: EdsMultiselectOption[];
+    /** The current selection (values of selected options). Two-way via `value-change`. */
+    value: string[];
+    /**
+     * Placeholder text displayed when no options are selected.
+     * @default 'Select options'
+     */
+    placeholder: string;
+    /**
+     * Form control name — submitted with the surrounding `<form>`.
+     */
+    name: string;
+    /**
+     * Controls whether the multiselect is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Controls whether the multiselect shows an invalid/error state.
+     * @default false
+     */
+    isInvalid: boolean;
+    /**
+     * Aria-label for the combobox trigger.
+     * @default 'Select options'
+     */
+    ariaLabel: string | null;
+    /**
+     * Data attribute value for end-to-end testing identification.
+     * @default 'eds-multiselect'
+     */
+    e2eAttr: string;
+    /** Whether the dropdown popup is open. */
+    private _open;
+    /** Index of the active (keyboard-highlighted) option — the active descendant. */
+    private _activeIndex;
+    private _triggerEl;
+    private _panelEl;
+    private _overlay;
+    private readonly _listboxId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private _syncFormValue;
+    protected updated(changed: Map<string, unknown>): void;
+    private get _optionId();
+    private get _activeDescendantId();
+    private get _displayValue();
+    private get _isPlaceholderShown();
+    private _onTriggerClick;
+    private _onTriggerKeydown;
+    private _onPanelKeydown;
+    private _onOptionClick;
+    private _onDoneClick;
+    private _toggleActiveOption;
+    private _toggleOption;
+    private _moveActive;
+    private _firstEnabledIndex;
+    private _lastEnabledIndex;
+    private _setActive;
+    private _handleTypeAhead;
+    private _scrollActiveIntoView;
+    private _openDropdown;
+    private _closeDropdown;
+    private _onOverlayClose;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-multiselect': EdsWcMultiselect;
+    }
+}
+//# sourceMappingURL=eds-wc-multiselect.d.ts.map

package/eds-multiselect/eds-wc-multiselect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-multiselect.d.ts","sourceRoot":"","sources":["../../src/eds-multiselect/eds-wc-multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB;IACjC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAChD,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA0B;IAE5C,2FAA2F;IAChE,OAAO,EAAE,oBAAoB,EAAE,CAAM;IAEhE,sFAAsF;IAC3D,KAAK,EAAE,MAAM,EAAE,CAAM;IAEhD;;;OAGG;IACyB,WAAW,SAAoB;IAE3D;;OAEG;IACyB,IAAI,SAAM;IAEtC;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACkE,SAAS,UAAS;IAEvF;;;OAGG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAoB;IAErD;;;OAGG;IAC+D,OAAO,SAAqB;IAE9F,0CAA0C;IACjC,OAAO,CAAC,KAAK,CAAS;IAE/B,iFAAiF;IACxE,OAAO,CAAC,YAAY,CAAM;IAEC,OAAO,CAAC,UAAU,CAAe;IAC3B,OAAO,CAAC,QAAQ,CAAe;IAEzE,OAAO,CAAC,QAAQ,CAAyE;IAEzF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IAE/C,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAOrC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,OAAO,CAAC,cAAc;cAYH,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQ/D,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,aAAa,GAUxB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAID,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,qBAAqB;YAWf,aAAa;IAiB3B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,eAAe,CAErB;IAEF,OAAgB,MAAM,0BA6LpB;cAEiB,MAAM;CAyE5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,gBAAgB,CAAC;KAC1C;CACJ"}