@fluid-topics/ft-tabs 1.3.44 → 1.3.46

package/build/ft-base-tabs.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValues, TemplateResult } from "lit";
+import { ClassInfo } from "lit/directives/class-map.js";
 import { ElementDefinitionsMap, FtLitElement, Optional } from "@fluid-topics/ft-wc-utils";
 import { FtTab } from "./ft-tab";
-import { ClassInfo } from "lit/directives/class-map.js";
 export declare enum FtTabsAlignment {
     left = "left",
     right = "right",
@@ -26,6 +26,7 @@ export declare abstract class FtBaseTabs extends FtLitElement implements FtBaseT
     horizontal: boolean;
     activeIndex?: number;
     abstract get tabsClasses(): ClassInfo;
+    get typographyVariant(): string;
     protected render(): TemplateResult<1>;
     private updateDebouncer;
     private onTabUpdated;

package/build/ft-base-tabs.js

@@ -11,7 +11,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { Debouncer, FtLitElement, numberProperty, PostResizeEvent, PreResizeEvent } from "@fluid-topics/ft-wc-utils";
 import { FtTab } from "./ft-tab";
 import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
-import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 export var FtTabsAlignment;
@@ -41,6 +40,9 @@ class FtBaseTabs extends FtLitElement {
         });
         this.resizeObserver = new ResizeObserver(() => this.placeIndicator());
     }
+    get typographyVariant() {
+        return "";
+    }
     render() {
         var _a, _b;
         const activeTabColor = (_b = this.ftTabs[(_a = this.activeIndex) !== null && _a !== void 0 ? _a : 0]) === null || _b === void 0 ? void 0 : _b.color;
@@ -73,11 +75,11 @@ class FtBaseTabs extends FtLitElement {
                                          .variant=${tab.iconVariant}>
                                     ${tab.icon}
                                 </ft-icon>
-                                <ft-typography class="ft-tabs--tab-label"
-                                               part="tab-label${tab.active ? " active-tab-label" : ""}"
-                                               variant="${FtTypographyVariants.body2}">
+                                <ft-or-ftds-typography class="ft-tabs--tab-label"
+                                                       part="tab-label${tab.active ? " active-tab-label" : ""}"
+                                                       variant="${this.typographyVariant}">
                                     ${tab.label}
-                                </ft-typography>
+                                </ft-or-ftds-typography>
                             </button>
                         `))}
                     <div class="ft-tabs--active-tab-indicator"
@@ -164,7 +166,6 @@ FtBaseTabs.elementDefinitions = {
     "ft-tab": FtTab,
     "ft-ripple": FtRipple,
     "ft-tooltip": FtTooltip,
-    "ft-typography": FtTypography,
     "ft-icon": FtIcon,
 };
 __decorate([

package/build/ft-tabs.d.ts

@@ -1,5 +1,6 @@
 import { ClassInfo } from "lit/directives/class-map.js";
 import { FtBaseTabs, FtBaseTabsProperties } from "./ft-base-tabs";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtTab } from "./ft-tab";
 import { TemplateResult } from "lit";
 export interface FtTabsProperties extends FtBaseTabsProperties {
@@ -8,11 +9,13 @@ export interface FtTabsProperties extends FtBaseTabsProperties {
     contentBefore: boolean;
 }
 export declare class FtTabs extends FtBaseTabs implements FtTabsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
     dense: boolean;
     collapsible: boolean;
     contentBefore: boolean;
     static styles: import("lit").CSSResult[];
     get tabsClasses(): ClassInfo;
+    get typographyVariant(): string;
     protected placeActiveTabIndicator(activeTabIndicator?: HTMLDivElement, activeTab?: HTMLButtonElement): void;
     protected toggleTab(index: number): void;
     protected addTooltipIfNecessary(tab: FtTab, button: TemplateResult): TemplateResult;

package/build/ft-tabs.js

@@ -9,6 +9,7 @@ import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-tabs.styles";
 import { property } from "lit/decorators.js";
 import { html } from "lit";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 class FtTabs extends FtBaseTabs {
     constructor() {
         super(...arguments);
@@ -23,9 +24,12 @@ class FtTabs extends FtBaseTabs {
             "ft-tabs--horizontal": this.horizontal,
             "ft-tabs--reverse": this.contentBefore,
             "ft-tabs--dense": this.dense,
-            ["ft-tabs--align-" + this.alignTabs]: true
+            ["ft-tabs--align-" + this.alignTabs]: true,
         };
     }
+    get typographyVariant() {
+        return FtTypographyVariants.body2;
+    }
     placeActiveTabIndicator(activeTabIndicator, activeTab) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (activeTabIndicator) {
@@ -67,7 +71,7 @@ class FtTabs extends FtBaseTabs {
     }
     addTooltipIfNecessary(tab, button) {
         if (tab.label && tab.icon && (this.dense || this.horizontal)) {
-            let tooltipPosition = this.horizontal
+            const tooltipPosition = this.horizontal
                 ? this.contentBefore ? "left" : "right"
                 : this.contentBefore ? "top" : "bottom";
             return html `
@@ -82,9 +86,13 @@ class FtTabs extends FtBaseTabs {
         return button;
     }
 }
+FtTabs.elementDefinitions = {
+    ...FtBaseTabs.elementDefinitions,
+    "ft-or-ftds-typography": FtTypography,
+};
 FtTabs.styles = [
     safariEllipsisFix,
-    styles
+    styles,
 ];
 __decorate([
     property({ type: Boolean })