@lmvz-ds/components 0.23.0 → 0.25.0

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -62,6 +66,9 @@ dialog {
   border: none;
   padding: 0;
   background: transparent;
+  height: 100vh;
+  width: 100vw;
+  contain: layout size;
 }
 dialog::backdrop {
   /* TODO(LDHCID-135): Missing token for the modal backdrop color */
@@ -70,18 +77,23 @@ dialog::backdrop {
   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29);
 }
 .modal-shell {
-  position: relative;
+  margin-inline: auto;
+  top: 50%;
+  transform: translateY(-50%);
+
+  box-sizing: border-box;
+  width: fit-content;
+  max-height: 100%;
+  max-width: clamp(20rem, 100%, 90vw);
+
   display: flex;
   flex-direction: column;
-  inline-size: fit-content;
-  max-inline-size: clamp(40rem, 100%, 80vw);
   gap: var(--lmvz-modal-shell-gap);
-  padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem));
-  padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
-  border-radius: var(--lmvz-component-modal-border-radius, 18px);
+  padding: var(--lmvz-component-card-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-card-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
+  border-radius: var(--lmvz-component-card-lg-border-radius, 18px);
   background: var(--lmvz-semantic-color-surface-primary, #ffffff);
-  /* TODO(LDHCID-135): clarify overflow behaviour */
-  overflow: auto;
+
+  position: relative;
 
   .close-button {
     position: absolute;
@@ -89,9 +101,16 @@ dialog::backdrop {
     right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   }
 }
-@media (min-width: 768px) {
+@media (max-width: 402px) {
+  dialog {
+    margin: 0;
+    max-width: unset;
+    max-height: unset;
+  }
   .modal-shell {
-    max-inline-size: 100vw;
+    max-width: 100vw;
+    border-radius: 0;
+    height: 100%;
   }
 }
 .header {
@@ -111,4 +130,7 @@ dialog::backdrop {
 .body {
   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
     Router);
+  flex: 1;
+  overflow: scroll;
+  /* min-block-size: clamp(8rem, 40vw, 60vh); */
 }

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

@@ -1,6 +1,6 @@
+import closeIcon from "@lmvz-ds/icons/assets/close-sm.svg";
 import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { Host, h } from "@stencil/core";
-import closeIcon from "../../assets/icons/close-sm.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { getDeepActiveElement, inheritAriaAttributes } from "../../utils/component";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
@@ -223,7 +223,7 @@ export class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (h(Host, { key: 'f014c692b82fae6dd96dffdbda4043aa9174004f' }, h("dialog", { key: '8939eda4aba44f1b6c9e8983cacddba83f668692', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '93f43c5f7c258494c86f9604b7eeac0046f912d6', class: "modal-shell" }, h("header", { key: '2e8177a5e0812007fede430533e6a0aa9b7bc0ea', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'fb4b537386077b837758f4b61c45433ad6c747cc', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '2507b2b7af3b18e859e87b7d682bdf189c4df53d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '5e4bcd8771babae9a9dc34fc908eb9210639a497', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '32aada0eea679fd1610eb704ac02cca1f27168ff', icon: closeIconSvg }))), h("div", { key: '1dc811f3edcd9ab1611483c90345483fee94b318', class: "body" }, h("slot", { key: 'cf870234c54d659cdd85d1a736626707f65cca4a' })), h("footer", { key: 'c2ed7badb41a09d1187af2221f33fc2a87bcb606', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: 'c4846b44ff94b0411d79d88b3bb8447dd2a5967a', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff', name: "actions" })))))));
+        return (h(Host, { key: '1fbdbb1ab2d3ad423075465108d4ff807d07404e' }, h("dialog", { key: '622dd60366ad594e16471cc8921c97d23af14ccb', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: 'bcdfbefbd5f380e2bf946aed479d542a33927af1', class: "modal-shell" }, h("header", { key: 'dcd23467473d58b51bddaf613b3ac8c922eecdc6', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'b2aa21fda4a80d2ea003e6ec876c2b74df5d29fd', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b7238e5b24c0822a94087d4ff0567e6406542c73', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '5059671fb4d81c685becd3adb0be52dd92ec4dec', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '498447e60e0e33fc165f39cea35434080e869d3c', icon: closeIconSvg }))), h("div", { key: '39ecefb52d5990cb689b0e4f18a8b6fc501c840d', class: "body" }, h("slot", { key: 'b014d0633c28fb6b399f11f2323e102949548776' })), h("footer", { key: '201dae98bcf810f369d77b7e9f36d7cc71ed5db4', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: 'e4559d383992e059f915670a0874cc3b9ef655a3', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '88b007e139d4a166a2ee886dcd0256293d5d33c9', name: "actions" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,182 @@
+
+@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 {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
+@font-face {
+  font-family: Router;
+  src:
+    local('RouterBook-Regular'),
+    local('Router-Book'),
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('RouterMedium-Regular'),
+    local('Router-Medium'),
+    url('/assets/fonts/Router-Medium.woff') format('woff');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('RouterBold-Regular'),
+    local('Router-Bold'),
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
+}
+
+}
+:host {
+  display: inline-block;
+
+  --radio-circle-size: var(--lmvz-global-s18, 18px);
+  --radio-dot-size: 0.5rem;
+
+  --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
+  --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
+  --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+
+  --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+
+  --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+  --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+
+  --radio-easing: var(--lmvz-global-easing-default, ease);
+  --radio-duration: 0.2s;
+
+  display: flex;
+  align-items: center;
+  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  overflow: clip;
+  cursor: pointer;
+  background-color: transparent;
+  position: relative;
+  transition: background-color var(--radio-duration) var(--radio-easing);
+}
+input {
+  position: absolute;
+  inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  opacity: 0;
+  width: var(--radio-circle-size);
+  height: var(--radio-circle-size);
+  margin: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.circle {
+  width: var(--radio-circle-size);
+  height: var(--radio-circle-size);
+  border-radius: 50%;
+  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);
+  background-color: var(--radio-bg);
+  pointer-events: none;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: border-color var(--radio-duration) var(--radio-easing);
+}
+.dot {
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
+  border-radius: 50%;
+  background-color: var(--radio-dot-color);
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+label {
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    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.4
+    Router);
+  color: var(--radio-helper-color);
+  margin-block-start: 2px;
+}
+.helper-text:empty {
+  display: none;
+}
+/* Hover state, guarded to prevent sticky hover on touch devices */
+@media (hover: hover) {
+  :host(:hover) .circle {
+    border-color: var(--radio-border-color-hover);
+  }
+
+  :host(:hover) {
+    background-color: var(--radio-wrapper-bg-hover);
+  }
+}
+/* Active state */
+:host(:active) {
+  background-color: var(--radio-wrapper-bg-active);
+}
+/* Checked state */
+:host([checked]) .circle {
+  border-color: var(--radio-border-color-checked);
+}
+:host([checked]) label {
+  color: var(--radio-label-color-checked);
+}
+/* Error state. MUST appear AFTER checked state rules (error takes visual precedence) */
+:host([error]) .circle {
+  border-color: var(--radio-border-color-error);
+}
+:host([error]) .helper-text {
+  color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+/* Disabled state */
+:host([disabled]) {
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+/* Forced Colors / Windows High Contrast */
+@media (forced-colors: active) {
+  .circle {
+    forced-color-adjust: auto;
+    border-color: ButtonText;
+    background-color: Field;
+  }
+
+  :host([checked]) .circle {
+    border-color: Highlight;
+  }
+
+  .dot {
+    background-color: ButtonText;
+  }
+
+  :host([checked]) .dot {
+    background-color: HighlightText;
+  }
+}