@lmvz-ds/components 0.39.0 → 0.41.0

package/lmvz-components/{p-93b781ca.entry.js → p-fd29789f.entry.js}

@@ -1 +1 @@
-import{g as M,r as N,h as e,H as I}from"./p-DVab4vzV.js";import{A as j}from"./p-Wi9d2-w9.js";import{D}from"./p-BlkpdeQI.js";import{R as g}from"./p-CICeIanv.js";export{lmvz_menuitem}from"./p-8ba6ec19.entry.js";import"./p-BDonpCG8.js";import"./p-BA3wizqg.js";import"./p-DIyiticz.js";import"./p-CPSyM_e-.js";const a=class extends g{get el(){return M(this)}get validationEl(){return this.el}primarySlot;secondarySlot;secondaryNav;keyboardNavigationController=new D(this,{orientation:"both",manageTabIndex:!1,enableHomeAndEnd:!1});get primaryMenuitems(){return this.primarySlot?.assignedElements({flatten:!1})||[]}get secondaryMenuitems(){return this.secondarySlot?.assignedElements({flatten:!0})||[]}get role(){return"banner"}lmvzActiveNav;get secondarySlotName(){return`connect-nav-${this.lmvzActiveNav}`}constructor(M){super(),N(this,M),this.addController(new j(this,{reValidateOnPropChanges:!0})),this.addController(this.keyboardNavigationController)}handleActiveNavChange(){this.updateElementsActive()}async initFocus(){this.keyboardNavigationController.initFocus()}componentDidLoad(){this.primarySlot?.addEventListener("slotchange",this.handlePrimaryNavItemsChange.bind(this)),this.handlePrimaryNavItemsChange(),this.secondarySlot?.addEventListener("slotchange",this.handleSecondaryNavItemsChange.bind(this)),super.componentDidLoad()}handlePrimaryNavItemsChange(){const M=this.primaryMenuitems;M.length?(M.forEach((M=>{M.setAttribute("aria-haspopup","true"),M.setAttribute("aria-controls","nav-secondary")})),this.updateElementsActive(),this.updateKeyboardNavSubjects()):console.warn("Primary slot has no assigned elements. Please add navigation items to the primary slot.")}handleSecondaryNavItemsChange(){this.secondaryMenuitems.length&&this.updateKeyboardNavSubjects()}updateKeyboardNavSubjects(){this.keyboardNavigationController.updateElements([...this.primaryMenuitems,...this.secondaryMenuitems])}updateElementsActive(){const M=this.primaryMenuitems;if(!M.length)return;let N="";M.forEach((M=>{const e=M.id===this.lmvzActiveNav;e&&(N=M.textContent||M.id),M.setAttribute("aria-expanded",e?"true":"false")})),N&&this.secondaryNav?.setAttribute("aria-label",`Untermenü für ${N}`)}delegateFocus(){const M=this.primaryMenuitems[0];M&&M.focus()}render(){return e(I,{key:"a72c860d7f67c9631c462c0abcc798bb142dfc55",onFocus:this.delegateFocus.bind(this)},e("div",{key:"4ed87264d201c513bce284536793692424ed864b",class:"brand"},e("slot",{key:"9291d81d7f8a630007b8ad827a16ebea7222b9d2",name:"brand"},e("img",{key:"77da99409f40d93e4a2d190cbb2a8857f1e81c36",id:"fallback-logo-lmvz",src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=",alt:"Lehrmittelverlag Zürich"}))),e("nav",{key:"3c40c04bb23524ae58e391a54b044e225a25ad07","aria-label":"Hauptnavigation"},e("div",{key:"207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc",role:"menubar",class:"primary-menubar"},e("slot",{key:"8ae67a57ac7b6bb6083c469a857542e31b0c2294",name:"nav-primary",ref:M=>this.primarySlot=M}),e("div",{key:"86b9696c95e9ae0e3843fa1607f268dcae8cb279",role:"menu",id:"nav-secondary",class:"secondary-menubar",hidden:!this.lmvzActiveNav,ref:M=>this.secondaryNav=M},e("slot",{key:"67966de33555dc26ac2dc51fc8a85d456a2e8e85",name:this.secondarySlotName,ref:M=>this.secondarySlot=M})))),e("div",{key:"bfb2831144cee723c3182d96d64f44be1cc5a78b",class:"actions"},e("slot",{key:"6956b81fa8ed6c446edc5f7d9708462b39bc8cbb",name:"actions"})))}static get watchers(){return{lmvzActiveNav:[{handleActiveNavChange:0}]}}};a.style=":host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-28-8, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-16-8, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}";export{a as lmvz_header}
+import{g as M,r as N,h as e,H as I}from"./p-DVab4vzV.js";import{A as j}from"./p-Wi9d2-w9.js";import{D}from"./p-BlkpdeQI.js";import{R as g}from"./p-CICeIanv.js";export{lmvz_menuitem}from"./p-b9d29e90.entry.js";import"./p-BDonpCG8.js";import"./p-BA3wizqg.js";import"./p-DIyiticz.js";import"./p-CPSyM_e-.js";const a=class extends g{get el(){return M(this)}get validationEl(){return this.el}primarySlot;secondarySlot;secondaryNav;keyboardNavigationController=new D(this,{orientation:"both",manageTabIndex:!1,enableHomeAndEnd:!1});get primaryMenuitems(){return this.primarySlot?.assignedElements({flatten:!1})||[]}get secondaryMenuitems(){return this.secondarySlot?.assignedElements({flatten:!0})||[]}get role(){return"banner"}lmvzActiveNav;get secondarySlotName(){return`connect-nav-${this.lmvzActiveNav}`}constructor(M){super(),N(this,M),this.addController(new j(this,{reValidateOnPropChanges:!0})),this.addController(this.keyboardNavigationController)}handleActiveNavChange(){this.updateElementsActive()}async initFocus(){this.keyboardNavigationController.initFocus()}componentDidLoad(){this.primarySlot?.addEventListener("slotchange",this.handlePrimaryNavItemsChange.bind(this)),this.handlePrimaryNavItemsChange(),this.secondarySlot?.addEventListener("slotchange",this.handleSecondaryNavItemsChange.bind(this)),super.componentDidLoad()}handlePrimaryNavItemsChange(){const M=this.primaryMenuitems;M.length?(M.forEach((M=>{M.setAttribute("aria-haspopup","true"),M.setAttribute("aria-controls","nav-secondary")})),this.updateElementsActive(),this.updateKeyboardNavSubjects()):console.warn("Primary slot has no assigned elements. Please add navigation items to the primary slot.")}handleSecondaryNavItemsChange(){this.secondaryMenuitems.length&&this.updateKeyboardNavSubjects()}updateKeyboardNavSubjects(){this.keyboardNavigationController.updateElements([...this.primaryMenuitems,...this.secondaryMenuitems])}updateElementsActive(){const M=this.primaryMenuitems;if(!M.length)return;let N="";M.forEach((M=>{const e=M.id===this.lmvzActiveNav;e&&(N=M.textContent||M.id),M.setAttribute("aria-expanded",e?"true":"false")})),N&&this.secondaryNav?.setAttribute("aria-label",`Untermenü für ${N}`)}delegateFocus(){const M=this.primaryMenuitems[0];M&&M.focus()}render(){return e(I,{key:"427f1fe61ea8809a17dc08518c3dca7218cd2c9b",onFocus:this.delegateFocus.bind(this)},e("div",{key:"b95c5d269c18001592b4ea853b9c945eeedfda07",class:"brand"},e("slot",{key:"d856c174220f6e17b1aa977745bd057f7ca12625",name:"brand"},e("img",{key:"554896aadccb818f06d01ad88f9be96a1afa615a",id:"fallback-logo-lmvz",src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=",alt:"Lehrmittelverlag Zürich"}))),e("nav",{key:"414d208fe60eb4dd0c1400727b4198b81fc4a041","aria-label":"Hauptnavigation"},e("div",{key:"608ea0c8ddcfef024505505ae7f91f644bfc1298",role:"menubar",class:"primary-menubar"},e("slot",{key:"b5de644c07b4ef809c7afa377bed5e48356fc93a",name:"nav-primary",ref:M=>this.primarySlot=M}),e("div",{key:"a6e308da89df8b705a0d03218778bc36fb0cbaf2",role:"menu",id:"nav-secondary",class:"secondary-menubar",hidden:!this.lmvzActiveNav,ref:M=>this.secondaryNav=M},e("slot",{key:"cf78a68329eadb96ad656ed81d8b3c72db582fc9",name:this.secondarySlotName,ref:M=>this.secondarySlot=M})))),e("div",{key:"f7a00431635969cd0f3b29e52d002ec67c8dae04",class:"actions"},e("slot",{key:"6ed3b3d6ef85646742f0a2cf5267464f06e20a05",name:"actions"})))}static get watchers(){return{lmvzActiveNav:[{handleActiveNavChange:0}]}}};a.style=":host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-28-8, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-16-8, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}";export{a as lmvz_header}

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-11T13:11:51",
+  "timestamp": "2026-08-20T18:00:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -568,6 +568,7 @@
       ],
       "states": [],
       "dependents": [
+        "lmvz-card",
         "lmvz-datepicker",
         "lmvz-message",
         "lmvz-modal",
@@ -575,6 +576,9 @@
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "lmvz-card": [
+          "lmvz-button"
+        ],
         "lmvz-datepicker": [
           "lmvz-button"
         ],
@@ -710,38 +714,50 @@
     },
     {
       "filePath": "src/components/lmvz-card/lmvz-card.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "lmvz-card",
-      "readme": "# lmvz-card\n\n\n",
-      "docs": "",
-      "docsTags": [],
+      "readme": "# lmvz-card\n\nA card composes an image, title, description, an optional chip, and an optional single action into a self-contained content unit. Cards are available in two sizes: `large` and `small`.\n\n## Props\n\n- **`size`** — Size variant (`'large'` or `'small'`, default: `'large'`). Invalid values are normalized to `'large'` at runtime.\n- **`cardTitle?`** — Card title text. Rendered as the fallback `<h3>` for the `card-title` slot. Ignored when a heading is slotted into `card-title`. Exactly one of `cardTitle` or a slotted heading should be supplied.\n- **`description?`** — Optional description text.\n- **`imageUrl?`** — Optional image URL. Falls back to a bundled placeholder graphic when unset.\n- **`imageAlt?`** — Accessible alt text for the image (default: `''`). Use an empty string for decorative images.\n- **`actionLabel?`** — Label for the card's single action button. The action row renders only when this is a non-empty string.\n\n## Events\n\n- **`lmvzCardAction`** — Emitted once per activation of the action button.\n\n## Slots\n\n- **`chip`** — Optional slot for a status/metadata chip (e.g., `<lmvz-chip>`), rendered in the content block. Visibility and spacing are handled automatically based on whether content is present.\n\n- **`card-title`** — Optional slot to provide a heading element (`h2`, `h3`, `h4`, or `h5`) for the card title, allowing you to control the heading level for a correct document outline.\n  - **Purpose:** When no heading is slotted, the `cardTitle` prop is rendered as a fallback `<h3>`. The slot lets you override the heading level so the card fits correctly into your page's document outline structure.\n  - **Supported range:** `h2` through `h5`. This range is **documented guidance only and not technically enforced by any DOM, CSS, or type mechanism** — any element can technically be slotted. A dev-time console warning (when ARIA validation is enabled) flags non-heading elements, out-of-range headings (`h1` or `h6`), or when neither a heading nor a `cardTitle` prop is supplied.\n  - **Mutual exclusivity:** Exactly one of `cardTitle` or a slotted heading must be supplied. Slotting a heading and setting `cardTitle` at the same time is not an error, but only the slotted heading will render. The two mechanisms are mutually exclusive by platform design (slot fallback content only renders when no content is assigned to the slot).\n  - **Styling:** The card applies its own size-branched title typography to the slotted heading regardless of which heading level you choose. Slotting a heading replaces the default `<h3>` entirely. You control the heading level for your document outline; the card controls the typography.\n\n## Breaking Changes\n\nThis version of `lmvz-card` is a from-scratch implementation with no migration path, deprecation alias, or compatibility shim:\n\n- **Removed props:** `primaryActionLabel`\n- **Removed events:** `primaryAction`\n- **Removed UI:** The overflow/kebab menu button\n\nThere is no direct successor for these removed APIs. The new card ships with a single secondary-styled action button whose label is supplied via `actionLabel` and whose activation emits `lmvzCardAction`. No old-to-new mapping exists.\n\n## Deferred Features\n\nA favorite/bookmark icon-button affordance was evaluated during design (visible in the source Figma frame) but intentionally deferred out of this implementation, pending a future, separately-scoped checklist. It is not available in this version.\n",
+      "docs": "A card composes an image, title, description, an optional chip, and an optional single action into a self-contained content unit.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "chip - Optional slot for a status/metadata chip (e.g. `<lmvz-chip>`), rendered in the content block. Visibility and spacing are handled automatically based on whether content is present."
+        },
+        {
+          "name": "slot",
+          "text": "card-title - Optional slot to provide a heading element (`<h2>`-`<h5>`) for the card title, allowing consumers to control the heading level for a correct document outline. If nothing is slotted, the `cardTitle` prop is rendered as the fallback `<h3>`. Exactly one of the two mechanisms should be used."
+        }
+      ],
       "usage": {},
       "props": [
         {
-          "name": "cardTitle",
-          "type": "string",
+          "name": "actionLabel",
+          "type": "string | undefined",
           "complexType": {
             "original": "string",
-            "resolved": "string",
+            "resolved": "string | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "card-title",
+          "attr": "action-label",
           "reflectToAttr": false,
-          "docs": "Card title (required)",
+          "docs": "Label for the card's single action button. The action row renders only when this is a non-empty string.",
           "docsTags": [],
           "values": [
             {
               "type": "string"
+            },
+            {
+              "type": "undefined"
             }
           ],
-          "optional": false,
-          "required": true,
+          "optional": true,
+          "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "description",
+          "name": "cardTitle",
           "type": "string | undefined",
           "complexType": {
             "original": "string",
@@ -749,9 +765,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "description",
+          "attr": "card-title",
           "reflectToAttr": false,
-          "docs": "Optional description",
+          "docs": "Card title text, rendered as the fallback `<h3>` for the `card-title` slot.\nIgnored when a heading is slotted into `card-title`. One of `cardTitle` or a slotted heading should be supplied.",
           "docsTags": [],
           "values": [
             {
@@ -767,7 +783,7 @@
           "setter": false
         },
         {
-          "name": "imageUrl",
+          "name": "description",
           "type": "string | undefined",
           "complexType": {
             "original": "string",
@@ -775,9 +791,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "image-url",
+          "attr": "description",
           "reflectToAttr": false,
-          "docs": "Optional image URL; placeholder used if omitted",
+          "docs": "Optional description text.",
           "docsTags": [],
           "values": [
             {
@@ -793,7 +809,7 @@
           "setter": false
         },
         {
-          "name": "primaryActionLabel",
+          "name": "imageAlt",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -801,9 +817,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "primary-action-label",
+          "attr": "image-alt",
           "reflectToAttr": false,
-          "docs": "Primary action button label",
+          "docs": "Accessible alt text for the image.",
           "docsTags": [
             {
               "name": "default",
@@ -820,38 +836,115 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "imageUrl",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "image-url",
+          "reflectToAttr": false,
+          "docs": "Optional image URL; falls back to a bundled placeholder graphic when unset.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"small\"",
+          "complexType": {
+            "original": "Card.Size",
+            "resolved": "\"large\" | \"small\"",
+            "references": {
+              "Card": {
+                "location": "import",
+                "path": "../../api/ds.types",
+                "id": "src/api/ds.types.d.ts::Card",
+                "referenceLocation": "Card"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "Size variant of the card.\nInvalid values are normalized to `large` at runtime.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'large'"
+            }
+          ],
+          "default": "'large'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
       "events": [
         {
-          "event": "primaryAction",
-          "detail": "PointerEvent",
+          "event": "lmvzCardAction",
+          "detail": "void",
           "bubbles": true,
           "complexType": {
-            "original": "PointerEvent",
-            "resolved": "PointerEvent",
-            "references": {
-              "PointerEvent": {
-                "location": "global",
-                "id": "global::PointerEvent"
-              }
-            }
+            "original": "void",
+            "resolved": "void",
+            "references": {}
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when primary button is clicked",
+          "docs": "Emitted once per activation of the action button.",
           "docsTags": []
         }
       ],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "card-title",
+          "docs": "Optional slot to provide a heading element (`<h2>`-`<h5>`) for the card title, allowing consumers to control the heading level for a correct document outline. If nothing is slotted, the `cardTitle` prop is rendered as the fallback `<h3>`. Exactly one of the two mechanisms should be used."
+        },
+        {
+          "name": "chip",
+          "docs": "Optional slot for a status/metadata chip (e.g. `<lmvz-chip>`), rendered in the content block. Visibility and spacing are handled automatically based on whether content is present."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "lmvz-button"
+      ],
+      "dependencyGraph": {
+        "lmvz-card": [
+          "lmvz-button"
+        ]
+      }
     },
     {
       "filePath": "src/components/lmvz-checkbox/lmvz-checkbox.tsx",
@@ -9100,7 +9193,7 @@
       "filePath": "src/components/lmvz-tab/lmvz-tab.tsx",
       "encapsulation": "shadow",
       "tag": "lmvz-tab",
-      "readme": "# lmvz-tab\n\nThe `lmvz-tab` is the individual tab trigger primitive. It must be used as a direct child of `lmvz-tabs`, which owns selection state, ARIA semantics (`tablist`/`tab`/`tabpanel`), keyboard management, and roving `tabindex`.\n\n## Usage\n\n```html\n<lmvz-tabs value=\"home\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n</lmvz-tabs>\n```\n\n### With media slot (icon above label)\n\n```html\n<lmvz-tab value=\"home\">\n  <lmvz-icon slot=\"media\" name=\"home\" aria-hidden=\"true\"></lmvz-icon>\n  Home\n</lmvz-tab>\n```\n\n> **Icon-only tabs**: When no visible label is provided, supply an `aria-label` on the `lmvz-tab` element itself to maintain accessibility.\n\n## Visual states\n\n| State    | Description                                                                 |\n| -------- | --------------------------------------------------------------------------- |\n| Default  | Neutral interactive surface; hidden selection indicator.                    |\n| Selected | Active-tinted container; active-colored text; full-width 4 px gradient bar at bottom (horizontal) or inline-start (vertical). |\n| Disabled | Reduced opacity; non-interactive. Set by consumer via `disabled` attribute. |\n| Focus    | DS-style outline ring, distinct from the selection indicator.               |\n\n## Orientation\n\nThe `vertical` attribute is set automatically by `lmvz-tabs` when `orientation=\"vertical\"`. When vertical, the selection indicator bar moves from the bottom edge to the inline-start edge of the button.\n",
+      "readme": "# lmvz-tab\n\nThe `lmvz-tab` is the individual tab trigger primitive. It must be used as a direct child of `lmvz-tabs`, which owns selection state, ARIA semantics (`tablist`/`tab`/`tabpanel`), keyboard management, and roving `tabindex`.\n\n## Usage\n\n```html\n<lmvz-tabs value=\"home\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n</lmvz-tabs>\n```\n\n### Linking to a panel by ID\n\nUse the `panel` attribute to explicitly link a tab to a panel by `id`. This is useful when DOM order does not match logical tab/panel pairing.\n\n```html\n<lmvz-tabs value=\"home\">\n  <!-- Tabs in DOM order: home, profile, settings -->\n  <lmvz-tab value=\"home\" panel=\"home-content\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\" panel=\"profile-content\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" panel=\"settings-content\" disabled>Settings</lmvz-tab>\n\n  <!-- Panels in arbitrary order: profile, home, settings -->\n  <div slot=\"panels\" id=\"profile-content\" role=\"tabpanel\">Profile content</div>\n  <div slot=\"panels\" id=\"home-content\" role=\"tabpanel\">Home content</div>\n  <div slot=\"panels\" id=\"settings-content\" role=\"tabpanel\">Settings content</div>\n</lmvz-tabs>\n```\n\nWhen `panel` is omitted, `lmvz-tabs` falls back to positional pairing: the first tab pairs with the first panel, the second tab with the second panel, and so on.\n\n### With media slot (icon above label)\n\n```html\n<lmvz-tab value=\"home\">\n  <lmvz-icon slot=\"media\" name=\"home\" aria-hidden=\"true\"></lmvz-icon>\n  Home\n</lmvz-tab>\n```\n\n> **Icon-only tabs**: When no visible label is provided, supply an `aria-label` on the `lmvz-tab` element itself to maintain accessibility.\n\n## Visual states\n\n| State    | Description                                                                 |\n| -------- | --------------------------------------------------------------------------- |\n| Default  | Neutral interactive surface; hidden selection indicator.                    |\n| Selected | Active-tinted container; active-colored text; full-width 4 px gradient bar at bottom (horizontal) or inline-start (vertical). |\n| Disabled | Reduced opacity; non-interactive. Set by consumer via `disabled` attribute. |\n| Focus    | DS-style outline ring, distinct from the selection indicator.               |\n\n## Orientation\n\nThe `vertical` attribute is set automatically by `lmvz-tabs` when `orientation=\"vertical\"`. When vertical, the selection indicator bar moves from the bottom edge to the inline-start edge of the button.\n",
       "docs": "The tab trigger primitive. Must be used as a direct child of `lmvz-tabs`.\n\nSelection state, ARIA semantics (tablist/tab/tabpanel), keyboard management,\nand roving tabindex are all owned by the parent `lmvz-tabs` component.",
       "docsTags": [
         {
@@ -9151,6 +9244,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "panel",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "panel",
+          "reflectToAttr": true,
+          "docs": "The `id` of the target `lmvz-tab-panel` this tab controls.\nWhen omitted, pairing falls back to DOM position.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "selected",
           "type": "boolean",
@@ -9202,35 +9321,6 @@
           "required": true,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "vertical",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "vertical",
-          "reflectToAttr": true,
-          "docs": "Vertical orientation context.\nSet by the parent `lmvz-tabs` when `orientation=\"vertical\"` — do not set manually.\nWhen true the selection indicator moves to the inline-start edge.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "false"
-            }
-          ],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [],
@@ -9266,8 +9356,8 @@
       "filePath": "src/components/lmvz-tabs/lmvz-tabs.tsx",
       "encapsulation": "shadow",
       "tag": "lmvz-tabs",
-      "readme": "# lmvz-tabs\n\n`lmvz-tabs` is the WAI-ARIA Tabs pattern owner. It renders a `tablist` containing `lmvz-tab` trigger children and links them to consumer-authored panel elements via `aria-controls` / `aria-labelledby`. Selection state, keyboard management (roving `tabindex`, directional focus, manual activation), disabled-tab skipping, and overflow behaviour are all owned here.\n\n## Usage\n\n```html\n<lmvz-tabs value=\"home\" id=\"my-tabs\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-home\">Home content</div>\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-profile\" hidden>Profile content</div>\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-settings\" hidden>Settings content</div>\n</lmvz-tabs>\n```\n\n### Panels — slotted content model\n\nPanels are **consumer-authored** light-DOM elements placed in the `panels` slot. The component does **not** own or render a `lmvz-tab-panel` primitive — consumers supply any element they like (a `<div>`, a custom element, a route outlet, …).\n\n`lmvz-tabs` automatically pairs each panel with the corresponding tab by position:\n- It sets `aria-controls=\"<panelId>\"` on each `lmvz-tab` button.\n- It sets `aria-labelledby=\"<tabId>\"` on each panel element.\n\nIf you need an explicit mapping instead of positional pairing, call the `setTabPanelIds` method with an ordered array of `[tabId, panelId]` tuples.\n\nPanel **visibility** (the `hidden` attribute) is the consumer's responsibility. Listen to the `lmvzChange` event and toggle the relevant panel.\n\n### Reacting to tab changes\n\n```ts\nconst tabs = document.querySelector('lmvz-tabs');\n\ntabs.addEventListener('lmvzChange', (event) => {\n  const { value } = event.detail; // the newly-activated tab value\n  // show/hide panels as appropriate\n});\n```\n\n### Vertical orientation\n\n```html\n<lmvz-tabs value=\"home\" orientation=\"vertical\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <div slot=\"panels\" role=\"tabpanel\">Home content</div>\n  <div slot=\"panels\" role=\"tabpanel\" hidden>Profile content</div>\n</lmvz-tabs>\n```\n\nWhen `orientation=\"vertical\"` the tab list stacks vertically, arrow navigation switches to up/down, and the selection indicator moves to the inline-start edge of each tab trigger.\n\n## Keyboard interaction\n\n| Key                   | Behaviour                                                |\n| --------------------- | -------------------------------------------------------- |\n| `←` / `→` (horizontal) | Move focus to previous / next enabled tab.              |\n| `↑` / `↓` (vertical)   | Move focus to previous / next enabled tab.              |\n| `Home`                | Move focus to the first enabled tab.                     |\n| `End`                 | Move focus to the last enabled tab.                      |\n| `Enter` / `Space`     | Activate the currently focused tab (manual activation).  |\n| `Tab`                 | Leave the tab list; focus moves to the active panel.     |\n\nDisabled tabs are skipped during arrow-key navigation and cannot be activated.\n\n## Disabled-tab fallback\n\nWhen the selected tab becomes disabled at runtime, `lmvz-tabs` automatically activates the nearest enabled tab (preferring the next sibling, then the previous). If no enabled tab exists the selection value is left unchanged.\n",
-      "docs": "The semantics and state owner for the WAI-ARIA tabs pattern.\n\n`lmvz-tabs` owns:\n- `tablist` / `tab` / `tabpanel` ARIA semantics\n- Selected-value state and manual activation (`Enter`, `Space`, click)\n- Roving `tabindex` via `DirectionalFocusController`\n- Horizontal scroll overflow (horizontal mode only)\n- Disabled-tab skipping and nearest-enabled fallback\n- Child registration and panel linkage via `aria-controls` / `aria-labelledby`\n\nPanels are consumer-authored light-DOM elements. Associate each panel with\nits tab by adding an `id` attribute — either matching `lmvz-tab[panel]` or\nderived positionally when no explicit id is provided.",
+      "readme": "# lmvz-tabs\n\n`lmvz-tabs` is the WAI-ARIA Tabs pattern owner. It renders a `tablist` containing `lmvz-tab` trigger children and links them to consumer-authored panel elements via `aria-controls` / `aria-labelledby`. Selection state, keyboard management (roving `tabindex`, directional focus, manual activation), disabled-tab skipping, and overflow behaviour are all owned here.\n\n## Usage\n\n```html\n<lmvz-tabs value=\"home\" id=\"my-tabs\">\n  <lmvz-tab value=\"home\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" disabled>Settings</lmvz-tab>\n\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-home\">Home content</div>\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-profile\" hidden>Profile content</div>\n  <div slot=\"panels\" role=\"tabpanel\" id=\"panel-settings\" hidden>Settings content</div>\n</lmvz-tabs>\n```\n\n### Panels — slotted content model\n\nPanels are **consumer-authored** light-DOM elements placed in the `panels` slot. The component does **not** own or render a `lmvz-tab-panel` primitive — consumers supply any element they like (a `<div>`, a custom element, a route outlet, …).\n\n`lmvz-tabs` pairs each tab to its panel using one of two strategies:\n\n1. **ID-based linking (preferred):** Set a `panel` attribute on an `lmvz-tab` equal to the target panel's `id`. `lmvz-tabs` matches the tab to the panel by that `id`, regardless of DOM order.\n2. **Positional fallback:** If a tab omits the `panel` attribute, `lmvz-tabs` falls back to positional pairing: tab N is paired with panel N (by DOM order).\n\nFor each paired tab/panel, `lmvz-tabs`:\n- Sets `aria-controls=\"<panelId>\"` on the tab button.\n- Sets `aria-labelledby=\"<tabId>\"` and `role=\"tabpanel\"` on the panel element.\n- Automatically manages panel visibility by toggling the `hidden` attribute based on the active tab.\n\n**Unresolved `panel` reference:** If a tab's `panel` attribute references a non-existent `id`, that tab falls back to positional pairing for that single tab.\n\n#### Example: ID-based linking (order-independent)\n\n```html\n<lmvz-tabs value=\"home\">\n  <!-- Tabs explicitly link to panels via panel=\"id\" -->\n  <lmvz-tab value=\"home\" panel=\"home-panel\">Home</lmvz-tab>\n  <lmvz-tab value=\"profile\" panel=\"profile-panel\">Profile</lmvz-tab>\n  <lmvz-tab value=\"settings\" panel=\"settings-panel\">Settings</lmvz-tab>\n\n  <!-- Panels can be in any order -->\n  <div slot=\"panels\" id=\"profile-panel\" role=\"tabpanel\">Profile content</div>\n  <div slot=\"panels\" id=\"home-panel\" role=\"tabpanel\">Home content</div>\n  <div slot=\"panels\" id=\"settings-panel\" role=\"tabpanel\" hidden>Settings content</div>\n</lmvz-tabs>\n```\n\nFor an interactive demonstration of order-independent tab/panel linking, see the **LinkedByPanelId** story in Storybook.\n\n### Reacting to tab changes\n\nPanel visibility is automatically managed by `lmvz-tabs` — the active panel is shown and all others are hidden via the `hidden` attribute. If you need to perform custom logic when a tab changes, listen to the `lmvzChange` event:\n\n```ts\nconst tabs = document.querySelector('lmvz-tabs');\n\ntabs.addEventListener('lmvzChange', (event) => {\n  const { value } = event.detail; // the newly-activated tab value\n  // perform custom logic (e.g. analytics, scroll, focus management)\n});\n```\n\n## Keyboard interaction\n\n| Key                   | Behaviour                                                 |\n| --------------------- | -------------------------------------------------------- |\n| `←` / `→` | Move focus to previous / next enabled tab.              |\n| `Home`                | Move focus to the first enabled tab.                     |\n| `End`                 | Move focus to the last enabled tab.                      |\n| `Enter` / `Space`     | Activate the currently focused tab (manual activation).  |\n| `Tab`                 | Leave the tab list; focus moves to the active panel.     |\n\nDisabled tabs are skipped during arrow-key navigation and cannot be activated.\n\n## Disabled-tab fallback\n\nWhen the selected tab becomes disabled at runtime, `lmvz-tabs` automatically activates the nearest enabled tab (preferring the next sibling, then the previous). If no enabled tab exists the selection value is left unchanged.\n",
+      "docs": "The semantics and state owner for the WAI-ARIA tabs pattern.\n\n`lmvz-tabs` owns:\n- `tablist` / `tab` / `tabpanel` ARIA semantics\n- Selected-value state and manual activation (`Enter`, `Space`, click)\n- Roving `tabindex` via `DirectionalFocusController`\n- Horizontal scroll overflow (horizontal mode only)\n- Disabled-tab skipping and nearest-enabled fallback\n- Child registration and panel linkage via `aria-controls` / `aria-labelledby`\n\nPanels are consumer-authored light-DOM elements. Each `lmvz-tab` can declare\na `panel` attribute whose value matches the target `lmvz-tab-panel`'s `id`,\nresolving the pairing explicitly. Tabs without a `panel` attribute fall back\nto positional pairing (tab N pairs with panel N).",
       "docsTags": [
         {
           "name": "slot",
@@ -9292,40 +9382,6 @@
       ],
       "usage": {},
       "props": [
-        {
-          "name": "orientation",
-          "type": "\"horizontal\" | \"vertical\"",
-          "complexType": {
-            "original": "'horizontal' | 'vertical'",
-            "resolved": "\"horizontal\" | \"vertical\"",
-            "references": {}
-          },
-          "mutable": true,
-          "attr": "orientation",
-          "reflectToAttr": true,
-          "docs": "Layout and keyboard-navigation orientation.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'horizontal'"
-            }
-          ],
-          "default": "'horizontal'",
-          "values": [
-            {
-              "value": "horizontal",
-              "type": "string"
-            },
-            {
-              "value": "vertical",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "value",
           "type": "string",
@@ -9488,7 +9544,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "slotchange",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [
         {
@@ -9892,6 +9954,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/ds.types.d.ts::Card": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/ds.types.d.ts"
+    },
     "src/api/ds.types.d.ts::Chip": {
       "declaration": "any",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.39.0",
+  "version": "0.41.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",

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

@@ -9,6 +9,7 @@ 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 const cardSizes: readonly ["large", "small"];
 export declare const linkTypes: readonly ["internal", "external"];
 export declare const messageTypes: readonly ["neutral", "warning"];
 export declare const snackbarStatuses: readonly ["success", "warning", "error"];

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

@@ -1,4 +1,5 @@
 import type {
+  cardSizes,
   chipSizes,
   chipTypes,
   iconSizes,
@@ -34,6 +35,9 @@ export namespace Chip {
   export type Type = (typeof chipTypes)[number];
   export type Size = (typeof chipSizes)[number];
 }
+export namespace Card {
+  export type Size = (typeof cardSizes)[number];
+}
 export namespace Link {
   export type Type = (typeof linkTypes)[number];
 }

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

@@ -1,12 +1,23 @@
 import type { EventEmitter } from '../../stencil-public-runtime';
+import type { Card } from '../../api/ds.types';
 export declare class LmvzCard {
-    cardTitle: string;
-    imageUrl?: string;
+    el: HTMLElement;
+    private titleSlotElement?;
+    private readonly warnedCases;
+    size: Card.Size;
+    cardTitle?: string;
     description?: string;
-    primaryActionLabel: string;
-    primaryAction: EventEmitter<PointerEvent>;
+    imageUrl?: string;
+    imageAlt: string;
+    actionLabel?: string;
+    lmvzCardAction: EventEmitter<void>;
+    normalizeSize(value: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     private get fallbackImage();
-    private _onPrimaryClick;
-    private _onOverflowClick;
+    private readonly handleActionClick;
+    private get slottedTitleElement();
+    private checkTitleContent;
+    private warnOnce;
     render(): any;
 }

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

@@ -4,7 +4,7 @@ export declare class LmvzTab {
     value: string;
     disabled: boolean;
     selected: boolean;
-    vertical: boolean;
+    panel?: string;
     private readonly handleMediaSlotChange;
     componentDidLoad(): void;
     render(): any;

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

@@ -7,9 +7,8 @@ export declare class LmvzTabs extends ReactiveControllerHost implements Directio
     private tabSlotEl?;
     private panelSlotEl?;
     private tablistEl?;
-    private focusController;
+    private readonly focusController;
     value: string;
-    orientation: 'horizontal' | 'vertical';
     lmvzChange: EventEmitter<{
         value: string;
     }>;
@@ -18,21 +17,21 @@ export declare class LmvzTabs extends ReactiveControllerHost implements Directio
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    handleSlotChangeEvent(): void;
     handleValueChange(newValue: string): void;
-    handleOrientationChange(): void;
     initFocus(): Promise<void>;
     activateTab(value: string): Promise<void>;
     getTabElements(): Promise<HTMLElement[]>;
     setTabPanelIds(pairs: Array<[string, string]>): Promise<void>;
     private get slottedTabs();
     private get slottedPanels();
-    private readonly handleTabSlotChange;
-    private readonly handlePanelSlotChange;
-    private readonly handleTabReady;
+    private handleTabSlotChange;
+    private handlePanelSlotChange;
+    private handleTabReady;
     private updateIconTabsAttr;
     private syncFocusTargets;
-    private syncOrientation;
-    private syncTabOrientation;
+    private resolvePanelForTab;
+    private warnIfMixedPanelLinking;
     private wireAriaIds;
     private applySelection;
     private isTabDisabled;