@m3e/card 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/src/CardElement.d.ts

@@ -1,168 +0,0 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
-import { CardVariant } from "./CardVariant";
-import { CardOrientation } from "./CardOrientation";
-declare const M3eCardElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormSubmitterMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
-/**
- * @summary
- * A content container for text, images (or other media), and actions in the context of a single subject.
- *
- * @description
- * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,
- * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the
- * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),
- * and `elevated` (for depth and motion with shadow elevation).
- *
- * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be
- * presented inline with surrounding content using the `inline` attribute.
- *
- * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is
- * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default
- * slot for custom layouts.
- *
- * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states
- * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,
- * and a cohesive user experience in accordance with Material Design 3 guidelines.
- *
- * @example
- * The following example illustrates each of the dedicated slots of a card.
- * ```html
- * <m3e-card>
- *  <div slot="header">Header section</div>
- *  <div slot="content">Content section</div>
- *  <div slot="actions">Actions section</div>
- *  <div slot="footer">Footer section</div>
- * </m3e-card>
- * ```
- *
- * @tag m3e-card
- *
- * @slot - Renders the content of the card without padding.
- * @slot header - Renders the header of the card.
- * @slot content - Renders the content of the card with padding.
- * @slot actions - Renders the actions of the card.
- * @slot footer - Renders the footer of the card.
- *
- * @attr actionable - Whether the card is "actionable" and will respond to use interaction.
- * @attr inline - Whether to present the card inline with surrounding content.
- * @attr orientation - The orientation of the card.
- * @attr variant - The appearance variant of the card.
- *
- * @cssprop --m3e-card-padding - Internal spacing for all slotted regions
- * @cssprop --m3e-card-shape - Corner radius of the card container.
- * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.
- * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.
- * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.
- * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.
- * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.
- * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.
- * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.
- * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.
- * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.
- * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.
- * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.
- * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.
- * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.
- * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.
- * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.
- * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.
- * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.
- * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.
- * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.
- * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.
- * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.
- * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.
- * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.
- * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.
- * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.
- * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.
- * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.
- * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.
- * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.
- * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.
- * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.
- * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.
- * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.
- * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.
- * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.
- * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.
- * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.
- * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.
- * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.
- * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.
- * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.
- * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.
- * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.
- * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.
- * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.
- * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.
- * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.
- * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.
- * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.
- * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.
- * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.
- * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.
- * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.
- * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.
- * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.
- * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.
- * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.
- * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.
- * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.
- * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.
- * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.
- * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.
- * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.
- * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.
- * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.
- */
-export declare class M3eCardElement extends M3eCardElement_base {
-    #private;
-    /** The styles of the element. */
-    static styles: CSSResultGroup;
-    /** @private */ private readonly _base?;
-    /** @private */ private readonly _elevation?;
-    /** @private */ private readonly _focusRing?;
-    /** @private */ private readonly _stateLayer?;
-    /** @private */ private readonly _ripple?;
-    constructor();
-    /**
-     * Whether to present the card inline with surrounding content.
-     * @default false
-     */
-    inline: boolean;
-    /**
-     * Whether the card is "actionable" and will respond to use interaction.
-     * @default false
-     */
-    actionable: boolean;
-    /**
-     * The appearance variant of the card.
-     * @default "filled"
-     */
-    variant: CardVariant;
-    /**
-     * The orientation of the card.
-     * @default "vertical"
-     */
-    orientation: CardOrientation;
-    /** @inheritdoc */
-    connectedCallback(): void;
-    /** @inheritdoc */
-    disconnectedCallback(): void;
-    /** @inheritdoc */
-    protected render(): unknown;
-    /** @inheritdoc */
-    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "m3e-card": M3eCardElement;
-    }
-}
-export {};
-//# sourceMappingURL=CardElement.d.ts.map

package/dist/src/CardElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardElement.d.ts","sourceRoot":"","sources":["../../src/CardElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAoBvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqHG;AACH,qBACa,cAAe,SAAQ,mBAEnC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAEvE,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;;IAiB9E;;;OAGG;IAC0B,MAAM,UAAS;IAE5C;;;OAGG;IAC0B,UAAU,UAAS;IAEhD;;;OAGG;IAC0B,OAAO,EAAE,WAAW,CAAY;IAE7D;;;OAGG;IAC0B,WAAW,EAAE,eAAe,CAAc;IAEvE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,MAAM,IAAI,OAAO;IAuBpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAYhF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/CardOrientation.d.ts

