@lmvz-ds/components 0.40.0 → 0.42.0

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"
+            }];
+    }
 }

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

@@ -117,7 +117,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.nativeError = true;
     }
     render() {
-        return (h(Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, h("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, h("input", { key: 'a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, h("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '076489f5baadab07d95fc787e9ac71bae0a6ab68', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: 'df48e8af0b992d4f2c564aae67dbd42b6454f2c1' }, h("div", { key: 'fe1256e373ee98cc26ca9031654d4d01f10b96e7', class: "pill" }, h("input", { key: '580af189cb0069dd057464efd8c876c1a2dd3826', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '4a6b3522aa1a43f3c0a7ff203fb5791876555954', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '3a857015118d911832cdaa1287cee4c63f84afb2', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'aa543c4c37cf220084b3cce423e1d0e48b5c344f', class: "content" }, h("label", { key: '26c8551de719bdd99cce39b9129b59643f2aa44e', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '004ead4527953b10b4ab6d89366159d7727320b2', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '0fa0dcfdf2fe61d510bfe9f0c4f8d16a341f97d7', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: '63581b0c567d208b200464e9985ac32d97c1ad43', type: this.type, size: this.size }, h("slot", { key: '7aa740cc80b400893dcbe7021d5513d3f1ca476b', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'da5b9e272becef812b4914bf25b451da16bb9012', class: "content-overflow-wrapper" }, h("slot", { key: 'a925dcd383c86dbea63790b5623d159472b6684c', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'e018eafb75b85068c992e9f91c4fac89a4c95153', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: '2dcc9ccddd24f1db7ec65aeed24a1646cee80c76', type: this.type, size: this.size }, h("slot", { key: '756d785d9bdfdaba8c35641afee0743ff343a184', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '3df490bd3149acca605da7d7910be11b80585adf', class: "content-overflow-wrapper" }, h("slot", { key: '5c252427faffaea5a95618df4afced110ff15703', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '493c1ecd319d9afe0896339320cad67aa37289ab', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -441,13 +441,13 @@ export class LmvzDatepicker {
     render() {
         const validationLabels = getValidationLabels(this.locale);
         const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
-        return (h(Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, h("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', ref: (el) => {
+        return (h(Host, { key: '55c1293d79c3c9a1ca591e81c693797194498967' }, h("lmvz-input", { key: '054528d324a2fd99802659a41796da362412bcd9', ref: (el) => {
                 const wasUnset = !this.inputEl;
                 this.inputEl = el;
                 if (wasUnset && this.inputEl) {
                     forceUpdate(this);
                 }
-            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: 'fc39ef14720522a8089d33321b918e5577a36cc2', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: '0076c57da02c7c9d0fcb53584f9dc4127317d6a5', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: '4c1e716e52a5d9ed75155dded3c2c39649e1e844', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
+            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: 'e109a59ba562ff0db88442119725cb38cc01ed6f', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: 'df9046ff443232be3036fbb9ad2646681e7be697', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: 'eea613edc10157650e2e11698afdcc85353bff49', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
     }
     static get is() { return "lmvz-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, h("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, h("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, h("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, h("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, h("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
+        return (h(Host, { key: '427f1fe61ea8809a17dc08518c3dca7218cd2c9b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'b95c5d269c18001592b4ea853b9c945eeedfda07', class: "brand" }, h("slot", { key: 'd856c174220f6e17b1aa977745bd057f7ca12625', name: "brand" }, h("img", { key: '554896aadccb818f06d01ad88f9be96a1afa615a', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '414d208fe60eb4dd0c1400727b4198b81fc4a041', "aria-label": "Hauptnavigation" }, h("div", { key: '608ea0c8ddcfef024505505ae7f91f644bfc1298', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b5de644c07b4ef809c7afa377bed5e48356fc93a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'a6e308da89df8b705a0d03218778bc36fb0cbaf2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'cf78a68329eadb96ad656ed81d8b3c72db582fc9', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'f7a00431635969cd0f3b29e52d002ec67c8dae04', class: "actions" }, h("slot", { key: '6ed3b3d6ef85646742f0a2cf5267464f06e20a05', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }