@lmvz-ds/components 0.11.4

package/dist/collection/components/lmvz-button/lmvz-button.js

@@ -0,0 +1,245 @@
+import { Host, h } from "@stencil/core";
+import classNames from "classnames";
+import { findFormByRef, inheritAriaAttributes } from "../../utils/component";
+import { ElementActivationController } from "../../utils/element-activation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { AriaValidationController } from "../../utils/validation/aria-validation-controller";
+export class LmvzButton extends ReactiveControllerHost {
+    el;
+    inheritedAttributes = {};
+    formEl = null;
+    formButtonEl = null;
+    lmvzActivation;
+    get ti() {
+        return 0;
+    }
+    scale = 'default';
+    variant = 'secondary';
+    disabled = false;
+    type = 'button';
+    form;
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this));
+        this.addController(new ElementActivationController(this, {
+            localHandler: this.handleClick.bind(this),
+            keys: ['Enter'],
+        }));
+    }
+    connectedCallback() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    renderHiddenButton() {
+        const formEl = (this.formEl = findFormByRef(this.form, this.el));
+        if (!formEl)
+            return;
+        const { formButtonEl } = this;
+        if (formButtonEl !== null && formEl.contains(formButtonEl))
+            return;
+        const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+        newFormButtonEl.type = 'submit';
+        newFormButtonEl.style.display = 'none';
+        newFormButtonEl.disabled = this.disabled;
+        formEl.appendChild(newFormButtonEl);
+    }
+    submitForm(ev) {
+        if (this.formEl && this.formButtonEl) {
+            ev.preventDefault();
+            this.formButtonEl.click();
+        }
+    }
+    handleClick = (ev) => {
+        if (this.type === 'submit') {
+            this.submitForm(ev);
+        }
+    };
+    render() {
+        this.renderHiddenButton();
+        return (h(Host, { key: '1c96281344dd604e2e4c919ea72907a9e934e5c6', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '16728ce6fee7d121e7120aa993031777f6d8570e', disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'e1b0d95953bdbd42885eecdeef8b457070e7e247' }))));
+    }
+    static get is() { return "lmvz-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ti": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tabindex",
+                "defaultValue": "0"
+            },
+            "scale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Button.Scale",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {
+                        "Button": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Button",
+                            "referenceLocation": "Button"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Scale of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scale",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Button.Variant",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "Button": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Button",
+                            "referenceLocation": "Button"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'secondary', since the primary button should be marked as such in context"
+                        }],
+                    "text": "Variant of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'secondary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'submit' | 'button'",
+                    "resolved": "\"button\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormRef",
+                    "resolved": "HTMLFormElement | string",
+                    "references": {
+                        "FormRef": {
+                            "location": "import",
+                            "path": "../../utils/component",
+                            "id": "src/utils/component.ts::FormRef",
+                            "referenceLocation": "FormRef"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzActivation",
+                "name": "lmvzActivation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/lmvz-card/lmvz-card.css

@@ -0,0 +1,283 @@
+
+@layer /** */
+    /**
+     * reset: CSS resets for browser defaults or expectedly problematic 3rd party libraries
+     */
+    lmvz-ds.reset,
+
+    /**
+     * theme: tokens, typography, etc. 
+     */
+    lmvz-ds.theme,
+
+    /**
+     * components: overrides for UI components and CSS-only component implementation
+     *      Design System components should append their styles into this layer at definition! 
+     */
+    lmvz-ds.components,
+
+    /**
+     * overrides: utility classes, helpers, product- or application-specific styles.
+     *      Usually, you do not want to add DS util styles to a layer directly.
+     *      Only place those styles here, that are being exported as part of a theme. 
+     */
+    lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@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;
+}
+
+}
+:host {
+  /** component dependencies */
+  /* * the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable no-invalid-position-at-import-rule */
+  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) solid var(--lmvz-semantic-color-status-active-950); */
+  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;
+  /* } */
+
+  /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
+  /* button:is([disabled], .disabled) { */
+  /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
+  /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
+  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.secondary:is([disabled], .disabled) {
+  --lmvz-button-background: var(--lmvz-global-color-neutral-200);
+  --lmvz-button-border-color: var(--lmvz-global-color-neutral-400);
+  --lmvz-button-color: var(--lmvz-global-color-neutral-700);
+} */
+
+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.tertiary:is([disabled], .disabled) {
+  --lmvz-button-background: var(--lmvz-global-color-neutral-100);
+  --lmvz-button-color: var(--lmvz-global-color-neutral-600);
+} */
+
+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);
+}
+* {
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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,
+lmvz-button.primary {
+  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;
+}
+/* .overflow-button {
+  anchor-name: --overflow-button;
+} */
+/* menu {
+  position: fixed;
+  position-anchor: --overflow-button;
+
+  inset-block-start: anchor(end);
+  inset-inline-end: anchor(self-end);
+  margin: 5px 0 0 5px;
+} */

package/dist/collection/components/lmvz-card/lmvz-card.js

@@ -0,0 +1,137 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+export class LmvzCard {
+    cardTitle;
+    imageUrl;
+    description;
+    primaryActionLabel = '';
+    primaryAction;
+    _onPrimaryClick() {
+        this.primaryAction.emit();
+    }
+    _onOverflowClick(event) {
+        console.log(event);
+    }
+    render() {
+        const imgStyle = {
+            backgroundImage: `url(${this.imageUrl ?? getAssetPath('./card-placeholder.svg')})`,
+        };
+        return (h(Host, { key: 'd17230c2587b87c1fa5514875e15b7d7930857bc', role: "article" }, h("div", { key: 'bf8c631ee99651a10c01774a4da20142d04342db', class: "top" }, h("div", { key: 'fb8224ec00bc8e0c5b1668a6ed63e36b52a11d55', class: "image-wrapper", style: imgStyle }, h("div", { key: '26c65e0c8083faec2854a332e83b5e8abaf8c2fd', class: "chip-slot" }, h("slot", { key: 'b5406113b36fcb23dd08cc75e34ae64923357cd3', name: "chip" })))), h("div", { key: '1eb0b6682830da00fa006fcaa9763e8d33adf446', class: "bottom" }, h("header", { key: '5930f28a48304296be40fc337a6990a1444cdcdb' }, h("h2", { key: '0138cdc21b5ac8b40b40988937ba24292532e069', class: "title" }, this.cardTitle)), h("p", { key: '45a9e7947ae99d1db67efa4aa04c3186d02a97c7', class: "description" }, this.description), h("div", { key: '940a8a5e7e38f65efa0d7bb25a56131e4456c248', class: "actions" }, h("button", { key: '35b0a7ae68fb9ac8c62e181b0087a312a85da185', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '6d391205d50a8ab92336bad0bd70fd24f00b5cda', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: 'dca656b4c1758c1fdcc3c7d971e58b6a63fcd0d1', class: "icon-placeholder" }, "..."))))));
+    }
+    static get is() { return "lmvz-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-card.css"]
+        };
+    }
+    static get assetsDirs() { return ["../../assets"]; }
+    static get properties() {
+        return {
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card title (required)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-title"
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image URL; placeholder used if omitted"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-url"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "primaryActionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-action-label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "primaryAction",
+                "name": "primaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when primary button is clicked"
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/lmvz-chip/lmvz-chip.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}