@lmvz-ds/components 0.40.0 → 0.41.0

package/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-datepicker.cjs",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-select.cjs",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-action-list.cjs",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"panel":[513]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},[[0,"slotchange","handleSlotChangeEvent"]],{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-datepicker.cjs",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-select.cjs",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-card.cjs",[[769,"lmvz-card",{"size":[1537],"cardTitle":[1,"card-title"],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"]},null,{"size":[{"normalizeSize":0}]}]]],["lmvz-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-action-list.cjs",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"panel":[513]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},[[0,"slotchange","handleSlotChangeEvent"]],{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/collection/api/ds.constants.js

@@ -9,6 +9,7 @@ export const iconSizes = [...sizes, 'inherit'];
 export const iconWeights = ['thin', 'medium', 'bold'];
 export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
 export const chipSizes = ['default', 'small'];
+export const cardSizes = ['large', 'small'];
 export const linkTypes = ['internal', 'external'];
 export const messageTypes = ['neutral', 'warning'];
 export const snackbarStatuses = ['success', 'warning', 'error'];

package/collection/components/lmvz-card/lmvz-card.css

@@ -75,234 +75,122 @@ legend {
 
 }
 :host {
-  /** component dependencies */
-  /* * the (invalid nested) import will be handled by postcss */
-  /* stylelint-disable no-invalid-position-at-import-rule */
-  /* stylelint-disable nesting-selector-no-missing-scoping-root */
-
-/**
- * This fragment is meant to be reusable in multiple component types.
- * CAUTION: always wrap the import in a tag selector (ususally button)!
- */
-& {
-  /* the (invalid nested) import will be handled by postcss */
-  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
-  /* stylelint-disable nesting-selector-no-missing-scoping-root */
-& {
-  /* variables are declared on :host
-     so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
-     They are also declared here so that non-shadow consumers have the default values in scope. */
-
-  /* secondary styling is default, primary is explicit */
-
-  --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; /* to inlclude paddings & border in min-height */
-  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;
-    /* } */
-
-    /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
-    /* button:is([disabled], .disabled) { */
-    /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
-    /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
-    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));
-  }
-
-  /* secondary styling is default, primary is explicit */
-
-  &.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));
-  }
-}
-
+  /* Card-local width custom properties. */
+  /* TODO(token-gap): 320px/360px awaiting Supernova correction of --lmvz-card-component-card-minwidth/-maxwidth, see checklist T10 */
+  --lmvz-card-local-min-width: 320px;
+  --lmvz-card-local-max-width: 360px;
+  /* TODO(token-gap): 232px awaiting promotion of figma-only/card/card-sm-max-width to a real token, see checklist T10 */
+  --lmvz-card-local-sm-width: 232px;
 
   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;
+  min-width: var(--lmvz-card-local-min-width);
+  max-width: var(--lmvz-card-local-max-width);
 
-  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);
+  border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
   background: var(--lmvz-semantic-color-surface-primary, #ffffff);
+  box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) var(--lmvz-semantic-shadow-l1-1-blur, 4px) 0 var(--lmvz-semantic-color-shadow-l1-default, rgba(120, 120, 128, 0.08));
+  margin-bottom: var(--lmvz-component-card-lg-margin-bottom, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+}
+:host([size='small']) {
+  width: var(--lmvz-card-local-sm-width);
+  min-width: 0;
+  max-width: none;
+  border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+  margin-bottom: var(--lmvz-component-card-sm-margin-bottom, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
 }
 * {
   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 {
+.image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  align-self: stretch;
+  border-top-left-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+  border-top-right-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+}
+:host([size='small']) .image {
+  border-top-left-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+  border-top-right-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+}
+.content {
   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-items: flex-start;
   align-self: stretch;
+  gap: var(--lmvz-component-spacing-xs, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+
+  padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+}
+:host([size='small']) .content {
+  gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
 }
-.bottom {
+.title-block {
   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;
+  gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+}
+/*
+ * Title typography applies identically to the fallback <h3> and any slotted heading (h2-h5); the level is the
+ * consumer's choice, the styling is the card's.
+ *
+ * The fallback <h3> (.card-default-title) lives in the shadow root and is styled directly below.
+ * Slotted headings are consumer-supplied light-DOM children; `::slotted()` is the correct selector
+ * to reach them from within the shadow stylesheet.
+ */
+.card-default-title {
+  margin: 0;
+  overflow-wrap: break-word;
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5
+    Router);
 }
-.title {
+:host([size='small']) .card-default-title {
+  font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+    Router);
+}
+/* Slotted heading typography — large (default) */
+::slotted([slot='card-title']) {
   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
+}
+/* Slotted heading typography — small */
+:host([size='small']) ::slotted([slot='card-title']) {
+  font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router);
 }
 .description {
-  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);
+  font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router);
 }
