@lmvz-ds/components 0.33.0 → 0.34.0

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

@@ -80,14 +80,14 @@ hr {
   --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-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+  --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: center;
+  justify-content: var(--lmvz-button-content-justification-override, center);
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
@@ -98,7 +98,7 @@ hr {
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  text-align: center;
+  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -155,21 +155,20 @@ button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
 }
 
-button.secondary {
-  --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-border-width: var(--lmvz-button-border-width-override, 0);
+button.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, #e52a31));
 }
 
-button.secondary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
+button.danger:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
 }
 
-button.secondary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
+button.danger:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
 }
 
 button.tertiary {
@@ -192,7 +191,7 @@ button.small {
   --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-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
     Router));
 }
 
@@ -201,7 +200,7 @@ button.large {
   --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-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  --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));
 }
 
@@ -218,8 +217,7 @@ button.large {
 }
 * {
   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);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 }
 .top {
   display: flex;
@@ -256,8 +254,7 @@ button.large {
   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-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 }
 .image-wrapper {
   aspect-ratio: 4 / 3;

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

@@ -118,22 +118,19 @@ input {
   cursor: pointer;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   color: var(--checkbox-label-color);
   transition: color var(--checkbox-duration) var(--checkbox-easing);
   cursor: pointer;
 }
 .helper-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
   /* font-weight: 400 per DS token standard (body-sm). Note: lmvz-input.css [role='status'] incorrectly uses font-weight: 500 — DS inconsistency, see lmvz-input.css line ~153 */
   color: var(--checkbox-helper-color);
   margin-block-start: 2px;
 }
 .error-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
   color: var(--checkbox-error-color);
   display: block;
   margin-block-start: 4px;

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

@@ -44,8 +44,7 @@
   justify-content: center;
   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   cursor: pointer;
 

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

@@ -123,8 +123,7 @@ dialog::backdrop {
   flex: 1 1 auto;
 }
 .body {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   flex: 1;
   overflow: scroll;
   /* min-block-size: clamp(8rem, 40vw, 60vh); */

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

@@ -0,0 +1,46 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.components {
+.lmvz-wrapper-card-sm,
+.lmvz-wrapper-card-md,
+.lmvz-wrapper-card-lg {
+  background: var(--lmvz-semantic-color-surface-primary, #ffffff);
+  box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11));
+}
+
+.lmvz-wrapper-card-sm {
+  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));
+  border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+}
+.lmvz-wrapper-card-md {
+  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));
+  border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+}
+.lmvz-wrapper-card-lg {
+  padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
+  border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
+}
+
+}
+:host {
+  --lmvz-popover-z-index-internal: var(--lmvz-popover-z-index, 1);
+  display: contents;
+
+  .container {
+    position: absolute;
+    top: -9999999999px;
+    left: -9999999999px;
+    max-width: var(--lmvz-popover-max-width, none);
+    max-height: var(--lmvz-popover-max-height, none);
+    z-index: var(--lmvz-popover-z-index-internal);
+    overflow: auto;
+    box-sizing: border-box;
+  }
+}
+:host(:not([open])) .container {
+  display: none;
+}

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

