@momentum-design/components 0.22.1 → 0.22.3

package/dist/components/avatar/avatar.component.d.ts

@@ -1,7 +1,7 @@
-import { CSSResult } from 'lit';
 import type { PropertyValues, TemplateResult } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Component;
+declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * The `mdc-avatar` component is used to represent a person or a space.
  * An avatar can be an icon, initials, counter and photo.

package/dist/components/avatar/avatar.component.js

@@ -12,6 +12,7 @@ import { state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { AVATAR_TYPE, DEFAULTS, MAX_COUNTER } from './avatar.constants';
 import styles from './avatar.styles';
 import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './avatar.utils';
@@ -50,7 +51,7 @@ import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './ava
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
  */
-class Avatar extends AvatarComponentMixin(Component) {
+class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     constructor() {
         super(...arguments);
         /**

package/dist/components/avatarbutton/avatarbutton.component.d.ts

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-declare const AvatarButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & typeof Buttonsimple;
+declare const AvatarButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AvatarComponentMixin").AvatarComponentMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
  *
@@ -17,7 +18,7 @@ declare class AvatarButton extends AvatarButton_base {
    */
     ariaLabel: string | null;
     constructor();
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     private setSize;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -11,6 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { AvatarComponentMixin } from '../../utils/mixins/AvatarComponentMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { AVATAR_SIZE, DEFAULTS } from '../avatar/avatar.constants';
 import { DEFAULTS as BUTTON_DEFAULTS } from '../button/button.constants';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
@@ -25,7 +26,7 @@ import styles from './avatarbutton.styles';
  *
  * @tagname mdc-avatarbutton
  */
-class AvatarButton extends AvatarComponentMixin(Buttonsimple) {
+class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
         super();
         /**

package/dist/components/badge/badge.component.d.ts

@@ -1,7 +1,8 @@
-import { CSSResult, PropertyValues, TemplateResult } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import type { IconNames } from '../icon/icon.types';
-import type { IconVariant, BadgeType } from './badge.types';
+import type { BadgeType, IconVariant } from './badge.types';
+declare const Badge_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * The `mdc-badge` component is a versatile UI element used to
  * display dot, icons, counters, success, warning and error type badge.
@@ -36,18 +37,12 @@ import type { IconVariant, BadgeType } from './badge.types';
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
-declare class Badge extends Component {
+declare class Badge extends Badge_base {
     /**
      * Type of the badge
      * Can be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.
      */
     type?: BadgeType;
-    /**
-     * Name of the icon (= filename).
-     *
-     * If no `icon-name` is provided, no icon will be rendered.
-     */
-    iconName?: IconNames;
     /**
      * Type of the variant can be `primary` or `secondary`.
      * It defines the background and foreground color of the icon.

package/dist/components/badge/badge.component.js

@@ -12,8 +12,9 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { TYPE as BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
+import { DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
 import styles from './badge.styles';
 /**
  * The `mdc-badge` component is a versatile UI element used to
@@ -49,7 +50,7 @@ import styles from './badge.styles';
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
  */
-class Badge extends Component {
+class Badge extends IconNameMixin(Component) {
     constructor() {
         super(...arguments);
         /**
@@ -196,10 +197,6 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Badge.prototype, "type", void 0);
-__decorate([
-    property({ type: String, attribute: 'icon-name' }),
-    __metadata("design:type", String)
-], Badge.prototype, "iconName", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

package/dist/components/button/button.component.d.ts

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
-import type { ButtonColor, ButtonVariant, PillButtonSize, IconButtonSize } from './button.types';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './button.types';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -85,7 +86,7 @@ declare class Button extends Buttonsimple {
      * @internal
      */
     private prevPostfixIcon?;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     /**
      * Modifies the icon name based on the active state.
      * If the button is active, the icon name is suffixed with '-filled'.

package/dist/components/button/button.component.js

@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import styles from './button.styles';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
+import styles from './button.styles';
 import { getIconNameWithoutStyle, getIconSize } from './button.utils';
-import Buttonsimple from '../buttonsimple/buttonsimple.component';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *

package/dist/components/buttonsimple/buttonsimple.component.d.ts

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import { ButtonSize, ButtonType } from './buttonsimple.types';
+import type { ButtonSize, ButtonType } from './buttonsimple.types';
 declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
@@ -8,7 +9,6 @@ declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constr
  * Consumers should use the `mdc-button` component instead.
  *
  * @tagname mdc-buttonsimple
- *
  */
 declare class Buttonsimple extends Buttonsimple_base {
     /**
@@ -62,15 +62,14 @@ declare class Buttonsimple extends Buttonsimple_base {
     /** @internal */
     get form(): HTMLFormElement | null;
     constructor();
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    private executeAction;
+    update(changedProperties: PropertyValues): void;
+    protected executeAction(): void;
     /**
-     * Sets the aria-pressed attribute based on the active state.
-     *
-     * @param element - The target element.
-     * @param active - The active state.
+     * Sets the aria-pressed attribute based on the active state of the button.
+     * @param element - The button element
+     * @param active - The active state of the element
      */
-    private setAriaPressed;
+    protected setActive(element: HTMLElement, active: boolean): void;
     /**
      * Sets the soft-disabled attribute for the button.
      * When soft-disabled, the button looks to be disabled but remains focusable and clickable.

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -9,18 +9,17 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './buttonsimple.styles';
 import { Component } from '../../models';
-import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
+import styles from './buttonsimple.styles';
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
  * @tagname mdc-buttonsimple
- *
  */
 class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
     /** @internal */
@@ -88,7 +87,7 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             this.setSoftDisabled(this, this.softDisabled);
         }
         if (changedProperties.has('active')) {
-            this.setAriaPressed(this, this.active);
+            this.setActive(this, this.active);
         }
     }
     executeAction() {
@@ -100,12 +99,11 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         }
     }
     /**
-     * Sets the aria-pressed attribute based on the active state.
-     *
-     * @param element - The target element.
-     * @param active - The active state.
+     * Sets the aria-pressed attribute based on the active state of the button.
+     * @param element - The button element
+     * @param active - The active state of the element
      */
-    setAriaPressed(element, active) {
+    setActive(element, active) {
         if (active) {
             element.setAttribute('aria-pressed', 'true');
         }
@@ -145,7 +143,9 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             this.tabIndex = -1;
         }
         else {
-            this.tabIndex = this.prevTabindex;
+            if (this.tabIndex === -1) {
+                this.tabIndex = this.prevTabindex;
+            }
             element.removeAttribute('aria-disabled');
         }
     }
@@ -156,7 +156,6 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             view: window,
         });
         this.dispatchEvent(clickEvent);
-        this.executeAction();
     }
     /**
      * Handles the keydown event on the button.
@@ -198,7 +197,7 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
 Buttonsimple.formAssociated = true;
 Buttonsimple.styles = [...Component.styles, ...styles];
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Buttonsimple.prototype, "active", void 0);
 __decorate([

package/dist/components/divider/divider.component.d.ts

@@ -1,6 +1,7 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import { Directions, DividerOrientation, DividerVariant } from './divider.types';
+import type { Directions, DividerOrientation, DividerVariant } from './divider.types';
 /**
  * `mdc-divider` is a component that provides a line to separate and organize content.
  * It can also include a button or text positioned centrally, allowing users to interact with the layout.
@@ -116,7 +117,7 @@ declare class Divider extends Component {
      * @returns The icon that represents the arrow direction.
      */
     private getArrowIcon;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     /**
      * Infers the type of divider based on the kind of slot present.
      * @param slot - default slot of divider

package/dist/components/divider/divider.component.js

@@ -9,9 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './divider.styles';
 import { Component } from '../../models';
 import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
+import styles from './divider.styles';
 /**
  * `mdc-divider` is a component that provides a line to separate and organize content.
  * It can also include a button or text positioned centrally, allowing users to interact with the layout.

package/dist/components/formfieldwrapper/formfieldwrapper.types.d.ts

@@ -1,4 +1,6 @@
 import type { ValueOf } from '../../utils/types';
+import type { IconNames } from '../icon/icon.types';
 import { VALIDATION } from './formfieldwrapper.constants';
 type ValidationType = ValueOf<typeof VALIDATION>;
-export { ValidationType };
+type HelperIconsList = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'priority-badge-filled'> | '';
+export { HelperIconsList, ValidationType };

package/dist/components/formfieldwrapper/formfieldwrapper.utils.d.ts

@@ -1,4 +1,3 @@
-import type { IconNames } from '../icon/icon.types';
-import type { ValidationType } from './formfieldwrapper.types';
-declare const getHelperIcon: (type: ValidationType) => IconNames | '';
+import type { HelperIconsList, ValidationType } from './formfieldwrapper.types';
+declare const getHelperIcon: (type: ValidationType) => HelperIconsList | '';
 export { getHelperIcon };

package/dist/components/link/link.component.d.ts

@@ -1,8 +1,8 @@
-import { CSSResult, PropertyValueMap } from 'lit';
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import { LinkSize } from './link.types';
-import { IconNames } from '../icon/icon.types';
-declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+import type { LinkSize } from './link.types';
+declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
@@ -30,12 +30,6 @@ declare const Link_base: import("../../utils/mixins/index.types").Constructor<im
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
 declare class Link extends Link_base {
-    /**
-     * Name of the icon (= filename) to be used as trailing icon for link.
-     *
-     * If no `icon` is provided, no icon will be rendered.
-     */
-    iconName?: IconNames;
     /**
      * The link can be inline or standalone.
      * @default false
@@ -83,7 +77,7 @@ declare class Link extends Link_base {
      * If no icon name is provided, no icon will be rendered.
      */
     private updateTrailingIcon;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/link/link.component.js

@@ -10,9 +10,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
 import styles from './link.styles';
-import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
@@ -39,7 +40,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
  * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
-class Link extends DisabledMixin(Component) {
+class Link extends DisabledMixin(IconNameMixin(Component)) {
     constructor() {
         super(...arguments);
         /**
@@ -135,10 +136,6 @@ class Link extends DisabledMixin(Component) {
     }
 }
 Link.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: String, attribute: 'icon-name' }),
-    __metadata("design:type", String)
-], Link.prototype, "iconName", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)

package/dist/components/tab/index.d.ts

@@ -0,0 +1,9 @@
+import Tab from './tab.component';
+import '../icon';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-tab']: Tab;
+    }
+}
+export default Tab;

package/dist/components/tab/index.js

@@ -0,0 +1,6 @@
+import Tab from './tab.component';
+import { TAG_NAME } from './tab.constants';
+import '../icon';
+import '../text';
+Tab.register(TAG_NAME);
+export default Tab;

package/dist/components/tab/tab.component.d.ts

@@ -0,0 +1,128 @@
+import { CSSResult } from 'lit';
+import { Variant } from './tab.types';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+declare const Tab_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
+/**
+ * `mdc-tab` is Tab component to be used within the Tabgroup.
+ *
+ * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
+ *
+ * The `slot="badge"` can be used to add a badge to the tab.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-tab
+ *
+ * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
+ * @cssproperty --mdc-tab-height - Height of the tab.
+ * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
+ * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
+ * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
+ * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
+ * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
+ *  in hover state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
+ * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
+ * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
+ * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
+ * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
+ * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
+ * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
+ * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
+ *  in disabled state
+ * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
+ * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
+ *  in rest state.
+ * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
+ * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
+ * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
+ * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
+ * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
+ * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
+ * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
+ * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
+ *  in pressed state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
+ *  in disabled state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
+ * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
+ * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
+ * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
+ */
+declare class Tab extends Tab_base {
+    /**
+     * Text to be displayed in the tab.
+     * If no `text` is provided, no text will be rendered,
+     * `aria-label` should be set on the tab.
+     */
+    text?: string;
+    /**
+     * Tab can have two variants:
+     * - `glass`
+     * - `line`
+     * - `pill`
+     *
+     * It defines the background and foreground color of the tab.
+     * @default pill
+     */
+    variant: Variant;
+    /**
+     * @internal
+     */
+    private prevIconName?;
+    constructor();
+    /**
+     * Modifies the icon name based on the active state.
+     * If the tab is active, the icon name is suffixed with '-filled'.
+     * If the tab is inactive, the icon name is restored to its original value.
+     * If '-filled' icon is not available, the icon name remains unchanged.
+     *
+     * @param active - The active state.
+     */
+    private modifyIconName;
+    /**
+     * Sets the aria-selected attribute based on the active state of the Tab.
+     * If the tab is active, the filled version of the icon is displayed,
+     * else the icon is restored to its original value.
+     *
+     * @param element - The tab element.
+     * @param active - The active state of the tab.
+     */
+    protected setActive(element: HTMLElement, active: boolean): void;
+    protected executeAction(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Tab;