@fluid-topics/ft-tabs 1.1.79 → 1.1.81

package/build/ftds-tabs.d.ts

@@ -1,10 +1,16 @@
-import { FtBaseTabs } from "./ft-base-tabs";
+import { FtBaseTabs, FtBaseTabsProperties } from "./ft-base-tabs";
 import { ClassInfo } from "lit/directives/class-map.js";
-export interface FtdsTabsProperties {
-    sideIcon?: boolean;
+export declare enum FtDsTabsStructure {
+    topIcon = "top-icon",
+    sideIcon = "side-icon",
+    labelOnly = "label-only",
+    iconOnly = "icon-only"
+}
+export interface FtdsTabsProperties extends FtBaseTabsProperties {
+    structure?: FtDsTabsStructure;
 }
 export declare class FtdsTabs extends FtBaseTabs implements FtdsTabsProperties {
-    sideIcon: boolean;
+    structure: FtDsTabsStructure;
     static styles: import("lit").CSSResult[];
     get tabsClasses(): ClassInfo;
 }

package/build/ftds-tabs.js

@@ -8,20 +8,25 @@ import { FtBaseTabs } from "./ft-base-tabs";
 import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
 import { designSystemStyles } from "./ftds-tabs.styles";
 import { property } from "lit/decorators.js";
+export var FtDsTabsStructure;
+(function (FtDsTabsStructure) {
+    FtDsTabsStructure["topIcon"] = "top-icon";
+    FtDsTabsStructure["sideIcon"] = "side-icon";
+    FtDsTabsStructure["labelOnly"] = "label-only";
+    FtDsTabsStructure["iconOnly"] = "icon-only";
+})(FtDsTabsStructure || (FtDsTabsStructure = {}));
 class FtdsTabs extends FtBaseTabs {
     constructor() {
         super(...arguments);
-        this.sideIcon = false;
+        this.structure = FtDsTabsStructure.sideIcon;
     }
     get tabsClasses() {
         return {
             "ft-tabs": true,
-            "ft-tabs--collapsed": this.collapsible && this.activeIndex == null,
-            "ft-tabs--horizontal": this.horizontal,
-            "ft-tabs--reverse": this.contentBefore,
-            "ft-tabs--dense": this.dense,
             ["ft-tabs--align-" + this.alignTabs]: true,
-            "ft-tabs--side-icon": this.sideIcon
+            "ft-tabs--side-icon": this.structure == FtDsTabsStructure.sideIcon,
+            "ft-tabs--icon-only": this.structure == FtDsTabsStructure.iconOnly,
+            "ft-tabs--label-only": this.structure == FtDsTabsStructure.labelOnly,
         };
     }
 }
@@ -30,6 +35,6 @@ FtdsTabs.styles = [
     designSystemStyles
 ];
 __decorate([
-    property({ type: Boolean })
-], FtdsTabs.prototype, "sideIcon", void 0);
+    property()
+], FtdsTabs.prototype, "structure", void 0);
 export { FtdsTabs };

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

@@ -1,12 +1,2 @@
-export declare const FtdsTabsCssVariables: {
-    horizontalButtonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    horizontalDenseButtonsWidth: 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;
-    backgroundPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    focusBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+export { tabs as FtdsTabsCssVariables } from "@fluid-topics/design-system-variables";
 export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-tabs.styles.js

@@ -1,54 +1,14 @@
 import { css } from "lit";
-import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
-import { foundation } from "@fluid-topics/design-system-variables/build/generated/ts/foundation";
-export const FtdsTabsCssVariables = {
-    horizontalButtonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-buttons-width", "Width of the tab buttons (N/A for vertical justified tabs)", "SIZE", "100px"),
-    horizontalDenseButtonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-dense-buttons-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.create("--ft-tabs-color-surface", "", "COLOR", "#FFFFFF"),
-    colorPrimary: FtCssVariableFactory.create("--ft-tabs-color-primary", "", "COLOR", foundation.colorBrand0),
-    backgroundPrimary: FtCssVariableFactory.create("--ft-tabs-background-primary", "", "COLOR", foundation.colorBrand10),
-    color: FtCssVariableFactory.create("--ft-tabs-color", "", "COLOR", foundation.colorGray200),
-    colorDisabled: FtCssVariableFactory.create("--ft-tabs-color-disabled", "", "COLOR", foundation.colorGray60),
-    focusBorderColor: FtCssVariableFactory.create("--ft-tabs-focus-border-color", "", "COLOR", foundation.colorCyan70),
-};
+import { tabs } from "@fluid-topics/design-system-variables";
+export { tabs as FtdsTabsCssVariables } from "@fluid-topics/design-system-variables";
 // language=CSS
 export const designSystemStyles = css `
     .ft-tabs {
         display: flex;
         flex-direction: column;
-        background-color: ${FtdsTabsCssVariables.colorSurface};
         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: ${FtdsTabsCssVariables.widthWhenHorizontalAndOpen};
-    }
-
-    .ft-tabs--horizontal.ft-tabs--collapsed {
-        width: ${FtdsTabsCssVariables.horizontalButtonsWidth};
-    }
-
-    .ft-tabs--horizontal.ft-tabs--dense.ft-tabs--collapsed {
-        width: ${FtdsTabsCssVariables.horizontalDenseButtonsWidth};
-    }
-
-    .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;
@@ -57,10 +17,6 @@ export const designSystemStyles = css `
         flex-wrap: wrap;
     }
 
