@lmvz-ds/components 0.29.0 → 0.31.0

package/lmvz-components/{p-af4e26da.entry.js → p-fa2cd315.entry.js}

@@ -1 +1 @@
-import{g as r,r as e,c as o,h as t,H as i}from"./p-BPeerEwm.js";import{A as a}from"./p-CPOia2kT.js";import{R as s}from"./p-FBuCCcFC.js";import"./p-CdDO7mQa.js";function l(r){return r.el.shadowRoot?.querySelector("input")??r.el.querySelector("input")??null}class c{hosts=[];_focusedHost=null;_focusinHandler=r=>{this.hosts.some((e=>e.el.contains(r.target)))||this.clearFocused()};register(r){if(!this.hosts.includes(r)){const e=0===this.hosts.length;this.hosts.push(r),this.sortHosts(),e&&document.addEventListener("focusin",this._focusinHandler,!0)}}unregister(r){r===this._focusedHost&&(this._focusedHost=null),this.hosts=this.hosts.filter((e=>e!==r)),0===this.hosts.length&&document.removeEventListener("focusin",this._focusinHandler,!0)}get sortedEnabled(){return this.hosts.filter((r=>!r.disabled))}setFocused(r){this._focusedHost=r,this.updateTabindex(),r.focusInput()}clearFocused(){this._focusedHost=null,this.updateTabindex()}select(r){this._focusedHost=null;for(const e of this.hosts)e.checked=e===r;this.updateTabindex()}updateTabindex(){const r=this.sortedEnabled,e=this.hosts.find((r=>r.checked));let o;o=this._focusedHost&&r.includes(this._focusedHost)?this._focusedHost:e??r[0]??null;for(const r of this.hosts){const e=l(r);e&&(e.tabIndex=r===o?0:-1)}}sortHosts(){this.hosts.sort(((r,e)=>r.el.compareDocumentPosition(e.el)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1))}}class n{host;static registry=new Map;group=null;_groupKey=null;_scope=null;constructor(r){this.host=r}hostConnected(){const{group:r,key:e,scope:o}=n.acquireGroup(this.host);this._groupKey=e,this._scope=o,this.group=r,this.group.register(this.host),this.group.updateTabindex()}hostDidRender(){this.group?.updateTabindex()}hostDisconnected(){this.group&&(this.group.unregister(this.host),this.group.updateTabindex(),n.releaseGroup(this._groupKey,this._scope),this._groupKey=null,this._scope=null,this.group=null)}get sortedEnabled(){return this.group?.sortedEnabled??[]}select(r){this.group?.select(r)}setFocused(r){this.group?.setFocused(r)}clearFocused(){this.group?.clearFocused()}updateTabindex(){this.group?.updateTabindex()}static acquireGroup(r){const e=r.name;if(!e)return{group:new c,key:null,scope:null};const o=r.el.closest("form")??document,t=function(r,e){return e instanceof HTMLFormElement?(e.dataset.lmvzRadioGroupId||(e.dataset.lmvzRadioGroupId=String(Math.random())),`${r}::form::${e.dataset.lmvzRadioGroupId}`):`${r}::document`}(e,o);let i=n.registry.get(t);return i||(i={group:new c,refCount:0},n.registry.set(t,i)),i.refCount++,{group:i.group,key:t,scope:o}}static releaseGroup(r,e){if(!r)return;const o=n.registry.get(r);o&&(o.refCount--,o.refCount<=0&&(n.registry.delete(r),e instanceof HTMLFormElement&&e.removeAttribute("data-lmvz-radio-group-id")))}}let d=0;const h=class extends s{get el(){return r(this)}get validationEl(){return this.el}internals;nativeInput;radioId="lmvz-radio-"+d++;initialChecked=!1;radioGroupController;get helperId(){return this.helperText?`${this.radioId}-helper`:void 0}label;checked=!1;value="on";name;disabled=!1;required=!1;error=!1;helperText;form;autofocus=!1;_handlingNativeChange=!1;_handlingFormReset=!1;handleCheckedChange(r,e){this.internals.setFormValue?.(r?this.value:null),r||!e||this._handlingNativeChange||this._handlingFormReset||this.lmvzChange.emit(!1),!r||e||this._handlingNativeChange||this._handlingFormReset||this.lmvzChange.emit(!0)}handleValueChange(r){this.checked&&this.internals.setFormValue?.(r)}handleLabelChange(r){r||console.warn("[lmvz-radio] label prop is required and must not be empty")}lmvzChange;lmvzActivation;async focusInput(){this.nativeInput?.focus()}async checkValidity(){return this.internals?.checkValidity()??!0}async reportValidity(){return this.internals?.reportValidity()??!0}constructor(r){super(),e(this,r),this.lmvzChange=o(this,"lmvzChange",7),this.lmvzActivation=o(this,"lmvzActivation",7),r.$hostElement$["s-ei"]?this.internals=r.$hostElement$["s-ei"]:(this.internals=r.$hostElement$.attachInternals(),r.$hostElement$["s-ei"]=this.internals),this.addController(new a(this,{reValidateOnPropChanges:!0})),this.radioGroupController=new n(this),this.addController(this.radioGroupController)}componentWillLoad(){this.initialChecked=this.checked,this.internals.setFormValue?.(this.checked?this.value:null),super.componentWillLoad()}formAssociatedCallback(){this.internals.setFormValue?.(this.checked?this.value:null)}formResetCallback(){this._handlingFormReset=!0;try{this.checked=this.initialChecked}finally{this._handlingFormReset=!1}}formStateRestoreCallback(r){if("string"==typeof r){this._handlingFormReset=!0;try{this.checked=r===this.value}finally{this._handlingFormReset=!1}}}handleChange=r=>{this._handlingNativeChange=!0;try{this.checked=r.target.checked,this.lmvzChange.emit(this.checked),this.radioGroupController.select(this),this.lmvzActivation.emit()}finally{this._handlingNativeChange=!1}};handleKeydown(r){const{key:e}=r;if(!["ArrowDown","ArrowRight","ArrowUp","ArrowLeft","Home","End"].includes(e))return;r.preventDefault();const o=this.radioGroupController.sortedEnabled;if(0===o.length)return;const t=o.indexOf(this);if(-1===t)return;let i;i="ArrowDown"===e||"ArrowRight"===e?(t+1)%o.length:"ArrowUp"===e||"ArrowLeft"===e?(t-1+o.length)%o.length:"Home"===e?0:o.length-1;const a=o[i];a&&this.radioGroupController.setFocused(a)}render(){return t(i,{key:"c07af5c7d75b0f0d2c20b3af9ea763bd28e027b5"},t("input",{key:"2e7fddb7aa5df3f8bc0f1efbd110158680ec45d7",type:"radio",id:this.radioId,name:this.name??void 0,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,autoFocus:this.autofocus,"aria-invalid":this.error?"true":void 0,"aria-describedby":this.helperId,ref:r=>this.nativeInput=r,onChange:this.handleChange}),t("span",{key:"a2afc55b85527674e5a18bfc28e194ecc034053a",class:"circle","aria-hidden":"true"},this.checked&&t("span",{key:"d135da1d567743ea98ec5860feda3e6e8013bdb6",class:"dot"})),t("span",{key:"38c83e877135b221260bacdefca3cdb5446a4453",class:"content"},t("label",{key:"781d9d5544c0cb9d061875ef3674f3c3156f0675",htmlFor:this.radioId},this.label),t("span",{key:"1ed064b27dea65cbfb1b1bd38a9cb1b7a07de37e","aria-live":"polite",class:"helper-text",id:this.helperId},this.helperText)))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}],value:[{handleValueChange:0}],label:[{handleLabelChange:0}]}}};h.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; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);    --radio-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    display: flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   position: absolute;   inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   font: var(--lmvz-typography-body-md);   color: var(--radio-label-color);   cursor: pointer;   transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #e52a31); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline);outline-offset:var(--lmvz-ds-outline-offset)}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}";export{h as lmvz_radio}
+import{g as r,r as e,c as o,h as t,H as i}from"./p-BPeerEwm.js";import{A as a}from"./p-CPOia2kT.js";import{R as s}from"./p-FBuCCcFC.js";import"./p-CdDO7mQa.js";function l(r){return r.el.shadowRoot?.querySelector("input")??r.el.querySelector("input")??null}class c{hosts=[];_focusedHost=null;_focusinHandler=r=>{this.hosts.some((e=>e.el.contains(r.target)))||this.clearFocused()};register(r){if(!this.hosts.includes(r)){const e=0===this.hosts.length;this.hosts.push(r),this.sortHosts(),e&&document.addEventListener("focusin",this._focusinHandler,!0)}}unregister(r){r===this._focusedHost&&(this._focusedHost=null),this.hosts=this.hosts.filter((e=>e!==r)),0===this.hosts.length&&document.removeEventListener("focusin",this._focusinHandler,!0)}get sortedEnabled(){return this.hosts.filter((r=>!r.disabled))}setFocused(r){this._focusedHost=r,this.updateTabindex(),r.focusInput()}clearFocused(){this._focusedHost=null,this.updateTabindex()}select(r){this._focusedHost=null;for(const e of this.hosts)e.checked=e===r;this.updateTabindex()}updateTabindex(){const r=this.sortedEnabled,e=this.hosts.find((r=>r.checked));let o;o=this._focusedHost&&r.includes(this._focusedHost)?this._focusedHost:e??r[0]??null;for(const r of this.hosts){const e=l(r);e&&(e.tabIndex=r===o?0:-1)}}sortHosts(){this.hosts.sort(((r,e)=>r.el.compareDocumentPosition(e.el)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1))}}class n{host;static registry=new Map;group=null;_groupKey=null;_scope=null;constructor(r){this.host=r}hostConnected(){const{group:r,key:e,scope:o}=n.acquireGroup(this.host);this._groupKey=e,this._scope=o,this.group=r,this.group.register(this.host),this.group.updateTabindex()}hostDidRender(){this.group?.updateTabindex()}hostDisconnected(){this.group&&(this.group.unregister(this.host),this.group.updateTabindex(),n.releaseGroup(this._groupKey,this._scope),this._groupKey=null,this._scope=null,this.group=null)}get sortedEnabled(){return this.group?.sortedEnabled??[]}select(r){this.group?.select(r)}setFocused(r){this.group?.setFocused(r)}clearFocused(){this.group?.clearFocused()}updateTabindex(){this.group?.updateTabindex()}static acquireGroup(r){const e=r.name;if(!e)return{group:new c,key:null,scope:null};const o=r.el.closest("form")??document,t=function(r,e){return e instanceof HTMLFormElement?(e.dataset.lmvzRadioGroupId||(e.dataset.lmvzRadioGroupId=String(Math.random())),`${r}::form::${e.dataset.lmvzRadioGroupId}`):`${r}::document`}(e,o);let i=n.registry.get(t);return i||(i={group:new c,refCount:0},n.registry.set(t,i)),i.refCount++,{group:i.group,key:t,scope:o}}static releaseGroup(r,e){if(!r)return;const o=n.registry.get(r);o&&(o.refCount--,o.refCount<=0&&(n.registry.delete(r),e instanceof HTMLFormElement&&e.removeAttribute("data-lmvz-radio-group-id")))}}let d=0;const h=class extends s{get el(){return r(this)}get validationEl(){return this.el}internals;nativeInput;radioId="lmvz-radio-"+d++;initialChecked=!1;radioGroupController;get helperId(){return this.helperText?`${this.radioId}-helper`:void 0}label;checked=!1;value="on";name;disabled=!1;required=!1;error=!1;helperText;form;autofocus=!1;_handlingNativeChange=!1;_handlingFormReset=!1;handleCheckedChange(r,e){this.internals.setFormValue?.(r?this.value:null),r||!e||this._handlingNativeChange||this._handlingFormReset||this.lmvzChange.emit(!1),!r||e||this._handlingNativeChange||this._handlingFormReset||this.lmvzChange.emit(!0)}handleValueChange(r){this.checked&&this.internals.setFormValue?.(r)}handleLabelChange(r){r||console.warn("[lmvz-radio] label prop is required and must not be empty")}lmvzChange;lmvzActivation;async focusInput(){this.nativeInput?.focus()}async checkValidity(){return this.internals?.checkValidity()??!0}async reportValidity(){return this.internals?.reportValidity()??!0}constructor(r){super(),e(this,r),this.lmvzChange=o(this,"lmvzChange",7),this.lmvzActivation=o(this,"lmvzActivation",7),r.$hostElement$["s-ei"]?this.internals=r.$hostElement$["s-ei"]:(this.internals=r.$hostElement$.attachInternals(),r.$hostElement$["s-ei"]=this.internals),this.addController(new a(this,{reValidateOnPropChanges:!0})),this.radioGroupController=new n(this),this.addController(this.radioGroupController)}componentWillLoad(){this.initialChecked=this.checked,this.internals.setFormValue?.(this.checked?this.value:null),super.componentWillLoad()}formAssociatedCallback(){this.internals.setFormValue?.(this.checked?this.value:null)}formResetCallback(){this._handlingFormReset=!0;try{this.checked=this.initialChecked}finally{this._handlingFormReset=!1}}formStateRestoreCallback(r){if("string"==typeof r){this._handlingFormReset=!0;try{this.checked=r===this.value}finally{this._handlingFormReset=!1}}}handleChange=r=>{this._handlingNativeChange=!0;try{this.checked=r.target.checked,this.lmvzChange.emit(this.checked),this.radioGroupController.select(this),this.lmvzActivation.emit()}finally{this._handlingNativeChange=!1}};handleKeydown(r){const{key:e}=r;if(!["ArrowDown","ArrowRight","ArrowUp","ArrowLeft","Home","End"].includes(e))return;r.preventDefault();const o=this.radioGroupController.sortedEnabled;if(0===o.length)return;const t=o.indexOf(this);if(-1===t)return;let i;i="ArrowDown"===e||"ArrowRight"===e?(t+1)%o.length:"ArrowUp"===e||"ArrowLeft"===e?(t-1+o.length)%o.length:"Home"===e?0:o.length-1;const a=o[i];a&&this.radioGroupController.setFocused(a)}render(){return t(i,{key:"9b8fbfe18376f9411f792630065dfd219f9ddb32"},t("input",{key:"24a0675eff854bbd751c07905db4be11e5353d11",type:"radio",id:this.radioId,name:this.name??void 0,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,autoFocus:this.autofocus,"aria-invalid":this.error?"true":void 0,"aria-describedby":this.helperId,ref:r=>this.nativeInput=r,onChange:this.handleChange}),t("span",{key:"f888c1f76f6f929609584d378dbe0974fd980f68",class:"circle","aria-hidden":"true"},this.checked&&t("span",{key:"57fbb1e7abdca10861cf8709d4300459e1f62e5c",class:"dot"})),t("span",{key:"1c845611162be86500e8475ac37412e2d3f2fd99",class:"content"},t("label",{key:"1399f4d34ff0e6d369cefc9f5d08208a4dee593f",htmlFor:this.radioId},this.label),t("span",{key:"1345435ff2f4773260ea3f73e943f043c2b88bdb","aria-live":"polite",class:"helper-text",id:this.helperId},this.helperText)))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}],value:[{handleValueChange:0}],label:[{handleLabelChange:0}]}}};h.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; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);    --radio-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    display: flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   position: absolute;   inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--radio-label-color);   cursor: pointer;   transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #e52a31); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}";export{h as lmvz_radio}

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-15T12:09:01",
+  "timestamp": "2026-06-22T12:04:47",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -93,6 +93,67 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/lmvz-action-list/lmvz-action-list.tsx",
+      "encapsulation": "scoped",
+      "tag": "lmvz-action-list",
+      "readme": "# lmvz-action-list\n\nA menu of actions. Renders an internal `<ul role=\"menu\">` and projects consumer-supplied interactive elements as menuitems.\n\n## Usage\n\nSlot `<lmvz-button>` or native `<button>` elements **directly** — no `<li>` wrapper. Dividers are slotted `<hr>`. Groups are `<div role=\"group\" aria-label=\"…\">` containing interactive children.\n\n```html\n<lmvz-action-list label=\"File actions\">\n  <lmvz-button>Open</lmvz-button>\n  <lmvz-button>Save</lmvz-button>\n  <hr />\n  <lmvz-button class=\"lmvz-action-list-item--danger\">Delete</lmvz-button>\n</lmvz-action-list>\n```\n\n## API\n\n### Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `label` | `string \\| undefined` | `undefined` | Accessible name for the menu. Reflected as `aria-label` on the internal `<ul role=\"menu\">`. Optional — consumers may provide context via surrounding markup. |\n\n### Slots\n\n| Slot | Description |\n|---|---|\n| *(default)* | Accepts `<lmvz-button>` or native `<button>` (menuitems), `<hr>` (separators), and `<div role=\"group\" aria-label=\"…\">` (groups containing menuitems). **No `<li>` wrapper.** |\n\n### CSS Classes\n\n| Class | Applied to | Description |\n|---|---|---|\n| `lmvz-action-list-item--danger` | Slotted `<lmvz-button>` or `<button>` | Applies danger/destructive styling (status-danger tokens). Stable public contract. |\n\n### Events\n\nNone. Activation is handled by the consumer's `<lmvz-button>` or `<button>`.\n\n### Groups\n\nWrap related menuitems in a `<div role=\"group\" aria-label=\"Group name\">`. A dev-time warning is emitted when a group has no accessible name.\n\n```html\n<lmvz-action-list>\n  <div role=\"group\" aria-label=\"Edit\">\n    <lmvz-button>Cut</lmvz-button>\n    <lmvz-button>Copy</lmvz-button>\n  </div>\n  <hr />\n  <lmvz-button>Paste</lmvz-button>\n</lmvz-action-list>\n```\n\n### Keyboard navigation\n\nArrow keys (↑/↓) and Home/End move focus between menuitems using roving tabindex.\n\n**Known limitation:** Tab-exit, Escape-to-close, and typeahead navigation are not implemented in this standalone action list. These belong to a future popup/menu-button owner.\n\n### Deferred / Out of scope\n\n- Disabled item state\n- Leading or trailing icon slot per item\n",
+      "docs": "A keyboard-navigable action list component implementing the WAI-ARIA `menu` pattern.\n\nRenders a styled `<ul role=\"menu\">` that accepts `<lmvz-button>`, native `<button>`,\n`<hr>` dividers, and `<div role=\"group\">` groups via the default slot.\nArrow keys move focus across interactive items; Home/End jump to first/last.\n\n**Disabled items:** Items with the native `disabled` attribute (or `disabled` prop on\n`<lmvz-button>`) are silently skipped during arrow-key navigation. This matches the\nbehaviour of native `<select>` and keeps the interaction model simple.\nTrade-off: screen reader users navigating by arrow key cannot discover disabled items\nor read their labels. If surfacing disabled items to all users is required, use\n`aria-disabled=\"true\"` on the item instead and handle activation prevention in the\nclick/activation handler — the controller's `isFocusableElement` callback can then be\nused to override the skip logic.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - `<lmvz-button>`, native `<button>`, `<hr>` dividers, or\n`<div role=\"group\" aria-label=\"…\">` groups containing buttons."
+        },
+        {
+          "name": "example",
+          "text": "```html\n<lmvz-action-list label=\"Actions\">\n  <lmvz-button>Edit</lmvz-button>\n  <hr />\n  <lmvz-button class=\"lmvz-action-list-item--danger\">Delete</lmvz-button>\n</lmvz-action-list>\n```"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "label",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Accessible label for the menu, reflected as `aria-label` on the host Element.\nWhen absent, `aria-label` is not rendered on the host.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "`<lmvz-button>`, native `<button>`, `<hr>` dividers, or\n`<div role=\"group\" aria-label=\"…\">` groups containing buttons."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/lmvz-button/lmvz-button.tsx",
       "encapsulation": "shadow",
@@ -107,6 +168,32 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "buttonRole",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "button-role",
+          "reflectToAttr": false,
+          "docs": "ARIA role applied to the inner `<button>` element.\nWhen set, the host element receives `role=\"presentation\"` so that AT\nsees only one interactive element with the correct role.\nUse `\"menuitem\"` when the button is a child of a `role=\"menu\"` container.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -291,10 +378,6 @@
           "reflectToAttr": true,
           "docs": "",
           "docsTags": [
-            {
-              "name": "readonly",
-              "text": ""
-            },
             {
               "name": "default",
               "text": "0"
@@ -308,7 +391,7 @@
           ],
           "optional": false,
           "required": false,
-          "getter": true,
+          "getter": false,
           "setter": false
         },
         {
@@ -473,8 +556,8 @@
       "filePath": "src/components/lmvz-button-group/lmvz-button-group.tsx",
       "encapsulation": "shadow",
       "tag": "lmvz-button-group",
-      "readme": "# lmvz-button-group\n\nInternal component used by `lmvz-modal` to manage its actions slot. Auto-assigns `variant` attributes to slotted buttons by order (last → primary, second-to-last → secondary, earlier → tertiary) when no explicit variant is set. Exposes `primaryEnabledAction` (first non-disabled button with variant primary, falls back to first enabled) and `hasActions` (true if any visible, non-disabled button is present).\n",
-      "docs": "Internal component used by `lmvz-modal` to manage its actions slot. Auto-assigns `variant` attributes to slotted buttons by order (last → primary, second-to-last → secondary, earlier → tertiary) when no explicit variant is set. Exposes `primaryEnabledAction` (first non-disabled button with variant primary, falls back to first enabled) and `hasActions` (true if any visible, non-disabled button is present).",
+      "readme": "# lmvz-button-group\n\nInternal component used by `lmvz-modal` to manage its actions slot. Auto-assigns `variant` attributes to slotted buttons by order (first → primary, second → secondary, later → tertiary) when no explicit variant is set. Exposes `primaryEnabledAction` (first non-disabled button with variant primary, falls back to first enabled) and `hasActions` (true if any visible, non-disabled button is present).\n\n## Props\n\n### `stacked`\n\nType: `boolean` | Default: `false`\n\nRenders buttons in a vertical stack (full-width column) instead of horizontal row. When `stacked` is true, buttons stretch to full width and are arranged vertically with the primary button on top.\n\n## Authoring Conventions\n\n**Primary button placement:** The primary button must always be the first child in the DOM, regardless of horizontal or stacked layout. This ensures consistent focus order and authoring predictability. In the default horizontal layout, the primary action renders visually on the right because the component uses `row-reverse` flex direction internally.\n\n**Stacked layout limits:** Design guidelines recommend a maximum of 2 buttons in stacked groups. Stacked groups with more than 2 buttons may exceed typical mobile viewport heights.\n\n**Icon restrictions in stacked mode:** Do not use buttons with leading icons in stacked button groups. Leading icons are sized for horizontal layouts and create misaligned spacing in vertical stacks. Use plain labels or trailing icons if necessary.\n",
+      "docs": "Internal component used by `lmvz-modal` to manage its actions slot. Auto-assigns `variant` attributes to slotted buttons by order (first → primary, second → secondary, later → tertiary) when no explicit variant is set. Exposes `primaryEnabledAction` (first non-disabled button with variant primary, falls back to first enabled) and `hasActions` (true if any visible, non-disabled button is present).",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -540,6 +623,35 @@
           "required": false,
           "getter": true,
           "setter": false
+        },
+        {
+          "name": "stacked",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "stacked",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -1144,8 +1256,8 @@
             "references": {
               "Chip": {
                 "location": "import",
-                "path": "../../api/ds.constants.js",
-                "id": "src/api/ds.constants.ts::Chip",
+                "path": "../../api/ds.types.js",
+                "id": "src/api/ds.types.d.ts::Chip",
                 "referenceLocation": "Chip"
               }
             }
@@ -1185,8 +1297,8 @@
             "references": {
               "Chip": {
                 "location": "import",
-                "path": "../../api/ds.constants.js",
-                "id": "src/api/ds.constants.ts::Chip",
+                "path": "../../api/ds.types.js",
+                "id": "src/api/ds.types.d.ts::Chip",
                 "referenceLocation": "Chip"
               }
             }
@@ -1586,12 +1698,16 @@
       "parts": [],
       "states": [],
       "dependents": [
+        "lmvz-link",
         "lmvz-message",
         "lmvz-modal",
         "lmvz-snackbar"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "lmvz-link": [
+          "lmvz-icon"
+        ],
         "lmvz-message": [
           "lmvz-icon"
         ],
@@ -5683,6 +5799,207 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/lmvz-link/lmvz-link.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-link",
+      "readme": "# lmvz-link\n\nThe link renders a semantically correct native anchor element with a trailing icon indicating the navigation type.\n\n## Visual Types\n\nThe component supports two visual types controlled by the `type` prop:\n\n- **`internal`** — renders an arrow-right icon, indicating navigation within the same site or application\n- **`external`** — renders an external icon, indicating navigation to an external destination\n\n## Label and Accessibility\n\nThe default slot accepts inline label text for the link. When the link opens in a new tab (`target=\"_blank\"`), a visually-hidden external label is automatically appended to improve accessible announcements. The text of this label is controlled by the `externalLabel` prop (default: `\"(öffnet in neuem Tab)\"`) and can be customized for localization.\n",
+      "docs": "The link renders a native anchor element with an icon indicating navigation type.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Inline label text for the link."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "externalLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "external-label",
+          "reflectToAttr": false,
+          "docs": "Visually-hidden text appended inside the anchor when `target=\"_blank\"`.\nProvides an accessible cue for screen reader users.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'(öffnet in neuem Tab)'"
+            }
+          ],
+          "default": "'(öffnet in neuem Tab)'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "href",
+          "reflectToAttr": true,
+          "docs": "The URL the link points to. Mirrors the native anchor `href` attribute.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "rel",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "rel",
+          "reflectToAttr": false,
+          "docs": "Relationship of the linked URL. When `target=\"_blank\"`, `noopener` and\n`noreferrer` are automatically added if not already present.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "target",
+          "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+          "complexType": {
+            "original": "'_self' | '_blank' | '_parent' | '_top'",
+            "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "target",
+          "reflectToAttr": true,
+          "docs": "Where to open the linked document.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "_blank",
+              "type": "string"
+            },
+            {
+              "value": "_parent",
+              "type": "string"
+            },
+            {
+              "value": "_self",
+              "type": "string"
+            },
+            {
+              "value": "_top",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"external\" | \"internal\"",
+          "complexType": {
+            "original": "Link.Type",
+            "resolved": "\"external\" | \"internal\"",
+            "references": {
+              "Link": {
+                "location": "import",
+                "path": "../../api/ds.types.js",
+                "id": "src/api/ds.types.d.ts::Link",
+                "referenceLocation": "Link"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "type",
+          "reflectToAttr": true,
+          "docs": "Navigation type. Drives the icon shown after the label text.\n- `internal` → arrow-right icon\n- `external` → external icon\nInvalid values are normalized to `internal`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'internal'"
+            }
+          ],
+          "default": "'internal'",
+          "values": [
+            {
+              "value": "external",
+              "type": "string"
+            },
+            {
+              "value": "internal",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Inline label text for the link."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "lmvz-icon"
+      ],
+      "dependencyGraph": {
+        "lmvz-link": [
+          "lmvz-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/lmvz-menuitem/lmvz-menuitem.tsx",
       "encapsulation": "scoped",
@@ -7988,10 +8305,10 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
-    "src/api/ds.constants.ts::Chip": {
+    "src/api/ds.types.d.ts::Chip": {
       "declaration": "any",
       "docstring": "",
-      "path": "src/api/ds.constants.ts"
+      "path": "src/api/ds.types.d.ts"
     },
     "../../lib/ts/dist/validation/SVGString.d.ts::SVGString": {
       "declaration": "export type SVGString = string & Brand.Brand<'SVG'>;",
@@ -8008,6 +8325,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/ds.types.d.ts::Link": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/ds.types.d.ts"
+    },
     "src/api/index.d.ts::Message": {
       "declaration": "any",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.29.0",
+  "version": "0.31.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -56,6 +56,10 @@
       "types": "./components/lmvz-icon.d.ts",
       "import": "./components/lmvz-icon.js"
     },
+    "./lmvz-link": {
+      "types": "./components/lmvz-link.d.ts",
+      "import": "./components/lmvz-link.js"
+    },
     "./lmvz-input": {
       "types": "./components/lmvz-input.d.ts",
       "import": "./components/lmvz-input.js"
@@ -107,6 +111,10 @@
     "./lmvz-spinner": {
       "import": "./components/lmvz-spinner.js",
       "types": "./components/lmvz-spinner.d.ts"
+    },
+    "./lmvz-action-list": {
+      "import": "./components/lmvz-action-list.js",
+      "types": "./components/lmvz-action-list.d.ts"
     }
   },
   "main": "./index.cjs.js",

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

@@ -9,44 +9,8 @@ export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
 export declare const iconWeights: readonly ["thin", "medium", "bold"];
 export declare const chipTypes: readonly ["active", "warning", "success", "error", "neutral"];
 export declare const chipSizes: readonly ["default", "small"];
-export declare namespace LmvzDS {
-    type Variant = (typeof variants)[number];
-    type Size = (typeof sizes)[number];
-}
-export declare namespace Typography {
-    type Size = (typeof textSizes)[number];
-}
-export declare namespace Button {
-    type Scale = (typeof scaleValues)[number];
-    type Variant = LmvzDS.Variant;
-}
-export declare namespace Chip {
-    type Type = (typeof chipTypes)[number];
-    type Size = (typeof chipSizes)[number];
-}
-export declare namespace Icon {
-    type Size = (typeof iconSizes)[number];
-    type IconWeight = (typeof iconWeights)[number];
-}
-export declare namespace Input {
-    type Type = (typeof inputTypes)[number];
-    type Size = (typeof inputSizes)[number];
-    type Autocomplete = HTMLInputElement['autocomplete'];
-    type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-}
-export declare namespace Select {
-    type Size = (typeof selectSizes)[number];
-}
+export declare const linkTypes: readonly ["internal", "external"];
 export declare const messageTypes: readonly ["neutral", "warning"];
-export declare namespace Message {
-    type Type = (typeof messageTypes)[number];
-}
 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 namespace Snackbar {
-    type Status = (typeof snackbarStatuses)[number];
-    type Priority = (typeof snackbarPriorities)[number];
-    type DismissReason = (typeof snackbarDismissReasons)[number];
-}

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

@@ -1,4 +1,71 @@
-export type * from './ds.constants';
+import type {
+  chipSizes,
+  chipTypes,
+  iconSizes,
+  iconWeights,
+  inputSizes,
+  inputTypes,
+  linkTypes,
+  messageTypes,
+  scaleValues,
+  selectSizes,
+  sizes,
+  snackbarDismissReasons,
+  snackbarPriorities,
+  snackbarStatuses,
+  textSizes,
+  variants,
+} from './ds.constants';
+
+export namespace LmvzDS {
+  export type Variant = (typeof variants)[number];
+  export type Size = (typeof sizes)[number];
+}
+export namespace Typography {
+  export type Size = (typeof textSizes)[number];
+}
+export namespace Button {
+  export type Scale = (typeof scaleValues)[number];
+  export type Variant = LmvzDS.Variant;
+}
+export namespace Chip {
+  export type Type = (typeof chipTypes)[number];
+  export type Size = (typeof chipSizes)[number];
+}
+export namespace Link {
+  export type Type = (typeof linkTypes)[number];
+}
+export namespace Icon {
+  export type Size = (typeof iconSizes)[number];
+  export type IconWeight = (typeof iconWeights)[number];
+}
+export namespace Input {
+  export type Type = (typeof inputTypes)[number];
+  export type Size = (typeof inputSizes)[number];
+
+  export type Autocomplete = HTMLInputElement['autocomplete'];
+  /**
+   * Inputmode attribute for mobile keyboards
+   */
+  export type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /**
+   * Autocapitalize attribute for mobile keyboards
+   */
+  export type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+}
+export namespace Select {
+  export type Size = (typeof selectSizes)[number];
+}
+
+export namespace Message {
+  export type Type = (typeof messageTypes)[number];
+}
+
+export namespace Snackbar {
+  export type Status = (typeof snackbarStatuses)[number];
+  export type Priority = (typeof snackbarPriorities)[number];
+  export type DismissReason = (typeof snackbarDismissReasons)[number];
+}
 
 export type Attributes = { [key: string]: unknown };
 export type FormRef = string | HTMLFormElement | undefined;