@fluid-topics/ft-button 2.0.37 → 2.1.0

package/build/ft-base-button.js

@@ -1,212 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { FtLitElement, isSafari, toFtFormComponent, unslotText } from "@fluid-topics/ft-wc-utils";
-import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtTooltip } from "@fluid-topics/ft-tooltip";
-import { FtIcon } from "@fluid-topics/ft-icon";
-import { FtLoader } from "@fluid-topics/ft-loader";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-export class FtBaseButton extends toFtFormComponent(FtLitElement) {
-    get buttonClasses() {
-        return {};
-    }
-    get typographyVariant() {
-        return "";
-    }
-    constructor() {
-        super();
-        this.href = undefined;
-        this.target = undefined;
-        this.type = "button";
-        this.disabled = false;
-        this.label = "";
-        this.icon = undefined;
-        this.trailingIcon = false;
-        this.loading = false;
-        this.ariaLabel = null;
-        this.ariaHasPopup = null;
-        this.ariaPressed = null;
-        this.tooltipPosition = "bottom";
-        this.hideTooltip = false;
-        this.forceTooltip = false;
-        this.activated = false;
-        this.addEventListener("click", (e) => {
-            var _a;
-            if (this.isDisabled()) {
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-            }
-            else if (this.type == "submit") {
-                (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
-            }
-        });
-    }
-    render() {
-        var _a, _b, _c;
-        const content = html `
-            <ft-ripple part="ripple"
-                       ?disabled=${this.isDisabled()}
-                       ?activated=${this.activated}
-            ></ft-ripple>
-            <ft-or-ftds-typography part="label"
-                                   variant="${this.typographyVariant}"
-                                   element="span"
-                                   class="ft-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
-                                   ?hidden=${!this.hasTextContent()}>
-                <slot @slotchange=${this.onSlotchange}></slot>
-            </ft-or-ftds-typography>
-            ${this.resolveIcon()}
-        `;
-        const href = this.href != null && this.href.trim().length > 0 ? this.href : undefined;
-        return this.addTooltipIfNeeded(href ? html `
-            <a href="${href}"
-               target="${(_a = this.target) !== null && _a !== void 0 ? _a : "_self"}"
-               part="button"
-               class="${classMap(this.buttonClasses)}"
-               aria-label="${(_b = this.ariaLabel) !== null && _b !== void 0 ? _b : this.getLabel()}"
-               ?disabled=${this.isDisabled()}>
-                ${content}
-            </a>
-        ` : html `
-            <button part="button"
-                    class="${classMap(this.buttonClasses)}"
-                    aria-label="${(_c = this.ariaLabel) !== null && _c !== void 0 ? _c : this.getLabel()}"
-                    aria-haspopup="${ifDefined(this.ariaHasPopup)}"
-                    aria-pressed="${ifDefined(this.ariaPressed)}"
-                    ?disabled=${this.isDisabled()}>
-                ${content}
-            </button>
-        `);
-    }
-    addTooltipIfNeeded(button) {
-        return this.getLabel().trim().length > 0 && (this.forceTooltip || (!this.hasTextContent() && !this.hideTooltip))
-            ? html `
-                <ft-tooltip part="tooltip"
-                            text="${this.getLabel()}"
-                            position="${this.tooltipPosition}">
-                    ${button}
-                </ft-tooltip>
-            `
-            : button;
-    }
-    resolveIcon() {
-        if (this.loading) {
-            return html `
-                <ft-loader part="loader icon"></ft-loader> `;
-        }
-        else {
-            return this.icon ? html `
-                <ft-icon part="icon" .variant=${this.iconVariant} .value=${this.icon}></ft-icon>
-            ` : html `
-                <slot part="icon" name="icon"></slot>
-            `;
-        }
-    }
-    focus() {
-        var _a;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    showTooltip() {
-        var _a;
-        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.show();
-    }
-    showTemporaryTooltip(text, duration) {
-        var _a;
-        return (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTemporaryText(text, duration);
-    }
-    setTooltipManual(manualTooltip) {
-        if (this.tooltip) {
-            this.tooltip.manual = manualTooltip;
-        }
-    }
-    click() {
-        var _a;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.click();
-    }
-    getLabel() {
-        return this.label || this.getTextContent();
-    }
-    getTextContent() {
-        return unslotText(this.slottedContent).trim();
-    }
-    hasTextContent() {
-        return this.getTextContent().length > 0;
-    }
-    onSlotchange() {
-        this.requestUpdate();
-    }
-    isDisabled() {
-        return this.disabled || this.loading;
-    }
-}
-FtBaseButton.elementDefinitions = {
-    "ft-ripple": FtRipple,
-    "ft-tooltip": FtTooltip,
-    "ft-icon": FtIcon,
-    "ft-loader": FtLoader,
-};
-__decorate([
-    property()
-], FtBaseButton.prototype, "href", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "target", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseButton.prototype, "disabled", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "label", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "icon", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "iconVariant", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseButton.prototype, "trailingIcon", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseButton.prototype, "loading", void 0);
-__decorate([
-    property({ attribute: "aria-label" })
-], FtBaseButton.prototype, "ariaLabel", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "ariaHasPopup", void 0);
-__decorate([
-    property({ attribute: "aria-pressed" })
-], FtBaseButton.prototype, "ariaPressed", void 0);
-__decorate([
-    property()
-], FtBaseButton.prototype, "tooltipPosition", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseButton.prototype, "hideTooltip", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseButton.prototype, "forceTooltip", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseButton.prototype, "activated", void 0);
-__decorate([
-    query(".ft-button")
-], FtBaseButton.prototype, "button", void 0);
-__decorate([
-    query(".ft-button--label slot")
-], FtBaseButton.prototype, "slottedContent", void 0);
-__decorate([
-    query("[part=tooltip]")
-], FtBaseButton.prototype, "tooltip", void 0);

package/build/ftds-button.d.ts

@@ -1,20 +0,0 @@
-import { FtBaseButton } from "./ft-base-button";
-import { FtdsButtonProperties } from "./ftds-button.properties";
-import { ClassInfo } from "lit/directives/class-map.js";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-import { FtIconVariants } from "@fluid-topics/ft-icon";
-declare const FtdsButton_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtBaseButton>;
-export declare class FtdsButton extends FtdsButton_base implements FtdsButtonProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    primary: boolean;
-    secondary: boolean;
-    tertiary: boolean;
-    round: boolean;
-    family: DesignSystemFamily;
-    iconVariant: FtIconVariants;
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    get buttonClasses(): ClassInfo;
-    get typographyVariant(): string;
-}
-export {};

package/build/ftds-button.js

@@ -1,69 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { FtBaseButton } from "./ft-base-button";
-import { property } from "lit/decorators.js";
-import { safariEllipsisFix, toFtdsBase } from "@fluid-topics/ft-wc-utils";
-import { designSystemStyles } from "./ftds-button.styles";
-import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
-import { FtIconVariants } from "@fluid-topics/ft-icon";
-import { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-export class FtdsButton extends toFtdsBase(FtBaseButton) {
-    constructor() {
-        super(...arguments);
-        this.primary = false;
-        this.secondary = false;
-        this.tertiary = false;
-        this.round = false;
-        this.family = DesignSystemFamily.brand;
-        this.iconVariant = FtIconVariants.fluid_topics;
-    }
-    get buttonClasses() {
-        return {
-            "ft-button": true,
-            "ft-button--primary": this.primary,
-            "ft-button--secondary": this.secondary,
-            "ft-button--tertiary": this.tertiary || (!this.primary && !this.secondary),
-            "ft-button--icon-only": !this.hasTextContent(),
-            "ft-button--trailing-icon": this.trailingIcon,
-            "ft-button--loading": this.trailingIcon,
-            "ft-no-text-select": true,
-            "ft-button--no-icon": !this.icon,
-            "ft-button--round": this.round,
-            ...this.getDesignSystemBaseClasses(),
-        };
-    }
-    get typographyVariant() {
-        switch (this.size) {
-            case DesignSystemSize.large:
-                return FtdsTypographyVariants.body2medium;
-            case DesignSystemSize.medium:
-                return FtdsTypographyVariants.caption1medium;
-            case DesignSystemSize.small:
-                return FtdsTypographyVariants.caption2medium;
-        }
-    }
-}
-FtdsButton.elementDefinitions = {
-    ...FtBaseButton.elementDefinitions,
-    "ft-or-ftds-typography": FtdsTypography,
-};
-FtdsButton.styles = [
-    safariEllipsisFix,
-    designSystemStyles,
-];
-__decorate([
-    property({ type: Boolean })
-], FtdsButton.prototype, "primary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsButton.prototype, "secondary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsButton.prototype, "tertiary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsButton.prototype, "round", void 0);

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

@@ -1,6 +0,0 @@
-import { FtBaseButtonProperties } from "./ft-base-button";
-export interface FtdsButtonProperties extends FtBaseButtonProperties {
-    primary?: boolean;
-    secondary?: boolean;
-    tertiary?: boolean;
-}

package/build/ftds-button.properties.js

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

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

@@ -1,148 +0,0 @@
-export declare const FtdsButtonCssVariables: {
-    iconOnlyScale: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    largeIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    mediumIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    smallIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    xSmallHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    xSmallIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    xSmallFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    xSmallFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    xSmallIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    roundBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    primaryBrandDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    focusFocusRingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryBrandDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryInfoDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiarySuccessDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryWarningDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryErrorDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    tertiaryNeutralDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryBrandBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryNeutralBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryInfoStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondarySuccessStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryWarningStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    secondaryErrorStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
-export declare const designSystemStyles: import("lit").CSSResult[];