@lmvz-ds/components 0.35.1 → 0.36.0

package/cjs/lmvz-toggle.cjs.entry.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
-var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
+var index = require('./index-BgvZ4y-3.js');
+var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
 var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
-var stencil_util = require('./stencil.util-CBrPLd-F.js');
+var stencil_util = require('./stencil.util-TjS8_DoU.js');
 require('./aria-loader-DWUVcapD.js');
-require('./async.util-Dnl6c82X.js');
 
 const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @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; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
 
@@ -83,7 +82,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: '901f821ddae696fe877435bf20d08e4032cd61ee' }, index.h("span", { key: 'bbac0ab3e40e426be511cc49a0dcb2497edd7a9a', class: "track" }, index.h("input", { key: '1df7a78df28517189f690c6d453193e30d97d9ea', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: 'e975c1c280983355f2504fba15553a9f19e4216f', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '09b3305a1d0d6c116310cf88d1f8a92f6856f57e', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: 'bde08dcbd39c0c02602590bc0c536b5d671fa76e' }, index.h("span", { key: '2567f70f81014d8ab7b9073a0d59f33bfeeca6a5', class: "track" }, index.h("input", { key: '88c9fc7523489dd0decf5b5f3ddda604aadcf8a9', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '816fc007d7c87acc8ff0286eb861bd29059b44eb', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '9525cd785d2c6c3b6242c6f5eac215996b881873', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-TGsVZNDP.js');
+var index = require('./index-BgvZ4y-3.js');
 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-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-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":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["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],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":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],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":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],"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-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],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"]],{"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-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":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":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":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":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],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":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],"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-input_2.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],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}],[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"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/cjs/{async.util-Dnl6c82X.js → stencil.util-TjS8_DoU.js}

@@ -16,6 +16,18 @@ const raf = (h) => {
     return setTimeout(h);
 };
 
-exports.raf = raf;
+const componentOnReady = (stencilEl, callback) => {
+    if (hasLazyBuild(stencilEl)) {
+        stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
+    }
+    else {
+        raf(() => callback(stencilEl));
+    }
+};
+const hasLazyBuild = (stencilEl) => {
+    return stencilEl.componentOnReady !== undefined;
+};
+
+exports.componentOnReady = componentOnReady;
 exports.wait = wait;
 exports.waitFrame = waitFrame;

package/collection/assets/icons/calendar.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect x="3.5" y="5" width="17" height="15" rx="2" stroke="currentColor" stroke-width="1.75"/>
+    <path d="M3.5 9.5H20.5" stroke="currentColor" stroke-width="1.75"/>
+    <path d="M8 3V6.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+    <path d="M16 3V6.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+</svg>

package/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/lmvz-card/lmvz-card.js",
     "components/lmvz-checkbox/lmvz-checkbox.js",
     "components/lmvz-chip/lmvz-chip.js",
+    "components/lmvz-datepicker/lmvz-datepicker.js",
     "components/lmvz-header/lmvz-header.js",
     "components/lmvz-icon/lmvz-icon.js",
     "components/lmvz-input/lmvz-input.js",

package/collection/components/lmvz-action-list/lmvz-action-list.css

@@ -63,6 +63,7 @@ hr {
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
   min-height: var(--lmvz-button-min-height);
+  min-width: var(--lmvz-button-min-height);
   border-radius: var(--lmvz-button-radius);
   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
   background-color: var(--lmvz-button-background);

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

@@ -91,6 +91,7 @@ hr {
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
   min-height: var(--lmvz-button-min-height);
+  min-width: var(--lmvz-button-min-height);
   border-radius: var(--lmvz-button-radius);
   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
   background-color: var(--lmvz-button-background);

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

@@ -92,6 +92,7 @@ hr {
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
   min-height: var(--lmvz-button-min-height);
+  min-width: var(--lmvz-button-min-height);
   border-radius: var(--lmvz-button-radius);
   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
   background-color: var(--lmvz-button-background);

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

@@ -0,0 +1,166 @@
+
+@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 / Panel ─────────────────────────────────────────────────────────── */
+:host {
+  display: inline-block;
+  width: 100%;
+}
+/*
+ * Card chrome (background, border-radius, padding, shadow) is provided by the
+ * `lmvz-wrapper-card-md` class on the composed `lmvz-popover` — do not duplicate it here.
+ */
+.datepicker-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+}
+/* ─── Header ────────────────────────────────────────────────────────────────── */
+.datepicker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.datepicker-month-label {
+  /* Reset native button styles */
+  all: unset;
+  /* Re-apply needed styles */
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+  text-align: center;
+  cursor: default;
+  /* Disabled state: no pointer events, but remains visible */
+  pointer-events: none;
+  user-select: none;
+}
+/* ─── Weekday row ────────────────────────────────────────────────────────────── */
+.datepicker-weekday-row {
+  display: flex;
+  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  width: 100%;
+}
+.datepicker-weekday {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
+    Router);
+  color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
+  min-width: 0;
+  text-align: center;
+}
+/* ─── Grid ────────────────────────────────────────────────────────────────────── */
+.datepicker-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+}
+.datepicker-week-row {
+  display: flex;
+  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+}
+/* ─── Day cells ────────────────────────────────────────────────────────────────── */
+[part~='day'] {
+  /* Reset native button */
+  all: unset;
+  /* Flex child of week-row (replaces removed .datepicker-cell wrapper) */
+  flex: 1;
+  /* Sizing: fluid square matching input-size-md */
+  width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  min-width: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  box-sizing: border-box;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+  background-color: transparent;
+  cursor: pointer;
+  /* Smooth state transitions */
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+  /* Ensure the outline renders outside the border-radius */
+  position: relative;
+}
+[part~='day--disabled'],
+[part~='day']:disabled {
+  opacity: var(--lmvz-global-opacity-disabled, 40%);
+  pointer-events: none;
+}
+[part~='day']: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));
+}
+[part~='day']:not(:disabled):hover {
+  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+}
+[part~='day--today'] {
+  box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc);
+}
+[part~='day--today']:not(:disabled):hover {
+  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  box-shadow: inset 0 0 0 1px var(--lmvz-semantic-color-border-active, #0f8acc);
+}
+[part~='day--selected'] {
+  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
+  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
+  box-shadow: none;
+}
+[part~='day--today'][part~='day--selected'] {
+  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
+  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
+  box-shadow: none;
+}
+[part~='day--selected']:not(:disabled):hover {
+  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
+  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
+}
+[part~='day--out-of-month'] {
+  color: var(--lmvz-semantic-color-on-surface-tertiary, #7a7a7a);
+}