@ui5/webcomponents 0.0.0-d9933bd82 → 0.0.0-db622d8a8

package/dist/Switch.js

@@ -1,110 +1,28 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Switch_1;
 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 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 { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/accept.js";
-import "@ui5/webcomponents-icons/dist/icons/decline.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 Icon from "./Icon.js";
-
-import {
-	SWITCH_ON,
-	SWITCH_OFF,
-} from "./generated/i18n/i18n-defaults.js";
-
+import SwitchDesign from "./types/SwitchDesign.js";
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
-
-
 // Styles
 import switchCss from "./generated/themes/Switch.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-switch",
-	properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
-
-		/**
-		 * Defines if the <code>ui5-switch</code> is checked.
-		 * <br><br>
-		 * <b>Note:</b> The property can be changed with user interaction,
-		 * either by cliking/tapping on the <code>ui5-switch</code>, or by
-		 * pressing the <code>Enter</code> or <code>Space</code> key.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		checked: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-switch</code> is disabled.
-		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-switch</code> is noninteractive.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the text of the <code>ui5-switch</code> when switched on.
-		 *
-		 * <br><br>
-		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		textOn: {
-			type: String,
-		},
-
-		/**
-		 * Defines the text of the <code>ui5-switch</code> when switched off.
-		 * <br><br>
-		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		textOff: {
-			type: String,
-		},
-
-		/**
-		 * Defines the <code>ui5-switch</code> type.
-		 * <br><br>
-		 * <b>Note:</b> If <code>graphical</code> type is set,
-		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		graphical: {
-			type: Boolean,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
-
-		/**
-		 * Fired when the <code>ui5-switch</code> checked state changes.
-		 *
-		 * @public
-		 * @event
-		 */
-		change: {},
-	},
-};
-
 /**
  * @class
  *
@@ -114,131 +32,156 @@ const metadata = {
  * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> 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 (&lt;ui5-switch style="width: 200px">), and set widths, depending on the texts they would use.
+ * 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>
  * Note: the component would not automatically stretch to fit the whole text width.
  *
  * <h3>Keyboard Handling</h3>
  * The state can be changed by pressing the Space and Enter keys.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-switch</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>slider - Used to style the track, where the handle is being slid</li>
+ * <li>text-on - Used to style the <code>textOn</code> property text</li>
+ * <li>text-off - Used to style the <code>textOff</code> property text</li>
+ * <li>handle - Used to style the handle of the switch</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Switch";</code>
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Switch
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Switch
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-switch
  * @public
  * @since 0.8.0
  */
-class Switch extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return switchCss;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return SwitchTemplate;
-	}
-
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	_onclick(event) {
-		this.toggle();
-	}
-
-	_onkeydown(event) {
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if (isEnter(event)) {
-			this.toggle();
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this.toggle();
-		}
-	}
-
-	toggle() {
-		if (!this.disabled) {
-			this.checked = !this.checked;
-			this.fireEvent("change");
-			// Angular two way data binding;
-			this.fireEvent("value-changed");
-		}
-	}
-
-	get _textOn() {
-		return this.graphical ? "" : this.textOn;
-	}
-
-	get _textOff() {
-		return this.graphical ? "" : this.textOff;
-	}
-
-	get tabIndex() {
-		return this.disabled ? undefined : "0";
-	}
-
-	get classes() {
-		const hasLabel = this.graphical || this.textOn || this.textOff;
-
-		return {
-			main: {
-				"ui5-switch-desktop": isDesktop(),
-				"ui5-switch--disabled": this.disabled,
-				"ui5-switch--checked": this.checked,
-				"ui5-switch--semantic": this.graphical,
-				"ui5-switch--no-label": !hasLabel,
-			},
-		};
-	}
-
-	get ariaDisabled() {
-		return this.disabled ? "true" : undefined;
-	}
-
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
-	}
-
-	get accessibilityOnText() {
-		return this._textOn || this.i18nBundle.getText(SWITCH_ON);
-	}
-
-	get accessibilityOffText() {
-		return this._textOff || this.i18nBundle.getText(SWITCH_OFF);
-	}
-
-	get hiddenText() {
-		return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
-	}
-
-	static async onDefine() {
-		await Promise.all([
-			Icon.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
-	}
-}
-
+let Switch = Switch_1 = class Switch extends UI5Element {
+    get sapNextIcon() {
+        return this.checked ? "accept" : "less";
+    }
+    _onclick() {
+        this.toggle();
+    }
+    _onkeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._onclick();
+        }
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._onclick();
+        }
+    }
+    toggle() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            const changePrevented = !this.fireEvent("change", null, true);
+            // Angular two way data binding;
+            const valueChagnePrevented = !this.fireEvent("value-changed", null, true);
+            if (changePrevented || valueChagnePrevented) {
+                this.checked = !this.checked;
+            }
+        }
+    }
+    get graphical() {
+        return this.design === SwitchDesign.Graphical;
+    }
+    get hasNoLabel() {
+        return !(this.graphical || this.textOn || this.textOff);
+    }
+    get _textOn() {
+        return this.graphical ? "" : this.textOn;
+    }
+    get _textOff() {
+        return this.graphical ? "" : this.textOff;
+    }
+    get effectiveTabIndex() {
+        return this.disabled ? undefined : "0";
+    }
+    get classes() {
+        const hasLabel = this.graphical || this.textOn || this.textOff;
+        return {
+            main: {
+                "ui5-switch-desktop": isDesktop(),
+                "ui5-switch--disabled": this.disabled,
+                "ui5-switch--checked": this.checked,
+                "ui5-switch--semantic": this.graphical,
+                "ui5-switch--no-label": !hasLabel,
+            },
+        };
+    }
+    get effectiveAriaDisabled() {
+        return this.disabled ? "true" : undefined;
+    }
+    get accessibilityOnText() {
+        return this._textOn;
+    }
+    get accessibilityOffText() {
+        return this._textOff;
+    }
+    get hiddenText() {
+        return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
+    }
+    get ariaLabelText() {
+        return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
+    }
+    static async onDefine() {
+        Switch_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+};
+__decorate([
+    property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })
+], Switch.prototype, "design", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Switch.prototype, "textOn", void 0);
+__decorate([
+    property()
+], Switch.prototype, "textOff", void 0);
+__decorate([
+    property()
+], Switch.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], Switch.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], Switch.prototype, "tooltip", void 0);
+Switch = Switch_1 = __decorate([
+    customElement({
+        tag: "ui5-switch",
+        languageAware: true,
+        styles: switchCss,
+        renderer: litRender,
+        template: SwitchTemplate,
+        dependencies: [Icon],
+    })
+    /**
+     * Fired when the component checked state changes.
+     *
+     * @public
+     * @event sap.ui.webc.main.Switch#change
+     */
+    ,
+    event("change")
+], Switch);
 Switch.define();
-
 export default Switch;
+//# sourceMappingURL=Switch.js.map

package/dist/Switch.js.map

@@ -0,0 +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 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 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 *\n * <h3>CSS Shadow Parts</h3>\n *\n * <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-switch</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>slider - Used to style the track, where the handle is being slid</li>\n * <li>text-on - Used to style the <code>textOn</code> property text</li>\n * <li>text-off - Used to style the <code>textOff</code> property text</li>\n * <li>handle - Used to style the handle of the switch</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Switch\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Switch\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-switch\n * @public\n * @since 0.8.0\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 * @event sap.ui.webc.main.Switch#change\n */\n@event(\"change\")\nclass Switch extends UI5Element {\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 * @type {sap.ui.webc.main.types.SwitchDesign}\n\t * @name sap.ui.webc.main.Switch.prototype.design\n\t * @defaultValue \"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 * @type {boolean}\n\t * @name sap.ui.webc.main.Switch.prototype.checked\n\t * @defaultvalue 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 * @type {boolean}\n\t * @name sap.ui.webc.main.Switch.prototype.disabled\n\t * @defaultvalue 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 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.textOn\n\t * @defaultvalue \"\"\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 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.\n\t * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.textOff\n\t * @defaultvalue \"\"\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 * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.accessibleName\n\t * @defaultvalue: \"\"\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 * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\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 * @type {string}\n\t * @name sap.ui.webc.main.Switch.prototype.tooltip\n\t * @defaultvalue: \"\"\n\t * @public\n\t * @since 1.9.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\tstatic i18nBundle: I18nBundle;\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 valueChagnePrevented = !this.fireEvent(\"value-changed\", null, true);\n\n\t\t\tif (changePrevented || valueChagnePrevented) {\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"]}

