@breadstone/mosaik-elements-foundation 0.1.21 → 0.1.23

package/Controls/Components/Media/Chip/Themes/ChipElement.Joy.js

@@ -38,13 +38,13 @@ export function chipElementJoyStyle() {
   --chip-padding-top: var(--joy-layout-space);
   --chip-ripple-color: unset;
   --chip-ripple-duration: .2s;
-  --chip-shadow: var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0);
-  --chip-shadow-blur: var(--joy-elevation-light-blur-0);
-  --chip-shadow-color: var(--joy-elevation-light-color-0);
-  --chip-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
-  --chip-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
-  --chip-shadow-spread: var(--joy-elevation-light-spread-0);
-  --chip-transition-duration: var(--joy-duration-short);
+  --chip-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --chip-shadow-blur: var(--joy-elevation-light-blur);
+  --chip-shadow-color: var(--joy-elevation-light-color);
+  --chip-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --chip-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --chip-shadow-spread: var(--joy-elevation-light-spread);
+  --chip-transition-duration: var(--mosaik-duration-short);
   --chip-transition-mode: ease;
   --chip-transition-property: background-color, color, border-color, box-shadow, opacity, box-shadow;
   --chip-translate: none;
@@ -170,6 +170,8 @@ export function chipElementJoyStyle() {
 
 :host([appearance="solid"]) {
   --chip-background-color: var(--joy-scheme-highlight);
+  --chip-focus-ring-inward-offset: 0px;
+  --chip-focus-ring-outward-offset: 0px;
 }
 
 :host([appearance="outline"]:not([disabled]:not([disabled="false"]))) {
@@ -177,6 +179,7 @@ export function chipElementJoyStyle() {
   --chip-border-color: var(--joy-color-neutral-500);
   --chip-border-width: var(--joy-layout-thickness);
   --chip-border-style: solid;
+  --chip-focus-ring-outward-offset: 0px;
 }
 
 :host([appearance="outline"][is-checkable]:hover:not([disabled]:not([disabled="false"]))) {
@@ -186,6 +189,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-primary-500);
   --chip-border-color: var(--joy-color-primary-500);
+  --chip-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="primary"][is-checkable]:hover) {
@@ -195,6 +199,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-secondary-500);
   --chip-border-color: var(--joy-color-secondary-500);
+  --chip-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="secondary"][is-checkable]:hover) {
@@ -204,6 +209,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-tertiary-500);
   --chip-border-color: var(--joy-color-tertiary-500);
+  --chip-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="tertiary"][is-checkable]:hover) {
@@ -213,6 +219,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-danger-500);
   --chip-border-color: var(--joy-color-danger-500);
+  --chip-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="danger"][is-checkable]:hover) {
@@ -222,6 +229,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-warning-500);
   --chip-border-color: var(--joy-color-warning-500);
+  --chip-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="warning"][is-checkable]:hover) {
@@ -231,6 +239,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-success-500);
   --chip-border-color: var(--joy-color-success-500);
+  --chip-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="success"][is-checkable]:hover) {
@@ -240,6 +249,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-info-500);
   --chip-border-color: var(--joy-color-info-500);
+  --chip-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="info"][is-checkable]:hover) {
@@ -249,6 +259,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-highlight-500);
   --chip-border-color: var(--joy-color-highlight-500);
+  --chip-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="highlight"][is-checkable]:hover) {
@@ -258,6 +269,7 @@ export function chipElementJoyStyle() {
 :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-neutral-500);
   --chip-border-color: var(--joy-color-neutral-500);
+  --chip-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="outline"][variant="neutral"][is-checkable]:hover) {
@@ -266,6 +278,8 @@ export function chipElementJoyStyle() {
 
 :host([appearance="plain"]) {
   --chip-border-width: 0px;
+  --chip-focus-ring-inward-offset: 0px;
+  --chip-focus-ring-outward-offset: 0px;
 }
 
 :host([appearance="plain"]) [part="focusRing"] {
@@ -275,6 +289,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-primary-500);
   --chip-border-color: var(--joy-color-primary-500);
+  --chip-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="primary"][is-checkable]:hover) {
@@ -288,6 +303,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-secondary-500);
   --chip-border-color: var(--joy-color-secondary-500);