@@ -0,0 +1,470 @@
+import { Host, h } from "@stencil/core";
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { waitFrame } from "../../utils/async/async.util";
+import { canReceiveFocus, getDeepActiveElement, isInteractiveElement, walkShadowDOMUntil } from "../../utils/element/element.util";
+export class LmvzPopover {
+    el;
+    closureController = new AbortController();
+    containerEl;
+    slotEl;
+    previouslyFocusedElement = null;
+    open = false;
+    anchor;
+    placement = 'bottom-start';
+    size = 'sm';
+    autoFocus = true;
+    label;
+    lmvzOpen;
+    lmvzClose;
+    lmvzCancel;
+    async show() {
+        this.open = true;
+    }
+    async hide() {
+        this.triggerClose();
+    }
+    async toggle() {
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    componentDidLoad() {
+        autoAssignId(this.el);
+        validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
+    }
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.onOpen();
+        }
+        else {
+            this.onClose();
+        }
+    }
+    handleAnchorChange() {
+        if (this.open) {
+            this.updatePosition();
+        }
+    }
+    disconnectedCallback() {
+        this.removeCloseHandlers();
+    }
+    resolveAnchor() {
+        if (!this.anchor)
+            return null;
+        if (typeof this.anchor === 'string') {
+            return document.getElementById(this.anchor);
+        }
+        return this.anchor;
+    }
+    async updatePosition() {
+        const anchorEl = this.resolveAnchor();
+        const container = this.containerEl;
+        if (!anchorEl || !container)
+            return;
+        const placement = toFloatingUiPlacement(this.placement);
+        const { x, y } = await computePosition(anchorEl, container, {
+            placement,
+            middleware: [offset(4), flip(), shift({ padding: 8 })],
+        });
+        container.style.left = `${x}px`;
+        container.style.top = `${y}px`;
+    }
+    async onOpen() {
+        this.previouslyFocusedElement = getDeepActiveElement(document);
+        this.setupCloseHandlers();
+        console.log('onOpen');
+        await waitFrame();
+        await this.updatePosition();
+        autoAssignId(this.el);
+        this.applyAnchorAriaOpen();
+        this.lmvzOpen.emit();
+        await waitFrame();
+        if (this.autoFocus) {
+            this.focusFirst();
+        }
+    }
+    onClose() {
+        this.removeCloseHandlers();
+        this.applyAnchorAriaClose();
+        this.restoreFocus();
+        this.lmvzClose.emit();
+    }
+    applyAnchorAriaOpen() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl)
+            return;
+        if (!anchorEl.hasAttribute('aria-haspopup')) {
+            anchorEl.setAttribute('aria-haspopup', 'dialog');
+        }
+        anchorEl.setAttribute('aria-expanded', 'true');
+        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+    }
+    applyAnchorAriaClose() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl)
+            return;
+        anchorEl.setAttribute('aria-expanded', 'false');
+    }
+    focusFirst() {
+        const { slotEl } = this;
+        if (!slotEl)
+            return;
+        const assigned = slotEl.assignedElements({ flatten: true });
+        for (const el of assigned) {
+            const focusable = walkShadowDOMUntil(el, canReceiveFocus);
+            if (focusable) {
+                focusable.focus();
+                return;
+            }
+        }
+    }
+    restoreFocus() {
+        const el = this.previouslyFocusedElement;
+        if (el?.isConnected) {
+            el.focus();
+        }
+        this.previouslyFocusedElement = null;
+    }
+    triggerClose() {
+        const event = this.lmvzCancel.emit();
+        if (!event.defaultPrevented) {
+            this.open = false;
+        }
+    }
+    setupCloseHandlers() {
+        const options = { signal: this.closureController.signal };
+        document.addEventListener('mousedown', (event) => {
+            if (!this.open)
+                return;
+            if (this.el.contains(event.target))
+                return;
+            this.triggerClose();
+        }, options);
+        document.addEventListener('keydown', (event) => {
+            if (!this.open)
+                return;
+            if (event.key !== 'Escape')
+                return;
+            this.triggerClose();
+        }, options);
+    }
+    removeCloseHandlers() {
+        this.closureController.abort();
+    }
+    render() {
+        return (h(Host, { key: '3dd462a66f17c1617e44787107379d9e4d8ca321' }, h("div", { key: '27106bc8f3169eb07e0d671635074ddb53feb652', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '3401e621d999a225aeb7cb23fa4f5412544a6dab', ref: (el) => (this.slotEl = el) }))));
+    }
+    static get is() { return "lmvz-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the popover is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLElement",
+                    "resolved": "HTMLElement | string | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The anchor element or its id. Used for positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"end\" | \"start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom-start'"
+                        }],
+                    "text": "Preferred placement relative to the anchor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Popover.Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "Popover": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Popover",
+                            "referenceLocation": "Popover"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'sm'"
+                        }],
+                    "text": "Controls the size variant of the card surface."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to move focus to the first focusable element on open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the popover container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzOpen",
+                "name": "lmvzOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after the popover opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzClose",
+                "name": "lmvzClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after the popover closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzCancel",
+                "name": "lmvzCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired before light-dismiss or Escape close.\nCall `event.preventDefault()` to veto the close."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the popover.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the popover, firing lmvzCancel first. If cancelled, the popover stays open.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover open state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "anchor",
+                "methodName": "handleAnchorChange"
+            }];
+    }
+}
+let popoverIdCounter = 0;
+function autoAssignId(hostEl) {
+    if (!hostEl.getAttribute('id')) {
+        hostEl.setAttribute('id', `lmvz-popover-${popoverIdCounter++}`);
+    }
+}
+function toFloatingUiPlacement(placement) {
+    if (placement === 'start')
+        return 'left';
+    if (placement === 'end')
+        return 'right';
+    return placement;
+}
+function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
+    if (!isAriaValidationEnabled())
+        return;
+    const hasAriaLabel = !!label;
+    const hasAriaLabelledBy = hostEl.hasAttribute('aria-labelledby');
+    if (!hasAriaLabel && !hasAriaLabelledBy) {
+        console.warn('[lmvz-popover] Host element has no accessible label. Provide a `label` prop or an `aria-labelledby` attribute pointing to a valid element.');
+    }
+    if (!anchorProp)
+        return;
+    if (!anchorEl) {
+        console.warn('[lmvz-popover] Anchor prop is set but resolved to null. Ensure the anchor element exists in the DOM when the component loads.');
+        return;
+    }
+    if (!isInteractiveElement(anchorEl)) {
+        console.warn('[lmvz-popover] Anchor element is not interactive. Ensure the anchor is a button, link, input, select, textarea, has a `tabindex` attribute, or has an ARIA role that implies interactivity (button, link, menuitem, option, combobox, listbox, checkbox, radio, switch, tab).');
+    }
+}

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

@@ -110,16 +110,14 @@ input {
   min-width: 0;
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
   color: var(--radio-label-color);
   cursor: pointer;
   transition: color var(--radio-duration) var(--radio-easing);
 }
 .helper-text {
   display: block;
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);
   color: var(--radio-helper-color);
   margin-block-start: 2px;
 }