@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-datetime-picker.cjs.entry.js

@@ -1,8 +1,13 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
+var datetime = require('./datetime-CfABwu7I.js');
+var focusTrap = require('./focus-trap-_cyPFvFq.js');
+var luxonDatetimeFormatMasks = require('./luxon-datetime-format-masks-DQVILoY7.js');
+require('./make-ref-CHsa3FY7.js');
+require('./focus-utilities-yx7wWjEO.js');
 
-const datetimePickerCss = () => `:host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}: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 ix-layout-grid{border-radius:0.25rem;box-shadow:var(--theme-shadow-4)}:host ix-time-picker{width:100%}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}:host .row-separator,:host .col-separator{border-bottom:0.0625rem solid var(--theme-datepicker-separator--background)}:host .col-separator{border-right:none}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}:host ix-time-picker{width:initial}:host .col-separator{border-right:0.0625rem solid var(--theme-datepicker-separator--background);border-bottom:none}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding:1rem}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}`;
+const datetimePickerCss = () => `:host{display:block;position:relative;width:-moz-min-content;width:min-content}: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 ix-time-picker{width:100%}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}:host .col-separator{border-bottom:0.0625rem solid var(--theme-datepicker-separator--background);border-right:none}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}:host ix-time-picker{width:initial}:host .col-separator{border-right:0.0625rem solid var(--theme-datepicker-separator--background);border-bottom:none}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{display:flex;justify-content:flex-end}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}`;
 
 const DatetimePicker = class {
     constructor(hostRef) {
@@ -10,70 +15,224 @@ const DatetimePicker = class {
         this.timeChange = index.createEvent(this, "timeChange", 7);
         this.dateChange = index.createEvent(this, "dateChange", 7);
         this.dateSelect = index.createEvent(this, "dateSelect", 7);
-        /**
-         * If true, disables date range selection (from/to).
-         */
-        this.singleSelection = false;
-        /**
-         * Date format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.dateFormat = 'yyyy/LL/dd';
-        /**
-         * Time format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.timeFormat = 'HH:mm:ss';
-        /**
-         * Show AM/PM time reference control.
-         */
-        this.showTimeReference = false;
-        /**
-         * Text of the date select button.
-         */
-        this.i18nDone = 'Done';
-        /**
-         * Top label of the time picker.
-         *
-         * @since 3.0.0
-         */
-        this.i18nTime = 'Time';
-        /**
-         * ARIA label for the previous month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelPreviousMonthButton = 'Previous month';
-        /**
-         * ARIA label for the next month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelNextMonthButton = 'Next month';
-        /**
-         * The index of which day to start the week on, based on the Locale#weekdays array.
-         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday.
-         */
-        this.weekStartIndex = 0;
-        /**
-         * Shows week numbers displayed on the left side of the date picker.
-         *
-         * @since 3.0.0
-         */
-        this.showWeekNumbers = false;
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * If true, disables date range selection (from/to).
+     */
+    singleSelection = false;
+    /**
+     * The earliest date that can be selected.
+     * If not set there will be no restriction.
+     */
+    minDate;
+    /**
+     * The latest date that can be selected.
+     * If not set there will be no restriction.
+     */
+    maxDate;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    dateFormat = 'yyyy/LL/dd';
+    /**
+     * Time format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    timeFormat = 'HH:mm:ss';
+    /**
+     * Earliest selectable time (`timeFormat` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    minTime;
+    /**
+     * Latest selectable time (`timeFormat` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    maxTime;
+    /**
+     * The selected starting date. If the picker is not in range mode, this is the selected date.
+     * Format has to match the `dateFormat` property.
+     */
+    from;
+    /**
+     * The selected end date. If the picker is not in range mode, this property has no impact.
+     * Format has to match the `dateFormat` property.
+     */
+    to;
+    /**
+     * Selected time value for the embedded time picker.
+     * Format has to match the `timeFormat` property.
+     */
+    time;
+    /**
+     * Show AM/PM time reference control.
+     */
+    showTimeReference = false;
+    /**
+     * Time reference (AM or PM).
+     */
+    timeReference;
+    /**
+     * Text of the date select button.
+     */
+    i18nDone = 'Done';
+    /**
+     * Top label of the time picker.
+     *
+     * @since 3.0.0
+     */
+    i18nTime = 'Time';
+    /**
+     * ARIA label for the previous month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelPreviousMonthButton = 'Previous month';
+    /**
+     * ARIA label for the next month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelNextMonthButton = 'Next month';
+    /**
+     * The index of which day to start the week on, based on the Locale#weekdays array.
+     * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday.
+     */
+    weekStartIndex = 0;
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    locale;
+    /**
+     * Shows week numbers displayed on the left side of the date picker.
+     *
+     * @since 3.0.0
+     */
+    showWeekNumbers = false;
+    /** @internal */
+    embedded = false;
+    /**
+     * Time change event. Emitted when the time changes in the embedded time picker.
+     */
+    timeChange;
+    /**
+     * Date change event. Emitted when the date changes in the embedded date picker.
+     */
+    dateChange;
+    /**
+     * Datetime selection event. Emitted when the user confirms the selection.
+     */
+    dateSelect;
+    datePickerElement;
+    timePickerElement;
+    selectedFromDate;
+    hasTimeConstraintsConfigured() {
+        return !!(this.minTime?.trim() || this.maxTime?.trim());
+    }
+    warnIfRangeModeIgnoresTimeConstraints() {
+        if (this.singleSelection || !this.hasTimeConstraintsConfigured()) {
+            return;
+        }
+        console.warn('[ix-datetime-picker] `minTime`/`maxTime` are ignored when range selection is enabled (`singleSelection=false`).');
+    }
+    watchFromPropHandler(value) {
+        this.selectedFromDate = value;
+    }
+    watchSingleSelectionPropHandler() {
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    watchMinTimePropHandler() {
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    watchMaxTimePropHandler() {
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    componentWillLoad() {
+        this.selectedFromDate = this.from;
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    get dateOnlyFormat() {
+        return luxonDatetimeFormatMasks.getLuxonDateOnlyFormatMask(this.dateFormat);
+    }
+    parseDateValue(value) {
+        if (!value) {
+            return null;
+        }
+        let parsed = datetime.DateTime.fromFormat(value, this.dateFormat, {
+            locale: this.locale,
+        });
+        if (!parsed.isValid) {
+            parsed = datetime.DateTime.fromFormat(value, this.dateOnlyFormat, {
+                locale: this.locale,
+            });
+        }
+        if (!parsed.isValid) {
+            return null;
+        }
+        return parsed;
+    }
+    parseDateConstraint(value, boundary) {
+        const parsed = this.parseDateValue(value);
+        if (!parsed) {
+            return null;
+        }
+        return boundary === 'start' ? parsed.startOf('day') : parsed.endOf('day');
+    }
+    getSelectedFromDateTime() {
+        const parsed = this.parseDateValue(this.selectedFromDate);
+        if (!parsed) {
+            return null;
+        }
+        return parsed.startOf('day');
+    }
+    getEffectiveTimeConstraints() {
+        if (!this.singleSelection) {
+            return { minTime: undefined, maxTime: undefined };
+        }
+        const hasDateBounds = !!(this.minDate || this.maxDate);
+        if (!hasDateBounds) {
+            return {
+                minTime: this.minTime,
+                maxTime: this.maxTime,
+            };
+        }
+        const selectedFromDate = this.getSelectedFromDateTime();
+        if (!selectedFromDate?.isValid) {
+            return { minTime: undefined, maxTime: undefined };
+        }
+        const minDate = this.parseDateConstraint(this.minDate, 'start');
+        const maxDate = this.parseDateConstraint(this.maxDate, 'end');
+        const applyMinTime = !!minDate?.isValid &&
+            !!selectedFromDate?.isValid &&
+            selectedFromDate.hasSame(minDate, 'day');
+        const applyMaxTime = !!maxDate?.isValid && selectedFromDate.hasSame(maxDate, 'day');
+        return {
+            minTime: applyMinTime ? this.minTime : undefined,
+            maxTime: applyMaxTime ? this.maxTime : undefined,
+        };
     }
     async onDone() {
-        var _a, _b, _c, _d;
-        const date = await ((_a = this.datePickerElement) === null || _a === void 0 ? void 0 : _a.getCurrentDate());
-        const time = await ((_b = this.timePickerElement) === null || _b === void 0 ? void 0 : _b.getCurrentTime());
+        const date = await this.datePickerElement?.getCurrentDate();
+        const time = await this.timePickerElement?.getCurrentTime();
         this.dateSelect.emit({
-            from: (_c = date === null || date === void 0 ? void 0 : date.from) !== null && _c !== void 0 ? _c : '',
-            to: (_d = date === null || date === void 0 ? void 0 : date.to) !== null && _d !== void 0 ? _d : '',
-            time: time !== null && time !== void 0 ? time : '',
+            from: date?.from ?? '',
+            to: date?.to ?? '',
+            time: time ?? '',
         });
     }
     async onDateChange(event) {
         event.preventDefault();
         event.stopPropagation();
         const { detail: date } = event;
+        if (typeof date === 'string') {
+            this.selectedFromDate = date;
+        }
+        else {
+            this.selectedFromDate = date?.from;
+        }
         this.dateChange.emit(date);
     }
     async onTimeChange(event) {
@@ -82,9 +241,34 @@ const DatetimePicker = class {
         const { detail: time } = event;
         this.timeChange.emit(time);
     }
+    /** @internal */
+    async getDatepickerElement() {
+        return this.datePickerElement;
+    }
+    /** @internal */
+    async getTimepickerElement() {
+        return this.timePickerElement;
+    }
     render() {
-        return (index.h(index.Host, { key: 'b9d86c0b546ff3dd211233be90f45cf340904392' }, index.h("ix-layout-grid", { key: '70904c2a642e1365186ce7e7d4b9bf5adb79eefb', class: "no-padding" }, index.h("ix-row", { key: '434f29448c882e9699b36f5f6556a685d9c62b94', class: "row-separator" }, index.h("ix-col", { key: '869ff4df2ee82fd9d5e852b466b7a82f56dd5cf4', class: "col-separator" }, index.h("ix-date-picker", { key: '2f5de1e8d151e03d09c57c365a7cfa25e3c8beb1', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), index.h("ix-col", { key: '118da04fff83d0c5980dddf257e9065b73d48e6e' }, index.h("ix-time-picker", { key: '93683737b572f841bc3b5e0158013cff8f0c0015', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), index.h("ix-row", { key: 'd2b71237c70c8305ba5ccf7026d03e7b32445bae' }, index.h("ix-col", { key: '5da543ff42da3110b1cdfdd1690c0ccd5612e3de' }, index.h("div", { key: '1fc6d77082b8dd7469ab417a9837007b46efcdf0', class: "btn-select-date-container" }, index.h("ix-button", { key: '35678b604a1f84eeeea63d0566c3f51895956a1f', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+        const { minTime, maxTime } = this.getEffectiveTimeConstraints();
+        return (index.h(index.Host, { key: '4a7b3d01b9001bd34b6c8cf357d5de34f7b326c7' }, index.h("ix-date-time-card", { key: 'c54fffa1efadf7fedf270a5d29a241cb244ae35b', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, index.h("ix-layout-grid", { key: '3d5496ac783718cec38643defe04ea9cf296714a', class: "no-padding" }, index.h("ix-row", { key: '61b4864d048b3c0e79218d892a2810a7673f4c75', class: "row-separator" }, index.h("ix-col", { key: '92844a4c2caa6837c50e29207495a5f51c236056', class: "col-separator" }, index.h("ix-date-picker", { key: '88611176a321e3cd369e2b4b6e4c594806c299ec', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, tabIndex: this.embedded ? -1 : 0,
+            [focusTrap.TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), index.h("ix-col", { key: 'acc965fc6992fb5afd79e9174cbc1ed30f09fb22' }, index.h("ix-time-picker", { key: '042cd14c98a3f7ea2c330ef55889f4cfc6c7017c', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
+            [focusTrap.TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), index.h("div", { key: 'f625f88c84a0d294fe94836b11e46f17018c4228', slot: "footer", class: "btn-select-date-container" }, index.h("ix-button", { key: 'b4f1d140c91a3f2a46724fc9a5fcb601c263f8af', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
     }
+    static get watchers() { return {
+        "from": [{
+                "watchFromPropHandler": 0
+            }],
+        "singleSelection": [{
+                "watchSingleSelectionPropHandler": 0
+            }],
+        "minTime": [{
+                "watchMinTimePropHandler": 0
+            }],
+        "maxTime": [{
+                "watchMaxTimePropHandler": 0
+            }]
+    }; }
 };
 DatetimePicker.style = datetimePickerCss();
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 
 const dividerCss = () => `:host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}`;
 
@@ -9,7 +9,7 @@ const Divider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: 'ca814e8d386105be46954dfba6ae6f9a0c8ba4a9' });
+        return index.h(index.Host, { key: '2353ffd7afdc669190af6a4ee6f405c38ac117de' });
     }
 };
 Divider.style = dividerCss();

package/dist/cjs/ix-dropdown-button.cjs.entry.js

@@ -1,43 +1,89 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var component = require('./component-CYtonfpw.js');
+var ariaActivedescendant_mixin = require('./aria-activedescendant.mixin-_lb0Xz2S.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+require('./focus-utilities-yx7wWjEO.js');
 
-const dropdownButtonCss = () => `:host{display:inline-block;position:relative;height:2rem;width:auto}: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 .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary{color:var(--theme-btn-primary--color)}:host .triangle.secondary{color:var(--theme-btn-secondary--color)}:host .triangle.tertiary{color:var(--theme-btn-tertiary--color)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .triangle.tertiary.disabled{color:var(--theme-btn-tertiary--color--disabled)}:host .triangle.subtle-primary{color:var(--theme-btn-subtle-primary--color)}:host .triangle.subtle-secondary{color:var(--theme-btn-subtle-secondary--color)}:host .triangle.subtle-tertiary{color:var(--theme-btn-subtle-tertiary--color)}:host .triangle.subtle-primary.disabled{color:var(--theme-btn-subtle-primary--color--disabled)}:host .triangle.subtle-secondary.disabled{color:var(--theme-btn-subtle-secondary--color--disabled)}:host .triangle.subtle-tertiary.disabled{color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .triangle.danger-primary{color:var(--theme-btn-danger-primary--color)}:host .triangle.danger-secondary{color:var(--theme-btn-danger-secondary--color)}:host .triangle.danger-tertiary{color:var(--theme-btn-danger-tertiary--color)}:host .triangle.danger-primary.disabled{color:var(--theme-btn-danger-primary--color--disabled)}:host .triangle.danger-secondary.disabled{color:var(--theme-btn-danger-secondary--color--disabled)}:host .triangle.danger-tertiary.disabled{color:var(--theme-btn-danger-tertiary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}`;
+const dropdownButtonCss = () => `:host{display:inline-block;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,: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 .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;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary{color:var(--theme-btn-primary--color)}:host .triangle.secondary{color:var(--theme-btn-secondary--color)}:host .triangle.tertiary{color:var(--theme-btn-tertiary--color)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .triangle.tertiary.disabled{color:var(--theme-btn-tertiary--color--disabled)}:host .triangle.subtle-primary{color:var(--theme-btn-subtle-primary--color)}:host .triangle.subtle-secondary{color:var(--theme-btn-subtle-secondary--color)}:host .triangle.subtle-tertiary{color:var(--theme-btn-subtle-tertiary--color)}:host .triangle.subtle-primary.disabled{color:var(--theme-btn-subtle-primary--color--disabled)}:host .triangle.subtle-secondary.disabled{color:var(--theme-btn-subtle-secondary--color--disabled)}:host .triangle.subtle-tertiary.disabled{color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .triangle.danger-primary{color:var(--theme-btn-danger-primary--color)}:host .triangle.danger-secondary{color:var(--theme-btn-danger-secondary--color)}:host .triangle.danger-tertiary{color:var(--theme-btn-danger-tertiary--color)}:host .triangle.danger-primary.disabled{color:var(--theme-btn-danger-primary--color--disabled)}:host .triangle.danger-secondary.disabled{color:var(--theme-btn-danger-secondary--color--disabled)}:host .triangle.danger-tertiary.disabled{color:var(--theme-btn-danger-tertiary--color--disabled)}:host .content{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}`;
 
-const DropdownButton = class {
+const DropdownButton = class extends index.Mixin(...component.DefaultMixins, id_mixin.ComponentIdMixin, ariaActivedescendant_mixin.AriaActiveDescendantMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
-        /**
-         * 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.makeRef();
-        this.onDropdownShowChanged = (event) => {
-            if (this.disabled && event.detail) {
-                return;
-            }
-            this.dropdownShow = event.detail;
-        };
+        this.showChange = index.createEvent(this, "showChange", 7);
+        this.showChanged = index.createEvent(this, "showChanged", 7);
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * 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.makeRef();
+    dropdownRef = makeRef.makeRef();
+    hostContext;
     getTriangle() {
         return (index.h("div", { class: {
                 triangle: true,
@@ -46,15 +92,86 @@ const DropdownButton = class {
                 disabled: this.disabled,
             } }));
     }
+    onDropdownShowChanged = (event) => {
+        if (this.disabled && event.detail) {
+            return;
+        }
+        this.dropdownShow = event.detail;
+    };
+    componentDidLoad() {
+        this.inheritAriaAttributes = a11y.a11yHostAttributes(this.hostElement, [
+            'aria-label',
+            'aria-activedescendant',
+            'aria-haspopup',
+            'aria-controls',
+            'aria-disabled',
+            'aria-expanded',
+            'aria-current',
+            'role',
+        ]);
+    }
+    componentWillRender() {
+        this.hostContext = {
+            breadcrumb: !!shadowDom.closestPassShadow(this.hostElement, 'ix-breadcrumb'),
+            datePicker: !!shadowDom.closestPassShadow(this.hostElement, 'ix-date-picker'),
+            splitButton: !!shadowDom.closestPassShadow(this.hostElement, 'ix-split-button'),
+            tabs: !!shadowDom.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 (index.h(index.Host, { key: '2232add1b732f43028df1725baa05a08ce025b69', "aria-disabled": a11y.a11yBoolean(this.disabled), class: {
+        const ariaAttributes = {
+            ...this.inheritAriaAttributes,
+            'aria-haspopup': 'true',
+            'aria-disabled': a11y.a11yBoolean(this.disabled),
+            'aria-expanded': a11y.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 (index.h(index.Host, { key: '59d07afdec3de70b4ff4b3c7b63fc1a8cdc6a1c1', class: {
                 disabled: this.disabled,
-            }, ref: this.dropdownAnchor }, index.h("div", { key: '0bbbbef21fd826b770c8231e449dd5beb9d799e1', class: "dropdown-button" }, this.label ? (index.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 }, index.h("div", { class: 'content' }, this.icon ? (index.h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, index.h("div", { class: 'button-label' }, this.label), index.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 }, index.h("div", { key: '092c941db7574a1ada117b855dfb62934d2e6a3e', class: "dropdown-button" }, this.label || this.label === null ? (index.h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => (ref.tabIndex = -1), ariaLabelButton: this.ariaLabelDropdownButton ??
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }, index.h("div", { class: 'content' }, this.icon ? (index.h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, index.h("div", { class: 'button-label' }, this.label), index.h("slot", { name: "button-label" }), !hideChevron && (index.h("ix-icon", { "aria-hidden": "true", name: this.dropdownShow
                 ? index$1.iconChevronUpSmall
-                : index$1.iconChevronDownSmall, size: "24" })))) : (index.h("div", null, index.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()))), index.h("ix-dropdown", { key: '656053246dbf11c11da0cd70114b2fdb107cc320', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, onShowChanged: this.onDropdownShowChanged }, index.h("slot", { key: 'feeae55a471643b170804911b9fdf5107a70ec7e' }))));
+                : index$1.iconChevronDownSmall, size: "24" }))))) : (index.h("div", null, index.h("ix-icon-button", { ...commonProperties, icon: this.icon, ref: (ref) => (ref.tabIndex = -1), "aria-label": this.ariaLabelDropdownButton ??
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), index.h("ix-dropdown", { key: '2d1d3f151c4aea4bc2bac6708c9554cacb3993bd', 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);
+            } }, index.h("slot", { key: 'dc1d3c88cde3ec8d126d967c9248aa9046fd0bf7' }))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 DropdownButton.style = dropdownButtonCss();
 

package/dist/cjs/ix-dropdown-header.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 
 const dropdownHeaderCss = () => `:host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}: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}`;
 
@@ -8,8 +8,12 @@ const DropdownHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /**
+     * Display name of the header
+     */
+    label;
     render() {
-        return (index.h(index.Host, { key: '6ec911ed6360d3e523a5a871007d874d67cf1334' }, index.h("ix-typography", { key: 'f1a8142ff1d8212a389649a6b7cc31495ccb9fa0', class: 'category-text', format: 'h5' }, this.label)));
+        return (index.h(index.Host, { key: 'a37577958aebbbdec0ccbc7b445813311eb8e615' }, index.h("ix-typography", { key: '2c564a3e854b143cac4299f6886f95fda961de3e', class: 'category-text', format: 'h5' }, this.label)));
     }
 };
 DropdownHeader.style = dropdownHeaderCss();

package/dist/cjs/ix-dropdown-quick-actions.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 
 const dropdownQuickActionsCss = () => `:host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}`;
 
@@ -9,7 +9,7 @@ const DropdownQuickActions = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5b9938da726bfe31dffe1667ff81c1b3a5935e1e' }, index.h("slot", { key: 'a3f04dc61e5896ede45c0484506b3ee611b413c8' })));
+        return (index.h(index.Host, { key: '74f8179be360cbd202653b2c2ffb90995585af2c' }, index.h("slot", { key: '6488ba330c7de30385c8c8aff4812e6e5a083727' })));
     }
 };
 DropdownQuickActions.style = dropdownQuickActionsCss();