@lmvz-ds/components 0.32.0 → 0.34.0

package/lmvz-components/{p-25a78ead.entry.js → p-ce1a9f39.entry.js}

@@ -1 +1 @@
-import{r as e,g as a,h as t,H as r}from"./p-BPeerEwm.js";const o=class{constructor(a){e(this,a)}get el(){return a(this)}mediaSlotEl;value;disabled=!1;selected=!1;vertical=!1;handleMediaSlotChange=()=>{this.el.toggleAttribute("has-media",(this.mediaSlotEl?.assignedElements()??[]).length>0)};componentDidLoad(){this.handleMediaSlotChange(),this.el.dispatchEvent(new CustomEvent("lmvzTabReady",{bubbles:!0,composed:!1}))}render(){return t(r,{key:"642a74020dfe8e3f96ebbdf8067b1eba5c07bd15"},t("button",{key:"b786b259aed2f2e1f61f3ef14959f564841b3761",part:"button",role:"tab",disabled:this.disabled,"aria-selected":String(this.selected),"aria-disabled":this.disabled?"true":void 0,tabIndex:0},t("slot",{key:"e29265a24673c39397266ef21419cebdf9a05a2c",name:"media",ref:e=>this.mediaSlotEl=e,onSlotchange:this.handleMediaSlotChange}),t("span",{key:"c74ae843e36f85291e404955056ba1f34d0393e7",class:"label"},t("slot",{key:"0f13548f3ec10a126016bfc92aa93a4c21b86e0f"})),t("span",{key:"2f969a70550975bffd1884a55b12fec733331b01","aria-hidden":"true",part:"indicator",class:"indicator"})))}static get delegatesFocus(){return!0}};o.style=" @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-4-8, 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;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label {   display: contents; } ";export{o as lmvz_tab}
+import{r as e,g as a,h as t,H as r}from"./p-BPeerEwm.js";const o=class{constructor(a){e(this,a)}get el(){return a(this)}mediaSlotEl;value;disabled=!1;selected=!1;vertical=!1;handleMediaSlotChange=()=>{this.el.toggleAttribute("has-media",(this.mediaSlotEl?.assignedElements()??[]).length>0)};componentDidLoad(){this.handleMediaSlotChange(),this.el.dispatchEvent(new CustomEvent("lmvzTabReady",{bubbles:!0,composed:!1}))}render(){return t(r,{key:"6bb908c4956e84cd344fc8e81b400d33bb2dce98"},t("button",{key:"fbc5b650c9bfb5653d17f9a66a14ffbf0fe87f83",part:"button",role:"tab",disabled:this.disabled,"aria-selected":String(this.selected),"aria-disabled":this.disabled?"true":void 0,tabIndex:0},t("slot",{key:"a16da4d11ecca9db3d03da3b0076b698295ead1f",name:"media",ref:e=>this.mediaSlotEl=e,onSlotchange:this.handleMediaSlotChange}),t("span",{key:"e9e83fd4aa556716af3c7b7e52e1e1d8a5a33061",class:"label"},t("slot",{key:"a4c0378e62d67d7bcc772ff6a77ae1a86f41208c"})),t("span",{key:"de03b763d99f55b8773334df3d18c2d3855de4de","aria-hidden":"true",part:"indicator",class:"indicator"})))}static get delegatesFocus(){return!0}};o.style=" @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-4-8, 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;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label {   display: contents; } ";export{o as lmvz_tab}

package/lmvz-components/{p-80a26307.entry.js → p-ddc28256.entry.js}

@@ -1 +1 @@
-import{g as e,r as t,c as o,h as i,H as s}from"./p-BPeerEwm.js";import{c as a}from"./p-BSV3KDWl.js";import{t as r}from"./p-CcxjkCOx.js";import{A as l}from"./p-CPOia2kT.js";import{i as n,g as d}from"./p-CxfT9IA1.js";import{R as c}from"./p-FBuCCcFC.js";import"./p-CGmJG63p.js";import"./p-CdDO7mQa.js";const h=r(a);let f=0;const m=class extends c{get el(){return e(this)}inheritedAriaAttributes={};dialogEl;dialogStateObserver;headerSlot;buttonGroupEl;closeButtonEl;previouslyFocusedElement=null;wrappedDialogShowModal;pendingCloseReturnValue;dialogTitleId="lmvz-modal-title-"+f++;hasHeader=!1;open=!1;closeLabel="Schliessen";dialogClose;dialogCancel;get dialog(){return this.dialogEl}get validationEl(){return this.dialogEl??this.el}constructor(e){super(),t(this,e),this.dialogClose=o(this,"close",6),this.dialogCancel=o(this,"cancel",1),this.addController(new l(this,{validationTiming:"slot"}))}handleFormDialogSubmit(e){const t=e.submitter;("dialog"===e.target.method||"dialog"===t?.getAttribute("formmethod"))&&(e.preventDefault(),this.dialogEl?.close(t?.value??""))}connectedCallback(){this.inheritedAriaAttributes=n(this.el,["role"]),Object.defineProperty(this.el,"dialog",{configurable:!0,enumerable:!0,get:()=>(this.ensureDialogShowModalCapture(),this.dialogEl)}),super.connectedCallback()}componentDidLoad(){this.handleHeaderSlotChange(),this.observeDialogState(),this.syncDialogVisibility(),super.componentDidLoad()}disconnectedCallback(){this.dialogStateObserver?.disconnect(),super.disconnectedCallback()}componentDidRender(){this.open&&this.focusPrimaryAction(),super.componentDidRender()}handleOpenChange(){this.syncDialogVisibility()}get dialogAccessibilityAttributes(){const e={...this.inheritedAriaAttributes};if(delete e["aria-label"],delete e["aria-labelledby"],this.hasHeader)return e["aria-labelledby"]=this.dialogTitleId,e;const t=this.inheritedAriaAttributes["aria-labelledby"];if("string"==typeof t)return e["aria-labelledby"]=t,e;const o=this.inheritedAriaAttributes["aria-label"];return"string"==typeof o&&(e["aria-label"]=o),e}hasAssignedContent(e){return Boolean(e?.assignedNodes({flatten:!0}).some((e=>e.nodeType===Node.TEXT_NODE?Boolean(e.textContent?.trim()):e.nodeType===Node.ELEMENT_NODE)))}observeDialogState(){this.dialogEl&&"undefined"!=typeof MutationObserver&&(this.dialogStateObserver?.disconnect(),this.dialogStateObserver=new MutationObserver((()=>{this.dialogEl&&this.dialogEl.open!==this.open&&(this.open=!!this.dialogEl.open)})),this.dialogStateObserver.observe(this.dialogEl,{attributes:!0,attributeFilter:["open"]}))}capturePreviouslyFocusedElement(){const e=this.dialogEl,t=d(document);e&&t&&!e.contains(t)&&(this.previouslyFocusedElement=t)}ensureDialogShowModalCapture(){const e=this.dialogEl;if(!e||"function"!=typeof e.showModal)return;const t=e.showModal;if(t===this.wrappedDialogShowModal)return;const o=()=>(this.capturePreviouslyFocusedElement(),t.call(e));Object.defineProperty(e,"showModal",{configurable:!0,value:o}),this.wrappedDialogShowModal=o}syncDialogVisibility(){const e=this.dialogEl;if(e)return this.open?(e.open||(this.capturePreviouslyFocusedElement(),"function"==typeof e.showModal?e.showModal():e.setAttribute("open","")),void this.focusPrimaryAction()):void(e.open&&("function"==typeof e.close?e.close():(e.removeAttribute("open"),this.handleDialogClose())))}focusPrimaryAction(){const e=this.buttonGroupEl?.primaryEnabledAction??this.closeButtonEl;e&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{this.open&&e.focus()}))}restoreFocus(){this.previouslyFocusedElement?.isConnected&&(this.previouslyFocusedElement.focus(),this.previouslyFocusedElement=null)}handleCloseButtonClick=()=>{if(!this.dialogEl)return;const e=this.dialogEl;if("function"==typeof e.requestClose)return this.pendingCloseReturnValue="close",void e.requestClose("close");"function"!=typeof this.dialogEl.close?this.handleDialogClose():this.dialogEl.close("close")};handleDialogCancel=e=>{if(e.preventDefault(),this.dialogCancel.emit().defaultPrevented)return void(this.pendingCloseReturnValue=void 0);const t=this.pendingCloseReturnValue;this.pendingCloseReturnValue=void 0,this.dialogEl?.close(t)};handleDialogClose=()=>{console.log("Dialog close handler called"),this.open&&(this.open=!1),this.restoreFocus(),this.dialogClose.emit()};handleHeaderSlotChange=()=>{this.hasHeader=this.hasAssignedContent(this.headerSlot)};render(){return i(s,{key:"8b5f506cdac223a440309d472639fe965b94f8c2"},i("dialog",{key:"0b70ac4d9590266271052c4d7fdef03c684d9b72",ref:e=>this.dialogEl=e,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose,...this.dialogAccessibilityAttributes},i("div",{key:"25b529bec1905408c2041b7370ab37586eade47d",class:"modal-shell"},i("header",{key:"d86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb",class:{header:!0,"has-title":this.hasHeader}},i("div",{key:"7fd7059bfb0b90834895a87c2f2598e2e8c2ba80",class:"title",id:this.dialogTitleId,hidden:!this.hasHeader},i("slot",{key:"b6eb7885e220e5def4c3c8420d5b83f4a7e30907",name:"header",ref:e=>this.headerSlot=e,onSlotchange:this.handleHeaderSlotChange})),i("lmvz-button",{key:"dcebb06482cdef7423c6b62ef877ca9aaabf55a4",ref:e=>this.closeButtonEl=e,type:"button",class:"close-button","aria-label":this.closeLabel,onClick:this.handleCloseButtonClick,variant:"tertiary"},i("lmvz-icon",{key:"0db22c68fe164ed2a33bfaeacf9eac619424f464",icon:h}))),i("div",{key:"ef402c343f2c68210351f7556eec08f2e9be851b",class:"body"},i("slot",{key:"3fe86dc88c88c2cf7bfe3429c62cb2047b64611a"})),i("footer",{key:"92b7bdab1ffe700749fc029723f70913f436397d",class:"actions",hidden:!this.buttonGroupEl?.hasActions},i("lmvz-button-group",{key:"7e1b310fb1b20449ead14d0702af4977c74198dd",ref:e=>this.buttonGroupEl=e},i("slot",{key:"cb2187ab2758c61e80b65f9fc55c6be5f9fd0458",name:"actions"}))))))}static get watchers(){return{open:[{handleOpenChange:0}]}}};m.style=" @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-4-8, 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: contents;       --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog {   border: none;   padding: 0;   background: transparent;   height: 100vh;   width: 100vw;   contain: layout size; } dialog::backdrop {         background: rgba(0, 0, 0, 0.19);   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell {   margin-inline: auto;   top: 50%;   transform: translateY(-50%);    box-sizing: border-box;   width: fit-content;   max-height: 100%;   max-width: clamp(20rem, 100%, 90vw);    display: flex;   flex-direction: column;   gap: var(--lmvz-modal-shell-gap);   padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));   border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);   background: var(--lmvz-semantic-color-surface-primary, #ffffff);    position: relative;    .close-button {     position: absolute;     top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));     right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   } } .header {   display: flex;   align-items: flex-start;   justify-content: flex-end;   gap: var(--lmvz-modal-shell-gap); } .title {   min-inline-size: 0;   font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5     Router); } .has-title .title {   flex: 1 1 auto; } .body {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   flex: 1;   overflow: scroll;    } ";export{m as lmvz_modal}
+import{g as e,r as t,c as o,h as i,H as s}from"./p-BPeerEwm.js";import{c as a}from"./p-BSV3KDWl.js";import{t as r}from"./p-DjvtQE7c.js";import{A as l}from"./p-D9PQIBzA.js";import{a as n,g as d}from"./p-B0eCxdyI.js";import{R as c}from"./p-FBuCCcFC.js";import"./p-D06Ds9Dh.js";import"./p-BDonpCG8.js";const h=r(a);let f=0;const m=class extends c{get el(){return e(this)}inheritedAriaAttributes={};dialogEl;dialogStateObserver;headerSlot;buttonGroupEl;closeButtonEl;previouslyFocusedElement=null;wrappedDialogShowModal;pendingCloseReturnValue;dialogTitleId="lmvz-modal-title-"+f++;hasHeader=!1;open=!1;closeLabel="Schliessen";dialogClose;dialogCancel;get dialog(){return this.dialogEl}get validationEl(){return this.dialogEl??this.el}constructor(e){super(),t(this,e),this.dialogClose=o(this,"close",6),this.dialogCancel=o(this,"cancel",1),this.addController(new l(this,{validationTiming:"slot"}))}handleFormDialogSubmit(e){const t=e.submitter;("dialog"===e.target.method||"dialog"===t?.getAttribute("formmethod"))&&(e.preventDefault(),this.dialogEl?.close(t?.value??""))}connectedCallback(){this.inheritedAriaAttributes=n(this.el,["role"]),Object.defineProperty(this.el,"dialog",{configurable:!0,enumerable:!0,get:()=>(this.ensureDialogShowModalCapture(),this.dialogEl)}),super.connectedCallback()}componentDidLoad(){this.handleHeaderSlotChange(),this.observeDialogState(),this.syncDialogVisibility(),super.componentDidLoad()}disconnectedCallback(){this.dialogStateObserver?.disconnect(),super.disconnectedCallback()}componentDidRender(){this.open&&this.focusPrimaryAction(),super.componentDidRender()}handleOpenChange(){this.syncDialogVisibility()}get dialogAccessibilityAttributes(){const e={...this.inheritedAriaAttributes};if(delete e["aria-label"],delete e["aria-labelledby"],this.hasHeader)return e["aria-labelledby"]=this.dialogTitleId,e;const t=this.inheritedAriaAttributes["aria-labelledby"];if("string"==typeof t)return e["aria-labelledby"]=t,e;const o=this.inheritedAriaAttributes["aria-label"];return"string"==typeof o&&(e["aria-label"]=o),e}hasAssignedContent(e){return Boolean(e?.assignedNodes({flatten:!0}).some((e=>e.nodeType===Node.TEXT_NODE?Boolean(e.textContent?.trim()):e.nodeType===Node.ELEMENT_NODE)))}observeDialogState(){this.dialogEl&&"undefined"!=typeof MutationObserver&&(this.dialogStateObserver?.disconnect(),this.dialogStateObserver=new MutationObserver((()=>{this.dialogEl&&this.dialogEl.open!==this.open&&(this.open=!!this.dialogEl.open)})),this.dialogStateObserver.observe(this.dialogEl,{attributes:!0,attributeFilter:["open"]}))}capturePreviouslyFocusedElement(){const e=this.dialogEl,t=d(document);e&&t&&!e.contains(t)&&(this.previouslyFocusedElement=t)}ensureDialogShowModalCapture(){const e=this.dialogEl;if(!e||"function"!=typeof e.showModal)return;const t=e.showModal;if(t===this.wrappedDialogShowModal)return;const o=()=>(this.capturePreviouslyFocusedElement(),t.call(e));Object.defineProperty(e,"showModal",{configurable:!0,value:o}),this.wrappedDialogShowModal=o}syncDialogVisibility(){const e=this.dialogEl;if(e)return this.open?(e.open||(this.capturePreviouslyFocusedElement(),"function"==typeof e.showModal?e.showModal():e.setAttribute("open","")),void this.focusPrimaryAction()):void(e.open&&("function"==typeof e.close?e.close():(e.removeAttribute("open"),this.handleDialogClose())))}focusPrimaryAction(){const e=this.buttonGroupEl?.primaryEnabledAction??this.closeButtonEl;e&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{this.open&&e.focus()}))}restoreFocus(){this.previouslyFocusedElement?.isConnected&&(this.previouslyFocusedElement.focus(),this.previouslyFocusedElement=null)}handleCloseButtonClick=()=>{if(!this.dialogEl)return;const e=this.dialogEl;if("function"==typeof e.requestClose)return this.pendingCloseReturnValue="close",void e.requestClose("close");"function"!=typeof this.dialogEl.close?this.handleDialogClose():this.dialogEl.close("close")};handleDialogCancel=e=>{if(e.preventDefault(),this.dialogCancel.emit().defaultPrevented)return void(this.pendingCloseReturnValue=void 0);const t=this.pendingCloseReturnValue;this.pendingCloseReturnValue=void 0,this.dialogEl?.close(t)};handleDialogClose=()=>{console.log("Dialog close handler called"),this.open&&(this.open=!1),this.restoreFocus(),this.dialogClose.emit()};handleHeaderSlotChange=()=>{this.hasHeader=this.hasAssignedContent(this.headerSlot)};render(){return i(s,{key:"8b5f506cdac223a440309d472639fe965b94f8c2"},i("dialog",{key:"0b70ac4d9590266271052c4d7fdef03c684d9b72",ref:e=>this.dialogEl=e,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose,...this.dialogAccessibilityAttributes},i("div",{key:"25b529bec1905408c2041b7370ab37586eade47d",class:"modal-shell"},i("header",{key:"d86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb",class:{header:!0,"has-title":this.hasHeader}},i("div",{key:"7fd7059bfb0b90834895a87c2f2598e2e8c2ba80",class:"title",id:this.dialogTitleId,hidden:!this.hasHeader},i("slot",{key:"b6eb7885e220e5def4c3c8420d5b83f4a7e30907",name:"header",ref:e=>this.headerSlot=e,onSlotchange:this.handleHeaderSlotChange})),i("lmvz-button",{key:"dcebb06482cdef7423c6b62ef877ca9aaabf55a4",ref:e=>this.closeButtonEl=e,type:"button",class:"close-button","aria-label":this.closeLabel,onClick:this.handleCloseButtonClick,variant:"tertiary"},i("lmvz-icon",{key:"0db22c68fe164ed2a33bfaeacf9eac619424f464",icon:h}))),i("div",{key:"ef402c343f2c68210351f7556eec08f2e9be851b",class:"body"},i("slot",{key:"3fe86dc88c88c2cf7bfe3429c62cb2047b64611a"})),i("footer",{key:"92b7bdab1ffe700749fc029723f70913f436397d",class:"actions",hidden:!this.buttonGroupEl?.hasActions},i("lmvz-button-group",{key:"7e1b310fb1b20449ead14d0702af4977c74198dd",ref:e=>this.buttonGroupEl=e},i("slot",{key:"cb2187ab2758c61e80b65f9fc55c6be5f9fd0458",name:"actions"}))))))}static get watchers(){return{open:[{handleOpenChange:0}]}}};m.style=" @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-4-8, 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: contents;       --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog {   border: none;   padding: 0;   background: transparent;   height: 100vh;   width: 100vw;   contain: layout size; } dialog::backdrop {         background: rgba(0, 0, 0, 0.19);   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell {   margin-inline: auto;   top: 50%;   transform: translateY(-50%);    box-sizing: border-box;   width: fit-content;   max-height: 100%;   max-width: clamp(20rem, 100%, 90vw);    display: flex;   flex-direction: column;   gap: var(--lmvz-modal-shell-gap);   padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));   border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);   background: var(--lmvz-semantic-color-surface-primary, #ffffff);    position: relative;    .close-button {     position: absolute;     top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));     right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   } } .header {   display: flex;   align-items: flex-start;   justify-content: flex-end;   gap: var(--lmvz-modal-shell-gap); } .title {   min-inline-size: 0;   font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5     Router); } .has-title .title {   flex: 1 1 auto; } .body {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   flex: 1;   overflow: scroll;    } ";export{m as lmvz_modal}

