@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/dropdown-button/dropdown-button.css

@@ -38,6 +38,12 @@
   position: relative;
   height: 2rem;
   width: auto;
+  --ix-dropdown-button-border-radius-left: var(--theme-btn--border-radius);
+  --ix-dropdown-button-border-radius-right: var(--theme-btn--border-radius);
+  border-top-left-radius: var(--ix-dropdown-button-border-radius-left);
+  border-bottom-left-radius: var(--ix-dropdown-button-border-radius-left);
+  border-top-right-radius: var(--ix-dropdown-button-border-radius-right);
+  border-bottom-right-radius: var(--ix-dropdown-button-border-radius-right);
 }
 :host *,
 :host *::after,
@@ -89,6 +95,15 @@
 :host .hide {
   display: none;
 }
+:host ix-button,
+:host ix-icon-button {
+  --ix-button-border-radius-left: var(
+    --ix-dropdown-button-border-radius-left
+  );
+  --ix-button-border-radius-right: var(
+    --ix-dropdown-button-border-radius-right
+  );
+}
 :host .dropdown-button {
   display: block;
   position: relative;
@@ -177,6 +192,29 @@
   display: flex;
   align-items: center;
 }
+:host .remove-button-min-width {
+  min-width: 0px;
+}
+
+:host(.host-context-date-picker) .internal-button,
+:host(.host-context-breadcrumb) .internal-button {
+  min-width: 0px;
+  padding: 0;
+}
+
+:host(.host-context-date-picker) ix-dropdown {
+  max-height: 15.625rem;
+  overflow-y: scroll;
+}
+
+:host(:focus-visible) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
+:host([aria-expanded=true]:focus-visible) {
+  outline: none;
+}
 
 :host(.disabled) {
   pointer-events: none;

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -7,39 +7,82 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconChevronDownSmall, iconChevronUpSmall, } from "@siemens/ix-icons/icons";
-import { h, Host } from "@stencil/core";
-import { a11yBoolean } from "../utils/a11y";
+import { h, Host, Mixin, } from "@stencil/core";
+import { a11yBoolean, a11yHostAttributes, forceTabIndex, } from "../utils/a11y";
 import { makeRef } from "../utils/make-ref";
-export class DropdownButton {
+import { DefaultMixins } from "../utils/internal/component";
+import { AriaActiveDescendantMixin, } from "../utils/internal/mixins/accessibility/aria-activedescendant.mixin";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
+import { closestPassShadow } from "../utils/shadow-dom";
+export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
-        /**
-         * Button variant
-         */
-        this.variant = 'primary';
-        /**
-         * Disable button
-         */
-        this.disabled = false;
-        /**
-         * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
-         */
-        this.closeBehavior = 'both';
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.dropdownShow = false;
-        this.dropdownAnchor = makeRef();
-        this.onDropdownShowChanged = (event) => {
-            if (this.disabled && event.detail) {
-                return;
-            }
-            this.dropdownShow = event.detail;
-        };
+        super();
     }
