@fluid-topics/ftds-tabs 2.1.0

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

@@ -0,0 +1,18 @@
+export interface FtdsTabsProperties {
+    activeIndex?: number;
+    alignTabs: FtdsTabsAlignment;
+    structure?: FtdsTabsStructure;
+}
+export declare enum FtdsTabsStructure {
+    topIcon = "top-icon",
+    sideIcon = "side-icon",
+    labelOnly = "label-only",
+    iconOnly = "icon-only"
+}
+export declare enum FtdsTabsAlignment {
+    left = "left",
+    right = "right",
+    start = "start",
+    end = "end",
+    justify = "justify"
+}

package/build/ftds-tabs.properties.js

@@ -0,0 +1,15 @@
+export var FtdsTabsStructure;
+(function (FtdsTabsStructure) {
+    FtdsTabsStructure["topIcon"] = "top-icon";
+    FtdsTabsStructure["sideIcon"] = "side-icon";
+    FtdsTabsStructure["labelOnly"] = "label-only";
+    FtdsTabsStructure["iconOnly"] = "icon-only";
+})(FtdsTabsStructure || (FtdsTabsStructure = {}));
+export var FtdsTabsAlignment;
+(function (FtdsTabsAlignment) {
+    FtdsTabsAlignment["left"] = "left";
+    FtdsTabsAlignment["right"] = "right";
+    FtdsTabsAlignment["start"] = "start";
+    FtdsTabsAlignment["end"] = "end";
+    FtdsTabsAlignment["justify"] = "justify";
+})(FtdsTabsAlignment || (FtdsTabsAlignment = {}));

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

@@ -0,0 +1,2 @@
+export { tabs as FtdsTabsCssVariables } from "@fluid-topics/design-system-variables";
+export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-tabs.styles.js

@@ -0,0 +1,182 @@
+import { css } from "lit";
+import { tabs } from "@fluid-topics/design-system-variables";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
+export { tabs as FtdsTabsCssVariables } from "@fluid-topics/design-system-variables";
+// language=CSS
+export const designSystemStyles = css `
+    .ftds-tabs {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .ftds-tabs.ftds-tabs--horizontal {
+        flex-direction: row;
+    }
+
+    [role="tablist"] {
+        flex-shrink: 0;
+        flex-grow: 0;
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        flex-wrap: wrap;
+        border-bottom: ${tabs.offBorderBottomWidth} solid ${tabs.offBorderBottomColor};
+    }
+
+    .ftds-tabs--horizontal [role="tablist"] {
+        flex-direction: column;
+        border-bottom: unset;
+        border-right: ${tabs.offBorderBottomWidth} solid ${tabs.offBorderBottomColor};
+    }
+
+    .ftds-tabs--align-end [role="tablist"],
+    .ftds-tabs--align-right [role="tablist"] {
+        justify-content: flex-end;
+    }
+
+    .ftds-tabs--align-justify [role="tablist"] {
+        justify-content: space-evenly;
+    }
+
+    [role='tab'] {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: ${tabs.withLabelVerticalPadding} ${tabs.withLabelHorizontalPadding};
+        background: none;
+        box-shadow: 0px 0px 0px transparent;
+        text-shadow: 0px 0px 0px transparent;
+        cursor: pointer;
+        outline: none;
+        font-size: 16px;
+        line-height: 1;
+        color: ${tabs.offColor};
+        border-radius: ${tabs.topLeftBorderRadius} ${tabs.topRightBorderRadius} 0 0;
+        border: 0;
+        gap: ${tabs.verticalGap} ${tabs.horizontalGap};
+        z-index: 0;
+    }
+
+    .ftds-tabs--horizontal [role="tab"] {
+        border-radius: ${tabs.topRightBorderRadius} 0 0 ${tabs.topLeftBorderRadius};
+    }
+
+    .ftds-tabs--horizontal.ftds-tabs--side-icon [role="tab"],
+    .ftds-tabs--horizontal.ftds-tabs--label-only [role="tab"] {
+        align-items: flex-end;
+        justify-content: end;
+    }
+
+    .ftds-tabs--icon-only [role='tab'] {
+        padding: ${tabs.iconOnlyVerticalPadding} ${tabs.iconOnlyHorizontalPadding};
+    }
+
+    [role='tab'] ft-ripple {
+        ${setVariable(FtRippleCssVariables.color, tabs.onStateLayerColor)};
+    }
+
+    [role='tab']:focus-visible {
+        outline: ${tabs.focusOutlineWidth} solid ${tabs.focusFocusRingColor};
+        outline-offset: calc(${tabs.focusOutlineWidth} * -1);
+        border-radius: ${tabs.focusOutlineWidth};
+    }
+
+    [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::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};
+    }
+
+    .ftds-tabs--side-icon [role='tab'] {
+        flex-direction: row;
+    }
+
+    [role='tab'][aria-selected='true'] {
+        color: ${tabs.onColor};
+    }
+
+    [role='tab'][aria-selected='true']::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onDefaultStateLayerOpacity};
+    }
+
+    [role='tab'][aria-selected='true']:active::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onActiveStateLayerOpacity};
+    }
+
+    [role='tab'][aria-selected='true']:hover::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onHoverStateLayerOpacity};
+    }
+
+    [role='tab'][aria-selected='true']:focus-visible::before {
+        background-color: ${tabs.onStateLayerColor};
+        opacity: ${tabs.onFocusStateLayerOpacity};
+    }
+
+    .ftds-tabs--align-justify [role='tab'],
+    .ftds-tabs--align-justify .ftds-tabs--tab-tooltip,
+    .ftds-tabs--align-justify .ftds-tabs--tab-tooltip::part(container) {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    [role='tab'] .ftds-tabs--tab-label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    [role='tab']:not(.ftds-tabs--tab-with-label) .ftds-tabs--tab-label,
+    .ftds-tabs--icon-only .ftds-tabs--tab-with-icon .ftds-tabs--tab-label {
+        display: none;
+    }
+
+    [role='tab']:not(.ftds-tabs--tab-with-icon) .ftds-tabs--tab-icon,
+    .ftds-tabs--label-only .ftds-tabs--tab-with-label .ftds-tabs--tab-icon {
+        display: none;
+    }
+
+    .ftds-tabs--active-tab-indicator {
+        position: absolute;
+        border-radius: 0;
+        background-color: ${tabs.onActiveTabIndicatorColor};
+        transition: width 200ms ease, left 200ms ease, top 200ms ease;
+    }
+
+    .ftds-tabs--content {
+        flex-shrink: 1;
+        flex-grow: 1;
+        overflow: auto;
+    }
+
+    .ftds-tabs--horizontal .ftds-tabs--content {
+        overflow: unset;
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./ftds-tabs.styles";
+export * from "./ftds-tabs.properties";
+export * from "./ftds-tabs";
+export * from "./ftds-tab.styles";
+export * from "./ftds-tab.properties";
+export * from "./ftds-tab";
+import "./define";

package/build/index.js

@@ -0,0 +1,7 @@
+export * from "./ftds-tabs.styles";
+export * from "./ftds-tabs.properties";
+export * from "./ftds-tabs";
+export * from "./ftds-tab.styles";
+export * from "./ftds-tab.properties";
+export * from "./ftds-tab";
+import "./define";

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@fluid-topics/ftds-tabs",
+    "version": "2.1.0",
+    "description": "The design system tabs component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-tabs.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-tooltip": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}