npm - @breadstone/mosaik-elements-foundation - Versions diffs - 0.0.27 → 0.0.28 - Mend

@breadstone/mosaik-elements-foundation 0.0.27 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js CHANGED Viewed

@@ -20,11 +20,11 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-font-letter-spacing: unset;
   --datetimebox-font-text-decoration: unset;
   --datetimebox-font-text-transform: unset;
-  --datetimebox-padding-top: 8px;
-  --datetimebox-padding-right: 12px;
-  --datetimebox-padding-bottom: 8px;
-  --datetimebox-padding-left: 12px;
-  --datetimebox-gap: 8px;
+  --datetimebox-padding-top: var(--joy-layout-space);
+  --datetimebox-padding-right: calc(var(--joy-layout-space) * 1.5);
+  --datetimebox-padding-bottom: var(--joy-layout-space);
+  --datetimebox-padding-left: calc(var(--joy-layout-space) * 1.5);
+  --datetimebox-gap: var(--joy-layout-space);
   --datetimebox-transition-duration: .2s;
   --datetimebox-transition-mode: ease;
   --datetimebox-transition-property: background-color, color, border-color, opacity, box-shadow;
@@ -35,7 +35,7 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-border-style: solid;
   --datetimebox-border-width: var(--joy-layout-thickness);
   --datetimebox-foreground-color: var(--joy-scheme-foreground);
-  --datetimebox-height: unset;
+  --datetimebox-height: 56px;
   --datetimebox-shadow: unset;
 }
@@ -273,19 +273,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -293,19 +293,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -313,19 +313,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -333,19 +333,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -353,19 +353,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -373,19 +373,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -393,19 +393,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -413,19 +413,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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);
 }
@@ -433,19 +433,19 @@ export function dateTimeBoxElementJoyStyle() {
   --datetimebox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --datetimebox-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) {
   --datetimebox-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/NumberBox/Themes/NumberBoxElement.Cosmopolitan.js CHANGED Viewed

@@ -205,7 +205,7 @@ export function numberBoxElementCosmopolitanStyle() {
   padding-top: 12px;
 }
-:host([disabled]:not([disabled="false"])), :host([readonly]) {
+:host([disabled]:not([disabled="false"])), :host([readonly]:not([readonly="false"])) {
   cursor: default;
 }

package/Controls/Components/Inputs/NumberBox/Themes/NumberBoxElement.Joy.js CHANGED Viewed

@@ -20,11 +20,11 @@ export function numberBoxElementJoyStyle() {
   --numberbox-font-letter-spacing: unset;
   --numberbox-font-text-decoration: unset;
   --numberbox-font-text-transform: unset;
-  --numberbox-padding-top: 8px;
-  --numberbox-padding-right: 12px;
-  --numberbox-padding-bottom: 8px;
-  --numberbox-padding-left: 12px;
-  --numberbox-gap: 8px;
+  --numberbox-padding-top: var(--joy-layout-space);
+  --numberbox-padding-right: calc(var(--joy-layout-space) * 1.5);
+  --numberbox-padding-bottom: var(--joy-layout-space);
+  --numberbox-padding-left: calc(var(--joy-layout-space) * 1.5);
+  --numberbox-gap: var(--joy-layout-space);
   --numberbox-transition-duration: .2s;
   --numberbox-transition-mode: ease;
   --numberbox-transition-property: background-color, color, border-color, opacity, box-shadow;
@@ -205,7 +205,7 @@ export function numberBoxElementJoyStyle() {
   padding-top: 12px;
 }
-:host([disabled]:not([disabled="false"])), :host([readonly]) {
+:host([disabled]:not([disabled="false"])), :host([readonly]:not([readonly="false"])) {
   cursor: default;
 }
@@ -284,19 +284,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-transparent);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -304,19 +304,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -324,19 +324,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -344,19 +344,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -364,19 +364,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -384,19 +384,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -404,19 +404,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -424,19 +424,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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);
 }
@@ -444,19 +444,19 @@ export function numberBoxElementJoyStyle() {
   --numberbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --numberbox-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) {
   --numberbox-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/NumberBox/Themes/NumberBoxElement.Retro.js CHANGED Viewed

@@ -206,7 +206,7 @@ export function numberBoxElementRetroStyle() {
   padding-top: 12px;
 }
-:host([disabled]:not([disabled="false"])), :host([readonly]) {
+:host([disabled]:not([disabled="false"])), :host([readonly]:not([readonly="false"])) {
   cursor: default;
 }