@lmvz-ds/components 0.12.4 → 0.12.5-alpha.1

package/dist/lmvz-components/p-a4200b26.entry.js

@@ -0,0 +1,2 @@
+export{H as header_integration,L as lmvz_button,a as lmvz_header,b as lmvz_icon,c as lmvz_input,d as lmvz_menuitem}from"./p-DANVVVBd.js";import"./p-D2eyw7iv.js";import"./p-DlDurXvX.js";import"./p-BLwPC3DQ.js";
+//# sourceMappingURL=p-a4200b26.entry.js.map

package/dist/lmvz-components/p-a4200b26.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/lmvz-components/p-d3243bae.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,H as a}from"./p-D2eyw7iv.js";import{cg as o,cf as n}from"./p-DlDurXvX.js";const m=()=>`@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } .sc-lmvz-card-h {            button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-align: center;   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  button.secondary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); }  button.secondary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    button.small {   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router); }     display: flex;   min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem);   flex-direction: column;   align-items: flex-start;    border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card {   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   flex-direction: column;   justify-content: center;   align-items: center;   align-self: stretch; } .bottom.sc-lmvz-card {   display: flex;   min-width: 150px;   padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));   flex-direction: column;   align-items: flex-start;   align-self: stretch; } .title.sc-lmvz-card {   margin: 0;   display: flex;   justify-content: center;   align-items: center;   align-self: stretch;    padding-bottom: var(--lmvz-global-s4, 4px);   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2     Router); } .description.sc-lmvz-card {   display: flex;   margin: 0;   padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-items: flex-start;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .image-wrapper.sc-lmvz-card {   aspect-ratio: 4 / 3;   width: 100%;   background-size: cover;   background-position: center;   flex: 1 0 0;   align-self: stretch;   border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card {   margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card {   display: flex;   justify-content: center;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   flex: 1 0 0; }`;const l=class{constructor(t){e(this,t);this.primaryAction=r(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return o(n("card-placeholder.svg"))}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){const e={backgroundImage:`url(${this.imageUrl??this.fallbackImage})`};return t(a,{key:"1438354a53604954320d01652aa1d84f8712e875",role:"article"},t("div",{key:"dcffae2c48ebf8f8769cf07c2e78806f12df6888",class:"top"},t("div",{key:"e41e1d0aafbfc5879b86022e91958ef3373b48b2",class:"image-wrapper",style:e},t("div",{key:"f6a1fc9706012f39aca9dd0b995290e6042e3407",class:"chip-slot"},t("slot",{key:"4e014519c147705cc30b3268d652ea6c76c749ec",name:"chip"})))),t("div",{key:"e7baf78b660e9a97edd0b6a0aa1bdb1afa593fed",class:"bottom"},t("header",{key:"a8dad9f91df60f535725328a4901833d47652678"},t("h2",{key:"1cdbca46469750187856a46fa155128f1f8a677f",class:"title"},this.cardTitle)),t("p",{key:"f33c2c0af86d7be31fcbd676833b27c7d06e2dd9",class:"description"},this.description),t("div",{key:"a12595d514167fb957aac71fe3d144810b442f9d",class:"actions"},t("button",{key:"9730cedbf83599c09eedaaae43331147691486d6",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),t("button",{key:"48e9c511c406beb75334452769beade3dec9a3f5",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},t("span",{key:"81cc1af42a15dddb9dbd4f373a6a047c2e2cd563",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}};l.style=m();export{l as lmvz_card};
+//# sourceMappingURL=p-d3243bae.entry.js.map

package/dist/lmvz-components/p-d3243bae.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["lmvzCardCss","LmvzCard","cardTitle","imageUrl","description","primaryActionLabel","primaryAction","fallbackImage","runSync","syncCreateAssetUrlSafely","_onPrimaryClick","this","emit","_onOverflowClick","event","console","log","render","imgStyle","backgroundImage","h","Host","key","role","class","style","name","onClick","bind"],"sources":["src/components/lmvz-card/lmvz-card.css?tag=lmvz-card&encapsulation=scoped","src/components/lmvz-card/lmvz-card.tsx"],"sourcesContent":["@import url('../../styles/internal/define-layers.css');\n\n@import url('../../styles/fragments/_routerFont.css') layer(lmvz-ds.theme);\n@import url('../../styles/fragments/_reset.css') layer(lmvz-ds.reset);\n\n:host {\n  /** component dependencies */\n  /* * the (invalid nested) import will be handled by postcss */\n  /* stylelint-disable no-invalid-position-at-import-rule */\n  @import url('../../styles/fragments/_buttons.css');\n\n  display: flex;\n  min-width: var(--lmvz-other-component-card-minwidth);\n  max-width: var(--lmvz-other-component-card-maxwidth);\n  flex-direction: column;\n  align-items: flex-start;\n\n  border-radius: var(--lmvz-semantic-border-radius-lg);\n  border: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-border-default);\n  background: var(--lmvz-semantic-color-surface-primary);\n}\n\n* {\n  color: var(--lmvz-semantic-color-on-surface-primary);\n  font: var(--lmvz-typography-body-md);\n}\n\n.top {\n  display: flex;\n  padding: var(--lmvz-dimension-8-12);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n}\n\n.bottom {\n  display: flex;\n  min-width: 150px;\n  padding: var(--lmvz-dimension-4-6) var(--lmvz-dimension-10-14) var(--lmvz-dimension-10-14) var(--lmvz-dimension-10-14);\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n}\n\n.title {\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n\n  padding-bottom: var(--lmvz-global-s4);\n  overflow-wrap: break-word;\n  font: var(--lmvz-typography-heading-2xl);\n}\n\n.description {\n  display: flex;\n  margin: 0;\n  padding-bottom: var(--lmvz-component-body-sm-padding-bottom);\n  align-items: flex-start;\n  align-self: stretch;\n  white-space: pre-line;\n  font: var(--lmvz-typography-body-md);\n}\n\n.image-wrapper {\n  aspect-ratio: 4 / 3;\n  width: 100%;\n  background-size: cover;\n  background-position: center;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: var(--lmvz-semantic-border-radius-md);\n}\n\n.actions {\n  margin-top: var(--lmvz-component-form-wrapper-gap-y);\n  display: flex;\n  align-items: center;\n  gap: var(--lmvz-component-input-md-gap-x);\n  align-self: stretch;\n}\n\nbutton.primary,\nlmvz-button.primary {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--lmvz-component-input-md-gap-x);\n  flex: 1 0 0;\n}\n\n/* .overflow-button {\n  anchor-name: --overflow-button;\n} */\n\n/* menu {\n  position: fixed;\n  position-anchor: --overflow-button;\n\n  inset-block-start: anchor(end);\n  inset-inline-end: anchor(self-end);\n  margin: 5px 0 0 5px;\n} */\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nimport { runSync } from 'effect/Effect';\nimport { syncCreateAssetUrlSafely } from '../../utils/assets';\n\n@Component({\n  tag: 'lmvz-card',\n  styleUrl: 'lmvz-card.css',\n  scoped: true,\n  assetsDirs: ['../../assets'],\n})\nexport class LmvzCard {\n  /** Card title (required) */\n  @Prop() cardTitle!: string;\n\n  /** Optional image URL; placeholder used if omitted */\n  @Prop() imageUrl?: string;\n\n  /** Optional description */\n  @Prop() description?: string;\n\n  /** Primary action button label */\n  @Prop() primaryActionLabel: string = '';\n\n  /** Event emitted when primary button is clicked */\n  @Event() primaryAction!: EventEmitter<PointerEvent>;\n\n  private get fallbackImage() {\n    return runSync(syncCreateAssetUrlSafely('card-placeholder.svg'));\n  }\n\n  private _onPrimaryClick() {\n    this.primaryAction.emit();\n  }\n\n  private _onOverflowClick(event: PointerEvent) {\n    // TODO: show menu\n    console.log(event);\n  }\n\n  render() {\n    const imgStyle = {\n      backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,\n    };\n    return (\n      <Host role=\"article\">\n        <div class=\"top\">\n          <div class=\"image-wrapper\" style={imgStyle}>\n            <div class=\"chip-slot\">\n              <slot name=\"chip\"></slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"bottom\">\n          <header>\n            <h2 class=\"title\">{this.cardTitle}</h2>\n          </header>\n          <p class=\"description\">{this.description}</p>\n          {/* TODO: hide unless actions are available https://stackoverflow.com/questions/53796599/how-to-determine-number-of-children-in-a-slot */}\n          <div class=\"actions\">\n            <button class=\"primary\" onClick={this._onPrimaryClick.bind(this)} data-testid=\"primary\">\n              {this.primaryActionLabel}\n            </button>\n            {/* popoverTarget=\"mypopover\"  */}\n            <button class=\"tertiary\" aria-label=\"More actions\" onClick={this._onOverflowClick}>\n              <span class=\"icon-placeholder\">...</span>\n            </button>\n            {/* <menu id=\"mypopover\" popover=\"manual\">\n              <li>TEST</li>\n            </menu> */}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAc,IAAM,6mP,MCWbC,EAAQ,M,oEAEXC,UAGAC,SAGAC,YAGAC,mBAA6B,GAG5BC,cAET,iBAAYC,GACV,OAAOC,EAAQC,EAAyB,wB,CAGlC,eAAAC,GACNC,KAAKL,cAAcM,M,CAGb,gBAAAC,CAAiBC,GAEvBC,QAAQC,IAAIF,E,CAGd,MAAAG,GACE,MAAMC,EAAW,CACfC,gBAAiB,OAAOR,KAAKR,UAAYQ,KAAKJ,kBAEhD,OACEa,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,WACTH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,OACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBAAgBC,MAAOP,GAChCE,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACTJ,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAIjBN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UACTJ,EAAA,UAAAE,IAAA,4CACEF,EAAA,MAAAE,IAAA,2CAAIE,MAAM,SAASb,KAAKT,YAE1BkB,EAAA,KAAAE,IAAA,2CAAGE,MAAM,eAAeb,KAAKP,aAE7BgB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,WACTJ,EAAA,UAAAE,IAAA,2CAAQE,MAAM,UAAUG,QAAShB,KAAKD,gBAAgBkB,KAAKjB,MAAK,cAAc,WAC3EA,KAAKN,oBAGRe,EAAA,UAAAE,IAAA,2CAAQE,MAAM,WAAU,aAAY,eAAeG,QAAShB,KAAKE,kBAC/DO,EAAA,QAAAE,IAAA,2CAAME,MAAM,oBAAkB,U","ignoreList":[]}

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-03-10T17:57:18",
+  "timestamp": "2026-03-11T10:54:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.2",
@@ -14,7 +14,31 @@
       "docs": "",
       "docsTags": [],
       "usage": {},
-      "props": [],
+      "props": [
+        {
+          "name": "activeNav",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "active-nav",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
       "methods": [],
       "events": [],
       "listeners": [],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@lmvz-ds/components",
   "private": false,
   "type": "module",
-  "version": "0.12.4",
+  "version": "0.12.5-alpha.1+72d1667",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
   "volta": {
@@ -109,14 +109,13 @@
   },
   "scripts": {
     "start": "npm run start:integration",
-    "start:integration": "concurrently 'npm run build:css -- --watch' 'npm run build:dev -- --watch'",
+    "start:integration": "concurrently 'npm run build:css -- --watch' 'npm run build:integration -- --watch'",
     "start:dev": "stencil build --watch --dev --serve --config stencil.config.dev.ts",
     "build": "npm run build:css && npm run build:components",
     "build:css": "vite build --config vite-style.config.js",
-    "build:styles": "npm run build:css",
     "build:components": "stencil build --docs --prod --config stencil.config.prod.ts",
     "build:debug": "node --inspect-brk ../../node_modules/.bin/stencil build --debug --docs --config ./stencil.config.dev.ts",
-    "build:dev": "stencil build --config stencil.config.integration.ts",
+    "build:integration": "stencil build --config stencil.config.integration.ts",
     "test": "npm run test.spec",
     "test.spec": "jest",
     "test.e2e": "playwright test",
@@ -138,14 +137,16 @@
       "build:css": {
         "cache": true,
         "dependsOn": [
-          "^build:css"
+          "^build"
         ],
         "outputs": [
           "{projectRoot}/vite-generated"
         ]
       },
-      "build:styles": {
-        "dependsOn": []
+      "build:integration": {
+        "dependsOn": [
+          "build:css"
+        ]
       },
       "build:components": {
         "cache": true,
@@ -187,7 +188,7 @@
     "effect": "3.19.14"
   },
   "devDependencies": {
-    "@lmvz-ds/design-tokens": "^0.12.4",
+    "@lmvz-ds/design-tokens": "^0.12.5-alpha.1+72d1667",
     "@playwright/test": "^1.55.0",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "1.3.0",
@@ -212,5 +213,5 @@
     "tsx": "^4.21.0",
     "vite": "^7.3.1"
   },
-  "gitHead": "39d43fb881eaa7397a02aa9bf1835644bfc4aa2f"
+  "gitHead": "72d16675a804d947fb969c102b63a97bb263f82b"
 }