@breadstone/mosaik-elements-foundation 0.0.231 → 0.0.233

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

@@ -37,8 +37,8 @@ export function buttonElementJoyStyle() {
   --button-min-height: calc(var(--joy-layout-space) * 5 - var(--joy-layout-space) / 2);
   --button-min-width: 64px;
   --button-padding-bottom: var(--joy-layout-space);
-  --button-padding-left: var(--joy-layout-space);
-  --button-padding-right: var(--joy-layout-space);
+  --button-padding-left: calc(var(--joy-layout-space) * 2);
+  --button-padding-right: calc(var(--joy-layout-space) * 2);
   --button-padding-top: var(--joy-layout-space);
   --button-progress-ring-width: var(--joy-layout-thickness);
   --button-ripple-color: unset;
@@ -144,7 +144,7 @@ export function buttonElementJoyStyle() {
   padding-bottom: var(--button-padding-bottom);
   padding-left: var(--button-padding-left);
   gap: var(--button-gap);
-  background-color: var(--button-background-color);
+  background: var(--button-background-color);
   color: var(--button-foreground-color);
   border-color: var(--button-border-color);
   border-width: var(--button-border-width);
@@ -212,31 +212,6 @@ export function buttonElementJoyStyle() {
   text-transform: inherit;
 }
 
-:host [part="link"] {
-  gap: var(--button-gap);
-  width: 100%;
-  height: 100%;
-  text-decoration: inherit;
-  align-items: center;
-  display: flex;
-}
-
-:host [part="link"] [part="icon"] {
-  color: inherit;
-  flex-shrink: 0;
-}
-
-:host [part="link"] [part="label"] {
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-transform: inherit;
-}
-
 :host([disabled]:not([disabled="false"])) {
   cursor: default;
   pointer-events: none;
@@ -267,7 +242,7 @@ export function buttonElementJoyStyle() {
   min-width: var(--button-min-width);
 }
 
-:host(:not([has-link])[has-icon]) {
+:host([has-icon]) {
   min-width: var(--button-icon-min-width);
   min-height: var(--button-icon-min-height);
 }
@@ -280,10 +255,6 @@ export function buttonElementJoyStyle() {
   background-color: var(--joy-scheme-transparent);
 }
 
-:host [part="link"] {
-  color: var(--button-foreground-color);
-}
-
 :host(:hover), :host(:active), :host(:focus), :host([selected]), :host([checked]) {
   --button-background-color: var(--joy-scheme-highlight);
   --button-border-color: var(--joy-scheme-highlight);
@@ -325,6 +296,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-primary-500);
   --button-border-color: var(--joy-color-primary-500);
   --button-focus-ring-color: var(--joy-color-primary-500);
+  --button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -335,6 +307,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-secondary-500);
   --button-border-color: var(--joy-color-secondary-500);
   --button-focus-ring-color: var(--joy-color-secondary-500);
+  --button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -345,6 +318,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-tertiary-500);
   --button-border-color: var(--joy-color-tertiary-500);
   --button-focus-ring-color: var(--joy-color-tertiary-500);
+  --button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -355,6 +329,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-danger-500);
   --button-border-color: var(--joy-color-danger-500);
   --button-focus-ring-color: var(--joy-color-danger-500);
+  --button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -365,6 +340,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-warning-500);
   --button-border-color: var(--joy-color-warning-500);
   --button-focus-ring-color: var(--joy-color-warning-500);
+  --button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -375,6 +351,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-success-500);
   --button-border-color: var(--joy-color-success-500);
   --button-focus-ring-color: var(--joy-color-success-500);
+  --button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -385,6 +362,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-info-500);
   --button-border-color: var(--joy-color-info-500);
   --button-focus-ring-color: var(--joy-color-info-500);
+  --button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -395,6 +373,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-highlight-500);
   --button-border-color: var(--joy-color-highlight-500);
   --button-focus-ring-color: var(--joy-color-highlight-500);
+  --button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -405,6 +384,7 @@ export function buttonElementJoyStyle() {
   --button-foreground-color: var(--joy-color-neutral-500);
   --button-border-color: var(--joy-color-neutral-500);
   --button-focus-ring-color: var(--joy-color-neutral-500);
+  --button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
@@ -433,6 +413,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-primary-500);
   --button-focus-ring-color: var(--joy-color-primary-500);
+  --button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -443,6 +424,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-secondary-500);
   --button-focus-ring-color: var(--joy-color-secondary-500);
+  --button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -453,6 +435,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-tertiary-500);
   --button-focus-ring-color: var(--joy-color-tertiary-500);
+  --button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -463,6 +446,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-danger-500);
   --button-focus-ring-color: var(--joy-color-danger-500);
+  --button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -473,6 +457,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-warning-500);
   --button-focus-ring-color: var(--joy-color-warning-500);
+  --button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -483,6 +468,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-success-500);
   --button-focus-ring-color: var(--joy-color-success-500);
+  --button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -493,6 +479,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-info-500);
   --button-focus-ring-color: var(--joy-color-info-500);
+  --button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -503,6 +490,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-highlight-500);
   --button-focus-ring-color: var(--joy-color-highlight-500);
+  --button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -513,6 +501,7 @@ export function buttonElementJoyStyle() {
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --button-foreground-color: var(--joy-color-neutral-500);
   --button-focus-ring-color: var(--joy-color-neutral-500);
+  --button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
@@ -535,6 +524,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-primary-100);
   --button-foreground-color: var(--joy-color-primary-500);
   --button-focus-ring-color: var(--joy-color-primary-500);
+  --button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -545,6 +535,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-secondary-100);
   --button-foreground-color: var(--joy-color-secondary-500);
   --button-focus-ring-color: var(--joy-color-secondary-500);
+  --button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -555,6 +546,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-tertiary-100);
   --button-foreground-color: var(--joy-color-tertiary-500);
   --button-focus-ring-color: var(--joy-color-tertiary-500);
+  --button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -565,6 +557,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-danger-100);
   --button-foreground-color: var(--joy-color-danger-500);
   --button-focus-ring-color: var(--joy-color-danger-500);
+  --button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -575,6 +568,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-warning-100);
   --button-foreground-color: var(--joy-color-warning-500);
   --button-focus-ring-color: var(--joy-color-warning-500);
+  --button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -585,6 +579,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-success-100);
   --button-foreground-color: var(--joy-color-success-500);
   --button-focus-ring-color: var(--joy-color-success-500);
+  --button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -595,6 +590,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-info-100);
   --button-foreground-color: var(--joy-color-info-500);
   --button-focus-ring-color: var(--joy-color-info-500);
+  --button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -605,6 +601,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-highlight-100);
   --button-foreground-color: var(--joy-color-highlight-500);
   --button-focus-ring-color: var(--joy-color-highlight-500);
+  --button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -615,6 +612,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-neutral-100);
   --button-foreground-color: var(--joy-color-neutral-500);
   --button-focus-ring-color: var(--joy-color-neutral-500);
+  --button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
@@ -636,6 +634,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-primary-500);
   --button-foreground-color: var(--joy-color-primary-0);
   --button-focus-ring-color: var(--joy-color-primary-500);
+  --button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -646,6 +645,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-secondary-500);
   --button-foreground-color: var(--joy-color-secondary-0);
   --button-focus-ring-color: var(--joy-color-secondary-500);
+  --button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -656,6 +656,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-tertiary-500);
   --button-foreground-color: var(--joy-color-tertiary-0);
   --button-focus-ring-color: var(--joy-color-tertiary-500);
+  --button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -666,6 +667,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-danger-500);
   --button-foreground-color: var(--joy-color-danger-0);
   --button-focus-ring-color: var(--joy-color-danger-500);
+  --button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -676,6 +678,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-warning-500);
   --button-foreground-color: var(--joy-color-warning-0);
   --button-focus-ring-color: var(--joy-color-warning-500);
+  --button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -686,6 +689,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-success-500);
   --button-foreground-color: var(--joy-color-success-0);
   --button-focus-ring-color: var(--joy-color-success-500);
+  --button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -696,6 +700,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-info-500);
   --button-foreground-color: var(--joy-color-info-0);
   --button-focus-ring-color: var(--joy-color-info-500);
+  --button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -706,6 +711,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-highlight-500);
   --button-foreground-color: var(--joy-color-highlight-0);
   --button-focus-ring-color: var(--joy-color-highlight-500);