+    hostElement;
+    /**
+     * Button variant
+     */
+    variant = 'primary';
+    /**
+     * Disable button
+     */
+    disabled = false;
+    /**
+     * Set label
+     */
+    label;
+    /**
+     * Button icon
+     */
+    icon;
+    /**
+     * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+     */
+    closeBehavior = 'both';
+    /**
+     * Placement of the dropdown
+     */
+    placement;
+    /**
+     * ARIA label for the dropdown button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelDropdownButton;
+    /**
+     * If true, the dropdown will try to focus checked items first when opened via keyboard, otherwise it will always focus the first focusable item.
+     *
+     * @since 5.0.0
+     */
+    focusCheckedItem = false;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Suppress the use of the aria-activedescendant attribute and related focus proxy functionality.
+     *
+     * @internal
+     * */
+    suppressAriaActiveDescendant = false;
+    /**
+     * Fire event before visibility of dropdown has changed, preventing event will cancel showing dropdown
+     */
+    showChange;
+    /**
+     * Fire event after visibility of dropdown has changed
+     */
+    showChanged;
+    dropdownShow = false;
+    inheritAriaAttributes = {};
+    dropdownButtonId = this.getHostElementId();
+    dropdownAnchor = makeRef();
+    dropdownRef = makeRef();
+    hostContext;
     getTriangle() {
         return (h("div", { class: {
                 triangle: true,
@@ -48,13 +91,85 @@ export class DropdownButton {
                 disabled: this.disabled,
             } }));
     }
+    onDropdownShowChanged = (event) => {
+        if (this.disabled && event.detail) {
+            return;
+        }
+        this.dropdownShow = event.detail;
+    };
+    componentDidLoad() {
+        this.inheritAriaAttributes = a11yHostAttributes(this.hostElement, [
+            'aria-label',
+            'aria-activedescendant',
+            'aria-haspopup',
+            'aria-controls',
+            'aria-disabled',
+            'aria-expanded',
+            'aria-current',
+            'role',
+        ]);
+    }
+    componentWillRender() {
+        this.hostContext = {
+            breadcrumb: !!closestPassShadow(this.hostElement, 'ix-breadcrumb'),
+            datePicker: !!closestPassShadow(this.hostElement, 'ix-date-picker'),
+            splitButton: !!closestPassShadow(this.hostElement, 'ix-split-button'),
+            tabs: !!closestPassShadow(this.hostElement, 'ix-tabs'),
+        };
+    }
+    getControllingAriaElement() {
+        return this.hostElement;
+    }
+    isAriaActiveDescendantActive() {
+        return !this.suppressAriaActiveDescendant && this.dropdownShow;
+    }
+    getAriaActiveDescendantProxyItemId() {
+        return false;
+    }
+    /**@internal */
+    async getDropdownReference() {
+        return this.dropdownRef.waitForCurrent();
+    }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '2232add1b732f43028df1725baa05a08ce025b69', "aria-disabled": a11yBoolean(this.disabled), class: {
+        const ariaAttributes = {
+            ...this.inheritAriaAttributes,
+            'aria-haspopup': 'true',
+            'aria-disabled': a11yBoolean(this.disabled),
+            'aria-expanded': a11yBoolean(this.dropdownShow),
+            role: 'button',
+        };
+        if (!this.inheritAriaAttributes['aria-controls']) {
+            ariaAttributes['aria-controls'] =
+                `dropdown-button-menu-${this.dropdownButtonId}`;
+        }
+        const commonProperties = {
+            id: `dropdown-button-${this.dropdownButtonId}`,
+            disabled: this.disabled,
+            variant: this.variant,
+        };
+        const hideChevron = this.hostContext?.breadcrumb ||
+            this.hostContext?.datePicker ||
+            this.hostContext?.splitButton ||
+            this.hostContext?.tabs;
+        return (h(Host, { key: '66fd74e40043daa08bb5a8c06e41bb64a11c8341', class: {
                 disabled: this.disabled,
-            }, ref: this.dropdownAnchor }, h("div", { key: '0bbbbef21fd826b770c8231e449dd5beb9d799e1', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, disabled: this.disabled, alignment: "start", ariaLabelButton: (_a = this.ariaLabelDropdownButton) !== null && _a !== void 0 ? _a : (this.dropdownShow ? 'Close dropdown' : 'Open dropdown'), tabIndex: this.disabled ? -1 : 0 }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: this.dropdownShow
+                'host-context-breadcrumb': !!this.hostContext?.breadcrumb,
+                'host-context-date-picker': !!this.hostContext?.datePicker,
+                'host-context-tabs': !!this.hostContext?.tabs,
+            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '06ba01710bbf5ce23e3eed2a28b9d32d5c0f4d55', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => forceTabIndex(ref, -1), ariaLabelButton: this.ariaLabelDropdownButton ??
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("slot", { name: "button-label" }), !hideChevron && (h("ix-icon", { "aria-hidden": "true", name: this.dropdownShow
                 ? iconChevronUpSmall
-                : iconChevronDownSmall, size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, disabled: this.disabled, tabIndex: this.disabled ? -1 : 0, "aria-label": (_b = this.ariaLabelDropdownButton) !== null && _b !== void 0 ? _b : (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), this.getTriangle()))), h("ix-dropdown", { key: '656053246dbf11c11da0cd70114b2fdb107cc320', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, onShowChanged: this.onDropdownShowChanged }, h("slot", { key: 'feeae55a471643b170804911b9fdf5107a70ec7e' }))));
+                : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, icon: this.icon, ref: (ref) => forceTabIndex(ref, -1), "aria-label": this.ariaLabelDropdownButton ??
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: '14ade5a93e488c58f66e6b48d0073fd6c3dc1914', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
+                // Need to dispatch the event again to handle infinite scroll of ix-date-picker,
+                // as the scroll event does not bubble beyond the shadow root
+                const scrollEvent = new CustomEvent('scroll', {
+                    bubbles: event.bubbles,
+                    cancelable: event.cancelable,
+                    detail: event.detail,
+                });
+                this.hostElement.dispatchEvent(scrollEvent);
+            } }, h("slot", { key: '2dc84d3ac4f9e004011acef979e5d4671170884c' }))));
     }
     static get is() { return "ix-dropdown-button"; }
     static get encapsulation() { return "shadow"; }