+  --chip-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="secondary"][is-checkable]:hover) {
@@ -301,6 +317,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-tertiary-500);
   --chip-border-color: var(--joy-color-tertiary-500);
+  --chip-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="tertiary"][is-checkable]:hover) {
@@ -314,6 +331,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-danger-500);
   --chip-border-color: var(--joy-color-danger-500);
+  --chip-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="danger"][is-checkable]:hover) {
@@ -327,6 +345,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-warning-500);
   --chip-border-color: var(--joy-color-warning-500);
+  --chip-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="warning"][is-checkable]:hover) {
@@ -340,6 +359,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-success-500);
   --chip-border-color: var(--joy-color-success-500);
+  --chip-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="success"][is-checkable]:hover) {
@@ -353,6 +373,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-info-500);
   --chip-border-color: var(--joy-color-info-500);
+  --chip-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="info"][is-checkable]:hover) {
@@ -366,6 +387,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-highlight-500);
   --chip-border-color: var(--joy-color-highlight-500);
+  --chip-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="highlight"][is-checkable]:hover) {
@@ -379,6 +401,7 @@ export function chipElementJoyStyle() {
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-neutral-500);
   --chip-border-color: var(--joy-color-neutral-500);
+  --chip-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="plain"][variant="neutral"][is-checkable]:hover) {
@@ -391,6 +414,8 @@ export function chipElementJoyStyle() {
 
 :host([appearance="soft"]) {
   --chip-border-width: 0px;
+  --chip-focus-ring-inward-offset: 0px;
+  --chip-focus-ring-outward-offset: 0px;
 }
 
 :host([appearance="soft"]) [part="focusRing"] {
@@ -409,6 +434,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-primary-500);
   --chip-background-color: var(--joy-color-primary-100);
+  --chip-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="primary"][is-checkable]:hover) {
@@ -418,6 +444,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-secondary-500);
   --chip-background-color: var(--joy-color-secondary-100);
+  --chip-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="secondary"][is-checkable]:hover) {
@@ -427,6 +454,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-tertiary-500);
   --chip-background-color: var(--joy-color-tertiary-100);
+  --chip-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="tertiary"][is-checkable]:hover) {
@@ -436,6 +464,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-danger-500);
   --chip-background-color: var(--joy-color-danger-100);
+  --chip-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="danger"][is-checkable]:hover) {
@@ -445,6 +474,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-warning-500);
   --chip-background-color: var(--joy-color-warning-100);
+  --chip-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="warning"][is-checkable]:hover) {
@@ -454,6 +484,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-success-500);
   --chip-background-color: var(--joy-color-success-100);
+  --chip-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="success"][is-checkable]:hover) {
@@ -463,6 +494,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-info-500);
   --chip-background-color: var(--joy-color-info-100);
+  --chip-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="info"][is-checkable]:hover) {
@@ -472,6 +504,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-highlight-500);
   --chip-background-color: var(--joy-color-highlight-100);
+  --chip-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="highlight"][is-checkable]:hover) {
@@ -481,6 +514,7 @@ export function chipElementJoyStyle() {
 :host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-neutral-500);
   --chip-background-color: var(--joy-color-neutral-100);
+  --chip-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="soft"][variant="neutral"][is-checkable]:hover) {
@@ -490,6 +524,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-primary-500);
   --chip-border-color: var(--joy-color-primary-500);
+  --chip-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="primary"][is-checkable]:hover) {
@@ -499,6 +534,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-primary-500);
   --chip-foreground-color: var(--joy-color-primary-0);
+  --chip-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([appearance="solid"][variant="primary"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -508,6 +544,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-secondary-500);
   --chip-border-color: var(--joy-color-secondary-500);
+  --chip-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="secondary"][is-checkable]:hover) {
@@ -517,6 +554,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-secondary-500);
   --chip-foreground-color: var(--joy-color-secondary-0);
+  --chip-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([appearance="solid"][variant="secondary"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -526,6 +564,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-tertiary-500);
   --chip-border-color: var(--joy-color-tertiary-500);
+  --chip-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="tertiary"][is-checkable]:hover) {
@@ -535,6 +574,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-tertiary-500);
   --chip-foreground-color: var(--joy-color-tertiary-0);