@@ -1,3 +0,0 @@
-/** Specifies the possible orientations of a card. */
-export type CardOrientation = "horizontal" | "vertical";
-//# sourceMappingURL=CardOrientation.d.ts.map

package/dist/src/CardOrientation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardOrientation.d.ts","sourceRoot":"","sources":["../../src/CardOrientation.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC"}

package/dist/src/CardVariant.d.ts

@@ -1,3 +0,0 @@
-/** Specifies the possible appearance variants of a card. */
-export type CardVariant = "elevated" | "filled" | "outlined";
-//# sourceMappingURL=CardVariant.d.ts.map

package/dist/src/CardVariant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardVariant.d.ts","sourceRoot":"","sources":["../../src/CardVariant.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC"}

package/dist/src/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./CardElement";
-export * from "./CardOrientation";
-export * from "./CardVariant";
-//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/dist/src/styles/CardStyle.d.ts

@@ -1,7 +0,0 @@
-import { CSSResult } from "lit";
-/**
- * Baseline styles for `M3eCardElement`.
- * @internal
- */
-export declare const CardStyle: CSSResult;
-//# sourceMappingURL=CardStyle.d.ts.map

package/dist/src/styles/CardStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/CardStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAa,MAAM,KAAK,CAAC;AAOhD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,SAuJvB,CAAC"}

package/dist/src/styles/CardToken.d.ts

@@ -1,9 +0,0 @@
-/**
- * Component design tokens for `M3eCardElement`.
- * @internal
- */
-export declare const CardToken: {
-    readonly padding: import("lit").CSSResult;
-    readonly shape: import("lit").CSSResult;
-};
-//# sourceMappingURL=CardToken.d.ts.map

package/dist/src/styles/CardToken.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardToken.d.ts","sourceRoot":"","sources":["../../../src/styles/CardToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,SAAS;;;CAGZ,CAAC"}

package/dist/src/styles/CardVariantStyle.d.ts

@@ -1,7 +0,0 @@
-import { CSSResultGroup } from "lit";
-/**
- * Appearance variant styles for `M3eCardElement`.
- * @internal
- */
-export declare const CardVariantStyle: CSSResultGroup;
-//# sourceMappingURL=CardVariantStyle.d.ts.map

package/dist/src/styles/CardVariantStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardVariantStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/CardVariantStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,cAAc,EAAa,MAAM,KAAK,CAAC;AA0FhE;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAI9B,CAAC"}

package/dist/src/styles/CardVariantToken.d.ts

@@ -1,50 +0,0 @@
-import { CSSResult } from "lit";
-import { CardVariant } from "../CardVariant";
-/** @private */
-type _CardVariantToken = {
-    textColor: CSSResult;
-    containerColor?: CSSResult;
-    containerElevation: CSSResult;
-    outlineColor?: CSSResult;
-    outlineThickness?: CSSResult;
-    disabled: {
-        textColor: CSSResult;
-        textOpacity: CSSResult;
-        imageOpacity: CSSResult;
-        containerColor?: CSSResult;
-        containerOpacity?: CSSResult;
-        containerElevation: CSSResult;
-        containerElevationColor: CSSResult;
-        containerElevationOpacity: CSSResult;
-        outlineColor?: CSSResult;
-        outlineOpacity?: CSSResult;
-    };
-    hover: {
-        textColor: CSSResult;
-        stateLayerColor: CSSResult;
-        stateLayerOpacity: CSSResult;
-        containerElevation?: CSSResult;
-        outlineColor?: CSSResult;
-    };
-    focus: {
-        textColor: CSSResult;
-        stateLayerColor: CSSResult;
-        stateLayerOpacity: CSSResult;
-        containerElevation?: CSSResult;
-        outlineColor?: CSSResult;
-    };
-    pressed: {
-        textColor: CSSResult;
-        stateLayerColor: CSSResult;
-        stateLayerOpacity: CSSResult;
-        containerElevation?: CSSResult;
-        outlineColor?: CSSResult;
-    };
-};
-/**
- * Component design tokens that control the appearance variants of `M3eCardElement`.
- * @internal
- */
-export declare const CardVariantToken: Record<CardVariant, _CardVariantToken>;
-export {};
-//# sourceMappingURL=CardVariantToken.d.ts.map

