@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-avatar_2.cjs.entry.js

@@ -1,36 +1,98 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var baseButton = require('./base-button-BvWcXXIH.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
+var index = require('./index-BKQkUbyE.js');
+var baseButton = require('./base-button-C-1izOSS.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var focusProxy = require('./focus-proxy-BCuVbpDb.js');
+var component = require('./component-CYtonfpw.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+var ariaActivedescendant_mixin = require('./aria-activedescendant.mixin-_lb0Xz2S.js');
+require('./focus-utilities-yx7wWjEO.js');
 
-const avatarCss = () => `:host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}: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 .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary,:host(.avatar-button) .btn-tertiary.focus,:host(.avatar-button) .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) .avatar{transform:scale(0.8)}`;
+const avatarCss = () => `:host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}: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 .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) button:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .avatar{transform:scale(0.8)}:host(.avatar-button) .proxy-list{all:unset;position:absolute;left:0px;top:0px;overflow:hidden;color:transparent;opacity:0;pointer-events:all;z-index:1000}:host(.avatar-button) .proxy-list li{height:2px;width:2px;pointer-events:all}`;
 
 function DefaultAvatar(props) {
     const { initials } = props;
     if (initials) {
         return (index.h("div", { class: 'avatar-initials' }, index.h("ix-typography", { format: "label-lg" }, initials)));
     }
-    return (index.h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", "aria-label": props.a11yLabel }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), index.h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
+    return (index.h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", "aria-label": props.ariaLabel }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), index.h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
 }
 function AvatarImage(props) {
-    return (index.h("div", { class: "avatar" }, props.image ? (index.h("img", { src: props.image, class: "avatar-image", "aria-label": props.a11yLabel })) : (index.h(DefaultAvatar, { initials: props.initials, a11yLabel: props.a11yLabel }))));
+    return (index.h("div", { class: "avatar" }, props.image ? (index.h("img", { src: props.image, class: "avatar-image", "aria-label": props.ariaLabel })) : (index.h(DefaultAvatar, { initials: props.initials, ariaLabel: props.ariaLabel }))));
 }
 function UserInfo(props) {
-    return (index.h(index.Fragment, null, index.h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, index.h(AvatarImage, { image: props.image, initials: props.initials, a11yLabel: props.a11yLabel }), index.h("div", { class: "user" }, index.h("div", { class: "username" }, props.userName), props.extra && (index.h("ix-typography", { class: "extra", "text-color": 'soft' }, props.extra))))));
+    return (index.h(index.Fragment, null, index.h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, index.h(AvatarImage, { image: props.image, initials: props.initials, ariaLabel: props.ariaLabel }), index.h("div", { class: "user" }, index.h("div", { class: "username" }, props.userName), props.extra && (index.h("ix-typography", { class: "extra", "text-color": 'soft' }, props.extra))))));
 }
-const Avatar = class {
+const Avatar = class extends index.Mixin(...component.DefaultMixins, id_mixin.ComponentIdMixin, ariaActivedescendant_mixin.AriaActiveDescendantMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
-        this.isClosestApplicationHeader = false;
-        this.hasSlottedElements = false;
-        this.tooltipRef = makeRef.makeRef();
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Display an avatar image
+     *
+     */
+    image;
+    /**
+     * Display the initials of the user. Will be overwritten by image
+     *
+     */
+    initials;
+    /**
+     * If set an info card displaying the username will be placed inside the dropdown.
+     * Note: Only working if avatar is part of the ix-application-header
+     */
+    username;
+    /**
+     * Optional description text that will be displayed underneath the username.
+     * Note: Only working if avatar is part of the ix-application-header
+     */
+    extra;
+    /**
+     * Text to display in a tooltip when hovering over the avatar
+     *
+     * @since 4.0.0
+     */
+    tooltipText;
+    /**
+     * aria-label for the tooltip
+     *
+     * @since 4.0.0
+     */
+    ariaLabelTooltip;
+    isClosestApplicationHeader = false;
+    dropdownShow = false;
+    hasSlottedElements = false;
+    slotElement;
+    dropdownElement;
+    observeChildrenChange;
+    tooltipRef = makeRef.makeRef();
+    a11yAttributes = {};
+    get items() {
+        return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
     }
     componentWillLoad() {
+        this.a11yAttributes = a11y.a11yHostAttributes(this.hostElement);
         const closest = shadowDom.closestElement('ix-application-header', this.hostElement);
         this.isClosestApplicationHeader = closest !== null;
+        this.observeChildrenChange = new MutationObserver(() => {
+            this.updateProxyList();
+        });
+        this.observeChildrenChange.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    componentDidLoad() {
+        this.updateProxyList();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observeChildrenChange?.disconnect();
     }
     async slottedChanged() {
         this.hasSlottedElements = shadowDom.hasSlottedElements(this.slotElement);
@@ -48,27 +110,57 @@ const Avatar = class {
             });
         });
     }
+    resolveTooltipTrigger() {
+        // fallback to host element if component is used outside of the application header, and thus has no button element as trigger
+        return this.resolveAvatarTrigger().catch(() => this.hostElement);
+    }
     onDropdownClick(event) {
         if (event.target === this.dropdownElement) {
             event.preventDefault();
         }
     }
+    getControllingAriaElement() {
+        return this.hostElement.shadowRoot.querySelector(`[aria-controls="${this.getHostElementId()}-proxy-listbox"]`);
+    }
+    isAriaActiveDescendantActive() {
+        return this.dropdownShow;
+    }
+    getAriaActiveDescendantProxyItemId() {
+        return focusProxy.PROXY_LISTITEM_ID_SUFFIX;
+    }
+    updateProxyList() {
+        const items = this.items;
+        const proxyList = this.hostElement.shadowRoot.querySelector('.proxy-list');
+        if (!proxyList) {
+            return;
+        }
+        focusProxy.updateFocusProxyList(proxyList, items, (item, proxyElement) => {
+            proxyElement.role = 'menuitem';
+            proxyElement.innerText = item.label ?? item.textContent ?? '';
+            proxyElement.ariaLabel =
+                item.ariaLabel ?? item.label ?? item.textContent ?? '';
+        });
+    }
     render() {
-        const a11y$1 = a11y.a11yHostAttributes(this.hostElement);
-        const a11yLabel = a11y$1['aria-label'];
+        const ariaLabel = this.a11yAttributes['aria-label'];
         const tooltipText = this.tooltipText || this.username;
         const ariaHidden = tooltipText === this.username;
-        const Avatar = (index.h(index.Fragment, null, index.h(AvatarImage, { image: this.image, initials: this.initials, a11yLabel: a11yLabel !== null && a11yLabel !== void 0 ? a11yLabel : this.a11yLabel }), !!tooltipText && (index.h("ix-tooltip", { ref: this.tooltipRef, for: this.hostElement, "aria-hidden": a11y.a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText))));
+        const Avatar = (index.h(index.Fragment, null, index.h(AvatarImage, { image: this.image, initials: this.initials, ariaLabel: ariaLabel }), !!tooltipText && (index.h("ix-tooltip", { ref: this.tooltipRef, for: this.resolveTooltipTrigger(), "aria-hidden": a11y.a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText))));
         if (this.isClosestApplicationHeader) {
-            return (index.h(index.Host, { slot: "ix-application-header-avatar", class: 'avatar-button' }, index.h(baseButton.BaseButton, { disabled: false, iconOval: false, icon: undefined, iconOnly: false, loading: false, selected: false, type: "button", variant: "tertiary" }, Avatar), index.h("ix-dropdown", { ref: (ref) => (this.dropdownElement = ref), trigger: this.resolveAvatarTrigger(), class: "avatar-dropdown", onClick: (e) => this.onDropdownClick(e), onShowChanged: (event) => {
+            return (index.h(index.Host, { slot: "ix-application-header-avatar", class: 'avatar-button' }, index.h(baseButton.BaseButton, { disabled: false, iconOval: false, icon: undefined, iconOnly: false, loading: false, selected: false, type: "button", variant: "tertiary", ariaAttributes: {
+                    role: 'menu',
+                    'aria-controls': `${this.getHostElementId()}-proxy-listbox`,
+                    'aria-expanded': a11y.a11yBoolean(this.dropdownShow),
+                    'aria-haspopup': 'menu',
+                } }, Avatar), index.h("ix-dropdown", { ref: (ref) => (this.dropdownElement = ref), trigger: this.resolveAvatarTrigger(), class: "avatar-dropdown", onClick: (e) => this.onDropdownClick(e), onShowChanged: (event) => {
+                    this.dropdownShow = event.detail;
                     if (event.detail && this.tooltipRef.current) {
                         this.tooltipRef.current.hideTooltip(0);
                     }
-                } }, this.username && (index.h(index.Fragment, null, index.h(UserInfo, { extra: this.extra, image: this.image, initials: this.initials, userName: this.username, a11yLabel: a11yLabel !== null && a11yLabel !== void 0 ? a11yLabel : this.a11yLabel }), this.hasSlottedElements && (index.h("ix-divider", { onClick: (e) => e.preventDefault() })))), index.h("slot", { onSlotchange: () => this.slottedChanged(), ref: (ref) => (this.slotElement = ref) }))));
+                }, disableFocusTrap: true, focusHost: this.hostElement }, index.h(focusProxy.FocusProxy, { hostId: this.getHostElementId(), otherProps: {} }), this.username && (index.h(index.Fragment, null, index.h(UserInfo, { extra: this.extra, image: this.image, initials: this.initials, userName: this.username, ariaLabel: ariaLabel }), this.hasSlottedElements && (index.h("ix-divider", { onClick: (e) => e.preventDefault() })))), index.h("slot", { onSlotchange: () => this.slottedChanged(), ref: (ref) => (this.slotElement = ref) }))));
         }
         return index.h(index.Host, null, Avatar);
     }
-    get hostElement() { return index.getElement(this); }
 };
 Avatar.style = avatarCss();
 
@@ -78,16 +170,28 @@ const MenuAvatarItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.itemClick = index.createEvent(this, "itemClick", 7);
-        this.dropdownItemRef = makeRef.makeRef();
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Avatar dropdown icon
+     */
+    icon;
+    /**
+     * Avatar dropdown label
+     */
+    label;
+    /**
+     * Avatar dropdown item clicked
+     */
+    itemClick;
+    dropdownItemRef = makeRef.makeRef();
     /** @internal */
     async getDropdownItemElement() {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (index.h("ix-dropdown-item", { key: '437aead7832603097e4f814abef0108dcb0ad386', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (index.h("ix-dropdown-item", { key: 'f96a631b215cb1d42035b4d5ffb7ce7fbea2b34a', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
-    get hostElement() { return index.getElement(this); }
 };
 MenuAvatarItem.style = menuAvatarItemCss();
 

package/dist/cjs/ix-blind.cjs.entry.js

@@ -1,28 +1,43 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 var anime_esm = require('./anime.esm-AXTM6yn_.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var index$1 = require('./index-DIYO-Liy.js');
-var animation = require('./animation-D5wGQwTg.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var index$1 = require('./index-Dw-NwUuT.js');
+var animation = require('./animation-hxDbANsw.js');
 
 const blindCss = () => `:host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}: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 .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{padding-inline-end:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-sublabel{padding-inline:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-filled) .blind-header{background-color:var(--theme-color-filled)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-filled) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-filled) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-filled){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline){border-color:var(--theme-color-soft-bdr)}`;
 
 let sequentialInstanceId = 0;
 const Blind = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.collapsedChange = index.createEvent(this, "collapsedChange", 7);
-        /**
-         * Collapsed state
-         */
-        this.collapsed = false;
-        /**
-         * Blind variant
-         */
-        this.variant = 'filled';
-        this.blindId = ++sequentialInstanceId;
-    }
+    /**
+     * Collapsed state
+     */
+    collapsed = false;
+    /**
+     * Label of blind
+     */
+    label;
+    /**
+     * Secondary label inside blind header
+     */
+    sublabel;
+    /**
+     * Optional icon to be displayed next to the header label
+     */
+    icon;
+    /**
+     * Blind variant
+     */
+    variant = 'filled';
+    /**
+     * Collapsed state changed
+     */
+    collapsedChange;
+    get hostElement() { return index.getElement(this); }
+    chevronRef;
+    blindId = ++sequentialInstanceId;
+    constructor(hostRef) { index.registerInstance(this, hostRef); this.collapsedChange = index.createEvent(this, "collapsedChange", 7); }
     onHeaderClick() {
         this.collapsed = !this.collapsed;
         this.collapsedChange.emit(this.collapsed);
@@ -69,22 +84,21 @@ const Blind = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '671ad2c0686ea67b8dd5a3b6259edd8cd2667b19', class: {
+        return (index.h(index.Host, { key: '08686a07866cce941b0d3fee3c59acda57fd9697', class: {
                 [`blind-${this.variant}`]: true,
-            } }, index.h("div", { key: '40fa7a9d37b674e2979022aadc84a4496ea9a9f5', class: 'blind-header-wrapper' }, index.h("button", { key: '29c3e84c41ec924f2b3c5a373778130afa943626', class: {
+            } }, index.h("div", { key: '37c3d29dfa4113fa51971c8487158c30dcac0cf6', class: 'blind-header-wrapper' }, index.h("button", { key: '1a725a4d9991ef417fdcd06d83565a994d20bc10', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11y.a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, index.h("slot", { key: 'b252b735380d02d028f14e7d9fbe4c5eba8c6602', name: "custom-header" })), index.h("div", { key: '6bf0d3c1465c63a94c8f022734ed826c4028855a', class: 'blind-header-content' }, index.h("ix-icon", { key: 'd21dd7db4cb813e4becce868c4dbe340a12b1e65', class: "collapse-icon", name: index$1.iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11y.a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, index.h("slot", { key: 'acae9cd5182dcfb6003a18713709ef5c5f5ba5c9', name: "custom-header" })), index.h("div", { key: 'c183148b712d24ce5416f704496af3982c5f063c', class: 'blind-header-content' }, index.h("ix-icon", { key: '679080e49ed99d10528d6b44f483349794880e9f', class: "collapse-icon", name: index$1.iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), index.h("div", { key: 'da2e1435ca1070eed1794226ca721e7e3fb22390', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (index.h(index.Fragment, null, this.icon && (index.h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), index.h("div", { key: '790921a5077d08519a86e53da114615c62ab3520', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (index.h(index.Fragment, null, this.icon && (index.h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), index.h("div", { class: 'blind-header-title-row' }, index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.label, format: "label-lg", bold: true }, index.h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.sublabel }, index.h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), index.h("div", { class: "header-actions" }, index.h("slot", { name: "header-actions" })))) : null))), index.h("section", { key: '854dd19e82a63ccb31f090dadfbcfa46d7346d21', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, index.h("div", { key: '12f77fdbb29c89d5ab26877e9db8ad9ec79f1e6f', class: {
+                : `color-${this.variant}--contrast` })), index.h("div", { class: 'blind-header-title-row' }, index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.label, format: "label-lg", bold: true }, index.h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.sublabel }, index.h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), index.h("div", { class: "header-actions" }, index.h("slot", { name: "header-actions" })))) : null))), index.h("section", { key: 'e009be22aca2af68a71115cd828695ab6f16d230', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, index.h("div", { key: '482ac28924b2edd0b5b6a751a07434764fcb64f8', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? index.h("slot", null) : null))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "collapsed": [{
                 "animation": 0