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

@breadstone/mosaik-elements-foundation 0.0.26 → 0.0.27

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 (403) hide show

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js CHANGED Viewed

@@ -279,94 +279,94 @@ export function buttonElementJoyStyle() {
   --focus-ring-outward-offset: 0px;
 }
-:host([appearance="outline"]:not([disabled])) {
+:host([appearance="outline"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-scheme-background);
   --button-foreground-color: var(--joy-scheme-foreground);
   --button-border-color: var(--joy-scheme-highlight);
 }
-:host([appearance="outline"]:not([disabled]):hover) {
+:host([appearance="outline"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-scheme-highlight);
 }
-:host([appearance="outline"][variant="primary"]:not([disabled])) {
+:host([appearance="outline"][variant="primary"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-primary-500);
   --button-border-color: var(--joy-color-primary-500);
 }
-:host([appearance="outline"][variant="primary"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="primary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-primary-100);
 }
-:host([appearance="outline"][variant="secondary"]:not([disabled])) {
+:host([appearance="outline"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-secondary-500);
   --button-border-color: var(--joy-color-secondary-500);
 }
-:host([appearance="outline"][variant="secondary"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="secondary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-secondary-100);
 }
-:host([appearance="outline"][variant="tertiary"]:not([disabled])) {
+:host([appearance="outline"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-tertiary-500);
   --button-border-color: var(--joy-color-tertiary-500);
 }
-:host([appearance="outline"][variant="tertiary"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="tertiary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-tertiary-100);
 }
-:host([appearance="outline"][variant="danger"]:not([disabled])) {
+:host([appearance="outline"][variant="danger"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-danger-500);
   --button-border-color: var(--joy-color-danger-500);
 }
-:host([appearance="outline"][variant="danger"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="danger"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-danger-100);
 }
-:host([appearance="outline"][variant="warning"]:not([disabled])) {
+:host([appearance="outline"][variant="warning"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-warning-500);
   --button-border-color: var(--joy-color-warning-500);
 }
-:host([appearance="outline"][variant="warning"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="warning"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-warning-100);
 }
-:host([appearance="outline"][variant="success"]:not([disabled])) {
+:host([appearance="outline"][variant="success"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-success-500);
   --button-border-color: var(--joy-color-success-500);
 }
-:host([appearance="outline"][variant="success"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="success"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-success-100);
 }
-:host([appearance="outline"][variant="info"]:not([disabled])) {
+:host([appearance="outline"][variant="info"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-info-500);
   --button-border-color: var(--joy-color-info-500);
 }
-:host([appearance="outline"][variant="info"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="info"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-info-100);
 }
-:host([appearance="outline"][variant="highlight"]:not([disabled])) {
+:host([appearance="outline"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-highlight-500);
   --button-border-color: var(--joy-color-highlight-500);
 }
-:host([appearance="outline"][variant="highlight"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="highlight"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-highlight-100);
 }
-:host([appearance="outline"][variant="neutral"]:not([disabled])) {
+:host([appearance="outline"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-neutral-500);
   --button-border-color: var(--joy-color-neutral-500);
 }
-:host([appearance="outline"][variant="neutral"]:not([disabled]):hover) {
+:host([appearance="outline"][variant="neutral"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-neutral-100);
 }
@@ -375,95 +375,95 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-scheme-transparent);
 }
-:host([appearance="plain"][disabled]) {
+:host([appearance="plain"][disabled]):not([disabled="false"]) {
   --button-foreground-color: var(--joy-scheme-disabled);
 }
-:host([appearance="plain"]:not([disabled])) [part="focusRing"] {
+:host([appearance="plain"]:not([disabled]):not([disabled="false"])) [part="focusRing"] {
   --focus-ring-outward-offset: 0px;
 }
-:host([appearance="plain"]:not([disabled]):hover) {
+:host([appearance="plain"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-scheme-highlight);
 }
-:host([appearance="plain"][variant="primary"]:not([disabled])) {
+:host([appearance="plain"][variant="primary"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-primary-500);
 }
-:host([appearance="plain"][variant="primary"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="primary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-primary-100);
   --button-foreground-color: var(--joy-color-primary-500);
 }
-:host([appearance="plain"][variant="secondary"]:not([disabled])) {
+:host([appearance="plain"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-secondary-500);
 }
-:host([appearance="plain"][variant="secondary"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="secondary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-secondary-100);
   --button-foreground-color: var(--joy-color-secondary-500);
 }
-:host([appearance="plain"][variant="tertiary"]:not([disabled])) {
+:host([appearance="plain"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-tertiary-500);
 }
-:host([appearance="plain"][variant="tertiary"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="tertiary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-tertiary-100);
   --button-foreground-color: var(--joy-color-tertiary-500);
 }
-:host([appearance="plain"][variant="danger"]:not([disabled])) {
+:host([appearance="plain"][variant="danger"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-danger-500);
 }
-:host([appearance="plain"][variant="danger"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="danger"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-danger-100);
   --button-foreground-color: var(--joy-color-danger-500);
 }
-:host([appearance="plain"][variant="warning"]:not([disabled])) {
+:host([appearance="plain"][variant="warning"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-warning-500);
 }
-:host([appearance="plain"][variant="warning"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="warning"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-warning-100);
   --button-foreground-color: var(--joy-color-warning-500);
 }
-:host([appearance="plain"][variant="success"]:not([disabled])) {
+:host([appearance="plain"][variant="success"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-success-500);
 }
-:host([appearance="plain"][variant="success"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="success"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-success-100);
   --button-foreground-color: var(--joy-color-success-500);
 }
-:host([appearance="plain"][variant="info"]:not([disabled])) {
+:host([appearance="plain"][variant="info"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-info-500);
 }
-:host([appearance="plain"][variant="info"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="info"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-info-100);
   --button-foreground-color: var(--joy-color-info-500);
 }
-:host([appearance="plain"][variant="highlight"]:not([disabled])) {
+:host([appearance="plain"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-highlight-500);
 }
-:host([appearance="plain"][variant="highlight"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="highlight"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-highlight-100);
   --button-foreground-color: var(--joy-color-highlight-500);
 }
-:host([appearance="plain"][variant="neutral"]:not([disabled])) {
+:host([appearance="plain"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
   --button-foreground-color: var(--joy-color-neutral-500);
 }
-:host([appearance="plain"][variant="neutral"]:not([disabled]):hover) {
+:host([appearance="plain"][variant="neutral"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-neutral-100);
   --button-foreground-color: var(--joy-color-neutral-500);
 }
@@ -476,98 +476,98 @@ export function buttonElementJoyStyle() {
   --focus-ring-outward-offset: 0px;
 }
-:host([appearance="soft"]:not([disabled])) {
+:host([appearance="soft"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-scheme-highlight);
   --button-foreground-color: var(--joy-scheme-foreground);
 }
-:host([appearance="soft"][variant="primary"]:not([disabled])) {
+:host([appearance="soft"][variant="primary"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-primary-100);
   --button-foreground-color: var(--joy-color-primary-500);
 }
-:host([appearance="soft"][variant="primary"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="primary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-primary-200);
 }
-:host([appearance="soft"][variant="secondary"]:not([disabled])) {
+:host([appearance="soft"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-secondary-100);
   --button-foreground-color: var(--joy-color-secondary-500);
 }
-:host([appearance="soft"][variant="secondary"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="secondary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-secondary-200);
 }
-:host([appearance="soft"][variant="tertiary"]:not([disabled])) {
+:host([appearance="soft"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-tertiary-100);
   --button-foreground-color: var(--joy-color-tertiary-500);
 }
-:host([appearance="soft"][variant="tertiary"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="tertiary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-tertiary-200);
 }
-:host([appearance="soft"][variant="danger"]:not([disabled])) {
+:host([appearance="soft"][variant="danger"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-danger-100);
   --button-foreground-color: var(--joy-color-danger-500);
 }
-:host([appearance="soft"][variant="danger"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="danger"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-danger-200);
 }
-:host([appearance="soft"][variant="warning"]:not([disabled])) {
+:host([appearance="soft"][variant="warning"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-warning-100);
   --button-foreground-color: var(--joy-color-warning-500);
 }
-:host([appearance="soft"][variant="warning"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="warning"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-warning-200);
 }
-:host([appearance="soft"][variant="success"]:not([disabled])) {
+:host([appearance="soft"][variant="success"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-success-100);
   --button-foreground-color: var(--joy-color-success-500);
 }
-:host([appearance="soft"][variant="success"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="success"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-success-200);
 }
-:host([appearance="soft"][variant="info"]:not([disabled])) {
+:host([appearance="soft"][variant="info"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-info-100);
   --button-foreground-color: var(--joy-color-info-500);
 }
-:host([appearance="soft"][variant="info"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="info"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-info-200);
 }
-:host([appearance="soft"][variant="highlight"]:not([disabled])) {
+:host([appearance="soft"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-highlight-100);
   --button-foreground-color: var(--joy-color-highlight-500);
 }
-:host([appearance="soft"][variant="highlight"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="highlight"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-highlight-200);
 }
-:host([appearance="soft"][variant="neutral"]:not([disabled])) {
+:host([appearance="soft"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
   --_color: min(var(--button-color-scheme), 1) var(--joy-color-primary-900), max(1 - var(--button-color-scheme), 0) var(--joy-color-primary-100);
   --button-background-color: var(--joy-color-neutral-100);
   --button-foreground-color: var(--joy-color-neutral-500);
 }
-:host([appearance="soft"][variant="neutral"]:not([disabled]):hover) {
+:host([appearance="soft"][variant="neutral"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-neutral-200);
 }
@@ -579,89 +579,89 @@ export function buttonElementJoyStyle() {
   --focus-ring-outward-offset: 0px;
 }
-:host([appearance="solid"]:not([disabled])) {
+:host([appearance="solid"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-scheme-background);
   --button-foreground-color: var(--joy-scheme-foreground);
 }
-:host([appearance="solid"][variant="primary"]:not([disabled])) {
+:host([appearance="solid"][variant="primary"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-primary-500);
   --button-foreground-color: var(--joy-color-primary-0);
 }
-:host([appearance="solid"][variant="primary"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="primary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-primary-600);
 }
-:host([appearance="solid"][variant="secondary"]:not([disabled])) {
+:host([appearance="solid"][variant="secondary"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-secondary-500);
   --button-foreground-color: var(--joy-color-secondary-0);
 }
-:host([appearance="solid"][variant="secondary"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="secondary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-secondary-600);
 }
-:host([appearance="solid"][variant="tertiary"]:not([disabled])) {
+:host([appearance="solid"][variant="tertiary"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-tertiary-500);
   --button-foreground-color: var(--joy-color-tertiary-0);
 }
-:host([appearance="solid"][variant="tertiary"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="tertiary"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-tertiary-600);
 }
-:host([appearance="solid"][variant="danger"]:not([disabled])) {
+:host([appearance="solid"][variant="danger"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-danger-500);
   --button-foreground-color: var(--joy-color-danger-0);
 }
-:host([appearance="solid"][variant="danger"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="danger"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-danger-600);
 }
-:host([appearance="solid"][variant="warning"]:not([disabled])) {
+:host([appearance="solid"][variant="warning"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-warning-500);
   --button-foreground-color: var(--joy-color-warning-0);
 }
-:host([appearance="solid"][variant="warning"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="warning"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-warning-600);
 }
-:host([appearance="solid"][variant="success"]:not([disabled])) {
+:host([appearance="solid"][variant="success"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-success-500);
   --button-foreground-color: var(--joy-color-success-0);
 }
-:host([appearance="solid"][variant="success"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="success"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-success-600);
 }
-:host([appearance="solid"][variant="info"]:not([disabled])) {
+:host([appearance="solid"][variant="info"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-info-500);
   --button-foreground-color: var(--joy-color-info-0);
 }
-:host([appearance="solid"][variant="info"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="info"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-info-600);
 }
-:host([appearance="solid"][variant="highlight"]:not([disabled])) {
+:host([appearance="solid"][variant="highlight"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-highlight-500);
   --button-foreground-color: var(--joy-color-highlight-0);
 }
-:host([appearance="solid"][variant="highlight"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="highlight"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-highlight-600);
 }
-:host([appearance="solid"][variant="neutral"]:not([disabled])) {
+:host([appearance="solid"][variant="neutral"]:not([disabled]):not([disabled="false"])) {
   --button-background-color: var(--joy-color-neutral-500);
   --button-foreground-color: var(--joy-color-neutral-0);
 }
-:host([appearance="solid"][variant="neutral"]:not([disabled]):hover) {
+:host([appearance="solid"][variant="neutral"]:not([disabled]):not([disabled="false"]):hover) {
   --button-background-color: var(--joy-color-neutral-600);
 }