@breadstone/mosaik-elements-foundation 0.0.231 → 0.0.233

package/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.Joy.js

@@ -21,7 +21,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-focus-ring-active-width: 8px;
   --repeat-button-focus-ring-color: unset;
   --repeat-button-focus-ring-inward-offset: 2px;
-  --repeat-button-focus-ring-outward-offset: unset;
+  --repeat-button-focus-ring-outward-offset: 2px;
   --repeat-button-font-family: var(--joy-font-family);
   --repeat-button-font-letter-spacing: var(--joy-typography-button-letter-spacing);
   --repeat-button-font-line-height: var(--joy-typography-button-line-height);
@@ -38,8 +38,8 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-min-height: calc(var(--joy-layout-space) * 5 - var(--joy-layout-space) / 2);
   --repeat-button-min-width: 64px;
   --repeat-button-padding-bottom: var(--joy-layout-space);
-  --repeat-button-padding-left: var(--joy-layout-space);
-  --repeat-button-padding-right: var(--joy-layout-space);
+  --repeat-button-padding-left: calc(var(--joy-layout-space) * 2);
+  --repeat-button-padding-right: calc(var(--joy-layout-space) * 2);
   --repeat-button-padding-top: var(--joy-layout-space);
   --repeat-button-progress-ring-width: var(--joy-layout-thickness);
   --repeat-button-progress-thickness: var(--joy-layout-thickness);
@@ -157,7 +157,7 @@ export function repeatButtonElementJoyStyle() {
   padding-bottom: var(--repeat-button-padding-bottom);
   padding-left: var(--repeat-button-padding-left);
   gap: var(--repeat-button-gap);
-  background-color: var(--repeat-button-background-color);
+  background: var(--repeat-button-background-color);
   color: var(--repeat-button-foreground-color);
   border-color: var(--repeat-button-border-color);
   border-width: var(--repeat-button-border-width);
@@ -324,6 +324,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-primary-500);
   --repeat-button-border-color: var(--joy-color-primary-500);
   --repeat-button-focus-ring-color: var(--joy-color-primary-500);
+  --repeat-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -334,6 +335,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-secondary-500);
   --repeat-button-border-color: var(--joy-color-secondary-500);
   --repeat-button-focus-ring-color: var(--joy-color-secondary-500);
+  --repeat-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -344,6 +346,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-tertiary-500);
   --repeat-button-border-color: var(--joy-color-tertiary-500);
   --repeat-button-focus-ring-color: var(--joy-color-tertiary-500);
+  --repeat-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -354,6 +357,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-danger-500);
   --repeat-button-border-color: var(--joy-color-danger-500);
   --repeat-button-focus-ring-color: var(--joy-color-danger-500);
+  --repeat-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -364,6 +368,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-warning-500);
   --repeat-button-border-color: var(--joy-color-warning-500);
   --repeat-button-focus-ring-color: var(--joy-color-warning-500);
+  --repeat-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -374,6 +379,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-success-500);
   --repeat-button-border-color: var(--joy-color-success-500);
   --repeat-button-focus-ring-color: var(--joy-color-success-500);
+  --repeat-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -384,6 +390,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-info-500);
   --repeat-button-border-color: var(--joy-color-info-500);
   --repeat-button-focus-ring-color: var(--joy-color-info-500);
+  --repeat-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -394,6 +401,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-highlight-500);
   --repeat-button-border-color: var(--joy-color-highlight-500);
   --repeat-button-focus-ring-color: var(--joy-color-highlight-500);
+  --repeat-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -404,6 +412,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-foreground-color: var(--joy-color-neutral-500);
   --repeat-button-border-color: var(--joy-color-neutral-500);
   --repeat-button-focus-ring-color: var(--joy-color-neutral-500);
+  --repeat-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
@@ -423,6 +432,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-primary-500);
   --repeat-button-focus-ring-color: var(--joy-color-primary-500);
+  --repeat-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -433,6 +443,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-secondary-500);
   --repeat-button-focus-ring-color: var(--joy-color-secondary-500);
+  --repeat-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -443,6 +454,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-tertiary-500);
   --repeat-button-focus-ring-color: var(--joy-color-tertiary-500);
