@breadstone/mosaik-elements-foundation 0.0.27 → 0.0.29

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.js

@@ -20,11 +20,11 @@ export function timeBoxElementJoyStyle() {
   --timebox-font-letter-spacing: unset;
   --timebox-font-text-decoration: unset;
   --timebox-font-text-transform: unset;
-  --timebox-padding-top: 8px;
-  --timebox-padding-right: 12px;
-  --timebox-padding-bottom: 8px;
-  --timebox-padding-left: 12px;
-  --timebox-gap: 8px;
+  --timebox-padding-top: var(--joy-layout-space);
+  --timebox-padding-right: calc(var(--joy-layout-space) * 1.5);
+  --timebox-padding-bottom: var(--joy-layout-space);
+  --timebox-padding-left: calc(var(--joy-layout-space) * 1.5);
+  --timebox-gap: var(--joy-layout-space);
   --timebox-transition-duration: .2s;
   --timebox-transition-mode: ease;
   --timebox-transition-property: background-color, color, border-color, opacity, box-shadow;
@@ -35,7 +35,7 @@ export function timeBoxElementJoyStyle() {
   --timebox-border-style: solid;
   --timebox-border-width: var(--joy-layout-thickness);
   --timebox-foreground-color: var(--joy-scheme-foreground);
-  --timebox-height: unset;
+  --timebox-height: 56px;
   --timebox-shadow: unset;
 }
 
@@ -291,147 +291,147 @@ export function timeBoxElementJoyStyle() {
   --timebox-foreground-color: var(--joy-color-danger-500);
 }
 
-:host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-primary-500);
 }
 
-:host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-primary-500);
 }
 
-:host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-primary-500);
 }
 
-:host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-primary-500);
 }
 
-:host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-secondary-500);
 }
 
-:host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-secondary-500);
 }
 
-:host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-secondary-500);
 }
 
-:host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-secondary-500);
 }
 
-:host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-tertiary-500);
 }
 
-:host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-tertiary-500);
 }
 
-:host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-tertiary-500);
 }
 
-:host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-tertiary-500);
 }
 
-:host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-danger-500);
 }
 
-:host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-danger-500);
 }
 
-:host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-danger-500);
 }
 
-:host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-danger-500);
 }
 
-:host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-warning-500);
 }
 
-:host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-warning-500);
 }
 
-:host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-warning-500);
 }
 
-:host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-warning-500);
 }
 
-:host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-success-500);
 }
 
-:host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-success-500);
 }
 
-:host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-success-500);
 }
 
-:host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-success-500);
 }
 
-:host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-info-500);
 }
 
-:host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-info-500);
 }
 
-:host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-info-500);
 }
 
-:host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-info-500);
 }
 
-:host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-highlight-500);
 }
 
-:host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-highlight-500);
 }
 
-:host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-highlight-500);
 }
 
-:host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-highlight-500);
 }
 
-:host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):active), :host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) {
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --timebox-border-color: var(--joy-color-neutral-500);
 }
 
-:host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="label"] {
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
   color: var(--joy-color-neutral-500);
 }
 
-:host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) {
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
   --timebox-border-color: vvar(--joy-color-neutral-500);
 }
 
-:host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):focus-within) [part="label"] {
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
   color: var(--joy-color-neutral-500);
 }
 

package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js

@@ -122,16 +122,16 @@ export function toggleSwitchElementJoyStyle() {
   border-radius: min(var(--toggle-switch-border-radius), var(--toggle-switch-border-radius)  + var(--joy-layout-thickness));
 }
 
