@fluid-topics/ft-card 2.0.37 → 2.1.0

package/build/ft-card.styles.d.ts

@@ -1,20 +1,20 @@
 export declare const FtCardCssVariables: {
-    padding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    hoverBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    outlineStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    outlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    outlineColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    selectedOutlineStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    selectedOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    selectedOutlineColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    selectedBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceHigh: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    elevation04: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    padding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderStyle: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    hoverBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    outlineStyle: import("@fluid-topics/design-system-variables").FtCssVariable;
+    outlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    outlineColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectedOutlineStyle: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectedOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectedOutlineColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    selectedBorderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorSurface: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorOnSurfaceMedium: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorOnSurfaceHigh: import("@fluid-topics/design-system-variables").FtCssVariable;
+    elevation02: import("@fluid-topics/design-system-variables").FtCssVariable;
+    elevation04: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const classicStyles: import("lit").CSSResult;

package/build/index.d.ts

@@ -1,13 +1,4 @@
 export * from "./ft-card";
 export * from "./ft-card.styles";
 export * from "./ft-card.properties";
-export * from "./ftds-card";
-export * from "./ftds-card.styles";
-export * from "./ftds-card.properties";
-export * from "./ftds-card-user-info";
-export * from "./ftds-card-user-info.styles";
-export * from "./ftds-card-user-info.properties";
-export * from "./ftds-card-labelled-info";
-export * from "./ftds-card-labelled-info.styles";
-export * from "./ftds-card-labelled-info.properties";
 import "./define";

package/build/index.js

@@ -1,13 +1,4 @@
 export * from "./ft-card";
 export * from "./ft-card.styles";
 export * from "./ft-card.properties";
-export * from "./ftds-card";
-export * from "./ftds-card.styles";
-export * from "./ftds-card.properties";
-export * from "./ftds-card-user-info";
-export * from "./ftds-card-user-info.styles";
-export * from "./ftds-card-user-info.properties";
-export * from "./ftds-card-labelled-info";
-export * from "./ftds-card-labelled-info.styles";
-export * from "./ftds-card-labelled-info.properties";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-card",
-    "version": "2.0.37",
+    "version": "2.1.0",
     "description": "A file uploader with drag and drop",
     "keywords": [
         "Lit"
@@ -19,10 +19,10 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-ripple": "2.0.37",
-        "@fluid-topics/ft-typography": "2.0.37",
-        "@fluid-topics/ft-wc-utils": "2.0.37",
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-typography": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "ef1f68e09e0331293931458a6479b551dcc4cecc"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

package/build/ftds-card-labelled-info.d.ts

@@ -1,9 +0,0 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtdsCardLabelledInfoProperties } from "./ftds-card-labelled-info.properties";
-export declare class FtdsCardLabelledInfo extends FtLitElement implements FtdsCardLabelledInfoProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult;
-    label: string;
-    info: string;
-    protected render(): import("lit-html").TemplateResult<1>;
-}

package/build/ftds-card-labelled-info.js

@@ -1,40 +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, } from "@fluid-topics/ft-wc-utils";
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ft-typography";
-import { labelledInfoStyles } from "./ftds-card-labelled-info.styles";
-export class FtdsCardLabelledInfo extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.info = "";
-    }
-    render() {
-        return html `
-            <div id="container">
-                <ftds-typography class="label" variant="${FtdsTypographyVariants.caption2medium}">
-                    ${this.label}
-                </ftds-typography>
-                <ftds-typography class="info" variant="${FtdsTypographyVariants.body2medium}">
-                    ${this.info}
-                </ftds-typography>
-            </div>
-        `;
-    }
-}
-FtdsCardLabelledInfo.elementDefinitions = {
-    "ftds-typography": FtdsTypography,
-};
-FtdsCardLabelledInfo.styles = labelledInfoStyles;
-__decorate([
-    property()
-], FtdsCardLabelledInfo.prototype, "label", void 0);
-__decorate([
-    property()
-], FtdsCardLabelledInfo.prototype, "info", void 0);

package/build/ftds-card-labelled-info.properties.d.ts

@@ -1,4 +0,0 @@
-export interface FtdsCardLabelledInfoProperties {
-    label: string;
-    info: string;
-}

