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

package/dist/src/CardElement.d.ts

@@ -0,0 +1,171 @@
+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;
+/**
+ * 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.
+ *
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @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;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-card": M3eCardElement;
+    }
+}
+export {};
+//# sourceMappingURL=CardElement.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AAmBvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHG;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;IAU/E,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAezE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/CardOrientation.d.ts

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+/** 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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/card",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Card for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {