@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/SuggestionItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestionItemGroup.js","sourceRoot":"","sources":["../src/SuggestionItemGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE;;;;;;;;GAQG;AAKH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,aAAa;CAW9C,CAAA;AADA;IALC,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;QAC7B,IAAI,EAAE,WAAW;KACjB,CAAC;kDACgC;AAV7B,mBAAmB;IAJxB,aAAa,CAAC;QACd,GAAG,EAAE,2BAA2B;QAChC,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GACI,mBAAmB,CAWxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type SuggestionListItem from \"./SuggestionListItem.js\";\nimport ListItemGroup from \"./ListItemGroup.js\";\nimport ListBoxItemGroupTemplate from \"./ListBoxItemGroupTemplate.js\";\n\n/**\n * @class\n * The `ui5-suggestion-item-group` is type of suggestion item,\n * that can be used to split the `ui5-input` suggestions into groups.\n * @constructor\n * @extends ListItemGroup\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-suggestion-item-group\",\n\ttemplate: ListBoxItemGroupTemplate,\n})\nclass SuggestionItemGroup extends ListItemGroup {\n\t/**\n\t * Defines the items of the <code>ui5-suggestion-item-group</code>.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t\ttype: HTMLElement,\n\t})\n\titems!: Array<SuggestionListItem>;\n}\n\nSuggestionItemGroup.define();\n\nexport default SuggestionItemGroup;\n"]}
+{"version":3,"file":"SuggestionItemGroup.js","sourceRoot":"","sources":["../src/SuggestionItemGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAE1E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAGrE;;;;;;;;GAQG;AAKH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,aAAa;CAW9C,CAAA;AADA;IALC,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;QAC7B,IAAI,EAAE,WAAW;KACjB,CAAC;kDACsC;AAVnC,mBAAmB;IAJxB,aAAa,CAAC;QACd,GAAG,EAAE,2BAA2B;QAChC,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GACI,mBAAmB,CAWxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type SuggestionListItem from \"./SuggestionListItem.js\";\nimport ListItemGroup from \"./ListItemGroup.js\";\nimport ListBoxItemGroupTemplate from \"./ListBoxItemGroupTemplate.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * @class\n * The `ui5-suggestion-item-group` is type of suggestion item,\n * that can be used to split the `ui5-input` suggestions into groups.\n * @constructor\n * @extends ListItemGroup\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-suggestion-item-group\",\n\ttemplate: ListBoxItemGroupTemplate,\n})\nclass SuggestionItemGroup extends ListItemGroup {\n\t/**\n\t * Defines the items of the <code>ui5-suggestion-item-group</code>.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t\ttype: HTMLElement,\n\t})\n\titems!: DefaultSlot<SuggestionListItem>;\n}\n\nSuggestionItemGroup.define();\n\nexport default SuggestionItemGroup;\n"]}

package/dist/SuggestionListItem.d.ts

