@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-field-label_2.cjs.entry.js

@@ -1,35 +1,46 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
-var validation = require('./validation-DF9UXqHB.js');
-var helperTextUtil = require('./helper-text-util-CX9jWl8m.js');
-require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var index$1 = require('./index-B4J4JK0P.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var validation = require('./validation-Dier-uPA.js');
+var helperTextUtil = require('./helper-text-util-CvfY1JxE.js');
+var component = require('./component-CYtonfpw.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+require('./index-Dw-NwUuT.js');
+require('./focus-utilities-yx7wWjEO.js');
 
-function isIxInputFieldComponent(obj) {
-    return (obj &&
-        'getAssociatedFormElement' in obj &&
-        typeof obj.getAssociatedFormElement === 'function' &&
-        'getNativeInputElement' in obj &&
-        typeof obj.getNativeInputElement === 'function');
-}
-
-const fieldLabelCss = () => `:host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}`;
+const fieldLabelCss = () => `:host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}:host(.text-overflow-no-wrap){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.text-overflow-no-wrap) ix-typography{text-overflow:ellipsis;overflow:hidden}`;
 
 const FormFieldLabel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /** @internal */
-        this.isInvalid = false;
-        this.explicitIsInvalid = undefined;
-        this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
-        this.a11yAttributes = {};
-        this.labelRef = makeRef.makeRef();
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * A value is required or must be checked for the form to be submittable
+     */
+    required;
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlFor;
+    /** @internal */
+    controlRef;
+    /** @internal */
+    isInvalid = false;
+    textOverflow = 'wrap';
+    explicitIsInvalid = undefined;
     isInvalidChanged(newValue) {
         this.explicitIsInvalid = newValue;
     }
+    htmlForObserver = new MutationObserver(() => this.checkForInternalState());
+    htmlForClassObserver;
+    controlRefClassObserver;
+    a11yAttributes = {};
+    labelRef = makeRef.makeRef();
     connectedCallback() {
         this.registerHtmlForObserver();
         this.registerControlRefObserver();
@@ -47,6 +58,9 @@ const FormFieldLabel = class {
     }
     componentWillRender() {
         this.checkForInternalState();
+        if (shadowDom.closestPassShadow(this.hostElement, 'ix-range-field')) {
+            this.textOverflow = 'no-wrap';
+        }
     }
     componentWillLoad() {
         this.a11yAttributes = a11y.a11yHostAttributes(this.hostElement);
@@ -84,10 +98,9 @@ const FormFieldLabel = class {
         this.htmlForClassObserver = validation.createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
     }
     checkForInvalidState(elementToCheck) {
-        var _a;
         const hasInvalidClass = elementToCheck.classList.contains('is-invalid') ||
             elementToCheck.classList.contains('ix-invalid');
-        this.isInvalid = (_a = this.explicitIsInvalid) !== null && _a !== void 0 ? _a : hasInvalidClass;
+        this.isInvalid = this.explicitIsInvalid ?? hasInvalidClass;
     }
     async checkForInternalState() {
         if (this.htmlFor) {
@@ -111,7 +124,7 @@ const FormFieldLabel = class {
             const target = document.getElementById(this.htmlFor);
             if (target) {
                 let input = null;
-                if (isIxInputFieldComponent(target)) {
+                if (index$1.isIxInputFieldComponent(target)) {
                     input = await target.getNativeInputElement();
                 }
                 else {
@@ -127,9 +140,11 @@ const FormFieldLabel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1a8134a30a1b101f6bfd678f905eb88e927e47d6', onClick: () => this.focusOnClick() }, index.h("label", Object.assign({ key: 'ef6df6072485fb72ea02a0a9800be3be15e84314', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), index.h("ix-typography", { key: '572975edeae54d15932c3b6091ed63dfff8bb231', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: '452847ea7365cefc945bc6166bf2e8fd44d3f530' }), this.required && index.h("span", { key: '5e85f801d6fe8a01d6595a55bb263d0bcf91a888' }, "*")))));
+        return (index.h(index.Host, { key: 'ad08b7a792dd213a1aca7987b8ab1257a4440c2e', onClick: () => this.focusOnClick(), class: {
+                'text-overflow-wrap': this.textOverflow === 'wrap',
+                'text-overflow-no-wrap': this.textOverflow === 'no-wrap',
+            } }, index.h("label", { key: 'e26ab143b023ec5ab6e06391ee3fedd51bf71270', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, index.h("ix-typography", { key: 'd3b6dba658be6505526efb3041b96799808531e5', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, index.h("slot", { key: '4afe1e2663314280cec3de64436ebf94e9921524' }), this.required && index.h("span", { key: '28e1138de051afea91cf40226d5c3d315e331f8b' }, "*")))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "isInvalid": [{
                 "isInvalidChanged": 0
@@ -144,36 +159,132 @@ const FormFieldLabel = class {
 };
 FormFieldLabel.style = fieldLabelCss();
 
-const fieldWrapperCss = () => `:host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}`;
+const fieldWrapperCss = () => `:host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:100%;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}`;
 
-const FieldWrapper = class {
+const FieldWrapper = class extends index.Mixin(...component.DefaultMixins, id_mixin.ComponentIdMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
-        /**
-         * Is the field component invalid
-         */
-        this.isInvalid = false;
-        /**
-         * Is the field component valid
-         */
-        this.isValid = false;
-        /**
-         * Is the field component info
-         */
-        this.isInfo = false;
-        /**
-         * Is the field component warning
-         */
-        this.isWarning = false;
-        /**
-         * Show helper, error, info, warning text as tooltip
-         */
-        this.showTextAsTooltip = false;
-        /**
-         * Show label as required
-         */
-        this.required = false;
-        this.slotRef = makeRef.makeRef();
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Show text below the field component
+     */
+    helperText;
+    /**
+     * Label for the field component
+     */
+    label;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    /**
+     * Is the field component invalid
+     */
+    isInvalid = false;
+    /**
+     * Is the field component valid
+     */
+    isValid = false;
+    /**
+     * Is the field component info
+     */
+    isInfo = false;
+    /**
+     * Is the field component warning
+     */
+    isWarning = false;
+    /**
+     * Show helper, error, info, warning text as tooltip
+     */
+    showTextAsTooltip = false;
+    /**
+     * Show label as required
+     */
+    required = false;
+    /**
+     * The control element that the label is associated with
+     */
+    controlRef;
+    slotRef = makeRef.makeRef();
+    hasExplicitAriaLabel = false;
+    componentDidLoad() {
+        this.syncAriaLabel(true);
+    }
+    syncAriaLabel(initialSync = false) {
+        if (!this.controlRef || this.hasExplicitAriaLabel) {
+            return;
+        }
+        this.controlRef.waitForCurrent().then((el) => {
+            if (initialSync &&
+                (el.hasAttribute('aria-label') || el.hasAttribute('aria-labelledby'))) {
+                this.hasExplicitAriaLabel = true;
+                return;
+            }
+            if (this.label) {
+                el.setAttribute('aria-label', this.label);
+            }
+            else {
+                el.removeAttribute('aria-label');
+            }
+        });
+    }
+    componentWillLoad() {
+        if (!this.hostElement.querySelector('.error-message-container')) {
+            const errorMessageContainer = document.createElement('span');
+            errorMessageContainer.classList.add('error-message-container');
+            errorMessageContainer.id = `${this.getHostElementId()}-errormessage`;
+            errorMessageContainer.hidden = true;
+            this.hostElement.appendChild(errorMessageContainer);
+        }
+        if (!this.hostElement.querySelector('.helper-message-container')) {
+            const helperMessageContainer = document.createElement('span');
+            helperMessageContainer.classList.add('helper-message-container');
+            helperMessageContainer.id = `${this.getHostElementId()}-helpermessage`;
+            helperMessageContainer.hidden = true;
+            this.hostElement.appendChild(helperMessageContainer);
+        }
+    }
+    componentWillRender() {
+        const errorMessageElement = this.hostElement.querySelector(`#${this.getHostElementId()}-errormessage`);
+        const helperMessageElement = this.hostElement.querySelector(`#${this.getHostElementId()}-helpermessage`);
+        if (this.isInvalid && this.invalidText && errorMessageElement) {
+            errorMessageElement.textContent = this.invalidText;
+        }
+        if (helperMessageElement) {
+            helperMessageElement.textContent = helperTextUtil.resolveTextFromValidationState({
+                isInvalid: this.isInvalid,
+                invalidText: this.invalidText,
+                isWarning: this.isWarning,
+                warningText: this.warningText,
+                isInfo: this.isInfo,
+                infoText: this.infoText,
+                isValid: this.isValid,
+                validText: this.validText,
+                helperText: this.helperText,
+            });
+        }
+    }
+    /** @internal */
+    getAriaErrorMessageElement() {
+        return Promise.resolve(this.hostElement.querySelector(`#${this.getHostElementId()}-errormessage`));
+    }
+    /** @internal */
+    getAriaHelperMessageElement() {
+        return Promise.resolve(this.hostElement.querySelector(`#${this.getHostElementId()}-helpermessage`));
     }
     render() {
         const textOptions = {
@@ -187,11 +298,22 @@ const FieldWrapper = class {
             infoText: this.infoText,
             helperText: this.helperText,
         };
-        return (index.h(index.Host, { key: '531b08942bf31c36043fb3d7cd3af489f2fe83b0' }, this.label && (index.h("div", { key: '49b9ef124fc2d69fb2528585d7b232b2e3d6d4b6', class: "field-top" }, index.h("ix-field-label", { key: '20a089a72de7ee3045c048c19d868ff3b4be2706', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), index.h("div", { key: '80c8ce58eb73379755757b2cef6b318cdc279b6b', class: {
+        let additionalAriaAttributes = {};
+        if (this.isInvalid && this.invalidText) {
+            additionalAriaAttributes = {
+                role: 'alert',
+                'aria-live': 'polite',
+            };
+        }
+        return (index.h(index.Host, { key: 'a4f662cd63da96de568d5e07e0f6a45c94bcd584', ...additionalAriaAttributes }, this.label && (index.h("div", { key: '1346c736edc70179f2059775f374291769a421f7', class: "field-top" }, index.h("ix-field-label", { key: '618c08136bad64dad9db510093823d733515a73a', required: this.required, controlRef: this.controlRef, isInvalid: this.isInvalid, ariaHidden: true }, this.label))), index.h("div", { key: '2828a6fb240b15aea2cc70bf7ddef77db0075fcb', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, index.h("slot", { key: 'f41f0681742e9f783092bad7484c851e2b987c99' })), index.h("div", { key: '9db46e23621d508e08fe87cae69a3698491347dc', class: 'field-bottom' }, !this.showTextAsTooltip && index.h(helperTextUtil.HelperText, Object.assign({ key: '29802c92675a34cd215740a5df6fae77ed36368f' }, textOptions)), index.h("div", { key: 'b94a1cc2acd5f8379e768fda9f222af6cb85f2b7', class: "bottom-right" }, index.h("slot", { key: '3c5ba2d9a6d4671b6fadba6e06455ae229894f94', name: "bottom-right" }))), this.showTextAsTooltip === true && helperTextUtil.hasAnyText(textOptions) && (index.h("ix-tooltip", { key: '890c4a39781fbb14b96660691fd6f6fe96a30e0b', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, index.h(helperTextUtil.HelperText, Object.assign({ key: '638410fd78282cf38065635a79cceeb064a2a10e' }, textOptions))))));
+            }, ref: this.slotRef }, index.h("slot", { key: 'd778378932be23d0a791b3669960fa649a4ec5c1' })), index.h("div", { key: 'ed43976cd734aa9875e2c93e91d2eefd26335c37', class: 'field-bottom' }, !this.showTextAsTooltip && index.h(helperTextUtil.HelperText, { key: '16431fc816256f1725b79724cd8f6074859238a8', ...textOptions }), index.h("div", { key: 'add4cb3093d060e453ceedf72a77cdbe7d7384fa', class: "bottom-right" }, index.h("slot", { key: 'db90b01c037ea3821cfa651e2e1b37c2d5be5056', name: "bottom-right" }))), this.showTextAsTooltip === true && helperTextUtil.hasAnyText(textOptions) && (index.h("ix-tooltip", { key: '5e26bbe7f3a8915b7066701158a5db6eb83466f6', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, index.h(helperTextUtil.HelperText, { key: '8ba126d47085141f329a2c691c44bfb5a61f099a', ...textOptions })))));
     }
-    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "label": [{
+                "syncAriaLabel": 0
+            }]
+    }; }
 };
 FieldWrapper.style = fieldWrapperCss();
 

package/dist/cjs/ix-filter-chip_2.cjs.entry.js

@@ -1,32 +1,62 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var focusUtilities = require('./focus-utilities-yx7wWjEO.js');
+var component = require('./component-CYtonfpw.js');
+var focusVisible_mixin = require('./focus-visible.mixin-BU5Ql7d1.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+require('./shadow-dom-BG8VqeIu.js');
 
-const filterChipCss = () => `:host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}`;
+const filterChipCss = () => `:host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}`;
 
 const FilterChip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.closeClick = index.createEvent(this, "closeClick", 7);
-        /**
-         * If true the filter chip will be in disabled state
-         */
-        this.disabled = false;
-        /**
-         * If true the filter chip will be in readonly mode
-         */
-        this.readonly = false;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * If true the filter chip will be in disabled state
+     */
+    disabled = false;
+    /**
+     * If true the filter chip will be in readonly mode
+     */
+    readonly = false;
+    /**
+     * ARIA label for the close icon button
+     * Will be set as aria-label on the nested HTML button element
+     */
+    ariaLabelCloseIconButton;
+    /**
+     * Close clicked
+     */
+    closeClick;
     onCloseClick(event) {
         event.preventDefault();
         event.stopPropagation();
         this.closeClick.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'e583d14307f98b55f1ff4be4b9c3897776eaae75', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, index.h("div", { key: '998751b62b8266368176fe1186a6dd2f311199be', class: "slot-container" }, index.h("slot", { key: '2861044a08d5b237444cda5bb5fafe0bc0c97790' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { variant: "tertiary", oval: true, icon: index$1.iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (index.h(index.Host, { key: '9841430ba413f80306e58e57a00171a5c25dcb30', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, index.h("div", { key: '35110f7c7d5e10b2f0369b0662b7c09f476f2808', class: "slot-container" }, index.h("slot", { key: '6ab57ea45ff84f87f4cc569c455fb896336c8392' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { variant: "tertiary", oval: true, icon: index$1.iconCloseSmall, size: "16", disabled: this.disabled, onClick: (event) => {
+                this.onCloseClick(event);
+            }, onKeyDown: (event) => {
+                switch (event.key) {
+                    case 'Enter':
+                    case ' ':
+                        this.onCloseClick(event);
+                        break;
+                    case 'Tab':
+                        break;
+                    default:
+                        event.preventDefault();
+                        event.stopPropagation();
+                }
+            }, "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
-    get hostElement() { return index.getElement(this); }
 };
 FilterChip.style = filterChipCss();
 
@@ -57,35 +87,44 @@ class IxSelectItemValueChangeEvent extends CustomEvent {
 
 const selectItemCss = () => `:host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host ix-dropdown-item{color:var(--theme-color-std-text)}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.display-none){display:none}`;
 
-const SelectItem = class {
+const SelectItem = class extends index.Mixin(...component.DefaultMixins, focusVisible_mixin.FocusVisibleMixin, id_mixin.ComponentIdMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.itemClick = index.createEvent(this, "itemClick", 7);
-        /**
-         * Flag indicating whether the item is selected
-         */
-        this.selected = false;
-        /**
-         * @internal
-         */
-        this.hover = false;
-        this.componentLoaded = false;
-    }
-    /** @internal */
-    async getDropdownItemElement() {
-        return this.dropdownItem;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Displayed name of the item
+     */
+    label;
+    /**
+     * The value of the item.
+     * Important: The select component uses string values to handle selection and will call toString() on this value.
+     * Therefor a string should be passed to value to prevent unexpected behavior.
+     */
+    value;
+    /**
+     * Flag indicating whether the item is selected
+     */
+    selected = false;
     /**
      * @internal
-     * @param event
      */
-    async onItemClick(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        this.itemClick.emit(this.value);
+    hover = false;
+    /**
+     * Item clicked
+     */
+    itemClick;
+    componentLoaded = false;
+    dropdownItemRef = makeRef.makeRef();
+    inheritAriaAttributes = {};
+    componentDidLoad() {
+        this.inheritAriaAttributes = a11y.a11yHostAttributes(this.hostElement);
     }
-    get dropdownItem() {
-        return this.hostElement.querySelector('ix-dropdown-item');
+    /** @internal */
+    async getDropdownItemElement() {
+        return this.dropdownItemRef.waitForCurrent();
     }
     componentDidRender() {
         if (this.value === undefined || this.value === null) {
@@ -110,12 +149,21 @@ const SelectItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '619f989267f4add7b0975752c1df3194c1bc9810' }, index.h("ix-dropdown-item", { key: '6a54101b711fb3fef7fe39bcc260b50e6f8ba1f9', class: {
+        const ariaAttributes = {
+            ...this.inheritAriaAttributes,
+            'aria-label': this.inheritAriaAttributes['aria-label'] ?? this.label,
+        };
+        return (index.h(index.Host, { key: '41ab96fb19faa443d399c320bb1fd0ddfd436afb', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
+                [focusUtilities.IX_FOCUS_VISIBLE]: true,
+            }, "aria-hidden": "true", role: "presentation" }, index.h("ix-dropdown-item", { key: 'b346f53bce7b1294fb31f723b5446f4bcf133d88', "aria-hidden": "true", itemRole: "option", class: {
                 'select-item-checked': this.selected,
-            }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
+                [focusUtilities.IX_FOCUS_VISIBLE_ACTIVE]: this.ixFocusVisible,
+            }, checked: this.selected, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
+        "ixFocusVisible": [{
+                "$internal_checkAriaSelected": 0
+            }],
         "value": [{
                 "onValueChange": 0
             }],

package/dist/cjs/ix-flip-tile-content.cjs.entry.js

@@ -1,21 +1,21 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 
 const flipTileContentCss = () => `:host{display:block}`;
 
 const FlipTileContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Controls the visibility of the content
-         *
-         * @internal
-         */
-        this.contentVisible = false;
     }
+    /**
+     * Controls the visibility of the content
+     *
+     * @internal
+     */
+    contentVisible = false;
     render() {
-        return index.h(index.Host, { key: '002fbfde1a46839d622af7fb2be6dff5ca99aa87' }, this.contentVisible ? index.h("slot", null) : null);
+        return index.h(index.Host, { key: 'd1b72dd5673729ccf22fba396a0f9b903098ba82' }, this.contentVisible ? index.h("slot", null) : null);
     }
 };
 FlipTileContent.style = flipTileContentCss();

package/dist/cjs/ix-flip-tile.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 var anime_esm = require('./anime.esm-AXTM6yn_.js');
-var animation = require('./animation-D5wGQwTg.js');
+var animation = require('./animation-hxDbANsw.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
 
 const flipTileCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:flex;flex-direction:column;perspective:1000px;border-radius:var(--theme-flip--border-radius) var(--theme-flip--border-radius) 0 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .flip-tile-header{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}:host .flip-tile-header .header-slot-container{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .content-container{flex-grow:1;margin:1rem}:host .flip-tile-container{display:flex;flex-direction:column;height:100%;transform-style:preserve-3d;border-radius:var(--theme-flip--border-radius) var(--theme-flip--border-radius) 0 0}:host .flip-tile-container .footer{height:3rem;align-items:center;justify-content:center;padding:0 0.5rem}:host .flip-tile-container .footer :first-child{height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .flip-tile-container ::slotted(*){display:flex;flex-direction:column;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host:hover .flip-tile-container .footer ix-icon{color:var(--theme-color-std-text)}:host(.flip-tile-variant-outline){border:solid 1px var(--theme-flip-outline--border-color)}:host(.flip-tile-variant-outline) .flip-tile-container{background-color:var(--theme-flip-outline--background);color:var(--theme-flip-outline--color)}:host(.flip-tile-variant-outline) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-outline-footer--border-color);background-color:var(--theme-flip-outline-footer--background);color:var(--theme-flip-outline-footer--color)}:host(.flip-tile-variant-outline) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-filled){border:solid 1px var(--theme-flip-filled--border-color)}:host(.flip-tile-variant-filled) .flip-tile-container{background-color:var(--theme-flip-filled--background);color:var(--theme-flip-filled--color)}:host(.flip-tile-variant-filled) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-filled-footer--border-color);background-color:var(--theme-flip-filled-footer--background);color:var(--theme-flip-filled-footer--color)}:host(.flip-tile-variant-filled) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-info){border:solid 1px var(--theme-flip-info--border-color)}:host(.flip-tile-variant-info) .flip-tile-container{background-color:var(--theme-flip-info--background);color:var(--theme-flip-info--color)}:host(.flip-tile-variant-info) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-info-footer--border-color);background-color:var(--theme-flip-info-footer--background);color:var(--theme-flip-info-footer--color)}:host(.flip-tile-variant-info) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-warning){border:solid 1px var(--theme-flip-warning--border-color)}:host(.flip-tile-variant-warning) .flip-tile-container{background-color:var(--theme-flip-warning--background);color:var(--theme-flip-warning--color)}:host(.flip-tile-variant-warning) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-warning-footer--border-color);background-color:var(--theme-flip-warning-footer--background);color:var(--theme-flip-warning-footer--color)}:host(.flip-tile-variant-warning) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-alarm){border:solid 1px var(--theme-flip-alarm--border-color)}:host(.flip-tile-variant-alarm) .flip-tile-container{background-color:var(--theme-flip-alarm--background);color:var(--theme-flip-alarm--color)}:host(.flip-tile-variant-alarm) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-alarm-footer--border-color);background-color:var(--theme-flip-alarm-footer--background);color:var(--theme-flip-alarm-footer--color)}:host(.flip-tile-variant-alarm) .flip-tile-container .footer.show-footer{display:flex}:host(.flip-tile-variant-primary){border:solid 1px var(--theme-flip-primary--border-color)}:host(.flip-tile-variant-primary) .flip-tile-container{background-color:var(--theme-flip-primary--background);color:var(--theme-flip-primary--color)}:host(.flip-tile-variant-primary) .flip-tile-container .footer{display:none;border-top:1px solid var(--theme-flip-primary-footer--border-color);background-color:var(--theme-flip-primary-footer--background);color:var(--theme-flip-primary-footer--color)}:host(.flip-tile-variant-primary) .flip-tile-container .footer.show-footer{display:flex}`;
 
@@ -13,29 +13,43 @@ const FlipTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggle = index.createEvent(this, "toggle", 7);
-        /**
-         * Variation of the Flip
-         *
-         * @since 4.0.0
-         */
-        this.variant = 'filled';
-        /**
-         * Height interpreted as REM
-         */
-        this.height = 15.125;
-        /**
-         * Width interpreted as REM
-         */
-        this.width = 16;
-        /**
-         * Index of the currently visible content
-         * @since 3.0.0
-         */
-        this.index = 0;
-        this.isFlipAnimationActive = false;
-        this.hasFooterSlot = false;
-        this.contentItems = [];
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Variation of the Flip
+     *
+     * @since 4.0.0
+     */
+    variant = 'filled';
+    /**
+     * Height interpreted as REM
+     */
+    height = 15.125;
+    /**
+     * Width interpreted as REM
+     */
+    width = 16;
+    /**
+     * Index of the currently visible content
+     * @since 3.0.0
+     */
+    index = 0;
+    /**
+     * ARIA label for the eye icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelEyeIconButton;
+    /**
+     * Event emitted when the index changes
+     * @since 3.0.0
+     */
+    toggle;
+    isFlipAnimationActive = false;
+    hasFooterSlot = false;
+    contentItems = [];
+    observer;
     watchIndex(newIndex, oldIndex) {
         if (newIndex === oldIndex) {
             return;
@@ -116,7 +130,7 @@ const FlipTile = class {
         }, 2 * animation.Animation.defaultTime);
     }
     render() {
-        return (index.h(index.Host, { key: 'a54038f2dbaeffac796822404e2d186c742a5357', class: {
+        return (index.h(index.Host, { key: '8f44b0e813e8718e598a5bbf86e5243cae9d9d84', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -125,12 +139,11 @@ const FlipTile = class {
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, index.h("div", { key: '0bf12231b1cdeb0afe41d9d45c06fdef4cdedaf4', class: "flip-tile-container" }, index.h("div", { key: '3e9da89ed0b9cf7595e4c1d317d21ed1b55aa9d7', class: "flip-tile-header" }, index.h("div", { key: 'd4e7cc2a8162254ea3c7c4a0a031346b7a35e3d9', class: "header-slot-container text-l-title" }, index.h("slot", { key: 'dd9e2244a75179ceb4ac9647b403a5e2b01fd2ae', name: "header" })), index.h("ix-icon-button", { key: '74a5abdba3bf0c90222fc7bf7064742c0ea85b80', icon: index$1.iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), index.h("div", { key: '636884dbf0b0143e4f30061cd6e0472c83fe698a', class: "content-container" }, index.h("slot", { key: 'b94b3a488e7a137b06505290ab351724c5f01fca' })), index.h("div", { key: 'a15153c86848df2dd14b1423c686b9655d6fcdc1', class: {
+            } }, index.h("div", { key: '7b5f1426b1a127c5b6ca9905275b18cc3837851b', class: "flip-tile-container" }, index.h("div", { key: '00a07a72271616f23203df889aba1f0111cdf9fa', class: "flip-tile-header" }, index.h("div", { key: 'b868adc9e3dc6fa793184c3833b651022a25857e', class: "header-slot-container text-l-title" }, index.h("slot", { key: '0fa28f51cb1748ee2913ed1cf331e5bbd3b5cf7d', name: "header" })), index.h("ix-icon-button", { key: '14a236c0fa509ea4d0964506b8eaef8228217ae1', icon: index$1.iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), index.h("div", { key: '5c583cac2e7f99fb047fd367dfc462fcef292bdc', class: "content-container" }, index.h("slot", { key: '936e1e1cd58d95c492a827c0277ceed18994820d' })), index.h("div", { key: 'e5c42a2f7e499a83cbdbedf75283d7d4eea7e14b', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, index.h("slot", { key: '68d0585ff19d8a29fc8ccfdb2ec6302f767e3a94', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, index.h("slot", { key: '0ad67ace7ff3883a84208142112ceb5a98a5686c', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "index": [{
                 "watchIndex": 0