package/build/ftds-card-labelled-info.properties.js

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

package/build/ftds-card-labelled-info.styles.d.ts

@@ -1 +0,0 @@
-export declare const labelledInfoStyles: import("lit").CSSResult;

package/build/ftds-card-labelled-info.styles.js

@@ -1,21 +0,0 @@
-import { css } from "lit";
-import { foundation, semantic, } from "@fluid-topics/ft-wc-utils";
-// language=CSS
-export const labelledInfoStyles = css `
-    :host {
-    }
-
-    #container {
-        display: flex;
-        flex-direction: column;
-        gap: ${foundation.spacing1};
-    }
-
-    .label {
-        color: ${semantic.contentGlobalSecondary};
-    }
-
-    .info {
-        color: ${semantic.contentGlobalPrimary};
-    }
-`;

package/build/ftds-card-user-info.d.ts

@@ -1,8 +0,0 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { CardUserProfile, FtdsCardUserInfoProperties } from "./ftds-card-user-info.properties";
-export declare class FtdsCardUserInfo extends FtLitElement implements FtdsCardUserInfoProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult;
-    user?: CardUserProfile;
-    protected render(): import("lit-html").TemplateResult<1>;
-}

package/build/ftds-card-user-info.js

@@ -1,38 +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, } from "@fluid-topics/ft-wc-utils";
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-import { userInfoStyles } from "./ftds-card-user-info.styles";
-import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
-import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ft-typography";
-export class FtdsCardUserInfo extends FtLitElement {
-    render() {
-        var _a, _b;
-        return html `
-            <div id="container">
-                <ft-icon value="${FtIcons.USER}"></ft-icon>
-                <div id="info">
-                    <ftds-typography class="name" variant="${FtdsTypographyVariants.caption1medium}">
-                        ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.displayName}
-                    </ftds-typography>
-                    <ftds-typography class="mail" variant="${FtdsTypographyVariants.caption1medium}">
-                        ${(_b = this.user) === null || _b === void 0 ? void 0 : _b.emailAddress}
-                    </ftds-typography>
-                </div>
-            </div>
-        `;
-    }
-}
-FtdsCardUserInfo.elementDefinitions = {
-    "ftds-typography": FtdsTypography,
-    "ft-icon": FtIcon,
-};
-FtdsCardUserInfo.styles = userInfoStyles;
-__decorate([
-    property({ attribute: false })
-], FtdsCardUserInfo.prototype, "user", void 0);

package/build/ftds-card-user-info.properties.d.ts

@@ -1,5 +0,0 @@
-import { FtUserProfile } from "@fluid-topics/public-api";
-export type CardUserProfile = Pick<FtUserProfile, "displayName" | "emailAddress">;
-export interface FtdsCardUserInfoProperties {
-    user?: CardUserProfile;
-}

package/build/ftds-card-user-info.properties.js

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

package/build/ftds-card-user-info.styles.d.ts

@@ -1 +0,0 @@
-export declare const userInfoStyles: import("lit").CSSResult;

package/build/ftds-card-user-info.styles.js

@@ -1,31 +0,0 @@
-import { css } from "lit";
-import { foundation, semantic, } from "@fluid-topics/ft-wc-utils";
-import { FtIconCssVariables } from "@fluid-topics/ft-icon";
-// language=CSS
-export const userInfoStyles = css `
-    :host {
-    }
-
-    #container {
-        display: flex;
-        align-items: center;
-        gap: ${foundation.spacing2};
-    }
-
-    ft-icon {
-        ${FtIconCssVariables.size.set(foundation.iconSize5)};
-    }
-
-    #info {
-        display: flex;
-        flex-direction: column;
-
-        .name {
-            color: ${semantic.contentGlobalPrimary};
-        }
-
-        .mail {
-            color: ${semantic.contentGlobalSecondary};
-        }
-    }
-`;

package/build/ftds-card.d.ts