-    .ft-tabs--horizontal [role="tablist"] {
-        flex-direction: column;
-    }
-
     .ft-tabs--align-end [role="tablist"],
     .ft-tabs--align-right [role="tablist"] {
         justify-content: flex-end;
@@ -77,42 +33,84 @@ export const designSystemStyles = css `
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: 8px 16px;
+        padding: ${tabs.withLabelVerticalPadding} ${tabs.withLabelHorizontalPadding};
         background: none;
         box-shadow: 0px 0px 0px transparent;
-        border: 3px solid transparent;
+        border: ${tabs.focusOutlineWidth} solid transparent;
         text-shadow: 0px 0px 0px transparent;
         cursor: pointer;
         outline: none;
         font-size: 16px;
         line-height: 1;
-        color: ${FtdsTabsCssVariables.color};
+        color: ${tabs.offColor};
+        border-radius: ${tabs.topLeftBorderRadius} ${tabs.topRightBorderRadius} 0 0;
     }
 
-    [role='tab']:focus {
-        border: 3px solid ${FtdsTabsCssVariables.focusBorderColor};
-        border-radius: 3px;
+    .ft-tabs--icon-only [role='tab'] {
+        padding: ${tabs.iconOnlyVerticalPadding} ${tabs.iconOnlyHorizontalPadding};
+    }
+
+    [role='tab'] ft-ripple {
+        --ft-ripple-color: ${tabs.onStateLayerColor}
+    }
+
+    [role='tab']::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-color: ${tabs.offStateLayerColor};
+        opacity: ${tabs.offDefaultStateLayerOpacity};
+    }
+
+    [role='tab']:focus-visible {
+        border-color: ${tabs.focusFocusRingColor};
+        border-radius: ${tabs.focusOutlineWidth};
+    }
+
+    [role='tab']:focus-visible::before {
+        background-color: ${tabs.offStateLayerColor};
+        opacity: ${tabs.offFocusStateLayerOpacity};
+    }
+
+    [role='tab']:hover::before {
+        background-color: ${tabs.offStateLayerColor};
+        opacity: ${tabs.offHoverStateLayerOpacity};
+    }
+
+    [role='tab'][disabled] {
+        opacity: ${tabs.offDisabledComponentOpacity};
     }
 
     .ft-tabs--side-icon [role='tab'] {
         flex-direction: row;
     }
 
-    .ft-tabs--horizontal [role='tab'] {
-        width: ${FtdsTabsCssVariables.horizontalButtonsWidth};
+    [role='tab'][aria-selected='true'] {
+        color: ${tabs.onColor};
     }
 
-    .ft-tabs--horizontal.ft-tabs--dense [role='tab'] {
-        width: ${FtdsTabsCssVariables.horizontalDenseButtonsWidth};
+    [role='tab'][aria-selected='true']::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onDefaultStateLayerOpacity};
     }
 
-    [role='tab'][aria-selected='true'] {
-        color: ${FtdsTabsCssVariables.colorPrimary};
-        background-color: ${FtdsTabsCssVariables.backgroundPrimary};
+    [role='tab'][aria-selected='true']:active::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onActiveStateLayerOpacity};
     }
 
-    [role='tab'][disabled] {
-        color: ${FtdsTabsCssVariables.colorDisabled};
+    [role='tab'][aria-selected='true']:hover::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onHoverStateLayerOpacity};
+    }
+
+    [role='tab'][aria-selected='true']:focus::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onFocusStateLayerOpacity};
     }
 
     .ft-tabs--align-justify [role='tab'],
@@ -130,19 +128,28 @@ export const designSystemStyles = css `
     }
 
     [role='tab']:not(.ft-tabs--tab-with-label) .ft-tabs--tab-label,
-    .ft-tabs--dense .ft-tabs--tab-with-icon .ft-tabs--tab-label {
+    .ft-tabs--icon-only .ft-tabs--tab-with-icon .ft-tabs--tab-label {
         display: none;
     }
 
-    [role='tab']:not(.ft-tabs--tab-with-icon) .ft-tabs--tab-icon {
+    [role='tab']:not(.ft-tabs--tab-with-icon) .ft-tabs--tab-icon,
+    .ft-tabs--label-only .ft-tabs--tab-with-label .ft-tabs--tab-icon {
         display: none;
     }
 
+    .ft-tabs--tab-icon {
+        padding: ${tabs.verticalGap} 0;
+    }
+
+    .ft-tabs--side-icon .ft-tabs--tab-icon {
+        padding: 0 ${tabs.horizontalGap};
+    }
+
     .ft-tabs--active-tab-indicator {
         position: absolute;
         height: 3px;
         border-radius: 2px;
-        background-color: ${FtdsTabsCssVariables.colorPrimary};
+        background-color: ${tabs.onColor};
         transition: width 200ms ease, left 200ms ease, top 200ms ease;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-tabs",
-  "version": "1.1.79",
+  "version": "1.1.81",
   "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.79",
-    "@fluid-topics/ft-ripple": "1.1.79",
-    "@fluid-topics/ft-tooltip": "1.1.79",
-    "@fluid-topics/ft-typography": "1.1.79",
-    "@fluid-topics/ft-wc-utils": "1.1.79",
+    "@fluid-topics/ft-icon": "1.1.81",
+    "@fluid-topics/ft-ripple": "1.1.81",
+    "@fluid-topics/ft-tooltip": "1.1.81",
+    "@fluid-topics/ft-typography": "1.1.81",
+    "@fluid-topics/ft-wc-utils": "1.1.81",
     "lit": "3.1.0"
   },
-  "gitHead": "83d2a7107ad2642bf0d22e15afdcabc32c258f7a"
+  "gitHead": "5dea8a4771738158973c6e7abcd669b1ba24d778"
 }