@tet/tet-components 1.4.19-testing → 1.4.20-staging

package/dist/collection/docs/styling/colors/tet-colors.js

@@ -1,9 +1,18 @@
 import { h, Host } from "@stencil/core";
 export class TetColors {
     constructor() {
+        this.tokenSections = [];
+        this.copiedToken = null;
         this.showVariables = false;
         this.darkTheme = false;
+        this.isTokensExample = false;
     }
+    copyFeedbackTimeout;
+    static cachedTokens = null;
+    static cachedTokenSections = new Map();
+    static cachedTokenDeclarationValues = null;
+    static resolvedTokenColorCache = new Map();
+    withSubsections = new Set(['Colors', 'Menu', 'Gradient']);
     colorSections = {
         blue: {
             title: 'Blue',
@@ -25,14 +34,549 @@ export class TetColors {
             title: 'Violet',
             colors: ['violet80', 'violet70', 'violet60', 'violet50', 'violet40', 'violet30', 'violet20', 'violet10', 'violet00'],
         },
+        brown: {
+            title: 'Brown',
+            colors: ['brown80', 'brown70', 'brown60', 'brown50', 'brown40', 'brown30', 'brown20', 'brown10', 'brown00'],
+        },
         grey: {
             title: 'Grey',
             colors: ['grey110', 'grey100', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey00'],
         },
         foundation: {
             title: 'Foundation',
-            colors: ['blue', 'violet', 'green', 'yellow', 'red', 'black', 'white'],
+            colors: ['blue', 'green', 'yellow', 'red', 'violet', 'black', 'white'],
+        },
+    };
+    tokenSectionConfig = [
+        {
+            title: 'Colors',
+            prefixes: [
+                '--tc-foundation-',
+                '--tc-grey-',
+                '--tc-blue-',
+                '--tc-green-',
+                '--tc-yellow-',
+                '--tc-red-',
+                '--tc-violet-',
+                '--tc-brown-',
+            ],
+        },
+        {
+            title: 'Text',
+            prefixes: ['--tc-text-'],
+        },
+        {
+            title: 'Background',
+            prefixes: ['--tc-background-'],
+        },
+        {
+            title: 'Layer',
+            prefixes: ['--tc-layer-'],
+        },
+        {
+            title: 'Icon',
+            prefixes: ['--tc-icon-'],
+        },
+        {
+            title: 'Border',
+            prefixes: ['--tc-border-'],
+        },
+        {
+            title: 'Alert',
+            prefixes: ['--tc-alert-'],
+        },
+        {
+            title: 'Modal',
+            prefixes: ['--tc-modal-'],
+        },
+        {
+            title: 'Gradient',
+            prefixes: [
+                '--tc-gradient-',
+                '--tc-gradient-layer-',
+                '--tc-gradient-green-',
+                '--tc-gradient-mint-',
+                '--tc-gradient-red-',
+                '--tc-gradient-yellow-',
+                '--tc-gradient-blue-',
+                '--tc-gradient-purple-',
+                '--tc-gradient-grey-',
+            ],
+        },
+        {
+            title: 'Button',
+            prefixes: ['--tc-button-'],
         },
+        {
+            title: 'Menu',
+            prefixes: [
+                '--tc-menu-item-',
+                '--tc-menu-item-yellow-',
+                '--tc-menu-item-blue-',
+                '--tc-menu-item-red-',
+                '--tc-menu-item-green-',
+                '--tc-menu-item-violet-',
+            ],
+        },
+        {
+            title: 'Theme Switcher',
+            prefixes: ['--tc-theme-switcher-'],
+        },
+        {
+            title: 'Checkbox',
+            prefixes: ['--tc-checkbox-'],
+        },
+        {
+            title: 'Radio Button',
+            prefixes: ['--tc-radio-button-'],
+        },
+        {
+            title: 'Toggle',
+            prefixes: ['--tc-toggle-button-'],
+        },
+        {
+            title: 'Text Input',
+            prefixes: ['--tc-text-input-'],
+        },
+        {
+            title: 'Tooltip',
+            prefixes: ['--tc-tooltip-'],
+        },
+        {
+            title: 'Search',
+            prefixes: ['--tc-search-'],
+        },
+        {
+            title: 'Spinner',
+            prefixes: ['--tc-spinner', '--tc-spinner-'],
+        },
+        {
+            title: 'Elevation / Shadows',
+            prefixes: ['--tc-elevation-'],
+        },
+    ];
+    componentDidLoad() {
+        if (globalThis.window !== undefined && this.isTokensExample) {
+            this.refreshTokenSections();
+            requestAnimationFrame(() => {
+                if (!this.tokenSections.length) {
+                    this.invalidateTokenCaches();
+                    this.refreshTokenSections();
+                }
+            });
+        }
+    }
+    handleTokenSectionStateChange() {
+        if (this.isTokensExample) {
+            this.refreshTokenSections();
+        }
+    }
+    refreshTokenSections = () => {
+        const tokenSections = this.getTokenSectionsForTheme(this.darkTheme);
+        this.cacheResolvedTokenColors(tokenSections);
+        this.tokenSections = tokenSections;
+    };
+    invalidateTokenCaches = () => {
+        TetColors.cachedTokens = null;
+        TetColors.cachedTokenSections.clear();
+        TetColors.cachedTokenDeclarationValues = null;
+        TetColors.resolvedTokenColorCache.clear();
+    };
+    disconnectedCallback() {
+        if (this.copyFeedbackTimeout) {
+            clearTimeout(this.copyFeedbackTimeout);
+            this.copyFeedbackTimeout = undefined;
+        }
+    }
+    isColorToken = (token) => {
+        return token.startsWith('--tc-');
+    };
+    isTokenForTheme = (token, isDarkTheme) => {
+        if (!this.isColorToken(token)) {
+            return false;
+        }
+        const isDarkToken = token.endsWith('-dark');
+        return isDarkTheme ? isDarkToken : !isDarkToken;
+    };
+    getTokenSectionTitle = (token) => {
+        const section = this.tokenSectionConfig.find(config => config.prefixes.some(prefix => token.startsWith(prefix)));
+        if (section) {
+            return section.title;
+        }
+        return 'Other';
+    };
+    getPrefixTitle = (prefix) => {
+        const prefixName = prefix
+            .replace(/^--tc-/, '')
+            .replace(/-$/, '');
+        return prefixName
+            .split('-')
+            .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+            .join(' ');
+    };
+    hasMoreSpecificMatchingPrefix = (token, prefix, prefixes) => {
+        return prefixes.some(candidatePrefix => candidatePrefix !== prefix
+            && candidatePrefix.length > prefix.length
+            && candidatePrefix.startsWith(prefix)
+            && token.startsWith(candidatePrefix));
+    };
+    getTokensForPrefix = (tokens, prefix, prefixes) => {
+        return tokens.filter(token => token.startsWith(prefix)
+            && !this.hasMoreSpecificMatchingPrefix(token, prefix, prefixes));
+    };
+    getColorTokenSubsections = (tokens, title) => {
+        const colorSectionConfig = this.tokenSectionConfig.find(section => section.title === title);
+        if (!colorSectionConfig) {
+            return [];
+        }
+        return colorSectionConfig.prefixes
+            .map(prefix => ({
+            title: this.getPrefixTitle(prefix),
+            tokens: this.getTokensForPrefix(tokens, prefix, colorSectionConfig.prefixes),
+        }))
+            .filter(section => section.tokens.length);
+    };
+    getTokenDeclarationValuesFromStyleSheets = () => {
+        if (TetColors.cachedTokenDeclarationValues) {
+            return TetColors.cachedTokenDeclarationValues;
+        }
+        const tokenDeclarationValues = new Map();
+        if (typeof document === 'undefined') {
+            return tokenDeclarationValues;
+        }
+        Array.from(document.styleSheets).forEach(styleSheet => {
+            let rules;
+            try {
+                rules = styleSheet.cssRules;
+            }
+            catch {
+                return;
+            }
+            Array.from(rules).forEach(rule => {
+                if (!('selectorText' in rule) || !('style' in rule)) {
+                    return;
+                }
+                const styleRule = rule;
+                if (!styleRule.selectorText?.includes(':root')) {
+                    return;
+                }
+                for (let index = 0; index < styleRule.style.length; index++) {
+                    const token = styleRule.style.item(index);
+                    if (this.isColorToken(token)) {
+                        const tokenValue = styleRule.style.getPropertyValue(token).trim();
+                        if (tokenValue) {
+                            tokenDeclarationValues.set(token, tokenValue);
+                        }
+                    }
+                }
+            });
+        });
+        TetColors.cachedTokenDeclarationValues = tokenDeclarationValues;
+        return tokenDeclarationValues;
+    };
+    collectTokensFromStyleSheets = () => {
+        const tokens = new Set();
+        const tokenDeclarationValues = this.getTokenDeclarationValuesFromStyleSheets();
+        tokenDeclarationValues.forEach((_value, token) => tokens.add(token));
+        return tokens;
+    };
+    getTokenSectionsForTheme = (isDarkTheme) => {
+        const themeKey = isDarkTheme ? 'dark' : 'light';
+        const cachedTokenSections = TetColors.cachedTokenSections.get(themeKey);
+        if (cachedTokenSections) {
+            return cachedTokenSections;
+        }
+        const tokens = this.getAllColorTokens().filter(token => this.isTokenForTheme(token, isDarkTheme));
+        const groupedTokens = new Map();
+        this.tokenSectionConfig.forEach(section => groupedTokens.set(section.title, []));
+        groupedTokens.set('Other', []);
+        tokens.forEach(token => {
+            const sectionTitle = this.getTokenSectionTitle(token);
+            const sectionTokens = groupedTokens.get(sectionTitle);
+            if (sectionTokens) {
+                sectionTokens.push(token);
+            }
+        });
+        const orderedSections = this.tokenSectionConfig
+            .map(section => ({
+            title: section.title,
+            tokens: groupedTokens.get(section.title) || [],
+        }))
+            .filter(section => section.tokens.length);
+        const otherTokens = groupedTokens.get('Other') || [];
+        if (otherTokens.length) {
+            orderedSections.push({
+                title: 'Other',
+                tokens: otherTokens,
+            });
+        }
+        TetColors.cachedTokenSections.set(themeKey, orderedSections);
+        return orderedSections;
+    };
+    getAllColorTokens = () => {
+        if (TetColors.cachedTokens) {
+            return TetColors.cachedTokens;
+        }
+        if (globalThis.window === undefined || typeof document === 'undefined') {
+            return [];
+        }
+        const styleSheetTokens = this.collectTokensFromStyleSheets();
+        if (styleSheetTokens.size) {
+            TetColors.cachedTokens = Array.from(styleSheetTokens);
+            return TetColors.cachedTokens;
+        }
+        const style = getComputedStyle(document.documentElement);
+        const tokens = new Set();
+        for (let index = 0; index < style.length; index++) {
+            const token = style.item(index);
+            if (token && this.isColorToken(token)) {
+                tokens.add(token);
+            }
+        }
+        if (tokens.size) {
+            TetColors.cachedTokens = Array.from(tokens);
+            return TetColors.cachedTokens;
+        }
+        return [];
+    };
+    getTokenReference = (token) => {
+        return `var(${token})`;
+    };
+    isVarFunction = (value) => {
+        return value.startsWith('var(') && value.endsWith(')');
+    };
+    consumeEscapedCharacter = (state) => {
+        if (!state.isEscaped) {
+            return false;
+        }
+        state.isEscaped = false;
+        return true;
+    };
+    startEscapeSequence = (char, state) => {
+        if (char !== '\\') {
+            return false;
+        }
+        state.isEscaped = true;
+        return true;
+    };
+    toggleQuoteStateIfNeeded = (char, state) => {
+        if (!state.inDoubleQuote && char === '\'') {
+            state.inSingleQuote = !state.inSingleQuote;
+            return true;
+        }
+        if (!state.inSingleQuote && char === '"') {
+            state.inDoubleQuote = !state.inDoubleQuote;
+            return true;
+        }
+        return false;
+    };
+    isInsideQuotes = (state) => {
+        return state.inSingleQuote || state.inDoubleQuote;
+    };
+    updateDepthIfNeeded = (char, state) => {
+        if (char === '(') {
+            state.depth++;
+            return true;
+        }
+        if (char === ')') {
+            state.depth = Math.max(0, state.depth - 1);
+            return true;
+        }
+        return false;
+    };
+    isTopLevelComma = (char, depth) => {
+        return char === ',' && depth === 0;
+    };
+    findTopLevelCommaIndex = (value) => {
+        const state = {
+            depth: 0,
+            inSingleQuote: false,
+            inDoubleQuote: false,
+            isEscaped: false
+        };
+        for (let index = 0; index < value.length; index++) {
+            const char = value[index];
+            if (this.consumeEscapedCharacter(state)) {
+                continue;
+            }
+            if (this.startEscapeSequence(char, state)) {
+                continue;
+            }
+            if (this.toggleQuoteStateIfNeeded(char, state)) {
+                continue;
+            }
+            if (this.isInsideQuotes(state)) {
+                continue;
+            }
+            if (this.updateDepthIfNeeded(char, state)) {
+                continue;
+            }
+            if (this.isTopLevelComma(char, state.depth)) {
+                return index;
+            }
+        }
+        return -1;
+    };
+    splitVarFunctionArguments = (innerValue) => {
+        const splitIndex = this.findTopLevelCommaIndex(innerValue);
+        if (splitIndex === -1) {
+            return {
+                tokenPart: innerValue,
+                fallbackPart: ''
+            };
+        }
+        return {
+            tokenPart: innerValue.slice(0, splitIndex),
+            fallbackPart: innerValue.slice(splitIndex + 1).trim()
+        };
+    };
+    isValidCssCustomPropertyToken = (token) => {
+        return /^--[\w-]+$/.test(token);
+    };
+    parseVarFunction = (value) => {
+        const trimmedValue = value.trim();
+        if (!this.isVarFunction(trimmedValue)) {
+            return null;
+        }
+        const innerValue = trimmedValue.slice(4, -1).trim();
+        if (!innerValue) {
+            return null;
+        }
+        const { tokenPart, fallbackPart } = this.splitVarFunctionArguments(innerValue);
+        const token = tokenPart.trim();
+        if (!this.isValidCssCustomPropertyToken(token)) {
+            return null;
+        }
+        return {
+            token,
+            fallbackValue: fallbackPart || undefined
+        };
+    };
+    resolveTokenValue = (value, rootStyles, tokenDeclarationValues, visitedTokens = new Set()) => {
+        const variableMatch = this.parseVarFunction(value);
+        if (!variableMatch) {
+            return value;
+        }
+        const referencedToken = variableMatch.token;
+        const fallbackValue = variableMatch.fallbackValue;
+        if (visitedTokens.has(referencedToken)) {
+            return value;
+        }
+        visitedTokens.add(referencedToken);
+        const referencedValueFromDeclarations = tokenDeclarationValues?.get(referencedToken)?.trim();
+        if (referencedValueFromDeclarations) {
+            return this.resolveTokenValue(referencedValueFromDeclarations, rootStyles, tokenDeclarationValues, visitedTokens);
+        }
+        const referencedValue = rootStyles.getPropertyValue(referencedToken).trim();
+        if (referencedValue) {
+            return this.resolveTokenValue(referencedValue, rootStyles, tokenDeclarationValues, visitedTokens);
+        }
+        if (fallbackValue) {
+            return this.resolveTokenValue(fallbackValue, rootStyles, tokenDeclarationValues, visitedTokens);
+        }
+        return value;
+    };
+    getResolvedTokenColorValue = (token, rootStyles) => {
+        const cachedValue = TetColors.resolvedTokenColorCache.get(token);
+        if (cachedValue) {
+            return cachedValue;
+        }
+        if (typeof document === 'undefined') {
+            return '';
+        }
+        const computedRootStyles = rootStyles ?? getComputedStyle(document.documentElement);
+        const tokenDeclarationValues = this.getTokenDeclarationValuesFromStyleSheets();
+        const tokenValueFromDeclarations = tokenDeclarationValues.get(token)?.trim();
+        const rootTokenValue = tokenValueFromDeclarations || computedRootStyles.getPropertyValue(token).trim();
+        if (!rootTokenValue) {
+            return '';
+        }
+        const resolvedTokenValue = this.resolveTokenValue(rootTokenValue, computedRootStyles, tokenDeclarationValues);
+        const normalizedValue = resolvedTokenValue.replaceAll(/\s+/g, ' ');
+        TetColors.resolvedTokenColorCache.set(token, normalizedValue);
+        return normalizedValue;
+    };
+    formatTokenDisplayValue = (value) => {
+        const rgbMatch = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(value);
+        if (rgbMatch) {
+            return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, 1)`;
+        }
+        return value;
+    };
+    cacheResolvedTokenColors = (tokenSections) => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const rootStyles = getComputedStyle(document.documentElement);
+        const tokensToResolve = new Set();
+        tokenSections.forEach(section => {
+            section.tokens.forEach(token => {
+                if (!TetColors.resolvedTokenColorCache.has(token)) {
+                    tokensToResolve.add(token);
+                }
+            });
+        });
+        tokensToResolve.forEach(token => this.getResolvedTokenColorValue(token, rootStyles));
+    };
+    isShadowToken = (token) => token.includes('elevation') || token.includes('shadow');
+    getTokenSwatchStyle = (token, tokenReference) => {
+        if (!this.isShadowToken(token)) {
+            return { background: tokenReference };
+        }
+        const elevationBackground = token.endsWith('-dark')
+            ? 'var(--tc-layer-inverse-primary)'
+            : 'var(--tc-layer-primary)';
+        return {
+            background: elevationBackground,
+            boxShadow: tokenReference,
+        };
+    };
+    copyToClipboard = async (value) => {
+        const clipboard = globalThis.navigator?.clipboard;
+        if (!clipboard?.writeText) {
+            return false;
+        }
+        try {
+            await clipboard.writeText(value);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    };
+    showCopyFeedback = (token) => {
+        this.copiedToken = token;
+        if (this.copyFeedbackTimeout) {
+            clearTimeout(this.copyFeedbackTimeout);
+        }
+        this.copyFeedbackTimeout = setTimeout(() => {
+            this.copiedToken = null;
+            this.copyFeedbackTimeout = undefined;
+        }, 1200);
+    };
+    handleTokenCopy = async (token, tokenReference) => {
+        const copied = await this.copyToClipboard(tokenReference);
+        if (copied) {
+            this.showCopyFeedback(token);
+        }
+    };
+    renderTokenColorItem = (token) => {
+        const tokenReference = this.getTokenReference(token);
+        const swatchStyle = this.getTokenSwatchStyle(token, tokenReference);
+        const isCopied = this.copiedToken === token;
+        const resolvedTokenColor = this.formatTokenDisplayValue(this.getResolvedTokenColorValue(token));
+        return (h("button", { type: "button", class: {
+                'token-color': true,
+                'token-color--button': true,
+                'token-color--copied': isCopied,
+            }, title: "Copy variable reference", onClick: () => this.handleTokenCopy(token, tokenReference) }, h("div", { class: "token-color__swatch", style: swatchStyle }), h("div", { class: "token-color__meta" }, h("div", { class: "token-color__name" }, token), this.showVariables && (h("div", { class: "token-color__value" }, tokenReference)), resolvedTokenColor && (h("div", { class: "token-color__theme-value" }, resolvedTokenColor))), h("span", { class: "token-color__copied-overlay", "aria-hidden": "true" }, "coppied")));
+    };
+    renderTokenSection = (section) => {
+        if (this.withSubsections.has(section.title)) {
+            const colorSubsections = this.getColorTokenSubsections(section.tokens, section.title);
+            return (h("div", { class: "token-section" }, h("div", { class: "token-section__title" }, section.title), h("div", { class: "token-section__subsections" }, colorSubsections.map(subsection => (h("div", { class: "token-subsection" }, h("div", { class: "token-subsection__title" }, subsection.title), h("div", { class: "token-section__grid" }, subsection.tokens.map(token => this.renderTokenColorItem(token)))))))));
+        }
+        return (h("div", { class: "token-section" }, h("div", { class: "token-section__title" }, section.title), h("div", { class: "token-section__grid" }, section.tokens.map(token => this.renderTokenColorItem(token)))));
     };
     // Render a single color item
     renderColorItem = (colorName) => {
@@ -46,15 +590,17 @@ export class TetColors {
         return (h("div", { class: `section section-${sectionKey}` }, h("div", { class: "section__title" }, section.title), section.colors.map((color) => this.renderColorItem(color))));
     };
     render() {
-        return (h(Host, { key: '6a4dce8b04da6f875d7df6fb8fdce62f0fb3f779' }, h("div", { key: '8e0a1d536e53b0ef4689be61b4ca1bf0336b2098', class: {
+        return (h(Host, { key: 'd539a0215ced319249b1a1cc388947f9f7fe51ef' }, h("div", { key: 'f80d11e8307e4d10b4c14d57fa12fd49d4c8e9a4', class: {
                 'dark': this.darkTheme
-            } }, h("div", { key: 'fdb4c05aa1b72ebd393f594cf2cbad90f0a3fe3c', class: {
+            } }, !this.isTokensExample && (h("div", { key: 'f1ea8318f7158d3ef99ae5856c1abc506d283aeb', class: {
                 'container': true,
                 'variable-container': true,
-            } }, h("div", { key: '75ca21283ecc74a5230ddebe614141b433423bd3', class: "container-title main" }, "Kr\u0101sas klase"), h("div", { key: '6b8f36b9646c1a51d873573c674b5eb6ceaa0d46', class: "container-section" }, h("div", { key: '4d4b5be1a38a3bfe20fed3874c91bf999d64eaaa', class: "variable-wrapper" }, h("span", { key: 'e357b976373f24470658702ec41e7187ee6e08ef', class: "variable-name" }, h("span", { key: '0ac0df6f04800eb1a3eec7485fbf4f382b4bf516', class: "variable-part" }, "tet"), h("span", { key: 'de0ac8a8e5fb44e579b1084cd4a6c3ec1e664d3d', class: "variable-part variable variable-attribute" }, "-color"), h("span", { key: '6efe25d0250588f547ba863711c1ec6209176646', class: "variable-part variable variable-color" }, "__red30"), h("span", { key: 'e5eaff8c1a65b9f466e69a90670d9439ca8d05cb', class: "variable-part variable variable-type" }, "--background"), h("span", { key: '3a356c3defd94c75869a90f244c57691d38c512b', class: "variable-part variable variable-state" }, "-focus"))))), h("div", { key: 'fd7148051a59885d63a68f184d16276626d5a3bd', class: "container" }, h("div", { key: 'e6ac1ce9ea0cb92c80e9a6f2d5166b2a961d5ecf', class: "container-title" }, "Piem\u0113ri"), h("div", { key: '1c629eadcbbe275dd80e66832095b76e75ddf893', class: "container-section container-example" }, h("span", { key: '2880595c97500b1f62d5b071b2017e122740361f', class: "subsection-title" }, "Teksta kr\u0101sas mai\u0146a"), h("code", { key: '7c772d1bb3948c6adfadfb13141ca70073688fd4', class: "variable-example" }, "<div class=\"tet-color__red30\">Teksts</div>"), h("span", { key: 'cfa72240a3a7f28a4aa5b21fcb138b17a522ec52' }, "Teksta kr\u0101sas mai\u0146a", ' ', h("span", { key: 'cf530855955ca8c6d8d8086486a8fc4a20f8f66b', class: "example-element tet-color__red30" }, "elementam"), "."), h("code", { key: '33c643b901b641273fab72a20fa7bf25718276b5', class: "variable-example" }, "<div class=\"tet-color__red30--hover\">Teksts</div>"), h("span", { key: 'd2683f2402ce077ec42c53b9c1e9c99351acc340' }, "Teksta kr\u0101sas mai\u0146a", ' ', h("span", { key: '80b2a20544c53b3e3181d391fa33a14d25b6c8fb', class: "example-element example-element--hover tet-color__red30--hover" }, "elementam"), ' ', "hover st\u0101vokl\u012B."), h("code", { key: 'bfbbd78a221e13dc8a6bed0e6ba9c977db72d6ac', class: "variable-example" }, "<div class=\"tet-color__red30--focus\">Teksts</div>"), h("span", { key: 'db78b2a47d8c0a744cb3191e2b60ae904d1e4152' }, "Teksta kr\u0101sas mai\u0146a", ' ', h("span", { key: 'd7bd3232a1eedafe967b1894573ff3a4bf36941f', tabindex: "0", class: "example-element tet-color__red30--focus" }, "elementam"), ' ', "focus st\u0101vokl\u012B."), h("span", { key: 'e603c3a4f1fd3b3e3b6e2fb53ba7dd051f27ef7a', class: "subsection-title" }, "Fona kr\u0101sas mai\u0146a"), h("code", { key: '2c5bcb89b364adbf86e6a2c04a857e964d4fbb8c', class: "variable-example" }, "<div class=\"tet-color__red30--background\">Teksts</div>"), h("span", { key: '1d0d919780c26109e013a20c4137942e5b81ee55' }, "Fona kr\u0101sas mai\u0146a", ' ', h("span", { key: '7de3229ebdf411fbc2f2f5afc6dfa612edcc5512', class: "example-element tet-color__red30--background" }, "elementam"), "."), h("code", { key: '0b07aaf0849d9a70705d470cefc977a1db95fa93', class: "variable-example" }, "<div class=\"tet-color__red30--background-hover\">Teksts</div>"), h("span", { key: '2fc977ddbcc068ca3d327ee208e86ff7f16e4974' }, "Fona kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: '12999580a2b7ce3deb5ddbf3cd0209eb20a752f7', class: "example-element example-element--hover tet-color__red30--background-hover" }, "elementam"), ' ', "hover st\u0101vokl\u012B."), h("code", { key: '7af2442f8c7e9f4551afcaa42e9251b022fd14a4', class: "variable-example" }, "<div class=\"tet-color__red30--background-focus\">Teksts</div>"), h("span", { key: '2483e0ebb0734f4ab0f8b5bc100ddf1892f51a6c' }, "Fona kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: 'cad73a74717810c9f628c00149392a33736e9307', tabindex: "0", class: "example-element tet-color__red30--background-focus" }, "elementam"), ' ', "focus st\u0101vokl\u012B."), h("span", { key: '08d09e4802ffed994754614781d6a0001469f688', class: "subsection-title" }, "Apmales kr\u0101sas mai\u0146a"), h("code", { key: '3d61ac8895d40b8beecd465e330cb34152737812', class: "variable-example" }, "<div class=\"tet-color__red30--border\">Teksts</div>"), h("span", { key: 'f03cc1d75c0c234ec2b56745540c868a1f6399a8' }, "Apmales kr\u0101sas mai\u0146a", ' ', h("span", { key: '1adacb68c475d656993f300ca5c76e282ab4dffa', class: "example-element border-example tet-color__red30--border" }, "elementam"), "."), h("code", { key: '41ca1e6966b1dd62b2219e7b1f9d264e81468a6b', class: "variable-example" }, "<div class=\"tet-color__red30--border-hover\">Teksts</div>"), h("span", { key: '4bafa963c2773c136882b6f5bbc7341821bad7c0' }, "Apmales kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: '591962355db313dce607925db0a25e2e2defc220', class: "example-element example-element--hover border-example tet-color__red30--border-hover" }, "elementam"), ' ', "hover st\u0101vokl\u012B."), h("code", { key: 'd163a9434ad588d2c194f832523cee481b338196', class: "variable-example" }, "<div class=\"tet-color__red30--border-focus\">Teksts</div>"), h("span", { key: '526e9375f7248e926a7741abc1948095be129f65' }, "Apmales kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: 'c0f0dad67b87ae13aec69405003180259b6afd31', tabindex: "0", class: "example-element border-example tet-color__red30--border-focus" }, "elementam"), ' ', "focus st\u0101vokl\u012B."), h("span", { key: '350aac3536cea323f7d9d4bbed9a5944bad8259e', class: "subsection-title" }, "Nemain\u012Bga gai\u0161\u0101s t\u0113mas kr\u0101sa"), h("code", { key: '5566a3b1bf0574a48ac77978b28244c1e21b85d3', class: "variable-example" }, "<div class=\"tet-color__red30 tet-color--static\">Teksts</div>"), h("span", { key: '9282e805a35b3f7c04024624f53c516bb2236ea2' }, "Nemain\u012Bga teksta kr\u0101sa", ' ', h("span", { key: 'ab89e4a0d11c60522732f8f92b082cd096fdb633', class: "example-element tet-color__red30 tet-color--static" }, "elementam"), "."))), h("div", { key: '38f15f72bf53cfeda29147142addee4367dacd66', class: {
+            } }, h("div", { key: 'bc9b04c7cd38ee8c94d4f55a3987041b56feb961', class: "container-title main" }, "Kr\u0101sas klase"), h("div", { key: '6010441161d151828798581401963eb888be814f', class: "container-section" }, h("div", { key: 'b2f3e3c4a7fb4247b879e6202305b63f12aef557', class: "variable-wrapper" }, h("span", { key: '3d0ef51c0703e059cc26cba947ff766b646ceeed', class: "variable-name" }, h("span", { key: '1f8c4bfc4f8a1b9ae894a6d2efd739e160c77e68', class: "variable-part" }, "tet"), h("span", { key: '14c6b9b61b1a3e07d1253df735278a96fcc4bb84', class: "variable-part variable variable-attribute" }, "-color"), h("span", { key: 'bfca14285663f716ec6b0264df306fcb5e7b4f59', class: "variable-part variable variable-color" }, "__red30"), h("span", { key: '412dd55936ed4e6b5c6c8d906b1acca69219c6c7', class: "variable-part variable variable-type" }, "--background"), h("span", { key: '8455f98e02a5118529eb48d96363a8a9e001bbd0', class: "variable-part variable variable-state" }, "-focus")))))), !this.isTokensExample && (h("div", { key: 'b024b02bbb06fd5a74c9a7dc8d2299ec3412791e', class: "container" }, h("div", { key: 'f6e0832c0bf71e4a5bad8b38879596947f55a565', class: "container-title" }, "Piem\u0113ri"), h("div", { key: '62af0ae3d8c47f57bce94b2f2458a0078f1c1e45', class: "container-section container-example" }, h("span", { key: '33c07a240272634c86852079f00d2c1fd320f8ea', class: "subsection-title" }, "Teksta kr\u0101sas mai\u0146a"), h("code", { key: 'b0252f9a064ee8d5a8ef6590e38f83982197d4f0', class: "variable-example" }, "<div class=\"tet-color__red30\">Teksts</div>"), h("span", { key: '693c5e318c6ce11535ae3dc50e2165cee6a8699f' }, "Teksta kr\u0101sas mai\u0146a", ' ', h("span", { key: 'b62c420fdfd9f7fc06a8600263de3142c73c5138', class: "example-element tet-color__red30" }, "elementam"), "."), h("code", { key: '78e240859edd731486c18b55f0ca32307c1aa186', class: "variable-example" }, "<div class=\"tet-color__red30--hover\">Teksts</div>"), h("span", { key: '55a5733aa4da6c69cdfdc60073dc4a6d3415be9e' }, "Teksta kr\u0101sas mai\u0146a", ' ', h("span", { key: 'd75a191bf14805ddd4a54fec4975a8f4f3113d65', class: "example-element example-element--hover tet-color__red30--hover" }, "elementam"), ' ', "hover st\u0101vokl\u012B."), h("code", { key: '8cd739c11ab23ded9409948e79054b79852c3b4f', class: "variable-example" }, "<div class=\"tet-color__red30--focus\">Teksts</div>"), h("span", { key: '411cd59dcf50dee2f68ebaca193872b8d8585542' }, "Teksta kr\u0101sas mai\u0146a", ' ', h("span", { key: 'fe6b9b41f5557fed28efd61e78485a7611e6be9c', tabindex: "0", class: "example-element tet-color__red30--focus" }, "elementam"), ' ', "focus st\u0101vokl\u012B."), h("span", { key: 'eaeb96efaad2c3690ae6fd6ce0775f075dbdbd64', class: "subsection-title" }, "Fona kr\u0101sas mai\u0146a"), h("code", { key: '35d28cfa6a1be73bb1413a7d78b1c8a61c14b47d', class: "variable-example" }, "<div class=\"tet-color__red30--background\">Teksts</div>"), h("span", { key: 'fee78d51e972dbfe7e8179b495114d0584bc2141' }, "Fona kr\u0101sas mai\u0146a", ' ', h("span", { key: '648b11351a204d4ee522a9b4816f14f8f9c578bb', class: "example-element tet-color__red30--background" }, "elementam"), "."), h("code", { key: 'bb72c4c2c1abb1e3055d9116fd45dc957c30c886', class: "variable-example" }, "<div class=\"tet-color__red30--background-hover\">Teksts</div>"), h("span", { key: '196377c4ad7f76da5af80a1eb3f974746e27b9e1' }, "Fona kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: 'ac43461a9b05305f4d8ded446650690ddc97359a', class: "example-element example-element--hover tet-color__red30--background-hover" }, "elementam"), ' ', "hover st\u0101vokl\u012B."), h("code", { key: 'e8bf930ea7e335ea82ebe2410633c98faf94818c', class: "variable-example" }, "<div class=\"tet-color__red30--background-focus\">Teksts</div>"), h("span", { key: '37efda044398e8f1b9538ec65c9ec1a73572bc5d' }, "Fona kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: 'b884e73adc2377057d968a60b0bec0af116de4aa', tabindex: "0", class: "example-element tet-color__red30--background-focus" }, "elementam"), ' ', "focus st\u0101vokl\u012B."), h("span", { key: 'f8e028684be9c400c3fc528b7872e3dd648325ff', class: "subsection-title" }, "Apmales kr\u0101sas mai\u0146a"), h("code", { key: 'c41cfdcc134913f38cda959b4a0ec371a11f85dc', class: "variable-example" }, "<div class=\"tet-color__red30--border\">Teksts</div>"), h("span", { key: '00a0949525fdbba013fcfcfefd1a6c66828ff393' }, "Apmales kr\u0101sas mai\u0146a", ' ', h("span", { key: '2c97afc63ed19da1d000e776e15763b10fa90074', class: "example-element border-example tet-color__red30--border" }, "elementam"), "."), h("code", { key: '2ad19aae252d045c416081764a1983da433f45d9', class: "variable-example" }, "<div class=\"tet-color__red30--border-hover\">Teksts</div>"), h("span", { key: '09db590357f26b7f08f2d1d52b88b3923714a328' }, "Apmales kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: '1ad2fe41054d71bd3ed0470262d12516d7a6ce89', class: "example-element example-element--hover border-example tet-color__red30--border-hover" }, "elementam"), ' ', "hover st\u0101vokl\u012B."), h("code", { key: '38391294631665d68b37a439e891a6a3073f1b0b', class: "variable-example" }, "<div class=\"tet-color__red30--border-focus\">Teksts</div>"), h("span", { key: '263cf9227264b53a3a44d4c5e2fd6336647f4231' }, "Apmales kr\u0101sas mai\u0146a elementam", ' ', h("span", { key: '3faee8ff2c60b1974142fb1944057076260b1267', tabindex: "0", class: "example-element border-example tet-color__red30--border-focus" }, "elementam"), ' ', "focus st\u0101vokl\u012B."), h("span", { key: '859334866aed08e176d2289886d146bd32a9cf7b', class: "subsection-title" }, "Nemain\u012Bga gai\u0161\u0101s t\u0113mas kr\u0101sa"), h("code", { key: 'fafacb713e2a73207f19372b0adba42b39d76b74', class: "variable-example" }, "<div class=\"tet-color__red30 tet-color--static\">Teksts</div>"), h("span", { key: '130e6e50de614bad85a99f7a39ec9694cc64762d' }, "Nemain\u012Bga teksta kr\u0101sa", ' ', h("span", { key: '3862a84142894d8e5f31ac36437f51b0809748b0', class: "example-element tet-color__red30 tet-color--static" }, "elementam"), ".")))), !this.isTokensExample && (h("div", { key: '6b2564cd5042f8093d34f7cb9fff47cc6a678692', class: {
                 'container': true,
                 'show-variables': this.showVariables
-            } }, h("div", { key: '403addb80208b58a8e34f332867b9ef55574a89b', class: "container-title" }, "Kr\u0101sas un To\u0146i"), h("div", { key: 'e99ad0bf37b07aa46010cad95f5dcdc99fa01cff', class: "container-section" }, Object.entries(this.colorSections).map(([key, section]) => this.renderColorSection(key, section)))))));
+            } }, h("div", { key: 'ccd69f6932bd1abecd0f2d00e3e4b75436a74615', class: "container-title" }, "Kr\u0101sas un To\u0146i"), h("div", { key: 'b86fad52759a9e29f739500d50cd89052fd7554a', class: "container-section" }, Object.entries(this.colorSections).map(([key, section]) => this.renderColorSection(key, section))))), this.isTokensExample && (h("div", { key: '75eed7726622872258499ed97a621541958de5db', class: "container" }, h("div", { key: 'fda6c745faf620e66e2710a5499655ebcf7bb957', class: "container-title main" }, "Tokens"), h("div", { key: '6c8ee0af99c279eb3c9c65562de0b7ec77e0f5c0', class: "container-section token-sections" }, this.tokenSections.length
+            ? this.tokenSections.map(section => this.renderTokenSection(section))
+            : h("div", { class: "token-empty-state" }, "Tokens not found.")))))));
     }
     static get is() { return "tet-colors"; }
     static get encapsulation() { return "shadow"; }
@@ -105,7 +651,40 @@ export class TetColors {
                 "attribute": "dark-theme",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "isTokensExample": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display tokens example and hide class/palette examples."
+                },
+                "attribute": "is-tokens-example",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "tokenSections": {},
+            "copiedToken": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "isTokensExample",
+                "methodName": "handleTokenSectionStateChange"
+            }, {
+                "propName": "darkTheme",
+                "methodName": "handleTokenSectionStateChange"
+            }];
+    }
 }