@lmvz-ds/components 0.23.0 → 0.25.0

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

@@ -0,0 +1,487 @@
+import { h, Host } from "@stencil/core";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { RadioGroupController } from "../../utils/radio/radio-group-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let radioIdCounter = 0;
+export class LmvzRadio extends ReactiveControllerHost {
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInput;
+    radioId = `lmvz-radio-${radioIdCounter++}`;
+    initialChecked = false;
+    radioGroupController;
+    get helperId() {
+        return this.helperText ? `${this.radioId}-helper` : undefined;
+    }
+    label;
+    checked = false;
+    value = 'on';
+    name;
+    disabled = false;
+    required = false;
+    error = false;
+    helperText;
+    form;
+    autofocus = false;
+    _handlingNativeChange = false;
+    _handlingFormReset = false;
+    handleCheckedChange(newVal, oldVal) {
+        this.internals.setFormValue?.(newVal ? this.value : null);
+        if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
+            this.lmvzChange.emit(false);
+        }
+        if (newVal && !oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
+            this.lmvzChange.emit(true);
+        }
+    }
+    handleValueChange(newVal) {
+        if (this.checked) {
+            this.internals.setFormValue?.(newVal);
+        }
+    }
+    handleLabelChange(newVal) {
+        if (!newVal) {
+            console.warn('[lmvz-radio] label prop is required and must not be empty');
+        }
+    }
+    lmvzChange;
+    lmvzActivation;
+    async focusInput() {
+        this.nativeInput?.focus();
+    }
+    async checkValidity() {
+        return this.internals?.checkValidity() ?? true;
+    }
+    async reportValidity() {
+        return this.internals?.reportValidity() ?? true;
+    }
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this, {
+            reValidateOnPropChanges: true,
+        }));
+        this.radioGroupController = new RadioGroupController(this);
+        this.addController(this.radioGroupController);
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+        super.componentWillLoad();
+    }
+    formAssociatedCallback() {
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    formResetCallback() {
+        this._handlingFormReset = true;
+        try {
+            this.checked = this.initialChecked;
+        }
+        finally {
+            this._handlingFormReset = false;
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state !== 'string')
+            return;
+        this._handlingFormReset = true;
+        try {
+            this.checked = state === this.value;
+        }
+        finally {
+            this._handlingFormReset = false;
+        }
+    }
+    handleChange = (event) => {
+        this._handlingNativeChange = true;
+        try {
+            const input = event.target;
+            this.checked = input.checked;
+            this.lmvzChange.emit(this.checked);
+            this.radioGroupController.select(this);
+            this.lmvzActivation.emit();
+        }
+        finally {
+            this._handlingNativeChange = false;
+        }
+    };
+    handleKeydown(event) {
+        const { key } = event;
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'].includes(key))
+            return;
+        event.preventDefault();
+        const radios = this.radioGroupController.sortedEnabled;
+        if (radios.length === 0)
+            return;
+        const currentIndex = radios.indexOf(this);
+        if (currentIndex === -1)
+            return;
+        let targetIndex;
+        if (key === 'ArrowDown' || key === 'ArrowRight') {
+            targetIndex = (currentIndex + 1) % radios.length;
+        }
+        else if (key === 'ArrowUp' || key === 'ArrowLeft') {
+            targetIndex = (currentIndex - 1 + radios.length) % radios.length;
+        }
+        else if (key === 'Home') {
+            targetIndex = 0;
+        }
+        else {
+            targetIndex = radios.length - 1;
+        }
+        const target = radios[targetIndex];
+        if (!target)
+            return;
+        this.radioGroupController.setFocused(target);
+    }
+    render() {
+        return (h(Host, { key: '0226e313fcf4fe3c3cf343cfe0776cf71da169a6' }, h("input", { key: '5bb1f733d2f29217bc7544d8fd24f6b21bedc654', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'ae18f49167d1a2e8e6ec4ceca435e69e3d79f593', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '5dfb65105831a672f2a47952aff987cd45e9b178', class: "dot" })), h("span", { key: 'df148ca52be7e580226d94ff9aef4e3cf5a6182c', class: "content" }, h("label", { key: 'e042c57755eadb64692ace49204dccb1ee03ed1c', htmlFor: this.radioId }, this.label), h("span", { key: 'a90b0bef927dddb39f9e6357adf888e0818a3c5a', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+    }
+    static get is() { return "lmvz-radio"; }
+    static get encapsulation() { return "scoped"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-radio.css", "../../styles/fragments/_focus-within.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-radio.css", "../../styles/fragments/_focus-within.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 radio. Required for accessibility."
+                },
+                "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 radio is checked.\n\nSetting this prop programmatically (e.g. `element.checked = true`) fires `lmvzChange`\nwith the new value, unless the change occurs during native form lifecycle callbacks\n(`formResetCallback` or `formStateRestoreCallback`), in which case emission is suppressed\nto match native `<input type=\"radio\">` behavior. Internal form state is always updated\nregardless of emission suppression."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'on'"
+                        }],
+                    "text": "Form submission value when checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "remarks",
+                            "text": "A value of `\"\"` (empty string) is forwarded to the native `<input>`, but\n`RadioGroupController` treats it as unnamed \u2014 no group coordination occurs between\nradios with `name=\"\"`."
+                        }],
+                    "text": "Name attribute for form submission via ElementInternals.\n\nWhen multiple `lmvz-radio` elements share the same `name` and form scope,\nthe `name` is forwarded directly to the native `<input type=\"radio\">`,\nenabling browser-native mutual exclusion: selecting one radio automatically\ndeselects all others with the same name in that form. If a radio is outside\nany form, its scope defaults to the document level \u2014 same-name radios\noutside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` automatically manages roving tabindex (only the\nchecked radio has `tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End)\nwithin the form-scoped group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio 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 radio is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / description text displayed below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form id to associate with (for out-of-form usage).\nReflected to the host attribute so both HTML attribute and programmatic assignment work."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "form"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio should autofocus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the radio checked state changes.\nEvent detail contains the new checked boolean value.\n\nEmission contract:\n- Fires `true` on user selection (native `change` event).\n- Fires on programmatic external prop transitions: `true \u2192 false` (emits `false`) and\n  `false \u2192 true` (emits `true`), e.g. `element.checked = false` or `element.checked = true`.\n- Does NOT fire during browser-driven form lifecycle callbacks: `formResetCallback` and\n  `formStateRestoreCallback` (autofill / session restore). This matches native `<input type=\"radio\">`\n  behaviour, which does not fire `change` on form reset. Note that internal form state\n  (`ElementInternals.setFormValue`) is always updated regardless of suppression \u2014 only the\n  event channel is silenced.\n- Does NOT re-fire from the `@Watch('checked')` watcher during the same tick as the native\n  `change` handler, preventing a double-emission when the user clicks the radio."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzActivation",
+                "name": "lmvzActivation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on every explicit user activation of this radio \u2014 via click or Space key on the\nnative input. Fires even when the radio is already checked (re-activation). Use this\nevent to react to user intent; use `lmvzChange` to react to state transitions."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native radio input.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the radio 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": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -55,7 +59,7 @@
   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
   --lmvz-select-label-minimized-padding-x: 4px;
   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
-  --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 }
@@ -121,8 +125,8 @@ div[aria-hidden] {
   background-color: var(--lmvz-select-bg-hover);
 }
 .select-wrapper:focus-within div[aria-hidden] {
-  outline: 2px solid var(--lmvz-select-focus-color);
-  outline-offset: 2px;
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 div[aria-hidden] > span:first-child {
   flex: 1 0 0;

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

@@ -50,7 +50,7 @@ export class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: 'f4d3104f4022581e4661f2181eec5d56ac7027af' }, h("div", { key: '1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7', class: "select-wrapper" }, h("label", { key: 'ff7a2e509c637424387b38b163739183deda3cba', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '7e3c03652d16dd1a20628d800ccae4221062d4b8', "aria-hidden": "true" }, " *")), h("div", { key: 'a2ee01b6ddfa98565fc1c41c9b9391091d254daf', "aria-hidden": "true" }, h("span", { key: 'c96a6960f693baca0ba48b44e569ad87c1bbc980' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '4631b13509919f7bfd0e5a1287334cd3a8412e50', "aria-hidden": "true" }, " *")), h("span", { key: '4781647ee3a6a780e4253b9f92738c4645e20578' }, h("img", { key: 'c83dab75df9ff20ec40b63f45cbe8262d1c71d7d', src: chevronDownSvg, alt: "" }))), h("select", { key: '035b19878300ac1f7b04b61157e39587782b44f7', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: 'da76b299a1df9da8475e115b82d7e427cc659bfa', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '1a91b540bc8ab97723df24c9c77d2bd52d941c92' }))), this.helperText && h("div", { key: '347fe4d805a58e03f2cb2ef427b0dba0b805e8be', role: "status" }, this.helperText)));
+        return (h(Host, { key: '597245455ffb9b5f83472a7970fb1c6c92017fd2' }, h("div", { key: 'edeb4d02d5a5291e60fd2d26d16edc500a355b63', class: "select-wrapper" }, h("label", { key: 'd0068817bb3586467d73284cecc03de393c37589', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '624ee28842aed8c01651c7758099bccc446840d6', "aria-hidden": "true" }, " *")), h("div", { key: '184591bc8ac11e9eed17795ce21319591e6d4211', "aria-hidden": "true" }, h("span", { key: '53e673521ed26125c24fb529d6016e3827b47a44' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '7af1a756e3343701ad066f3c107b2028126c5f09', "aria-hidden": "true" }, " *")), h("span", { key: '6210f2069758f8579f67780530fd294210875b3f' }, h("img", { key: '05aa6cf110ba0c7eacd36f59525144c61f0705d9', src: chevronDownSvg, alt: "" }))), h("select", { key: 'dc9dfe93226858f73f1d5a655388b9ce3a5e4037', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '38ffb95d089932d0ce0c6a5629004679d3f7f857', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '51b96884bb010b0a93f24b8b2f3f91a7b040e220' }))), this.helperText && h("div", { key: 'f7149a48024e87d2a3843d96674e45cb91fd9cf4', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,38 +5,42 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
 :host {
   display: inline-flex;
   align-items: center;
-  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   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) */
@@ -50,10 +54,10 @@
   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
 }
 :host([checked]) {
-  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
 }
 :host([disabled][checked]) {
-  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
 }
 :host([disabled]) {
   cursor: not-allowed;
@@ -86,17 +90,12 @@ input {
   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);
+  background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   top: 50%;
   transform: translateY(-50%);
   left: var(--lmvz-global-s4, 4px);

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

@@ -65,19 +65,19 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: 'b7d3c3d2ae30744669032797b2fefcd1e7fe0b61' }, h("span", { key: '93dc128b588e19a5e322cb93efae33669375709a', class: "track" }, h("input", { key: '80650720ac6276f7c8996e071d8104e98002e06e', 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: '59838c27a032d7a116faea67fa1dc75cf9ee92cd', class: "thumb", "aria-hidden": "true" })), h("label", { key: '809057cf268adf05c8163a802a6020dca9b666b9', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: '4bb633301740c3e69a836615e2266242980ac17a' }, h("span", { key: 'cc7188d8e2caff2968ad6c64c72565a71c89ec74', class: "track" }, h("input", { key: '867f7865711b9224b89f0f491df8a19589342729', 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: '426ee9f042afcc3d74b2137d2edbe95573b3c136', class: "thumb", "aria-hidden": "true" })), h("label", { key: '600cb22f2915d86edafa9ac57b77707055f6ae16', 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"]
+            "$": ["./lmvz-toggle.css", "../../styles/fragments/_focus-within.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["lmvz-toggle.css"]
+            "$": ["lmvz-toggle.css", "../../styles/fragments/_focus-within.css"]
         };
     }
     static get properties() {