-.image-wrapper {
-  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);
+:host([size='small']) .description {
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
+}
+/*
+ * Chip slot: under shadow: true, an empty <slot> is a real flex item in .content's flex column and
+ * would introduce a phantom gap even when nothing is slotted. `display: contents` collapses the
+ * slot element's own box so it contributes no spacing when empty, while still allowing slotted
+ * content to participate in the flex layout normally.
+ */
+slot[name='chip'] {
+  display: contents;
 }
 .actions {
-  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-row top padding is a separate Figma-specified value (Visual primitives: Button-row top padding, both sizes) that intentionally stacks on .content's flex gap — not an accidental double-count. */
+  padding-top: var(--lmvz-component-spacing-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
 }
-button.primary,
-lmvz-button.primary {
-  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));
+/* Sizing (padding/gap/min-height/font) is fully driven by lmvz-button's own `scale` prop (default/small), set in the render method - no local overrides needed here. */
+lmvz-button.action {
   flex: 1 0 0;
 }
-/* .overflow-button {
-  anchor-name: --overflow-button;
-} */
-/* menu {
-  position: fixed;
-  position-anchor: --overflow-button;
-
-  inset-block-start: anchor(end);
-  inset-inline-end: anchor(self-end);
-  margin: 5px 0 0 5px;
-} */

package/collection/components/lmvz-card/lmvz-card.js

@@ -1,28 +1,67 @@
 import { h, Host } from "@stencil/core";
