@lmvz-ds/components 0.25.0 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/cjs/{reactive-controller-host-DrtMkMd7.js → aria-validation-controller-BMV2tv9-.js} +0 -41
- package/cjs/{ds.constants-DSnxZ3ia.js → ds.constants-8fh6ItAF.js} +1 -1
- package/cjs/index.cjs.js +196 -2
- package/cjs/list-keyboard-controller-CzZdPBeH.js +173 -0
- package/cjs/lmvz-button-group.cjs.entry.js +183 -0
- package/cjs/lmvz-button_2.cjs.entry.js +199 -0
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +8 -4
- package/cjs/lmvz-chip.cjs.entry.js +5 -4
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +7 -51
- package/cjs/lmvz-input.cjs.entry.js +3 -2
- package/cjs/lmvz-menuitem.cjs.entry.js +4 -3
- package/cjs/lmvz-modal.cjs.entry.js +4 -3
- package/cjs/lmvz-radio.cjs.entry.js +4 -3
- package/cjs/lmvz-select.cjs.entry.js +3 -2
- package/cjs/lmvz-snackbar.cjs.entry.js +83 -0
- package/cjs/lmvz-tab.cjs.entry.js +31 -0
- package/cjs/lmvz-tabs.cjs.entry.js +256 -0
- package/cjs/lmvz-toggle.cjs.entry.js +5 -4
- package/cjs/loader.cjs.js +1 -1
- package/cjs/reactive-controller-host-B_lZtcA6.js +43 -0
- package/collection/api/ds.constants.js +4 -1
- package/collection/collection-manifest.json +3 -0
- package/collection/components/lmvz-button/lmvz-button.css +6 -6
- package/collection/components/lmvz-button-group/lmvz-button-group.css +2 -2
- package/collection/components/lmvz-card/lmvz-card.css +9 -9
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +14 -12
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +4 -1
- package/collection/components/lmvz-chip/lmvz-chip.css +2 -2
- package/collection/components/lmvz-header/lmvz-header.js +3 -3
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +4 -16
- package/collection/components/lmvz-radio/lmvz-radio.css +4 -4
- package/collection/components/lmvz-snackbar/lmvz-snackbar.css +101 -0
- package/collection/components/lmvz-snackbar/lmvz-snackbar.js +266 -0
- package/collection/components/lmvz-snackbar/public.js +1 -0
- package/collection/components/lmvz-snackbar/snackbar-controller.js +194 -0
- package/collection/components/lmvz-tab/lmvz-tab.css +148 -0
- package/collection/components/lmvz-tab/lmvz-tab.js +125 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.css +58 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +399 -0
- package/collection/components/lmvz-toggle/lmvz-toggle.css +2 -2
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/index.js +1 -0
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/aria/list-keyboard-controller.js +151 -28
- package/components/index.d.ts +6 -0
- package/components/index.d.ts.bak +6 -0
- package/components/index.js +1 -1
- package/components/lmvz-action.js +1 -1
- package/components/lmvz-button-group.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.d.ts +11 -0
- package/components/lmvz-snackbar.d.ts.bak +11 -0
- package/components/lmvz-snackbar.js +1 -0
- package/components/lmvz-tab.d.ts +11 -0
- package/components/lmvz-tab.d.ts.bak +11 -0
- package/components/lmvz-tab.js +1 -0
- package/components/lmvz-tabs.d.ts +11 -0
- package/components/lmvz-tabs.d.ts.bak +11 -0
- package/components/lmvz-tabs.js +1 -0
- package/components/lmvz-toggle.js +1 -1
- package/components/p-0P2Wb3pE.js +1 -0
- package/components/p-2VdcUIrr.js +1 -0
- package/components/p-BJEQw1Sz.js +1 -0
- package/components/{p-Bb-kEOmU.js → p-Cs7RCOHZ.js} +1 -1
- package/components/p-CtaMrBNE.js +1 -0
- package/components/p-DjvbwRyl.js +1 -0
- package/components/{p-DYr7Jc0V.js → p-c7OzBK8f.js} +1 -1
- package/esm/{reactive-controller-host-ZrGf1F2-.js → aria-validation-controller-D-KO0Asb.js} +1 -41
- package/esm/{ds.constants-Bmi89ll1.js → ds.constants-BOOwq5dE.js} +1 -1
- package/esm/index.js +198 -1
- package/esm/list-keyboard-controller-Coi8XfUH.js +171 -0
- package/esm/lmvz-button-group.entry.js +181 -0
- package/esm/lmvz-button_2.entry.js +196 -0
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +7 -3
- package/esm/lmvz-chip.entry.js +4 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +6 -50
- package/esm/lmvz-input.entry.js +2 -1
- package/esm/lmvz-menuitem.entry.js +3 -2
- package/esm/lmvz-modal.entry.js +3 -2
- package/esm/lmvz-radio.entry.js +3 -2
- package/esm/lmvz-select.entry.js +2 -1
- package/esm/lmvz-snackbar.entry.js +81 -0
- package/esm/lmvz-tab.entry.js +29 -0
- package/esm/lmvz-tabs.entry.js +254 -0
- package/esm/lmvz-toggle.entry.js +4 -3
- package/esm/loader.js +1 -1
- package/esm/reactive-controller-host-FBuCCcFC.js +41 -0
- package/hydrate/index.js +565 -40
- package/hydrate/index.mjs +565 -40
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-0a37e0f2.entry.js +1 -0
- package/lmvz-components/p-25f045b2.entry.js +1 -0
- package/lmvz-components/p-43b463bf.entry.js +1 -0
- package/lmvz-components/p-4bd71a3c.entry.js +1 -0
- package/lmvz-components/p-6484fbc6.entry.js +1 -0
- package/lmvz-components/p-6988c3ea.entry.js +1 -0
- package/lmvz-components/p-6de9981f.entry.js +1 -0
- package/lmvz-components/p-758dbb82.entry.js +1 -0
- package/lmvz-components/p-7b15cdce.entry.js +1 -0
- package/lmvz-components/p-8874ff19.entry.js +1 -0
- package/lmvz-components/p-BOOwq5dE.js +1 -0
- package/lmvz-components/p-CtaMrBNE.js +1 -0
- package/lmvz-components/p-FBuCCcFC.js +1 -0
- package/lmvz-components/p-a5c921dc.entry.js +1 -0
- package/lmvz-components/p-bb46a884.entry.js +1 -0
- package/lmvz-components/p-bd23eab3.entry.js +1 -0
- package/lmvz-components/p-c6228cee.entry.js +1 -0
- package/lmvz-components/p-da16ff58.entry.js +1 -0
- package/lmvz-components/p-hRb38wX6.js +1 -0
- package/manifest.json +858 -186
- package/package.json +13 -1
- package/types/api/ds.constants.d.ts +9 -1
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -0
- package/types/components/lmvz-header/lmvz-header.d.ts +2 -2
- package/types/components/lmvz-snackbar/lmvz-snackbar.d.ts +21 -0
- package/types/components/lmvz-snackbar/public.d.ts +2 -0
- package/types/components/lmvz-snackbar/snackbar-controller.d.ts +32 -0
- package/types/components/lmvz-tab/lmvz-tab.d.ts +11 -0
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +43 -0
- package/types/components.d.ts +212 -1
- package/types/index.d.ts +1 -0
- package/types/utils/aria/list-keyboard-controller.d.ts +28 -5
- package/cjs/lmvz-button_3.cjs.entry.js +0 -375
- package/components/p-CCcoDnH-.js +0 -1
- package/components/p-CNmHnJ1D.js +0 -1
- package/components/p-vUYpZZoR.js +0 -1
- package/esm/lmvz-button_3.entry.js +0 -371
- package/lmvz-components/p-01aeca60.entry.js +0 -1
- package/lmvz-components/p-0dced359.entry.js +0 -1
- package/lmvz-components/p-2044a9ac.entry.js +0 -1
- package/lmvz-components/p-3c2adbb4.entry.js +0 -1
- package/lmvz-components/p-3df070b0.entry.js +0 -1
- package/lmvz-components/p-758078db.entry.js +0 -1
- package/lmvz-components/p-90f5a19d.entry.js +0 -1
- package/lmvz-components/p-Bmi89ll1.js +0 -1
- package/lmvz-components/p-CwX1wKkM.js +0 -1
- package/lmvz-components/p-acfeae08.entry.js +0 -1
- package/lmvz-components/p-c01a6c70.entry.js +0 -1
- package/lmvz-components/p-e1eaa7a2.entry.js +0 -1
- package/lmvz-components/p-e23d0054.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -5884,7 +5884,7 @@ class ReactiveControllerHost {
|
|
|
5884
5884
|
}
|
|
5885
5885
|
}
|
|
5886
5886
|
|
|
5887
|
-
const lmvzButtonCss = () => ` @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; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.
|
|
5887
|
+
const lmvzButtonCss = () => ` @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; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: 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); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; 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; } button > * { font: inherit; color: inherit; } button: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)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
5888
5888
|
|
|
5889
5889
|
class LmvzButton extends ReactiveControllerHost {
|
|
5890
5890
|
get el() { return getElement(this); }
|
|
@@ -8163,7 +8163,7 @@ function toValidSvgStringWithFallback(value) {
|
|
|
8163
8163
|
}
|
|
8164
8164
|
}
|
|
8165
8165
|
|
|
8166
|
-
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.
|
|
8166
|
+
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
|
|
8167
8167
|
|
|
8168
8168
|
class LmvzButtonGroup {
|
|
8169
8169
|
constructor(hostRef) {
|
|
@@ -8356,7 +8356,7 @@ function joinPath(...parts) {
|
|
|
8356
8356
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
8357
8357
|
}
|
|
8358
8358
|
|
|
8359
|
-
const lmvzCardCss = () => `@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; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.
|
|
8359
|
+
const lmvzCardCss = () => `@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; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: 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); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; 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; } button > * { font: inherit; color: inherit; } button: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)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } 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; 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); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { 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.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { 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(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { 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); } .image-wrapper.sc-lmvz-card { 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); } .actions.sc-lmvz-card { 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.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { 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)); flex: 1 0 0; }`;
|
|
8360
8360
|
|
|
8361
8361
|
class LmvzCard {
|
|
8362
8362
|
constructor(hostRef) {
|
|
@@ -8402,7 +8402,7 @@ class LmvzCard {
|
|
|
8402
8402
|
|
|
8403
8403
|
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
|
|
8404
8404
|
|
|
8405
|
-
const lmvzCheckboxCss = () => `@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-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #
|
|
8405
|
+
const lmvzCheckboxCss = () => `@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-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); cursor: pointer; transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; cursor: pointer; } label.sc-lmvz-checkbox { 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.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { 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; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }`;
|
|
8406
8406
|
|
|
8407
8407
|
const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
|
|
8408
8408
|
let checkboxIdCounter = 0;
|
|
@@ -8492,8 +8492,11 @@ class LmvzCheckbox extends ReactiveControllerHost {
|
|
|
8492
8492
|
this.checked = input.checked;
|
|
8493
8493
|
this.lmvzChange.emit(this.checked);
|
|
8494
8494
|
};
|
|
8495
|
+
retargetInnerClicks() {
|
|
8496
|
+
this.nativeInput?.click();
|
|
8497
|
+
}
|
|
8495
8498
|
render() {
|
|
8496
|
-
return (hAsync(Host, { key: '
|
|
8499
|
+
return (hAsync(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, hAsync("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, hAsync("input", { key: '8957359d0cc3f2c315badee7e20fcc81e85e0f00', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "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 }), hAsync("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, hAsync("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
8497
8500
|
}
|
|
8498
8501
|
static get formAssociated() { return true; }
|
|
8499
8502
|
static get watchers() { return {
|
|
@@ -8541,7 +8544,7 @@ function debounce(func, wait) {
|
|
|
8541
8544
|
};
|
|
8542
8545
|
}
|
|
8543
8546
|
|
|
8544
|
-
const lmvzChipCss = () => `:host { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); border: 1px solid var(--lmvz-chip-border-color); border-radius: var(--lmvz-semantic-border-radius-round, 999px); font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.
|
|
8547
|
+
const lmvzChipCss = () => `:host { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); border: 1px solid var(--lmvz-chip-border-color); border-radius: var(--lmvz-semantic-border-radius-round, 999px); font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5 Router); background-color: var(--lmvz-chip-background-color); color: var(--lmvz-chip-foreground-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); box-sizing: border-box; max-width: 100%; overflow: hidden; white-space: nowrap; > .content-overflow-wrapper { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } :host([size='small']) { padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } ::slotted(*) { display: inline; white-space: inherit; } ::slotted(lmvz-icon) { --lmvz-component-color: var(--lmvz-chip-foreground-color); --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } :host([type='warning']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00); } :host([type='success']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c); } :host([type='error']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } :host([type='neutral']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); } `;
|
|
8545
8548
|
|
|
8546
8549
|
class LmvzChip extends ReactiveControllerHost {
|
|
8547
8550
|
ariaValidationController = new AriaValidationController(this);
|
|
@@ -8613,49 +8616,171 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8613
8616
|
}; }
|
|
8614
8617
|
}
|
|
8615
8618
|
|
|
8616
|
-
|
|
8619
|
+
const defaultConfig = {
|
|
8620
|
+
orientation: 'both',
|
|
8621
|
+
enableHomeAndEnd: false,
|
|
8622
|
+
manageTabIndex: false,
|
|
8623
|
+
};
|
|
8624
|
+
class DirectionalFocusController {
|
|
8617
8625
|
host;
|
|
8618
8626
|
elements = [];
|
|
8619
|
-
|
|
8627
|
+
currentElement;
|
|
8628
|
+
config;
|
|
8629
|
+
constructor(host, config = {}) {
|
|
8620
8630
|
this.host = host;
|
|
8631
|
+
this.config = {
|
|
8632
|
+
...defaultConfig,
|
|
8633
|
+
...config,
|
|
8634
|
+
};
|
|
8621
8635
|
}
|
|
8622
|
-
|
|
8636
|
+
hostConnected() {
|
|
8623
8637
|
this.host.el.addEventListener('keydown', this.handleKeydown);
|
|
8638
|
+
this.syncManagedFocusTarget();
|
|
8639
|
+
}
|
|
8640
|
+
hostDisconnected() {
|
|
8641
|
+
this.host.el.removeEventListener('keydown', this.handleKeydown);
|
|
8624
8642
|
}
|
|
8625
8643
|
updateElements(elements) {
|
|
8626
|
-
this.
|
|
8644
|
+
const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
|
|
8645
|
+
this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
|
|
8646
|
+
this.syncManagedFocusTarget(previousElement);
|
|
8647
|
+
}
|
|
8648
|
+
setCurrentElement(element) {
|
|
8649
|
+
const previousElement = this.currentElement;
|
|
8650
|
+
this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
|
|
8651
|
+
this.syncManagedFocusTarget(previousElement);
|
|
8627
8652
|
}
|
|
8628
8653
|
handleKeydown = (event) => {
|
|
8629
|
-
const
|
|
8630
|
-
if (!
|
|
8654
|
+
const intent = this.getFocusIntent(event.key);
|
|
8655
|
+
if (!intent)
|
|
8631
8656
|
return;
|
|
8632
|
-
const activeElement =
|
|
8633
|
-
const nextElement = this.
|
|
8634
|
-
if (nextElement)
|
|
8635
|
-
|
|
8636
|
-
|
|
8637
|
-
|
|
8657
|
+
const activeElement = this.getManagedActiveElement();
|
|
8658
|
+
const nextElement = this.getTargetElement(activeElement, intent);
|
|
8659
|
+
if (!nextElement)
|
|
8660
|
+
return;
|
|
8661
|
+
event.preventDefault();
|
|
8662
|
+
this.applyFocusTarget(nextElement, true);
|
|
8638
8663
|
};
|
|
8639
|
-
|
|
8640
|
-
if (
|
|
8664
|
+
getFocusIntent(key) {
|
|
8665
|
+
if (this.config.enableHomeAndEnd && key === 'Home')
|
|
8666
|
+
return 'first';
|
|
8667
|
+
if (this.config.enableHomeAndEnd && key === 'End')
|
|
8668
|
+
return 'last';
|
|
8669
|
+
if (this.config.orientation === 'horizontal') {
|
|
8670
|
+
if (key === 'ArrowRight')
|
|
8671
|
+
return 'next';
|
|
8672
|
+
if (key === 'ArrowLeft')
|
|
8673
|
+
return 'previous';
|
|
8641
8674
|
return undefined;
|
|
8642
|
-
|
|
8643
|
-
|
|
8644
|
-
|
|
8675
|
+
}
|
|
8676
|
+
if (this.config.orientation === 'vertical') {
|
|
8677
|
+
if (key === 'ArrowDown')
|
|
8678
|
+
return 'next';
|
|
8679
|
+
if (key === 'ArrowUp')
|
|
8680
|
+
return 'previous';
|
|
8645
8681
|
return undefined;
|
|
8646
|
-
let nextIndex = undefined;
|
|
8647
|
-
if (direction === 'down') {
|
|
8648
|
-
nextIndex = (currentIndex + 1) % elements.length;
|
|
8649
8682
|
}
|
|
8650
|
-
|
|
8651
|
-
|
|
8683
|
+
if (key === 'ArrowDown' || key === 'ArrowRight')
|
|
8684
|
+
return 'next';
|
|
8685
|
+
if (key === 'ArrowUp' || key === 'ArrowLeft')
|
|
8686
|
+
return 'previous';
|
|
8687
|
+
return undefined;
|
|
8688
|
+
}
|
|
8689
|
+
getManagedActiveElement() {
|
|
8690
|
+
const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
|
|
8691
|
+
if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
|
|
8692
|
+
return activeElement;
|
|
8693
|
+
}
|
|
8694
|
+
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
8695
|
+
return this.currentElement;
|
|
8652
8696
|
}
|
|
8653
|
-
|
|
8697
|
+
return undefined;
|
|
8698
|
+
}
|
|
8699
|
+
getTargetElement(current, intent) {
|
|
8700
|
+
if (!this.elements.length)
|
|
8701
|
+
return undefined;
|
|
8702
|
+
if (intent === 'first')
|
|
8703
|
+
return this.findFocusableFromIndex(-1, 'next');
|
|
8704
|
+
if (intent === 'last')
|
|
8705
|
+
return this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
8706
|
+
const currentIndex = current ? this.elements.indexOf(current) : -1;
|
|
8707
|
+
if (currentIndex === -1) {
|
|
8708
|
+
return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
8709
|
+
}
|
|
8710
|
+
return this.findFocusableFromIndex(currentIndex, intent);
|
|
8711
|
+
}
|
|
8712
|
+
findFocusableFromIndex(startIndex, intent) {
|
|
8713
|
+
if (!this.elements.length)
|
|
8654
8714
|
return undefined;
|
|
8655
|
-
const
|
|
8656
|
-
|
|
8657
|
-
|
|
8658
|
-
|
|
8715
|
+
const step = intent === 'next' ? 1 : -1;
|
|
8716
|
+
for (let offset = 1; offset <= this.elements.length; offset++) {
|
|
8717
|
+
const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
|
|
8718
|
+
const candidate = this.elements[index];
|
|
8719
|
+
if (this.canMoveFocusTo(candidate))
|
|
8720
|
+
return candidate;
|
|
8721
|
+
}
|
|
8722
|
+
return undefined;
|
|
8723
|
+
}
|
|
8724
|
+
syncManagedFocusTarget(previousElement) {
|
|
8725
|
+
const nextElement = this.selectManagedElement(previousElement);
|
|
8726
|
+
const didChange = nextElement !== this.currentElement;
|
|
8727
|
+
this.currentElement = nextElement;
|
|
8728
|
+
if (this.config.manageTabIndex) {
|
|
8729
|
+
this.updateTabIndexes(nextElement);
|
|
8730
|
+
}
|
|
8731
|
+
if (didChange && nextElement) {
|
|
8732
|
+
this.config.onFocusTargetChange?.(nextElement);
|
|
8733
|
+
}
|
|
8734
|
+
}
|
|
8735
|
+
selectManagedElement(previousElement) {
|
|
8736
|
+
const activeElement = this.getManagedActiveElement();
|
|
8737
|
+
if (activeElement)
|
|
8738
|
+
return activeElement;
|
|
8739
|
+
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
8740
|
+
return this.currentElement;
|
|
8741
|
+
}
|
|
8742
|
+
if (previousElement && this.elements.includes(previousElement)) {
|
|
8743
|
+
return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
|
|
8744
|
+
}
|
|
8745
|
+
const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
|
|
8746
|
+
if (currentRovingTarget)
|
|
8747
|
+
return currentRovingTarget;
|
|
8748
|
+
return this.findFocusableFromIndex(-1, 'next');
|
|
8749
|
+
}
|
|
8750
|
+
updateTabIndexes(activeElement) {
|
|
8751
|
+
this.elements.forEach((element) => {
|
|
8752
|
+
element.tabIndex = activeElement && element === activeElement ? 0 : -1;
|
|
8753
|
+
});
|
|
8754
|
+
}
|
|
8755
|
+
applyFocusTarget(element, shouldFocus) {
|
|
8756
|
+
const didChange = element !== this.currentElement;
|
|
8757
|
+
this.currentElement = element;
|
|
8758
|
+
if (this.config.manageTabIndex) {
|
|
8759
|
+
this.updateTabIndexes(element);
|
|
8760
|
+
}
|
|
8761
|
+
if (shouldFocus) {
|
|
8762
|
+
element.focus();
|
|
8763
|
+
}
|
|
8764
|
+
if (didChange) {
|
|
8765
|
+
this.config.onFocusTargetChange?.(element);
|
|
8766
|
+
}
|
|
8767
|
+
}
|
|
8768
|
+
canMoveFocusTo(element) {
|
|
8769
|
+
if (!element)
|
|
8770
|
+
return false;
|
|
8771
|
+
if (element.hasAttribute('disabled'))
|
|
8772
|
+
return false;
|
|
8773
|
+
if ('disabled' in element && Boolean(element.disabled))
|
|
8774
|
+
return false;
|
|
8775
|
+
if (element.getAttribute('aria-disabled') === 'true')
|
|
8776
|
+
return false;
|
|
8777
|
+
if (this.config.isFocusableElement)
|
|
8778
|
+
return this.config.isFocusableElement(element);
|
|
8779
|
+
const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
|
|
8780
|
+
return (isTabOrderable &&
|
|
8781
|
+
element.getAttribute('aria-hidden') !== 'true' &&
|
|
8782
|
+
(element.checkVisibility?.() ?? true) &&
|
|
8783
|
+
element.offsetParent !== null);
|
|
8659
8784
|
}
|
|
8660
8785
|
}
|
|
8661
8786
|
|
|
@@ -8671,7 +8796,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
8671
8796
|
primarySlot;
|
|
8672
8797
|
secondarySlot;
|
|
8673
8798
|
secondaryNav;
|
|
8674
|
-
keyboardNavigationController = new
|
|
8799
|
+
keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
|
|
8675
8800
|
get primaryMenuitems() {
|
|
8676
8801
|
return this.primarySlot?.assignedElements({ flatten: false }) || [];
|
|
8677
8802
|
}
|
|
@@ -8745,7 +8870,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
8745
8870
|
}
|
|
8746
8871
|
}
|
|
8747
8872
|
render() {
|
|
8748
|
-
return (hAsync(Host, { key: '
|
|
8873
|
+
return (hAsync(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, hAsync("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, hAsync("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, hAsync("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
|
|
8749
8874
|
}
|
|
8750
8875
|
static get watchers() { return {
|
|
8751
8876
|
"lmvzActiveNav": [{
|
|
@@ -9063,7 +9188,7 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
9063
9188
|
}; }
|
|
9064
9189
|
}
|
|
9065
9190
|
|
|
9066
|
-
const lmvzMenuitemCss = () => `@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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; 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.
|
|
9191
|
+
const lmvzMenuitemCss = () => `@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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; 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); 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; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
|
|
9067
9192
|
|
|
9068
9193
|
class LmvzMenuItem extends ReactiveControllerHost {
|
|
9069
9194
|
get el() { return getElement(this); }
|
|
@@ -9104,7 +9229,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
9104
9229
|
|
|
9105
9230
|
const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
|
|
9106
9231
|
|
|
9107
|
-
const lmvzModalCss = () => ` @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; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { 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; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-
|
|
9232
|
+
const lmvzModalCss = () => ` @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; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { 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; gap: var(--lmvz-modal-shell-gap); 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); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .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.5 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.5 Router); flex: 1; overflow: scroll; } `;
|
|
9108
9233
|
|
|
9109
9234
|
const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
|
|
9110
9235
|
let modalIdCounter = 0;
|
|
@@ -9511,7 +9636,7 @@ class RadioGroupController {
|
|
|
9511
9636
|
}
|
|
9512
9637
|
}
|
|
9513
9638
|
|
|
9514
|
-
const lmvzRadioCss = () => `@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-radio-h { 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, #
|
|
9639
|
+
const lmvzRadioCss = () => `@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-radio-h { 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, #7a7a7a); --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.5rem, 0.44rem + 0.26vw, 0.75rem)); 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.sc-lmvz-radio { 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.sc-lmvz-radio { 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.sc-lmvz-radio { width: var(--radio-dot-size); height: var(--radio-dot-size); border-radius: 50%; background-color: var(--radio-dot-color); } .content.sc-lmvz-radio { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-radio { 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.sc-lmvz-radio { display: block; 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; } .helper-text.sc-lmvz-radio:empty { display: none; } @media (hover: hover) { .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio { border-color: var(--radio-border-color-hover); } .sc-lmvz-radio-h:hover { background-color: var(--radio-wrapper-bg-hover); } } .sc-lmvz-radio-h:active { background-color: var(--radio-wrapper-bg-active); } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio { color: var(--radio-label-color-checked); } [error].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio { color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } [disabled].sc-lmvz-radio-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } @media (forced-colors: active) { .circle.sc-lmvz-radio { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: Highlight; } .dot.sc-lmvz-radio { background-color: ButtonText; } [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio { background-color: HighlightText; } }`;
|
|
9515
9640
|
|
|
9516
9641
|
const focusWithinCss$1 = () => `.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
9517
9642
|
|
|
@@ -9779,7 +9904,404 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
9779
9904
|
}; }
|
|
9780
9905
|
}
|
|
9781
9906
|
|
|
9782
|
-
const
|
|
9907
|
+
const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
|
|
9908
|
+
|
|
9909
|
+
const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyQzE3LjUyMjggMjIgMjIgMTcuNTIyOCAyMiAxMkMyMiA2LjQ3NzE1IDE3LjUyMjggMiAxMiAyWk0xMiA3QzExLjQ0NzcgNyAxMSA3LjQ0NzcyIDExIDhDMTEgOC41NTIyOCAxMS40NDc3IDkgMTIgOUMxMi41NTIzIDkgMTMgOC41NTIyOCAxMyA4QzEzIDcuNDQ3NzIgMTIuNTUyMyA3IDEyIDdaTTExIDExQzEwLjQ0NzcgMTEgMTAgMTEuNDQ3NyAxMCAxMkMxMCAxMi41NTIzIDEwLjQ0NzcgMTMgMTEgMTNWMTZDMTEgMTYuNTUyMyAxMS40NDc3IDE3IDEyIDE3SDEzQzEzLjU1MjMgMTcgMTQgMTYuNTUyMyAxNCAxNkMxNCAxNS40NDc3IDEzLjU1MjMgMTUgMTMgMTVWMTJDMTMgMTEuNDQ3NyAxMi41NTIzIDExIDEyIDExSDExWiIvPgo8L3N2Zz4K';
|
|
9910
|
+
|
|
9911
|
+
const warningSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjI4NjQgMy4wNDkzOEMxMS4wMzgwIDEuNjUwMjEgMTIuOTYyMCAxLjY1MDIxIDEzLjcxMzYgMy4wNDkzOEwyMi42NjY4IDE5LjI0OTRDMjMuNDAyNiAyMC42MTYxIDIyLjQ1ODggMjIuMjUwMCAyMC45NTMyIDIyLjI1MDBIMy4wNDY4MEMxLjU0MTIwIDIyLjI1MDAgMC41OTc0MTAgMjAuNjE2MSAxLjMzMzIwIDE5LjI0OTRMMTAuMjg2NCAzLjA0OTM4Wk0xMiA4QzExLjQ0NzcgOCAxMSA4LjQ0NzcyIDExIDlWMTRDMTEgMTQuNTUyMyAxMS40NDc3IDE1IDEyIDE1QzEyLjU1MjMgMTUgMTMgMTQuNTUyMyAxMyAxNFY5QzEzIDguNDQ3NzIgMTIuNTUyMyA4IDEyIDhaTTEyIDE2QzExLjQ0NzcgMTYgMTEgMTYuNDQ3NyAxMSAxN0MxMSAxNy41NTIzIDExLjQ0NzcgMTggMTIgMThDMTIuNTUyMyAxOCAxMyAxNy41NTIzIDEzIDE3QzEzIDE2LjQ0NzcgMTIuNTUyMyAxNiAxMiAxNloiLz4KPC9zdmc+Cg==';
|
|
9912
|
+
|
|
9913
|
+
const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));left:50%;transform:translateX(-50%);z-index:2147483000;width:max-content;border:1px solid transparent;border-radius:var(--lmvz-semantic-border-radius-lg, 14px);padding:var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));pointer-events:auto;font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c);color:var(--lmvz-component-color)}:host([status='success']){background-color:var(--lmvz-semantic-color-status-success, #f1f9f8);border-color:var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c)}:host([status='warning']){background-color:var(--lmvz-semantic-color-status-warning, #fffbf0);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);--lmvz-component-color:var(--lmvz-semantic-color-status-on-warning, #7a5e00)}:host([status='error']){background-color:var(--lmvz-semantic-color-status-danger, #fdf1f2);border-color:var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);--lmvz-component-color:var(--lmvz-semantic-color-status-on-danger, #e52a31)}lmvz-icon{flex-shrink:0}.message{white-space:nowrap}@keyframes snackbar-enter{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes snackbar-leave{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(100%);opacity:0}}:host(.entering){animation:snackbar-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards}:host(.leaving){pointer-events:none;animation:snackbar-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards}@media (prefers-reduced-motion: reduce){:host(.entering){animation:none;transition:opacity 80ms ease;opacity:1}:host(.leaving){pointer-events:none;animation:none;transition:opacity 80ms ease;opacity:0}}`;
|
|
9914
|
+
|
|
9915
|
+
const STATUS_SVG = {
|
|
9916
|
+
success: infoSvg,
|
|
9917
|
+
warning: warningSvg,
|
|
9918
|
+
error: alertSvg,
|
|
9919
|
+
};
|
|
9920
|
+
class LmvzSnackbar {
|
|
9921
|
+
constructor(hostRef) {
|
|
9922
|
+
registerInstance(this, hostRef);
|
|
9923
|
+
this.lmvzClose = createEvent(this, "lmvzClose", 6);
|
|
9924
|
+
}
|
|
9925
|
+
get el() { return getElement(this); }
|
|
9926
|
+
animationClass = '';
|
|
9927
|
+
status = 'success';
|
|
9928
|
+
onStatusChange() {
|
|
9929
|
+
this.applyAriaLiveAttributes();
|
|
9930
|
+
}
|
|
9931
|
+
message = '';
|
|
9932
|
+
duration;
|
|
9933
|
+
priority = 'normal';
|
|
9934
|
+
actionLabel;
|
|
9935
|
+
lmvzClose;
|
|
9936
|
+
connectedCallback() {
|
|
9937
|
+
if (typeof document !== 'undefined') {
|
|
9938
|
+
this.applyAriaLiveAttributes();
|
|
9939
|
+
}
|
|
9940
|
+
}
|
|
9941
|
+
async show() {
|
|
9942
|
+
this.animationClass = '';
|
|
9943
|
+
requestAnimationFrame(() => {
|
|
9944
|
+
this.animationClass = 'entering';
|
|
9945
|
+
});
|
|
9946
|
+
}
|
|
9947
|
+
async hide() {
|
|
9948
|
+
this.animationClass = 'leaving';
|
|
9949
|
+
await new Promise((resolve) => {
|
|
9950
|
+
const timeout = setTimeout(resolve, 300);
|
|
9951
|
+
const onAnimationEnd = () => {
|
|
9952
|
+
clearTimeout(timeout);
|
|
9953
|
+
this.el.removeEventListener('animationend', onAnimationEnd);
|
|
9954
|
+
resolve();
|
|
9955
|
+
};
|
|
9956
|
+
this.el.addEventListener('animationend', onAnimationEnd);
|
|
9957
|
+
});
|
|
9958
|
+
}
|
|
9959
|
+
applyAriaLiveAttributes() {
|
|
9960
|
+
if (this.status === 'error') {
|
|
9961
|
+
this.el.setAttribute('role', 'alert');
|
|
9962
|
+
this.el.setAttribute('aria-live', 'assertive');
|
|
9963
|
+
}
|
|
9964
|
+
else {
|
|
9965
|
+
this.el.setAttribute('role', 'status');
|
|
9966
|
+
this.el.setAttribute('aria-live', 'polite');
|
|
9967
|
+
}
|
|
9968
|
+
this.el.setAttribute('aria-atomic', 'true');
|
|
9969
|
+
}
|
|
9970
|
+
handleActionClick = () => {
|
|
9971
|
+
this.lmvzClose.emit({ reason: 'action' });
|
|
9972
|
+
this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
|
|
9973
|
+
};
|
|
9974
|
+
render() {
|
|
9975
|
+
return (hAsync(Host, { key: '3cf529e3a1971926546758d2e04c3860fde23961', class: this.animationClass }, hAsync("lmvz-icon", { key: '3bc7fb142b19ca4f01c04d33759bcd52cd46c77e', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: 'b2d00f1602baefa7f1025d927d66f8867e3e7ce5', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: '92966ab42ef1c5fca044adf5b60a02b54ddcd43a', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
|
|
9976
|
+
}
|
|
9977
|
+
static get watchers() { return {
|
|
9978
|
+
"status": [{
|
|
9979
|
+
"onStatusChange": 0
|
|
9980
|
+
}]
|
|
9981
|
+
}; }
|
|
9982
|
+
static get style() { return lmvzSnackbarCss(); }
|
|
9983
|
+
static get cmpMeta() { return {
|
|
9984
|
+
"$flags$": 521,
|
|
9985
|
+
"$tagName$": "lmvz-snackbar",
|
|
9986
|
+
"$members$": {
|
|
9987
|
+
"status": [1537],
|
|
9988
|
+
"message": [1025],
|
|
9989
|
+
"duration": [1026],
|
|
9990
|
+
"priority": [1025],
|
|
9991
|
+
"actionLabel": [1025, "action-label"],
|
|
9992
|
+
"animationClass": [32],
|
|
9993
|
+
"show": [64],
|
|
9994
|
+
"hide": [64]
|
|
9995
|
+
},
|
|
9996
|
+
"$listeners$": undefined,
|
|
9997
|
+
"$lazyBundleId$": "-",
|
|
9998
|
+
"$attrsToReflect$": [["status", "status"]]
|
|
9999
|
+
}; }
|
|
10000
|
+
}
|
|
10001
|
+
|
|
10002
|
+
const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button: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)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
|
|
10003
|
+
|
|
10004
|
+
class LmvzTab {
|
|
10005
|
+
constructor(hostRef) {
|
|
10006
|
+
registerInstance(this, hostRef);
|
|
10007
|
+
}
|
|
10008
|
+
get el() { return getElement(this); }
|
|
10009
|
+
mediaSlotEl;
|
|
10010
|
+
value;
|
|
10011
|
+
disabled = false;
|
|
10012
|
+
selected = false;
|
|
10013
|
+
vertical = false;
|
|
10014
|
+
handleMediaSlotChange = () => {
|
|
10015
|
+
this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
|
|
10016
|
+
};
|
|
10017
|
+
componentDidLoad() {
|
|
10018
|
+
this.handleMediaSlotChange();
|
|
10019
|
+
this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
|
|
10020
|
+
}
|
|
10021
|
+
render() {
|
|
10022
|
+
return (hAsync(Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, hAsync("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, hAsync("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), hAsync("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
|
|
10023
|
+
}
|
|
10024
|
+
static get delegatesFocus() { return true; }
|
|
10025
|
+
static get style() { return lmvzTabCss(); }
|
|
10026
|
+
static get cmpMeta() { return {
|
|
10027
|
+
"$flags$": 793,
|
|
10028
|
+
"$tagName$": "lmvz-tab",
|
|
10029
|
+
"$members$": {
|
|
10030
|
+
"value": [513],
|
|
10031
|
+
"disabled": [516],
|
|
10032
|
+
"selected": [516],
|
|
10033
|
+
"vertical": [516]
|
|
10034
|
+
},
|
|
10035
|
+
"$listeners$": undefined,
|
|
10036
|
+
"$lazyBundleId$": "-",
|
|
10037
|
+
"$attrsToReflect$": [["value", "value"], ["disabled", "disabled"], ["selected", "selected"], ["vertical", "vertical"]]
|
|
10038
|
+
}; }
|
|
10039
|
+
}
|
|
10040
|
+
|
|
10041
|
+
const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
|
|
10042
|
+
|
|
10043
|
+
let tabsIdCounter = 0;
|
|
10044
|
+
class LmvzTabs extends ReactiveControllerHost {
|
|
10045
|
+
get el() { return getElement(this); }
|
|
10046
|
+
instanceId = ++tabsIdCounter;
|
|
10047
|
+
tabSlotEl;
|
|
10048
|
+
panelSlotEl;
|
|
10049
|
+
focusController = new DirectionalFocusController(this, {
|
|
10050
|
+
orientation: 'horizontal',
|
|
10051
|
+
manageTabIndex: true,
|
|
10052
|
+
enableHomeAndEnd: true,
|
|
10053
|
+
});
|
|
10054
|
+
value;
|
|
10055
|
+
orientation = 'horizontal';
|
|
10056
|
+
lmvzChange;
|
|
10057
|
+
resolvedValue;
|
|
10058
|
+
constructor(hostRef) {
|
|
10059
|
+
super();
|
|
10060
|
+
registerInstance(this, hostRef);
|
|
10061
|
+
this.lmvzChange = createEvent(this, "lmvzChange", 7);
|
|
10062
|
+
this.addController(this.focusController);
|
|
10063
|
+
}
|
|
10064
|
+
componentWillLoad() {
|
|
10065
|
+
super.componentWillLoad();
|
|
10066
|
+
this.syncOrientation();
|
|
10067
|
+
}
|
|
10068
|
+
componentDidLoad() {
|
|
10069
|
+
this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
|
|
10070
|
+
this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
|
|
10071
|
+
this.el.addEventListener('lmvzTabReady', this.handleTabReady);
|
|
10072
|
+
this.handleTabSlotChange();
|
|
10073
|
+
super.componentDidLoad();
|
|
10074
|
+
}
|
|
10075
|
+
disconnectedCallback() {
|
|
10076
|
+
this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
|
|
10077
|
+
super.disconnectedCallback();
|
|
10078
|
+
}
|
|
10079
|
+
handleValueChange(newValue) {
|
|
10080
|
+
this.applySelection(newValue);
|
|
10081
|
+
}
|
|
10082
|
+
handleOrientationChange() {
|
|
10083
|
+
this.syncOrientation();
|
|
10084
|
+
this.syncFocusTargets();
|
|
10085
|
+
this.syncTabOrientation();
|
|
10086
|
+
}
|
|
10087
|
+
async activateTab(value) {
|
|
10088
|
+
const tab = this.findTabByValue(value);
|
|
10089
|
+
if (!tab || this.isTabDisabled(tab))
|
|
10090
|
+
return;
|
|
10091
|
+
this.selectTab(value);
|
|
10092
|
+
}
|
|
10093
|
+
async getTabElements() {
|
|
10094
|
+
return this.slottedTabs;
|
|
10095
|
+
}
|
|
10096
|
+
async setTabPanelIds(pairs) {
|
|
10097
|
+
const tabs = this.slottedTabs;
|
|
10098
|
+
const panels = this.slottedPanels;
|
|
10099
|
+
pairs.forEach(([tabId, panelId], index) => {
|
|
10100
|
+
const tab = tabs[index];
|
|
10101
|
+
const panel = panels[index];
|
|
10102
|
+
const btnId = `${tabId}-btn`;
|
|
10103
|
+
if (tab) {
|
|
10104
|
+
tab.id = tabId;
|
|
10105
|
+
const btn = tab.shadowRoot?.querySelector('button');
|
|
10106
|
+
if (btn) {
|
|
10107
|
+
btn.id = btnId;
|
|
10108
|
+
btn.setAttribute('aria-controls', panelId);
|
|
10109
|
+
}
|
|
10110
|
+
}
|
|
10111
|
+
if (panel) {
|
|
10112
|
+
panel.id = panelId;
|
|
10113
|
+
panel.setAttribute('aria-labelledby', btnId);
|
|
10114
|
+
}
|
|
10115
|
+
});
|
|
10116
|
+
}
|
|
10117
|
+
get slottedTabs() {
|
|
10118
|
+
return (this.tabSlotEl?.assignedElements({ flatten: false }) ?? []).filter((el) => el.tagName.toLowerCase() === 'lmvz-tab');
|
|
10119
|
+
}
|
|
10120
|
+
get slottedPanels() {
|
|
10121
|
+
return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
|
|
10122
|
+
}
|
|
10123
|
+
handleTabSlotChange = () => {
|
|
10124
|
+
this.syncFocusTargets();
|
|
10125
|
+
this.syncTabOrientation();
|
|
10126
|
+
this.wireAriaIds();
|
|
10127
|
+
this.applySelection(this.value);
|
|
10128
|
+
this.updateIconTabsAttr();
|
|
10129
|
+
};
|
|
10130
|
+
handlePanelSlotChange = () => {
|
|
10131
|
+
this.wireAriaIds();
|
|
10132
|
+
this.applySelection(this.resolvedValue ?? this.value);
|
|
10133
|
+
};
|
|
10134
|
+
handleTabReady = () => {
|
|
10135
|
+
this.syncFocusTargets();
|
|
10136
|
+
this.wireAriaIds();
|
|
10137
|
+
this.applySelection(this.resolvedValue ?? this.value);
|
|
10138
|
+
this.updateIconTabsAttr();
|
|
10139
|
+
};
|
|
10140
|
+
updateIconTabsAttr() {
|
|
10141
|
+
this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
|
|
10142
|
+
}
|
|
10143
|
+
syncFocusTargets() {
|
|
10144
|
+
const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
|
|
10145
|
+
this.focusController.updateElements(buttons);
|
|
10146
|
+
}
|
|
10147
|
+
syncOrientation() {
|
|
10148
|
+
this.removeController(this.focusController);
|
|
10149
|
+
this.focusController.hostDisconnected?.();
|
|
10150
|
+
this.focusController = new DirectionalFocusController(this, {
|
|
10151
|
+
orientation: this.orientation,
|
|
10152
|
+
manageTabIndex: true,
|
|
10153
|
+
enableHomeAndEnd: true,
|
|
10154
|
+
});
|
|
10155
|
+
this.addController(this.focusController);
|
|
10156
|
+
if (this.el.isConnected) {
|
|
10157
|
+
this.focusController.hostConnected?.();
|
|
10158
|
+
}
|
|
10159
|
+
}
|
|
10160
|
+
syncTabOrientation() {
|
|
10161
|
+
const isVertical = this.orientation === 'vertical';
|
|
10162
|
+
this.slottedTabs.forEach((tab) => {
|
|
10163
|
+
tab.toggleAttribute('vertical', isVertical);
|
|
10164
|
+
});
|
|
10165
|
+
}
|
|
10166
|
+
wireAriaIds() {
|
|
10167
|
+
const tabs = this.slottedTabs;
|
|
10168
|
+
const panels = this.slottedPanels;
|
|
10169
|
+
const prefix = `lmvz-tabs-${this.instanceId}`;
|
|
10170
|
+
tabs.forEach((tab, index) => {
|
|
10171
|
+
const tabId = tab.id || `${prefix}-tab-${index}`;
|
|
10172
|
+
tab.id = tabId;
|
|
10173
|
+
const panel = panels[index];
|
|
10174
|
+
if (!panel)
|
|
10175
|
+
return;
|
|
10176
|
+
const panelId = panel.id || `${prefix}-panel-${index}`;
|
|
10177
|
+
panel.id = panelId;
|
|
10178
|
+
const btn = tab.shadowRoot?.querySelector('button');
|
|
10179
|
+
if (btn) {
|
|
10180
|
+
btn.setAttribute('aria-controls', panelId);
|
|
10181
|
+
btn.setAttribute('id', `${tabId}-btn`);
|
|
10182
|
+
}
|
|
10183
|
+
panel.setAttribute('role', panel.getAttribute('role') ?? 'tabpanel');
|
|
10184
|
+
panel.setAttribute('aria-labelledby', `${tabId}-btn`);
|
|
10185
|
+
});
|
|
10186
|
+
}
|
|
10187
|
+
applySelection(requested) {
|
|
10188
|
+
const tabs = this.slottedTabs;
|
|
10189
|
+
if (!tabs.length)
|
|
10190
|
+
return;
|
|
10191
|
+
let target = this.findTabByValue(requested);
|
|
10192
|
+
if (!target || this.isTabDisabled(target)) {
|
|
10193
|
+
target = this.findNearestEnabled(requested) ?? undefined;
|
|
10194
|
+
}
|
|
10195
|
+
if (!target)
|
|
10196
|
+
return;
|
|
10197
|
+
const effectiveValue = target.getAttribute('value') ?? '';
|
|
10198
|
+
this.resolvedValue = effectiveValue;
|
|
10199
|
+
if (this.value !== effectiveValue) {
|
|
10200
|
+
this.value = effectiveValue;
|
|
10201
|
+
}
|
|
10202
|
+
tabs.forEach((tab) => {
|
|
10203
|
+
const isSelected = tab.getAttribute('value') === effectiveValue;
|
|
10204
|
+
tab.toggleAttribute('selected', isSelected);
|
|
10205
|
+
const btn = tab.shadowRoot?.querySelector('button');
|
|
10206
|
+
if (btn)
|
|
10207
|
+
btn.setAttribute('aria-selected', String(isSelected));
|
|
10208
|
+
});
|
|
10209
|
+
this.slottedPanels.forEach((panel, index) => {
|
|
10210
|
+
const tab = tabs[index];
|
|
10211
|
+
const isActive = tab?.getAttribute('value') === effectiveValue;
|
|
10212
|
+
panel.toggleAttribute('hidden', !isActive);
|
|
10213
|
+
});
|
|
10214
|
+
const selectedBtn = target.shadowRoot?.querySelector('button');
|
|
10215
|
+
if (selectedBtn) {
|
|
10216
|
+
this.focusController.setCurrentElement(selectedBtn);
|
|
10217
|
+
}
|
|
10218
|
+
}
|
|
10219
|
+
isTabDisabled(tab) {
|
|
10220
|
+
return tab.hasAttribute('disabled') || !!tab.disabled;
|
|
10221
|
+
}
|
|
10222
|
+
findTabByValue(value) {
|
|
10223
|
+
return this.slottedTabs.find((tab) => tab.getAttribute('value') === value);
|
|
10224
|
+
}
|
|
10225
|
+
findNearestEnabled(fromValue) {
|
|
10226
|
+
const tabs = this.slottedTabs;
|
|
10227
|
+
const fromIndex = tabs.findIndex((t) => t.getAttribute('value') === fromValue);
|
|
10228
|
+
for (let offset = 1; offset < tabs.length; offset++) {
|
|
10229
|
+
const next = tabs[(fromIndex + offset) % tabs.length];
|
|
10230
|
+
if (next && !this.isTabDisabled(next))
|
|
10231
|
+
return next;
|
|
10232
|
+
const prev = tabs[(fromIndex - offset + tabs.length) % tabs.length];
|
|
10233
|
+
if (prev && !this.isTabDisabled(prev))
|
|
10234
|
+
return prev;
|
|
10235
|
+
}
|
|
10236
|
+
return undefined;
|
|
10237
|
+
}
|
|
10238
|
+
selectTab(value) {
|
|
10239
|
+
if (value === this.resolvedValue)
|
|
10240
|
+
return;
|
|
10241
|
+
this.applySelection(value);
|
|
10242
|
+
this.lmvzChange.emit({ value });
|
|
10243
|
+
}
|
|
10244
|
+
handleTabClick = (event) => {
|
|
10245
|
+
const target = event.target;
|
|
10246
|
+
const tab = target.closest('lmvz-tab');
|
|
10247
|
+
if (!tab)
|
|
10248
|
+
return;
|
|
10249
|
+
const value = tab.getAttribute('value');
|
|
10250
|
+
if (!value || this.isTabDisabled(tab))
|
|
10251
|
+
return;
|
|
10252
|
+
this.selectTab(value);
|
|
10253
|
+
};
|
|
10254
|
+
handleKeydown = (event) => {
|
|
10255
|
+
if (event.key !== 'Enter' && event.key !== ' ')
|
|
10256
|
+
return;
|
|
10257
|
+
const active = this.el.ownerDocument.activeElement;
|
|
10258
|
+
if (!active)
|
|
10259
|
+
return;
|
|
10260
|
+
let tab = null;
|
|
10261
|
+
for (const t of this.slottedTabs) {
|
|
10262
|
+
if (t === active) {
|
|
10263
|
+
tab = t;
|
|
10264
|
+
break;
|
|
10265
|
+
}
|
|
10266
|
+
}
|
|
10267
|
+
if (!tab)
|
|
10268
|
+
return;
|
|
10269
|
+
const value = tab.getAttribute('value');
|
|
10270
|
+
if (!value || this.isTabDisabled(tab))
|
|
10271
|
+
return;
|
|
10272
|
+
event.preventDefault();
|
|
10273
|
+
this.selectTab(value);
|
|
10274
|
+
};
|
|
10275
|
+
render() {
|
|
10276
|
+
return (hAsync(Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
10277
|
+
}
|
|
10278
|
+
static get watchers() { return {
|
|
10279
|
+
"value": [{
|
|
10280
|
+
"handleValueChange": 0
|
|
10281
|
+
}],
|
|
10282
|
+
"orientation": [{
|
|
10283
|
+
"handleOrientationChange": 0
|
|
10284
|
+
}]
|
|
10285
|
+
}; }
|
|
10286
|
+
static get style() { return lmvzTabsCss(); }
|
|
10287
|
+
static get cmpMeta() { return {
|
|
10288
|
+
"$flags$": 777,
|
|
10289
|
+
"$tagName$": "lmvz-tabs",
|
|
10290
|
+
"$members$": {
|
|
10291
|
+
"value": [1537],
|
|
10292
|
+
"orientation": [1537],
|
|
10293
|
+
"resolvedValue": [32],
|
|
10294
|
+
"activateTab": [64],
|
|
10295
|
+
"getTabElements": [64],
|
|
10296
|
+
"setTabPanelIds": [64]
|
|
10297
|
+
},
|
|
10298
|
+
"$listeners$": undefined,
|
|
10299
|
+
"$lazyBundleId$": "-",
|
|
10300
|
+
"$attrsToReflect$": [["value", "value"], ["orientation", "orientation"]]
|
|
10301
|
+
}; }
|
|
10302
|
+
}
|
|
10303
|
+
|
|
10304
|
+
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-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, 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, #c7c7c7); } [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; }`;
|
|
9783
10305
|
|
|
9784
10306
|
const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
9785
10307
|
|
|
@@ -9855,7 +10377,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
9855
10377
|
this.lmvzChange.emit(newChecked);
|
|
9856
10378
|
};
|
|
9857
10379
|
render() {
|
|
9858
|
-
return (hAsync(Host, { key: '
|
|
10380
|
+
return (hAsync(Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, hAsync("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, hAsync("input", { key: 'afe04f4305744b3110092f9bfcbe8b4ee6f21c37', 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 }), hAsync("span", { key: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
|
|
9859
10381
|
}
|
|
9860
10382
|
static get formAssociated() { return true; }
|
|
9861
10383
|
static get watchers() { return {
|
|
@@ -9904,6 +10426,9 @@ registerComponents([
|
|
|
9904
10426
|
LmvzModal,
|
|
9905
10427
|
LmvzRadio,
|
|
9906
10428
|
LmvzSelect,
|
|
10429
|
+
LmvzSnackbar,
|
|
10430
|
+
LmvzTab,
|
|
10431
|
+
LmvzTabs,
|
|
9907
10432
|
LmvzToggle,
|
|
9908
10433
|
]);
|
|
9909
10434
|
|