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/SearchBox/Themes/SearchBoxElement.Joy.js CHANGED Viewed

@@ -20,11 +20,11 @@ export function searchBoxElementJoyStyle() {
   --searchbox-font-letter-spacing: unset;
   --searchbox-font-text-decoration: unset;
   --searchbox-font-text-transform: unset;
-  --searchbox-padding-top: 8px;
-  --searchbox-padding-right: 12px;
-  --searchbox-padding-bottom: 8px;
-  --searchbox-padding-left: 12px;
-  --searchbox-gap: 8px;
+  --searchbox-padding-top: var(--joy-layout-space);
+  --searchbox-padding-right: calc(var(--joy-layout-space) * 1.5);
+  --searchbox-padding-bottom: var(--joy-layout-space);
+  --searchbox-padding-left: calc(var(--joy-layout-space) * 1.5);
+  --searchbox-gap: var(--joy-layout-space);
   --searchbox-transition-duration: .2s;
   --searchbox-transition-mode: ease;
   --searchbox-transition-property: all;
@@ -221,39 +221,39 @@ export function searchBoxElementJoyStyle() {
   --searchbox-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-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]):focus-within) {
+: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]):focus-within) {
   --searchbox-border-color: var(--joy-color-neutral-500);
 }

package/Controls/Components/Inputs/Select/Themes/SelectElement.Joy.js CHANGED Viewed

@@ -125,39 +125,39 @@ export function selectElementJoyStyle() {
   text-align: right;
 }
-:host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-primary-500);
 }
-:host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-secondary-500);
 }
-:host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-tertiary-500);
 }
-:host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-danger-500);
 }
-:host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-warning-500);
 }
-:host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-success-500);
 }
-:host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-info-500);
 }
-:host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-highlight-500);
 }
-:host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):focus), :host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):focus) [part="popup"], :host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):hover), :host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid]):hover) [part="popup"] {
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"], :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
   --select-border-color: var(--joy-color-neutral-500);
 }

package/Controls/Components/Inputs/Select/Themes/SelectItemElement.Cosmopolitan.js CHANGED Viewed

@@ -105,7 +105,7 @@ export function selectItemElementCosmopolitanStyle() {
   display: block;
 }
-:host(:not([disabled]):not([disabled="false"]):hover:not(:active)) {
+:host(:not([disabled]:not([disabled="false"])):hover:not(:active)) {
   cursor: pointer;
 }

package/Controls/Components/Inputs/Select/Themes/SelectItemElement.Joy.js CHANGED Viewed

@@ -105,7 +105,7 @@ export function selectItemElementJoyStyle() {
   display: block;
 }
-:host(:not([disabled]):not([disabled="false"]):hover:not(:active)) {
+:host(:not([disabled]:not([disabled="false"])):hover:not(:active)) {
   cursor: pointer;
 }
@@ -113,7 +113,7 @@ export function selectItemElementJoyStyle() {
   --select-item-foreground-color: var(--joy-scheme-disabled);
 }
-:host(:not([disabled]):not([disabled="false"]):hover) {
+:host(:not([disabled]:not([disabled="false"])):hover) {
   --select-item-background-color: var(--joy-scheme-highlight);
 }

package/Controls/Components/Inputs/Select/Themes/SelectItemElement.Retro.js CHANGED Viewed

@@ -105,7 +105,7 @@ export function selectItemElementRetroStyle() {
   display: block;
 }
-:host(:not([disabled]):not([disabled="false"]):hover:not(:active)) {
+:host(:not([disabled]:not([disabled="false"])):hover:not(:active)) {
   cursor: pointer;
 }

package/Controls/Components/Inputs/SignaturePad/Themes/SignaturePadElement.Joy.js CHANGED Viewed

@@ -124,39 +124,39 @@ export function signaturePadElementJoyStyle() {
   --signaturepad-foreground-color: var(--joy-color-neutral-400);
 }
-: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]):focus-within), :host([variant="primary"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="secondary"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="tertiary"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="danger"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="warning"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="success"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="info"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="highlight"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-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]):focus-within), :host([variant="neutral"]:not([disabled]):not([disabled="false"]):not([invalid])[is-focused]) {
+: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]):focus-within), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid])[is-focused]) {
   --signaturepad-border-color: var(--joy-color-neutral-500);
 }

package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,~~CAkblD~~"}
1	+ {"version":3,"file":"TextBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAsblD"}

package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js CHANGED Viewed

@@ -275,6 +275,10 @@ export function textBoxElementJoyStyle() {
   margin-left: var(--joy-layout-space);
 }
+:host([disabled]:not([disabled="false"])), :host([readonly]) {
+  --textbox-border-color: var(--joy-scheme-disabled);
+}
 :host([disabled]:not([disabled="false"])) {
   --textbox-border-color: var(--joy-scheme-disabled);
   --textbox-background-color: var(--joy-scheme-semi-transparent);
@@ -299,147 +303,147 @@ export function textBoxElementJoyStyle() {
   --textbox-background-color: var(--joy-scheme-highlight);
 }
-: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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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) {
   --textbox-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/TextBox/Themes/TextBoxElement.Joy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgbT,CAAC;AACN,CAAC"}
1	+ {"version":3,"file":"TextBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAobT,CAAC;AACN,CAAC"}