@@ -1,30 +0,0 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtdsCardProperties } from "./ftds-card.properties";
-export declare class FtdsCard extends FtLitElement implements FtdsCardProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult;
-    headerText?: string;
-    headerBorder: boolean;
-    headerHref?: string;
-    selectable: boolean;
-    selected: boolean;
-    private hasHeader;
-    private hasHeaderActions;
-    private hasBody;
-    private hasFooter;
-    private hasFooterActions;
-    private hasSideBar;
-    private headerContent;
-    private headerActionsContent;
-    private bodyContent?;
-    private footerContent;
-    private footerActionsContent;
-    private sideBarContent;
-    private get isClickable();
-    protected render(): import("lit-html").TemplateResult<1>;
-    private renderHeaderText;
-    private onKeydown;
-    private onKeyup;
-    private onClick;
-    private onSlotchange;
-}

package/build/ftds-card.js

@@ -1,180 +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, unslotText, } from "@fluid-topics/ft-wc-utils";
-import { FtdsTypography } from "@fluid-topics/ft-typography";
-import { designSystemStyles, FtdsCardTypographies, } from "./ftds-card.styles";
-import { property, query, queryAssignedNodes, state, } from "lit/decorators.js";
-import { html, nothing, } from "lit";
-import { when } from "lit/directives/when.js";
-import { classMap } from "lit/directives/class-map.js";
-import { FtRipple } from "@fluid-topics/ft-ripple";
-export class FtdsCard extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.headerBorder = false;
-        this.selectable = false;
-        this.selected = false;
-        this.hasHeader = true;
-        this.hasHeaderActions = false;
-        this.hasBody = true;
-        this.hasFooter = true;
-        this.hasFooterActions = false;
-        this.hasSideBar = false;
-    }
-    get isClickable() {
-        return this.selectable || !!this.headerHref;
-    }
-    render() {
-        const classes = {
-            "ftds-card--clickable": this.isClickable,
-            "ftds-card--selected": this.selected,
-            "ftds-card--selectable": this.selectable,
-            "ftds-card--header-border": this.headerBorder,
-            "ftds-card--no-header": !this.hasHeader,
-            "ftds-card--no-header-actions": !this.hasHeaderActions,
-            "ftds-card--no-body": !this.hasBody,
-            "ftds-card--no-footer": !this.hasFooter,
-            "ftds-card--no-footer-actions": !this.hasFooterActions,
-            "ftds-card--no-side-bar": !this.hasSideBar,
-        };
-        return html `
-            <div id="container"
-                 role="${this.selectable ? "checkbox" : nothing}"
-                 aria-checked="${this.selectable ? this.selected.toString() : nothing}"
-                 aria-labelledby="${this.selectable ? "header-title" : nothing}"
-                 tabindex="${this.selectable ? 0 : nothing}"
-                 class="${classMap(classes)}"
-                 @keydown=${this.onKeydown}
-                 @keyup=${this.onKeyup}
-                 @click=${this.onClick}
-            >
-                ${when(!!this.headerHref || this.selectable, () => html `
-                    <ft-ripple ?selected=${this.selected}></ft-ripple>
-                `)}
-                <div id="main">
-                    <div id="image">
-                        <slot name="image" @slotchange=${this.onSlotchange}></slot>
-                    </div>
-                    <div id="header">
-                        <div id="header-title">
-                            ${when(!!this.headerHref, () => html `
-                                    <a href="${this.headerHref}">
-                                        ${this.renderHeaderText()}
-                                    </a>
-                                `, () => html `
-                                    ${this.renderHeaderText()}
-                                `)}
-                            <slot name="header" @slotchange=${this.onSlotchange}></slot>
-                        </div>
-                        <div id="header-actions">
-                            <slot name="header-actions" @slotchange=${this.onSlotchange}></slot>
-                        </div>
-                    </div>
-                    <div id="body">
-                        <slot @slotchange=${this.onSlotchange}></slot>
-                    </div>
-                    <div id="footer">
-                        <div id="footer-text">
-                            <slot name="footer" @slotchange=${this.onSlotchange}></slot>
-                        </div>
-                        <div id="footer-actions">
-                            <slot name="footer-actions" @slotchange=${this.onSlotchange}></slot>
-                        </div>
-                    </div>
-                </div>
-                <div id="side-bar">
-                    <slot name="side-bar" @slotchange=${this.onSlotchange}></slot>
-                </div>
-            </div>
-        `;
-    }
-    renderHeaderText() {
-        return html `
-            <ftds-typography variant="${FtdsCardTypographies.header}">${this.headerText}</ftds-typography>
-        `;
-    }
-    onKeydown(event) {
-        if (this.selectable && event.code === "Space") {
-            event.preventDefault();
-        }
-    }
-    onKeyup(event) {
-        if (this.selectable && event.code === "Space") {
-            this.dispatchEvent(new CustomEvent("change", { detail: !this.selected }));
-        }
-    }
-    onClick() {
-        if (this.selectable) {
-            this.dispatchEvent(new CustomEvent("change", { detail: !this.selected }));
-        }
-    }
-    onSlotchange() {
-        var _a, _b;
-        this.hasHeader = this.headerContent.length > 0 || !!this.headerText;
-        this.hasHeaderActions = this.headerActionsContent.length > 0;
-        this.hasBody = unslotText(this.bodyContent).trim().length > 0 || ((_b = (_a = this.bodyContent) === null || _a === void 0 ? void 0 : _a.assignedElements()) !== null && _b !== void 0 ? _b : []).length > 0;
-        this.hasFooter = this.footerContent.length > 0;
-        this.hasFooterActions = this.footerActionsContent.length > 0;
-        this.hasSideBar = this.sideBarContent.length > 0;
-    }
-}
-FtdsCard.elementDefinitions = {
-    "ftds-typography": FtdsTypography,
-    "ft-ripple": FtRipple,
-};
-FtdsCard.styles = designSystemStyles;
-__decorate([
-    property()
-], FtdsCard.prototype, "headerText", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsCard.prototype, "headerBorder", void 0);
-__decorate([
-    property()
-], FtdsCard.prototype, "headerHref", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsCard.prototype, "selectable", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsCard.prototype, "selected", void 0);
-__decorate([
-    state()
-], FtdsCard.prototype, "hasHeader", void 0);
-__decorate([
-    state()
-], FtdsCard.prototype, "hasHeaderActions", void 0);
-__decorate([
-    state()
-], FtdsCard.prototype, "hasBody", void 0);
-__decorate([
-    state()
-], FtdsCard.prototype, "hasFooter", void 0);
-__decorate([
-    state()
-], FtdsCard.prototype, "hasFooterActions", void 0);
-__decorate([
-    state()
-], FtdsCard.prototype, "hasSideBar", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "header" })
-], FtdsCard.prototype, "headerContent", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "header-actions" })
-], FtdsCard.prototype, "headerActionsContent", void 0);
-__decorate([
-    query("#body slot")
-], FtdsCard.prototype, "bodyContent", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "footer" })
-], FtdsCard.prototype, "footerContent", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "footer-actions" })
-], FtdsCard.prototype, "footerActionsContent", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "side-bar" })
-], FtdsCard.prototype, "sideBarContent", void 0);

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