+  --chip-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([appearance="solid"][variant="tertiary"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -544,6 +584,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-danger-500);
   --chip-border-color: var(--joy-color-danger-500);
+  --chip-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="danger"][is-checkable]:hover) {
@@ -553,6 +594,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-danger-500);
   --chip-foreground-color: var(--joy-color-danger-0);
+  --chip-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([appearance="solid"][variant="danger"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -562,6 +604,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-warning-500);
   --chip-border-color: var(--joy-color-warning-500);
+  --chip-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="warning"][is-checkable]:hover) {
@@ -571,6 +614,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-warning-500);
   --chip-foreground-color: var(--joy-color-warning-0);
+  --chip-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([appearance="solid"][variant="warning"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -580,6 +624,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-success-500);
   --chip-border-color: var(--joy-color-success-500);
+  --chip-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="success"][is-checkable]:hover) {
@@ -589,6 +634,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-success-500);
   --chip-foreground-color: var(--joy-color-success-0);
+  --chip-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([appearance="solid"][variant="success"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -598,6 +644,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-info-500);
   --chip-border-color: var(--joy-color-info-500);
+  --chip-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="info"][is-checkable]:hover) {
@@ -607,6 +654,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-info-500);
   --chip-foreground-color: var(--joy-color-info-0);
+  --chip-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([appearance="solid"][variant="info"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -616,6 +664,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-highlight-500);
   --chip-border-color: var(--joy-color-highlight-500);
+  --chip-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="highlight"][is-checkable]:hover) {
@@ -625,6 +674,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-highlight-500);
   --chip-foreground-color: var(--joy-color-highlight-0);
