@lmvz-ds/components 0.40.0 → 0.41.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-17T12:33:14",
+  "timestamp": "2026-08-20T18:00:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -568,6 +568,7 @@
       ],
       "states": [],
       "dependents": [
+        "lmvz-card",
         "lmvz-datepicker",
         "lmvz-message",
         "lmvz-modal",
@@ -575,6 +576,9 @@
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "lmvz-card": [
+          "lmvz-button"
+        ],
         "lmvz-datepicker": [
           "lmvz-button"
         ],
@@ -710,38 +714,50 @@
     },
     {
       "filePath": "src/components/lmvz-card/lmvz-card.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "lmvz-card",
-      "readme": "# lmvz-card\n\n\n",
-      "docs": "",
-      "docsTags": [],
+      "readme": "# lmvz-card\n\nA card composes an image, title, description, an optional chip, and an optional single action into a self-contained content unit. Cards are available in two sizes: `large` and `small`.\n\n## Props\n\n- **`size`** — Size variant (`'large'` or `'small'`, default: `'large'`). Invalid values are normalized to `'large'` at runtime.\n- **`cardTitle?`** — Card title text. Rendered as the fallback `<h3>` for the `card-title` slot. Ignored when a heading is slotted into `card-title`. Exactly one of `cardTitle` or a slotted heading should be supplied.\n- **`description?`** — Optional description text.\n- **`imageUrl?`** — Optional image URL. Falls back to a bundled placeholder graphic when unset.\n- **`imageAlt?`** — Accessible alt text for the image (default: `''`). Use an empty string for decorative images.\n- **`actionLabel?`** — Label for the card's single action button. The action row renders only when this is a non-empty string.\n\n## Events\n\n- **`lmvzCardAction`** — Emitted once per activation of the action button.\n\n## Slots\n\n- **`chip`** — Optional slot for a status/metadata chip (e.g., `<lmvz-chip>`), rendered in the content block. Visibility and spacing are handled automatically based on whether content is present.\n\n- **`card-title`** — Optional slot to provide a heading element (`h2`, `h3`, `h4`, or `h5`) for the card title, allowing you to control the heading level for a correct document outline.\n  - **Purpose:** When no heading is slotted, the `cardTitle` prop is rendered as a fallback `<h3>`. The slot lets you override the heading level so the card fits correctly into your page's document outline structure.\n  - **Supported range:** `h2` through `h5`. This range is **documented guidance only and not technically enforced by any DOM, CSS, or type mechanism** — any element can technically be slotted. A dev-time console warning (when ARIA validation is enabled) flags non-heading elements, out-of-range headings (`h1` or `h6`), or when neither a heading nor a `cardTitle` prop is supplied.\n  - **Mutual exclusivity:** Exactly one of `cardTitle` or a slotted heading must be supplied. Slotting a heading and setting `cardTitle` at the same time is not an error, but only the slotted heading will render. The two mechanisms are mutually exclusive by platform design (slot fallback content only renders when no content is assigned to the slot).\n  - **Styling:** The card applies its own size-branched title typography to the slotted heading regardless of which heading level you choose. Slotting a heading replaces the default `<h3>` entirely. You control the heading level for your document outline; the card controls the typography.\n\n## Breaking Changes\n\nThis version of `lmvz-card` is a from-scratch implementation with no migration path, deprecation alias, or compatibility shim:\n\n- **Removed props:** `primaryActionLabel`\n- **Removed events:** `primaryAction`\n- **Removed UI:** The overflow/kebab menu button\n\nThere is no direct successor for these removed APIs. The new card ships with a single secondary-styled action button whose label is supplied via `actionLabel` and whose activation emits `lmvzCardAction`. No old-to-new mapping exists.\n\n## Deferred Features\n\nA favorite/bookmark icon-button affordance was evaluated during design (visible in the source Figma frame) but intentionally deferred out of this implementation, pending a future, separately-scoped checklist. It is not available in this version.\n",
+      "docs": "A card composes an image, title, description, an optional chip, and an optional single action into a self-contained content unit.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "chip - Optional slot for a status/metadata chip (e.g. `<lmvz-chip>`), rendered in the content block. Visibility and spacing are handled automatically based on whether content is present."
+        },
+        {
+          "name": "slot",
+          "text": "card-title - Optional slot to provide a heading element (`<h2>`-`<h5>`) for the card title, allowing consumers to control the heading level for a correct document outline. If nothing is slotted, the `cardTitle` prop is rendered as the fallback `<h3>`. Exactly one of the two mechanisms should be used."
+        }
+      ],
       "usage": {},
       "props": [
         {
-          "name": "cardTitle",
-          "type": "string",
+          "name": "actionLabel",
+          "type": "string | undefined",
           "complexType": {
             "original": "string",
-            "resolved": "string",
+            "resolved": "string | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "card-title",
+          "attr": "action-label",
           "reflectToAttr": false,
-          "docs": "Card title (required)",
+          "docs": "Label for the card's single action button. The action row renders only when this is a non-empty string.",
           "docsTags": [],
           "values": [
             {
               "type": "string"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
-          "required": true,
+          "optional": true,
+          "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "description",
+          "name": "cardTitle",
           "type": "string | undefined",
           "complexType": {
             "original": "string",
@@ -749,9 +765,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "description",
+          "attr": "card-title",
           "reflectToAttr": false,
-          "docs": "Optional description",
+          "docs": "Card title text, rendered as the fallback `<h3>` for the `card-title` slot.\nIgnored when a heading is slotted into `card-title`. One of `cardTitle` or a slotted heading should be supplied.",
           "docsTags": [],
           "values": [
             {
@@ -767,7 +783,7 @@
           "setter": false
         },
         {
-          "name": "imageUrl",
+          "name": "description",
           "type": "string | undefined",
           "complexType": {
             "original": "string",
@@ -775,9 +791,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "image-url",
+          "attr": "description",
           "reflectToAttr": false,
-          "docs": "Optional image URL; placeholder used if omitted",
+          "docs": "Optional description text.",
           "docsTags": [],
           "values": [
             {
@@ -793,7 +809,7 @@
           "setter": false
         },
         {
-          "name": "primaryActionLabel",
+          "name": "imageAlt",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -801,9 +817,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "primary-action-label",
+          "attr": "image-alt",
           "reflectToAttr": false,
-          "docs": "Primary action button label",
+          "docs": "Accessible alt text for the image.",
           "docsTags": [
             {
               "name": "default",
@@ -820,38 +836,115 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "imageUrl",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "image-url",
+          "reflectToAttr": false,
+          "docs": "Optional image URL; falls back to a bundled placeholder graphic when unset.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"small\"",
+          "complexType": {
+            "original": "Card.Size",
+            "resolved": "\"large\" | \"small\"",
+            "references": {
+              "Card": {
+                "location": "import",
+                "path": "../../api/ds.types",
+                "id": "src/api/ds.types.d.ts::Card",
+                "referenceLocation": "Card"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "Size variant of the card.\nInvalid values are normalized to `large` at runtime.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'large'"
+            }
+          ],
+          "default": "'large'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
       "events": [
         {
-          "event": "primaryAction",
-          "detail": "PointerEvent",
+          "event": "lmvzCardAction",
+          "detail": "void",
           "bubbles": true,
           "complexType": {
-            "original": "PointerEvent",
-            "resolved": "PointerEvent",
-            "references": {
-              "PointerEvent": {
-                "location": "global",
-                "id": "global::PointerEvent"
-              }
-            }
+            "original": "void",
+            "resolved": "void",
+            "references": {}
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when primary button is clicked",
+          "docs": "Emitted once per activation of the action button.",
           "docsTags": []
         }
       ],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "card-title",
+          "docs": "Optional slot to provide a heading element (`<h2>`-`<h5>`) for the card title, allowing consumers to control the heading level for a correct document outline. If nothing is slotted, the `cardTitle` prop is rendered as the fallback `<h3>`. Exactly one of the two mechanisms should be used."
+        },
+        {
+          "name": "chip",
+          "docs": "Optional slot for a status/metadata chip (e.g. `<lmvz-chip>`), rendered in the content block. Visibility and spacing are handled automatically based on whether content is present."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "lmvz-button"
+      ],
+      "dependencyGraph": {
+        "lmvz-card": [
+          "lmvz-button"
+        ]
+      }
     },
     {
       "filePath": "src/components/lmvz-checkbox/lmvz-checkbox.tsx",
@@ -9861,6 +9954,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/ds.types.d.ts::Card": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/ds.types.d.ts"
+    },
     "src/api/ds.types.d.ts::Chip": {
       "declaration": "any",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.40.0",
+  "version": "0.41.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",

package/types/api/ds.constants.d.ts

@@ -9,6 +9,7 @@ export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
 export declare const iconWeights: readonly ["thin", "medium", "bold"];
 export declare const chipTypes: readonly ["active", "warning", "success", "error", "neutral"];
 export declare const chipSizes: readonly ["default", "small"];
+export declare const cardSizes: readonly ["large", "small"];
 export declare const linkTypes: readonly ["internal", "external"];
 export declare const messageTypes: readonly ["neutral", "warning"];
 export declare const snackbarStatuses: readonly ["success", "warning", "error"];

package/types/api/ds.types.d.ts

@@ -1,4 +1,5 @@
 import type {
+  cardSizes,
   chipSizes,
   chipTypes,
   iconSizes,
@@ -34,6 +35,9 @@ export namespace Chip {
   export type Type = (typeof chipTypes)[number];
   export type Size = (typeof chipSizes)[number];
 }
+export namespace Card {
+  export type Size = (typeof cardSizes)[number];
+}
 export namespace Link {
   export type Type = (typeof linkTypes)[number];
 }

package/types/components/lmvz-card/lmvz-card.d.ts

@@ -1,12 +1,23 @@
 import type { EventEmitter } from '../../stencil-public-runtime';
+import type { Card } from '../../api/ds.types';
 export declare class LmvzCard {
-    cardTitle: string;
-    imageUrl?: string;
+    el: HTMLElement;
+    private titleSlotElement?;
+    private readonly warnedCases;
+    size: Card.Size;
+    cardTitle?: string;
     description?: string;
-    primaryActionLabel: string;
-    primaryAction: EventEmitter<PointerEvent>;
+    imageUrl?: string;
+    imageAlt: string;
+    actionLabel?: string;
+    lmvzCardAction: EventEmitter<void>;
+    normalizeSize(value: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     private get fallbackImage();
-    private _onPrimaryClick;
-    private _onOverflowClick;
+    private readonly handleActionClick;
+    private get slottedTitleElement();
+    private checkTitleContent;
+    private warnOnce;
     render(): any;
 }

package/types/components.d.ts

@@ -5,6 +5,12 @@ export declare namespace Button {
     export type Variant = LmvzDS.Variant;
 }
 
+export declare namespace Card {
+    export type Size = (typeof cardSizes)[number];
+}
+
+declare const cardSizes: readonly ["large", "small"];
+
 export declare namespace Chip {
     export type Type = (typeof chipTypes)[number];
     export type Size = (typeof chipSizes)[number];
@@ -111,24 +117,36 @@ export declare namespace Components {
          */
         "stacked": boolean;
     }
+    /**
+     * A card composes an image, title, description, an optional chip, and an optional single action into a self-contained content unit.
+     */
     export interface LmvzCard {
         /**
-         * Card title (required)
+         * Label for the card's single action button. The action row renders only when this is a non-empty string.
          */
-        "cardTitle": string;
+        "actionLabel"?: string;
         /**
-         * Optional description
+         * Card title text, rendered as the fallback `<h3>` for the `card-title` slot. Ignored when a heading is slotted into `card-title`. One of `cardTitle` or a slotted heading should be supplied.
+         */
+        "cardTitle"?: string;
+        /**
+         * Optional description text.
          */
         "description"?: string;
         /**
-         * Optional image URL; placeholder used if omitted
+         * Accessible alt text for the image.
+         * @default ''
+         */
+        "imageAlt": string;
+        /**
+         * Optional image URL; falls back to a bundled placeholder graphic when unset.
          */
         "imageUrl"?: string;
         /**
-         * Primary action button label
-         * @default ''
+         * Size variant of the card. Invalid values are normalized to `large` at runtime.
+         * @default 'large'
          */
-        "primaryActionLabel": string;
+        "size": Card.Size;
     }
     /**
      * Checkbox component with form association, ARIA validation, and accessible label support.
@@ -1141,28 +1159,40 @@ export declare namespace JSX {
          */
         "stacked"?: boolean;
     }
+    /**
+     * A card composes an image, title, description, an optional chip, and an optional single action into a self-contained content unit.
+     */
     export interface LmvzCard {
         /**
-         * Card title (required)
+         * Label for the card's single action button. The action row renders only when this is a non-empty string.
          */
-        "cardTitle": string;
+        "actionLabel"?: string;
         /**
-         * Optional description
+         * Card title text, rendered as the fallback `<h3>` for the `card-title` slot. Ignored when a heading is slotted into `card-title`. One of `cardTitle` or a slotted heading should be supplied.
+         */
+        "cardTitle"?: string;
+        /**
+         * Optional description text.
          */
         "description"?: string;
         /**
-         * Optional image URL; placeholder used if omitted
+         * Accessible alt text for the image.
+         * @default ''
+         */
+        "imageAlt"?: string;
+        /**
+         * Optional image URL; falls back to a bundled placeholder graphic when unset.
          */
         "imageUrl"?: string;
         /**
-         * Event emitted when primary button is clicked
+         * Emitted once per activation of the action button.
          */
-        "onPrimaryAction"?: (event: LmvzCardCustomEvent<PointerEvent>) => void;
+        "onLmvzCardAction"?: (event: LmvzCardCustomEvent<void>) => void;
         /**
-         * Primary action button label
-         * @default ''
+         * Size variant of the card. Invalid values are normalized to `large` at runtime.
+         * @default 'large'
          */
-        "primaryActionLabel"?: string;
+        "size"?: Card.Size;
     }
     /**
      * Checkbox component with form association, ARIA validation, and accessible label support.
@@ -1973,10 +2003,12 @@ export declare namespace JSX {
         "hasActions": boolean;
     }
     export interface LmvzCardAttributes {
+        "size": Card.Size;
         "cardTitle": string;
-        "imageUrl": string;
         "description": string;
-        "primaryActionLabel": string;
+        "imageUrl": string;
+        "imageAlt": string;
+        "actionLabel": string;
     }
     export interface LmvzCheckboxAttributes {
         "label": string;
@@ -2142,7 +2174,7 @@ export declare namespace JSX {
         "lmvz-action-list": Omit<LmvzActionList, keyof LmvzActionListAttributes> & { [K in keyof LmvzActionList & keyof LmvzActionListAttributes]?: LmvzActionList[K] } & { [K in keyof LmvzActionList & keyof LmvzActionListAttributes as `attr:${K}`]?: LmvzActionListAttributes[K] } & { [K in keyof LmvzActionList & keyof LmvzActionListAttributes as `prop:${K}`]?: LmvzActionList[K] };
         "lmvz-button": Omit<LmvzButton, keyof LmvzButtonAttributes> & { [K in keyof LmvzButton & keyof LmvzButtonAttributes]?: LmvzButton[K] } & { [K in keyof LmvzButton & keyof LmvzButtonAttributes as `attr:${K}`]?: LmvzButtonAttributes[K] } & { [K in keyof LmvzButton & keyof LmvzButtonAttributes as `prop:${K}`]?: LmvzButton[K] };
         "lmvz-button-group": Omit<LmvzButtonGroup, keyof LmvzButtonGroupAttributes> & { [K in keyof LmvzButtonGroup & keyof LmvzButtonGroupAttributes]?: LmvzButtonGroup[K] } & { [K in keyof LmvzButtonGroup & keyof LmvzButtonGroupAttributes as `attr:${K}`]?: LmvzButtonGroupAttributes[K] } & { [K in keyof LmvzButtonGroup & keyof LmvzButtonGroupAttributes as `prop:${K}`]?: LmvzButtonGroup[K] };
-        "lmvz-card": Omit<LmvzCard, keyof LmvzCardAttributes> & { [K in keyof LmvzCard & keyof LmvzCardAttributes]?: LmvzCard[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `attr:${K}`]?: LmvzCardAttributes[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `prop:${K}`]?: LmvzCard[K] } & OneOf<"cardTitle", LmvzCard["cardTitle"], LmvzCardAttributes["cardTitle"]>;
+        "lmvz-card": Omit<LmvzCard, keyof LmvzCardAttributes> & { [K in keyof LmvzCard & keyof LmvzCardAttributes]?: LmvzCard[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `attr:${K}`]?: LmvzCardAttributes[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `prop:${K}`]?: LmvzCard[K] };
         "lmvz-checkbox": Omit<LmvzCheckbox, keyof LmvzCheckboxAttributes> & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes]?: LmvzCheckbox[K] } & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes as `attr:${K}`]?: LmvzCheckboxAttributes[K] } & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes as `prop:${K}`]?: LmvzCheckbox[K] } & OneOf<"label", LmvzCheckbox["label"], LmvzCheckboxAttributes["label"]>;
         "lmvz-chip": Omit<LmvzChip, keyof LmvzChipAttributes> & { [K in keyof LmvzChip & keyof LmvzChipAttributes]?: LmvzChip[K] } & { [K in keyof LmvzChip & keyof LmvzChipAttributes as `attr:${K}`]?: LmvzChipAttributes[K] } & { [K in keyof LmvzChip & keyof LmvzChipAttributes as `prop:${K}`]?: LmvzChip[K] };
         "lmvz-datepicker": Omit<LmvzDatepicker, keyof LmvzDatepickerAttributes> & { [K in keyof LmvzDatepicker & keyof LmvzDatepickerAttributes]?: LmvzDatepicker[K] } & { [K in keyof LmvzDatepicker & keyof LmvzDatepickerAttributes as `attr:${K}`]?: LmvzDatepickerAttributes[K] } & { [K in keyof LmvzDatepicker & keyof LmvzDatepickerAttributes as `prop:${K}`]?: LmvzDatepicker[K] };

package/components/p-0ctLESas.js

@@ -1 +0,0 @@
-const a=["primary","secondary","tertiary","danger"],s=["small","default","large"],t=["xs","sm","md","lg"],e=[...t,"xl"],r=["text","email","password","tel","url","search","number"],l=["sm","md","lg"],n=s,o=[...t,"inherit"],m=["thin","medium","bold"],d=["active","warning","success","error","neutral"],i=["default","small"],u=["internal","external"],c=["neutral","warning"],g=["success","warning","error"],p=["low","normal","high"],w=["timeout","manual","action","overridden","swallowed"],b=["top","bottom","start","end","top-start","top-end","bottom-start","bottom-end"],h=["sm","md","lg"];export{t as a,l as b,n as c,o as d,m as e,d as f,i as g,g as h,r as i,p as j,w as k,u as l,c as m,h as n,b as p,s,e as t,a as v}

package/lmvz-components/p-0ctLESas.js

@@ -1 +0,0 @@
-const a=["primary","secondary","tertiary","danger"],s=["small","default","large"],t=["xs","sm","md","lg"],e=[...t,"xl"],r=["text","email","password","tel","url","search","number"],l=["sm","md","lg"],n=s,o=[...t,"inherit"],m=["thin","medium","bold"],d=["active","warning","success","error","neutral"],i=["default","small"],u=["internal","external"],c=["neutral","warning"],g=["success","warning","error"],p=["low","normal","high"],w=["timeout","manual","action","overridden","swallowed"],b=["top","bottom","start","end","top-start","top-end","bottom-start","bottom-end"],h=["sm","md","lg"];export{t as a,l as b,n as c,o as d,m as e,d as f,i as g,g as h,r as i,p as j,w as k,u as l,c as m,h as n,b as p,s,e as t,a as v}

package/lmvz-components/p-c884c76e.entry.js

@@ -1 +0,0 @@
-import{a as r,r as e,c as o,h as t,H as a}from"./p-DVab4vzV.js";const n=class{constructor(r){e(this,r),this.primaryAction=o(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((e,o)=>{const t=function(...r){return r.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",o,e);try{return r(t)}catch{return console.warn(`Failed to create URL for asset "${e}" in path "${o}".\n           Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(t,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(r){console.log(r)}render(){return t(a,{key:"1dd819fd7c752af8d15001c08f7f60c6ea7278b9",role:"article"},t("div",{key:"e0cc822e627b6bbe665e4faa705cc46a09bac7c6",class:"top"},t("div",{key:"db79cb5a67ebdd6097f985e4b4bd27665b6329ef",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},t("div",{key:"90facc8595ddbbf31e3768faa8254a82ab8d3e65",class:"chip-slot"},t("slot",{key:"cb2e6a1053aae2b2ca90c52c175e3c4174c89d23",name:"chip"})))),t("div",{key:"cb11069a329385178677e92d08044e0fe8e5b982",class:"bottom"},t("header",{key:"1e6076352124ca03de2fb13c17a565b4f492567e"},t("h2",{key:"73f11099fb751bd4f967dbe49b79763b6a8268f3",class:"title"},this.cardTitle)),t("p",{key:"36cf87b4c2004bff1e65feedd13e137d67115de3",class:"description"},this.description),t("div",{key:"6c1d82f4968ce8252307858e6ad0681274f06397",class:"actions"},t("button",{key:"0366e0caaf9235a3eaf7bfcab116e6a828fb248d",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),t("button",{key:"4f435e79d75a621d6fe065471a915b55308ad15d",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},t("span",{key:"7dec97e0b0ca58c40fc5308cc7863acafa8c5147",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}};n.style="@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } .sc-lmvz-card-h {               & {          & {           --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));   --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);    display: inline-flex;   align-items: center;   justify-content: var(--lmvz-button-content-justification, center);   gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));    box-sizing: border-box;    padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));   padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));   min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));   border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);   border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));    background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }     & > * {     font: inherit;     color: inherit;   }   &:focus-visible {     outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);     outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));     position: relative;     z-index: 1;   }   &:is([disabled], .disabled) {     cursor: not-allowed;     pointer-events: none;                               opacity: var(--lmvz-component-input-disabled-opacity, 40%);   }   &:not([disabled]):hover {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));   }   &:not([disabled]):active {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));   }        &.primary {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));     --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);     --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);   }   &.primary:not([disabled], .disabled):hover {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));   }   &.primary:not([disabled], .disabled):active {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));   }   &.danger {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));     --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));   }   &.danger:not([disabled], .disabled):hover {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));   }   &.danger:not([disabled], .disabled):active {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));   }   &.tertiary {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));   }   &.tertiary:not([disabled], .disabled):hover {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));   }   &.tertiary:not([disabled], .disabled):active {     --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));     --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));   }    &.small {     --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));     --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));     --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));     --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));     --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router));   }   &.large {     --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));     --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));     --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));     --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));     --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router));   } }     display: flex;   min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem);   flex-direction: column;   align-items: flex-start;    border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card {   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   flex-direction: column;   justify-content: center;   align-items: center;   align-self: stretch; } .bottom.sc-lmvz-card {   display: flex;   min-width: 150px;   padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));   flex-direction: column;   align-items: flex-start;   align-self: stretch; } .title.sc-lmvz-card {   margin: 0;   display: flex;   justify-content: center;   align-items: center;   align-self: stretch;    padding-bottom: var(--lmvz-global-s4, 4px);   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4     Router); } .description.sc-lmvz-card {   display: flex;   margin: 0;   padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-items: flex-start;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card {   aspect-ratio: 4 / 3;   width: 100%;   background-size: cover;   background-position: center;   flex: 1 0 0;   align-self: stretch;   border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card {   margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card {   display: flex;   justify-content: center;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   flex: 1 0 0; }";export{n as lmvz_card}