@lmvz-ds/components 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lmvz-ds/components
 
+## 0.21.0
+
+### Minor Changes
+
+- 1cbce93: Toggle Komponente hinzugefügt
+
 ## 0.20.0
 
 ### Minor Changes

package/cjs/lmvz-components.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/cjs/lmvz-toggle.cjs.entry.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-C2yDXRqP.js');
+var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
+var component = require('./component-Csg9MtNK.js');
+require('./aria-loader-Cec1zR2g.js');
+
+const lmvzToggleCss = () => `@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; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .sc-lmvz-toggle-h:focus-within {      outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);   outline-offset: 2px; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
+
+let toggleIdCounter = 0;
+const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
+    get el() { return index.getElement(this); }
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInputElement;
+    toggleId = `lmvz-toggle-${toggleIdCounter++}`;
+    lmvzChange;
+    label;
+    checked = false;
+    disabled = false;
+    required = false;
+    name;
+    value = 'on';
+    form;
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.lmvzChange = index.createEvent(this, "lmvzChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.addController(new reactiveControllerHost.AriaValidationController(this));
+    }
+    formAssociatedCallback(_form) {
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    handleCheckedChange(checked) {
+        this.internals.setFormValue?.(checked ? this.value : null);
+    }
+    handleDisabledChange(disabled) {
+        if (disabled && this.nativeInputElement) {
+            this.nativeInputElement.blur();
+        }
+    }
+    async focusToggle() {
+        this.nativeInputElement?.focus();
+    }
+    async blurToggle() {
+        this.nativeInputElement?.blur();
+    }
+    async checkValidity() {
+        return this.nativeInputElement?.checkValidity?.() ?? false;
+    }
+    async reportValidity() {
+        return this.nativeInputElement?.reportValidity?.() ?? false;
+    }
+    async getInputElement() {
+        if (!this.nativeInputElement) {
+            await new Promise((resolve) => component.componentOnReady(this.el, resolve));
+        }
+        return Promise.resolve(this.nativeInputElement);
+    }
+    handleChange = (event) => {
+        const newChecked = event.target.checked;
+        this.checked = newChecked;
+        this.lmvzChange.emit(newChecked);
+    };
+    render() {
+        return (index.h(index.Host, { key: '0a0f0e278a0ccd6739e7e9e82267c047efad74ad' }, index.h("span", { key: 'da93a2dd256c72171e7a423223a3738d6ca13ebb', class: "track" }, index.h("input", { key: '6e90ec39ec856fa38097e6224c7fed50b23088e5', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '8fca08269e216b9a2840e7707fa5562220f8b36c', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: 'f0a0842fef8c9fa3981b6d8c373a79fe0c33fad3', htmlFor: this.toggleId }, this.label)));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "handleCheckedChange": 0
+            }],
+        "disabled": [{
+                "handleDisabledChange": 0
+            }]
+    }; }
+};
+LmvzToggle.style = lmvzToggleCss();
+
+exports.lmvz_toggle = LmvzToggle;

package/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/collection/collection-manifest.json

@@ -10,6 +10,7 @@
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
     "components/lmvz-select/lmvz-select.js",
+    "components/lmvz-toggle/lmvz-toggle.js",
     "integration/header-integration/header-integration.js"
   ],
   "mixins": [],

package/collection/components/lmvz-toggle/lmvz-toggle.css

@@ -0,0 +1,118 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * 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;
+  align-items: center;
+  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
+  padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  /* TODO[LDHCID-136]: min-height currently below accessibility requirements for tap targets (44px) */
+  /* min-height: 38px; */
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  cursor: pointer;
+  background-color: transparent;
+  user-select: none;
+}
+:host(:not([disabled]):hover) {
+  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+}
+:host([checked]) {
+  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+}
+:host([disabled][checked]) {
+  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+}
+:host([disabled]) {
+  cursor: not-allowed;
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+}
+.track {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--lmvz-global-s32, 32px);
+  height: var(--lmvz-global-s20, 20px);
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
+  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);
+}
+:host(:not([disabled]):hover) .track {
+  border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+}
+:host([checked]) .track {
+  border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+}
+input {
+  /* visually hidden, keyboard-accessible */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+  cursor: inherit;
+}
+:host(:focus-within) {
+  /* TODO[LDHCID-136]: no focus-visible token in DS */
+  outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);
+  outline-offset: 2px;
+}
+.thumb {
+  position: absolute;
+  width: var(--lmvz-global-s13, 13px);
+  height: var(--lmvz-global-s13, 13px);
+  border-radius: 50%;
+  background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  top: 50%;
+  transform: translateY(-50%);
+  left: var(--lmvz-global-s4, 4px);
+  /* TODO[LDHCID-136]: no DS motion/duration token — 0.2s ease from Figma interaction baseline */
+  transition:
+    left 0.2s ease,
+    background-color 0.2s ease;
+  pointer-events: none;
+}
+:host([checked]) .thumb {
+  left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));
+  background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+label {
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+    Router);
+  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
+  cursor: pointer;
+}

package/collection/components/lmvz-toggle/lmvz-toggle.js

@@ -0,0 +1,358 @@
+import { Host, h } from "@stencil/core";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { componentOnReady } from "../../utils/component";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let toggleIdCounter = 0;
+export class LmvzToggle extends ReactiveControllerHost {
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInputElement;
+    toggleId = `lmvz-toggle-${toggleIdCounter++}`;
+    lmvzChange;
+    label;
+    checked = false;
+    disabled = false;
+    required = false;
+    name;
+    value = 'on';
+    form;
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this));
+    }
+    formAssociatedCallback(_form) {
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    handleCheckedChange(checked) {
+        this.internals.setFormValue?.(checked ? this.value : null);
+    }
+    handleDisabledChange(disabled) {
+        if (disabled && this.nativeInputElement) {
+            this.nativeInputElement.blur();
+        }
+    }
+    async focusToggle() {
+        this.nativeInputElement?.focus();
+    }
+    async blurToggle() {
+        this.nativeInputElement?.blur();
+    }
+    async checkValidity() {
+        return this.nativeInputElement?.checkValidity?.() ?? false;
+    }
+    async reportValidity() {
+        return this.nativeInputElement?.reportValidity?.() ?? false;
+    }
+    async getInputElement() {
+        if (!this.nativeInputElement) {
+            await new Promise((resolve) => componentOnReady(this.el, resolve));
+        }
+        return Promise.resolve(this.nativeInputElement);
+    }
+    handleChange = (event) => {
+        const newChecked = event.target.checked;
+        this.checked = newChecked;
+        this.lmvzChange.emit(newChecked);
+    };
+    render() {
+        return (h(Host, { key: '0a0f0e278a0ccd6739e7e9e82267c047efad74ad' }, h("span", { key: 'da93a2dd256c72171e7a423223a3738d6ca13ebb', class: "track" }, h("input", { key: '6e90ec39ec856fa38097e6224c7fed50b23088e5', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '8fca08269e216b9a2840e7707fa5562220f8b36c', class: "thumb", "aria-hidden": "true" })), h("label", { key: 'f0a0842fef8c9fa3981b6d8c373a79fe0c33fad3', htmlFor: this.toggleId }, this.label)));
+    }
+    static get is() { return "lmvz-toggle"; }
+    static get encapsulation() { return "scoped"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the toggle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the toggle is checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the toggle is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the toggle is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form integration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'on'"
+                        }],
+                    "text": "Value submitted with the form when checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form id to associate with"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle is switched. Event detail is the new checked state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusToggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the toggle",
+                    "tags": []
+                }
+            },
+            "blurToggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the toggle",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the toggle satisfies its validation constraints",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports validation errors to the user",
+                    "tags": []
+                }
+            },
+            "getInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement | undefined>"
+                },
+                "docs": {
+                    "text": "Returns the native HTMLInputElement.\n\nPromise resolves when the element is ready and the input is available.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '83ffaf59132a1890e428eda0d86ce42e200b3dd0' }, h("lmvz-header", { key: '43400e9ceaff3b4df1d4f9cf1019e07464222cbe', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '00f199bf22fe04763b94cb0a8915d77d6f42c073', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '32b5ac9a962b1c0f6d4eca27f50442088edcccf8', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: 'ddbd5ff9c0cb2c6eca762e8b259f3b6c9f54ad4e', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '86ec5784b091c691759e516dc061bde41bf25d42', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '9af310fcad4eee7ae42025c0a0e562e2db762958', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '5d8e64e95b9d7187bff280bf7acb8b73e80de940', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '42f40b68ee3b27323a3802ebabe4d6b61e742b92', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '2fd1777696e789a89a5775f41b8dd9e8946de0f6', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: 'da08ce4e9d54f675c7da39ebd963b5830185e299', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '82e074c463ca9115fef3ffffc34646f9f91135d6', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '0abaf7cb24e699e0a71c407dc02b671e588ff777', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '01146d2a899330f39538df782c14fad3ab440174', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '8654a845ae45439ea4be43357e0cc3dba38ad34d', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '39754f979f8d7616afcad9ff87f94820e6ad166c', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: '591e69a796357032fdefd54e81977cb6b818b653' }, h("lmvz-header", { key: 'bfc51bdc2979100082f210ad020ad3884837a1e7', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '808ee90cc2dbcaf59b1490ac4d59f0b8d445dace', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '08e8f747bae27ab19e58c44a28d3661ea4a019f6', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '5419724b8b29543206c33716bdd38edbb9e0ef25', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '04ea3fe11c3f64a1d023b71b496c44e8b6b4662b', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '4a0dc144d0e429d21fa8817973d5882aac6f11bb', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'b5e34ca29bb787409f1ff2d73e150e1f47e32afb', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '53ffb0fa8d8bcd35c5860d1594ec23edd4b64102', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '7959e991e4414173530efa34b2e12cb402a1c866', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '572a57ebfb71241913aa77c63ac21117aa66800a', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '758cc39b1cf02168a11090f393d51e18a36b0d01', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '47e14b75d64977fb871c907e199d37e5695c8d2d', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '19c4ca2458449afa9eeceb5b8aea972f85b9be0a', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '272b2252ae3890f09b7c380579f856990c8167a9', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'c32fa138419eec95caabfcffbc22cc6e25b24559', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }