@eagami/ui 5.30.1 → 5.31.0

package/fesm2022/eagami-ui.mjs

@@ -4200,11 +4200,11 @@ class FieldMessagesComponent {
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FieldMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FieldMessagesComponent, isStandalone: true, selector: "ea-field-messages", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--error\"\n    [id]=\"id() + '-error'\"\n    role=\"alert\">\n    <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n    {{ error() }}\n  </p>\n} @else if (hint()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--hint\"\n    [id]=\"id() + '-hint'\">\n    {{ hint() }}\n  </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FieldMessagesComponent, isStandalone: true, selector: "ea-field-messages", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--error\"\n    [id]=\"id() + '-error'\"\n    role=\"alert\">\n    <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n    {{ error() }}\n  </p>\n} @else if (hint()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--hint\"\n    [id]=\"id() + '-hint'\">\n    {{ hint() }}\n  </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em;transform:translateY(-.0625em)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FieldMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--error\"\n    [id]=\"id() + '-error'\"\n    role=\"alert\">\n    <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n    {{ error() }}\n  </p>\n} @else if (hint()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--hint\"\n    [id]=\"id() + '-hint'\">\n    {{ hint() }}\n  </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"] }]
+            args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--error\"\n    [id]=\"id() + '-error'\"\n    role=\"alert\">\n    <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n    {{ error() }}\n  </p>\n} @else if (hint()) {\n  <p\n    class=\"ea-field-messages__message ea-field-messages__message--hint\"\n    [id]=\"id() + '-hint'\">\n    {{ hint() }}\n  </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em;transform:translateY(-.0625em)}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
 /**
@@ -4436,6 +4436,22 @@ function enterTopLayer(surface, anchor) {
         surface.removeAttribute('popover');
     }
 }
+/**
+ * Where a portaled surface has to live to stay usable: inside the top-layer
+ * container its anchor belongs to, or `<body>` when there is none.
+ *
+ * A modal `<dialog>` makes the rest of the document inert, and raising a
+ * surface into the top layer does not lift that. An element portaled to
+ * `<body>` while a modal is open paints above it and is still unfocusable and
+ * untouchable: clicks land on the dialog behind it, so a field inside it takes
+ * neither the caret nor a selection. Inertness follows the DOM, so the surface
+ * has to sit inside the dialog; promotion then keeps it clear of any ancestor
+ * that would clip it and above the dialog's own content.
+ */
+function topLayerHost(anchor) {
+    const container = anchor?.closest(TOP_LAYER_CONTAINER);
+    return container instanceof HTMLElement ? container : document.body;
+}
 /** Returns `surface` to the normal layer, undoing {@link enterTopLayer}. */
 function leaveTopLayer(surface) {
     if (!surface.hasAttribute('popover')) {
@@ -4748,10 +4764,21 @@ class PopoverComponent {
         // is settled and dimensions are accurate. Skipped in SSR (no `document`).
         effect(() => {
             const surface = this.surfaceEl()?.nativeElement;
-            if (surface &&
-                typeof document !== 'undefined' &&
-                surface.parentNode !== document.body) {
-                document.body.appendChild(surface);
+            const anchor = this.resolveAnchor();
+            const isOpen = this.open();
+            if (!surface || typeof document === 'undefined') {
+                return;
+            }
+            const host = topLayerHost(anchor);
+            if (surface.parentNode === host) {
+                return;
+            }
+            // Moving a raised surface drops it out of the top layer, so it goes back
+            // up once it has reached its new home
+            leaveTopLayer(surface);
+            host.appendChild(surface);
+            if (isOpen && anchor) {
+                enterTopLayer(surface, anchor);
             }
         });
         effect(() => {
@@ -4767,12 +4794,6 @@ class PopoverComponent {
                 this.latched = null;
                 return;
             }
-            // The closed state's `display: none` is still on the element: this
-            // effect runs before the binding carrying `surfaceStyle()` reaches it.
-            // `showPopover()` refuses an element with no layout box, and a refused
-            // promotion leaves the surface portaled to `<body>`, outside the modal
-            // and therefore inert, so it is cleared here rather than a frame later.
-            surface.style.removeProperty('display');
             // Join the top layer before the first measurement below, so a popover
             // opened from inside a modal is not painted behind it. Promoting first
             // also gives the surface layout: a `popover` element is `display: none`
@@ -5012,6 +5033,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
+/**
+ * Letters a plain keyboard cannot reach that decompose to no base letter, so
+ * stripping marks alone would leave them unmatched.
+ */
+const SPELLINGS = {
+    ø: 'o',
+    æ: 'ae',
+    œ: 'oe',
+    ß: 'ss',
+    ł: 'l',
+    đ: 'd',
+    ð: 'd',
+    þ: 'th',
+    ħ: 'h',
+    ı: 'i',
+    ŋ: 'n',
+    ŧ: 't',
+    ij: 'ij',
+    ſ: 's',
+};
+const SPELLED = new RegExp(`[${Object.keys(SPELLINGS).join('')}]`, 'g');
+/**
+ * Lowercased with diacritics folded away, so a search typed on a plain
+ * keyboard still finds the accented spelling: "jablko" finds "Jabłko".
+ */
+function foldForSearch(value) {
+    return value
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/\p{M}/gu, '')
+        .replace(SPELLED, letter => SPELLINGS[letter]);
+}
 /** Whether the consumer supplied groups rather than a flat option list. */
 function isGrouped(options) {
     const first = options[0];
@@ -5151,13 +5204,13 @@ class AutocompleteComponent {
     grouped = computed(() => isGrouped(this.options()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
     filteredGroups = computed(() => {
-        const query = this.value().trim().toLowerCase();
+        const query = foldForSearch(this.value().trim());
         const groups = this.optionGroups();
         if (query.length < this.minLength()) {
             return [];
         }
         const matched = query
-            ? filterGroups(groups, o => o.label.toLowerCase().includes(query))
+            ? filterGroups(groups, o => foldForSearch(o.label).includes(query))
             : groups;
         return limitGroups(matched, this.maxResults());
     }, /* @ts-ignore */
@@ -7878,15 +7931,13 @@ class CommandPaletteComponent {
      * on every binding read.
      */
     groupedItems = computed(() => {
-        const q = this.query().trim().toLowerCase();
+        const q = foldForSearch(this.query().trim());
         const disabledWhen = this.disabledWhen();
         const candidates = this.items().filter(item => {
             if (!q) {
                 return true;
             }
-            const haystack = [item.label, item.description ?? '', ...(item.keywords ?? [])]
-                .join(' ')
-                .toLowerCase();
+            const haystack = foldForSearch([item.label, item.description ?? '', ...(item.keywords ?? [])].join(' '));
             // Match when the query is a prefix of any word in the haystack.
             // Substring-anywhere matching would surface confusing results (typing
             // "c" matching "Repla*c*e" via a mid-word character); word-boundary
@@ -10848,11 +10899,11 @@ class DialogComponent {
         this.handleClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeDisabled: { classPropertyName: "closeDisabled", publicName: "closeDisabled", isSignal: true, isRequired: false, transformFunction: null }, manualClose: { classPropertyName: "manualClose", publicName: "manualClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed", closeRequested: "closeRequested" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    <div\n      class=\"ea-dialog__header\"\n      [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n      <div\n        #headerEl\n        class=\"ea-dialog__header-content\"\n        [id]=\"id() + '-header'\">\n        <ng-content select=\"[slot=header]\" />\n      </div>\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"ea-dialog__close\"\n          [attr.aria-label]=\"i18n.messages().dialog.close\"\n          [disabled]=\"closeDisabled()\"\n          (click)=\"requestClose()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__status\">\n      <ng-content select=\"[slot=status]\" />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty),>.ea-dialog__status:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--space-3))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom, var(--space-3)));overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status{flex-shrink:0;padding:var(--ea-dialog-status-padding, var(--space-2) var(--space-6) var(--_ea-dialog-status-padding-bottom, var(--space-2)));font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status:empty{display:none}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeDisabled: { classPropertyName: "closeDisabled", publicName: "closeDisabled", isSignal: true, isRequired: false, transformFunction: null }, manualClose: { classPropertyName: "manualClose", publicName: "manualClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed", closeRequested: "closeRequested" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    <div\n      class=\"ea-dialog__header\"\n      [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n      <div\n        #headerEl\n        class=\"ea-dialog__header-content\"\n        [id]=\"id() + '-header'\">\n        <ng-content select=\"[slot=header]\" />\n      </div>\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"ea-dialog__close\"\n          [attr.aria-label]=\"i18n.messages().dialog.close\"\n          [disabled]=\"closeDisabled()\"\n          (click)=\"requestClose()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__status\">\n      <ng-content select=\"[slot=status]\" />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty))>.ea-dialog__status{--_ea-dialog-status-padding-top: 0}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty)):not(:has(>.ea-dialog__status:not(:empty)))>.ea-dialog__footer{--_ea-dialog-footer-padding-top: 0}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__body:not(:empty),>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__header{--_ea-dialog-header-padding-bottom: var(--space-5)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--_ea-dialog-header-padding-bottom, 0))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom, var(--space-3)))}.ea-dialog__body:empty{display:none}.ea-dialog__body{overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status{flex-shrink:0;padding:var(--ea-dialog-status-padding, var(--_ea-dialog-status-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-status-padding-bottom, 0));font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status:empty{display:none}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--_ea-dialog-footer-padding-top, var(--space-3)) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    <div\n      class=\"ea-dialog__header\"\n      [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n      <div\n        #headerEl\n        class=\"ea-dialog__header-content\"\n        [id]=\"id() + '-header'\">\n        <ng-content select=\"[slot=header]\" />\n      </div>\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"ea-dialog__close\"\n          [attr.aria-label]=\"i18n.messages().dialog.close\"\n          [disabled]=\"closeDisabled()\"\n          (click)=\"requestClose()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__status\">\n      <ng-content select=\"[slot=status]\" />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty),>.ea-dialog__status:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--space-3))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom, var(--space-3)));overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status{flex-shrink:0;padding:var(--ea-dialog-status-padding, var(--space-2) var(--space-6) var(--_ea-dialog-status-padding-bottom, var(--space-2)));font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status:empty{display:none}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
+            args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    <div\n      class=\"ea-dialog__header\"\n      [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n      <div\n        #headerEl\n        class=\"ea-dialog__header-content\"\n        [id]=\"id() + '-header'\">\n        <ng-content select=\"[slot=header]\" />\n      </div>\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"ea-dialog__close\"\n          [attr.aria-label]=\"i18n.messages().dialog.close\"\n          [disabled]=\"closeDisabled()\"\n          (click)=\"requestClose()\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__status\">\n      <ng-content select=\"[slot=status]\" />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty))>.ea-dialog__status{--_ea-dialog-status-padding-top: 0}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty)):not(:has(>.ea-dialog__status:not(:empty)))>.ea-dialog__footer{--_ea-dialog-footer-padding-top: 0}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__body:not(:empty),>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__header{--_ea-dialog-header-padding-bottom: var(--space-5)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--_ea-dialog-header-padding-bottom, 0))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom, var(--space-3)))}.ea-dialog__body:empty{display:none}.ea-dialog__body{overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status{flex-shrink:0;padding:var(--ea-dialog-status-padding, var(--_ea-dialog-status-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-status-padding-bottom, 0));font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status:empty{display:none}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--_ea-dialog-footer-padding-top, var(--space-3)) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['headerEl', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDisabled", required: false }] }], manualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
 // The padding side, per position, applied to the push target so its content
@@ -11562,7 +11613,7 @@ class DropdownComponent {
             clearTimeout(this.typeaheadTimer);
         }
         this.typeaheadTimer = setTimeout(() => (this.typeaheadQuery = ''), 500);
-        this.typeaheadQuery += event.key.toLowerCase();
+        this.typeaheadQuery += foldForSearch(event.key);
         const wasOpen = this.isOpen();
         if (!wasOpen) {
             this.toggle();
@@ -11578,7 +11629,7 @@ class DropdownComponent {
         for (let offset = firstOffset; offset <= opts.length; offset++) {
             const idx = (start + offset) % opts.length;
             const opt = opts[idx];
-            if (!opt.disabled && opt.label.toLowerCase().startsWith(this.typeaheadQuery)) {
+            if (!opt.disabled && foldForSearch(opt.label).startsWith(this.typeaheadQuery)) {
                 this.setFocusedIndex(idx);
                 return;
             }
@@ -13715,15 +13766,15 @@ class MultiSelectComponent {
     flatOptions = computed(() => flattenGroups(this.optionGroups()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
     filteredGroups = computed(() => {
-        const term = this.searchTerm().trim().toLowerCase();
+        const term = foldForSearch(this.searchTerm().trim());
         const groups = this.optionGroups();
         if (!term) {
             return groups;
         }
-        return filterGroups(groups, o => o.label.toLowerCase().includes(term));
+        return filterGroups(groups, o => foldForSearch(o.label).includes(term));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
-    /** Options matching the current search term (case-insensitive substring on label). */
+    /** Options matching the current search term (case- and accent-insensitive substring on label). */
     filteredOptions = computed(() => flattenGroups(this.filteredGroups()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     /** Groups to render, each option carrying its index into `filteredOptions`. */
@@ -13748,10 +13799,10 @@ class MultiSelectComponent {
         if (!this.allowCreate() || !term) {
             return '';
         }
-        const taken = term.toLowerCase();
+        const taken = foldForSearch(term);
         // Measured against every option, not the filtered ones: an option hidden by
         // a group filter is still an option that exists
-        return this.flatOptions().some(o => o.label.trim().toLowerCase() === taken)
+        return this.flatOptions().some(o => foldForSearch(o.label.trim()) === taken)
             ? ''
             : term;
     }, /* @ts-ignore */