package/dist/src/styles/CardVariantToken.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardVariantToken.d.ts","sourceRoot":"","sources":["../../../src/styles/CardVariantToken.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAI3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAe;AACf,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,kBAAkB,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,EAAE;QACR,SAAS,EAAE,SAAS,CAAC;QACrB,WAAW,EAAE,SAAS,CAAC;QACvB,YAAY,EAAE,SAAS,CAAC;QACxB,cAAc,CAAC,EAAE,SAAS,CAAC;QAC3B,gBAAgB,CAAC,EAAE,SAAS,CAAC;QAC7B,kBAAkB,EAAE,SAAS,CAAC;QAC9B,uBAAuB,EAAE,SAAS,CAAC;QACnC,yBAAyB,EAAE,SAAS,CAAC;QACrC,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,cAAc,CAAC,EAAE,SAAS,CAAC;KAC5B,CAAC;IACF,KAAK,EAAE;QACL,SAAS,EAAE,SAAS,CAAC;QACrB,eAAe,EAAE,SAAS,CAAC;QAC3B,iBAAiB,EAAE,SAAS,CAAC;QAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;QAC/B,YAAY,CAAC,EAAE,SAAS,CAAC;KAC1B,CAAC;IACF,KAAK,EAAE;QACL,SAAS,EAAE,SAAS,CAAC;QACrB,eAAe,EAAE,SAAS,CAAC;QAC3B,iBAAiB,EAAE,SAAS,CAAC;QAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;QAC/B,YAAY,CAAC,EAAE,SAAS,CAAC;KAC1B,CAAC;IACF,OAAO,EAAE;QACP,SAAS,EAAE,SAAS,CAAC;QACrB,eAAe,EAAE,SAAS,CAAC;QAC3B,iBAAiB,EAAE,SAAS,CAAC;QAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;QAC/B,YAAY,CAAC,EAAE,SAAS,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAAE,iBAAiB,CAwJ1D,CAAC"}

package/dist/src/styles/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./CardStyle";
-export * from "./CardVariantStyle";
-//# sourceMappingURL=index.d.ts.map

package/dist/src/styles/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/CardElement.ts

