@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/Switch.js

@@ -9,18 +9,17 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
+import { FORM_CHECKABLE_REQUIRED } from "./generated/i18n/i18n-defaults.js";
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 // Styles
@@ -28,50 +27,43 @@ import switchCss from "./generated/themes/Switch.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-switch</code> component is used for changing between binary states.
- * <br>
- * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
+ * ### Overview
+ * The `ui5-switch` component is used for changing between binary states.
+ *
+ * The component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,
  * but texts longer than 3 letters will be cutted off.
- * <br>
- * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style="width: 200px"></code>), and set widths, depending on the texts they would use.
- * <br>
+ *
+ * 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.
+ *
  * Note: the component would not automatically stretch to fit the whole text width.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  * The state can be changed by pressing the Space and Enter keys.
- * <br /><br />
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Switch";`
  * @constructor
  * @extends UI5Element
  * @public
  * @since 0.8.0
  * @csspart slider - Used to style the track, where the handle is being slid
- * @csspart text-on - Used to style the <code>textOn</code> property text
- * @csspart text-off - Used to style the <code>textOff</code> property text
+ * @csspart text-on - Used to style the `textOn` property text
+ * @csspart text-off - Used to style the `textOff` property text
  * @csspart handle - Used to style the handle of the switch
  */
 let Switch = Switch_1 = class Switch extends UI5Element {
-    onBeforeRendering() {
-        this._enableFormSupport();
-    }
-    _enableFormSupport() {
-        const formSupport = getFeature("FormSupport");
-        if (formSupport) {
-            formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-                const switchComponent = element;
-                nativeInput.checked = !!switchComponent.checked;
-                nativeInput.disabled = !!switchComponent.disabled;
-                nativeInput.value = switchComponent.checked ? "on" : "";
-            });
-        }
-        else if (this.name) {
-            console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-        }
+    get formValidityMessage() {
+        return Switch_1.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.checked };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.checked ? "on" : null;
     }
     get sapNextIcon() {
         return this.checked ? "accept" : "less";
@@ -122,11 +114,12 @@ let Switch = Switch_1 = class Switch extends UI5Element {
         const hasLabel = this.graphical || this.textOn || this.textOff;
         return {
             main: {
-                "ui5-switch-desktop": isDesktop(),
+                "ui5-switch--desktop": isDesktop(),
                 "ui5-switch--disabled": this.disabled,
                 "ui5-switch--checked": this.checked,
                 "ui5-switch--semantic": this.graphical,
                 "ui5-switch--no-label": !hasLabel,
+                "ui5-switch--safari": isSafari(),
             },
         };
     }
@@ -179,12 +172,10 @@ __decorate([
 __decorate([
     property()
 ], Switch.prototype, "name", void 0);
-__decorate([
-    slot()
-], Switch.prototype, "formSupport", void 0);
 Switch = Switch_1 = __decorate([
     customElement({
         tag: "ui5-switch",
+        formAssociated: true,
         languageAware: true,
         styles: switchCss,
         renderer: litRender,
@@ -193,8 +184,8 @@ Switch = Switch_1 = __decorate([
     })
     /**
      * Fired when the component checked state changes.
-     *
      * @public
+     * @allowPreventDefault
      */
     ,
     event("change")

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.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\nimport type { IFormElement, NativeFormElement } from \"./features/InputElementsFormSupport.js\";\nimport Icon from \"./Icon.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\n\n// Template\nimport SwitchTemplate from \"./generated/templates/SwitchTemplate.lit.js\";\n\n// Styles\nimport switchCss from \"./generated/themes/Switch.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-switch</code> component is used for changing between binary states.\n * <br>\n * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,\n * but texts longer than 3 letters will be cutted off.\n * <br>\n * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style=\"width: 200px\"></code>), and set widths, depending on the texts they would use.\n * <br>\n * Note: the component would not automatically stretch to fit the whole text width.\n *\n * <h3>Keyboard Handling</h3>\n * The state can be changed by pressing the Space and Enter keys.\n * <br /><br />\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Switch\";</code>\n *\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 <code>textOn</code> property text\n * @csspart text-off - Used to style the <code>textOff</code> property text\n * @csspart handle - Used to style the handle of the switch\n */\n@customElement({\n\ttag: \"ui5-switch\",\n\tlanguageAware: true,\n\tstyles: switchCss,\n\trenderer: litRender,\n\ttemplate: SwitchTemplate,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the component checked state changes.\n *\n * @public\n */\n@event(\"change\")\nclass Switch extends UI5Element implements IFormElement {\n\t/**\n\t * Defines the component design.\n\t * <br><br>\n\t * <b>Note:</b> If <code>Graphical</code> type is set,\n\t * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.\n\t *\n\t * @public\n\t * @default \"Textual\"\n\t */\n\t@property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })\n\tdesign!: `${SwitchDesign}`;\n\n\t/**\n\t * Defines if the component is checked.\n\t * <br><br>\n\t * <b>Note:</b> The property can be changed with user interaction,\n\t * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked!: boolean;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is noninteractive.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean\n\n\t/**\n\t * Defines the text, displayed when the component is checked.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t *\n\t * @default \"\"\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 * <br><br>\n\t * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).\n\t *\n\t * @default \"\"\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 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.\n\t * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.\n\t * @default \"\"\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 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.\n\t * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * <br>\n\t * <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.\n\t * @default \"\"\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 *\n\t * @default false\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property({ type: Boolean })\n\trequired!: boolean;\n\n\t/**\n\t * Determines the name with which the component will be submitted in an HTML form.\n\t *\n\t * <br><br>\n\t * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t *\n\t * <br><br>\n\t * <b>Note:</b> When set, a native <code>input</code> HTML element\n\t * will be created inside the component so that it can be submitted as\n\t * part of an HTML form. Do not use this property unless you need to submit a form.\n\t *\n\t * @default \"\"\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property()\n\tname!: string;\n\n\t/**\n\t * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit, when <code>Switch</code> is a part of HTML form.\n\t *\n\t * @private\n\t * @since 1.16.0\n\t */\n\t@slot()\n\tformSupport!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._enableFormSupport();\n\t}\n\n\t_enableFormSupport() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (formSupport) {\n\t\t\tformSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => {\n\t\t\t\tconst switchComponent = (element as Switch);\n\t\t\t\t(nativeInput as HTMLInputElement).checked = !!switchComponent.checked;\n\t\t\t\tnativeInput.disabled = !!switchComponent.disabled;\n\t\t\t\tnativeInput.value = switchComponent.checked ? \"on\" : \"\";\n\t\t\t});\n\t\t} else if (this.name) {\n\t\t\tconsole.warn(`In order for the \"name\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\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\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)) {\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.fireEvent(\"change\", null, true);\n\t\t\t// Angular two way data binding;\n\t\t\tconst valueChangePrevented = !this.fireEvent(\"value-changed\", null, true);\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 classes(): ClassMap {\n\t\tconst hasLabel = this.graphical || this.textOn || this.textOff;\n\n\t\treturn {\n\t\t\tmain: {\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\": !hasLabel,\n\t\t\t},\n\t\t};\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\tstatic async onDefine() {\n\t\tSwitch.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\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.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\nimport Icon from \"./Icon.js\";\nimport SwitchDesign from \"./types/SwitchDesign.js\";\nimport { FORM_CHECKABLE_REQUIRED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport SwitchTemplate from \"./generated/templates/SwitchTemplate.lit.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: litRender,\n\ttemplate: SwitchTemplate,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the component checked state changes.\n * @public\n * @allowPreventDefault\n */\n@event(\"change\")\nclass Switch extends UI5Element implements IFormInputElement {\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({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })\n\tdesign!: `${SwitchDesign}`;\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!: boolean;\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!: boolean\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 \"\"\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 \"\"\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 \"\"\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 \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property({ defaultValue: \"\" })\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 \"\"\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!: boolean;\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 \"\"\n\t * @public\n\t * @since 1.16.0\n\t */\n\t@property()\n\tname!: string;\n\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\treturn this.checked ? \"on\" : 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\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)) {\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.fireEvent(\"change\", null, true);\n\t\t\t// Angular two way data binding;\n\t\t\tconst valueChangePrevented = !this.fireEvent(\"value-changed\", null, true);\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 classes(): ClassMap {\n\t\tconst hasLabel = this.graphical || this.textOn || this.textOff;\n\n\t\treturn {\n\t\t\tmain: {\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\": !hasLabel,\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t},\n\t\t};\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\tstatic async onDefine() {\n\t\tSwitch.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nSwitch.define();\n\nexport default Switch;\n"]}

package/dist/Tab.d.ts

@@ -1,27 +1,34 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import SemanticColor from "./types/SemanticColor.js";
 import ListItemType from "./types/ListItemType.js";
-import type { ITab } from "./Interfaces.js";
+import type { TabContainerStripInfo, TabContainerOverflowInfo, ITab } from "./TabContainer.js";
+import CustomListItem from "./CustomListItem.js";
 import TabInStripTemplate from "./generated/templates/TabInStripTemplate.lit.js";
 import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+interface TabInStrip extends HTMLElement {
+    realTabReference: Tab;
+}
+interface TabInOverflow extends CustomListItem {
+    realTabReference: Tab;
+}
 /**
  * @class
- * The <code>ui5-tab</code> represents a selectable item inside a <code>ui5-tabcontainer</code>.
- * It defines both the item in the tab strip (top part of the <code>ui5-tabcontainer</code>) and the
+ * The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.
+ * It defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the
  * content that is presented to the user once the tab is selected.
- *
  * @abstract
  * @constructor
  * @extends UI5Element
  * @implements {ITab}
  * @public
  */
-declare class Tab extends UI5Element implements ITab, ITabbable {
+declare class Tab extends UI5Element implements ITabbable, ITab {
     /**
      * The text to be displayed for the item.
      * @default ""
@@ -43,62 +50,65 @@ declare class Tab extends UI5Element implements ITab, ITabbable {
     /**
      * Defines the icon source URI to be displayed as graphical element within the component.
      * The SAP-icons font provides numerous built-in icons.
-     * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
-     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @default ""
      * @public
      */
     icon: string;
     /**
      * Defines the component's design color.
-     * <br><br>
+     *
      * The design is applied to:
-     * <ul>
-     * <li>the component icon</li>
-     * <li>the <code>text</code> when the component overflows</li>
-     * <li>the tab selection line</li>
-     * </ul>
      *
-     * <br><br>
-     * Available designs are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
+     * - the component icon
+     * - the `text` when the component overflows
+     * - the tab selection line
+     *
+     * Available designs are: `"Default"`, `"Neutral"`, `"Positive"`, `"Critical"` and `"Negative"`.
      *
-     * <br><br>
-     * <b>Note:</b> The design depends on the current theme.
+     * **Note:** The design depends on the current theme.
      * @default "Default"
      * @public
      */
     design: `${SemanticColor}`;
     /**
      * Specifies if the component is selected.
-     *
      * @default false
      * @public
      */
     selected: boolean;
-    _selected: boolean;
-    _realTab: Tab;
+    /**
+     * Defines if the tab is movable.
+     *
+     * @default false
+     * @private
+     */
+    movable: boolean;
     _isTopLevelTab: boolean;
+    _selectedTabReference: Tab;
     /**
      * Holds the content associated with this tab.
-     *
      * @public
      */
     content: Array<Node>;
     /**
      * Defines hierarchies with nested sub tabs.
-     * <br><br>
-     * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
      *
+     * **Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.
      * @public
      */
-    subTabs: Array<ITab>;
+    items: Array<ITab>;
     _isInline?: boolean;
-    _mixedMode?: boolean;
-    _getElementInStrip?: () => ITab | null;
+    _forcedMixedMode?: boolean;
+    _getElementInStrip?: () => HTMLElement | undefined;
+    _getElementInOverflow?: () => HTMLElement | undefined;
     _individualSlot: string;
+    _forcedPosinset?: number;
+    _forcedSetsize?: number;
+    _forcedStyleInOverflow?: Record<string, any>;
     static i18nBundle: I18nBundle;
-    set _tabIndex(val: string);
-    get _tabIndex(): string;
+    set forcedTabIndex(val: string);
+    get forcedTabIndex(): string;
     get displayText(): string;
     get isSeparator(): boolean;
     get stripPresentation(): object;
@@ -110,17 +120,22 @@ declare class Tab extends UI5Element implements ITab, ITabbable {
     get isOnSelectedTabPath(): boolean;
     get _effectiveSlotName(): string;
     get _defaultSlotName(): "" | "disabled-slot";
-    get _hasOwnContent(): boolean;
+    get hasOwnContent(): boolean;
+    get expandBtnAccessibilityAttributes(): Pick<AccessibilityAttributes, "hasPopup">;
+    receiveStripInfo({ getElementInStrip, posinset, setsize, isInline, isTopLevelTab, mixedMode, }: TabContainerStripInfo): void;
+    receiveOverflowInfo({ getElementInOverflow, style }: TabContainerOverflowInfo): void;
     /**
      * Returns the DOM reference of the tab that is placed in the header.
-     * <b>Note:</b> Tabs, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs will return <code>null</code>.
-     * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
      *
+     * **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.
+     *
+     * **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
      * @public
      * @since 1.0.0-rc.16
      */
-    getTabInStripDomRef(): ITab | null;
+    getDomRefInStrip(): HTMLElement | undefined;
     getFocusDomRef(): HTMLElement | undefined;
+    focus(focusOptions?: FocusOptions): Promise<void>;
     get isMixedModeTab(): boolean | undefined;
     get isTextOnlyTab(): boolean;
     get isIconTab(): boolean;
@@ -145,5 +160,8 @@ declare class Tab extends UI5Element implements ITab, ITabbable {
     static get stripTemplate(): typeof TabInStripTemplate;
     static get overflowTemplate(): typeof TabInOverflowTemplate;
     static onDefine(): Promise<void>;
+    _ondragstart(e: DragEvent): void;
+    _ondragend(e: DragEvent): void;
 }
 export default Tab;
+export type { TabInStrip, TabInOverflow, };

package/dist/Tab.js

@@ -10,10 +10,10 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { TAB_ARIA_DESIGN_POSITIVE, TAB_ARIA_DESIGN_NEGATIVE, TAB_ARIA_DESIGN_CRITICAL, TAB_ARIA_DESIGN_NEUTRAL, TABCONTAINER_END_OVERFLOW, TAB_SPLIT_ROLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
@@ -31,6 +31,7 @@ import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.l
 // Styles
 import css from "./generated/themes/Tab.css.js";
 import stripCss from "./generated/themes/TabInStrip.css.js";
+import draggableElementStyles from "./generated/themes/DraggableElement.css.js";
 import overflowCss from "./generated/themes/TabInOverflow.css.js";
 const DESIGN_DESCRIPTIONS = {
     [SemanticColor.Positive]: TAB_ARIA_DESIGN_POSITIVE,
@@ -40,10 +41,9 @@ const DESIGN_DESCRIPTIONS = {
 };
 /**
  * @class
- * The <code>ui5-tab</code> represents a selectable item inside a <code>ui5-tabcontainer</code>.
- * It defines both the item in the tab strip (top part of the <code>ui5-tabcontainer</code>) and the
+ * The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.
+ * It defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the
  * content that is presented to the user once the tab is selected.
- *
  * @abstract
  * @constructor
  * @extends UI5Element
@@ -51,11 +51,11 @@ const DESIGN_DESCRIPTIONS = {
  * @public
  */
 let Tab = Tab_1 = class Tab extends UI5Element {
-    set _tabIndex(val) {
-        this.getTabInStripDomRef().setAttribute("tabindex", val);
+    set forcedTabIndex(val) {
+        this.getDomRefInStrip().setAttribute("tabindex", val);
     }
-    get _tabIndex() {
-        return this.getTabInStripDomRef().getAttribute("tabindex");
+    get forcedTabIndex() {
+        return this.getDomRefInStrip().getAttribute("tabindex");
     }
     get displayText() {
         let text = this.text;
@@ -77,52 +77,71 @@ let Tab = Tab_1 = class Tab extends UI5Element {
         return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
     }
     get requiresExpandButton() {
-        return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
+        return this.items.length > 0 && this._isTopLevelTab && this.hasOwnContent;
     }
     get isSingleClickArea() {
-        return this.subTabs.length > 0 && this._isTopLevelTab && !this._hasOwnContent;
+        return this.items.length > 0 && this._isTopLevelTab && !this.hasOwnContent;
     }
     get isTwoClickArea() {
-        return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
+        return this.items.length > 0 && this._isTopLevelTab && this.hasOwnContent;
     }
     get isOnSelectedTabPath() {
-        return this._realTab === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
+        return this._selectedTabReference === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
     }
     get _effectiveSlotName() {
         return this.isOnSelectedTabPath ? this._individualSlot : `disabled-${this._individualSlot}`;
     }
     get _defaultSlotName() {
-        return this._realTab === this ? "" : "disabled-slot";
+        return this._selectedTabReference === this ? "" : "disabled-slot";
     }
-    get _hasOwnContent() {
+    get hasOwnContent() {
         return willShowContent(this.content);
     }
+    get expandBtnAccessibilityAttributes() {
+        return {
+            hasPopup: "menu",
+        };
+    }
+    receiveStripInfo({ getElementInStrip, posinset, setsize, isInline, isTopLevelTab, mixedMode, }) {
+        this._getElementInStrip = getElementInStrip;
+        this._forcedPosinset = posinset;
+        this._forcedSetsize = setsize;
+        this._forcedMixedMode = mixedMode;
+        this._isInline = isInline;
+        this._isTopLevelTab = !!isTopLevelTab;
+    }
+    receiveOverflowInfo({ getElementInOverflow, style }) {
+        this._getElementInOverflow = getElementInOverflow;
+        this._forcedStyleInOverflow = style;
+    }
     /**
      * Returns the DOM reference of the tab that is placed in the header.
-     * <b>Note:</b> Tabs, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs will return <code>null</code>.
-     * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
      *
+     * **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.
+     *
+     * **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
      * @public
      * @since 1.0.0-rc.16
      */
-    getTabInStripDomRef() {
-        if (this._getElementInStrip) {
-            return this._getElementInStrip();
-        }
-        return null;
+    getDomRefInStrip() {
+        return this._getElementInStrip?.();
     }
     getFocusDomRef() {
-        let focusedDomRef = super.getFocusDomRef();
-        if (this._getElementInStrip && this._getElementInStrip()) {
-            focusedDomRef = this._getElementInStrip();
+        let focusedDomRef = this._getElementInOverflow?.();
+        if (!focusedDomRef) {
+            focusedDomRef = this._getElementInStrip?.();
         }
         return focusedDomRef;
     }
+    async focus(focusOptions) {
+        await renderFinished();
+        return super.focus(focusOptions);
+    }
     get isMixedModeTab() {
-        return !this.icon && this._mixedMode;
+        return !this.icon && this._forcedMixedMode;
     }
     get isTextOnlyTab() {
-        return !this.icon && !this._mixedMode;
+        return !this.icon && !this._forcedMixedMode;
     }
     get isIconTab() {
         return !!this.icon;
@@ -132,13 +151,13 @@ let Tab = Tab_1 = class Tab extends UI5Element {
     }
     get effectiveSelected() {
         const subItemSelected = this.tabs.some(elem => elem.effectiveSelected);
-        return this.selected || this._selected || subItemSelected;
+        return this.selected || this._selectedTabReference === this || subItemSelected;
     }
     get effectiveHidden() {
         return !this.effectiveSelected;
     }
     get tabs() {
-        return this.subTabs.filter((tab) => !tab.isSeparator);
+        return this.items.filter((tab) => !tab.isSeparator);
     }
     get ariaLabelledBy() {
         const labels = [];
@@ -170,13 +189,13 @@ let Tab = Tab_1 = class Tab extends UI5Element {
         if (this.additionalText) {
             classes.push("ui5-tab-strip-item--withAdditionalText");
         }
-        if (!this.icon && !this._mixedMode) {
+        if (!this.icon && !this._forcedMixedMode) {
             classes.push("ui5-tab-strip-item--textOnly");
         }
         if (this.icon) {
             classes.push("ui5-tab-strip-item--withIcon");
         }
-        if (!this.icon && this._mixedMode) {
+        if (!this.icon && this._forcedMixedMode) {
             classes.push("ui5-tab-strip-item--mixedMode");
         }
         if (this.design !== SemanticColor.Default) {
@@ -207,7 +226,7 @@ let Tab = Tab_1 = class Tab extends UI5Element {
         return Tab_1.i18nBundle.getText(TABCONTAINER_END_OVERFLOW);
     }
     get _roleDescription() {
-        return this.subTabs.length > 0 ? Tab_1.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
+        return this.items.length > 0 ? Tab_1.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
     }
     get _ariaHasPopup() {
         return this.isSingleClickArea ? "menu" : undefined;
@@ -262,6 +281,16 @@ let Tab = Tab_1 = class Tab extends UI5Element {
     static async onDefine() {
         Tab_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
+    _ondragstart(e) {
+        if (e.target instanceof HTMLElement) {
+            e.target.setAttribute("data-moving", "");
+        }
+    }
+    _ondragend(e) {
+        if (e.target instanceof HTMLElement) {
+            e.target.removeAttribute("data-moving");
+        }
+    }
 };
 __decorate([
     property()
@@ -283,13 +312,13 @@ __decorate([
 ], Tab.prototype, "selected", void 0);
 __decorate([
     property({ type: Boolean })
-], Tab.prototype, "_selected", void 0);
-__decorate([
-    property({ type: Object })
-], Tab.prototype, "_realTab", void 0);
+], Tab.prototype, "movable", void 0);
 __decorate([
     property({ type: Boolean })
 ], Tab.prototype, "_isTopLevelTab", void 0);
+__decorate([
+    property({ type: Object, defaultValue: null })
+], Tab.prototype, "_selectedTabReference", void 0);
 __decorate([
     slot({
         type: Node,
@@ -309,7 +338,7 @@ __decorate([
             slots: false,
         },
     })
-], Tab.prototype, "subTabs", void 0);
+], Tab.prototype, "items", void 0);
 Tab = Tab_1 = __decorate([
     customElement({
         tag: "ui5-tab",
@@ -326,6 +355,7 @@ Tab = Tab_1 = __decorate([
 ], Tab);
 Tab.define();
 TabContainer.registerTabStyles(stripCss);
-TabContainer.registerStaticAreaTabStyles(overflowCss);
+TabContainer.registerTabStyles(draggableElementStyles);
+TabContainer.registerTabStyles(overflowCss);
 export default Tab;
 //# sourceMappingURL=Tab.js.map