@breadstone/mosaik-elements-foundation 0.0.27 → 0.0.28

package/Controls/Components/Inputs/ColorBox/Themes/ColorBoxElement.Joy.js

@@ -20,11 +20,11 @@ export function colorBoxElementJoyStyle() {
   --colorbox-font-letter-spacing: unset;
   --colorbox-font-text-decoration: unset;
   --colorbox-font-text-transform: unset;
-  --colorbox-padding-top: unset;
-  --colorbox-padding-right: unset;
-  --colorbox-padding-bottom: unset;
-  --colorbox-padding-left: unset;
-  --colorbox-gap: unset;
+  --colorbox-padding-top: var(--joy-layout-space);
+  --colorbox-padding-right: calc(var(--joy-layout-space) * 1.5);
+  --colorbox-padding-bottom: var(--joy-layout-space);
+  --colorbox-padding-left: calc(var(--joy-layout-space) * 1.5);
+  --colorbox-gap: var(--joy-layout-space);
   --colorbox-transition-duration: unset;
   --colorbox-transition-mode: unset;
   --colorbox-transition-property: unset;
@@ -35,7 +35,7 @@ export function colorBoxElementJoyStyle() {
   --colorbox-border-style: unset;
   --colorbox-border-width: unset;
   --colorbox-foreground-color: unset;
-  --colorbox-height: unset;
+  --colorbox-height: 56px;
   --colorbox-shadow: unset;
 }
 
@@ -274,147 +274,147 @@ export function colorBoxElementJoyStyle() {
   --colorbox-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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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) {
   --colorbox-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) {
   --colorbox-border-color: var(--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/DateBox/Themes/DateBoxElement.Joy.js

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