@fluid-topics/ftds-toc 0.0.0-stage → 2.2.28

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

@@ -0,0 +1,11 @@
+export interface FtdsTocItem {
+    value: string;
+    label: string;
+    href: string;
+    children?: FtdsTocItem[];
+}
+export interface FtdsTocProperties {
+    items: FtdsTocItem[];
+    label: string;
+    current?: string;
+}

package/build/ftds-toc.properties.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { toc } from "@fluid-topics/design-system-variables";
+export { toc as FtdsTocCssVariables };
+export declare const styles: import("lit").CSSResult;

package/build/ftds-toc.styles.js

@@ -0,0 +1,135 @@
+import { css } from "lit";
+import { foundation, toc, } from "@fluid-topics/design-system-variables";
+export { toc as FtdsTocCssVariables };
+// language=CSS
+export const styles = css `
+    :host {
+        display: block;
+        position: sticky;
+        top: ${toc.offsetTop};
+    }
+
+    /* Not sticky on smaller screens */
+    @media (max-width: 1440px) {
+        :host {
+            display: none;
+        }
+    }
+
+    nav {
+        display: flex;
+        flex-direction: column;
+        gap: ${toc.titleGap};
+    }
+
+    .title {
+        color: ${toc.titleColor};
+    }
+
+    ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${toc.itemGap};
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    a {
+        --toc-label-color: ${toc.itemInactiveLabelColor};
+        --toc-border-color: ${toc.itemInactiveBorderColor};
+        --toc-border-width: ${toc.itemBorderWidth};
+        --toc-layer-color: ${toc.itemInactiveStateLayerColor};
+        --toc-layer-opacity: 0;
+
+        position: relative;
+        display: flex;
+        align-items: baseline;
+        gap: ${foundation.spacing2};
+        padding: ${toc.itemVerticalPadding} ${toc.itemHorizontalPadding};
+        border-radius: ${toc.itemBorderRadius};
+        color: var(--toc-label-color);
+        text-decoration: none;
+        outline: none;
+        cursor: pointer;
+    }
+
+    /* Left bar, absolutely positioned so that the width change doesn't shift the label */
+    a::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: var(--toc-border-width);
+        background-color: var(--toc-border-color);
+        pointer-events: none;
+    }
+
+    /* State layer */
+    a::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background-color: var(--toc-layer-color);
+        opacity: var(--toc-layer-opacity);
+        pointer-events: none;
+    }
+
+    .bullet {
+        flex-shrink: 0;
+    }
+
+    .label {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    a:hover {
+        --toc-layer-opacity: ${toc.itemInactiveHoverStateLayerOpacity};
+    }
+
+    a:focus-visible {
+        --toc-layer-opacity: ${toc.itemInactiveFocusStateLayerOpacity};
+        outline: ${toc.itemFocusFocusRingWidth} solid ${toc.itemFocusFocusRingColor};
+        outline-offset: calc(-1 * ${toc.itemFocusFocusRingWidth});
+    }
+
+    /* Active */
+    a[aria-current="page"] {
+        --toc-label-color: ${toc.itemActiveLabelColor};
+        --toc-border-color: ${toc.itemActiveBorderColor};
+        --toc-border-width: ${toc.itemActiveBorderWidth};
+        --toc-layer-color: ${toc.itemActiveStateLayerColor};
+        --toc-layer-opacity: ${toc.itemActiveDefaultStateLayerOpacity};
+    }
+
+    a[aria-current="page"]:hover {
+        --toc-layer-opacity: ${toc.itemActiveHoverStateLayerOpacity};
+    }
+
+    a[aria-current="page"]:focus-visible {
+        --toc-layer-opacity: ${toc.itemActiveFocusStateLayerOpacity};
+    }
+
+    /* Root with an active child */
+    a.children-active {
+        --toc-label-color: ${toc.itemChildActiveLabelColor};
+        --toc-border-color: ${toc.itemChildActiveBorderColor};
+        --toc-layer-color: ${toc.itemChildActiveStateLayerColor};
+    }
+
+    a.children-active:hover {
+        --toc-layer-opacity: ${toc.itemChildActiveHoverStateLayerOpacity};
+    }
+
+    a.children-active:focus-visible {
+        --toc-layer-opacity: ${toc.itemChildActiveFocusStateLayerOpacity};
+    }
+
+    /* Child */
+    a.child {
+        padding-left: calc(${toc.itemHorizontalPadding} + ${foundation.spacing2});
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-toc.properties";
+export * from "./ftds-toc.styles";
+export * from "./ftds-toc";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-toc.properties";
+export * from "./ftds-toc.styles";
+export * from "./ftds-toc";
+import "./define";

package/package.json

@@ -1,6 +1,31 @@
 {
-  "name": "@fluid-topics/ftds-toc",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@fluid-topics/ftds-toc",
+    "version": "2.2.28",
+    "description": "The design system table of contents (TOC) component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-toc.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/design-system-variables": "3.16.0",
+        "@fluid-topics/ft-wc-utils": "2.2.28",
+        "@fluid-topics/ftds-typography": "2.2.28",
+        "lit": "3.3.3"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.2.28"
+    },
+    "gitHead": "8ca1d190ac34fad2ecec7ad3b03890913f865eb7"
+}