+  --repeat-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -453,6 +465,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-danger-500);
   --repeat-button-focus-ring-color: var(--joy-color-danger-500);
+  --repeat-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -463,6 +476,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-warning-500);
   --repeat-button-focus-ring-color: var(--joy-color-warning-500);
+  --repeat-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -473,6 +487,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-success-500);
   --repeat-button-focus-ring-color: var(--joy-color-success-500);
+  --repeat-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -483,6 +498,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-info-500);
   --repeat-button-focus-ring-color: var(--joy-color-info-500);
+  --repeat-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -493,6 +509,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-highlight-500);
   --repeat-button-focus-ring-color: var(--joy-color-highlight-500);
+  --repeat-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -503,6 +520,7 @@ export function repeatButtonElementJoyStyle() {
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --repeat-button-foreground-color: var(--joy-color-neutral-500);
   --repeat-button-focus-ring-color: var(--joy-color-neutral-500);
+  --repeat-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
@@ -524,6 +542,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-primary-100);
   --repeat-button-foreground-color: var(--joy-color-primary-500);
   --repeat-button-focus-ring-color: var(--joy-color-primary-500);
+  --repeat-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -534,6 +553,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-secondary-100);
   --repeat-button-foreground-color: var(--joy-color-secondary-500);
   --repeat-button-focus-ring-color: var(--joy-color-secondary-500);
+  --repeat-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -544,6 +564,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-tertiary-100);
   --repeat-button-foreground-color: var(--joy-color-tertiary-500);
   --repeat-button-focus-ring-color: var(--joy-color-tertiary-500);
+  --repeat-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -554,6 +575,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-danger-100);
   --repeat-button-foreground-color: var(--joy-color-danger-500);
   --repeat-button-focus-ring-color: var(--joy-color-danger-500);
+  --repeat-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -564,6 +586,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-warning-100);
   --repeat-button-foreground-color: var(--joy-color-warning-500);
   --repeat-button-focus-ring-color: var(--joy-color-warning-500);
+  --repeat-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -574,6 +597,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-success-100);
   --repeat-button-foreground-color: var(--joy-color-success-500);
   --repeat-button-focus-ring-color: var(--joy-color-success-500);
+  --repeat-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -584,6 +608,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-info-100);
   --repeat-button-foreground-color: var(--joy-color-info-500);
   --repeat-button-focus-ring-color: var(--joy-color-info-500);
+  --repeat-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -594,6 +619,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-highlight-100);
   --repeat-button-foreground-color: var(--joy-color-highlight-500);
   --repeat-button-focus-ring-color: var(--joy-color-highlight-500);
+  --repeat-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -604,6 +630,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-neutral-100);
   --repeat-button-foreground-color: var(--joy-color-neutral-500);
   --repeat-button-focus-ring-color: var(--joy-color-neutral-500);
+  --repeat-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {
@@ -624,6 +651,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-primary-500);
   --repeat-button-foreground-color: var(--joy-color-primary-0);
   --repeat-button-focus-ring-color: var(--joy-color-primary-500);
+  --repeat-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -634,6 +662,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-secondary-500);
   --repeat-button-foreground-color: var(--joy-color-secondary-0);
   --repeat-button-focus-ring-color: var(--joy-color-secondary-500);
+  --repeat-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -644,6 +673,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-tertiary-500);
   --repeat-button-foreground-color: var(--joy-color-tertiary-0);
   --repeat-button-focus-ring-color: var(--joy-color-tertiary-500);
+  --repeat-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"])):hover) {
@@ -654,6 +684,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-danger-500);
   --repeat-button-foreground-color: var(--joy-color-danger-0);
   --repeat-button-focus-ring-color: var(--joy-color-danger-500);
+  --repeat-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"])):hover) {
@@ -664,6 +695,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-warning-500);
   --repeat-button-foreground-color: var(--joy-color-warning-0);
   --repeat-button-focus-ring-color: var(--joy-color-warning-500);
+  --repeat-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"])):hover) {
@@ -674,6 +706,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-success-500);
   --repeat-button-foreground-color: var(--joy-color-success-0);
   --repeat-button-focus-ring-color: var(--joy-color-success-500);
+  --repeat-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"])):hover) {
@@ -684,6 +717,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-info-500);
   --repeat-button-foreground-color: var(--joy-color-info-0);
   --repeat-button-focus-ring-color: var(--joy-color-info-500);
