@lmvz-ds/components 0.11.4

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

@@ -0,0 +1,89 @@
+
+@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;
+}
+
+}
+:host {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    Router);
+  padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  cursor: pointer;
+
+  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
+
+  background: var(--lmvz-menuitem-background);
+  color: var(--lmvz-menuitem-color);
+}
+:host(:hover) {
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+}
+:host(:active) {
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+}
+:host(:focus-visible) {
+  /* work around siblings overlapping outline */
+  z-index: 1;
+}
+:host([aria-expanded='true']) {
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-selected, #f1f9fe);
+  --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);
+}

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

@@ -0,0 +1,97 @@
+import { Host, h } from "@stencil/core";
+import { ElementActivationController } from "../../utils/element-activation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { AriaValidationController } from "../../utils/validation/aria-validation-controller";
+export class LmvzMenuItem extends ReactiveControllerHost {
+    el;
+    get role() {
+        return 'menuitem';
+    }
+    get ti() {
+        return 0;
+    }
+    lmvzActivation;
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this));
+        this.addController(new ElementActivationController(this));
+    }
+    render() {
+        return (h(Host, { key: '44399be11122af25d05e5b3b5f05dd90a89fddc4' }, h("slot", { key: '2809f9e89a0c38af4d3f1f17ad78397487370134' })));
+    }
+    static get is() { return "lmvz-menuitem"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-menuitem.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-menuitem.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": true,
+                "attribute": "role",
+                "defaultValue": "'menuitem'"
+            },
+            "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"
+            }
+        };
+    }
+    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/index.js

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './components/lmvz-icon/public';
+export * from './utils/public';

package/dist/collection/integration/header-integration.js

@@ -0,0 +1,28 @@
+import { h, Host } from "@stencil/core";
+export class HeaderIntegration {
+    activeNav;
+    activate(event) {
+        const target = event.currentTarget;
+        const navItem = target.closest('[slot="nav-primary"]');
+        if (!navItem)
+            return;
+        const navId = navItem.id;
+        if (!navId) {
+            console.warn('Nav item does not have an id:', navItem);
+            return;
+        }
+        console.log('Activating nav item:', navId);
+        this.activeNav = navId;
+    }
+    render() {
+        return (h(Host, { key: 'ccba40397e7578404ac0afd956d91c78eb4b830f' }, h("lmvz-header", { key: '8a3b6212040d983dee588e08306efb5366b81c99', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '5620ba46fe337c290ee1ec6bdbefeff1b6aa667c', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, "Lehrmittel"), h("lmvz-menuitem", { key: 'e3975addff39e57c3aa69a63d48773e92e91dc9b', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, "Verwaltung"), h("lmvz-menuitem", { key: '3fd304d92f512581b1f6b93fe45d21d187423bf3', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'cf84e24da783904856af0821b70ba81c7416d18a', icon: "book" }), "Deutsch 7"), h("lmvz-menuitem", { key: 'a2a8abb2267a632bae52e48870653245af833cd2', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'bdaf20c26508fb60d77ccc7dbcc8e644766245ab', icon: "book" }), "Mathe 2"), h("lmvz-menuitem", { key: 'd628544431a3f3a03903fbe7531b5cff6646007c', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: 'ff77c898d96bc4825f915603638c6ed2a8aa7fdd', icon: "cog" }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '1d9aca5b061e12f4d08aee70406bb27b7a0e1a82', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'e5d7f0835a56effce1873c372ca64b4dca693ebf', icon: "cog" })), h("lmvz-button", { key: 'fab2092bc47d5f0a73a1d0c94ebc6acbce3c7c2c', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '15a89af0cab8ae520104094e3424b740b35b9d1f', icon: "user" }))), h("lmvz-input", { key: '964aa56a89587d48559ff7d156dda49fea0f61c6', label: "test" })));
+    }
+    static get is() { return "header-integration"; }
+    static get encapsulation() { return "shadow"; }
+    static get styles() { return ":host {\n      display: block;\n      min-height: 100vh;\n      background: var(--lmvz-color-spec-bg-outer-view);\n    }\n\n    .active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }\n\n    .user-info {\n      display: inline-flex;\n      width: 2.5rem;\n      height: 2.5rem;\n      padding: var(--lmvz-dimension-4-6);\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      aspect-ratio: 1/1;\n      border-radius: var(--lmvz-semantic-border-radius-round);\n      background: var(--lmvz-global-color-brand-yellow-700);\n    }"; }
+    static get states() {
+        return {
+            "activeNav": {}
+        };
+    }
+}

package/dist/collection/styles/buttons.css

@@ -0,0 +1 @@
+@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides;@layer lmvz-ds.reset{h1,h2,h3,h4,h5,h6{margin:0}}@layer lmvz-ds.components{button{--lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary));--lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x));--lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y));--lmvz-button-gap: var(--lmvz-component-input-md-gap-x);--lmvz-button-font: var(--lmvz-typography-body-lg);--lmvz-button-radius: var(--lmvz-component-input-radius-default);--lmvz-button-border-width: 0;--lmvz-button-border-color: transparent;--lmvz-button-background: var(--lmvz-semantic-color-int-primary);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 .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}button>*{font:inherit;color:inherit}button:focus-visible{outline:var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-selected);outline-offset:var(--lmvz-component-input-sm-padding-x)}button:is([disabled],.disabled){cursor:not-allowed;pointer-events:none;opacity:var(--lmvz-component-input-disabled-opacity)}button:not([disabled]):hover{--lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover)}button:not([disabled]):active{--lmvz-button-background: var(--lmvz-semantic-color-int-primary-active)}button.secondary{--lmvz-button-background: var(--lmvz-semantic-color-int-secondary);--lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary);--lmvz-button-border-width: var(--lmvz-semantic-border-width-default);--lmvz-button-border-color: var(--lmvz-semantic-color-border-default)}button.secondary:not([disabled],.disabled):hover{--lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover);--lmvz-button-border-color: var(--lmvz-semantic-color-border-hover)}button.secondary:not([disabled],.disabled):active{--lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active);--lmvz-button-border-color: var(--lmvz-semantic-color-border-active)}button.tertiary{--lmvz-button-background: var(--lmvz-semantic-color-int-tertiary);--lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary)}button.tertiary:not([disabled],.disabled):hover{--lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover)}button.tertiary:not([disabled],.disabled):active{--lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active)}button.small{--lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x);--lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y);--lmvz-button-gap: var(--lmvz-component-input-sm-gap-x);--lmvz-button-font: var(--lmvz-typography-body-md)}button.large{--lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x);--lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y);--lmvz-button-gap: var(--lmvz-component-input-lg-gap-x);--lmvz-button-font: var(--lmvz-typography-body-lg)}}