@ui5/webcomponents 0.0.0-d9933bd82 → 0.0.0-da0d3eb88

package/dist/Switch.js

@@ -1,244 +1,195 @@
+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 { 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 Icon from "./Icon.js";
-
-import {
-	SWITCH_ON,
-	SWITCH_OFF,
-} from "./generated/i18n/i18n-defaults.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
 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
  *
- * <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 (&lt;ui5-switch style="width: 200px">), 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.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Switch";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Switch
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-switch
+ * @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 `textOn` property text
+ * @csspart text-off - Used to style the `textOff` property text
+ * @csspart handle - Used to style the handle of the switch
  */
-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 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";
+    }
+    _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 valueChangePrevented = !this.fireEvent("value-changed", null, true);
+            if (changePrevented || valueChangePrevented) {
+                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,
+                "ui5-switch--safari": isSafari(),
+            },
+        };
+    }
+    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);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "required", void 0);
+__decorate([
+    property()
+], Switch.prototype, "name", void 0);
+Switch = Switch_1 = __decorate([
+    customElement({
+        tag: "ui5-switch",
+        formAssociated: true,
+        languageAware: true,
+        styles: switchCss,
+        renderer: litRender,
+        template: SwitchTemplate,
+        dependencies: [Icon],
+    })
+    /**
+     * Fired when the component checked state changes.
+     * @public
+     * @allowPreventDefault
+     */
+    ,
+    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 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

@@ -0,0 +1,167 @@
+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 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 { 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 `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 ITabbable, ITab {
+    /**
+     * The text to be displayed for the item.
+     * @default ""
+     * @public
+     */
+    text: string;
+    /**
+     * Disabled tabs can't be selected.
+     * @default false
+     * @public
+     */
+    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.
+     * @default ""
+     * @public
+     */
+    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 [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.
+     *
+     * The design is applied to:
+     *
+     * - the component icon
+     * - the `text` when the component overflows
+     * - the tab selection line
+     *
+     * Available designs are: `"Default"`, `"Neutral"`, `"Positive"`, `"Critical"` and `"Negative"`.
+     *
+     * **Note:** The design depends on the current theme.
+     * @default "Default"
+     * @public
+     */
+    design: `${SemanticColor}`;
+    /**
+     * Specifies if the component is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * 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.
+     *
+     * **Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.
+     * @public
+     */
+    items: Array<ITab>;
+    _isInline?: boolean;
+    _forcedMixedMode?: boolean;
+    _getElementInStrip?: () => HTMLElement | undefined;
+    _getElementInOverflow?: () => HTMLElement | undefined;
+    _individualSlot: string;
+    _forcedPosinset?: number;
+    _forcedSetsize?: number;
+    _forcedStyleInOverflow?: Record<string, any>;
+    static i18nBundle: I18nBundle;
+    set forcedTabIndex(val: string);
+    get forcedTabIndex(): string;
+    get displayText(): string;
+    get isSeparator(): boolean;
+    get stripPresentation(): object;
+    get overflowPresentation(): object;
+    get stableDomRef(): string;
+    get requiresExpandButton(): boolean;
+    get isSingleClickArea(): boolean;
+    get isTwoClickArea(): boolean;
+    get isOnSelectedTabPath(): boolean;
+    get _effectiveSlotName(): string;
+    get _defaultSlotName(): "" | "disabled-slot";
+    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.
+     *
+     * **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
+     */
+    getDomRefInStrip(): HTMLElement | undefined;
+    getFocusDomRef(): HTMLElement | undefined;
+    focus(focusOptions?: FocusOptions): Promise<void>;
+    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>;
+    _ondragstart(e: DragEvent): void;
+    _ondragend(e: DragEvent): void;
+}
+export default Tab;
+export type { TabInStrip, TabInOverflow, };