@@ -1,258 +0,0 @@
-import { CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-
-import {
-  renderPseudoLink,
-  AttachInternals,
-  Disabled,
-  DisabledInteractive,
-  Focusable,
-  FormSubmitter,
-  LinkButton,
-  M3eElevationElement,
-  M3eFocusRingElement,
-  M3eRippleElement,
-  M3eStateLayerElement,
-  PressedController,
-  Role,
-  KeyboardClick,
-} from "@m3e/core";
-
-import { CardVariant } from "./CardVariant";
-
-import { CardStyle, CardVariantStyle } from "./styles";
-import { CardOrientation } from "./CardOrientation";
-
-/**
- * @summary
- * A content container for text, images (or other media), and actions in the context of a single subject.
- *
- * @description
- * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,
- * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the
- * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),
- * and `elevated` (for depth and motion with shadow elevation).
- *
- * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be
- * presented inline with surrounding content using the `inline` attribute.
- *
- * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is
- * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default
- * slot for custom layouts.
- *
- * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states
- * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,
- * and a cohesive user experience in accordance with Material Design 3 guidelines.
- *
- * @example
- * The following example illustrates each of the dedicated slots of a card.
- * ```html
- * <m3e-card>
- *  <div slot="header">Header section</div>
- *  <div slot="content">Content section</div>
- *  <div slot="actions">Actions section</div>
- *  <div slot="footer">Footer section</div>
- * </m3e-card>
- * ```
- *
- * @tag m3e-card
- *
- * @slot - Renders the content of the card without padding.
- * @slot header - Renders the header of the card.
- * @slot content - Renders the content of the card with padding.
- * @slot actions - Renders the actions of the card.
- * @slot footer - Renders the footer of the card.
- *
- * @attr actionable - Whether the card is "actionable" and will respond to use interaction.
- * @attr inline - Whether to present the card inline with surrounding content.
- * @attr orientation - The orientation of the card.
- * @attr variant - The appearance variant of the card.
- *
- * @cssprop --m3e-card-padding - Internal spacing for all slotted regions
- * @cssprop --m3e-card-shape - Corner radius of the card container.
- * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.
- * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.
- * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.
- * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.
- * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.
- * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.
- * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.
- * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.
- * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.
- * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.
- * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.
- * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.
- * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.
- * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.
- * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.
- * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.
- * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.
- * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.
- * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.
- * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.
- * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.
- * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.
- * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.
- * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.
- * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.
- * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.
- * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.
- * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.
- * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.
- * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.
- * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.
- * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.
- * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.
- * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.
- * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.
- * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.
- * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.
- * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.
- * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.
- * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.
- * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.
- * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.
- * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.
- * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.
- * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.
- * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.
- * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.
- * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.
- * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.
- * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.
- * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.
- * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.
- * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.
- * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.
- * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.
- * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.
- * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.
- * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.
- * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.
- * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.
- * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.
- * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.
- * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.
- * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.
- * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.
- * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.
- */
-@customElement("m3e-card")
-export class M3eCardElement extends KeyboardClick(
-  LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, "none"), true))))))
-) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];
-
-  /** @private */ @query(".base") private readonly _base?: HTMLElement;
-  /** @private */ @query(".elevation") private readonly _elevation?: M3eElevationElement;
-  /** @private */ @query(".focus-ring") private readonly _focusRing?: M3eFocusRingElement;
-  /** @private */ @query(".state-layer") private readonly _stateLayer?: M3eStateLayerElement;
-  /** @private */ @query(".ripple") private readonly _ripple?: M3eRippleElement;
-
-  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);
-
-  constructor() {
-    super();
-
-    new PressedController(this, {
-      isPressedKey: (key) => key === " " || key === "Enter",
-      callback: (pressed) => {
-        if (this.actionable && !this.disabled && !this.disabledInteractive) {
-          this._base?.classList.toggle("pressed", pressed);
-        }
-      },
-    });
-  }
-
-  /**
-   * Whether to present the card inline with surrounding content.
-   * @default false
-   */
-  @property({ type: Boolean }) inline = false;
-
-  /**
-   * Whether the card is "actionable" and will respond to use interaction.
-   * @default false
-   */
-  @property({ type: Boolean }) actionable = false;
-
-  /**
-   * The appearance variant of the card.
-   * @default "filled"
-   */
-  @property({ reflect: true }) variant: CardVariant = "filled";
-
-  /**
-   * The orientation of the card.
-   * @default "vertical"
-   */
-  @property({ reflect: true }) orientation: CardOrientation = "vertical";
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    if (this.hasAttribute("actionable")) {
-      // If href is specified, the LinkButton mixin changes this to "link" if role is "button".
-      this.role = "button";
-    }
-
-    super.connectedCallback();
-    this.addEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this._base?.classList.toggle("pressed", false);
-    this.removeEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="base">
-      <m3e-elevation
-        class="elevation"
-        ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"
-      ></m3e-elevation>
-      <m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable || this.disabled}"></m3e-focus-ring>
-      <m3e-state-layer
-        class="state-layer"
-        ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"
-      ></m3e-state-layer>
-      <m3e-ripple
-        class="ripple"
-        ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"
-      ></m3e-ripple>
-      ${this[renderPseudoLink]()}
-      <slot name="header"></slot>
-      <slot name="content"><slot></slot></slot>
-      <slot name="actions"></slot>
-      <slot name="footer"></slot>
-    </div>`;
-  }
-
-  /** @inheritdoc */
-  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
-    super.firstUpdated(_changedProperties);
-    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
-  }
-
-  /** @private */
-  #handleClick(e: Event): void {
-    if (this.disabled || this.disabledInteractive) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-card": M3eCardElement;
-  }
-}

package/src/CardOrientation.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible orientations of a card. */
-export type CardOrientation = "horizontal" | "vertical";

package/src/CardVariant.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible appearance variants of a card. */
-export type CardVariant = "elevated" | "filled" | "outlined";

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./CardElement";
-export * from "./CardOrientation";
-export * from "./CardVariant";