package/lmvz-components/p-fd455288.entry.js

@@ -0,0 +1 @@
+import{g as t,r as o,c as r,h as e,H as n}from"./p-BPeerEwm.js";import{c as i}from"./p-BfTCfPZ1.js";import{A as a}from"./p-D9PQIBzA.js";import{E as l}from"./p-CN0JX9-m.js";import{a as m,j as v}from"./p-B0eCxdyI.js";import{R as s}from"./p-FBuCCcFC.js";import{p as d}from"./p-DjvtQE7c.js";import{a as c}from"./p-CyDgnpOB.js";import"./p-BDonpCG8.js";import"./p-D06Ds9Dh.js";const u=class extends s{get el(){return t(this)}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;ti=0;resolveFocusableElement(){return this.validationEl}scale="default";variant;disabled=!1;type="button";form;formMethod;name;value;buttonRole;constructor(t){super(),o(this,t),this.lmvzActivation=r(this,"lmvzActivation",7),this.addController(new a(this)),this.addController(new l(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=m(this.el,["role"]),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=v(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(),e(n,{key:"f3e619dca398c3a8a78e9d2f8c3df4178b2531b2",role:"presentation"},e("button",{key:"eb1aac6756a70968d3a72cb40c1d52d96340423e",ref:t=>this.validationEl=t,part:"button",role:this.buttonRole,disabled:this.disabled,type:this.type,class:i(this.variant??"secondary",{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"786ff1c10ae05eda646c77ac8779813be6e51949"})))}static get delegatesFocus(){return!0}};u.style=" @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-4-8, 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 {         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, #e52a31)); }  button.danger:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31)); }  button.danger:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31)); }  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.69rem, 0.67rem + 0.06vw, 0.75rem) / 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: inline-block;    button {     width: 100%;   } } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } ";const b=class extends s{intersectionObserver;ariaValidationController=new a(this);get el(){return t(this)}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(t){super(),o(this,t),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:t,iconset:o,visible:r}=this;if(!t||!r)return;const e=d(t);this.iconData=e||await c({icon:t,iconset:o})}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return e(n,{key:"4fba217d573d968951819f12af24d775c8ac62dc",role:"img","aria-hidden":`${this.ariaHidden}`,innerHTML:this.iconData})}waitUntilVisible(t,o=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((o=>{o.some((o=>!!o.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,t(),!0)))}),{rootMargin:`${o}px`}),this.intersectionObserver.observe(this.el)):t()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}};b.style=".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)}}";export{u as lmvz_button,b as lmvz_icon}

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-23T09:00:42",
+  "timestamp": "2026-06-25T13:11:11",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -456,10 +456,10 @@
         },
         {
           "name": "variant",
-          "type": "\"primary\" | \"secondary\" | \"tertiary\" | undefined",
+          "type": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
           "complexType": {
             "original": "Button.Variant",
-            "resolved": "\"primary\" | \"secondary\" | \"tertiary\" | undefined",
+            "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
             "references": {
               "Button": {
                 "location": "import",
@@ -480,6 +480,10 @@
             }
           ],
           "values": [
+            {
+              "value": "danger",
+              "type": "string"
+            },
             {
               "value": "primary",
               "type": "string"
@@ -6502,6 +6506,380 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/lmvz-popover/lmvz-popover.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-popover",
+      "readme": "# lmvz-popover\n\nA non-modal floating dialog anchored to a trigger element. Positions automatically via `@floating-ui/dom` with collision avoidance (flip and shift middleware). Content-agnostic: accepts any slotted elements.\n\n## Usage\n\nAnchor the popover to a trigger element by setting the `anchor` prop to the trigger's `id` or element reference.\n\nIf no `id` is set on the popover host, one is auto-assigned at load time.\n\n```html\n<button\n  id=\"trigger\"\n  onclick=\"document.getElementById('my-popover').toggle()\"\n>\n  Open menu\n</button>\n<lmvz-popover id=\"my-popover\" anchor=\"trigger\" label=\"Menu options\">\n  <p>Popover content goes here</p>\n</lmvz-popover>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `open` | `boolean` | `false` | Opens or closes the popover. |\n| `anchor` | `string \\| HTMLElement` | – | Anchor element id or reference for positioning. |\n| `placement` | `'top' \\| 'bottom' \\| 'start' \\| 'end' \\| 'top-start' \\| 'top-end' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Preferred placement relative to the anchor. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'sm'` | Size variant of the card surface. |\n| `autoFocus` | `boolean` | `true` | Moves focus to the first focusable element when opened. |\n| `label` | `string` | – | Accessible label for the popover container (reflected on dialog role). |\n\n## Slots\n\n| Slot | Description |\n|---|---|\n| `default` | Popover content. Any elements may be slotted. |\n\n## Events\n\n| Event | Cancelable | Description |\n|---|---|---|\n| `lmvzOpen` | No | Fired after the popover opens. |\n| `lmvzClose` | No | Fired after the popover closes. |\n| `lmvzCancel` | **Yes** | Fired before light-dismiss (click outside) or Escape close. Call `event.preventDefault()` to veto the close and keep the popover open. |\n\n## Methods\n\n| Method | Returns | Description |\n|---|---|---|\n| `show()` | `Promise<void>` | Opens the popover. |\n| `hide()` | `Promise<void>` | Closes the popover after firing `lmvzCancel`. If `lmvzCancel` is prevented, the popover remains open. |\n| `toggle()` | `Promise<void>` | Toggles the open state. |\n\n## CSS Customization\n\n### Shadow Parts\n\n| Part | Description |\n|---|---|\n| `container` | The popover's dialog container. Target to customize positioning, overflow, or appearance. |\n\n### Custom Properties\n\n| Property | Description | Default |\n|---|---|---|\n| `--lmvz-popover-max-width` | Maximum width of the popover surface. | `none` |\n| `--lmvz-popover-max-height` | Maximum height of the popover surface. | `none` |\n| `--lmvz-popover-z-index` | Z-index of the popover surface. | `1` |\n\n## Accessibility\n\n### Trigger Requirements\n\nWhen you set the `anchor` prop, the popover automatically writes three ARIA attributes to the resolved anchor element for screen reader and assistive technology support:\n\n- **`aria-haspopup=\"dialog\"`** — Announces that the trigger opens a dialog.\n- **`aria-expanded`** — Reflects the popover's open state (`\"true\"` when open, `\"false\"` when closed).\n- **`aria-controls`** — Points to the popover's `id` to establish the relationship between trigger and content.\n\nDo not set these attributes manually. Exception: if you pre-set `aria-haspopup` to a different value (e.g. `\"menu\"` for an action-list popover), the component preserves your value.\n\n### Content Semantics\n\nThe component renders a `role=\"dialog\"` container. Provide a `label` prop or set `aria-labelledby` on the host element to satisfy dialog labeling requirements.\n\n### AriaValidation\n\nWhen `@lmvz-ds/aria-validation` is enabled (development only), the component validates:\n\n- **Host element:** Must have an accessible label via the `label` prop or `aria-labelledby` attribute.\n- **Anchor element:** Must be interactive and focusable (e.g., `<button>`, `<a href>`, elements with `tabindex`, or elements with an interactive ARIA role). Non-interactive anchors produce a dev-time warning.\n\nValidation is disabled in production builds and test runtimes.\n\n## Notes\n\n- The popover is non-modal: focus is not trapped, and interaction outside does not require acknowledgment.\n- Positioning is automatic with collision avoidance. Use `placement` to express preference, but the component will flip or shift as needed to keep content visible.\n- Light-dismiss (clicking outside the popover or pressing Escape) fires `lmvzCancel` first, allowing consumers to intercept and prevent close (e.g., to warn unsaved changes).\n\n## Out of Scope\n\nIntegration with sibling components (e.g., action-list, select, date-picker) is intentionally not implemented in the popover itself. These components integrate via the trigger element and slot content, and remain the responsibility of the consuming application.\n",
+      "docs": "A non-modal floating dialog anchored to a trigger element. Positions automatically via `@floating-ui/dom` with collision avoidance (flip and shift middleware). Content-agnostic: accepts any slotted elements.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Popover content. Any element may be slotted here."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "anchor",
+          "type": "HTMLElement | string | undefined",
+          "complexType": {
+            "original": "string | HTMLElement",
+            "resolved": "HTMLElement | string | undefined",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "anchor",
+          "reflectToAttr": false,
+          "docs": "The anchor element or its id. Used for positioning.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLElement"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "auto-focus",
+          "reflectToAttr": false,
+          "docs": "Whether to move focus to the first focusable element on open.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Accessible label for the popover container.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "Whether the popover is open.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "placement",
+          "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"end\" | \"start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "complexType": {
+            "original": "Popover.Placement",
+            "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"end\" | \"start\" | \"top\" | \"top-end\" | \"top-start\"",
+            "references": {
+              "Popover": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Popover",
+                "referenceLocation": "Popover"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "placement",
+          "reflectToAttr": false,
+          "docs": "Preferred placement relative to the anchor.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'bottom-start'"
+            }
+          ],
+          "default": "'bottom-start'",
+          "values": [
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "bottom-end",
+              "type": "string"
+            },
+            {
+              "value": "bottom-start",
+              "type": "string"
+            },
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            },
+            {
+              "value": "top",
+              "type": "string"
+            },
+            {
+              "value": "top-end",
+              "type": "string"
+            },
+            {
+              "value": "top-start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "size",
+          "type": "\"lg\" | \"md\" | \"sm\"",
+          "complexType": {
+            "original": "Popover.Size",
+            "resolved": "\"lg\" | \"md\" | \"sm\"",
+            "references": {
+              "Popover": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Popover",
+                "referenceLocation": "Popover"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "Controls the size variant of the card surface.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'sm'"
+            }
+          ],
+          "default": "'sm'",
+          "values": [
+            {
+              "value": "lg",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            },
+            {
+              "value": "sm",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "hide",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "hide() => Promise<void>",
+          "parameters": [],
+          "docs": "Closes the popover, firing lmvzCancel first. If cancelled, the popover stays open.",
+          "docsTags": []
+        },
+        {
+          "name": "show",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "show() => Promise<void>",
+          "parameters": [],
+          "docs": "Opens the popover.",
+          "docsTags": []
+        },
+        {
+          "name": "toggle",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "toggle() => Promise<void>",
+          "parameters": [],
+          "docs": "Toggles the popover open state.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "lmvzCancel",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired before light-dismiss or Escape close.\nCall `event.preventDefault()` to veto the close.",
+          "docsTags": []
+        },
+        {
+          "event": "lmvzClose",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired after the popover closes.",
+          "docsTags": []
+        },
+        {
+          "event": "lmvzOpen",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired after the popover opens.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Popover content. Any element may be slotted here."
+        }
+      ],
+      "parts": [
+        {
+          "name": "container",
+          "docs": ""
+        }
+      ],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/lmvz-radio/lmvz-radio.tsx",
       "encapsulation": "scoped",
@@ -8335,6 +8713,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/index.d.ts::Popover": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/index.d.ts"
+    },
     "src/api/index.d.ts::Select": {
       "declaration": "any",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.32.0",
+  "version": "0.34.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -115,6 +115,10 @@
     "./lmvz-action-list": {
       "import": "./components/lmvz-action-list.js",
       "types": "./components/lmvz-action-list.d.ts"
+    },
+    "./lmvz-popover": {
+      "import": "./components/lmvz-popover.js",
+      "types": "./components/lmvz-popover.d.ts"
     }
   },
   "main": "./index.cjs.js",
@@ -129,10 +133,10 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "effect": "^3.21.1"
+    "effect": "^3.21.4"
   },
   "optionalDependencies": {
-    "@lmvz-ds/aria-validation": "~0.16.1"
+    "@lmvz-ds/aria-validation": "~0.17.0"
   },
   "files": [
     "**/*"

package/types/api/ds.constants.d.ts

@@ -1,4 +1,4 @@
-export declare const variants: readonly ["primary", "secondary", "tertiary"];
+export declare const variants: readonly ["primary", "secondary", "tertiary", "danger"];
 export declare const scaleValues: readonly ["small", "default", "large"];
 export declare const sizes: readonly ["xs", "sm", "md", "lg"];
 export declare const textSizes: readonly ["xs", "sm", "md", "lg", "xl"];
@@ -14,3 +14,5 @@ export declare const messageTypes: readonly ["neutral", "warning"];
 export declare const snackbarStatuses: readonly ["success", "warning", "error"];
 export declare const snackbarPriorities: readonly ["low", "normal", "high"];
 export declare const snackbarDismissReasons: readonly ["timeout", "manual", "action", "overridden", "swallowed"];
+export declare const popoverPlacements: readonly ["top", "bottom", "start", "end", "top-start", "top-end", "bottom-start", "bottom-end"];
+export declare const popoverSizes: readonly ["sm", "md", "lg"];

package/types/api/ds.types.d.ts

@@ -7,6 +7,8 @@ import type {
   inputTypes,
   linkTypes,
   messageTypes,
+  popoverPlacements,
+  popoverSizes,
   scaleValues,
   selectSizes,
   sizes,
@@ -67,5 +69,10 @@ export namespace Snackbar {
   export type DismissReason = (typeof snackbarDismissReasons)[number];
 }
 
+export namespace Popover {
+  export type Placement = (typeof popoverPlacements)[number];
+  export type Size = (typeof popoverSizes)[number];
+}
+
 export type Attributes = { [key: string]: unknown };
 export type FormRef = string | HTMLFormElement | undefined;

package/types/components/lmvz-popover/lmvz-popover.d.ts

@@ -0,0 +1,37 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { Popover } from '../../api';
+export declare class LmvzPopover {
+    readonly el: HTMLElement;
+    private readonly closureController;
+    private containerEl?;
+    private slotEl?;
+    private previouslyFocusedElement;
+    open: boolean;
+    anchor?: string | HTMLElement;
+    placement: Popover.Placement;
+    size: Popover.Size;
+    autoFocus: boolean;
+    label?: string;
+    lmvzOpen: EventEmitter<void>;
+    lmvzClose: EventEmitter<void>;
+    lmvzCancel: EventEmitter<void>;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toggle(): Promise<void>;
+    componentDidLoad(): void;
+    protected handleOpenChange(isOpen: boolean): void;
+    protected handleAnchorChange(): void;
+    disconnectedCallback(): void;
+    private resolveAnchor;
+    private updatePosition;
+    private onOpen;
+    private onClose;
+    private applyAnchorAriaOpen;
+    private applyAnchorAriaClose;
+    private focusFirst;
+    private restoreFocus;
+    private triggerClose;
+    private setupCloseHandlers;
+    private removeCloseHandlers;
+    render(): any;
+}