package/dist/Tab.d.ts

@@ -0,0 +1,171 @@
+import UI5Element 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 "@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 "./TabContainer.js";
+import TabInStripTemplate from "./generated/templates/TabInStripTemplate.lit.js";
+import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+/**
+ * @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
+ * content that is presented to the user once the tab is selected.
+ *
+ * @abstract
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Tab
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-tab
+ * @implements sap.ui.webc.main.ITab
+ * @public
+ */
+declare class Tab extends UI5Element implements ITab, ITabbable {
+    /**
+     * The text to be displayed for the item.
+     * @type {string}
+     * @defaultvalue ""
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.text
+     */
+    text: string;
+    /**
+     * Disabled tabs can't be selected.
+     * @type {boolean}
+     * @defaultvalue false
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.disabled
+     */
+    disabled: boolean;
+    /**
+     * Represents the "additionalText" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the "additionalText" is displayed larger.
+     * @type {string}
+     * @defaultvalue ""
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.additionalText
+     */
+    additionalText: string;
+    /**
+     * 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>.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.icon
+     */
+    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>.
+     *
+     * <br><br>
+     * <b>Note:</b> The design depends on the current theme.
+     * @type {sap.ui.webc.main.types.SemanticColor}
+     * @defaultvalue "Default"
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.design
+     */
+    design: `${SemanticColor}`;
+    /**
+     * Specifies if the component is selected.
+     *
+     * @type {boolean}
+     * @defaultvalue false
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.selected
+     */
+    selected: boolean;
+    _selected: boolean;
+    _realTab: Tab;
+    _isTopLevelTab: boolean;
+    /**
+     * Holds the content associated with this tab.
+     *
+     * @type {Node[]}
+     * @public
+     * @slot
+     * @name sap.ui.webc.main.Tab.prototype.default
+     */
+    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.
+     *
+     * @type {sap.ui.webc.main.ITab[]}
+     * @public
+     * @slot subTabs
+     * @name sap.ui.webc.main.Tab.prototype.subTabs
+     */
+    subTabs: Array<ITab>;
+    _isInline?: boolean;
+    _mixedMode?: boolean;
+    _getElementInStrip?: () => ITab | null;
+    _individualSlot: string;
+    static i18nBundle: I18nBundle;
+    set _tabIndex(val: string);
+    get _tabIndex(): string;
+    get displayText(): string;
+    get isSeparator(): boolean;
+    get stripPresentation(): object;
+    get overflowPresentation(): object;
+    get stableDomRef(): string;
+    get requiresExpandButton(): boolean;
+    get isSingleClickArea(): boolean;
+    get isOnSelectedTabPath(): boolean;
+    get _effectiveSlotName(): string;
+    get _defaultSlotName(): "" | "disabled-slot";
+    get _hasOwnContent(): boolean;
+    /**
+     * 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.
+     *
+     * @function
+     * @public
+     * @name sap.ui.webc.main.Tab.prototype.getTabInStripDomRef
+     * @since 1.0.0-rc.16
+     */
+    getTabInStripDomRef(): ITab | null;
+    getFocusDomRef(): HTMLElement | undefined;
+    get isMixedModeTab(): boolean | undefined;
+    get isTextOnlyTab(): boolean;
+    get isIconTab(): boolean;
+    get effectiveDisabled(): true | undefined;
+    get effectiveSelected(): boolean;
+    get effectiveHidden(): boolean;
+    get tabs(): Array<Tab>;
+    get ariaLabelledBy(): string;
+    get stripClasses(): {
+        itemClasses: string;
+        additionalTextClasses: string;
+    };
+    get additionalTextClasses(): string;
+    get expandButtonTitle(): string;
+    get _roleDescription(): string | undefined;
+    get _ariaHasPopup(): "menu" | undefined;
+    get semanticIconName(): "error" | "alert" | "sys-enter-2" | null;
+    get _designDescription(): string | null;
+    get semanticIconClasses(): string;
+    get overflowClasses(): string;
+    get overflowState(): ListItemType.Inactive | ListItemType.Active;
+    static get stripTemplate(): typeof TabInStripTemplate;
+    static get overflowTemplate(): typeof TabInOverflowTemplate;
+    static onDefine(): Promise<void>;
+}
+export default Tab;