@ui5/webcomponents 2.24.0-rc.1 → 2.24.0

package/dist/ComboBoxItemCustom.d.ts

@@ -0,0 +1,63 @@
+import type { IComboBoxItem } from "./ComboBox.js";
+import ListItemBase from "./ListItemBase.js";
+import type { ListItemBasePressEventDetail } from "./ListItemBase.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+type ComboBoxItemCustomClickEventDetail = {
+    item?: ComboBoxItemCustom;
+    originalEvent: Event;
+};
+/**
+ * @class
+ * The `ui5-cb-item-custom` is a combobox item component
+ * that allows placing custom content inside a combobox item.
+ * The `text` property is used for filtering and auto-complete.
+ * For highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @implements {IComboBoxItem}
+ * @public
+ * @since 2.24.0
+ */
+declare class ComboBoxItemCustom extends ListItemBase implements IComboBoxItem {
+    eventDetails: {
+        "click": ComboBoxItemCustomClickEventDetail;
+        "request-tabindex-change": FocusEvent;
+        "_press": ListItemBasePressEventDetail;
+        "_focused": FocusEvent;
+        "forward-after": void;
+        "forward-before": void;
+    };
+    /**
+     * Defines the text of the component.
+     * Used for filtering, autocomplete, and mobile rendering.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the value of the component.
+     * Used for programmatic selection via the `selectedValue` property.
+     * @default undefined
+     * @public
+     */
+    value?: string;
+    /**
+     * Indicates whether the item is filtered.
+     * @private
+     */
+    _isVisible: boolean;
+    /**
+     * Indicates whether the item is focused.
+     * @protected
+     */
+    focused: boolean;
+    /**
+     * Defines the content of the component.
+     * @public
+     */
+    content: DefaultSlot<Node>;
+    get _effectiveTabIndex(): number;
+}
+export default ComboBoxItemCustom;
+export type { ComboBoxItemCustomClickEventDetail };