@@ -1,4 +1,5 @@
 import ListItemStandard from "./ListItemStandard.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 /**
  * @class
  * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`
@@ -16,12 +17,12 @@ declare class SuggestionListItem extends ListItemStandard {
      * @since 1.0.0-rc.8
      * @public
      */
-    richDescription: Array<HTMLElement>;
+    richDescription: Slot<HTMLElement>;
     /**
      * Defines the title text of the suggestion item.
      * @public
      */
-    titleText: Array<Node>;
+    titleText: DefaultSlot<Node>;
     onBeforeRendering(): void;
     get effectiveTitle(): string;
     get hasDescription(): string | true | undefined;

package/dist/SuggestionListItem.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import ListItemStandard from "./ListItemStandard.js";
 import SuggestionListItemTemplate from "./SuggestionListItemTemplate.js";
 /**
@@ -35,7 +35,7 @@ let SuggestionListItem = class SuggestionListItem extends ListItemStandard {
     }
 };
 __decorate([
-    slot({ type: HTMLElement })
+    slot()
 ], SuggestionListItem.prototype, "richDescription", void 0);
 __decorate([
     slot({ type: Node, "default": true })

package/dist/SuggestionListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestionListItem.js","sourceRoot":"","sources":["../src/SuggestionListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAEzE;;;;;;;;;GASG;AAMH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;IAiBhD,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACzC,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9G,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;2DACQ;AAOpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDACd;AAfnB,kBAAkB;IALvB,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,0BAA0B;KACpC,CAAC;GACI,kBAAkB,CAiCvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport SuggestionListItemTemplate from \"./SuggestionListItemTemplate.js\";\n\n/**\n * @class\n * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\n * suggestion popover.\n * @constructor\n * @extends ListItemStandard\n * @csspart title - Used to style the title of the suggestion list item\n * @csspart description - Used to style the description of the suggestion list item\n * @csspart info - Used to style the info of the suggestion list item\n */\n@customElement({\n\trenderer: jsxRenderer,\n\ttag: \"ui5-li-suggestion-item\",\n\ttemplate: SuggestionListItemTemplate,\n})\nclass SuggestionListItem extends ListItemStandard {\n\t/**\n\t * Defines a description that can contain HTML.\n\t * **Note:** If not specified, the `description` property will be used.\n\t * @since 1.0.0-rc.8\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\trichDescription!: Array<HTMLElement>\n\n\t/**\n\t * Defines the title text of the suggestion item.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttitleText!: Array<Node>;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.hasTitle = !!this.titleText.length;\n\t}\n\n\tget effectiveTitle() {\n\t\treturn this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join(\"\");\n\t}\n\n\tget hasDescription() {\n\t\treturn this.richDescription.length > 0 || this.description;\n\t}\n\n\tget groupItem() {\n\t\treturn false;\n\t}\n}\n\nSuggestionListItem.define();\n\nexport default SuggestionListItem;\n"]}
+{"version":3,"file":"SuggestionListItem.js","sourceRoot":"","sources":["../src/SuggestionListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAGzE;;;;;;;;;GASG;AAMH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;IAiBhD,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACzC,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9G,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,IAAI,EAAE;2DAC6B;AAOpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qDACR;AAfzB,kBAAkB;IALvB,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,0BAA0B;KACpC,CAAC;GACI,kBAAkB,CAiCvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport ListItemStandard from \"./ListItemStandard.js\";\nimport SuggestionListItemTemplate from \"./SuggestionListItemTemplate.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * @class\n * The `ui5-li-suggestion-item` represents the suggestion item in the `ui5-input`\n * suggestion popover.\n * @constructor\n * @extends ListItemStandard\n * @csspart title - Used to style the title of the suggestion list item\n * @csspart description - Used to style the description of the suggestion list item\n * @csspart info - Used to style the info of the suggestion list item\n */\n@customElement({\n\trenderer: jsxRenderer,\n\ttag: \"ui5-li-suggestion-item\",\n\ttemplate: SuggestionListItemTemplate,\n})\nclass SuggestionListItem extends ListItemStandard {\n\t/**\n\t * Defines a description that can contain HTML.\n\t * **Note:** If not specified, the `description` property will be used.\n\t * @since 1.0.0-rc.8\n\t * @public\n\t */\n\t@slot()\n\trichDescription!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the title text of the suggestion item.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttitleText!: DefaultSlot<Node>;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.hasTitle = !!this.titleText.length;\n\t}\n\n\tget effectiveTitle() {\n\t\treturn this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join(\"\");\n\t}\n\n\tget hasDescription() {\n\t\treturn this.richDescription.length > 0 || this.description;\n\t}\n\n\tget groupItem() {\n\t\treturn false;\n\t}\n}\n\nSuggestionListItem.define();\n\nexport default SuggestionListItem;\n"]}

package/dist/Switch.d.ts

@@ -47,11 +47,21 @@ declare class Switch extends UI5Element implements IFormInputElement {
      * @default "Textual"
      */
     design: `${SwitchDesign}`;
+    /**
+     * Defines whether the component is in readonly state.
+     *
+     * **Note:** A readonly switch cannot be toggled by user interaction,
+     * but can still be focused and its value read programmatically.
+     * @default false
+     * @public
+     * @since 2.21.0
+     */
+    readonly: boolean;
     /**
      * Defines if the component is checked.
      *
      * **Note:** The property can be changed with user interaction,
-     * either by cliking the component, or by pressing the `Enter` or `Space` key.
+     * either by clicking the component, or by pressing the `Enter` or `Space` key.
      * @default false
      * @formEvents change
      * @formProperty
@@ -135,12 +145,14 @@ declare class Switch extends UI5Element implements IFormInputElement {
      */
     value: string;
     _cancelAction: boolean;
+    _isSpacePressed: boolean;
     static i18nBundle: I18nBundle;
     get formValidityMessage(): string;
     get formValidity(): ValidityStateFlags;
     formElementAnchor(): Promise<HTMLElement | undefined>;
     get formFormattedValue(): string | null;
     get sapNextIcon(): "accept" | "less";
+    _onfocusin(): void;
     _onclick(): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
@@ -149,11 +161,18 @@ declare class Switch extends UI5Element implements IFormInputElement {
     get hasNoLabel(): boolean;
     get _textOn(): string | undefined;
     get _textOff(): string | undefined;
+    /**
+     * Determines if custom on/off texts duplicate the default role announcement.
+     * When textOn/textOff match the localized "On"/"Off" strings (case-insensitive),
+     * they duplicate what role="switch" with aria-checked already announces,
+     * so they should be aria-hidden to avoid duplicate screen reader announcements.
+     */
+    get _textAriaHidden(): boolean | undefined;
     get effectiveTabIndex(): 0 | undefined;
+    get effectiveAriaReadonly(): "true" | undefined;
     get effectiveAriaDisabled(): "true" | undefined;
-    get accessibilityOnText(): string | undefined;
-    get accessibilityOffText(): string | undefined;
-    get hiddenText(): string | undefined;
-    get ariaLabelText(): string;
+    get ariaLabelText(): string | undefined;
+    get ariaDescribedBy(): string | undefined;
+    get ariaDescribedByText(): string;
 }
 export default Switch;

package/dist/Switch.js

@@ -10,14 +10,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import { isSpace, isEnter, isShift, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isShift, isEscape, isSpaceShift, } from "@ui5/webcomponents-base/dist/Keys.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
 import SwitchDesign from "./types/SwitchDesign.js";
-import { FORM_CHECKABLE_REQUIRED } from "./generated/i18n/i18n-defaults.js";
+import { FORM_CHECKABLE_REQUIRED, SWITCH_ON, SWITCH_OFF, ACC_STATE_READONLY, } from "./generated/i18n/i18n-defaults.js";
 // Template
 import SwitchTemplate from "./SwitchTemplate.js";
 // Styles
@@ -62,11 +62,21 @@ let Switch = Switch_1 = class Switch extends UI5Element {
          * @default "Textual"
          */
         this.design = "Textual";
+        /**
+         * Defines whether the component is in readonly state.
+         *
+         * **Note:** A readonly switch cannot be toggled by user interaction,
+         * but can still be focused and its value read programmatically.
+         * @default false
+         * @public
+         * @since 2.21.0
+         */
+        this.readonly = false;
         /**
          * Defines if the component is checked.
          *
          * **Note:** The property can be changed with user interaction,
-         * either by cliking the component, or by pressing the `Enter` or `Space` key.
+         * either by clicking the component, or by pressing the `Enter` or `Space` key.
          * @default false
          * @formEvents change
          * @formProperty
@@ -96,6 +106,7 @@ let Switch = Switch_1 = class Switch extends UI5Element {
          */
         this.value = "";
         this._cancelAction = false;
+        this._isSpacePressed = false;
     }
     get formValidityMessage() {
         return Switch_1.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);
@@ -115,25 +126,58 @@ let Switch = Switch_1 = class Switch extends UI5Element {
     get sapNextIcon() {
         return this.checked ? "accept" : "less";
     }
+    _onfocusin() {
+        // Reset keyboard state on focus to prevent stale state from previous interactions
+        this._cancelAction = false;
+        this._isSpacePressed = false;
+    }
     _onclick() {
+        if (this.readonly) {
+            return;
+        }
         this.toggle();
     }
     _onkeydown(e) {
-        this._cancelAction = isShift(e) || isEscape(e);
         if (isSpace(e)) {
             e.preventDefault();
         }
+        if (this.readonly) {
+            return;
+        }
+        if (isSpace(e)) {
+            this._isSpacePressed = true;
+        }
+        else if (isShift(e) || isEscape(e)) {
+            this._cancelAction = true;
+        }
         if (isEnter(e)) {
             this._onclick();
         }
     }
     _onkeyup(e) {
-        if (isSpace(e) && !this._cancelAction) {
+        if (this.readonly) {
+            return;
+        }
+        const isSpaceKey = isSpace(e);
+        const isCancelKey = isShift(e) || isEscape(e);
+        if (isSpaceKey || isSpaceShift(e)) {
+            if (this._cancelAction) {
+                this._cancelAction = false;
+                this._isSpacePressed = false;
+                e.preventDefault();
+                return;
+            }
+            this._isSpacePressed = false;
+        }
+        else if (isCancelKey && !this._isSpacePressed) {
+            this._cancelAction = false;
+        }
+        if (isSpaceKey) {
             this._onclick();
         }
     }
     toggle() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.readonly) {
             this.checked = !this.checked;
             const changePrevented = !this.fireDecoratorEvent("change");
             // Angular two way data binding;
@@ -155,28 +199,44 @@ let Switch = Switch_1 = class Switch extends UI5Element {
     get _textOff() {
         return this.graphical ? "" : this.textOff;
     }
+    /**
+     * Determines if custom on/off texts duplicate the default role announcement.
+     * When textOn/textOff match the localized "On"/"Off" strings (case-insensitive),
+     * they duplicate what role="switch" with aria-checked already announces,
+     * so they should be aria-hidden to avoid duplicate screen reader announcements.
+     */
+    get _textAriaHidden() {
+        const on = this.textOn?.toLowerCase();
+        const off = this.textOff?.toLowerCase();
+        const i18nOn = Switch_1.i18nBundle.getText(SWITCH_ON).toLowerCase();
+        const i18nOff = Switch_1.i18nBundle.getText(SWITCH_OFF).toLowerCase();
+        return (on === i18nOn && off === i18nOff) || undefined;
+    }
     get effectiveTabIndex() {
         return this.disabled ? undefined : 0;
     }
+    get effectiveAriaReadonly() {
+        return this.readonly ? "true" : undefined;
+    }
     get effectiveAriaDisabled() {
         return this.disabled ? "true" : undefined;
     }
-    get accessibilityOnText() {
-        return this._textOn;
-    }
-    get accessibilityOffText() {
-        return this._textOff;
+    get ariaLabelText() {
+        return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined;
     }
-    get hiddenText() {
-        return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
+    get ariaDescribedBy() {
+        return this.readonly ? `${this._id}-readonly-desc` : undefined;
     }
-    get ariaLabelText() {
-        return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
+    get ariaDescribedByText() {
+        return this.readonly ? Switch_1.i18nBundle.getText(ACC_STATE_READONLY) : "";
     }
 };
 __decorate([
     property()
 ], Switch.prototype, "design", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean })
 ], Switch.prototype, "checked", void 0);
@@ -210,6 +270,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Switch.prototype, "_cancelAction", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Switch.prototype, "_isSpacePressed", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], Switch, "i18nBundle", void 0);

package/dist/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tisSpace, isEnter, isShift, isEscape,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\nimport { FORM_CHECKABLE_REQUIRED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport SwitchTemplate from \"./SwitchTemplate.js\";\n\n// Styles\nimport switchCss from \"./generated/themes/Switch.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-switch` component is used for changing between binary states.\n *\n * The component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\n * but texts longer than 3 letters will be cutted off.\n *\n * However, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n *\n * Note: the component would not automatically stretch to fit the whole text width.\n *\n * ### Keyboard Handling\n * The state can be changed by pressing the Space and Enter keys.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Switch\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.8.0\n * @csspart slider - Used to style the track, where the handle is being slid\n * @csspart text-on - Used to style the `textOn` property text\n * @csspart text-off - Used to style the `textOff` property text\n * @csspart handle - Used to style the handle of the switch\n */\n@customElement({\n\ttag: \"ui5-switch\",\n\tformAssociated: true,\n\tlanguageAware: true,\n\tstyles: switchCss,\n\trenderer: jsxRenderer,\n\ttemplate: SwitchTemplate,\n})\n/**\n * Fired when the component checked state changes.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n/**\n * Fired to make Angular two way data binding work properly.\n * @private\n */\n@event(\"value-changed\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass Switch extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\tchange: void\n\t\t\"value-changed\": void\n\t}\n\n\t/**\n\t * Defines the component design.\n\t *\n\t * **Note:** If `Graphical` type is set,\n\t * positive and negative icons will replace the `textOn` and `textOff`.\n\t * @public\n\t * @default \"Textual\"\n\t */\n\t@property()\n\tdesign: `${SwitchDesign}` = \"Textual\";\n\n\t/**\n\t * Defines if the component is checked.\n\t *\n\t * **Note:** The property can be changed with user interaction,\n\t * either by cliking the component, or by pressing the `Enter` or `Space` key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked = false;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false\n\n\t/**\n\t * Defines the text, displayed when the component is checked.\n\t *\n\t * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttextOn?: string\n\n\t/**\n\t * Defines the text, displayed when the component is not checked.\n\t *\n\t * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttextOff?: string\n\n\t/**\n\t * Sets the accessible ARIA name of the component.\n\t *\n\t * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\n\t * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.\n\t * @default undefined\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t *\n\t * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\n\t * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.\n\t * @default undefined\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * **Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.\n\t * @default undefined\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines whether the component is required.\n\t * @default false\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property({ type: Boolean })\n\trequired = false;\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the form value of the component.\n\t * @default \"\"\n\t * @since 2.12.0\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_cancelAction = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget formValidityMessage() {\n\t\treturn Switch.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn { valueMissing: this.required && !this.checked };\n\t}\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\tif (this.checked) {\n\t\t\treturn this.value || \"on\";\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tget sapNextIcon() {\n\t\treturn this.checked ? \"accept\" : \"less\";\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tthis._cancelAction = isShift(e) || isEscape(e);\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) && !this._cancelAction) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\ttoggle() {\n\t\tif (!this.disabled) {\n\t\t\tthis.checked = !this.checked;\n\t\t\tconst changePrevented = !this.fireDecoratorEvent(\"change\");\n\t\t\t// Angular two way data binding;\n\t\t\tconst valueChangePrevented = !this.fireDecoratorEvent(\"value-changed\");\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\t\t}\n\t}\n\n\tget graphical() {\n\t\treturn this.design === SwitchDesign.Graphical;\n\t}\n\n\tget hasNoLabel() {\n\t\treturn !(this.graphical || this.textOn || this.textOff);\n\t}\n\n\tget _textOn() {\n\t\treturn this.graphical ? \"\" : this.textOn;\n\t}\n\n\tget _textOff() {\n\t\treturn this.graphical ? \"\" : this.textOff;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : 0;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget accessibilityOnText() {\n\t\treturn this._textOn;\n\t}\n\n\tget accessibilityOffText() {\n\t\treturn this._textOff;\n\t}\n\n\tget hiddenText() {\n\t\treturn this.checked ? this.accessibilityOnText : this.accessibilityOffText;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn [getEffectiveAriaLabelText(this), this.hiddenText].join(\" \").trim();\n\t}\n}\n\nSwitch.define();\n\nexport default Switch;\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tisSpace, isEnter, isShift, isEscape,\n\tisSpaceShift,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\nimport {\n\tFORM_CHECKABLE_REQUIRED,\n\tSWITCH_ON,\n\tSWITCH_OFF,\n\tACC_STATE_READONLY,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport SwitchTemplate from \"./SwitchTemplate.js\";\n\n// Styles\nimport switchCss from \"./generated/themes/Switch.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-switch` component is used for changing between binary states.\n *\n * The component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\n * but texts longer than 3 letters will be cutted off.\n *\n * However, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n *\n * Note: the component would not automatically stretch to fit the whole text width.\n *\n * ### Keyboard Handling\n * The state can be changed by pressing the Space and Enter keys.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Switch\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.8.0\n * @csspart slider - Used to style the track, where the handle is being slid\n * @csspart text-on - Used to style the `textOn` property text\n * @csspart text-off - Used to style the `textOff` property text\n * @csspart handle - Used to style the handle of the switch\n */\n@customElement({\n\ttag: \"ui5-switch\",\n\tformAssociated: true,\n\tlanguageAware: true,\n\tstyles: switchCss,\n\trenderer: jsxRenderer,\n\ttemplate: SwitchTemplate,\n})\n/**\n * Fired when the component checked state changes.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n/**\n * Fired to make Angular two way data binding work properly.\n * @private\n */\n@event(\"value-changed\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass Switch extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\tchange: void\n\t\t\"value-changed\": void\n\t}\n\n\t/**\n\t * Defines the component design.\n\t *\n\t * **Note:** If `Graphical` type is set,\n\t * positive and negative icons will replace the `textOn` and `textOff`.\n\t * @public\n\t * @default \"Textual\"\n\t */\n\t@property()\n\tdesign: `${SwitchDesign}` = \"Textual\";\n\n\t/**\n\t * Defines whether the component is in readonly state.\n\t *\n\t * **Note:** A readonly switch cannot be toggled by user interaction,\n\t * but can still be focused and its value read programmatically.\n\t * @default false\n\t * @public\n\t * @since 2.21.0\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Defines if the component is checked.\n\t *\n\t * **Note:** The property can be changed with user interaction,\n\t * either by clicking the component, or by pressing the `Enter` or `Space` key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked = false;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false\n\n\t/**\n\t * Defines the text, displayed when the component is checked.\n\t *\n\t * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttextOn?: string\n\n\t/**\n\t * Defines the text, displayed when the component is not checked.\n\t *\n\t * **Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttextOff?: string\n\n\t/**\n\t * Sets the accessible ARIA name of the component.\n\t *\n\t * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\n\t * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.\n\t * @default undefined\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t *\n\t * **Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\n\t * Providing an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.\n\t * @default undefined\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * **Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.\n\t * @default undefined\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property()\n\ttooltip?: string;\n\n\t/**\n\t * Defines whether the component is required.\n\t * @default false\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property({ type: Boolean })\n\trequired = false;\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the form value of the component.\n\t * @default \"\"\n\t * @since 2.12.0\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_cancelAction = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_isSpacePressed = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget formValidityMessage() {\n\t\treturn Switch.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn { valueMissing: this.required && !this.checked };\n\t}\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\tif (this.checked) {\n\t\t\treturn this.value || \"on\";\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tget sapNextIcon() {\n\t\treturn this.checked ? \"accept\" : \"less\";\n\t}\n\n\t_onfocusin() {\n\t\t// Reset keyboard state on focus to prevent stale state from previous interactions\n\t\tthis._cancelAction = false;\n\t\tthis._isSpacePressed = false;\n\t}\n\n\t_onclick() {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\t\tthis.toggle();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._isSpacePressed = true;\n\t\t} else if (isShift(e) || isEscape(e)) {\n\t\t\tthis._cancelAction = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isSpaceKey = isSpace(e);\n\t\tconst isCancelKey = isShift(e) || isEscape(e);\n\n\t\tif (isSpaceKey || isSpaceShift(e)) {\n\t\t\tif (this._cancelAction) {\n\t\t\t\tthis._cancelAction = false;\n\t\t\t\tthis._isSpacePressed = false;\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._isSpacePressed = false;\n\t\t} else if (isCancelKey && !this._isSpacePressed) {\n\t\t\tthis._cancelAction = false;\n\t\t}\n\t\tif (isSpaceKey) {\n\t\t\tthis._onclick();\n\t\t}\n\t}\n\n\ttoggle() {\n\t\tif (!this.disabled && !this.readonly) {\n\t\t\tthis.checked = !this.checked;\n\t\t\tconst changePrevented = !this.fireDecoratorEvent(\"change\");\n\t\t\t// Angular two way data binding;\n\t\t\tconst valueChangePrevented = !this.fireDecoratorEvent(\"value-changed\");\n\n\t\t\tif (changePrevented || valueChangePrevented) {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\t\t}\n\t}\n\n\tget graphical() {\n\t\treturn this.design === SwitchDesign.Graphical;\n\t}\n\n\tget hasNoLabel() {\n\t\treturn !(this.graphical || this.textOn || this.textOff);\n\t}\n\n\tget _textOn() {\n\t\treturn this.graphical ? \"\" : this.textOn;\n\t}\n\n\tget _textOff() {\n\t\treturn this.graphical ? \"\" : this.textOff;\n\t}\n\n\t/**\n\t * Determines if custom on/off texts duplicate the default role announcement.\n\t * When textOn/textOff match the localized \"On\"/\"Off\" strings (case-insensitive),\n\t * they duplicate what role=\"switch\" with aria-checked already announces,\n\t * so they should be aria-hidden to avoid duplicate screen reader announcements.\n\t */\n\tget _textAriaHidden(): boolean | undefined {\n\t\tconst on = this.textOn?.toLowerCase();\n\t\tconst off = this.textOff?.toLowerCase();\n\t\tconst i18nOn = Switch.i18nBundle.getText(SWITCH_ON).toLowerCase();\n\t\tconst i18nOff = Switch.i18nBundle.getText(SWITCH_OFF).toLowerCase();\n\t\treturn (on === i18nOn && off === i18nOff) || undefined;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : 0;\n\t}\n\n\tget effectiveAriaReadonly() {\n\t\treturn this.readonly ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined;\n\t}\n\n\tget ariaDescribedBy() {\n\t\treturn this.readonly ? `${this._id}-readonly-desc` : undefined;\n\t}\n\n\tget ariaDescribedByText() {\n\t\treturn this.readonly ? Switch.i18nBundle.getText(ACC_STATE_READONLY) : \"\";\n\t}\n}\n\nSwitch.define();\n\nexport default Switch;\n"]}