+  --repeat-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"])):hover) {
@@ -694,6 +728,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-highlight-500);
   --repeat-button-foreground-color: var(--joy-color-highlight-0);
   --repeat-button-focus-ring-color: var(--joy-color-highlight-500);
+  --repeat-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"])):hover) {
@@ -704,6 +739,7 @@ export function repeatButtonElementJoyStyle() {
   --repeat-button-background-color: var(--joy-color-neutral-500);
   --repeat-button-foreground-color: var(--joy-color-neutral-0);
   --repeat-button-focus-ring-color: var(--joy-color-neutral-500);
+  --repeat-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"])):hover) {

package/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"RepeatButtonElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2rBT,CAAC;AACN,CAAC"}
+{"version":3,"file":"RepeatButtonElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+tBT,CAAC;AACN,CAAC"}

package/Controls/Components/Buttons/RepeatButton/Themes/RepeatButtonElement.Memphis.js

@@ -157,7 +157,7 @@ export function repeatButtonElementMemphisStyle() {
   padding-bottom: var(--repeat-button-padding-bottom);
   padding-left: var(--repeat-button-padding-left);
   gap: var(--repeat-button-gap);
-  background-color: var(--repeat-button-background-color);
+  background: var(--repeat-button-background-color);
   color: var(--repeat-button-foreground-color);
   border-color: var(--repeat-button-border-color);
   border-width: var(--repeat-button-border-width);

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.d.ts

@@ -16,56 +16,75 @@ declare const SplitButtonElement_base: (abstract new (...args: Array<any>) => im
  * @element mosaik-split-button
  * @category Buttons
  *
+ * @slot - The default dropdown content slot.
  * @slot icon - The icon slot.
  * @slot label - The label slot.
  * @slot overlay - The overlay slot (useful for badge).
- * @slot - The default dropdown content slot.
  *
  * @csspart button - The button part of the split button.
- * @csspart button split - The split button part.
- * @csspart focusRing - The focus ring part of the split button.
- * @csspart ripple - The ripple part of the split button.
+ * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
+ * @csspart focusRingMain - The focusRingMain part.
+ * @csspart focusRingSplit - The focusRingSplit part.
  * @csspart icon - The icon part of the split button.
+ * @csspart iconCaret - The caret icon part used for dropdown indication.
+ * @csspart innerStack - The innerStack part.
  * @csspart label - The label part of the split button.
- * @csspart progressRing - The progress ring part of the split button.
  * @csspart popup - The popup part of the split button.
- * @csspart menu - The menu part of the split button.
- * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
- * @csspart iconCaret - The caret icon part used for dropdown indication.
+ * @csspart progressRing - The progress ring part of the split button.
+ * @csspart rippleMain - The rippleMain part.
+ * @csspart rippleSplit - The rippleSplit part.
  *
+ * @cssprop {Color} --split-button-background-color - The background color of the split button.
+ * @cssprop {Color} --split-button-border-color - The border color of the split button.
+ * @cssprop {String} --split-button-border-radius - The border radius of the split button.
+ * @cssprop {String} --split-button-border-style - The border style of the split button.
+ * @cssprop {String} --split-button-border-width - The border width of the split button.
+ * @cssprop {String} --split-button-focus-ring-active-width - The button focus ring active width CSS custom property.
+ * @cssprop {String} --split-button-focus-ring-color - The button focus ring color CSS custom property.
+ * @cssprop {String} --split-button-focus-ring-inward-offset - The button focus ring inward offset CSS custom property.
+ * @cssprop {String} --split-button-focus-ring-outward-offset - The button focus ring outward offset CSS custom property.
  * @cssprop {String} --split-button-font-family - The font family of the split button.
- * @cssprop {String} --split-button-font-size - The font size of the split button.
- * @cssprop {String} --split-button-font-line-height - The font line height of the split button.
- * @cssprop {String} --split-button-font-weight - The font weight of the split button.
  * @cssprop {String} --split-button-font-letter-spacing - The font letter spacing of the split button.
+ * @cssprop {String} --split-button-font-line-height - The font line height of the split button.
+ * @cssprop {String} --split-button-font-size - The font size of the split button.
  * @cssprop {String} --split-button-font-text-decoration - The font text decoration of the split button.
  * @cssprop {String} --split-button-font-text-transform - The font text transform of the split button.
- * @cssprop {String} --split-button-padding-top - The padding top of the split button.
- * @cssprop {String} --split-button-padding-right - The padding right of the split button.
+ * @cssprop {String} --split-button-font-weight - The font weight of the split button.
+ * @cssprop {Color} --split-button-foreground-color - The foreground color of the split button.
+ * @cssprop {String} --split-button-gap - The gap between elements of the split button.
+ * @cssprop {String} --split-button-height - The button height CSS custom property.
+ * @cssprop {String} --split-button-icon-min-height - The button icon min height CSS custom property.
+ * @cssprop {String} --split-button-icon-min-width - The button icon min width CSS custom property.
+ * @cssprop {String} --split-button-line-height - The line height of the split button text.
+ * @cssprop {String} --split-button-min-height - The button min height CSS custom property.
+ * @cssprop {String} --split-button-min-width - The button min width CSS custom property.
  * @cssprop {String} --split-button-padding-bottom - The padding bottom of the split button.
  * @cssprop {String} --split-button-padding-left - The padding left of the split button.
- * @cssprop {String} --split-button-gap - The gap between elements of the split button.
+ * @cssprop {String} --split-button-padding-right - The padding right of the split button.
+ * @cssprop {String} --split-button-padding-top - The padding top of the split button.
+ * @cssprop {String} --split-button-progress-ring-width - The button progress ring width CSS custom property.
+ * @cssprop {String} --split-button-progress-thickness - The button progress thickness CSS custom property.
+ * @cssprop {Color} --split-button-ripple-color - The button ripple color CSS custom property.
+ * @cssprop {String} --split-button-ripple-duration - The button ripple duration CSS custom property.
+ * @cssprop {String} --split-button-shadow - The shadow of the split button.
+ * @cssprop {String} --split-button-shadow-blur - The button shadow blur CSS custom property.
+ * @cssprop {String} --split-button-shadow-color - The button shadow color CSS custom property.
+ * @cssprop {String} --split-button-shadow-offset-x - The button shadow offset x CSS custom property.
+ * @cssprop {String} --split-button-shadow-offset-y - The button shadow offset y CSS custom property.
+ * @cssprop {String} --split-button-shadow-spread - The button shadow spread CSS custom property.
  * @cssprop {String} --split-button-transition-duration - The transition duration for the split button.
  * @cssprop {String} --split-button-transition-mode - The transition mode for the split button.
  * @cssprop {String} --split-button-transition-property - The transition property for the split button.
- * @cssprop {Color} --split-button-background-color - The background color of the split button.
- * @cssprop {Color} --split-button-border-color - The border color of the split button.
- * @cssprop {Color} --split-button-foreground-color - The foreground color of the split button.
- * @cssprop {String} --split-button-border-width - The border width of the split button.
- * @cssprop {String} --split-button-border-radius - The border radius of the split button.
- * @cssprop {String} --split-button-border-style - The border style of the split button.
- * @cssprop {String} --split-button-shadow - The shadow of the split button.
- * @cssprop {String} --focus-ring-outward-offset - The outward offset of the focus ring.
- * @cssprop {String} --split-button-line-height - The line height of the split button text.
+ * @cssprop {String} --split-button-translate - The button translate CSS custom property.
+ * @cssprop {String} --split-button-width - The button width CSS custom property.
  *
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
+ * @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
+ * @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
  * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
+ * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
  * @dependency {RippleElement} mosaik-ripple - The Ripple component, used for the ripple effect.
- * @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
+ * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
  * @dependency {TextElement} mosaik-text - The Text component, used for displaying the label text.
- * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
- * @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
- * @dependency {MenuElement} mosaik-menu - The Menu component, used for dropdown menu functionality.
  *
  * @example
  * Basic split button:

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAoBnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAQ3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,qBAwBa,kBACT,SAAQ,uBACR,YAAW,wBAAwB,EAAE,aAAa;IAIlD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAyB;IACjE,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAM7D;;OAEG;;IAwBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAMD;;OAEG;IAEH,SAAS,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAgBhF,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAOjE,OAAO,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAInC;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAM3B;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}
+{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAoBnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAQ3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AACH,qBAwBa,kBACT,SAAQ,uBACR,YAAW,wBAAwB,EAAE,aAAa;IAIlD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAyB;IACjE,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAM7D;;OAEG;;IAwBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAMD;;OAEG;IAEH,SAAS,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAgBhF,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAOjE,OAAO,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAInC;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAM3B;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.js

@@ -51,56 +51,75 @@ import { splitButtonElementMemphisStyle } from './Themes/SplitButtonElement.Memp
  * @element mosaik-split-button
  * @category Buttons
  *
+ * @slot - The default dropdown content slot.
  * @slot icon - The icon slot.
  * @slot label - The label slot.
  * @slot overlay - The overlay slot (useful for badge).
- * @slot - The default dropdown content slot.
  *
  * @csspart button - The button part of the split button.
- * @csspart button split - The split button part.
- * @csspart focusRing - The focus ring part of the split button.
- * @csspart ripple - The ripple part of the split button.
+ * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
+ * @csspart focusRingMain - The focusRingMain part.
+ * @csspart focusRingSplit - The focusRingSplit part.
  * @csspart icon - The icon part of the split button.
+ * @csspart iconCaret - The caret icon part used for dropdown indication.
+ * @csspart innerStack - The innerStack part.
  * @csspart label - The label part of the split button.
- * @csspart progressRing - The progress ring part of the split button.
  * @csspart popup - The popup part of the split button.
- * @csspart menu - The menu part of the split button.
- * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
- * @csspart iconCaret - The caret icon part used for dropdown indication.
+ * @csspart progressRing - The progress ring part of the split button.
+ * @csspart rippleMain - The rippleMain part.
+ * @csspart rippleSplit - The rippleSplit part.
  *
+ * @cssprop {Color} --split-button-background-color - The background color of the split button.
+ * @cssprop {Color} --split-button-border-color - The border color of the split button.
+ * @cssprop {String} --split-button-border-radius - The border radius of the split button.
+ * @cssprop {String} --split-button-border-style - The border style of the split button.
+ * @cssprop {String} --split-button-border-width - The border width of the split button.
+ * @cssprop {String} --split-button-focus-ring-active-width - The button focus ring active width CSS custom property.
+ * @cssprop {String} --split-button-focus-ring-color - The button focus ring color CSS custom property.
+ * @cssprop {String} --split-button-focus-ring-inward-offset - The button focus ring inward offset CSS custom property.
+ * @cssprop {String} --split-button-focus-ring-outward-offset - The button focus ring outward offset CSS custom property.
  * @cssprop {String} --split-button-font-family - The font family of the split button.
- * @cssprop {String} --split-button-font-size - The font size of the split button.
- * @cssprop {String} --split-button-font-line-height - The font line height of the split button.
- * @cssprop {String} --split-button-font-weight - The font weight of the split button.
  * @cssprop {String} --split-button-font-letter-spacing - The font letter spacing of the split button.
+ * @cssprop {String} --split-button-font-line-height - The font line height of the split button.
+ * @cssprop {String} --split-button-font-size - The font size of the split button.
  * @cssprop {String} --split-button-font-text-decoration - The font text decoration of the split button.
  * @cssprop {String} --split-button-font-text-transform - The font text transform of the split button.
- * @cssprop {String} --split-button-padding-top - The padding top of the split button.
- * @cssprop {String} --split-button-padding-right - The padding right of the split button.
+ * @cssprop {String} --split-button-font-weight - The font weight of the split button.
+ * @cssprop {Color} --split-button-foreground-color - The foreground color of the split button.
+ * @cssprop {String} --split-button-gap - The gap between elements of the split button.
+ * @cssprop {String} --split-button-height - The button height CSS custom property.
+ * @cssprop {String} --split-button-icon-min-height - The button icon min height CSS custom property.
+ * @cssprop {String} --split-button-icon-min-width - The button icon min width CSS custom property.
+ * @cssprop {String} --split-button-line-height - The line height of the split button text.
+ * @cssprop {String} --split-button-min-height - The button min height CSS custom property.
+ * @cssprop {String} --split-button-min-width - The button min width CSS custom property.
  * @cssprop {String} --split-button-padding-bottom - The padding bottom of the split button.
  * @cssprop {String} --split-button-padding-left - The padding left of the split button.
- * @cssprop {String} --split-button-gap - The gap between elements of the split button.
+ * @cssprop {String} --split-button-padding-right - The padding right of the split button.
+ * @cssprop {String} --split-button-padding-top - The padding top of the split button.
+ * @cssprop {String} --split-button-progress-ring-width - The button progress ring width CSS custom property.
+ * @cssprop {String} --split-button-progress-thickness - The button progress thickness CSS custom property.
+ * @cssprop {Color} --split-button-ripple-color - The button ripple color CSS custom property.
+ * @cssprop {String} --split-button-ripple-duration - The button ripple duration CSS custom property.
+ * @cssprop {String} --split-button-shadow - The shadow of the split button.
+ * @cssprop {String} --split-button-shadow-blur - The button shadow blur CSS custom property.
+ * @cssprop {String} --split-button-shadow-color - The button shadow color CSS custom property.
+ * @cssprop {String} --split-button-shadow-offset-x - The button shadow offset x CSS custom property.
+ * @cssprop {String} --split-button-shadow-offset-y - The button shadow offset y CSS custom property.
+ * @cssprop {String} --split-button-shadow-spread - The button shadow spread CSS custom property.
  * @cssprop {String} --split-button-transition-duration - The transition duration for the split button.
  * @cssprop {String} --split-button-transition-mode - The transition mode for the split button.
  * @cssprop {String} --split-button-transition-property - The transition property for the split button.
- * @cssprop {Color} --split-button-background-color - The background color of the split button.
- * @cssprop {Color} --split-button-border-color - The border color of the split button.
- * @cssprop {Color} --split-button-foreground-color - The foreground color of the split button.
- * @cssprop {String} --split-button-border-width - The border width of the split button.
- * @cssprop {String} --split-button-border-radius - The border radius of the split button.
- * @cssprop {String} --split-button-border-style - The border style of the split button.
- * @cssprop {String} --split-button-shadow - The shadow of the split button.
- * @cssprop {String} --focus-ring-outward-offset - The outward offset of the focus ring.
- * @cssprop {String} --split-button-line-height - The line height of the split button text.
+ * @cssprop {String} --split-button-translate - The button translate CSS custom property.
+ * @cssprop {String} --split-button-width - The button width CSS custom property.
  *
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
+ * @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
+ * @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
  * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
+ * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
  * @dependency {RippleElement} mosaik-ripple - The Ripple component, used for the ripple effect.
- * @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication.
+ * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management.
  * @dependency {TextElement} mosaik-text - The Text component, used for displaying the label text.
- * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication.
- * @dependency {FloatingElement} mosaik-floating - The Floating component, used for floating behavior.
- * @dependency {MenuElement} mosaik-menu - The Menu component, used for dropdown menu functionality.
  *
  * @example
  * Basic split button:

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;;AAElB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAsB,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,mCAAmC,EAAE,MAAM,0CAA0C,CAAC;AAC/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AAyBI,IAAM,kBAAkB,0BAAxB,MAAM,kBACT,SAAQ,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAGpI,iBAAiB;IAEA,uBAAuB,CAAyB;IAChD,qBAAqB,CAAuB;IAE7D,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,uBAAuB,GAAG,IAAI,sBAAsB,CAAC,IAAI,EAAE;YAC5D,WAAW,EAAE,IAAI;YACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE;YACxD,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,qBAAqB;YACrC,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;gBACpB,OAAO,CAAC,YAAY,CAAC,GAAG,oBAAkB,CAAC,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;YACpE,CAAC;SACJ,CAAC,CAAC;QAEH,uEAAuE;QACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,qBAAqB,CAAC;IACjC,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IAEO,+BAA+B,CAAC,KAAe,EAAE,IAAc;QACrE,sCAAsC;QACtC,IAAI,IAAI,EAAE,CAAC;YACP,2BAA2B;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YAED,IAAI,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,uBAAuB,CAAC,SAAS,EAAE,CAAC;QAC7C,CAAC;IACL,CAAC;IAGS,uBAAuB,CAAC,KAAe,EAAE,IAAc;QAC7D,2BAA2B;QAC3B,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAChC,CAAC;IACL,CAAC;IAEM,OAAO,CAAC,CAAa;QACxB,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAED;;OAEG;IACK,gBAAgB;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;CAIJ,CAAA;AApCa;IADT,KAAK,CAAC,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;yEAcvD;AAGS;IADT,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;iEAM/C;AAhFQ,kBAAkB;IAxB9B,SAAS,CAAC;QACP,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE;YACJ,GAAG,EAAE,0BAA0B;YAC/B,OAAO,EAAE,8BAA8B;YACvC,YAAY,EAAE,mCAAmC;SACpD;QACD,OAAO,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACvB;QACD,OAAO,EAAE;YACL,YAAY;YACZ,WAAW;YACX,aAAa;YACb,gBAAgB;YAChB,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,WAAW;YACX,aAAa;SAChB;KACJ,CAAC;;GACW,kBAAkB,CA+F9B"}
+{"version":3,"file":"SplitButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;;AAElB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAsB,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,mCAAmC,EAAE,MAAM,0CAA0C,CAAC;AAC/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AAyBI,IAAM,kBAAkB,0BAAxB,MAAM,kBACT,SAAQ,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAGpI,iBAAiB;IAEA,uBAAuB,CAAyB;IAChD,qBAAqB,CAAuB;IAE7D,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,uBAAuB,GAAG,IAAI,sBAAsB,CAAC,IAAI,EAAE;YAC5D,WAAW,EAAE,IAAI;YACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE;YACxD,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,qBAAqB;YACrC,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;gBACpB,OAAO,CAAC,YAAY,CAAC,GAAG,oBAAkB,CAAC,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;YACpE,CAAC;SACJ,CAAC,CAAC;QAEH,uEAAuE;QACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,qBAAqB,CAAC;IACjC,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IAEO,+BAA+B,CAAC,KAAe,EAAE,IAAc;QACrE,sCAAsC;QACtC,IAAI,IAAI,EAAE,CAAC;YACP,2BAA2B;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YAED,IAAI,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,uBAAuB,CAAC,SAAS,EAAE,CAAC;QAC7C,CAAC;IACL,CAAC;IAGS,uBAAuB,CAAC,KAAe,EAAE,IAAc;QAC7D,2BAA2B;QAC3B,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAChC,CAAC;IACL,CAAC;IAEM,OAAO,CAAC,CAAa;QACxB,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAED;;OAEG;IACK,gBAAgB;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;CAIJ,CAAA;AApCa;IADT,KAAK,CAAC,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;yEAcvD;AAGS;IADT,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;iEAM/C;AAhFQ,kBAAkB;IAxB9B,SAAS,CAAC;QACP,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE;YACJ,GAAG,EAAE,0BAA0B;YAC/B,OAAO,EAAE,8BAA8B;YACvC,YAAY,EAAE,mCAAmC;SACpD;QACD,OAAO,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACvB;QACD,OAAO,EAAE;YACL,YAAY;YACZ,WAAW;YACX,aAAa;YACb,gBAAgB;YAChB,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,WAAW;YACX,aAAa;SAChB;KACJ,CAAC;;GACW,kBAAkB,CA+F9B"}

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Cosmopolitan.js

@@ -143,7 +143,7 @@ export function splitButtonElementCosmopolitanStyle() {
   padding-bottom: var(--split-button-padding-bottom);
   padding-left: var(--split-button-padding-left);
   gap: var(--split-button-gap);
-  background-color: var(--split-button-background-color);
+  background: var(--split-button-background-color);
   color: var(--split-button-foreground-color);
   border-color: var(--split-button-border-color);
   border-width: var(--split-button-border-width);
@@ -219,7 +219,7 @@ export function splitButtonElementCosmopolitanStyle() {
   transition-duration: inherit;
   transition-timing-function: inherit;
   padding: var(--split-button-padding-top);
-  background-color: var(--split-button-background-color);
+  background: var(--split-button-background-color);
   color: var(--split-button-foreground-color);
   border-color: var(--split-button-border-color);
   border-width: var(--split-button-border-width);

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAqhCtD"}
+{"version":3,"file":"SplitButtonElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAyjCtD"}