@lmvz-ds/components 0.35.0 → 0.35.2
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 +12 -0
- package/README.md +10 -0
- package/cjs/{async.util-BQ60l-WC.js → async.util-Dnl6c82X.js} +1 -0
- package/cjs/{list-keyboard-controller-Dm5S_l0D.js → directional-focus-controller-DBat-oF7.js} +13 -1
- package/cjs/element-activation-controller-BHqCUgQv.js +57 -0
- package/cjs/{element.util-Dbyc8yUG.js → element.util-CRS_YJ59.js} +10 -2
- package/cjs/lmvz-action-list.cjs.entry.js +9 -6
- package/cjs/lmvz-action.cjs.entry.js +1 -1
- package/cjs/lmvz-button-group.cjs.entry.js +1 -1
- package/cjs/lmvz-button_2.cjs.entry.js +5 -6
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +1 -1
- package/cjs/lmvz-chip.cjs.entry.js +1 -1
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +9 -6
- package/cjs/lmvz-input.cjs.entry.js +4 -4
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
- package/cjs/lmvz-message.cjs.entry.js +42 -9
- package/cjs/lmvz-modal.cjs.entry.js +3 -3
- package/cjs/lmvz-popover.cjs.entry.js +48 -28
- package/cjs/lmvz-radio.cjs.entry.js +1 -1
- package/cjs/lmvz-select.cjs.entry.js +1 -1
- package/cjs/lmvz-tabs.cjs.entry.js +9 -6
- package/cjs/lmvz-toggle.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +1 -1
- package/{esm/reactive-controller-host-FBuCCcFC.js → cjs/reactive-controller-host-Bc6B_T45.js} +19 -1
- package/cjs/{stencil.util-DxdYjVoH.js → stencil.util-CBrPLd-F.js} +1 -1
- package/collection/components/lmvz-action/lmvz-action.js +1 -1
- package/collection/components/lmvz-action-list/lmvz-action-list.css +1 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.js +26 -2
- package/collection/components/lmvz-button/lmvz-button.css +1 -0
- package/collection/components/lmvz-button/lmvz-button.js +1 -2
- package/collection/components/lmvz-card/lmvz-card.css +1 -0
- package/collection/components/lmvz-header/lmvz-header.js +26 -2
- package/collection/components/lmvz-input/lmvz-input.css +2 -1
- package/collection/components/lmvz-message/lmvz-message.js +42 -9
- package/collection/components/lmvz-modal/lmvz-modal.js +1 -1
- package/collection/components/lmvz-modal/test/testing.js +36 -0
- package/collection/components/lmvz-popover/lmvz-popover.js +55 -28
- package/collection/components/lmvz-tabs/lmvz-tabs.js +22 -2
- package/collection/utils/aria/{list-keyboard-controller.js → directional-focus-controller.js} +11 -0
- package/collection/utils/aria/element-activation-controller.js +27 -11
- package/collection/utils/data/{event.utilt.js → event.util.js} +8 -0
- package/collection/utils/element/element.util.js +9 -2
- package/collection/utils/stencil/reactive-controller-host.js +14 -0
- package/components/index.js +1 -1
- package/components/lmvz-action-list.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-link.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-popover.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-B_rnXUwq.js +1 -0
- package/components/p-CgK6-SEe.js +1 -0
- package/components/{p-DbIm98qX.js → p-Chj7BuUZ.js} +1 -1
- package/components/p-CxLd309t.js +1 -0
- package/components/{p-D7S1WiEC.js → p-D5FL8n1q.js} +1 -1
- package/components/p-DLUsBYJH.js +1 -0
- package/components/p-DZj20TV1.js +1 -0
- package/components/p-bh9cItsP.js +1 -0
- package/components/p-zMWemcoB.js +1 -0
- package/esm/{async.util-D9nUtvTm.js → async.util-DZj20TV1.js} +1 -1
- package/esm/{list-keyboard-controller-tle6IRkv.js → directional-focus-controller-DgAdCZrG.js} +13 -2
- package/esm/element-activation-controller-7PNSl6io.js +54 -0
- package/esm/{element.util-B0eCxdyI.js → element.util-BFcYfHYq.js} +10 -3
- package/esm/lmvz-action-list.entry.js +8 -5
- package/esm/lmvz-action.entry.js +1 -1
- package/esm/lmvz-button-group.entry.js +1 -1
- package/esm/lmvz-button_2.entry.js +5 -6
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +1 -1
- package/esm/lmvz-chip.entry.js +1 -1
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +8 -5
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-menuitem.entry.js +3 -2
- package/esm/lmvz-message.entry.js +42 -9
- package/esm/lmvz-modal.entry.js +3 -3
- package/esm/lmvz-popover.entry.js +48 -28
- package/esm/lmvz-radio.entry.js +1 -1
- package/esm/lmvz-select.entry.js +1 -1
- package/esm/lmvz-tabs.entry.js +7 -4
- package/esm/lmvz-toggle.entry.js +3 -3
- package/esm/loader.js +1 -1
- package/{cjs/reactive-controller-host-B_lZtcA6.js → esm/reactive-controller-host-CICeIanv.js} +15 -3
- package/esm/{stencil.util-wGFRYLwZ.js → stencil.util-D2-5rsN3.js} +1 -1
- package/hydrate/index.js +216 -101
- package/hydrate/index.mjs +216 -101
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-c87e2281.entry.js → p-194a3af5.entry.js} +1 -1
- package/lmvz-components/{p-e0432f54.entry.js → p-24d13be6.entry.js} +1 -1
- package/lmvz-components/{p-c082390b.entry.js → p-46edf36f.entry.js} +1 -1
- package/lmvz-components/p-5ff55ba9.entry.js +1 -0
- package/lmvz-components/{p-c494bf8f.entry.js → p-888e04d7.entry.js} +1 -1
- package/lmvz-components/p-9dc420e2.entry.js +1 -0
- package/lmvz-components/p-BFcYfHYq.js +1 -0
- package/lmvz-components/p-BuEA0MWd.js +1 -0
- package/lmvz-components/p-CICeIanv.js +1 -0
- package/lmvz-components/p-DZj20TV1.js +1 -0
- package/lmvz-components/p-a887018d.entry.js +1 -0
- package/lmvz-components/p-aaa7691c.entry.js +1 -0
- package/lmvz-components/p-b6dd045b.entry.js +1 -0
- package/lmvz-components/p-bh9cItsP.js +1 -0
- package/lmvz-components/{p-4c68d21a.entry.js → p-c3e62aba.entry.js} +1 -1
- package/lmvz-components/{p-1d2c11ea.entry.js → p-d4154a65.entry.js} +1 -1
- package/lmvz-components/p-d45164a8.entry.js +1 -0
- package/lmvz-components/p-e4ce63b3.entry.js +1 -0
- package/lmvz-components/{p-cb75c951.entry.js → p-eb4c5a6f.entry.js} +1 -1
- package/lmvz-components/{p-8fb4c347.entry.js → p-eb62d4af.entry.js} +1 -1
- package/lmvz-components/{p-a4ef8e55.entry.js → p-f42b16e6.entry.js} +1 -1
- package/lmvz-components/p-fbf066d9.entry.js +1 -0
- package/lmvz-components/p-wlMjNjuv.js +1 -0
- package/manifest.json +79 -5
- package/package.json +1 -1
- package/types/api/ds.constants.d.ts +1 -0
- package/types/components/lmvz-action/lmvz-action.d.ts +1 -0
- package/types/components/lmvz-action-list/lmvz-action-list.d.ts +3 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +2 -1
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +1 -0
- package/types/components/lmvz-card/lmvz-card.d.ts +1 -0
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -0
- package/types/components/lmvz-chip/lmvz-chip.d.ts +1 -0
- package/types/components/lmvz-header/lmvz-header.d.ts +4 -2
- package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -0
- package/types/components/lmvz-input/lmvz-input.d.ts +1 -0
- package/types/components/lmvz-link/lmvz-link.d.ts +1 -0
- package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -0
- package/types/components/lmvz-message/lmvz-message.d.ts +1 -0
- package/types/components/lmvz-message/public.d.ts +1 -0
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -0
- package/types/components/lmvz-modal/test/testing.d.ts +10 -0
- package/types/components/lmvz-popover/lmvz-popover.d.ts +6 -3
- package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -0
- package/types/components/lmvz-select/lmvz-select.d.ts +1 -0
- package/types/components/lmvz-snackbar/lmvz-snackbar.d.ts +1 -0
- package/types/components/lmvz-snackbar/public.d.ts +1 -0
- package/types/components/lmvz-snackbar/snackbar-controller.d.ts +1 -0
- package/types/components/lmvz-spinner/lmvz-spinner.d.ts +1 -0
- package/types/components/lmvz-tab/lmvz-tab.d.ts +1 -0
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +3 -1
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -0
- package/types/components.d.ts +18 -0
- package/types/index.d.ts +1 -0
- package/types/utils/aria/aria-validation-controller.d.ts +1 -0
- package/types/utils/aria/aria.constants.d.ts +1 -0
- package/types/utils/aria/{list-keyboard-controller.d.ts → directional-focus-controller.d.ts} +13 -2
- package/types/utils/aria/element-activation-controller.d.ts +11 -2
- package/types/utils/async/async.util.d.ts +1 -0
- package/types/utils/data/event.util.d.ts +6 -0
- package/types/utils/data/number.util.d.ts +1 -0
- package/types/utils/data/object.util.d.ts +1 -0
- package/types/utils/data/time.util.d.ts +1 -0
- package/types/utils/element/element.util.d.ts +2 -0
- package/types/utils/environment.d.ts +1 -0
- package/types/utils/icons/icons-registry.d.ts +1 -0
- package/types/utils/icons/icons.d.ts +1 -0
- package/types/utils/icons/icons.unit.d.ts +1 -0
- package/types/utils/icons/public.d.ts +1 -0
- package/types/utils/public.d.ts +1 -0
- package/types/utils/radio/radio-group-controller.d.ts +1 -0
- package/types/utils/stencil/assets.d.ts +1 -0
- package/types/utils/stencil/reactive-controller-host.d.ts +8 -1
- package/types/utils/stencil/stencil.util.d.ts +1 -0
- package/cjs/element-activation-controller-DC_6T0Rt.js +0 -31
- package/components/p-BhSTYZC6.js +0 -1
- package/components/p-CK3Ixl1K.js +0 -1
- package/components/p-CN0JX9-m.js +0 -1
- package/components/p-D-2gj6LP.js +0 -1
- package/components/p-D9nUtvTm.js +0 -1
- package/components/p-DAMVH-31.js +0 -1
- package/components/p-JtkmlmeY.js +0 -1
- package/esm/element-activation-controller-CN0JX9-m.js +0 -29
- package/lmvz-components/p-45c3ccb6.entry.js +0 -1
- package/lmvz-components/p-49e98627.entry.js +0 -1
- package/lmvz-components/p-50063516.entry.js +0 -1
- package/lmvz-components/p-76be3fc9.entry.js +0 -1
- package/lmvz-components/p-854f1c72.entry.js +0 -1
- package/lmvz-components/p-886e42c7.entry.js +0 -1
- package/lmvz-components/p-9f8fd077.entry.js +0 -1
- package/lmvz-components/p-B0eCxdyI.js +0 -1
- package/lmvz-components/p-BhSTYZC6.js +0 -1
- package/lmvz-components/p-CN0JX9-m.js +0 -1
- package/lmvz-components/p-D9nUtvTm.js +0 -1
- package/lmvz-components/p-DuLiExhX.js +0 -1
- package/lmvz-components/p-FBuCCcFC.js +0 -1
- package/lmvz-components/p-bc237ab7.entry.js +0 -1
- package/types/utils/data/event.utilt.d.ts +0 -4
package/esm/lmvz-card.entry.js
CHANGED
|
@@ -20,7 +20,7 @@ function joinPath(...parts) {
|
|
|
20
20
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
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; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, 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-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); 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-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)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 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-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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(2rem, 1.82rem + 0.78vw, 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; }`;
|
|
23
|
+
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; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, 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-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); 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)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 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-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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(2rem, 1.82rem + 0.78vw, 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; }`;
|
|
24
24
|
|
|
25
25
|
const LmvzCard = class {
|
|
26
26
|
constructor(hostRef) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { t as toValidSvgStringWithFallback } from './svg-Dz3GD0LB.js';
|
|
3
3
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
4
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
5
5
|
import './logger-D06Ds9Dh.js';
|
|
6
6
|
import './aria-loader-BfH06m7H.js';
|
|
7
7
|
|
package/esm/lmvz-chip.entry.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { f as chipTypes, g as chipSizes } from './ds.constants-0ctLESas.js';
|
|
3
3
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
4
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
5
5
|
import { i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
|
|
6
6
|
|
|
7
7
|
function debounce(func, wait) {
|
package/esm/lmvz-components.js
CHANGED
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-action-list",[[774,"lmvz-action-list",{"label":[1]}]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-popover",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"label":[1],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":
|
|
20
|
+
return bootstrapLazy([["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-action-list",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-popover",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-radio",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
|
|
21
21
|
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
3
|
-
import { D as DirectionalFocusController } from './
|
|
4
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
3
|
+
import { D as DirectionalFocusController } from './directional-focus-controller-DgAdCZrG.js';
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
5
5
|
export { lmvz_menuitem } from './lmvz-menuitem.entry.js';
|
|
6
6
|
import './aria-loader-BfH06m7H.js';
|
|
7
|
-
import './element.util-
|
|
8
|
-
import './element-activation-controller-
|
|
7
|
+
import './element.util-BFcYfHYq.js';
|
|
8
|
+
import './element-activation-controller-7PNSl6io.js';
|
|
9
9
|
|
|
10
10
|
const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
|
|
11
11
|
|
|
@@ -42,6 +42,9 @@ const LmvzHeader = class extends ReactiveControllerHost {
|
|
|
42
42
|
handleActiveNavChange() {
|
|
43
43
|
this.updateElementsActive();
|
|
44
44
|
}
|
|
45
|
+
async initFocus() {
|
|
46
|
+
this.keyboardNavigationController.initFocus();
|
|
47
|
+
}
|
|
45
48
|
componentDidLoad() {
|
|
46
49
|
this.primarySlot?.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));
|
|
47
50
|
this.handlePrimaryNavItemsChange();
|
|
@@ -93,7 +96,7 @@ const LmvzHeader = class extends ReactiveControllerHost {
|
|
|
93
96
|
}
|
|
94
97
|
}
|
|
95
98
|
render() {
|
|
96
|
-
return (h(Host, { key: '
|
|
99
|
+
return (h(Host, { key: 'ce4b8cf9f7687e4af97d45908e2f0e484b90684f', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'a2213d8038d126e47262c4ec18071dd4302152db', class: "brand" }, h("slot", { key: '68a0a1e2b21859d78d2f9a7d3f5c86020c52c225', name: "brand" }, h("img", { key: 'd0a878bc4c9f7a3460e857fb5aa52f1d942a0423', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '687791624d6ced477bc0cce73ce97b26c7d03af0', "aria-label": "Hauptnavigation" }, h("div", { key: 'a9e8fa4a57e619a3d3b1056bfc0d5df74e89f630', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'f75f0a3bed2267aff902490f1905c67ad1b7e6be', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '3cf2d099bed99e4ba7b32a2f3171c69663785012', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '85dbe77ea8ab62aa400640495e11e2d174ca5210', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'cf5d135a5b969af6a2bbb5432a10f8e1b9af1dca', class: "actions" }, h("slot", { key: '1a0323668942151c071a24238039c7a216358363', name: "actions" }))));
|
|
97
100
|
}
|
|
98
101
|
static get watchers() { return {
|
|
99
102
|
"lmvzActiveNav": [{
|
package/esm/lmvz-input.entry.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h } from './index-BPeerEwm.js';
|
|
2
2
|
import { c as classNames } from './index-BfTCfPZ1.js';
|
|
3
3
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
4
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
5
|
-
import { c as componentOnReady } from './stencil.util-
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
5
|
+
import { c as componentOnReady } from './stencil.util-D2-5rsN3.js';
|
|
6
6
|
import './aria-loader-BfH06m7H.js';
|
|
7
|
-
import './async.util-
|
|
7
|
+
import './async.util-DZj20TV1.js';
|
|
8
8
|
|
|
9
|
-
const lmvzInputCss = () => `@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-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding:
|
|
9
|
+
const lmvzInputCss = () => `@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-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
|
|
10
10
|
|
|
11
11
|
let inputIdCounter = 0;
|
|
12
12
|
const LmvzInput = class extends ReactiveControllerHost {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
3
|
-
import { E as ElementActivationController } from './element-activation-controller-
|
|
4
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
3
|
+
import { E as ElementActivationController } from './element-activation-controller-7PNSl6io.js';
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
5
5
|
import './aria-loader-BfH06m7H.js';
|
|
6
|
+
import './element.util-BFcYfHYq.js';
|
|
6
7
|
|
|
7
8
|
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); }`;
|
|
8
9
|
|
|
@@ -15,14 +15,47 @@ const TYPE_SVG = {
|
|
|
15
15
|
warning: WARNING_SVG,
|
|
16
16
|
};
|
|
17
17
|
const BLOCK_TAGS = new Set([
|
|
18
|
-
'ADDRESS',
|
|
19
|
-
'
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
'
|
|
23
|
-
'
|
|
24
|
-
'
|
|
25
|
-
'
|
|
18
|
+
'ADDRESS',
|
|
19
|
+
'ARTICLE',
|
|
20
|
+
'ASIDE',
|
|
21
|
+
'BLOCKQUOTE',
|
|
22
|
+
'CAPTION',
|
|
23
|
+
'COLGROUP',
|
|
24
|
+
'DD',
|
|
25
|
+
'DETAILS',
|
|
26
|
+
'DIALOG',
|
|
27
|
+
'DIV',
|
|
28
|
+
'DL',
|
|
29
|
+
'DT',
|
|
30
|
+
'FIELDSET',
|
|
31
|
+
'FIGCAPTION',
|
|
32
|
+
'FIGURE',
|
|
33
|
+
'FOOTER',
|
|
34
|
+
'FORM',
|
|
35
|
+
'H1',
|
|
36
|
+
'H2',
|
|
37
|
+
'H3',
|
|
38
|
+
'H4',
|
|
39
|
+
'H5',
|
|
40
|
+
'H6',
|
|
41
|
+
'HEADER',
|
|
42
|
+
'HGROUP',
|
|
43
|
+
'HR',
|
|
44
|
+
'LI',
|
|
45
|
+
'MAIN',
|
|
46
|
+
'MENU',
|
|
47
|
+
'NAV',
|
|
48
|
+
'OL',
|
|
49
|
+
'P',
|
|
50
|
+
'PRE',
|
|
51
|
+
'SECTION',
|
|
52
|
+
'TABLE',
|
|
53
|
+
'TBODY',
|
|
54
|
+
'TD',
|
|
55
|
+
'TH',
|
|
56
|
+
'THEAD',
|
|
57
|
+
'TFOOT',
|
|
58
|
+
'TR',
|
|
26
59
|
'UL',
|
|
27
60
|
]);
|
|
28
61
|
const LmvzMessage = class {
|
|
@@ -68,7 +101,7 @@ const LmvzMessage = class {
|
|
|
68
101
|
}
|
|
69
102
|
render() {
|
|
70
103
|
const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
|
|
71
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: '99dad82a6300fb8d089f1ea688186d4b4316a058', role: role }, this.leadingIcon && h("span", { key: '2adf33102f7075a83ebf29d9b6e0d433a17beb68', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '286d3d0ea065534b84be18c927b2fcd7f30f34bd', class: "message" }, h("slot", { key: '261e865980515a816382b2c7c6b3a52b500308bf', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '46d964c0490bbdd47426fc228db0e3ccb108b416', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: 'ce1ec8beb756c2e11c948e227f94f81bd5568c88', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '5361c424e77ffea7984c2fd42357666cd86ba1d6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
|
|
72
105
|
}
|
|
73
106
|
};
|
|
74
107
|
LmvzMessage.style = lmvzMessageCss();
|
package/esm/lmvz-modal.entry.js
CHANGED
|
@@ -2,8 +2,8 @@ import { g as getElement, r as registerInstance, c as createEvent, h, H as Host
|
|
|
2
2
|
import { c as closeSmSvg } from './close-sm-BSV3KDWl.js';
|
|
3
3
|
import { t as toValidSvgStringWithFallback } from './svg-Dz3GD0LB.js';
|
|
4
4
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
5
|
-
import { a as inheritAriaAttributes, g as getDeepActiveElement } from './element.util-
|
|
6
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
5
|
+
import { a as inheritAriaAttributes, g as getDeepActiveElement } from './element.util-BFcYfHYq.js';
|
|
6
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
7
7
|
import './logger-D06Ds9Dh.js';
|
|
8
8
|
import './aria-loader-BfH06m7H.js';
|
|
9
9
|
|
|
@@ -231,7 +231,7 @@ const LmvzModal = class extends ReactiveControllerHost {
|
|
|
231
231
|
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
232
232
|
};
|
|
233
233
|
render() {
|
|
234
|
-
return (h(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '
|
|
234
|
+
return (h(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '72e17391097dfa756e572764f40080b6eec222b2', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '7bbae1aefa9ccc6646d5861683e3476339a545e4', icon: closeIconSvg }))), h("div", { key: '9f22628448e9af527eb10ef2602c498afc55c029', class: "body" }, h("slot", { key: '413e72707749b3abc987ef47a81cccda4b874c84' })), h("footer", { key: 'a1a8f648e88d1f9045e9cf866d332aac69e033df', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '7d7eeee7a2551a09bfb4fc513bde48828be5ee8b', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '76b00523167c5fa08f11fc351a37638227401711', name: "actions" })))))));
|
|
235
235
|
}
|
|
236
236
|
static get watchers() { return {
|
|
237
237
|
"open": [{
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { i as isFocusControllerHost } from './directional-focus-controller-DgAdCZrG.js';
|
|
4
|
+
import { a as addElementActivationListener } from './element-activation-controller-7PNSl6io.js';
|
|
5
|
+
import { w as wait, a as waitFrame } from './async.util-DZj20TV1.js';
|
|
6
|
+
import { e as isActionButton, g as getDeepActiveElement, l as isHtmlElement, w as walkShadowDOMUntil, b as isInteractiveElement, j as canReceiveFocus } from './element.util-BFcYfHYq.js';
|
|
7
|
+
import './reactive-controller-host-CICeIanv.js';
|
|
5
8
|
|
|
6
9
|
/**
|
|
7
10
|
* Custom positioning reference element.
|
|
@@ -1370,10 +1373,12 @@ const LmvzPopover = class {
|
|
|
1370
1373
|
this.lmvzCancel = createEvent(this, "lmvzCancel", 7);
|
|
1371
1374
|
}
|
|
1372
1375
|
get el() { return getElement(this); }
|
|
1373
|
-
|
|
1376
|
+
extEventController = new AbortController();
|
|
1377
|
+
closureController;
|
|
1374
1378
|
containerEl;
|
|
1375
1379
|
slotEl;
|
|
1376
1380
|
previouslyFocusedElement = null;
|
|
1381
|
+
anchorEl;
|
|
1377
1382
|
open = false;
|
|
1378
1383
|
anchor;
|
|
1379
1384
|
placement = 'bottom-start';
|
|
@@ -1399,7 +1404,6 @@ const LmvzPopover = class {
|
|
|
1399
1404
|
}
|
|
1400
1405
|
componentDidLoad() {
|
|
1401
1406
|
autoAssignId(this.el);
|
|
1402
|
-
validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
|
|
1403
1407
|
}
|
|
1404
1408
|
handleOpenChange(isOpen) {
|
|
1405
1409
|
if (isOpen) {
|
|
@@ -1409,24 +1413,40 @@ const LmvzPopover = class {
|
|
|
1409
1413
|
this.onClose();
|
|
1410
1414
|
}
|
|
1411
1415
|
}
|
|
1412
|
-
handleAnchorChange() {
|
|
1413
|
-
if (
|
|
1414
|
-
this.
|
|
1416
|
+
async handleAnchorChange(anchor) {
|
|
1417
|
+
if (!anchor) {
|
|
1418
|
+
console.warn('anchor property missing for popover', this.el?.id);
|
|
1419
|
+
this.anchor = undefined;
|
|
1420
|
+
return;
|
|
1415
1421
|
}
|
|
1422
|
+
await wait();
|
|
1423
|
+
this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
|
|
1424
|
+
this.setupAnchorEl();
|
|
1425
|
+
if (!this.open)
|
|
1426
|
+
return;
|
|
1427
|
+
this.updatePosition();
|
|
1416
1428
|
}
|
|
1417
1429
|
disconnectedCallback() {
|
|
1418
1430
|
this.removeCloseHandlers();
|
|
1431
|
+
this.extEventController.abort();
|
|
1419
1432
|
}
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
return
|
|
1433
|
+
setupAnchorEl() {
|
|
1434
|
+
const { anchorEl } = this;
|
|
1435
|
+
if (!anchorEl) {
|
|
1436
|
+
console.warn('no anchor element set for', this);
|
|
1437
|
+
return;
|
|
1425
1438
|
}
|
|
1426
|
-
|
|
1439
|
+
if (!anchorEl.hasAttribute('aria-haspopup')) {
|
|
1440
|
+
anchorEl.setAttribute('aria-haspopup', 'dialog');
|
|
1441
|
+
}
|
|
1442
|
+
anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
|
|
1443
|
+
if (isActionButton(anchorEl)) {
|
|
1444
|
+
addElementActivationListener(anchorEl, this.toggle.bind(this), this.extEventController.signal);
|
|
1445
|
+
}
|
|
1446
|
+
validatePopoverAria(this.el, this.label, this.anchor, anchorEl);
|
|
1427
1447
|
}
|
|
1428
1448
|
async updatePosition() {
|
|
1429
|
-
const anchorEl = this
|
|
1449
|
+
const { anchorEl } = this;
|
|
1430
1450
|
const container = this.containerEl;
|
|
1431
1451
|
if (!anchorEl || !container)
|
|
1432
1452
|
return;
|
|
@@ -1441,7 +1461,6 @@ const LmvzPopover = class {
|
|
|
1441
1461
|
async onOpen() {
|
|
1442
1462
|
this.previouslyFocusedElement = getDeepActiveElement(document);
|
|
1443
1463
|
this.setupCloseHandlers();
|
|
1444
|
-
console.log('onOpen');
|
|
1445
1464
|
await waitFrame();
|
|
1446
1465
|
await this.updatePosition();
|
|
1447
1466
|
autoAssignId(this.el);
|
|
@@ -1459,20 +1478,14 @@ const LmvzPopover = class {
|
|
|
1459
1478
|
this.lmvzClose.emit();
|
|
1460
1479
|
}
|
|
1461
1480
|
applyAnchorAriaOpen() {
|
|
1462
|
-
|
|
1463
|
-
if (!anchorEl)
|
|
1481
|
+
if (!this.anchorEl)
|
|
1464
1482
|
return;
|
|
1465
|
-
|
|
1466
|
-
anchorEl.setAttribute('aria-haspopup', 'dialog');
|
|
1467
|
-
}
|
|
1468
|
-
anchorEl.setAttribute('aria-expanded', 'true');
|
|
1469
|
-
anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
|
|
1483
|
+
this.anchorEl.setAttribute('aria-expanded', 'true');
|
|
1470
1484
|
}
|
|
1471
1485
|
applyAnchorAriaClose() {
|
|
1472
|
-
|
|
1473
|
-
if (!anchorEl)
|
|
1486
|
+
if (!this.anchorEl)
|
|
1474
1487
|
return;
|
|
1475
|
-
anchorEl.setAttribute('aria-expanded', 'false');
|
|
1488
|
+
this.anchorEl.setAttribute('aria-expanded', 'false');
|
|
1476
1489
|
}
|
|
1477
1490
|
focusFirst() {
|
|
1478
1491
|
const { slotEl } = this;
|
|
@@ -1480,6 +1493,12 @@ const LmvzPopover = class {
|
|
|
1480
1493
|
return;
|
|
1481
1494
|
const assigned = slotEl.assignedElements({ flatten: true });
|
|
1482
1495
|
for (const el of assigned) {
|
|
1496
|
+
if (!isHtmlElement(el))
|
|
1497
|
+
continue;
|
|
1498
|
+
if (isFocusControllerHost(el)) {
|
|
1499
|
+
el.initFocus();
|
|
1500
|
+
return;
|
|
1501
|
+
}
|
|
1483
1502
|
const focusable = walkShadowDOMUntil(el, canReceiveFocus);
|
|
1484
1503
|
if (focusable) {
|
|
1485
1504
|
focusable.focus();
|
|
@@ -1501,6 +1520,7 @@ const LmvzPopover = class {
|
|
|
1501
1520
|
}
|
|
1502
1521
|
}
|
|
1503
1522
|
setupCloseHandlers() {
|
|
1523
|
+
this.closureController = new AbortController();
|
|
1504
1524
|
const options = { signal: this.closureController.signal };
|
|
1505
1525
|
document.addEventListener('mousedown', (event) => {
|
|
1506
1526
|
if (!this.open)
|
|
@@ -1518,17 +1538,17 @@ const LmvzPopover = class {
|
|
|
1518
1538
|
}, options);
|
|
1519
1539
|
}
|
|
1520
1540
|
removeCloseHandlers() {
|
|
1521
|
-
this.closureController
|
|
1541
|
+
this.closureController?.abort();
|
|
1522
1542
|
}
|
|
1523
1543
|
render() {
|
|
1524
|
-
return (h(Host, { key: '
|
|
1544
|
+
return (h(Host, { key: '744dae23d80c1e81a0b8bd2e9fcb02c6669d54cd' }, h("div", { key: '7f40e25f1e05738b2bbf900b90613004eb188395', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '5a400fd9e697254007973f2dce172588fe3760ee', ref: (el) => (this.slotEl = el) }))));
|
|
1525
1545
|
}
|
|
1526
1546
|
static get watchers() { return {
|
|
1527
1547
|
"open": [{
|
|
1528
1548
|
"handleOpenChange": 0
|
|
1529
1549
|
}],
|
|
1530
1550
|
"anchor": [{
|
|
1531
|
-
"handleAnchorChange":
|
|
1551
|
+
"handleAnchorChange": 1
|
|
1532
1552
|
}]
|
|
1533
1553
|
}; }
|
|
1534
1554
|
};
|
package/esm/lmvz-radio.entry.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
3
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
3
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
4
4
|
import './aria-loader-BfH06m7H.js';
|
|
5
5
|
|
|
6
6
|
function groupKey(name, scope) {
|
package/esm/lmvz-select.entry.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
3
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
3
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
4
4
|
import './aria-loader-BfH06m7H.js';
|
|
5
5
|
|
|
6
6
|
const lmvzSelectCss = () => `@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-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1); --lmvz-select-label-minimized-padding-x: 4px; --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select, [highlighted]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); border-color: var(--lmvz-semantic-color-border-active, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); flex-shrink: 0; } select.sc-lmvz-select { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; border: none; background: transparent; margin: 0; padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { margin-top: 4px; padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h div[aria-hidden].sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }`;
|
package/esm/lmvz-tabs.entry.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-BPeerEwm.js';
|
|
2
|
-
import { D as DirectionalFocusController } from './
|
|
3
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
4
|
-
import './element.util-
|
|
2
|
+
import { D as DirectionalFocusController } from './directional-focus-controller-DgAdCZrG.js';
|
|
3
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
4
|
+
import './element.util-BFcYfHYq.js';
|
|
5
5
|
|
|
6
6
|
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; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :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-8-6, 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; } `;
|
|
7
7
|
|
|
@@ -49,6 +49,9 @@ const LmvzTabs = class extends ReactiveControllerHost {
|
|
|
49
49
|
this.syncFocusTargets();
|
|
50
50
|
this.syncTabOrientation();
|
|
51
51
|
}
|
|
52
|
+
async initFocus() {
|
|
53
|
+
this.focusController.initFocus();
|
|
54
|
+
}
|
|
52
55
|
async activateTab(value) {
|
|
53
56
|
const tab = this.findTabByValue(value);
|
|
54
57
|
if (!tab || this.isTabDisabled(tab))
|
|
@@ -238,7 +241,7 @@ const LmvzTabs = class extends ReactiveControllerHost {
|
|
|
238
241
|
this.selectTab(value);
|
|
239
242
|
};
|
|
240
243
|
render() {
|
|
241
|
-
return (h(Host, { key: '
|
|
244
|
+
return (h(Host, { key: '98df29f336a3ea47efa6c76a773de28c5174c718', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '7e35ae180c4ebf2f5a82e0fad0977cd3c38ac659', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '2520bc8b8988a60b37a067828ad237bf8dcfcc59', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: 'bd4a954b6caca2d9f2eb588f58590821ec4af888', part: "panels-container", class: "panels-container" }, h("slot", { key: 'b4dffff530328e6e4c8d305895ef4dd2d5952757', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
242
245
|
}
|
|
243
246
|
static get watchers() { return {
|
|
244
247
|
"value": [{
|
package/esm/lmvz-toggle.entry.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-BPeerEwm.js';
|
|
2
2
|
import { A as AriaValidationController } from './aria-validation-controller-BvOU1BO8.js';
|
|
3
|
-
import { R as ReactiveControllerHost } from './reactive-controller-host-
|
|
4
|
-
import { c as componentOnReady } from './stencil.util-
|
|
3
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
4
|
+
import { c as componentOnReady } from './stencil.util-D2-5rsN3.js';
|
|
5
5
|
import './aria-loader-BfH06m7H.js';
|
|
6
|
-
import './async.util-
|
|
6
|
+
import './async.util-DZj20TV1.js';
|
|
7
7
|
|
|
8
8
|
const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
|
|
9
9
|
|