+import { cardSizes } from "../../api/ds.constants";
+import { isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
 import { createAssetUrlSafely } from "../../utils/stencil/assets";
+const HEADING_TAGS = new Set(['HEADER', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
 export class LmvzCard {
+    el;
+    titleSlotElement;
+    warnedCases = new Set();
+    size = 'large';
     cardTitle;
-    imageUrl;
     description;
-    primaryActionLabel = '';
-    primaryAction;
+    imageUrl;
+    imageAlt = '';
+    actionLabel;
+    lmvzCardAction;
+    normalizeSize(value) {
+        const normalizedSize = cardSizes.includes(value) ? value : 'large';
+        if (normalizedSize !== this.size) {
+            this.size = normalizedSize;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeSize(this.size);
+    }
+    componentDidLoad() {
+        const titleSlot = this.el.shadowRoot?.querySelector('slot[name="card-title"]');
+        titleSlot?.addEventListener('slotchange', () => this.checkTitleContent());
+        this.checkTitleContent();
+    }
     get fallbackImage() {
-        return createAssetUrlSafely('card-placeholder.svg');
+        return String(createAssetUrlSafely('card-placeholder.svg'));
+    }
+    handleActionClick = () => {
+        this.lmvzCardAction.emit();
+    };
+    get slottedTitleElement() {
+        return this.titleSlotElement?.assignedElements()?.at(0);
     }
-    _onPrimaryClick() {
-        this.primaryAction.emit();
+    checkTitleContent() {
+        if (!isAriaValidationEnabled())
+            return;
+        const slotted = this.slottedTitleElement;
+        if (slotted) {
+            const tag = slotted.tagName;
+            if (!HEADING_TAGS.has(tag)) {
+                this.warnOnce(`non-heading:${tag}`, `[lmvz-card] Element <${tag.toLowerCase()}> slotted into "card-title" is not a heading. Slot a heading element (h2-h5) instead.`);
+            }
+        }
+        else if (!this.cardTitle) {
+            this.warnOnce('missing-title', '[lmvz-card] Neither a "card-title" slotted heading nor a non-empty "cardTitle" prop was supplied.');
+        }
     }
-    _onOverflowClick(event) {
-        console.log(event);
+    warnOnce(key, message) {
+        if (this.warnedCases.has(key))
+            return;
+        this.warnedCases.add(key);
+        console.warn(message);
     }
     render() {
-        const imgStyle = {
-            backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
-        };
-        return (h(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, h("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, h("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, h("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, h("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), h("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, h("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, h("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), h("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), h("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, h("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
+        return (h(Host, { key: '21ac0a567bb88d05d247cc3150bf2e7ce26972c5', role: "article" }, h("img", { key: '6cea11ee015059d5537ab64c7cbb1655ac984cb1', class: "image", src: this.imageUrl ?? this.fallbackImage, alt: this.imageAlt, loading: "lazy", decoding: "async" }), h("div", { key: 'cd29132d8268fb5a025cde5c33a858982c8eaaed', class: "content" }, h("div", { key: '0d353a46cae60d81417e5280b39020b2234ad304', class: "title-block" }, h("slot", { key: '4f2734a257ef877d258a717e23855f521c5132a6', name: "card-title", ref: (el) => (this.titleSlotElement = el) }, this.cardTitle && (h("header", { key: '7d526caba45dde6b13bee023e60943711347258a', role: "heading", class: "card-default-title" }, this.cardTitle))), this.description && h("p", { key: '18c3eac26562a592baa29d75674737d11f57beac', class: "description" }, this.description)), h("slot", { key: 'd0d9c40ca8501b0fdfa9d589eeb05692892316a2', name: "chip" }), this.actionLabel && (h("div", { key: '4bd5d9233c0ba1dcda6bebdeff89adbbfe37e4b1', class: "actions" }, h("lmvz-button", { key: '6cefc7ad2859d457ad11b3f4edb1300ba664ef63', class: "action", variant: "secondary", scale: this.size === 'small' ? 'small' : 'default', onLmvzActivation: this.handleActionClick }, this.actionLabel))))));
     }
     static get is() { return "lmvz-card"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["lmvz-card.css"]
@@ -36,26 +75,56 @@ export class LmvzCard {
     static get assetsDirs() { return ["../../assets"]; }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'large'"
+                        }],
+                    "text": "Size variant of the card.\nInvalid values are normalized to `large` at runtime."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            },
             "cardTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Card title (required)"
+                    "text": "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."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "card-title"
             },
-            "imageUrl": {
+            "description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -67,14 +136,14 @@ export class LmvzCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional image URL; placeholder used if omitted"
+                    "text": "Optional description text."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "image-url"
+                "attribute": "description"
             },
-            "description": {
+            "imageUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -86,14 +155,14 @@ export class LmvzCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional description"
+                    "text": "Optional image URL; falls back to a bundled placeholder graphic when unset."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "description"
+                "attribute": "image-url"
             },
-            "primaryActionLabel": {
+            "imageAlt": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -104,38 +173,62 @@ export class LmvzCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Primary action button label"
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "Accessible alt text for the image."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "primary-action-label",
+                "attribute": "image-alt",
                 "defaultValue": "''"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the card's single action button. The action row renders only when this is a non-empty string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label"
             }
         };
     }
     static get events() {
         return [{
-                "method": "primaryAction",
-                "name": "primaryAction",
+                "method": "lmvzCardAction",
+                "name": "lmvzCardAction",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when primary button is clicked"
+                    "text": "Emitted once per activation of the action button."
                 },
                 "complexType": {
-                    "original": "PointerEvent",
-                    "resolved": "PointerEvent",
-                    "references": {
-                        "PointerEvent": {
-                            "location": "global",
-                            "id": "global::PointerEvent"
-                        }
-                    }
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "normalizeSize"
+            }];
+    }
 }