package/dist/SwitchTemplate.js

@@ -12,12 +12,12 @@ export default function SwitchTemplate() {
             "ui5-switch--semantic": this.graphical,
             "ui5-switch--no-label": !(this.graphical || this.textOn || this.textOff),
             "ui5-switch--safari": isSafari(),
-        }, role: "switch", "aria-label": this.ariaLabelText, "aria-checked": this.checked, "aria-disabled": this.effectiveAriaDisabled, "aria-required": this.required, onClick: this._onclick, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, tabindex: this.effectiveTabIndex, title: this.tooltip, children: [_jsx("div", { class: "ui5-switch-inner", children: _jsx("div", { class: "ui5-switch-track", part: "slider", children: _jsxs("div", { class: "ui5-switch-slider", children: [this.graphical ?
+        }, role: "switch", "aria-label": this.ariaLabelText, "aria-checked": this.checked, "aria-disabled": this.effectiveAriaDisabled, "aria-readonly": this.effectiveAriaReadonly, "aria-required": this.required, "aria-describedby": this.ariaDescribedBy, onClick: this._onclick, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onFocusIn: this._onfocusin, tabindex: this.effectiveTabIndex, title: this.tooltip, children: [_jsx("div", { class: "ui5-switch-inner", children: _jsx("div", { class: "ui5-switch-track", part: "slider", children: _jsxs("div", { class: "ui5-switch-slider", children: [this.graphical ?
                                 _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on", children: _jsx(Icon, { name: acceptIcon, class: "ui5-switch-icon-on" }) }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off", children: _jsx(Icon, { name: declineIcon, class: "ui5-switch-icon-off" }) })] })
                                 :
                                     _jsx(_Fragment, { children: this.hasNoLabel ?
                                             _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon", part: "text-on", children: _jsx(Icon, { name: this.sapNextIcon, class: "ui5-switch-no-label-icon-on" }) }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon", part: "text-off", children: _jsx(Icon, { name: this.sapNextIcon, class: "ui5-switch-no-label-icon-off" }) })] })
                                             :
-                                                _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on", part: "text-on", children: this._textOn }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off", part: "text-off", children: this._textOff })] }) }), _jsx("span", { class: "ui5-switch-handle", part: "handle" })] }) }) }), _jsx("input", { type: 'checkbox', checked: this.checked, class: "ui5-switch-input", "data-sap-no-tab-ref": true })] }));
+                                                _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-switch-text ui5-switch-text--on", part: "text-on", "aria-hidden": this._textAriaHidden, children: this._textOn }), _jsx("span", { class: "ui5-switch-text ui5-switch-text--off", part: "text-off", "aria-hidden": this._textAriaHidden, children: this._textOff })] }) }), this.readonly && _jsx("span", { class: "ui5-switch-text ui5-switch-text--readonly", id: this.ariaDescribedBy, "aria-hidden": this._textAriaHidden, children: this.ariaDescribedByText }), _jsx("span", { class: "ui5-switch-handle", part: "handle" })] }) }) }), _jsx("input", { type: 'checkbox', checked: this.checked, class: "ui5-switch-input", "data-sap-no-tab-ref": true })] }));
 }
 //# sourceMappingURL=SwitchTemplate.js.map

package/dist/SwitchTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchTemplate.js","sourceRoot":"","sources":["../src/SwitchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,qBAAqB,EAAE,SAAS,EAAE;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;YACnC,sBAAsB,EAAE,IAAI,CAAC,SAAS;YACtC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC;YACxE,oBAAoB,EAAE,QAAQ,EAAE;SAChC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,aAAa,kBAChB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,qBAAqB,mBAC1B,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,aAEnB,cAAK,KAAK,EAAC,kBAAkB,YAC5B,cAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,YAC1C,eAAK,KAAK,EAAC,mBAAmB,aAC5B,IAAI,CAAC,SAAS,CAAC,CAAC;gCAChB,8BACC,eAAM,KAAK,EAAC,qCAAqC,YAChD,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,oBAAoB,GAAE,GAC9C,EACP,eAAM,KAAK,EAAC,sCAAsC,YACjD,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,qBAAqB,GAAE,GAChD,IACL;gCACH,CAAC;oCACD,4BACE,IAAI,CAAC,UAAU,CAAC,CAAC;4CACjB,8BACC,eAAM,KAAK,EAAC,8DAA8D,EAAC,IAAI,EAAC,SAAS,YACxF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,6BAA6B,GAAG,GAC9D,EACP,eAAM,KAAK,EAAC,+DAA+D,EAAC,IAAI,EAAC,UAAU,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,8BAA8B,GAAG,GAC/D,IACL;4CACH,CAAC;gDACD,8BACC,eAAM,KAAK,EAAC,qCAAqC,EAAC,IAAI,EAAC,SAAS,YAAE,IAAI,CAAC,OAAO,GAAQ,EACtF,eAAM,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,UAAU,YAAE,IAAI,CAAC,QAAQ,GAAQ,IACvF,GAEF,EAGJ,eAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,GAAQ,IAChD,GACD,GACD,EACN,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,kBAAkB,gCAAsB,IACvF,CAAC,CAAC;AACV,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Switch from \"./Switch.js\";\nimport acceptIcon from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function SwitchTemplate(this: Switch) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-switch-root\": true,\n\t\t\t\t\"ui5-switch--desktop\": isDesktop(),\n\t\t\t\t\"ui5-switch--disabled\": this.disabled,\n\t\t\t\t\"ui5-switch--checked\": this.checked,\n\t\t\t\t\"ui5-switch--semantic\": this.graphical,\n\t\t\t\t\"ui5-switch--no-label\": !(this.graphical || this.textOn || this.textOff),\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t}}\n\t\t\trole=\"switch\"\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-checked={this.checked}\n\t\t\taria-disabled={this.effectiveAriaDisabled}\n\t\t\taria-required={this.required}\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\ttitle={this.tooltip}\n\t\t>\n\t\t\t<div class=\"ui5-switch-inner\">\n\t\t\t\t<div class=\"ui5-switch-track\" part=\"slider\">\n\t\t\t\t\t<div class=\"ui5-switch-slider\">\n\t\t\t\t\t\t{this.graphical ?\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\">\n\t\t\t\t\t\t\t\t\t<Icon name={acceptIcon} class=\"ui5-switch-icon-on\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\">\n\t\t\t\t\t\t\t\t\t<Icon name={declineIcon} class=\"ui5-switch-icon-off\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this.hasNoLabel ?\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon\" part=\"text-on\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-on\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon\" part=\"text-off\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-off\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\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<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\" part=\"text-on\">{this._textOn}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\" part=\"text-off\">{this._textOff}</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"ui5-switch-handle\" part=\"handle\"></span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type='checkbox' checked={this.checked} class=\"ui5-switch-input\" data-sap-no-tab-ref/>\n\t\t</div>);\n}\n"]}
+{"version":3,"file":"SwitchTemplate.js","sourceRoot":"","sources":["../src/SwitchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,qBAAqB,EAAE,SAAS,EAAE;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;YACnC,sBAAsB,EAAE,IAAI,CAAC,SAAS;YACtC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC;YACxE,oBAAoB,EAAE,QAAQ,EAAE;SAChC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,aAAa,kBAChB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,qBAAqB,mBAC1B,IAAI,CAAC,qBAAqB,mBAC1B,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,eAAe,EACtC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,aAEnB,cAAK,KAAK,EAAC,kBAAkB,YAC5B,cAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,YAC1C,eAAK,KAAK,EAAC,mBAAmB,aAC5B,IAAI,CAAC,SAAS,CAAC,CAAC;gCAChB,8BACC,eAAM,KAAK,EAAC,qCAAqC,YAChD,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,oBAAoB,GAAE,GAC9C,EACP,eAAM,KAAK,EAAC,sCAAsC,YACjD,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,qBAAqB,GAAE,GAChD,IACL;gCACH,CAAC;oCACD,4BACE,IAAI,CAAC,UAAU,CAAC,CAAC;4CACjB,8BACC,eAAM,KAAK,EAAC,8DAA8D,EAAC,IAAI,EAAC,SAAS,YACxF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,6BAA6B,GAAG,GAC9D,EACP,eAAM,KAAK,EAAC,+DAA+D,EAAC,IAAI,EAAC,UAAU,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,8BAA8B,GAAG,GAC/D,IACL;4CACH,CAAC;gDACD,8BACC,eAAM,KAAK,EAAC,qCAAqC,EAAC,IAAI,EAAC,SAAS,iBAAc,IAAI,CAAC,eAAe,YAAG,IAAI,CAAC,OAAO,GAAQ,EACzH,eAAM,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,UAAU,iBAAc,IAAI,CAAC,eAAe,YAAG,IAAI,CAAC,QAAQ,GAAQ,IAC1H,GAEF,EAGH,IAAI,CAAC,QAAQ,IAAI,eAAM,KAAK,EAAC,2CAA2C,EAAC,EAAE,EAAE,IAAI,CAAC,eAAe,iBAAe,IAAI,CAAC,eAAe,YAAG,IAAI,CAAC,mBAAmB,GAAQ,EAExK,eAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,GAAQ,IAChD,GACD,GACD,EACN,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,kBAAkB,gCAAsB,IACvF,CAAC,CAAC;AACV,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Switch from \"./Switch.js\";\nimport acceptIcon from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function SwitchTemplate(this: Switch) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-switch-root\": true,\n\t\t\t\t\"ui5-switch--desktop\": isDesktop(),\n\t\t\t\t\"ui5-switch--disabled\": this.disabled,\n\t\t\t\t\"ui5-switch--checked\": this.checked,\n\t\t\t\t\"ui5-switch--semantic\": this.graphical,\n\t\t\t\t\"ui5-switch--no-label\": !(this.graphical || this.textOn || this.textOff),\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t}}\n\t\t\trole=\"switch\"\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-checked={this.checked}\n\t\t\taria-disabled={this.effectiveAriaDisabled}\n\t\t\taria-readonly={this.effectiveAriaReadonly}\n\t\t\taria-required={this.required}\n\t\t\taria-describedby={this.ariaDescribedBy}\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\ttitle={this.tooltip}\n\t\t>\n\t\t\t<div class=\"ui5-switch-inner\">\n\t\t\t\t<div class=\"ui5-switch-track\" part=\"slider\">\n\t\t\t\t\t<div class=\"ui5-switch-slider\">\n\t\t\t\t\t\t{this.graphical ?\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\">\n\t\t\t\t\t\t\t\t\t<Icon name={acceptIcon} class=\"ui5-switch-icon-on\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\">\n\t\t\t\t\t\t\t\t\t<Icon name={declineIcon} class=\"ui5-switch-icon-off\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this.hasNoLabel ?\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon\" part=\"text-on\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-on\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon\" part=\"text-off\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-off\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\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<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\" part=\"text-on\" aria-hidden={this._textAriaHidden}>{this._textOn}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\" part=\"text-off\" aria-hidden={this._textAriaHidden}>{this._textOff}</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{this.readonly && <span class=\"ui5-switch-text ui5-switch-text--readonly\" id={this.ariaDescribedBy} aria-hidden={this._textAriaHidden}>{this.ariaDescribedByText}</span>}\n\n\t\t\t\t\t\t<span class=\"ui5-switch-handle\" part=\"handle\"></span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type='checkbox' checked={this.checked} class=\"ui5-switch-input\" data-sap-no-tab-ref/>\n\t\t</div>);\n}\n"]}

