@lmvz-ds/components 0.26.0 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/cjs/{reactive-controller-host-DrtMkMd7.js → aria-validation-controller-BMV2tv9-.js} +0 -41
- package/cjs/list-keyboard-controller-CzZdPBeH.js +173 -0
- package/cjs/lmvz-button_2.cjs.entry.js +4 -3
- package/cjs/lmvz-checkbox.cjs.entry.js +8 -4
- package/cjs/lmvz-chip.cjs.entry.js +3 -2
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +7 -51
- package/cjs/lmvz-input.cjs.entry.js +3 -2
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
- package/cjs/lmvz-modal.cjs.entry.js +3 -2
- package/cjs/lmvz-radio.cjs.entry.js +3 -2
- package/cjs/lmvz-select.cjs.entry.js +3 -2
- package/cjs/lmvz-tab.cjs.entry.js +31 -0
- package/cjs/lmvz-tabs.cjs.entry.js +256 -0
- package/cjs/lmvz-toggle.cjs.entry.js +4 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/reactive-controller-host-B_lZtcA6.js +43 -0
- package/collection/collection-manifest.json +2 -0
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +10 -8
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +4 -1
- package/collection/components/lmvz-header/lmvz-header.js +3 -3
- package/collection/components/lmvz-tab/lmvz-tab.css +148 -0
- package/collection/components/lmvz-tab/lmvz-tab.js +125 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.css +58 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +399 -0
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/aria/list-keyboard-controller.js +151 -28
- package/components/index.d.ts +4 -0
- package/components/index.d.ts.bak +4 -0
- package/components/index.js +1 -1
- package/components/lmvz-button-group.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-tab.d.ts +11 -0
- package/components/lmvz-tab.d.ts.bak +11 -0
- package/components/lmvz-tab.js +1 -0
- package/components/lmvz-tabs.d.ts +11 -0
- package/components/lmvz-tabs.d.ts.bak +11 -0
- package/components/lmvz-tabs.js +1 -0
- package/components/lmvz-toggle.js +1 -1
- package/components/p-0P2Wb3pE.js +1 -0
- package/components/p-2VdcUIrr.js +1 -0
- package/components/p-BJEQw1Sz.js +1 -0
- package/components/p-Cs7RCOHZ.js +1 -0
- package/components/p-CtaMrBNE.js +1 -0
- package/components/{p-JAKQdFhF.js → p-DOTK1OW3.js} +1 -1
- package/components/p-DjvbwRyl.js +1 -0
- package/esm/{reactive-controller-host-ZrGf1F2-.js → aria-validation-controller-D-KO0Asb.js} +1 -41
- package/esm/list-keyboard-controller-Coi8XfUH.js +171 -0
- package/esm/lmvz-button_2.entry.js +2 -1
- package/esm/lmvz-checkbox.entry.js +7 -3
- package/esm/lmvz-chip.entry.js +2 -1
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +6 -50
- package/esm/lmvz-input.entry.js +2 -1
- package/esm/lmvz-menuitem.entry.js +2 -1
- package/esm/lmvz-modal.entry.js +2 -1
- package/esm/lmvz-radio.entry.js +2 -1
- package/esm/lmvz-select.entry.js +2 -1
- package/esm/lmvz-tab.entry.js +29 -0
- package/esm/lmvz-tabs.entry.js +254 -0
- package/esm/lmvz-toggle.entry.js +3 -2
- package/esm/loader.js +1 -1
- package/esm/reactive-controller-host-FBuCCcFC.js +41 -0
- package/hydrate/index.js +461 -32
- package/hydrate/index.mjs +461 -32
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-43b463bf.entry.js +1 -0
- package/lmvz-components/p-4bd71a3c.entry.js +1 -0
- package/lmvz-components/p-6484fbc6.entry.js +1 -0
- package/lmvz-components/p-6988c3ea.entry.js +1 -0
- package/lmvz-components/p-758dbb82.entry.js +1 -0
- package/lmvz-components/p-7b15cdce.entry.js +1 -0
- package/lmvz-components/p-8874ff19.entry.js +1 -0
- package/lmvz-components/p-CtaMrBNE.js +1 -0
- package/lmvz-components/p-FBuCCcFC.js +1 -0
- package/lmvz-components/p-a5c921dc.entry.js +1 -0
- package/lmvz-components/p-bb46a884.entry.js +1 -0
- package/lmvz-components/p-bd23eab3.entry.js +1 -0
- package/lmvz-components/p-c6228cee.entry.js +1 -0
- package/lmvz-components/p-da16ff58.entry.js +1 -0
- package/lmvz-components/p-hRb38wX6.js +1 -0
- package/manifest.json +394 -1
- package/package.json +9 -1
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -0
- package/types/components/lmvz-header/lmvz-header.d.ts +2 -2
- package/types/components/lmvz-tab/lmvz-tab.d.ts +11 -0
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +43 -0
- package/types/components.d.ts +151 -0
- package/types/utils/aria/list-keyboard-controller.d.ts +28 -5
- package/components/p-BOzeYzKk.js +0 -1
- package/components/p-DYa3zcGE.js +0 -1
- package/components/p-WLZ7VWNX.js +0 -1
- package/components/p-lsUdmjdw.js +0 -1
- package/lmvz-components/p-01aeca60.entry.js +0 -1
- package/lmvz-components/p-14c3d837.entry.js +0 -1
- package/lmvz-components/p-24e63b0a.entry.js +0 -1
- package/lmvz-components/p-3da301a6.entry.js +0 -1
- package/lmvz-components/p-40228d48.entry.js +0 -1
- package/lmvz-components/p-4da9073a.entry.js +0 -1
- package/lmvz-components/p-758078db.entry.js +0 -1
- package/lmvz-components/p-8dae99f1.entry.js +0 -1
- package/lmvz-components/p-CwX1wKkM.js +0 -1
- package/lmvz-components/p-e1eaa7a2.entry.js +0 -1
- package/lmvz-components/p-f5cece32.entry.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as t,c as o,h as n,d as r,t as e}from"./p-c7OzBK8f.js";import{c as a}from"./p-BfTCfPZ1.js";import{A as l}from"./p-BJEQw1Sz.js";import{E as m}from"./p-CN0JX9-m.js";import{i,f as s}from"./p-DOTK1OW3.js";import{R as v}from"./p-0P2Wb3pE.js";const d=t(class extends v{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant;disabled=!1;type="button";form;formMethod;name;value;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation",7),this.addController(new l(this)),this.addController(new m(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=i(this.el),super.connectedCallback()}disconnectedCallback(){this.formButtonEl?.remove(),this.formButtonEl=null,this.formEl=null,super.disconnectedCallback()}renderHiddenButton(){if("submit"!==this.type)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);const t=s(this.form,this.el);if(!t)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);this.formEl=t;const o=this.formButtonEl??document.createElement("button");o.type="submit",o.style.display="none",o.disabled=this.disabled,o.name=this.name??"",o.value=this.value??"",this.formMethod?o.setAttribute("formmethod",this.formMethod):o.removeAttribute("formmethod"),this.formButtonEl!==o&&(this.formButtonEl=o),o.parentElement!==t&&(o.remove(),t.appendChild(o))}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),n(r,{key:"8196de85afc3878c6f38e582d7c031f5d19bcd36","aria-disabled":this.disabled?"true":null},n("button",{key:"8d73f979fa227de22a03403a2a3938684911060a",ref:t=>this.validationEl=t,part:"button",disabled:this.disabled,type:this.type,class:a(this.variant??"secondary",{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},n("slot",{key:"18e91a2f94ba0d7e5cf13150191003e2f0b2a03a"})))}static get delegatesFocus(){return!0}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1],formMethod:[1,"form-method"],name:[1],value:[1]}]);function c(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))}export{d as L,c as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{i,u as t,A as s,q as o}from"./p-CdDO7mQa.js";import{B as e}from"./p-c7OzBK8f.js";class n{host;config;visibilityObserver;elementQueued=!1;elementValidated=!1;elementLoaded=!1;static knownValidationErrors=[];get disabled(){return!i()}get useVerboseLogging(){return this.config?.verboseLogging||e.isDev||t()}constructor(i,t){this.host=i,this.config=t}onRuntimeConfigChange=()=>{i()&&this.checkLazyValidation()};hostDidLoad(){this.elementLoaded=!0,"undefined"!=typeof window&&window.addEventListener(s,this.onRuntimeConfigChange),this.elementQueued||this.elementValidated||("slot"!==this.config?.validationTiming?this.host.validationEl?.checkVisibility?.()&&"load"===this.config?.validationTiming?this.enqueueValidation():this.observeVisibilityOnce():this.observeSlot())}hostDidUpdate(){this.checkLazyValidation()}hostDisconnected(){this.discardVisibilityObserver(),"undefined"!=typeof window&&window.removeEventListener(s,this.onRuntimeConfigChange)}revalidateAria(){this.enqueueValidation()}observeSlot(){this.host.validationSlot?.addEventListener("slotchange",this.enqueueValidation.bind(this))}observeVisibilityOnce(){window.setTimeout((()=>{this.host.validationEl&&(this.visibilityObserver=new IntersectionObserver((i=>{for(const t of i)t.target===this.host.validationEl&&t.isIntersecting&&(this.checkLazyValidation(),this.discardVisibilityObserver())}),{root:this.host.validationEl?.parentElement,rootMargin:"0px",threshold:.01}),this.visibilityObserver.observe(this.host.validationEl))}))}checkLazyValidation(){this.elementLoaded&&(this.config?.reValidateOnPropChanges||!this.elementQueued&&!this.elementValidated)&&this.host.validationEl?.checkVisibility?.()&&this.enqueueValidation()}enqueueValidation(){i()&&(this.elementQueued=!0,o({context:{include:this.host.validationEl,exclude:n.knownValidationErrors},onComplete:(i,t)=>{this.elementValidated=!0;const s=this.host.tagName||this.host.validationEl?.tagName||"Element";if(i)return console.error("Error running ARIA validation:",i,s),void(this.host.validationEl?.tagName||console.dir(this.host));const o=[s];if(!t?.violations.length)return void(this.useVerboseLogging&&(console.log(...o,"has no ARIA violations"),this.host.validationEl?.tagName||console.dir(this.host)));const e=t.violations.length,h=[...o,t.violations.at(0).id,e>1?`(+${e-1} more)`:""].filter(Boolean).join(" ");this.useVerboseLogging?console.group(h):console.groupCollapsed(h);const r=t.violations.flatMap((i=>(console.dir(i,{showHidden:!0,compact:!1}),i.nodes.map((i=>i.target)))));this.host.validationEl?console.log("element:",this.host.validationEl):console.dir(this.host),console.groupEnd(),n.knownValidationErrors.push(...r)}}))}discardVisibilityObserver(){this.visibilityObserver&&(this.visibilityObserver.disconnect(),this.visibilityObserver=void 0)}}export{n as A}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as t,H as e,h as n,d as s,t as i}from"./p-c7OzBK8f.js";import{a as o,i as r}from"./p-CdDO7mQa.js";import{a}from"./p-DOTK1OW3.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}actionsSlot;validationMessageCache=[];actionsStateObserver;get primaryEnabledAction(){return this.enabledButtons.find(p)??this.enabledButtons[0]}get hasActions(){return this.assignedButtons.some((t=>l(t)&&u(t)&&!h(t)))}componentDidLoad(){this.handleActionsSlotChange()}disconnectedCallback(){this.actionsStateObserver?.disconnect()}get assignedElements(){return this.actionsSlot?.assignedElements({flatten:!0})??[]}get assignedButtons(){return this.assignedElements.filter(u)}get visibleButtons(){return this.assignedButtons.filter(l)}get enabledButtons(){return this.visibleButtons.filter((t=h,(...e)=>{const n=t(...e);return o(n)?n.then((t=>!t)):!n}));var t}getActionValidationResult(){if(!this.visibleButtons.length)return[];const t=this.visibleButtons.filter(p),e=this.visibleButtons.filter(f),n=[],s=this.visibleButtons.toReversed();if(1!==t.length&&n.push("LmvzModal actions slot must contain exactly one primary action."),e.length>1&&n.push(`LmvzModal actions slot must contain at most one secondary action (received ${e.length})`),t.length){const i=e[0];0!==s.indexOf(t[0])&&n.push("Primary action must be the last focusable element in the actions slot (i.e. rightmost button)."),i&&1!==s.indexOf(i)&&n.push("Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).")}else e.length&&0!==s.indexOf(e[0])&&n.push("Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).");return n}handleActionsSlotChange=()=>{this.observeActionState(),this.syncActionsState()};observeActionState(){"undefined"!=typeof MutationObserver&&(this.actionsStateObserver?.disconnect(),this.assignedButtons.length&&(this.actionsStateObserver=new MutationObserver((()=>{this.syncActionsState()})),this.assignedButtons.forEach((t=>{this.actionsStateObserver?.observe(t,{attributes:!0,attributeFilter:["disabled","hidden","variant"]})}))))}syncActionsState(){this.assignedElements.forEach((t=>{["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())||(t.hasAttribute("hidden")||t.setAttribute("hidden",""),"true"!==t.getAttribute("aria-hidden")&&t.setAttribute("aria-hidden","true"))})),this.checkActions();const t=this.visibleButtons.length;for(let e=0;e<t;e++){const n=e===t-1?"primary":e===t-2?"secondary":"tertiary",s=this.visibleButtons.at(e);s&&(d(s)?s.getAttribute("variant")||s.setAttribute("variant",n):s.classList.add(n))}this.focusPrimaryAction()}focusPrimaryAction(){const t=this.primaryEnabledAction;t&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{a(t)&&t.focus()}))}checkActions(){if(!r())return;const t=this.getActionValidationResult();t.length&&t.forEach((t=>{this.validationMessageCache.includes(t)||(console.warn(t),this.validationMessageCache.push(t))}))}render(){return n(s,{key:"56b60821ecaa2301d13e78d621e873aa74cd170e"},n("slot",{key:"e6a1422950fa5b0026356b7788a607a690116186",ref:t=>this.actionsSlot=t,onSlotchange:this.handleActionsSlotChange}))}static get style(){return":host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}"}},[257,"lmvz-button-group",{primaryEnabledAction:[2064],hasActions:[2052,"has-actions"]}]);function u(t){return["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())}function d(t){return"LMVZ-BUTTON"===t?.tagName.toUpperCase()}function h(t){return t.hasAttribute("disabled")||!0===t.disabled}function l(t){return!t.hasAttribute("hidden")}function m(t){const e=t.getAttribute("variant")??t.variant;return"primary"===e||"secondary"===e||"tertiary"===e?e:"secondary"}function p(t){return"primary"===m(t)}function f(t){return"secondary"===m(t)}function y(){"undefined"!=typeof customElements&&["lmvz-button-group"].forEach((t=>{"lmvz-button-group"===t&&(customElements.get(i(t))||customElements.define(i(t),c))}))}export{c as L,y as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{g as t}from"./p-DOTK1OW3.js";const s={orientation:"both",enableHomeAndEnd:!1,manageTabIndex:!1};class i{host;elements=[];currentElement;config;constructor(t,i={}){this.host=t,this.config={...s,...i}}hostConnected(){this.host.el.addEventListener("keydown",this.handleKeydown),this.syncManagedFocusTarget()}hostDisconnected(){this.host.el.removeEventListener("keydown",this.handleKeydown)}updateElements(t){const s=this.currentElement??this.getManagedActiveElement()??void 0;this.elements=t.filter((t=>"focus"in t&&1===t.nodeType)),this.syncManagedFocusTarget(s)}setCurrentElement(t){const s=this.currentElement;this.currentElement=null!=t&&"focus"in t&&1===t.nodeType?t:void 0,this.syncManagedFocusTarget(s)}handleKeydown=t=>{const s=this.getFocusIntent(t.key);if(!s)return;const i=this.getManagedActiveElement(),e=this.getTargetElement(i,s);e&&(t.preventDefault(),this.applyFocusTarget(e,!0))};getFocusIntent(t){return this.config.enableHomeAndEnd&&"Home"===t?"first":this.config.enableHomeAndEnd&&"End"===t?"last":"horizontal"===this.config.orientation?"ArrowRight"===t?"next":"ArrowLeft"===t?"previous":void 0:"vertical"===this.config.orientation?"ArrowDown"===t?"next":"ArrowUp"===t?"previous":void 0:"ArrowDown"===t||"ArrowRight"===t?"next":"ArrowUp"===t||"ArrowLeft"===t?"previous":void 0}getManagedActiveElement(){const s=t(this.host.el.ownerDocument??document);return s instanceof HTMLElement&&this.elements.includes(s)&&this.canMoveFocusTo(s)?s:this.currentElement&&this.elements.includes(this.currentElement)&&this.canMoveFocusTo(this.currentElement)?this.currentElement:void 0}getTargetElement(t,s){if(!this.elements.length)return;if("first"===s)return this.findFocusableFromIndex(-1,"next");if("last"===s)return this.findFocusableFromIndex(this.elements.length,"previous");const i=t?this.elements.indexOf(t):-1;return-1===i?"next"===s?this.findFocusableFromIndex(-1,"next"):this.findFocusableFromIndex(this.elements.length,"previous"):this.findFocusableFromIndex(i,s)}findFocusableFromIndex(t,s){if(!this.elements.length)return;const i="next"===s?1:-1;for(let s=1;s<=this.elements.length;s++){const e=this.elements[(t+i*s+this.elements.length)%this.elements.length];if(this.canMoveFocusTo(e))return e}}syncManagedFocusTarget(t){const s=this.selectManagedElement(t),i=s!==this.currentElement;this.currentElement=s,this.config.manageTabIndex&&this.updateTabIndexes(s),i&&s&&this.config.onFocusTargetChange?.(s)}selectManagedElement(t){const s=this.getManagedActiveElement();if(s)return s;if(this.currentElement&&this.elements.includes(this.currentElement)&&this.canMoveFocusTo(this.currentElement))return this.currentElement;if(t&&this.elements.includes(t))return this.findFocusableFromIndex(this.elements.indexOf(t),"next")??this.findFocusableFromIndex(-1,"next");return this.elements.find((t=>0===t.tabIndex&&this.canMoveFocusTo(t)))||this.findFocusableFromIndex(-1,"next")}updateTabIndexes(t){this.elements.forEach((s=>{s.tabIndex=t&&s===t?0:-1}))}applyFocusTarget(t,s){const i=t!==this.currentElement;this.currentElement=t,this.config.manageTabIndex&&this.updateTabIndexes(t),s&&t.focus(),i&&this.config.onFocusTargetChange?.(t)}canMoveFocusTo(t){return!!t&&(!t.hasAttribute("disabled")&&((!("disabled"in t)||!Boolean(t.disabled))&&("true"!==t.getAttribute("aria-disabled")&&(this.config.isFocusableElement?this.config.isFocusableElement(t):(this.config.manageTabIndex||t.tabIndex>=0)&&"true"!==t.getAttribute("aria-hidden")&&(t.checkVisibility?.()??!0)&&null!==t.offsetParent))))}}export{i as D}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const a=(a,e)=>{a.componentOnReady?a.componentOnReady().then((a=>e(a))):i((()=>e(a)))},e=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],r=(a,r)=>{let i=e;return r&&r.length>0&&(i=i.filter((a=>!r.includes(a)))),((a,e=[])=>{const r={};return e.forEach((e=>{a.hasAttribute(e)&&(null!==a.getAttribute(e)&&(r[e]=a.getAttribute(e)),a.removeAttribute(e))})),r})(a,i)},i=a=>"function"==typeof __zone_symbol__requestAnimationFrame?__zone_symbol__requestAnimationFrame(a):"function"==typeof requestAnimationFrame?requestAnimationFrame(a):setTimeout(a);function t(a=document){let e=a.activeElement;if(!e)return null;for(;e?.shadowRoot;){const a=e.shadowRoot.activeElement;if(!a)break;e=a}return e}function n(a){return!!a&&a instanceof HTMLElement&&a.tabIndex>=0&&!a.hasAttribute("disabled")&&"true"!==a.getAttribute("aria-hidden")&&a.checkVisibility()&&null!==a.offsetParent}function o(a,e){if(a instanceof HTMLFormElement)return a;if("string"==typeof a){const e=document.getElementById(a);return e?e instanceof HTMLFormElement?e:(console.warn(`No Form found with selector: "#${a}". Verify that the element with id exists and is actually a <form> element.`,e),null):(console.warn(`No Form found with selector: "#${a}". Verify that the id is correct and the form is rendered in the DOM.`,e),null)}return void 0!==a?(console.warn('The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.',e),null):e.closest("form")}export{a,
|
|
1
|
+
const a=(a,e)=>{a.componentOnReady?a.componentOnReady().then((a=>e(a))):i((()=>e(a)))},e=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],r=(a,r)=>{let i=e;return r&&r.length>0&&(i=i.filter((a=>!r.includes(a)))),((a,e=[])=>{const r={};return e.forEach((e=>{a.hasAttribute(e)&&(null!==a.getAttribute(e)&&(r[e]=a.getAttribute(e)),a.removeAttribute(e))})),r})(a,i)},i=a=>"function"==typeof __zone_symbol__requestAnimationFrame?__zone_symbol__requestAnimationFrame(a):"function"==typeof requestAnimationFrame?requestAnimationFrame(a):setTimeout(a);function t(a=document){let e=a.activeElement;if(!e)return null;for(;e?.shadowRoot;){const a=e.shadowRoot.activeElement;if(!a)break;e=a}return e}function n(a){return!!a&&a instanceof HTMLElement&&a.tabIndex>=0&&!a.hasAttribute("disabled")&&"true"!==a.getAttribute("aria-hidden")&&a.checkVisibility()&&null!==a.offsetParent}function o(a,e){if(a instanceof HTMLFormElement)return a;if("string"==typeof a){const e=document.getElementById(a);return e?e instanceof HTMLFormElement?e:(console.warn(`No Form found with selector: "#${a}". Verify that the element with id exists and is actually a <form> element.`,e),null):(console.warn(`No Form found with selector: "#${a}". Verify that the id is correct and the form is rendered in the DOM.`,e),null)}return void 0!==a?(console.warn('The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.',e),null):e.closest("form")}export{n as a,a as c,o as f,t as g,r as i}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as i,h as e,d as o,t as n}from"./p-c7OzBK8f.js";import{t,e as s,p as c}from"./p-CcxjkCOx.js";import{A as r}from"./p-BJEQw1Sz.js";import{R as a}from"./p-0P2Wb3pE.js";const l=Symbol.for("LMVZ__iconProviderRegistry"),m={};function v(){return"undefined"==typeof window?m:window[l]??(window[l]={})}function h(i,e){const o=v(),n=i;Object.prototype.hasOwnProperty.call(o,n)&&console.warn(`Icon provider with name "${n}" is already registered. Overwriting existing provider.`),o[n]=e}function d(i){const e=v();if(i)return e[i];const o=Object.keys(e);if(0===o.length)return;o.length>1&&console.warn(`Multiple icon providers registered (${o.join(", ")}). Using the first one: "${o[0]}".`);const n=o[0];return n?e[n]:void 0}function z(i,e){return{iconset:i,icon:e}}const p=i(class extends a{intersectionObserver;ariaValidationController=new r(this);get el(){return this}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(i){super(!1),!1!==i&&this.__registerHost(),this.addController(this.ariaValidationController)}connectedCallback(){this.waitUntilVisible((()=>{this.visible=!0,this.loadIconPathData()})),super.connectedCallback()}disconnectedCallback(){this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,super.disconnectedCallback()}async loadIconPathData(){const{icon:i,iconset:e,visible:o}=this;if(!i||!o)return;const n=c(i);this.iconData=n||await async function(i){const{icon:e,iconset:o}=i;return await(async()=>{const i=d(o);if(i)try{const n=await Promise.resolve(i.resolve(e));if(!n?.svg)return void console.warn(`Icon "${e}"${o?` from set "${o}"`:""} not found in provider. Using default icon.`);const s=t(n.svg);if(s)return s}catch(i){return void console.error(`Error resolving icon "${e}" with provider:`,i)}else console.warn(`No icon provider registered. Unable to resolve icon "${e}"${o?` from set "${o}"`:""}. Using default icon.`)})()||(console.error(`Icon "${e}" not found${o?` in set "${o}"`:""}. Using default icon.`),s())}({icon:i,iconset:e})}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return e(o,{key:"03b4391d02a77409257bcda51c2b65ad9a9e0a0c",role:"img","aria-hidden":`${this.ariaHidden}`,innerHTML:this.iconData})}waitUntilVisible(i,e=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((e=>{e.some((e=>!!e.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,i(),!0)))}),{rootMargin:`${e}px`}),this.intersectionObserver.observe(this.el)):i()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}static get style(){return".sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}"}},[514,"lmvz-icon",{icon:[513],weight:[513],size:[513],iconset:[513],ariaLabel:[513,"aria-label"],iconData:[32],visible:[32]},void 0,{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}]);function u(){"undefined"!=typeof customElements&&["lmvz-icon"].forEach((i=>{"lmvz-icon"===i&&(customElements.get(n(i))||customElements.define(n(i),p))}))}export{p as L,u as d,d as g,h as r,z as t}
|
|
@@ -147,44 +147,4 @@ class AriaValidationController {
|
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
|
|
151
|
-
controllers = new Set();
|
|
152
|
-
addController(controller) {
|
|
153
|
-
this.controllers.add(controller);
|
|
154
|
-
}
|
|
155
|
-
removeController(controller) {
|
|
156
|
-
this.controllers.delete(controller);
|
|
157
|
-
}
|
|
158
|
-
get activeControllers() {
|
|
159
|
-
return Array.from(this.controllers).filter((controller) => !controller.disabled);
|
|
160
|
-
}
|
|
161
|
-
connectedCallback() {
|
|
162
|
-
if (!this.controllers.size) {
|
|
163
|
-
console.warn('ReactiveControllerHost connected with no controllers registered.', this);
|
|
164
|
-
}
|
|
165
|
-
this.activeControllers.forEach((controller) => controller.hostConnected?.());
|
|
166
|
-
}
|
|
167
|
-
disconnectedCallback() {
|
|
168
|
-
this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
|
|
169
|
-
}
|
|
170
|
-
componentWillLoad() {
|
|
171
|
-
this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
|
|
172
|
-
}
|
|
173
|
-
componentDidLoad() {
|
|
174
|
-
this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
|
|
175
|
-
}
|
|
176
|
-
componentWillRender() {
|
|
177
|
-
this.activeControllers.forEach((controller) => controller.hostWillRender?.());
|
|
178
|
-
}
|
|
179
|
-
componentDidRender() {
|
|
180
|
-
this.activeControllers.forEach((controller) => controller.hostDidRender?.());
|
|
181
|
-
}
|
|
182
|
-
componentWillUpdate() {
|
|
183
|
-
this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
|
|
184
|
-
}
|
|
185
|
-
componentDidUpdate() {
|
|
186
|
-
this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
export { AriaValidationController as A, ReactiveControllerHost as R };
|
|
150
|
+
export { AriaValidationController as A };
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import { g as getDeepActiveElement } from './component-DOTK1OW3.js';
|
|
2
|
+
|
|
3
|
+
const defaultConfig = {
|
|
4
|
+
orientation: 'both',
|
|
5
|
+
enableHomeAndEnd: false,
|
|
6
|
+
manageTabIndex: false,
|
|
7
|
+
};
|
|
8
|
+
class DirectionalFocusController {
|
|
9
|
+
host;
|
|
10
|
+
elements = [];
|
|
11
|
+
currentElement;
|
|
12
|
+
config;
|
|
13
|
+
constructor(host, config = {}) {
|
|
14
|
+
this.host = host;
|
|
15
|
+
this.config = {
|
|
16
|
+
...defaultConfig,
|
|
17
|
+
...config,
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
hostConnected() {
|
|
21
|
+
this.host.el.addEventListener('keydown', this.handleKeydown);
|
|
22
|
+
this.syncManagedFocusTarget();
|
|
23
|
+
}
|
|
24
|
+
hostDisconnected() {
|
|
25
|
+
this.host.el.removeEventListener('keydown', this.handleKeydown);
|
|
26
|
+
}
|
|
27
|
+
updateElements(elements) {
|
|
28
|
+
const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
|
|
29
|
+
this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
|
|
30
|
+
this.syncManagedFocusTarget(previousElement);
|
|
31
|
+
}
|
|
32
|
+
setCurrentElement(element) {
|
|
33
|
+
const previousElement = this.currentElement;
|
|
34
|
+
this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
|
|
35
|
+
this.syncManagedFocusTarget(previousElement);
|
|
36
|
+
}
|
|
37
|
+
handleKeydown = (event) => {
|
|
38
|
+
const intent = this.getFocusIntent(event.key);
|
|
39
|
+
if (!intent)
|
|
40
|
+
return;
|
|
41
|
+
const activeElement = this.getManagedActiveElement();
|
|
42
|
+
const nextElement = this.getTargetElement(activeElement, intent);
|
|
43
|
+
if (!nextElement)
|
|
44
|
+
return;
|
|
45
|
+
event.preventDefault();
|
|
46
|
+
this.applyFocusTarget(nextElement, true);
|
|
47
|
+
};
|
|
48
|
+
getFocusIntent(key) {
|
|
49
|
+
if (this.config.enableHomeAndEnd && key === 'Home')
|
|
50
|
+
return 'first';
|
|
51
|
+
if (this.config.enableHomeAndEnd && key === 'End')
|
|
52
|
+
return 'last';
|
|
53
|
+
if (this.config.orientation === 'horizontal') {
|
|
54
|
+
if (key === 'ArrowRight')
|
|
55
|
+
return 'next';
|
|
56
|
+
if (key === 'ArrowLeft')
|
|
57
|
+
return 'previous';
|
|
58
|
+
return undefined;
|
|
59
|
+
}
|
|
60
|
+
if (this.config.orientation === 'vertical') {
|
|
61
|
+
if (key === 'ArrowDown')
|
|
62
|
+
return 'next';
|
|
63
|
+
if (key === 'ArrowUp')
|
|
64
|
+
return 'previous';
|
|
65
|
+
return undefined;
|
|
66
|
+
}
|
|
67
|
+
if (key === 'ArrowDown' || key === 'ArrowRight')
|
|
68
|
+
return 'next';
|
|
69
|
+
if (key === 'ArrowUp' || key === 'ArrowLeft')
|
|
70
|
+
return 'previous';
|
|
71
|
+
return undefined;
|
|
72
|
+
}
|
|
73
|
+
getManagedActiveElement() {
|
|
74
|
+
const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
|
|
75
|
+
if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
|
|
76
|
+
return activeElement;
|
|
77
|
+
}
|
|
78
|
+
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
79
|
+
return this.currentElement;
|
|
80
|
+
}
|
|
81
|
+
return undefined;
|
|
82
|
+
}
|
|
83
|
+
getTargetElement(current, intent) {
|
|
84
|
+
if (!this.elements.length)
|
|
85
|
+
return undefined;
|
|
86
|
+
if (intent === 'first')
|
|
87
|
+
return this.findFocusableFromIndex(-1, 'next');
|
|
88
|
+
if (intent === 'last')
|
|
89
|
+
return this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
90
|
+
const currentIndex = current ? this.elements.indexOf(current) : -1;
|
|
91
|
+
if (currentIndex === -1) {
|
|
92
|
+
return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
|
|
93
|
+
}
|
|
94
|
+
return this.findFocusableFromIndex(currentIndex, intent);
|
|
95
|
+
}
|
|
96
|
+
findFocusableFromIndex(startIndex, intent) {
|
|
97
|
+
if (!this.elements.length)
|
|
98
|
+
return undefined;
|
|
99
|
+
const step = intent === 'next' ? 1 : -1;
|
|
100
|
+
for (let offset = 1; offset <= this.elements.length; offset++) {
|
|
101
|
+
const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
|
|
102
|
+
const candidate = this.elements[index];
|
|
103
|
+
if (this.canMoveFocusTo(candidate))
|
|
104
|
+
return candidate;
|
|
105
|
+
}
|
|
106
|
+
return undefined;
|
|
107
|
+
}
|
|
108
|
+
syncManagedFocusTarget(previousElement) {
|
|
109
|
+
const nextElement = this.selectManagedElement(previousElement);
|
|
110
|
+
const didChange = nextElement !== this.currentElement;
|
|
111
|
+
this.currentElement = nextElement;
|
|
112
|
+
if (this.config.manageTabIndex) {
|
|
113
|
+
this.updateTabIndexes(nextElement);
|
|
114
|
+
}
|
|
115
|
+
if (didChange && nextElement) {
|
|
116
|
+
this.config.onFocusTargetChange?.(nextElement);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
selectManagedElement(previousElement) {
|
|
120
|
+
const activeElement = this.getManagedActiveElement();
|
|
121
|
+
if (activeElement)
|
|
122
|
+
return activeElement;
|
|
123
|
+
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
124
|
+
return this.currentElement;
|
|
125
|
+
}
|
|
126
|
+
if (previousElement && this.elements.includes(previousElement)) {
|
|
127
|
+
return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
|
|
128
|
+
}
|
|
129
|
+
const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
|
|
130
|
+
if (currentRovingTarget)
|
|
131
|
+
return currentRovingTarget;
|
|
132
|
+
return this.findFocusableFromIndex(-1, 'next');
|
|
133
|
+
}
|
|
134
|
+
updateTabIndexes(activeElement) {
|
|
135
|
+
this.elements.forEach((element) => {
|
|
136
|
+
element.tabIndex = activeElement && element === activeElement ? 0 : -1;
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
applyFocusTarget(element, shouldFocus) {
|
|
140
|
+
const didChange = element !== this.currentElement;
|
|
141
|
+
this.currentElement = element;
|
|
142
|
+
if (this.config.manageTabIndex) {
|
|
143
|
+
this.updateTabIndexes(element);
|
|
144
|
+
}
|
|
145
|
+
if (shouldFocus) {
|
|
146
|
+
element.focus();
|
|
147
|
+
}
|
|
148
|
+
if (didChange) {
|
|
149
|
+
this.config.onFocusTargetChange?.(element);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
canMoveFocusTo(element) {
|
|
153
|
+
if (!element)
|
|
154
|
+
return false;
|
|
155
|
+
if (element.hasAttribute('disabled'))
|
|
156
|
+
return false;
|
|
157
|
+
if ('disabled' in element && Boolean(element.disabled))
|
|
158
|
+
return false;
|
|
159
|
+
if (element.getAttribute('aria-disabled') === 'true')
|
|
160
|
+
return false;
|
|
161
|
+
if (this.config.isFocusableElement)
|
|
162
|
+
return this.config.isFocusableElement(element);
|
|
163
|
+
const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
|
|
164
|
+
return (isTabOrderable &&
|
|
165
|
+
element.getAttribute('aria-hidden') !== 'true' &&
|
|
166
|
+
(element.checkVisibility?.() ?? true) &&
|
|
167
|
+
element.offsetParent !== null);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
export { DirectionalFocusController as D };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
|
|
2
2
|
import { c as classNames } from './index-BfTCfPZ1.js';
|
|
3
|
-
import {
|
|
3
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
4
4
|
import { E as ElementActivationController } from './element-activation-controller-CN0JX9-m.js';
|
|
5
5
|
import { i as inheritAriaAttributes, f as findFormByRef } from './component-DOTK1OW3.js';
|
|
6
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
6
7
|
import { p as parseSvgString } from './svg-B2YoIRuh.js';
|
|
7
8
|
import { a as resolveIconSvg } from './icons-CmuFKDRz.js';
|
|
8
9
|
import './aria-loader-GfsGHZHY.js';
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
|
|
2
2
|
import { t as toValidSvgStringWithFallback } from './svg-B2YoIRuh.js';
|
|
3
|
-
import {
|
|
3
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
4
5
|
import './logger-CGmJG63p.js';
|
|
5
6
|
import './aria-loader-GfsGHZHY.js';
|
|
6
7
|
|
|
7
8
|
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
|
|
8
9
|
|
|
9
|
-
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px);
|
|
10
|
+
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); cursor: pointer; transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; cursor: pointer; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); cursor: pointer; } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }`;
|
|
10
11
|
|
|
11
12
|
const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
|
|
12
13
|
let checkboxIdCounter = 0;
|
|
@@ -96,8 +97,11 @@ const LmvzCheckbox = class extends ReactiveControllerHost {
|
|
|
96
97
|
this.checked = input.checked;
|
|
97
98
|
this.lmvzChange.emit(this.checked);
|
|
98
99
|
};
|
|
100
|
+
retargetInnerClicks() {
|
|
101
|
+
this.nativeInput?.click();
|
|
102
|
+
}
|
|
99
103
|
render() {
|
|
100
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, h("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, h("input", { key: '8957359d0cc3f2c315badee7e20fcc81e85e0f00', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, h("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
101
105
|
}
|
|
102
106
|
static get formAssociated() { return true; }
|
|
103
107
|
static get watchers() { return {
|
package/esm/lmvz-chip.entry.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, h, H as Host } from './index-CKYszC64.js';
|
|
2
2
|
import { a as chipTypes, c as chipSizes } from './ds.constants-BOOwq5dE.js';
|
|
3
|
-
import {
|
|
3
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
4
5
|
import { i as isAriaValidationEnabled } from './aria-loader-GfsGHZHY.js';
|
|
5
6
|
|
|
6
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-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-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-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],"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-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],"selectedLabel":[32]},null,{"value":[{"handleValueChange":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",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[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);
|
|
20
|
+
return bootstrapLazy([["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["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-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-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],"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-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],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-tab",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"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",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[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,56 +1,12 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, h, H as Host } from './index-CKYszC64.js';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
3
|
+
import { D as DirectionalFocusController } from './list-keyboard-controller-Coi8XfUH.js';
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
4
5
|
export { lmvz_menuitem } from './lmvz-menuitem.entry.js';
|
|
5
6
|
import './aria-loader-GfsGHZHY.js';
|
|
7
|
+
import './component-DOTK1OW3.js';
|
|
6
8
|
import './element-activation-controller-CN0JX9-m.js';
|
|
7
9
|
|
|
8
|
-
class ListKeyboardNavigationController {
|
|
9
|
-
host;
|
|
10
|
-
elements = [];
|
|
11
|
-
constructor(host) {
|
|
12
|
-
this.host = host;
|
|
13
|
-
}
|
|
14
|
-
hostDidRender() {
|
|
15
|
-
this.host.el.addEventListener('keydown', this.handleKeydown);
|
|
16
|
-
}
|
|
17
|
-
updateElements(elements) {
|
|
18
|
-
this.elements = elements;
|
|
19
|
-
}
|
|
20
|
-
handleKeydown = (event) => {
|
|
21
|
-
const { key } = event;
|
|
22
|
-
if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key))
|
|
23
|
-
return;
|
|
24
|
-
const activeElement = getDeepActiveElement(document);
|
|
25
|
-
const nextElement = this.getNextFocusableElement(activeElement, ['ArrowDown', 'ArrowRight'].includes(key) ? 'down' : 'up');
|
|
26
|
-
if (nextElement) {
|
|
27
|
-
event.preventDefault();
|
|
28
|
-
nextElement.focus?.();
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
getNextFocusableElement(current, direction) {
|
|
32
|
-
if (!current)
|
|
33
|
-
return undefined;
|
|
34
|
-
const { elements } = this;
|
|
35
|
-
const currentIndex = elements.indexOf(current);
|
|
36
|
-
if (currentIndex === -1)
|
|
37
|
-
return undefined;
|
|
38
|
-
let nextIndex = undefined;
|
|
39
|
-
if (direction === 'down') {
|
|
40
|
-
nextIndex = (currentIndex + 1) % elements.length;
|
|
41
|
-
}
|
|
42
|
-
else if (direction === 'up') {
|
|
43
|
-
nextIndex = (currentIndex - 1 + elements.length) % elements.length;
|
|
44
|
-
}
|
|
45
|
-
if (nextIndex == undefined)
|
|
46
|
-
return undefined;
|
|
47
|
-
const candidate = elements[nextIndex];
|
|
48
|
-
if (!canReceiveFocus(candidate))
|
|
49
|
-
return this.getNextFocusableElement(candidate, direction);
|
|
50
|
-
return candidate;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
10
|
const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
|
|
55
11
|
|
|
56
12
|
const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}`;
|
|
@@ -63,7 +19,7 @@ const LmvzHeader = class extends ReactiveControllerHost {
|
|
|
63
19
|
primarySlot;
|
|
64
20
|
secondarySlot;
|
|
65
21
|
secondaryNav;
|
|
66
|
-
keyboardNavigationController = new
|
|
22
|
+
keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
|
|
67
23
|
get primaryMenuitems() {
|
|
68
24
|
return this.primarySlot?.assignedElements({ flatten: false }) || [];
|
|
69
25
|
}
|
|
@@ -137,7 +93,7 @@ const LmvzHeader = class extends ReactiveControllerHost {
|
|
|
137
93
|
}
|
|
138
94
|
}
|
|
139
95
|
render() {
|
|
140
|
-
return (h(Host, { key: '
|
|
96
|
+
return (h(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, h("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, h("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, h("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, h("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
|
|
141
97
|
}
|
|
142
98
|
static get watchers() { return {
|
|
143
99
|
"lmvzActiveNav": [{
|
package/esm/lmvz-input.entry.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h } from './index-CKYszC64.js';
|
|
2
2
|
import { c as classNames } from './index-BfTCfPZ1.js';
|
|
3
|
-
import {
|
|
3
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
4
4
|
import { c as componentOnReady } from './component-DOTK1OW3.js';
|
|
5
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
5
6
|
import './aria-loader-GfsGHZHY.js';
|
|
6
7
|
|
|
7
8
|
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, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: 48px; --input-padding-x: 16px; --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, #e52a31); --label-floating-scale: 0.85; --label-minimized-top: -6px; --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .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: 8px; } [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 { 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); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); outline-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: 14px; font-family: Router, sans-serif; font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: normal; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0; transform: translateY(-50%) scale(0.85); transform-origin: left top; background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 500; } .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: 14px; 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: 12px; font-size: 12px; color: var(--helper-text-color); font-family: Router, sans-serif; font-weight: 500; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--error-text-color); font-family: Router, sans-serif; font-weight: 500; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
|
|
2
|
-
import {
|
|
2
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
3
3
|
import { E as ElementActivationController } from './element-activation-controller-CN0JX9-m.js';
|
|
4
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
4
5
|
import './aria-loader-GfsGHZHY.js';
|
|
5
6
|
|
|
6
7
|
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); }`;
|
package/esm/lmvz-modal.entry.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
|
|
2
2
|
import { t as toValidSvgStringWithFallback } from './svg-B2YoIRuh.js';
|
|
3
|
-
import {
|
|
3
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
4
4
|
import { i as inheritAriaAttributes, g as getDeepActiveElement } from './component-DOTK1OW3.js';
|
|
5
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
5
6
|
import './logger-CGmJG63p.js';
|
|
6
7
|
import './aria-loader-GfsGHZHY.js';
|
|
7
8
|
|
package/esm/lmvz-radio.entry.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
|
|
2
|
-
import {
|
|
2
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
3
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
3
4
|
import './aria-loader-GfsGHZHY.js';
|
|
4
5
|
|
|
5
6
|
function groupKey(name, scope) {
|
package/esm/lmvz-select.entry.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
|
|
2
|
-
import {
|
|
2
|
+
import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
|
|
3
|
+
import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
|
|
3
4
|
import './aria-loader-GfsGHZHY.js';
|
|
4
5
|
|
|
5
6
|
const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
|