+  --chip-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([appearance="solid"][variant="highlight"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {
@@ -634,6 +684,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --chip-foreground-color: var(--joy-color-neutral-500);
   --chip-border-color: var(--joy-color-neutral-500);
+  --chip-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host(:not([disabled]:not([disabled="false"]))[appearance="solid"][variant="neutral"][is-checkable]:hover) {
@@ -643,6 +694,7 @@ export function chipElementJoyStyle() {
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --chip-background-color: var(--joy-color-neutral-500);
   --chip-foreground-color: var(--joy-color-neutral-0);
+  --chip-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host([appearance="solid"][variant="neutral"][is-checkable]:not([disabled]:not([disabled="false"])):hover) {

package/Controls/Components/Media/Chip/Themes/ChipElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chip/Themes/ChipElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mBAAmB;IAC/B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkpBT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chip/Themes/ChipElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mBAAmB;IAC/B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAssBT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chip/Themes/ChipElement.Memphis.js

@@ -38,12 +38,12 @@ export function chipElementMemphisStyle() {
   --chip-padding-top: var(--memphis-layout-space);
   --chip-ripple-color: unset;
   --chip-ripple-duration: .2s;
-  --chip-shadow: var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0);
-  --chip-shadow-blur: var(--memphis-elevation-light-blur-0);
-  --chip-shadow-color: var(--memphis-elevation-light-color-0);
-  --chip-shadow-offset-x: var(--memphis-elevation-light-offset-x-0);
-  --chip-shadow-offset-y: var(--memphis-elevation-light-offset-y-0);
-  --chip-shadow-spread: var(--memphis-elevation-light-spread-0);
+  --chip-shadow: var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color);
+  --chip-shadow-blur: var(--memphis-elevation-light-blur);
+  --chip-shadow-color: var(--memphis-elevation-light-color);
+  --chip-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --chip-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --chip-shadow-spread: var(--memphis-elevation-light-spread);
   --chip-transition-duration: .2s;
   --chip-transition-mode: ease;
   --chip-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAlphaSliderElement.Cosmopolitan.js

@@ -37,19 +37,19 @@ export function colorEditorAlphaSliderElementCosmopolitanStyle() {
   --color-editor-alpha-slider-padding-left: unset;
   --color-editor-alpha-slider-padding-right: unset;
   --color-editor-alpha-slider-padding-top: unset;
-  --color-editor-alpha-slider-shadow: var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1);
-  --color-editor-alpha-slider-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --color-editor-alpha-slider-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --color-editor-alpha-slider-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --color-editor-alpha-slider-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --color-editor-alpha-slider-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --color-editor-alpha-slider-shadow: var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color);
+  --color-editor-alpha-slider-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --color-editor-alpha-slider-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --color-editor-alpha-slider-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --color-editor-alpha-slider-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --color-editor-alpha-slider-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --color-editor-alpha-slider-thumb-background-color: var(--cosmopolitan-scheme-neutral-container);
   --color-editor-alpha-slider-thumb-border-color: transparent;
   --color-editor-alpha-slider-thumb-border-radius: 50%;
   --color-editor-alpha-slider-thumb-border-width: 0;
-  --color-editor-alpha-slider-thumb-shadow: var(--cosmopolitan-elevation-light-1);
+  --color-editor-alpha-slider-thumb-shadow: var(--cosmopolitan-elevation-light);
   --color-editor-alpha-slider-thumb-size: calc(var(--cosmopolitan-layout-space) * 1.75);
-  --color-editor-alpha-slider-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-alpha-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-alpha-slider-transition-mode: ease;
   --color-editor-alpha-slider-transition-property: box-shadow, border-color;
   --color-editor-alpha-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAlphaSliderElement.Joy.js

@@ -20,7 +20,7 @@ export function colorEditorAlphaSliderElementJoyStyle() {
   --color-editor-alpha-slider-border-width: 0;
   --color-editor-alpha-slider-checkerboard-size: 8px;
   --color-editor-alpha-slider-focus-ring-active-width: 8px;
-  --color-editor-alpha-slider-focus-ring-color: var(--joy-color-primary-500);
+  --color-editor-alpha-slider-focus-ring-color: var(--joy-scheme-highlight);
   --color-editor-alpha-slider-focus-ring-inward-offset: 2px;
   --color-editor-alpha-slider-focus-ring-outward-offset: 2px;
   --color-editor-alpha-slider-font-family: unset;
@@ -37,19 +37,19 @@ export function colorEditorAlphaSliderElementJoyStyle() {
   --color-editor-alpha-slider-padding-left: unset;
   --color-editor-alpha-slider-padding-right: unset;
   --color-editor-alpha-slider-padding-top: unset;
-  --color-editor-alpha-slider-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
-  --color-editor-alpha-slider-shadow-blur: var(--joy-elevation-light-blur-1);
-  --color-editor-alpha-slider-shadow-color: var(--joy-elevation-light-color-1);
-  --color-editor-alpha-slider-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --color-editor-alpha-slider-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --color-editor-alpha-slider-shadow-spread: var(--joy-elevation-light-spread-1);
+  --color-editor-alpha-slider-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --color-editor-alpha-slider-shadow-blur: var(--joy-elevation-light-blur);
+  --color-editor-alpha-slider-shadow-color: var(--joy-elevation-light-color);
+  --color-editor-alpha-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --color-editor-alpha-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --color-editor-alpha-slider-shadow-spread: var(--joy-elevation-light-spread);
   --color-editor-alpha-slider-thumb-background-color: var(--joy-scheme-highlight);
   --color-editor-alpha-slider-thumb-border-color: var(--joy-scheme-highlight);
   --color-editor-alpha-slider-thumb-border-radius: 50%;
   --color-editor-alpha-slider-thumb-border-width: var(--joy-layout-thickness);
   --color-editor-alpha-slider-thumb-shadow: var(--joy-elevation-light-light);
   --color-editor-alpha-slider-thumb-size: 14px;
-  --color-editor-alpha-slider-transition-duration: var(--joy-duration-short);
+  --color-editor-alpha-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-alpha-slider-transition-mode: ease;
   --color-editor-alpha-slider-transition-property: box-shadow, border-color;
   --color-editor-alpha-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAlphaSliderElement.Memphis.js

@@ -37,19 +37,19 @@ export function colorEditorAlphaSliderElementMemphisStyle() {
   --color-editor-alpha-slider-padding-left: unset;
   --color-editor-alpha-slider-padding-right: unset;
   --color-editor-alpha-slider-padding-top: unset;
-  --color-editor-alpha-slider-shadow: var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1);
-  --color-editor-alpha-slider-shadow-blur: var(--memphis-elevation-light-blur-1);
-  --color-editor-alpha-slider-shadow-color: var(--memphis-elevation-light-color-1);
-  --color-editor-alpha-slider-shadow-offset-x: var(--memphis-elevation-light-offset-x-1);
-  --color-editor-alpha-slider-shadow-offset-y: var(--memphis-elevation-light-offset-y-1);
-  --color-editor-alpha-slider-shadow-spread: var(--memphis-elevation-light-spread-1);
+  --color-editor-alpha-slider-shadow: var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color);
+  --color-editor-alpha-slider-shadow-blur: var(--memphis-elevation-light-blur);
+  --color-editor-alpha-slider-shadow-color: var(--memphis-elevation-light-color);
+  --color-editor-alpha-slider-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --color-editor-alpha-slider-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --color-editor-alpha-slider-shadow-spread: var(--memphis-elevation-light-spread);
   --color-editor-alpha-slider-thumb-background-color: var(--memphis-scheme-surface);
   --color-editor-alpha-slider-thumb-border-color: var(--memphis-scheme-contrast);
   --color-editor-alpha-slider-thumb-border-radius: 0;
   --color-editor-alpha-slider-thumb-border-width: var(--memphis-layout-thickness);
   --color-editor-alpha-slider-thumb-shadow: var(--memphis-shadow-1);
   --color-editor-alpha-slider-thumb-size: calc(var(--memphis-layout-space) * 1.75);
-  --color-editor-alpha-slider-transition-duration: var(--memphis-duration-short);
+  --color-editor-alpha-slider-transition-duration: var(--mosaik-duration-short);
   --color-editor-alpha-slider-transition-mode: ease;
   --color-editor-alpha-slider-transition-property: box-shadow, border-color;
   --color-editor-alpha-slider-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAreaElement.Cosmopolitan.js

@@ -36,18 +36,18 @@ export function colorEditorAreaElementCosmopolitanStyle() {
   --color-editor-area-padding-left: unset;
   --color-editor-area-padding-right: unset;
   --color-editor-area-padding-top: unset;
-  --color-editor-area-shadow: var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1);
-  --color-editor-area-shadow-blur: var(--cosmopolitan-elevation-light-blur-1);
-  --color-editor-area-shadow-color: var(--cosmopolitan-elevation-light-color-1);
-  --color-editor-area-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x-1);
-  --color-editor-area-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y-1);
-  --color-editor-area-shadow-spread: var(--cosmopolitan-elevation-light-spread-1);
+  --color-editor-area-shadow: var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color);
+  --color-editor-area-shadow-blur: var(--cosmopolitan-elevation-light-blur);
+  --color-editor-area-shadow-color: var(--cosmopolitan-elevation-light-color);
+  --color-editor-area-shadow-offset-x: var(--cosmopolitan-elevation-light-offset-x);
+  --color-editor-area-shadow-offset-y: var(--cosmopolitan-elevation-light-offset-y);
+  --color-editor-area-shadow-spread: var(--cosmopolitan-elevation-light-spread);
   --color-editor-area-thumb-border-color: var(--cosmopolitan-scheme-surface);
   --color-editor-area-thumb-border-radius: 50%;
   --color-editor-area-thumb-border-width: calc(var(--cosmopolitan-layout-thickness) * 2);
-  --color-editor-area-thumb-shadow: var(--cosmopolitan-elevation-light-1);
+  --color-editor-area-thumb-shadow: var(--cosmopolitan-elevation-light);
   --color-editor-area-thumb-size: calc(var(--cosmopolitan-layout-space) * 1.75);
-  --color-editor-area-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-area-transition-duration: var(--mosaik-duration-short);
   --color-editor-area-transition-mode: ease;
   --color-editor-area-transition-property: box-shadow, border-color;
   --color-editor-area-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAreaElement.Joy.js

@@ -19,7 +19,7 @@ export function colorEditorAreaElementJoyStyle() {
   --color-editor-area-border-style: none;
   --color-editor-area-border-width: 0;
   --color-editor-area-focus-ring-active-width: 8px;
-  --color-editor-area-focus-ring-color: var(--joy-color-primary-500);
+  --color-editor-area-focus-ring-color: var(--joy-scheme-highlight);
   --color-editor-area-focus-ring-inward-offset: 2px;
   --color-editor-area-focus-ring-outward-offset: 2px;
   --color-editor-area-font-family: unset;
@@ -36,18 +36,18 @@ export function colorEditorAreaElementJoyStyle() {
   --color-editor-area-padding-left: unset;
   --color-editor-area-padding-right: unset;
   --color-editor-area-padding-top: unset;
-  --color-editor-area-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
-  --color-editor-area-shadow-blur: var(--joy-elevation-light-blur-1);
-  --color-editor-area-shadow-color: var(--joy-elevation-light-color-1);
-  --color-editor-area-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
-  --color-editor-area-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
-  --color-editor-area-shadow-spread: var(--joy-elevation-light-spread-1);
+  --color-editor-area-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
+  --color-editor-area-shadow-blur: var(--joy-elevation-light-blur);
+  --color-editor-area-shadow-color: var(--joy-elevation-light-color);
+  --color-editor-area-shadow-offset-x: var(--joy-elevation-light-offset-x);
+  --color-editor-area-shadow-offset-y: var(--joy-elevation-light-offset-y);
+  --color-editor-area-shadow-spread: var(--joy-elevation-light-spread);
   --color-editor-area-thumb-border-color: var(--joy-scheme-surface);
   --color-editor-area-thumb-border-radius: 50%;
   --color-editor-area-thumb-border-width: var(--joy-layout-thickness);
   --color-editor-area-thumb-shadow: var(--joy-elevation-light-light);
   --color-editor-area-thumb-size: calc(var(--joy-layout-space) * 1.5);
-  --color-editor-area-transition-duration: var(--joy-duration-short);
+  --color-editor-area-transition-duration: var(--mosaik-duration-short);
   --color-editor-area-transition-mode: ease;
   --color-editor-area-transition-property: box-shadow, border-color;
   --color-editor-area-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAreaElement.Memphis.js

@@ -36,18 +36,18 @@ export function colorEditorAreaElementMemphisStyle() {
   --color-editor-area-padding-left: unset;
   --color-editor-area-padding-right: unset;
   --color-editor-area-padding-top: unset;
-  --color-editor-area-shadow: var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1);
-  --color-editor-area-shadow-blur: var(--memphis-elevation-light-blur-1);
-  --color-editor-area-shadow-color: var(--memphis-elevation-light-color-1);
-  --color-editor-area-shadow-offset-x: var(--memphis-elevation-light-offset-x-1);
-  --color-editor-area-shadow-offset-y: var(--memphis-elevation-light-offset-y-1);
-  --color-editor-area-shadow-spread: var(--memphis-elevation-light-spread-1);
+  --color-editor-area-shadow: var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color);
+  --color-editor-area-shadow-blur: var(--memphis-elevation-light-blur);
+  --color-editor-area-shadow-color: var(--memphis-elevation-light-color);
+  --color-editor-area-shadow-offset-x: var(--memphis-elevation-light-offset-x);
+  --color-editor-area-shadow-offset-y: var(--memphis-elevation-light-offset-y);
+  --color-editor-area-shadow-spread: var(--memphis-elevation-light-spread);
   --color-editor-area-thumb-border-color: var(--memphis-scheme-contrast);
   --color-editor-area-thumb-border-radius: 0;
   --color-editor-area-thumb-border-width: var(--memphis-layout-thickness);
   --color-editor-area-thumb-shadow: var(--memphis-shadow-1);
   --color-editor-area-thumb-size: calc(var(--memphis-layout-space) * 1.5);
-  --color-editor-area-transition-duration: var(--memphis-duration-short);
+  --color-editor-area-transition-duration: var(--mosaik-duration-short);
   --color-editor-area-transition-mode: ease;
   --color-editor-area-transition-property: box-shadow, border-color;
   --color-editor-area-translate: none;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorElement.Cosmopolitan.js

@@ -42,7 +42,7 @@ export function colorEditorElementCosmopolitanStyle() {
   --color-editor-shadow-offset-x: unset;
   --color-editor-shadow-offset-y: unset;
   --color-editor-shadow-spread: unset;
-  --color-editor-transition-duration: var(--cosmopolitan-duration-short);
+  --color-editor-transition-duration: var(--mosaik-duration-short);
   --color-editor-transition-mode: ease;
   --color-editor-transition-property: background-color, border-color, box-shadow;
   --color-editor-translate: none;