@@ -121,8 +236,8 @@ export class DropdownButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -223,6 +338,29 @@ export class DropdownButton {
                 "reflect": false,
                 "attribute": "aria-label-dropdown-button"
             },
+            "focusCheckedItem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "If true, the dropdown will try to focus checked items first when opened via keyboard, otherwise it will always focus the first focusable item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focus-checked-item",
+                "defaultValue": "false"
+            },
             "enableTopLayer": {
                 "type": "boolean",
                 "mutable": false,
@@ -248,6 +386,29 @@ export class DropdownButton {
                 "reflect": false,
                 "attribute": "enable-top-layer",
                 "defaultValue": "false"
+            },
+            "suppressAriaActiveDescendant": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Suppress the use of the aria-activedescendant attribute and related focus proxy functionality."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suppress-aria-active-descendant",
+                "defaultValue": "false"
             }
         };
     }
@@ -256,5 +417,66 @@ export class DropdownButton {
             "dropdownShow": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "showChange",
+                "name": "showChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fire event before visibility of dropdown has changed, preventing event will cancel showing dropdown"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "showChanged",
+                "name": "showChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fire event after visibility of dropdown has changed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getDropdownReference": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLIxDropdownElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIxDropdownElement": {
+                            "location": "global",
+                            "id": "global::HTMLIxDropdownElement"
+                        }
+                    },
+                    "return": "Promise<HTMLIxDropdownElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/dropdown-header/dropdown-header.js