+  --button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -716,6 +722,7 @@ export function buttonElementJoyStyle() {
   --button-background-color: var(--joy-color-neutral-500);
   --button-foreground-color: var(--joy-color-neutral-0);
   --button-focus-ring-color: var(--joy-color-neutral-500);
+  --button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.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,qBAAqB;IACjC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4wBT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ButtonElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.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,qBAAqB;IACjC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmxBT,CAAC;AACN,CAAC"}

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,SAAS,CAolBrD"}
+{"version":3,"file":"ButtonElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,SAAS,CAqjBrD"}

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.js

@@ -144,7 +144,7 @@ export function buttonElementMemphisStyle() {
   padding-bottom: var(--button-padding-bottom);
   padding-left: var(--button-padding-left);
   gap: var(--button-gap);
-  background-color: var(--button-background-color);
+  background: var(--button-background-color);
   color: var(--button-foreground-color);
   border-color: var(--button-border-color);
   border-width: var(--button-border-width);
@@ -212,31 +212,6 @@ export function buttonElementMemphisStyle() {
   text-transform: inherit;
 }
 
-:host [part="link"] {
-  gap: var(--button-gap);
-  width: 100%;
-  height: 100%;
-  text-decoration: inherit;
-  align-items: center;
-  display: flex;
-}
-
-:host [part="link"] [part="icon"] {
-  color: inherit;
-  flex-shrink: 0;
-}
-
-:host [part="link"] [part="label"] {
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-transform: inherit;
-}
-
 :host([disabled]:not([disabled="false"])) {
   cursor: default;
   pointer-events: none;
@@ -267,7 +242,7 @@ export function buttonElementMemphisStyle() {
   min-width: var(--button-min-width);
 }
 
-:host(:not([has-link])[has-icon]) {
+:host([has-icon]) {
   min-width: var(--button-icon-min-width);
   min-height: var(--button-icon-min-height);
 }
@@ -287,23 +262,17 @@ export function buttonElementMemphisStyle() {
   --focus-ring-width: 0px;
 }
 
-:host(:hover:not([has-link])) {
+:host(:hover) {
   --button-shadow-offset-x: 1.5px;
   --button-shadow-offset-y: 1.5px;
   --button-translate: var(--button-shadow-offset-x) var(--button-shadow-offset-y);
 }
 
-:host(:active:not([has-link])) {
+:host(:active) {
   --button-translate: 3px 3px;
   box-shadow: var(--memphis-elevation-none);
 }
 
-:host([has-link]) {
-  --button-border-width: 0;
-  --button-border-style: none;
-  box-shadow: var(--memphis-elevation-none);
-}
-
 :host([disabled]:not([disabled="false"])) {
   --button-background-color: var(--memphis-scheme-background);
   --button-border-color: var(--memphis-scheme-disabled);

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAklBT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ButtonElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.Memphis.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmjBT,CAAC;AACN,CAAC"}

package/Controls/Components/Buttons/Button/Themes/ButtonGroupElement.Cosmopolitan.js

@@ -86,7 +86,7 @@ export function buttonGroupElementCosmopolitanStyle() {
   transition-duration: var(--button-group-transition-duration);
   transition-timing-function: var(--button-group-transition-mode);
   transition-property: var(--button-group-transition-property);
-  background-color: var(--button-group-background-color);
+  background: var(--button-group-background-color);
   border-color: var(--button-group-border-color);
   color: var(--button-group-foreground-color);
   border-width: var(--button-group-border-width);

package/Controls/Components/Buttons/Button/Themes/ButtonGroupElement.Joy.js

@@ -40,7 +40,7 @@ export function buttonGroupElementJoyStyle() {
   --button-group-transition-duration: var(--joy-duration-short);
   --button-group-transition-mode: ease;
   --button-group-transition-property: background-color, color, border-color, opacity;
-  --button-group-translate: unset;
+  --button-group-translate: none;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -86,7 +86,7 @@ export function buttonGroupElementJoyStyle() {
   transition-duration: var(--button-group-transition-duration);
   transition-timing-function: var(--button-group-transition-mode);
   transition-property: var(--button-group-transition-property);
-  background-color: var(--button-group-background-color);
+  background: var(--button-group-background-color);
   border-color: var(--button-group-border-color);
   color: var(--button-group-foreground-color);
   border-width: var(--button-group-border-width);

package/Controls/Components/Buttons/Button/Themes/ButtonGroupElement.Memphis.js

@@ -86,7 +86,7 @@ export function buttonGroupElementMemphisStyle() {
   transition-duration: var(--button-group-transition-duration);
   transition-timing-function: var(--button-group-transition-mode);
   transition-property: var(--button-group-transition-property);
-  background-color: var(--button-group-background-color);
+  background: var(--button-group-background-color);
   border-color: var(--button-group-border-color);
   color: var(--button-group-foreground-color);
   border-width: var(--button-group-border-width);

package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.d.ts

@@ -17,65 +17,70 @@ declare const CompoundButtonElement_base: (abstract new (...args: Array<any>) =>
  * @element mosaik-compound-button
  * @category Buttons
  *
- * @slot prefix - Leading content area displayed before the main label and icon
- * @slot icon - Icon content area for primary visual identification
  * @slot label - Primary text content area for main button labeling
+ * @slot overlay - Overlay content area for badges, notifications, or status indicators
+ * @slot prefix - Leading content area displayed before the main label and icon
  * @slot subLabel - Secondary text content area for descriptions or additional contextual information
  * @slot suffix - Trailing content area displayed after all main content
- * @slot overlay - Overlay content area for badges, notifications, or status indicators
  *
  * @csspart button - The main button element container
  * @csspart focusRing - The focus indicator ring for keyboard navigation accessibility
- * @csspart ripple - The touch feedback ripple effect container
- * @csspart innerStack - The internal stack layout container for organizing content
  * @csspart icon - The icon display area within the button
+ * @csspart icon nav - The icon nav part.
+ * @csspart innerStack - The internal stack layout container for organizing content
  * @csspart label - The primary text label display area
- * @csspart subLabel - The secondary text label display area for descriptions
- * @csspart nav - The navigation chevron icon display area (when isNavigation is true)
  * @csspart progressRing - The busy state progress indicator
+ * @csspart ripple - The touch feedback ripple effect container
+ * @csspart subLabel - The secondary text label display area for descriptions
  *
+ * @cssprop {String} --compound-button-background-color - The background fill color
+ * @cssprop {String} --compound-button-border-color - The border outline color
+ * @cssprop {String} --compound-button-border-radius - The corner rounding radius
+ * @cssprop {String} --compound-button-border-style - The border line style
+ * @cssprop {String} --compound-button-border-width - The border thickness
+ * @cssprop {String} --compound-button-focus-ring-active-width - The focus ring width when active (from focusRing mixin)
+ * @cssprop {String} --compound-button-focus-ring-color - The focus ring color (from focusRing mixin)
+ * @cssprop {String} --compound-button-focus-ring-inward-offset - The focus ring inward offset (from focusRing mixin)
+ * @cssprop {String} --compound-button-focus-ring-outward-offset - The focus ring outward offset (from focusRing mixin)
  * @cssprop {String} --compound-button-font-family - The font family for button text content
- * @cssprop {String} --compound-button-font-size - The font size for primary button text
- * @cssprop {String} --compound-button-font-line-height - The line height for button text
- * @cssprop {String} --compound-button-font-weight - The font weight for button text
  * @cssprop {String} --compound-button-font-letter-spacing - The letter spacing for button text
+ * @cssprop {String} --compound-button-font-line-height - The line height for button text
+ * @cssprop {String} --compound-button-font-size - The font size for primary button text
  * @cssprop {String} --compound-button-font-text-decoration - The text decoration style for button text
  * @cssprop {String} --compound-button-font-text-transform - The text transformation style for button text
- * @cssprop {String} --compound-button-padding-top - The top padding inside the button
- * @cssprop {String} --compound-button-padding-right - The right padding inside the button
+ * @cssprop {String} --compound-button-font-weight - The font weight for button text
+ * @cssprop {String} --compound-button-foreground-color - The text and icon color
+ * @cssprop {String} --compound-button-gap - The spacing between button content elements
+ * @cssprop {String} --compound-button-height - The button height
+ * @cssprop {String} --compound-button-icon-min-height - The minimum height for icon display area
+ * @cssprop {String} --compound-button-icon-min-width - The minimum width for icon display area
+ * @cssprop {String} --compound-button-min-height - The minimum button height
+ * @cssprop {String} --compound-button-min-width - The minimum button width
  * @cssprop {String} --compound-button-padding-bottom - The bottom padding inside the button
  * @cssprop {String} --compound-button-padding-left - The left padding inside the button
- * @cssprop {String} --compound-button-gap - The spacing between button content elements
+ * @cssprop {String} --compound-button-padding-right - The right padding inside the button
+ * @cssprop {String} --compound-button-padding-top - The top padding inside the button
+ * @cssprop {String} --compound-button-progress-ring-width - The button progress ring width CSS custom property.
+ * @cssprop {String} --compound-button-ripple-color - The ripple effect color (from ripple mixin)
+ * @cssprop {String} --compound-button-ripple-duration - The ripple effect animation duration (from ripple mixin)
+ * @cssprop {String} --compound-button-shadow - The drop shadow or elevation effect
+ * @cssprop {String} --compound-button-shadow-blur - The button shadow blur CSS custom property.
+ * @cssprop {String} --compound-button-shadow-color - The button shadow color CSS custom property.
+ * @cssprop {String} --compound-button-shadow-offset-x - The button shadow offset x CSS custom property.
+ * @cssprop {String} --compound-button-shadow-offset-y - The button shadow offset y CSS custom property.
+ * @cssprop {String} --compound-button-shadow-spread - The button shadow spread CSS custom property.
  * @cssprop {String} --compound-button-transition-duration - The duration of hover and focus transitions
  * @cssprop {String} --compound-button-transition-mode - The timing function for transitions
  * @cssprop {String} --compound-button-transition-property - The CSS properties to animate during transitions
- * @cssprop {String} --compound-button-foreground-color - The text and icon color
- * @cssprop {String} --compound-button-background-color - The background fill color
- * @cssprop {String} --compound-button-border-color - The border outline color
- * @cssprop {String} --compound-button-border-width - The border thickness
- * @cssprop {String} --compound-button-border-radius - The corner rounding radius
- * @cssprop {String} --compound-button-border-style - The border line style
- * @cssprop {String} --compound-button-shadow - The drop shadow or elevation effect
- * @cssprop {String} --compound-button-width - The button width
- * @cssprop {String} --compound-button-height - The button height
- * @cssprop {String} --compound-button-min-width - The minimum button width
- * @cssprop {String} --compound-button-min-height - The minimum button height
  * @cssprop {String} --compound-button-translate - The transform translation offset
- * @cssprop {String} --compound-button-icon-min-width - The minimum width for icon display area
- * @cssprop {String} --compound-button-icon-min-height - The minimum height for icon display area
- * @cssprop {String} --compound-button-focus-ring-color - The focus ring color (from focusRing mixin)
- * @cssprop {String} --compound-button-focus-ring-inward-offset - The focus ring inward offset (from focusRing mixin)
- * @cssprop {String} --compound-button-focus-ring-outward-offset - The focus ring outward offset (from focusRing mixin)
- * @cssprop {String} --compound-button-focus-ring-active-width - The focus ring width when active (from focusRing mixin)
- * @cssprop {String} --compound-button-ripple-color - The ripple effect color (from ripple mixin)
- * @cssprop {String} --compound-button-ripple-duration - The ripple effect animation duration (from ripple mixin)
+ * @cssprop {String} --compound-button-width - The button width
  *
- * @dependency {StackElement} - Layout container for organizing multiple button content areas
- * @dependency {IconElement} - Icon display component for button graphics and navigation indicators
- * @dependency {RippleElement} - Touch feedback effect component for interactive response
- * @dependency {FocusRingElement} - Keyboard focus indicator component for accessibility
- * @dependency {TextElement} - Text rendering component for primary and secondary labels
- * @dependency {ProgressRingElement} - Progress indicator component for busy states
+ * @dependency mosaik-focus-ring - The Focus Ring element.
+ * @dependency mosaik-icon - The Icon element.
+ * @dependency mosaik-progress-ring - The Progress Ring element.
+ * @dependency mosaik-ripple - The Ripple element.
+ * @dependency mosaik-stack - The Stack element.
+ * @dependency mosaik-text - The Text element.
  *
  * @example
  * Basic compound button with label:

package/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompoundButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AAOjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,qBAqBa,qBACT,SAAQ,0BACR,YAAW,2BAA2B;IAItC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAU;IAM/B;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;CAIJ;AAED;;GAEG;AACH,yBAAiB,qBAAqB,CAAC;IACnC,KAAY,KAAK,GAAG,2BAA2B,CAAC;CACnD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,wBAAwB,EAAE,qBAAqB,CAAC;KACnD;CACJ"}
+{"version":3,"file":"CompoundButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/CompoundButton/CompoundButtonElement.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AAOjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBAqBa,qBACT,SAAQ,0BACR,YAAW,2BAA2B;IAItC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAU;IAM/B;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;CAIJ;AAED;;GAEG;AACH,yBAAiB,qBAAqB,CAAC;IACnC,KAAY,KAAK,GAAG,2BAA2B,CAAC;CACnD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,wBAAwB,EAAE,qBAAqB,CAAC;KACnD;CACJ"}