package/dist/Tab.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
@@ -11,6 +12,10 @@ import type { TabContainerStripInfo, TabContainerOverflowInfo, ITab } from "./Ta
 import type ListItemCustom from "./ListItemCustom.js";
 import TabInStripTemplate from "./TabInStripTemplate.js";
 import TabInOverflowTemplate from "./TabInOverflowTemplate.js";
+type TabClickEventDetail = {
+    tab: Tab;
+    originalEvent: Event;
+};
 interface TabInStrip extends HTMLElement {
     realTabReference: Tab;
 }
@@ -29,6 +34,9 @@ interface TabInOverflow extends ListItemCustom {
  * @public
  */
 declare class Tab extends UI5Element implements ITabbable, ITab {
+    eventDetails: {
+        click: TabClickEventDetail;
+    };
     /**
      * The text to be displayed for the item.
      * @default undefined
@@ -91,14 +99,14 @@ declare class Tab extends UI5Element implements ITabbable, ITab {
      * Holds the content associated with this tab.
      * @public
      */
-    content: Array<Node>;
+    content: DefaultSlot<Node>;
     /**
      * Defines hierarchies with nested sub tabs.
      *
      * **Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.
      * @public
      */
-    items: Array<ITab>;
+    items: Slot<ITab>;
     _isInline?: boolean;
     _forcedMixedMode?: boolean;
     _getElementInStrip?: () => HTMLElement | undefined;
@@ -169,4 +177,4 @@ declare class Tab extends UI5Element implements ITabbable, ITab {
     } | null): void;
 }
 export default Tab;
-export type { TabInStrip, TabInOverflow, };
+export type { TabInStrip, TabInOverflow, TabClickEventDetail, };

package/dist/Tab.js

@@ -7,8 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var Tab_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
@@ -318,7 +319,7 @@ let Tab = Tab_1 = class Tab extends UI5Element {
     }
     _ondragstart(e) {
         if (e.target instanceof HTMLElement) {
-            DragRegistry.setDraggedElement(this);
+            DragRegistry.setDraggedElement(this, e);
             e.target.setAttribute("data-moving", "");
         }
     }
@@ -397,6 +398,18 @@ Tab = Tab_1 = __decorate([
         template: TabTemplate,
         styles: css,
     })
+    /**
+     * Fired when the tab is selected either with a mouse/tap or by using the Enter or Space key.
+     *
+     * @since 2.22.0
+     * @public
+     * @param {Tab} tab The selected tab.
+     * @param {Event} originalEvent The original event from the user interaction.
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
 ], Tab);
 Tab.define();
 TabContainer.registerTabStyles(stripCss);