@@ -8,8 +8,12 @@
  */
 import { h, Host } from "@stencil/core";
 export class DropdownHeader {
+    /**
+     * Display name of the header
+     */
+    label;
     render() {
-        return (h(Host, { key: '6ec911ed6360d3e523a5a871007d874d67cf1334' }, h("ix-typography", { key: 'f1a8142ff1d8212a389649a6b7cc31495ccb9fa0', class: 'category-text', format: 'h5' }, this.label)));
+        return (h(Host, { key: '44755533997a737c2767b5cf5b849ec5c18c0efa' }, h("ix-typography", { key: 'f94459f4fc66fc47d7fa22c88477d5041b7c6fb7', class: 'category-text', format: 'h5' }, this.label)));
     }
     static get is() { return "ix-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-item/dropdown-item.css

@@ -105,9 +105,6 @@
   padding: 0 1rem;
   padding-right: 1.5rem;
 }
-:host .dropdown-item:focus-visible {
-  border-color: var(--theme-color-focus-bdr);
-}
 :host .dropdown-item-checked {
   display: flex;
   align-items: center;
@@ -168,4 +165,27 @@
 }
 :host(.disabled) .dropdown-item-icon {
   color: var(--theme-color-weak-text) !important;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .dropdown-item {
+  border-color: var(--theme-color-focus-bdr);
+}
+
+:host(.ix-focused) {
+  outline: none;
+}
+:host(.ix-focused) .dropdown-item {
+  border-color: var(--theme-color-focus-bdr);
+}
+
+:host(.outline-visible) {
+  outline: 0.0625rem solid var(--theme-color-focus-bdr);
+  outline-offset: -0.0625rem;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

package/dist/collection/components/dropdown-item/dropdown-item.js

@@ -6,28 +6,64 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from "@stencil/core";
 import { iconChevronRightSmall, iconSingleCheck, } from "@siemens/ix-icons/icons";
+import { h, Host, Mixin, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
-export class DropdownItem {
+import { IX_FOCUS_VISIBLE } from "../utils/focus/focus-utilities";
+import { DefaultMixins } from "../utils/internal/component";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
+import { FocusVisibleMixin } from "../utils/internal/mixins/focus-visible.mixin";
+export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, FocusVisibleMixin) {
     constructor() {
-        /**
-         * Display hover state
-         */
-        this.hover = false;
-        /**
-         * Disable item and remove event listeners
-         */
-        this.disabled = false;
-        /**
-         * Whether the item is checked or not. If true a checkmark will mark the item as checked.
-         */
-        this.checked = false;
-        /** @internal */
-        this.isSubMenu = false;
-        /** @internal */
-        this.suppressChecked = false;
+        super();
     }
+    hostElement;
+    /**
+     * Label of dropdown item
+     */
+    label;
+    /**
+     * Icon of dropdown item
+     */
+    icon;
+    /**
+     * ARIA label for the icon
+     */
+    ariaLabelIcon;
+    /**
+     * ARIA label for the item's button
+     * Will be set as aria-label for the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelButton;
+    /**
+     * Display hover state
+     */
+    hover = false;
+    /**
+     * Disable item and remove event listeners
+     */
+    disabled = false;
+    /**
+     * Whether the item is checked or not. If true a checkmark will mark the item as checked.
+     */
+    checked = false;
+    /**
+     * Role of the host surface.
+     * Use `option` when the item represents a listbox option (e.g. inside select); use `menuitem` in menus.
+     *
+     * @since 5.0.0
+     */
+    itemRole = 'menuitem';
+    /** @internal */
+    isSubMenu = false;
+    /** @internal */
+    suppressChecked = false;
+    /** @internal */
+    hasVisualFocus = false;
+    /** @internal */
+    itemClick;
     /** @internal */
     async emitItemClick() {
         this.itemClick.emit(this.hostElement);
@@ -42,20 +78,34 @@ export class DropdownItem {
             this.icon !== undefined);
     }
     render() {
-        return (h(Host, { key: '6792db1dd356481085735838df4cfcdf11cee1ba', class: {
+        const id = this.getHostElementId();
+        let submenuAriaAttributes = {};
+        if (this.isSubMenu) {
+            submenuAriaAttributes = {
+                'aria-haspopup': 'menu',
+                'aria-expanded': 'false',
+            };
+        }
+        return (h(Host, { key: 'c3d7d2a14964fa2a609d5e028cdb14b802b02ada', id: id, role: this.itemRole, "aria-disabled": a11yBoolean(this.disabled), "aria-label": this.hostElement.ariaLabel ?? this.ariaLabelButton, class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, h("button", { key: '878eed19e5127942f10f561db2205930a7bb01ef', type: "button", tabIndex: this.disabled ? -1 : 0, class: {
-                'dropdown-item': true,
-                'no-checked-field': this.suppressChecked,
-                disabled: this.disabled,
+                [IX_FOCUS_VISIBLE]: !this.disabled,
+                'outline-visible': this.hasVisualFocus,
             }, onClick: () => {
                 if (!this.disabled) {
                     this.emitItemClick();
                 }
-            }, "aria-label": this.ariaLabelButton, "aria-disabled": a11yBoolean(this.disabled), disabled: this.disabled }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'e5eec4768210d2934ae45c3658dfa2008d10fdc0', class: "dropdown-item-text" }, this.label, h("slot", { key: '2545b062f3f2e58cd6021585a613accadce3536f' })), this.isSubMenu ? (h("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
+            }, onKeyDown: (event) => {
+                if (!this.disabled && (event.key === 'Enter' || event.key === ' ')) {
+                    this.emitItemClick();
+                }
+            }, ...submenuAriaAttributes }, h("div", { key: '016ddf6f6b319b4d9e02541c95f02d76088cdbb6', class: {
+                'dropdown-item': true,
+                'no-checked-field': this.suppressChecked,
+                disabled: this.disabled,
+            } }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '81ae34e7f76381ba84af73893c9882cedd958149', class: "dropdown-item-text" }, this.label, h("slot", { key: '9482ebc515d9de96a48bd747ab3293f1c1640a11' })), this.isSubMenu ? (h("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
     }
     static get is() { return "ix-dropdown-item"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +137,7 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label"
             },
             "icon": {
@@ -206,10 +256,40 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "checked",
                 "defaultValue": "false"
             },
+            "itemRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IxDropdownItemRole",
+                    "resolved": "\"menuitem\" | \"option\"",
+                    "references": {
+                        "IxDropdownItemRole": {
+                            "location": "import",
+                            "path": "./dropdown-item.types",
+                            "id": "src/components/dropdown-item/dropdown-item.types.ts::IxDropdownItemRole",
+                            "referenceLocation": "IxDropdownItemRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Role of the host surface.\nUse `option` when the item represents a listbox option (e.g. inside select); use `menuitem` in menus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-role",
+                "defaultValue": "'menuitem'"
+            },
             "isSubMenu": {
                 "type": "boolean",
                 "mutable": false,
@@ -255,6 +335,29 @@ export class DropdownItem {
                 "reflect": false,
                 "attribute": "suppress-checked",
                 "defaultValue": "false"
+            },
+            "hasVisualFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "has-visual-focus",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/dropdown-item/dropdown-item.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class DropdownQuickActions {
     render() {
-        return (h(Host, { key: '5b9938da726bfe31dffe1667ff81c1b3a5935e1e' }, h("slot", { key: 'a3f04dc61e5896ede45c0484506b3ee611b413c8' })));
+        return (h(Host, { key: '85a2acb610b6529f3c65b1eadc369aa39b41d9fa' }, h("slot", { key: '329e45898b1c5791e94c08bbc4c5cc8176b9e71b' })));
     }
     static get is() { return "ix-dropdown-quick-actions"; }
     static get encapsulation() { return "shadow"; }