-:host([invalid]:not([disabled]):not([disabled="false"])) {
+:host([invalid]:not([disabled]:not([disabled="false"]))) {
   --toggle-switch-border-color: var(--joy-color-danger-500);
   --toggle-switch-foreground-color: var(--joy-color-danger-500);
 }
 
-:host([invalid]:not([disabled]):not([disabled="false"])) [part="focusRing"] {
+:host([invalid]:not([disabled]:not([disabled="false"]))) [part="focusRing"] {
   --focus-ring-border-color: var(--joy-color-danger-500);
 }
 
-:host([invalid]:not([disabled]):not([disabled="false"])) [part="checkmark"] {
+:host([invalid]:not([disabled]:not([disabled="false"]))) [part="checkmark"] {
   --checkmark-foreground-color: var(--toggle-switch-foreground-color);
   --checkmark-border-color: var(--toggle-switch-border-color);
   --checkmark-background-color: var(--joy-color-danger-500);

package/Controls/Components/Layouts/Split/Themes/SplitElement.Joy.js

@@ -152,12 +152,12 @@ export function splitElementJoyStyle() {
   height: 100%;
 }
 
-:host(:not([disabled]):not([disabled="false"])) [part="divider"]:hover, :host(:not([disabled]):not([disabled="false"])) [part="divider"]:active, :host(:not([disabled]):not([disabled="false"])) [part="divider"]:focus {
+:host(:not([disabled]:not([disabled="false"]))) [part="divider"]:hover, :host(:not([disabled]:not([disabled="false"]))) [part="divider"]:active, :host(:not([disabled]:not([disabled="false"]))) [part="divider"]:focus {
   --split-divider-background-color: var(--joy-color-primary-500);
   --split-divider-foreground-color: var(--joy-color-primary-0);
 }
 
-:host(:not([disabled]):not([disabled="false"])) [part="divider"]:hover [part="thumb"], :host(:not([disabled]):not([disabled="false"])) [part="divider"]:active [part="thumb"], :host(:not([disabled]):not([disabled="false"])) [part="divider"]:focus [part="thumb"] {
+:host(:not([disabled]:not([disabled="false"]))) [part="divider"]:hover [part="thumb"], :host(:not([disabled]:not([disabled="false"]))) [part="divider"]:active [part="thumb"], :host(:not([disabled]:not([disabled="false"]))) [part="divider"]:focus [part="thumb"] {
   --split-thumb-border-color: var(--joy-color-primary-500);
 }
 

package/Controls/Components/Media/Avatar/Themes/AvatarElement.Joy.js

@@ -137,61 +137,61 @@ export function avatarElementJoyStyle() {
   --avatar-border-style: solid;
 }
 
-:host([appearance="outline"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-scheme-background);
   --avatar-foreground-color: var(--joy-scheme-foreground);
   --avatar-border-color: var(--joy-scheme-highlight);
 }
 
-:host([appearance="outline"][variant="primary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-primary-500);
   --avatar-border-color: var(--joy-color-primary-500);
   --avatar-background-color: var(--joy-color-primary-50);
 }
 
-:host([appearance="outline"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-secondary-500);
   --avatar-border-color: var(--joy-color-secondary-500);
   --avatar-background-color: var(--joy-color-secondary-50);
 }
 
-:host([appearance="outline"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-tertiary-500);
   --avatar-border-color: var(--joy-color-tertiary-500);
   --avatar-background-color: var(--joy-color-tertiary-50);
 }
 
-:host([appearance="outline"][variant="danger"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-danger-500);
   --avatar-border-color: var(--joy-color-danger-500);
   --avatar-background-color: var(--joy-color-danger-50);
 }
 
-:host([appearance="outline"][variant="warning"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-warning-500);
   --avatar-border-color: var(--joy-color-warning-500);
   --avatar-background-color: var(--joy-color-warning-50);
 }
 
-:host([appearance="outline"][variant="success"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-success-500);
   --avatar-border-color: var(--joy-color-success-500);
   --avatar-background-color: var(--joy-color-success-50);
 }
 
-:host([appearance="outline"][variant="info"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-info-500);
   --avatar-border-color: var(--joy-color-info-500);
   --avatar-background-color: var(--joy-color-info-50);
 }
 
-:host([appearance="outline"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-highlight-500);
   --avatar-border-color: var(--joy-color-highlight-500);
   --avatar-background-color: var(--joy-color-highlight-50);
 }
 
-:host([appearance="outline"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-neutral-500);
   --avatar-border-color: var(--joy-color-neutral-500);
   --avatar-background-color: var(--joy-color-neutral-50);
@@ -201,39 +201,39 @@ export function avatarElementJoyStyle() {
   --avatar-border-width: 0px;
 }
 
-:host([appearance="plain"][variant="primary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-primary-500);
 }
 
-:host([appearance="plain"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-secondary-500);
 }
 
-:host([appearance="plain"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-tertiary-500);
 }
 
-:host([appearance="plain"][variant="danger"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-danger-500);
 }
 
-:host([appearance="plain"][variant="warning"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-warning-500);
 }
 
-:host([appearance="plain"][variant="success"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-success-500);
 }
 
-:host([appearance="plain"][variant="info"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-info-500);
 }
 
-:host([appearance="plain"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-highlight-500);
 }
 
-:host([appearance="plain"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --avatar-foreground-color: var(--joy-color-neutral-500);
 }
 
@@ -241,97 +241,97 @@ export function avatarElementJoyStyle() {
   --avatar-border-width: 0px;
 }
 
-:host([appearance="soft"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-scheme-highlight);
   --avatar-foreground-color: var(--joy-scheme-foreground);
 }
 
-:host([appearance="soft"][variant="primary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-primary-100);
   --avatar-foreground-color: var(--joy-color-primary-500);
 }
 
-:host([appearance="soft"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-secondary-100);
   --avatar-foreground-color: var(--joy-color-secondary-500);
 }
 
-:host([appearance="soft"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-tertiary-100);
   --avatar-foreground-color: var(--joy-color-tertiary-500);
 }
 
-:host([appearance="soft"][variant="danger"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-danger-100);
   --avatar-foreground-color: var(--joy-color-danger-500);
 }
 
-:host([appearance="soft"][variant="warning"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-warning-100);
   --avatar-foreground-color: var(--joy-color-warning-500);
 }
 
-:host([appearance="soft"][variant="success"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-success-100);
   --avatar-foreground-color: var(--joy-color-success-500);
 }
 
-:host([appearance="soft"][variant="info"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-info-100);
   --avatar-foreground-color: var(--joy-color-info-500);
 }
 
-:host([appearance="soft"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-highlight-100);
   --avatar-foreground-color: var(--joy-color-highlight-500);
 }
 
-:host([appearance="soft"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-neutral-100);
   --avatar-foreground-color: var(--joy-color-neutral-500);
 }
 
-:host([appearance="solid"][variant="primary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-primary-500);
   --avatar-foreground-color: var(--joy-color-primary-50);
 }
 
-:host([appearance="solid"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-secondary-500);
   --avatar-foreground-color: var(--joy-color-secondary-50);
 }
 
-:host([appearance="solid"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-tertiary-500);
   --avatar-foreground-color: var(--joy-color-tertiary-50);
 }
 
-:host([appearance="solid"][variant="danger"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-danger-500);
   --avatar-foreground-color: var(--joy-color-danger-50);
 }
 
-:host([appearance="solid"][variant="warning"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-warning-500);
   --avatar-foreground-color: var(--joy-color-warning-50);
 }
 
-:host([appearance="solid"][variant="success"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-success-500);
   --avatar-foreground-color: var(--joy-color-success-50);
 }
 
-:host([appearance="solid"][variant="info"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-info-500);
   --avatar-foreground-color: var(--joy-color-info-50);
 }
 
-:host([appearance="solid"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-highlight-500);
   --avatar-foreground-color: var(--joy-color-highlight-50);
 }
 
-:host([appearance="solid"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
+:host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --avatar-background-color: var(--joy-color-neutral-500);
   --avatar-foreground-color: var(--joy-color-neutral-50);
 }

package/Controls/Components/Media/Avatar/Themes/AvatarGroupElement.Cosmopolitan.js

@@ -85,7 +85,7 @@ export function avatarGroupElementCosmopolitanStyle() {
   display: inline-flex;
 }
 
-:host(:hover:not([disabled]):not([disabled="false"])) ::slotted(mosaik-avatar:first-child) {
+:host(:hover:not([disabled]:not([disabled="false"]))) ::slotted(mosaik-avatar:first-child) {
   margin-left: 0;
 }
 

package/Controls/Components/Media/Avatar/Themes/AvatarGroupElement.Joy.js

@@ -85,7 +85,7 @@ export function avatarGroupElementJoyStyle() {
   display: inline-flex;
 }
 
-:host(:hover:not([disabled]):not([disabled="false"])) ::slotted(mosaik-avatar:first-child) {
+:host(:hover:not([disabled]:not([disabled="false"]))) ::slotted(mosaik-avatar:first-child) {
   margin-left: 0;
 }
 
@@ -97,7 +97,7 @@ export function avatarGroupElementJoyStyle() {
   margin-left: calc(0px - (var(--joy-layout-space)));
 }
 
-:host(:hover:not([disabled]):not([disabled="false"])) ::slotted(mosaik-avatar) {
+:host(:hover:not([disabled]:not([disabled="false"]))) ::slotted(mosaik-avatar) {
   margin-left: var(--joy-layout-space);
 }
 

package/Controls/Components/Media/Avatar/Themes/AvatarGroupElement.Retro.js

@@ -85,7 +85,7 @@ export function avatarGroupElementRetroStyle() {
   display: inline-flex;
 }
 
-:host(:hover:not([disabled]):not([disabled="false"])) ::slotted(mosaik-avatar:first-child) {
+:host(:hover:not([disabled]:not([disabled="false"]))) ::slotted(mosaik-avatar:first-child) {
   margin-left: 0;
 }
 

package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js

@@ -209,47 +209,47 @@ export function badgeElementJoyStyle() {
   inset: 0;
 }
 
-:host([variant="primary"]:not([disabled]):not([disabled="false"])) {
+:host([variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-primary-500);
   --badge-foreground-color: var(--joy-color-primary-0);
 }
 
-:host([variant="secondary"]:not([disabled]):not([disabled="false"])) {
+:host([variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-secondary-500);
   --badge-foreground-color: var(--joy-color-secondary-0);
 }
 
-:host([variant="tertiary"]:not([disabled]):not([disabled="false"])) {
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-tertiary-500);
   --badge-foreground-color: var(--joy-color-tertiary-0);
 }
 
-:host([variant="danger"]:not([disabled]):not([disabled="false"])) {
+:host([variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-danger-500);
   --badge-foreground-color: var(--joy-color-danger-0);
 }
 
-:host([variant="warning"]:not([disabled]):not([disabled="false"])) {
+:host([variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-warning-500);
   --badge-foreground-color: var(--joy-color-warning-0);
 }
 
-:host([variant="success"]:not([disabled]):not([disabled="false"])) {
+:host([variant="success"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-success-500);
   --badge-foreground-color: var(--joy-color-success-0);
 }
 
-:host([variant="info"]:not([disabled]):not([disabled="false"])) {
+:host([variant="info"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-info-500);
   --badge-foreground-color: var(--joy-color-info-0);
 }
 
-:host([variant="highlight"]:not([disabled]):not([disabled="false"])) {
+:host([variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-highlight-500);
   --badge-foreground-color: var(--joy-color-highlight-0);
 }
 
-:host([variant="neutral"]:not([disabled]):not([disabled="false"])) {
+:host([variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --badge-background-color: var(--joy-color-neutral-500);
   --badge-foreground-color: var(--joy-color-neutral-0);
 }