@@ -1,7 +0,0 @@
-export interface FtdsCardProperties {
-    headerText?: string;
-    headerBorder?: boolean;
-    headerHref?: string;
-    selectable?: boolean;
-    selected?: boolean;
-}

package/build/ftds-card.properties.js

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

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

@@ -1,51 +0,0 @@
-import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-export declare const FtdsCardCssVariables: {
-    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
-    focusFocusRingColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    focusOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
-    focusOutlineOffset: import("@fluid-topics/design-system-variables").FtCssVariable;
-    headerTitleHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    headerTitleVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    headerActionHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    headerActionVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    headerActionGap: import("@fluid-topics/design-system-variables").FtCssVariable;
-    bodyHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    bodyVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    footerActionHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    footerActionVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    footerActionGap: import("@fluid-topics/design-system-variables").FtCssVariable;
-    footerContentHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    footerContentVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    sideBarHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    sideBarVerticalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
-    sideBarGap: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableDefaultBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableDefaultBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableHoverBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableFocusBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    nonSelectableFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    internalBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedDefaultBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedDefaultBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedHoverBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedFocusBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableUnselectedFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedDefaultStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    selectableSelectedFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
-    internalBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
-};
-export declare const FtdsCardTypographies: {
-    header: FtdsTypographyVariants;
-};
-export declare const designSystemStyles: import("lit").CSSResult;