@fluid-topics/ft-tabs 1.1.42 → 1.1.43

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

@@ -1,11 +1,15 @@
 export declare enum FtTabsAlignment {
     left = "left",
     right = "right",
+    start = "start",
+    end = "end",
     justify = "justify"
 }
 export interface FtTabsProperties {
     dense: boolean;
+    collapsible: boolean;
+    horizontal: boolean;
     contentBefore: boolean;
-    activeIndex: number;
+    activeIndex?: number;
     alignTabs: FtTabsAlignment;
 }

package/build/ft-tabs.properties.js

@@ -2,5 +2,7 @@ export var FtTabsAlignment;
 (function (FtTabsAlignment) {
     FtTabsAlignment["left"] = "left";
     FtTabsAlignment["right"] = "right";
+    FtTabsAlignment["start"] = "start";
+    FtTabsAlignment["end"] = "end";
     FtTabsAlignment["justify"] = "justify";
 })(FtTabsAlignment || (FtTabsAlignment = {}));

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

@@ -1,4 +1,7 @@
 export declare const FtTabsCssVariables: {
+    buttonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    denseButtonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    widthWhenHorizontalAndOpen: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;

package/build/ft-tabs.styles.js

@@ -1,6 +1,9 @@
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
 export const FtTabsCssVariables = {
+    buttonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-button-width", "Width of the tab buttons (N/A for vertical justified tabs)", "SIZE", "100px"),
+    denseButtonsWidth: FtCssVariableFactory.create("--ft-tabs-dense-horizontal-button-width", "Width of the tab buttons when dense (N/A for vertical justified tabs)", "SIZE", "56px"),
+    widthWhenHorizontalAndOpen: FtCssVariableFactory.create("--ft-tabs-width-when-horizontal-and-open", "Width of the component when set to horizontal and open", "SIZE", "100%"),
     colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
     colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
     colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
@@ -15,10 +18,34 @@ export const styles = css `
         height: 100%;
     }
 
+    .ft-tabs--horizontal {
+        -webkit-transition: width 200ms ease-in-out;
+        -moz-transition: width 200ms ease-in-out;
+        -o-transition: width 200ms ease-in-out;
+        transition: width 200ms ease-in-out;
+        width: ${FtTabsCssVariables.widthWhenHorizontalAndOpen};
+    }
+
+    .ft-tabs--horizontal.ft-tabs--collapsed {
+        width: ${FtTabsCssVariables.buttonsWidth};
+    }
+
+    .ft-tabs--horizontal.ft-tabs--dense.ft-tabs--collapsed {
+        width: ${FtTabsCssVariables.denseButtonsWidth};
+    }
+
+    .ft-tabs--horizontal {
+        flex-direction: row;
+    }
+
     .ft-tabs--reverse {
         flex-direction: column-reverse;
     }
 
+    .ft-tabs--horizontal.ft-tabs--reverse {
+        flex-direction: row-reverse;
+    }
+
     [role="tablist"] {
         flex-shrink: 0;
         flex-grow: 0;
@@ -27,11 +54,16 @@ export const styles = css `
         flex-wrap: wrap;
     }
 
-    .ft-tabs--align-right {
+    .ft-tabs--horizontal [role="tablist"] {
+        flex-direction: column;
+    }
+
+    .ft-tabs--align-end [role="tablist"],
+    .ft-tabs--align-right [role="tablist"] {
         justify-content: flex-end;
     }
 
-    .ft-tabs--align-justify {
+    .ft-tabs--align-justify [role="tablist"] {
         justify-content: space-evenly;
     }
 
@@ -52,6 +84,15 @@ export const styles = css `
         font-size: 16px;
         line-height: 1;
         color: ${FtTabsCssVariables.colorOnSurfaceMedium};
+        width: ${FtTabsCssVariables.buttonsWidth};
+    }
+
+    .ft-tabs--dense [role='tab'] {
+        width: ${FtTabsCssVariables.denseButtonsWidth};
+    }
+
+    .ft-tabs--align-justify:not(.ft-tabs--horizontal) [role='tab'] {
+        width: unset;
     }
 
     [role='tab'][aria-selected='true'] {
@@ -63,14 +104,12 @@ export const styles = css `
     }
 
     .ft-tabs--align-justify [role='tab'],
-    .ft-tabs--align-justify .ft-tabs--tab-tooltip {
+    .ft-tabs--align-justify .ft-tabs--tab-tooltip,
+    .ft-tabs--align-justify .ft-tabs--tab-tooltip::part(container) {
+        display: flex;
         flex-grow: 1;
     }
 
-    .ft-tabs--align-justify .ft-tabs--tab-tooltip [role='tab'] {
-        width: 100%;
-    }
-
     [role='tab'] .ft-tabs--tab-label {
         width: 100%;
         white-space: nowrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-tabs",
-  "version": "1.1.42",
+  "version": "1.1.43",
   "description": "Generic tabs component",
   "keywords": [
     "Lit"
@@ -19,12 +19,12 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.1.42",
-    "@fluid-topics/ft-ripple": "1.1.42",
-    "@fluid-topics/ft-tooltip": "1.1.42",
-    "@fluid-topics/ft-typography": "1.1.42",
-    "@fluid-topics/ft-wc-utils": "1.1.42",
+    "@fluid-topics/ft-icon": "1.1.43",
+    "@fluid-topics/ft-ripple": "1.1.43",
+    "@fluid-topics/ft-tooltip": "1.1.43",
+    "@fluid-topics/ft-typography": "1.1.43",
+    "@fluid-topics/ft-wc-utils": "1.1.43",
     "lit": "3.1.0"
   },
-  "gitHead": "057e1248874a9a814a34e0bf75329f963744a5ff"
+  "gitHead": "c6f6bcb506f87c05a46c67d364abc285eec41894"
 }