package/dist/ComboBoxItemCustom.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import ListItemBase from "./ListItemBase.js";
+import ComboBoxItemCustomTemplate from "./ComboBoxItemCustomTemplate.js";
+import styles from "./generated/themes/ComboBoxItemCustom.css.js";
+/**
+ * @class
+ * The `ui5-cb-item-custom` is a combobox item component
+ * that allows placing custom content inside a combobox item.
+ * The `text` property is used for filtering and auto-complete.
+ * For highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @implements {IComboBoxItem}
+ * @public
+ * @since 2.24.0
+ */
+let ComboBoxItemCustom = class ComboBoxItemCustom extends ListItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates whether the item is filtered.
+         * @private
+         */
+        this._isVisible = false;
+        /**
+         * Indicates whether the item is focused.
+         * @protected
+         */
+        this.focused = false;
+    }
+    get _effectiveTabIndex() {
+        return -1;
+    }
+};
+__decorate([
+    property()
+], ComboBoxItemCustom.prototype, "text", void 0);
+__decorate([
+    property()
+], ComboBoxItemCustom.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], ComboBoxItemCustom.prototype, "_isVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], ComboBoxItemCustom.prototype, "focused", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], ComboBoxItemCustom.prototype, "content", void 0);
+ComboBoxItemCustom = __decorate([
+    customElement({
+        tag: "ui5-cb-item-custom",
+        template: ComboBoxItemCustomTemplate,
+        styles: [
+            ListItemBase.styles,
+            styles,
+        ],
+    })
+    /**
+     * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+     *
+     * **Note:** The event will not be fired if the `disabled` property is set to `true`.
+     *
+     * @since 2.24.0
+     * @public
+     * @param {Event} originalEvent The original event from the user interaction.
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
+], ComboBoxItemCustom);
+ComboBoxItemCustom.define();
+export default ComboBoxItemCustom;
+//# sourceMappingURL=ComboBoxItemCustom.js.map

package/dist/ComboBoxItemCustom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItemCustom.js","sourceRoot":"","sources":["../src/ComboBoxItemCustom.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAE1E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AACzE,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAQlE;;;;;;;;;;;;GAYG;AAqBH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,YAAY;IAA7C;;QA4BC;;;WAGG;QAEH,eAAU,GAAG,KAAK,CAAC;QAEnB;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;IAYjB,CAAC;IAHA,IAAI,kBAAkB;QACrB,OAAO,CAAC,CAAC,CAAC;IACX,CAAC;CACD,CAAA;AAnCA;IADC,QAAQ,EAAE;gDACG;AASd;IADC,QAAQ,EAAE;iDACI;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;sDAC5B;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACZ;AAOhB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;mDACzC;AA/CvB,kBAAkB;IApBvB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,MAAM;SACN;KACD,CAAC;IACF;;;;;;;;OAQG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;KACb,CAAC;GACI,kBAAkB,CAoDvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { IComboBoxItem } from \"./ComboBox.js\";\nimport ListItemBase from \"./ListItemBase.js\";\nimport type { ListItemBasePressEventDetail } from \"./ListItemBase.js\";\nimport ComboBoxItemCustomTemplate from \"./ComboBoxItemCustomTemplate.js\";\nimport styles from \"./generated/themes/ComboBoxItemCustom.css.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype ComboBoxItemCustomClickEventDetail = {\n\titem?: ComboBoxItemCustom,\n\toriginalEvent: Event,\n}\n\n/**\n * @class\n * The `ui5-cb-item-custom` is a combobox item component\n * that allows placing custom content inside a combobox item.\n * The `text` property is used for filtering and auto-complete.\n * For highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.\n *\n * @constructor\n * @extends ListItemBase\n * @implements {IComboBoxItem}\n * @public\n * @since 2.24.0\n */\n@customElement({\n\ttag: \"ui5-cb-item-custom\",\n\ttemplate: ComboBoxItemCustomTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tstyles,\n\t],\n})\n/**\n * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `disabled` property is set to `true`.\n *\n * @since 2.24.0\n * @public\n * @param {Event} originalEvent The original event from the user interaction.\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass ComboBoxItemCustom extends ListItemBase implements IComboBoxItem {\n\teventDetails!: {\n\t\t\"click\": ComboBoxItemCustomClickEventDetail,\n\t\t\"request-tabindex-change\": FocusEvent,\n\t\t\"_press\": ListItemBasePressEventDetail,\n\t\t\"_focused\": FocusEvent,\n\t\t\"forward-after\": void,\n\t\t\"forward-before\": void,\n\t};\n\n\t/**\n\t * Defines the text of the component.\n\t * Used for filtering, autocomplete, and mobile rendering.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the value of the component.\n\t * Used for programmatic selection via the `selectedValue` property.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tvalue?: string;\n\n\t/**\n\t * Indicates whether the item is filtered.\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isVisible = false;\n\n\t/**\n\t * Indicates whether the item is focused.\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\tcontent!: DefaultSlot<Node>;\n\n\tget _effectiveTabIndex() {\n\t\treturn -1;\n\t}\n}\n\nComboBoxItemCustom.define();\n\nexport default ComboBoxItemCustom;\nexport type { ComboBoxItemCustomClickEventDetail };\n"]}

package/dist/ComboBoxItemCustomTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ComboBoxItemCustom from "./ComboBoxItemCustom.js";
+export default function ComboBoxItemCustomTemplate(this: ComboBoxItemCustom): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ComboBoxItemCustomTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+export default function ComboBoxItemCustomTemplate() {
+    return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+function listItemContent() {
+    return _jsx("slot", {});
+}
+//# sourceMappingURL=ComboBoxItemCustomTemplate.js.map

package/dist/ComboBoxItemCustomTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItemCustomTemplate.js","sourceRoot":"","sources":["../src/ComboBoxItemCustomTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,0BAA0B;IACjD,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,gBAAa,CAAC;AACtB,CAAC","sourcesContent":["import ListItemBaseTemplate from \"./ListItemBaseTemplate.js\";\nimport type ComboBoxItemCustom from \"./ComboBoxItemCustom.js\";\n\nexport default function ComboBoxItemCustomTemplate(this: ComboBoxItemCustom) {\n\treturn ListItemBaseTemplate.call(this, { listItemContent }, { role: \"option\" });\n}\n\nfunction listItemContent(this: ComboBoxItemCustom) {\n\treturn <slot></slot>;\n}\n"]}

package/dist/ComboBoxPopoverTemplate.js

@@ -18,10 +18,10 @@ export default function ComboBoxPopoverTemplate() {
                                                         // For group items, return all nested items
                                                         return item.items
                                                             .filter(nestedItem => !!nestedItem)
-                                                            .map(nestedItem => _jsx(SuggestionItem, { text: nestedItem.text, "additional-text": nestedItem.additionalText, markupText: generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue) }));
+                                                            .map(nestedItem => _jsx(SuggestionItem, { text: nestedItem.text, additionalText: nestedItem.additionalText, markupText: generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue) }));
                                                     }
                                                     // For regular items
