@breadstone/mosaik-elements-foundation 0.1.21 → 0.1.23

package/Controls/Components/Selectors/Combo/Themes/ComboElement.Joy.js

@@ -13,30 +13,36 @@ import { css } from '../../../../../Dom/Css';
 export function comboElementJoyStyle() {
     return css `
 :host {
+  --combo-background-color: var(--joy-scheme-background);
+  --combo-border-color: var(--joy-scheme-highlight);
+  --combo-border-radius: var(--joy-layout-radius);
+  --combo-border-style: solid;
+  --combo-border-width: var(--joy-layout-thickness);
   --combo-focus-ring-active-width: 8px;
-  --combo-focus-ring-color: var(--joy-color-light-secondary-400);
+  --combo-focus-ring-color: var(--joy-scheme-highlight);
   --combo-focus-ring-inward-offset: 2px;
-  --combo-focus-ring-outward-offset: 2px;
+  --combo-focus-ring-outward-offset: 0px;
+  --combo-focus-ring-width: 0px;
   --combo-font-family: var(--joy-font-family);
   --combo-font-letter-spacing: var(--joy-typography-body2-letter-spacing);
   --combo-font-line-height: var(--joy-typography-body2-line-height);
   --combo-font-size: var(--joy-typography-body2-font-size);
   --combo-font-text-decoration: var(--joy-typography-body2-text-decoration);
   --combo-font-text-transform: var(--joy-typography-body2-text-transform);
-  --combo-font-weight: var(--joy-typography-body2-font-weight);
+  --combo-font-weight: normal;
   --combo-foreground-color: var(--joy-scheme-foreground);
   --combo-gap: var(--joy-layout-space);
-  --combo-padding-bottom: calc(var(--joy-layout-space) / 2);
+  --combo-padding-bottom: var(--joy-layout-space);
   --combo-padding-left: calc(var(--joy-layout-space) * 1.5);
   --combo-padding-right: calc(var(--joy-layout-space) * 1.5);
-  --combo-padding-top: calc(var(--joy-layout-space) / 2);
+  --combo-padding-top: var(--joy-layout-space);
   --combo-shadow: unset unset unset unset unset;
   --combo-shadow-blur: unset;
   --combo-shadow-color: unset;
   --combo-shadow-offset-x: unset;
   --combo-shadow-offset-y: unset;
   --combo-shadow-spread: unset;
-  --combo-transition-duration: var(--joy-duration-short);
+  --combo-transition-duration: var(--mosaik-duration-short);
   --combo-transition-mode: ease;
   --combo-transition-property: transform;
   --combo-translate: none;
@@ -79,6 +85,23 @@ export function comboElementJoyStyle() {
   --focus-ring-outward-offset: var(--combo-focus-ring-outward-offset);
 }
 
+:host [part="input"] {
+  cursor: inherit;
+  background: inherit;
+  --textbox-border-color: var(--combo-border-color);
+  --textbox-border-radius: var(--combo-border-radius);
+}
+
+:host [part="input"][readonly]:not([invalid]) {
+  --textbox-border-color: var(--combo-border-color);
+}
+
+:host [part="input"]::part(suffix) {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
+}
+
 :host [part="popup"] {
   z-index: 100;
 }

package/Controls/Components/Selectors/Combo/Themes/ComboElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Combo/Themes/ComboElement.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,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ComboElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Combo/Themes/ComboElement.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,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8GT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAuHpD"}
+{"version":3,"file":"ComboElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CA6IpD"}

package/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.js

@@ -13,6 +13,11 @@ import { css } from '../../../../../Dom/Css';
 export function comboElementMemphisStyle() {
     return css `
 :host {
+  --combo-background-color: unset;
+  --combo-border-color: unset;
+  --combo-border-radius: unset;
+  --combo-border-style: solid;
+  --combo-border-width: unset;
   --combo-focus-ring-active-width: 8px;
   --combo-focus-ring-color: var(--memphis-color-light-secondary-400);
   --combo-focus-ring-inward-offset: 2px;
@@ -36,7 +41,7 @@ export function comboElementMemphisStyle() {
   --combo-shadow-offset-x: unset;
   --combo-shadow-offset-y: unset;
   --combo-shadow-spread: unset;
-  --combo-transition-duration: var(--memphis-duration-short);
+  --combo-transition-duration: var(--mosaik-duration-short);
   --combo-transition-mode: ease;
   --combo-transition-property: transform;
   --combo-translate: none;
@@ -79,6 +84,23 @@ export function comboElementMemphisStyle() {
   --focus-ring-outward-offset: var(--combo-focus-ring-outward-offset);
 }
 
+:host [part="input"] {
+  cursor: inherit;
+  background: inherit;
+  --textbox-border-color: var(--combo-border-color);
+  --textbox-border-radius: var(--combo-border-radius);
+}
+
+:host [part="input"][readonly]:not([invalid]) {
+  --textbox-border-color: var(--combo-border-color);
+}
+
+:host [part="input"]::part(suffix) {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
+}
+
 :host [part="popup"] {
   z-index: 100;
 }

package/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ComboElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Combo/Themes/ComboElement.Memphis.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2IT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Combo/Themes/ComboItemElement.Joy.js

@@ -19,7 +19,7 @@ export function comboItemElementJoyStyle() {
   --combo-item-border-style: solid;
   --combo-item-border-width: 0px;
   --combo-item-focus-ring-active-width: 8px;
-  --combo-item-focus-ring-color: var(--joy-color-light-secondary-400);
+  --combo-item-focus-ring-color: var(--joy-scheme-highlight);
   --combo-item-focus-ring-inward-offset: 2px;
   --combo-item-focus-ring-outward-offset: 2px;
   --combo-item-font-family: var(--joy-font-family);
@@ -43,7 +43,7 @@ export function comboItemElementJoyStyle() {
   --combo-item-shadow-offset-x: unset;
   --combo-item-shadow-offset-y: unset;
   --combo-item-shadow-spread: unset;
-  --combo-item-transition-duration: var(--joy-duration-short);
+  --combo-item-transition-duration: var(--mosaik-duration-short);
   --combo-item-transition-mode: ease;
   --combo-item-transition-property: background-color, color, border-color, opacity, box-shadow;
   --combo-item-translate: none;

package/Controls/Components/Selectors/Combo/Themes/ComboItemElement.Memphis.js

@@ -43,7 +43,7 @@ export function comboItemElementMemphisStyle() {
   --combo-item-shadow-offset-x: unset;
   --combo-item-shadow-offset-y: unset;
   --combo-item-shadow-spread: unset;
-  --combo-item-transition-duration: var(--memphis-duration-short);
+  --combo-item-transition-duration: var(--mosaik-duration-short);
   --combo-item-transition-mode: ease;
   --combo-item-transition-property: background-color, color, border-color, box-shadow, transform;
   --combo-item-translate: none;

package/Controls/Components/Selectors/List/Themes/ListElement.Joy.js

@@ -37,7 +37,7 @@ export function listElementJoyStyle() {
   --list-shadow-offset-x: unset;
   --list-shadow-offset-y: unset;
   --list-shadow-spread: unset;
-  --list-transition-duration: var(--joy-duration-short);
+  --list-transition-duration: var(--mosaik-duration-short);
   --list-transition-mode: ease;
   --list-transition-property: all;
   --list-translate: none;

package/Controls/Components/Selectors/List/Themes/ListItemElement.Joy.js

@@ -43,7 +43,7 @@ export function listItemElementJoyStyle() {
   --list-item-shadow-offset-x: unset;
   --list-item-shadow-offset-y: unset;
   --list-item-shadow-spread: unset;
-  --list-item-transition-duration: var(--joy-duration-short);
+  --list-item-transition-duration: var(--mosaik-duration-short);
   --list-item-transition-mode: ease;
   --list-item-transition-property: border-color, background-color;
   --list-item-translate: none;

package/Controls/Components/Selectors/List/Themes/ListItemGroupElement.Joy.js

@@ -37,7 +37,7 @@ export function listItemGroupElementJoyStyle() {
   --list-item-group-shadow-offset-x: unset;
   --list-item-group-shadow-offset-y: unset;
   --list-item-group-shadow-spread: unset;
-  --list-item-group-transition-duration: var(--joy-duration-short);
+  --list-item-group-transition-duration: var(--mosaik-duration-short);
   --list-item-group-transition-mode: ease;
   --list-item-group-transition-property: all;
   --list-item-group-translate: none;

package/Controls/Components/Selectors/Menu/Themes/MenuElement.Joy.js

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

package/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,SAAS,CAsXnD"}
+{"version":3,"file":"MenuItemElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,SAAS,CAmanD"}

package/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Joy.js

@@ -47,7 +47,7 @@ export function menuItemElementJoyStyle() {
   --menu-item-shadow-offset-x: unset;
   --menu-item-shadow-offset-y: unset;
   --menu-item-shadow-spread: unset;
-  --menu-item-transition-duration: var(--joy-duration-short);
+  --menu-item-transition-duration: var(--mosaik-duration-short);
   --menu-item-transition-mode: ease;
   --menu-item-transition-property: background-color, color, border-color, opacity, box-shadow;
   --menu-item-translate: none;
@@ -221,166 +221,211 @@ export function menuItemElementJoyStyle() {
   --menu-item-foreground-color: var(--joy-color-primary-800);
 }
 
-:host(:not([disabled]:not([disabled="false"]))[is-active]) slot[name="subLabel"] mosaik-text, :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+:host(:not([disabled]:not([disabled="false"]))[is-active]) slot[name="subLabel"] mosaik-text {
   --menu-item-foreground-color: var(--joy-color-primary-500);
 }
 
+:host([appearance="plain"]), :host([appearance="solid"]) {
+  --menu-item-focus-ring-inward-offset: 0px;
+  --menu-item-focus-ring-outward-offset: 0px;
+}
+
+:host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-primary-500);
+}
+
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-100);
   --menu-item-foreground-color: var(--joy-color-primary-500);
+  --menu-item-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --menu-item-background-color: var(--joy-color-primary-500);
   --menu-item-foreground-color: var(--joy-color-primary-0);
+  --menu-item-focus-ring-color: var(--joy-color-neutral-500);
 }
 
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
   --menu-item-background-color: var(--joy-color-primary-600);
+  --menu-item-focus-ring-color: var(--joy-color-neutral-500);
 }
 
     `;

package/Controls/Components/Selectors/Menu/Themes/MenuItemElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Menu/Themes/MenuItemElement.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoXT,CAAC;AACN,CAAC"}
+{"version":3,"file":"MenuItemElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Menu/Themes/MenuItemElement.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiaT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Menu/Themes/MenuItemGroupElement.Joy.js

@@ -48,7 +48,7 @@ export function menuItemGroupElementJoyStyle() {
   --menu-item-group-shadow-offset-x: unset;
   --menu-item-group-shadow-offset-y: unset;
   --menu-item-group-shadow-spread: unset;
-  --menu-item-group-transition-duration: var(--joy-duration-short);
+  --menu-item-group-transition-duration: var(--mosaik-duration-short);
   --menu-item-group-transition-mode: ease;
   --menu-item-group-transition-property: background-color, color, border-color, box-shadow;
   --menu-item-group-translate: none;

package/Controls/Components/Selectors/Segment/Themes/SegmentElement.Cosmopolitan.js

@@ -32,12 +32,12 @@ export function segmentElementCosmopolitanStyle() {
   --segment-padding-left: unset;
   --segment-padding-right: unset;
   --segment-padding-top: unset;
-  --segment-shadow: var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0);
-  --segment-shadow-blur: var(--cosmopolitan-elevation-semilight-blur-0);
-  --segment-shadow-color: var(--cosmopolitan-elevation-semilight-color-0);
-  --segment-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x-0);
-  --segment-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y-0);
-  --segment-shadow-spread: var(--cosmopolitan-elevation-semilight-spread-0);
+  --segment-shadow: var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color);
+  --segment-shadow-blur: var(--cosmopolitan-elevation-semilight-blur);
+  --segment-shadow-color: var(--cosmopolitan-elevation-semilight-color);
+  --segment-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x);
+  --segment-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y);
+  --segment-shadow-spread: var(--cosmopolitan-elevation-semilight-spread);
   --segment-transition-duration: var(--cosmopolitan-layout-transition);
   --segment-transition-mode: ease;
   --segment-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Selectors/Segment/Themes/SegmentElement.Joy.js

@@ -32,12 +32,12 @@ export function segmentElementJoyStyle() {
   --segment-padding-left: var(--joy-layout-space);
   --segment-padding-right: var(--joy-layout-space);
   --segment-padding-top: var(--joy-layout-space);
-  --segment-shadow: var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0);
-  --segment-shadow-blur: var(--joy-elevation-semilight-blur-0);
-  --segment-shadow-color: var(--joy-elevation-semilight-color-0);
-  --segment-shadow-offset-x: var(--joy-elevation-semilight-offset-x-0);
-  --segment-shadow-offset-y: var(--joy-elevation-semilight-offset-y-0);
-  --segment-shadow-spread: var(--joy-elevation-semilight-spread-0);
+  --segment-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
+  --segment-shadow-blur: var(--joy-elevation-semilight-blur);
+  --segment-shadow-color: var(--joy-elevation-semilight-color);
+  --segment-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
+  --segment-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
+  --segment-shadow-spread: var(--joy-elevation-semilight-spread);
   --segment-transition-duration: var(--joy-layout-transition);
   --segment-transition-mode: ease;
   --segment-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Selectors/Segment/Themes/SegmentElement.Memphis.js

@@ -32,12 +32,12 @@ export function segmentElementMemphisStyle() {
   --segment-padding-left: var(--memphis-layout-space);
   --segment-padding-right: var(--memphis-layout-space);
   --segment-padding-top: var(--memphis-layout-space);
-  --segment-shadow: var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0);
-  --segment-shadow-blur: var(--memphis-elevation-semilight-blur-0);
-  --segment-shadow-color: var(--memphis-elevation-semilight-color-0);
-  --segment-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
-  --segment-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
-  --segment-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --segment-shadow: var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color);
+  --segment-shadow-blur: var(--memphis-elevation-semilight-blur);
+  --segment-shadow-color: var(--memphis-elevation-semilight-color);
+  --segment-shadow-offset-x: var(--memphis-elevation-semilight-offset-x);
+  --segment-shadow-offset-y: var(--memphis-elevation-semilight-offset-y);
+  --segment-shadow-spread: var(--memphis-elevation-semilight-spread);
   --segment-transition-duration: var(--memphis-layout-transition);
   --segment-transition-mode: ease;
   --segment-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js

@@ -34,12 +34,12 @@ export function tabElementCosmopolitanStyle() {
   --tab-padding-right: 16px;
   --tab-padding-top: 8px;
   --tab-panel-background-color: var(--tab-background-color);
-  --tab-shadow: var(--cosmopolitan-elevation-bold-offset-x-0) var(--cosmopolitan-elevation-bold-offset-y-0) var(--cosmopolitan-elevation-bold-blur-0) var(--cosmopolitan-elevation-bold-spread-0) var(--cosmopolitan-elevation-bold-color-0);
-  --tab-shadow-blur: var(--cosmopolitan-elevation-bold-blur-0);
-  --tab-shadow-color: var(--cosmopolitan-elevation-bold-color-0);
-  --tab-shadow-offset-x: var(--cosmopolitan-elevation-bold-offset-x-0);
-  --tab-shadow-offset-y: var(--cosmopolitan-elevation-bold-offset-y-0);
-  --tab-shadow-spread: var(--cosmopolitan-elevation-bold-spread-0);
+  --tab-shadow: var(--cosmopolitan-elevation-bold-offset-x) var(--cosmopolitan-elevation-bold-offset-y) var(--cosmopolitan-elevation-bold-blur) var(--cosmopolitan-elevation-bold-spread) var(--cosmopolitan-elevation-bold-color);
+  --tab-shadow-blur: var(--cosmopolitan-elevation-bold-blur);
+  --tab-shadow-color: var(--cosmopolitan-elevation-bold-color);
+  --tab-shadow-offset-x: var(--cosmopolitan-elevation-bold-offset-x);
+  --tab-shadow-offset-y: var(--cosmopolitan-elevation-bold-offset-y);
+  --tab-shadow-spread: var(--cosmopolitan-elevation-bold-spread);
   --tab-strip-background-color: var(--cosmopolitan-scheme-transparent);
   --tab-strip-padding-bottom: 0;
   --tab-strip-padding-left: 0;

package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js

@@ -34,18 +34,18 @@ export function tabElementJoyStyle() {
   --tab-padding-right: calc(var(--joy-layout-space) * 2);
   --tab-padding-top: var(--joy-layout-space);
   --tab-panel-background-color: var(--tab-background-color);
-  --tab-shadow: var(--joy-elevation-bold-offset-x-0) var(--joy-elevation-bold-offset-y-0) var(--joy-elevation-bold-blur-0) var(--joy-elevation-bold-spread-0) var(--joy-elevation-bold-color-0);
-  --tab-shadow-blur: var(--joy-elevation-bold-blur-0);
-  --tab-shadow-color: var(--joy-elevation-bold-color-0);
-  --tab-shadow-offset-x: var(--joy-elevation-bold-offset-x-0);
-  --tab-shadow-offset-y: var(--joy-elevation-bold-offset-y-0);
-  --tab-shadow-spread: var(--joy-elevation-bold-spread-0);
+  --tab-shadow: var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color);
+  --tab-shadow-blur: var(--joy-elevation-bold-blur);
+  --tab-shadow-color: var(--joy-elevation-bold-color);
+  --tab-shadow-offset-x: var(--joy-elevation-bold-offset-x);
+  --tab-shadow-offset-y: var(--joy-elevation-bold-offset-y);
+  --tab-shadow-spread: var(--joy-elevation-bold-spread);
   --tab-strip-background-color: var(--joy-scheme-transparent);
   --tab-strip-padding-bottom: 0;
   --tab-strip-padding-left: 0;
   --tab-strip-padding-right: 0;
   --tab-strip-padding-top: 0;
-  --tab-transition-duration: var(--joy-duration-short);
+  --tab-transition-duration: var(--mosaik-duration-short);
   --tab-transition-mode: ease;
   --tab-transition-property: background-color, color, border-color, opacity, box-shadow, transform;
   --tab-translate: none;

package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.js

@@ -34,12 +34,12 @@ export function tabElementMemphisStyle() {
   --tab-padding-right: calc(var(--memphis-layout-space) * 2);
   --tab-padding-top: var(--memphis-layout-space);
   --tab-panel-background-color: var(--tab-background-color);
-  --tab-shadow: var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0);
-  --tab-shadow-blur: var(--memphis-elevation-bold-blur-0);
-  --tab-shadow-color: var(--memphis-elevation-bold-color-0);
-  --tab-shadow-offset-x: var(--memphis-elevation-bold-offset-x-0);
-  --tab-shadow-offset-y: var(--memphis-elevation-bold-offset-y-0);
-  --tab-shadow-spread: var(--memphis-elevation-bold-spread-0);
+  --tab-shadow: var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color);
+  --tab-shadow-blur: var(--memphis-elevation-bold-blur);
+  --tab-shadow-color: var(--memphis-elevation-bold-color);
+  --tab-shadow-offset-x: var(--memphis-elevation-bold-offset-x);
+  --tab-shadow-offset-y: var(--memphis-elevation-bold-offset-y);
+  --tab-shadow-spread: var(--memphis-elevation-bold-spread);
   --tab-strip-background-color: var(--memphis-scheme-transparent);
   --tab-strip-padding-bottom: 0;
   --tab-strip-padding-left: 0;

package/Controls/Components/Selectors/TabStrip/Themes/TabStripElement.Joy.js

@@ -37,7 +37,7 @@ export function tabStripElementJoyStyle() {
   --tab-strip-shadow-offset-x: unset;
   --tab-strip-shadow-offset-y: unset;
   --tab-strip-shadow-spread: unset;
-  --tab-strip-transition-duration: var(--joy-duration-short);
+  --tab-strip-transition-duration: var(--mosaik-duration-short);
   --tab-strip-transition-mode: ease;
   --tab-strip-transition-property: background-color, color, border-color, opacity, box-shadow, transform;
   --tab-strip-translate: none;

package/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabStripItemElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAmYvD"}
+{"version":3,"file":"TabStripItemElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/TabStrip/Themes/TabStripItemElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAqZvD"}