@lmvz-ds/components 0.20.0 → 0.22.0

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

@@ -19,6 +19,9 @@ export class LmvzButton extends ReactiveControllerHost {
     disabled = false;
     type = 'button';
     form;
+    formMethod;
+    name;
+    value;
     constructor() {
         super();
         this.addController(new AriaValidationController(this));
@@ -31,18 +34,46 @@ export class LmvzButton extends ReactiveControllerHost {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         super.connectedCallback();
     }
+    disconnectedCallback() {
+        this.formButtonEl?.remove();
+        this.formButtonEl = null;
+        this.formEl = null;
+        super.disconnectedCallback();
+    }
     renderHiddenButton() {
-        const formEl = (this.formEl = findFormByRef(this.form, this.el));
-        if (!formEl)
+        if (this.type !== 'submit') {
+            this.formButtonEl?.remove();
+            this.formButtonEl = null;
+            this.formEl = null;
             return;
-        const { formButtonEl } = this;
-        if (formButtonEl !== null && formEl.contains(formButtonEl))
+        }
+        const formEl = findFormByRef(this.form, this.el);
+        if (!formEl) {
+            this.formButtonEl?.remove();
+            this.formButtonEl = null;
+            this.formEl = null;
             return;
-        const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
-        newFormButtonEl.type = 'submit';
-        newFormButtonEl.style.display = 'none';
-        newFormButtonEl.disabled = this.disabled;
-        formEl.appendChild(newFormButtonEl);
+        }
+        this.formEl = formEl;
+        const formButtonEl = this.formButtonEl ?? document.createElement('button');
+        formButtonEl.type = 'submit';
+        formButtonEl.style.display = 'none';
+        formButtonEl.disabled = this.disabled;
+        formButtonEl.name = this.name ?? '';
+        formButtonEl.value = this.value ?? '';
+        if (this.formMethod) {
+            formButtonEl.setAttribute('formmethod', this.formMethod);
+        }
+        else {
+            formButtonEl.removeAttribute('formmethod');
+        }
+        if (this.formButtonEl !== formButtonEl) {
+            this.formButtonEl = formButtonEl;
+        }
+        if (formButtonEl.parentElement !== formEl) {
+            formButtonEl.remove();
+            formEl.appendChild(formButtonEl);
+        }
     }
     submitForm(ev) {
         if (this.formEl && this.formButtonEl) {
@@ -57,7 +88,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
+        return (h(Host, { key: '6c44aa8a4b40927313461b5139e88066b855dca6', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '3696f0ad46a03fe9573571b46a56772def87bf53', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '3ecce9c6ae978b72b14a807d93248a4566a13f4b' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -225,6 +256,63 @@ export class LmvzButton extends ReactiveControllerHost {
                 "setter": false,
                 "reflect": false,
                 "attribute": "form"
+            },
+            "formMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dialog' | 'get' | 'post'",
+                    "resolved": "\"dialog\" | \"get\" | \"post\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native formmethod value forwarded to the hidden native submit button.\nUse `dialog` to support native dialog close/confirm flows from `lmvz-button`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-method"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button name forwarded to the hidden native submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button value forwarded to the hidden native submit button.\nFor `formmethod=\"dialog\"` flows this becomes the dialog `returnValue`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }

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

@@ -40,7 +40,7 @@ export class LmvzChip extends ReactiveControllerHost {
         this.checkContent();
     }
     checkContent = debounce(() => {
-        if (!isAriaValidationEnabled)
+        if (!isAriaValidationEnabled())
             return;
         const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
         if (!elements.length) {
@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: 'c77e8ae55531eefb31dd37b41b4851746a78f077', type: this.type, size: this.size }, h("slot", { key: '3f4d0a8feb887080172d11facc01afbe730b2726', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '6ec135ebcb32f15fea342379ac2b1dfebbe76fa6', class: "content-overflow-wrapper" }, h("slot", { key: '053afb88e2d6702428aab195bfcec6aff6d9c55f', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'ed51db073a512a32d12da59dee285708b83ae87b', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: '14ee006aff40f125aef2e9a461e68e25c6ed27d6', type: this.type, size: this.size }, h("slot", { key: '3222c7f40b833f344aa233c13e2644d6e928bf4c', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '4d1c9fa87ccda9387b945444e9ac6a50703a19e5', class: "content-overflow-wrapper" }, h("slot", { key: '42866115b8a6c50e86663ed8934504240ee0e6fa', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '890afa73be440ee7e7620a024744be08fee57b83', 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-modal/lmvz-modal.css

@@ -0,0 +1,120 @@
+
+@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.theme {
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Book'),
+    url('/assets/fonts/Router-Book.woff') format('woff'),
+    local('Router');
+  font-weight: 400 normal;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Medium'),
+    url('/assets/fonts/Router-Medium.woff') format('woff'),
+    local('Router');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Bold'),
+    url('/assets/fonts/Router-Bold.woff') format('woff'),
+    local('Router');
+  font-weight: 700 bold;
+}
+
+}
+@layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+}
+:host {
+  display: contents;
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+
+  --lmvz-modal-shell-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+  --lmvz-modal-shell-gap: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+  --lmvz-modal-actions-gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --lmvz-modal-viewport-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+
+  /* TODO(LDHCID-135): Assumption until a modal container token/value is available. */
+  --lmvz-modal-shell-max-width: 40rem;
+}
+dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+}
+dialog::backdrop {
+  /* TODO(LDHCID-135): Missing token for the modal backdrop color */
+  /* Fallback for browsers without CSS Color Level 4 relative-color syntax (Chrome < 119, FF < 128, Safari < 16.4) */
+  background: rgba(0, 0, 0, 0.19);
+  background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.19);
+}
+.modal-shell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lmvz-modal-shell-gap);
+  inline-size: min(calc(100vw - (2 * var(--lmvz-modal-viewport-padding))), var(--lmvz-modal-shell-max-width));
+  max-inline-size: 100%;
+  padding: var(--lmvz-modal-shell-padding);
+  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
+  background: var(--lmvz-semantic-color-surface-primary, #ffffff);
+  /* TODO(LDHCID-135): clarify overflow behaviour */
+  overflow: auto;
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--lmvz-modal-shell-gap);
+}
+.title {
+  min-inline-size: 0;
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4
+    Router);
+}
+.has-title .title {
+  flex: 1 1 auto;
+}
+.body {
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    Router);
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--lmvz-modal-actions-gap);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    Router);
+  /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
+}
+.close-button {
+  display: inline-flex;
+  flex: none;
+}
+::slotted([slot='actions'][hidden]) {
+  display: none;
+}