-                                                    return _jsx(SuggestionItem, { text: item.text, "additional-text": item.additionalText, markupText: generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue) });
+                                                    return _jsx(SuggestionItem, { text: item.text, additionalText: item.additionalText, markupText: generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue) });
                                                 }) }) })] }), this.hasValueStateText &&
                                     _jsxs("div", { class: this.classes.popoverValueState, style: this.styles.popoverValueStateMessage, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] })] }), !this._isPhone && this.hasValueStateText &&
                         _jsxs("div", { slot: "header", class: {

package/dist/ComboBoxPopoverTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/ComboBoxPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport Button from \"./Button.js\";\nimport List from \"./List.js\";\nimport Input from \"./Input.js\";\nimport Title from \"./Title.js\";\nimport PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport Popover from \"./Popover.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport generateHighlightedMarkupFirstMatch from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js\";\nimport type ComboBox from \"./ComboBox.js\";\n\nexport default function ComboBoxPopoverTemplate(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t<ResponsivePopover\n\t\t\t\tid={this.responsivePopoverId}\n\t\t\t\tclass={this.classes.popover}\n\t\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\t\ttabindex={-1}\n\t\t\t\topen={this.open}\n\t\t\t\topener={this}\n\t\t\t\thideArrow={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign=\"Start\"\n\t\t\t\taccessibleName={this._popupLabel}\n\t\t\t\tonBeforeOpen={this._beforeOpenPopover}\n\t\t\t\tonOpen={this._afterOpenPopover}\n\t\t\t\tonClose={this._afterClosePopover}\n\t\t\t\tonKeyDown={this._handlePopoverKeydown}\n\t\t\t\tonFocusOut={this._handlePopoverFocusout}\n\t\t\t>\n\t\t\t\t{this.loading &&\n\t\t\t\t\t<BusyIndicator active={true} class=\"ui5-combobox-busy\"/>\n\t\t\t\t}\n\n\t\t\t\t{!this.loading && this._isPhone &&\n\t\t\t\t<>\n\t\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Title\n\t\t\t\t\t\t\t\tlevel=\"H1\"\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-header-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._headerTitleText}\n\t\t\t\t\t\t\t</Title>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\topen={this.openOnMobile}\n\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t\t\tonKeyDown={this._handleMobileKeydown}\n\t\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\t\tonChange={this._inputChange}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this._filteredItems.flatMap(item => {\n\t\t\t\t\t\t\t\t\tif (item.isGroupItem && item.items) {\n\t\t\t\t\t\t\t\t\t\t// For group items, return all nested items\n\t\t\t\t\t\t\t\t\t\treturn item.items\n\t\t\t\t\t\t\t\t\t\t\t.filter(nestedItem => !!nestedItem)\n\t\t\t\t\t\t\t\t\t\t\t.map(nestedItem =>\n\t\t\t\t\t\t\t\t\t\t\t\t<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || \"\", this.filterValue)}/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// For regular items\n\t\t\t\t\t\t\t\t\treturn <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || \"\", this.filterValue)}/>;\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateText &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t\t\t{ this.open && valueStateMessage.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t\t}\n\n\t\t\t\t{!this._isPhone && this.hasValueStateText &&\n\t\t\t\t<div\n\t\t\t\t\tslot=\"header\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t\t{ this.open && valueStateMessage.call(this) }\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{!this.loading && !!this._filteredItems.length &&\n\t\t\t\t<List\n\t\t\t\t\tclass=\"ui5-combobox-items-list\"\n\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\taccessibleRole=\"ListBox\"\n\t\t\t\t\tselectionMode=\"Single\"\n\t\t\t\t\tonItemClick={this._selectItem}\n\t\t\t\t\tonItemFocused={this._onItemFocus}\n\t\t\t\t\tonMouseDown={this._itemMousedown}\n\t\t\t\t>\n\t\t\t\t\t{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t}\n\n\t\t\t\t{this._isPhone &&\n\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>{this._dialogOkButtonText}</Button>\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>\n\t\t\t\t\t{this._dialogCancelButtonText}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ResponsivePopover>\n\n\t\t\t{this.shouldOpenValueStateMessagePopover &&\n\t\t<Popover\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\thideArrow={true}\n\t\t\ttabindex={-1}\n\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\tplacement=\"Bottom\"\n\t\t\topener={this}\n\t\t\topen={this.valueStateOpen}\n\t\t\tonClose={this._handleValueStatePopoverAfterClose}\n\t\t\tonFocusOut={this._handleValueStatePopoverFocusout}\n\t\t>\n\t\t\t<div slot=\"header\" class={this.classes.popoverValueState}>\n\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t{ valueStateMessage.call(this) }\n\t\t\t</div>\n\t\t</Popover>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction valueStateMessage(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot> }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"ComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/ComboBoxPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,sBAAsB,MAAM,mCAAmC,CAAC;AACvE,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,mCAAmC,MAAM,0EAA0E,CAAC;AAG3H,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC9C,OAAO,CACN,8BACC,MAAC,iBAAiB,IACjB,EAAE,EAAE,IAAI,CAAC,mBAAmB,EAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC3B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,EACrC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,OAAO,EACvB,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,qBAAqB,EACrC,UAAU,EAAE,IAAI,CAAC,sBAAsB,aAEtC,IAAI,CAAC,OAAO;wBACZ,KAAC,aAAa,IAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,mBAAmB,GAAE,EAGxD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;wBAC/B,8BACC,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,aACvD,cAAK,KAAK,EAAC,KAAK,YACf,KAAC,KAAK,IACL,KAAK,EAAC,IAAI,EACV,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,oCAAoC,YAEzC,IAAI,CAAC,gBAAgB,GACf,GACH,EAEN,cAAK,KAAK,EAAC,KAAK,YACf,KAAC,KAAK,IACL,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,oBAAoB,EACpC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,QAAQ,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oDACpC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;wDACpC,2CAA2C;wDAC3C,OAAO,IAAI,CAAC,KAAK;6DACf,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;6DAClC,GAAG,CAAC,UAAU,CAAC,EAAE,CACjB,KAAC,cAAc,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,UAAU,CAAC,cAAc,EAAE,UAAU,EAAE,mCAAmC,CAAC,UAAU,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAC7K,CAAC;oDACJ,CAAC;oDACD,oBAAoB;oDACpB,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,mCAAmC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;gDACpK,CAAC,CAAC,GACK,GACH,IACD,EAEL,IAAI,CAAC,iBAAiB;oCACvB,eAAK,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,wBAAwB,aACtF,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,EACnF,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACtC,IAEJ,EAGF,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB;wBACzC,eACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gCACN,+BAA+B,EAAE,IAAI;gCACrC,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB;6BACjC,EACD,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,aAE1C,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,EACnF,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACtC,EAGL,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM;wBAC9C,KAAC,IAAI,IACJ,KAAK,EAAC,yBAAyB,EAC/B,UAAU,EAAC,MAAM,EACjB,cAAc,EAAC,SAAS,EACxB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,IAAI,CAAC,YAAY,EAChC,WAAW,EAAE,IAAI,CAAC,cAAc,YAE9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CAAC,GACtE,EAGN,IAAI,CAAC,QAAQ;wBACf,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,aACvD,KAAC,MAAM,IACN,MAAM,EAAC,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAC9B,IAAI,CAAC,mBAAmB,GAAU,EACpC,KAAC,MAAM,IACN,KAAK,EAAC,kCAAkC,EACxC,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAE9B,IAAI,CAAC,uBAAuB,GACrB,IACJ,IAEc,EAEnB,IAAI,CAAC,kCAAkC;gBACzC,KAAC,OAAO,IACP,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAC,+BAA+B,EACrC,eAAe,EAAE,sBAAsB,CAAC,KAAK,EAC7C,SAAS,EAAC,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,OAAO,EAAE,IAAI,CAAC,kCAAkC,EAChD,UAAU,EAAE,IAAI,CAAC,gCAAgC,YAEjD,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,aACvD,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,EACnF,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACzB,GACG,IAEP,CACH,CAAC;AACH,CAAC;AAED,SAAS,iBAAiB;IACzB,OAAO,CACN,4BACG,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,eAAM,IAAI,EAAC,mBAAmB,GAAQ,GAChH,CACH,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport Button from \"./Button.js\";\nimport List from \"./List.js\";\nimport Input from \"./Input.js\";\nimport Title from \"./Title.js\";\nimport PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport Popover from \"./Popover.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport generateHighlightedMarkupFirstMatch from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js\";\nimport type ComboBox from \"./ComboBox.js\";\n\nexport default function ComboBoxPopoverTemplate(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t<ResponsivePopover\n\t\t\t\tid={this.responsivePopoverId}\n\t\t\t\tclass={this.classes.popover}\n\t\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\t\ttabindex={-1}\n\t\t\t\topen={this.open}\n\t\t\t\topener={this}\n\t\t\t\thideArrow={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign=\"Start\"\n\t\t\t\taccessibleName={this._popupLabel}\n\t\t\t\tonBeforeOpen={this._beforeOpenPopover}\n\t\t\t\tonOpen={this._afterOpenPopover}\n\t\t\t\tonClose={this._afterClosePopover}\n\t\t\t\tonKeyDown={this._handlePopoverKeydown}\n\t\t\t\tonFocusOut={this._handlePopoverFocusout}\n\t\t\t>\n\t\t\t\t{this.loading &&\n\t\t\t\t\t<BusyIndicator active={true} class=\"ui5-combobox-busy\"/>\n\t\t\t\t}\n\n\t\t\t\t{!this.loading && this._isPhone &&\n\t\t\t\t<>\n\t\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Title\n\t\t\t\t\t\t\t\tlevel=\"H1\"\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-header-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._headerTitleText}\n\t\t\t\t\t\t\t</Title>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\topen={this.openOnMobile}\n\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t\t\tonKeyDown={this._handleMobileKeydown}\n\t\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\t\tonChange={this._inputChange}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this._filteredItems.flatMap(item => {\n\t\t\t\t\t\t\t\t\tif (item.isGroupItem && item.items) {\n\t\t\t\t\t\t\t\t\t\t// For group items, return all nested items\n\t\t\t\t\t\t\t\t\t\treturn item.items\n\t\t\t\t\t\t\t\t\t\t\t.filter(nestedItem => !!nestedItem)\n\t\t\t\t\t\t\t\t\t\t\t.map(nestedItem =>\n\t\t\t\t\t\t\t\t\t\t\t\t<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || \"\", this.filterValue)}/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// For regular items\n\t\t\t\t\t\t\t\t\treturn <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || \"\", this.filterValue)}/>;\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateText &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t\t\t{ this.open && valueStateMessage.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t\t}\n\n\t\t\t\t{!this._isPhone && this.hasValueStateText &&\n\t\t\t\t<div\n\t\t\t\t\tslot=\"header\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t\t{ this.open && valueStateMessage.call(this) }\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{!this.loading && !!this._filteredItems.length &&\n\t\t\t\t<List\n\t\t\t\t\tclass=\"ui5-combobox-items-list\"\n\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\taccessibleRole=\"ListBox\"\n\t\t\t\t\tselectionMode=\"Single\"\n\t\t\t\t\tonItemClick={this._selectItem}\n\t\t\t\t\tonItemFocused={this._onItemFocus}\n\t\t\t\t\tonMouseDown={this._itemMousedown}\n\t\t\t\t>\n\t\t\t\t\t{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t}\n\n\t\t\t\t{this._isPhone &&\n\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>{this._dialogOkButtonText}</Button>\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this._closeRespPopover}\n\t\t\t\t>\n\t\t\t\t\t{this._dialogCancelButtonText}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ResponsivePopover>\n\n\t\t\t{this.shouldOpenValueStateMessagePopover &&\n\t\t<Popover\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\thideArrow={true}\n\t\t\ttabindex={-1}\n\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\tplacement=\"Bottom\"\n\t\t\topener={this}\n\t\t\topen={this.valueStateOpen}\n\t\t\tonClose={this._handleValueStatePopoverAfterClose}\n\t\t\tonFocusOut={this._handleValueStatePopoverFocusout}\n\t\t>\n\t\t\t<div slot=\"header\" class={this.classes.popoverValueState}>\n\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}/>\n\t\t\t\t{ valueStateMessage.call(this) }\n\t\t\t</div>\n\t\t</Popover>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction valueStateMessage(this: ComboBox) {\n\treturn (\n\t\t<>\n\t\t\t{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot> }\n\t\t</>\n\t);\n}\n"]}

package/dist/Dialog.d.ts

@@ -37,14 +37,14 @@ import "@ui5/webcomponents-icons/dist/information.js";
  * ### Keyboard Handling
  *
  * #### Basic Navigation
- * When the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog
+ * When the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog
  * with the following keyboard shortcuts:
  *
  * - [Up] or [Down] arrow keys - Move the dialog up/down.
  * - [Left] or [Right] arrow keys - Move the dialog left/right.
  *
  * #### Resizing
- * When the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog
+ * When the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog
  * with the following keyboard shortcuts:
  *
  * - [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.
@@ -156,18 +156,24 @@ declare class Dialog extends Popup {
     static _isHeader(element: HTMLElement): boolean;
     get isModal(): boolean;
     get _ariaLabelledBy(): string | undefined;
-    get ariaRoleDescriptionHeaderText(): string | undefined;
     get effectiveAriaDescribedBy(): string | undefined;
-    get ariaDescribedByHeaderTextResizable(): string;
-    get ariaDescribedByHeaderTextDraggable(): string;
-    get ariaDescribedByHeaderTextDraggableAndResizable(): string;
+    get ariaDescribedByIds(): string;
+    get dialogAriaDescribedByText(): string;
+    get ariaDescribedByTextResizable(): string;
+    get ariaDescribedByTextDraggable(): string;
+    get ariaDescribedByTextDraggableAndResizable(): string;
+    get ariaDescribedByHandlerText(): string;
     /**
      * Determines if the header should be shown.
      */
     get _displayHeader(): string | number | boolean;
     get _movable(): boolean;
-    get _headerTabIndex(): 0 | undefined;
+    get _dragResizeHandleTabIndex(): 0 | undefined;
+    get _dragResizeHandleAriaLabel(): string;
+    get _dragResizeHandleAriaRoleDescription(): string | undefined;
+    get _dragResizeHandleAriaDescribedBy(): string | undefined;
     get _showResizeHandle(): boolean;
+    get _resizeHandleTooltip(): string | undefined;
     get _minHeight(): number;
     get hasValueState(): boolean;
     get _dialogStateIcon(): string;
@@ -208,5 +214,11 @@ declare class Dialog extends Popup {
     _handleDragStart(e: DragEvent): void;
     _attachMouseResizeHandlers(): void;
     _detachMouseResizeHandlers(): void;
+    /**
+     * Overrides Popup's forwardToLast to prioritize the drag/resize handler
+     * when Shift+Tab is pressed from the first focusable element.
+     * @private
+     */
+    forwardToLast(): Promise<void>;
 }
 export default Dialog;

package/dist/Dialog.js

@@ -18,7 +18,7 @@ import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
-import { DIALOG_HEADER_ARIA_ROLE_DESCRIPTION, DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE, DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE, DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE, DIALOG_HEADER_ARIA_LABEL, DIALOG_CONTENT_ARIA_LABEL, DIALOG_FOOTER_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
+import { DIALOG_ARIA_DESCRIBEDBY_RESIZABLE, DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE, DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE, DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE, DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE, DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE, DIALOG_RESIZE_HANDLE_TOOLTIP, DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL, DIALOG_DRAG_HANDLE_ARIA_LABEL, DIALOG_RESIZE_HANDLE_ARIA_LABEL, DIALOG_HANDLE_ARIA_ROLEDESCRIPTION, DIALOG_HEADER_ARIA_LABEL, DIALOG_CONTENT_ARIA_LABEL, DIALOG_FOOTER_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
 // Template
 import DialogTemplate from "./DialogTemplate.js";
 // Styles
@@ -69,14 +69,14 @@ const ICON_PER_STATE = {
  * ### Keyboard Handling
  *
  * #### Basic Navigation
- * When the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog
+ * When the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog
  * with the following keyboard shortcuts:
  *
  * - [Up] or [Down] arrow keys - Move the dialog up/down.
  * - [Left] or [Right] arrow keys - Move the dialog left/right.
  *
  * #### Resizing
- * When the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog
+ * When the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog
  * with the following keyboard shortcuts:
  *
  * - [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.
@@ -172,20 +172,50 @@ let Dialog = Dialog_1 = class Dialog extends Popup {
         }
         return ariaLabelledById;
     }
-    get ariaRoleDescriptionHeaderText() {
-        return (this.resizable || this.draggable) ? Dialog_1.i18nBundle.getText(DIALOG_HEADER_ARIA_ROLE_DESCRIPTION) : undefined;
-    }
     get effectiveAriaDescribedBy() {
-        return (this.resizable || this.draggable) ? `${this._id}-descr` : undefined;
+        return this._movable ? `${this._id}-dialog-descr` : undefined;
+    }
+    get ariaDescribedByIds() {
+        return [
+            this.ariaDescriptionTextId,
+            this.effectiveAriaDescribedBy,
+        ].filter(Boolean).join(" ");
+    }
+    get dialogAriaDescribedByText() {
+        if (!this._movable) {
+            return "";
+        }
+        if (this.resizable && this.draggable) {
+            return Dialog_1.i18nBundle.getText(DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE);
+        }
+        if (this.draggable) {
+            return Dialog_1.i18nBundle.getText(DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE);
+        }
+        if (this.resizable) {
+            return Dialog_1.i18nBundle.getText(DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE);
+        }
+        return "";
     }
-    get ariaDescribedByHeaderTextResizable() {
-        return Dialog_1.i18nBundle.getText(DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE);
+    get ariaDescribedByTextResizable() {
+        return Dialog_1.i18nBundle.getText(DIALOG_ARIA_DESCRIBEDBY_RESIZABLE);
     }
-    get ariaDescribedByHeaderTextDraggable() {
-        return Dialog_1.i18nBundle.getText(DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE);
+    get ariaDescribedByTextDraggable() {
+        return Dialog_1.i18nBundle.getText(DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE);
     }
-    get ariaDescribedByHeaderTextDraggableAndResizable() {
-        return Dialog_1.i18nBundle.getText(DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE);
+    get ariaDescribedByTextDraggableAndResizable() {
+        return Dialog_1.i18nBundle.getText(DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE);
+    }
+    get ariaDescribedByHandlerText() {
+        if (this.resizable && this.draggable) {
+            return this.ariaDescribedByTextDraggableAndResizable;
+        }
+        if (this.resizable) {
+            return this.ariaDescribedByTextResizable;
+        }
+        if (this.draggable) {
+            return this.ariaDescribedByTextDraggable;
+        }
+        return "";
     }
     /**
      * Determines if the header should be shown.
@@ -196,12 +226,36 @@ let Dialog = Dialog_1 = class Dialog extends Popup {
     get _movable() {
         return !this.stretch && this.onDesktop && (this.draggable || this.resizable);
     }
-    get _headerTabIndex() {
+    get _dragResizeHandleTabIndex() {
         return this._movable ? 0 : undefined;
     }
+    get _dragResizeHandleAriaLabel() {
+        if (!this._movable) {
+            return "";
+        }
+        if (this.resizable && this.draggable) {
+            return Dialog_1.i18nBundle.getText(DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL);
+        }
+        if (this.draggable) {
+            return Dialog_1.i18nBundle.getText(DIALOG_DRAG_HANDLE_ARIA_LABEL);
+        }
+        if (this.resizable) {
+            return Dialog_1.i18nBundle.getText(DIALOG_RESIZE_HANDLE_ARIA_LABEL);
+        }
+        return "";
+    }
+    get _dragResizeHandleAriaRoleDescription() {
+        return this._movable ? Dialog_1.i18nBundle.getText(DIALOG_HANDLE_ARIA_ROLEDESCRIPTION) : undefined;
+    }
+    get _dragResizeHandleAriaDescribedBy() {
+        return this._movable ? `${this._id}-descr` : undefined;
+    }
     get _showResizeHandle() {
         return this.resizable && this.onDesktop;
     }
+    get _resizeHandleTooltip() {
+        return this._showResizeHandle ? Dialog_1.i18nBundle.getText(DIALOG_RESIZE_HANDLE_TOOLTIP) : undefined;
+    }
     get _minHeight() {
         let minHeight = Number.parseInt(window.getComputedStyle(this.contentDOM).minHeight);
         const header = this._root.querySelector(".ui5-popup-header-root");
@@ -340,7 +394,11 @@ let Dialog = Dialog_1 = class Dialog extends Popup {
         this._detachMouseDragHandlers();
     }
     _onDragOrResizeKeyDown(e) {
-        if (!this._movable || !Dialog_1._isHeader(e.target)) {
+        if (!this._movable) {
+            return;
+        }
+        const target = e.target;
+        if (!target || target.id !== `${this._id}-dragResizeHandler`) {
             return;
         }
         if (this.draggable && [isUp, isDown, isLeft, isRight].some(key => key(e))) {
@@ -482,6 +540,21 @@ let Dialog = Dialog_1 = class Dialog extends Popup {
         window.removeEventListener("mousemove", this._resizeMouseMoveHandler);
         window.removeEventListener("mouseup", this._resizeMouseUpHandler);
     }
+    /**
+     * Overrides Popup's forwardToLast to prioritize the drag/resize handler
+     * when Shift+Tab is pressed from the first focusable element.
+     * @private
+     */
+    async forwardToLast() {
+        if (this._movable) {
+            const dragResizeHandler = this.shadowRoot.querySelector(`#${this._id}-dragResizeHandler`);
+            if (dragResizeHandler) {
+                dragResizeHandler.focus();
+                return;
+            }
+        }
+        await super.forwardToLast();
+    }
 };
 __decorate([
     property()