@breadstone/mosaik-elements-foundation 0.0.231 → 0.0.233

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

@@ -21,7 +21,7 @@ export function splitButtonElementJoyStyle() {
   --split-button-focus-ring-active-width: 8px;
   --split-button-focus-ring-color: unset;
   --split-button-focus-ring-inward-offset: 2px;
-  --split-button-focus-ring-outward-offset: unset;
+  --split-button-focus-ring-outward-offset: 2px;
   --split-button-font-family: var(--joy-font-family);
   --split-button-font-letter-spacing: var(--joy-typography-button-letter-spacing);
   --split-button-font-line-height: var(--joy-typography-button-line-height);
@@ -38,8 +38,8 @@ export function splitButtonElementJoyStyle() {
   --split-button-min-height: calc(var(--joy-layout-space) * 5 - var(--joy-layout-space) / 2);
   --split-button-min-width: 64px;
   --split-button-padding-bottom: var(--joy-layout-space);
-  --split-button-padding-left: var(--joy-layout-space);
-  --split-button-padding-right: var(--joy-layout-space);
+  --split-button-padding-left: calc(var(--joy-layout-space) * 2);
+  --split-button-padding-right: calc(var(--joy-layout-space) * 2);
   --split-button-padding-top: var(--joy-layout-space);
   --split-button-progress-ring-width: var(--joy-layout-thickness);
   --split-button-progress-thickness: var(--joy-layout-thickness);
@@ -143,7 +143,7 @@ export function splitButtonElementJoyStyle() {
   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 splitButtonElementJoyStyle() {
   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);
@@ -405,6 +405,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-primary-500);
   --split-button-border-color: var(--joy-color-primary-500);
+  --split-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -418,6 +419,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-secondary-500);
   --split-button-border-color: var(--joy-color-secondary-500);
+  --split-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -431,6 +433,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-tertiary-500);
   --split-button-border-color: var(--joy-color-tertiary-500);
+  --split-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -444,6 +447,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-danger-500);
   --split-button-border-color: var(--joy-color-danger-500);
+  --split-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -457,6 +461,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-warning-500);
   --split-button-border-color: var(--joy-color-warning-500);
+  --split-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -470,6 +475,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-success-500);
   --split-button-border-color: var(--joy-color-success-500);
+  --split-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -483,6 +489,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-info-500);
   --split-button-border-color: var(--joy-color-info-500);
+  --split-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -496,6 +503,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-highlight-500);
   --split-button-border-color: var(--joy-color-highlight-500);
+  --split-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -509,6 +517,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-neutral-500);
   --split-button-border-color: var(--joy-color-neutral-500);
+  --split-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -542,6 +551,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-primary-500);
+  --split-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -555,6 +565,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-secondary-500);
+  --split-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -568,6 +579,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-tertiary-500);
+  --split-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -581,6 +593,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-danger-500);
+  --split-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -594,6 +607,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-warning-500);
+  --split-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -607,6 +621,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-success-500);
+  --split-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -620,6 +635,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-info-500);
+  --split-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -633,6 +649,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-highlight-500);
+  --split-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -646,6 +663,7 @@ export function splitButtonElementJoyStyle() {
 
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --split-button-foreground-color: var(--joy-color-neutral-500);
+  --split-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="focusRingMain"], :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="focusRingSplit"] {
@@ -677,6 +695,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-primary-100);
   --split-button-foreground-color: var(--joy-color-primary-500);
+  --split-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -694,6 +713,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-secondary-100);
   --split-button-foreground-color: var(--joy-color-secondary-500);
+  --split-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -711,6 +731,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-tertiary-100);
   --split-button-foreground-color: var(--joy-color-tertiary-500);
+  --split-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -728,6 +749,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-danger-100);
   --split-button-foreground-color: var(--joy-color-danger-500);
+  --split-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -745,6 +767,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-warning-100);
   --split-button-foreground-color: var(--joy-color-warning-500);
+  --split-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -762,6 +785,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-success-100);
   --split-button-foreground-color: var(--joy-color-success-500);
+  --split-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -779,6 +803,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-info-100);
   --split-button-foreground-color: var(--joy-color-info-500);
+  --split-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -796,6 +821,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-highlight-100);
   --split-button-foreground-color: var(--joy-color-highlight-500);
+  --split-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -813,6 +839,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-neutral-100);
   --split-button-foreground-color: var(--joy-color-neutral-500);
+  --split-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -847,6 +874,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-primary-500);
   --split-button-foreground-color: var(--joy-color-primary-0);
+  --split-button-ripple-color: var(--joy-color-primary-600);
 }
 
 :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -864,6 +892,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-secondary-500);
   --split-button-foreground-color: var(--joy-color-secondary-0);
+  --split-button-ripple-color: var(--joy-color-secondary-600);
 }
 
 :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -881,6 +910,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-tertiary-500);
   --split-button-foreground-color: var(--joy-color-tertiary-0);
+  --split-button-ripple-color: var(--joy-color-tertiary-600);
 }
 
 :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -898,6 +928,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-danger-500);
   --split-button-foreground-color: var(--joy-color-danger-0);
+  --split-button-ripple-color: var(--joy-color-danger-600);
 }
 
 :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -915,6 +946,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-warning-500);
   --split-button-foreground-color: var(--joy-color-warning-0);
+  --split-button-ripple-color: var(--joy-color-warning-600);
 }
 
 :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -932,6 +964,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-success-500);
   --split-button-foreground-color: var(--joy-color-success-0);
+  --split-button-ripple-color: var(--joy-color-success-600);
 }
 
 :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -949,6 +982,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-info-500);
   --split-button-foreground-color: var(--joy-color-info-0);
+  --split-button-ripple-color: var(--joy-color-info-600);
 }
 
 :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -966,6 +1000,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-highlight-500);
   --split-button-foreground-color: var(--joy-color-highlight-0);
+  --split-button-ripple-color: var(--joy-color-highlight-600);
 }
 
 :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {
@@ -983,6 +1018,7 @@ export function splitButtonElementJoyStyle() {
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
   --split-button-background-color: var(--joy-color-neutral-500);
   --split-button-foreground-color: var(--joy-color-neutral-0);
+  --split-button-ripple-color: var(--joy-color-neutral-600);
 }
 
 :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="buttonSplit"] {

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmhCT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SplitButtonElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAujCT,CAAC;AACN,CAAC"}

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

@@ -143,7 +143,7 @@ export function splitButtonElementMemphisStyle() {
   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 splitButtonElementMemphisStyle() {
   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/Tile/ITileElementProps.d.ts

@@ -0,0 +1,17 @@
+import type { IAppearanceableProps } from '../../../Behaviors/Appearanceable';
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IElevatableProps } from '../../../Behaviors/Elevatable';
+import type { IFitableProps } from '../../../Behaviors/Fitable';
+import type { IRippleableProps } from '../../../Behaviors/Rippleable';
+import type { IThemeableProps } from '../../../Behaviors/Themeable';
+import type { IVariantableProps } from '../../../Behaviors/Variantable';
+import { ButtonType } from '../../../Types/ButtonType';
+/**
+ * Represents the `ITileElementProps` interface.
+ *
+ * @public
+ */
+export interface ITileElementProps extends IAppearanceableProps, IDisableableProps, IElevatableProps, IFitableProps, IRippleableProps, IVariantableProps, IThemeableProps {
+    type: ButtonType;
+}
+//# sourceMappingURL=ITileElementProps.d.ts.map

package/Controls/Components/Buttons/Tile/ITileElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ITileElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Tile/ITileElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD;;;;GAIG;AACH,MAAM,WAAW,iBACb,SAAQ,oBAAoB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe;IAItI,IAAI,EAAE,UAAU,CAAC;CAIpB"}

package/Controls/Components/Buttons/Tile/ITileElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=ITileElementProps.js.map

package/Controls/Components/Buttons/Tile/ITileElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ITileElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Tile/ITileElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Buttons/Tile/Themes/TileElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function tileElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=TileElement.Cosmopolitan.d.ts.map

package/Controls/Components/Buttons/Tile/Themes/TileElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Tile/Themes/TileElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CA0MxD"}

package/Controls/Components/Buttons/Tile/Themes/TileElement.Cosmopolitan.js

@@ -0,0 +1,216 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function tileElementCosmopolitanStyle() {
+    return css `
+:host {
+  --tile-background-color: unset;
+  --tile-border-color: unset;
+  --tile-border-radius: unset;
+  --tile-border-style: solid;
+  --tile-border-width: unset;
+  --tile-focus-ring-active-width: 8px;
+  --tile-focus-ring-color: unset;
+  --tile-focus-ring-inward-offset: 2px;
+  --tile-focus-ring-outward-offset: 2px;
+  --tile-font-family: unset;
+  --tile-font-letter-spacing: unset;
+  --tile-font-line-height: unset;
+  --tile-font-size: unset;
+  --tile-font-text-decoration: unset;
+  --tile-font-text-transform: unset;
+  --tile-font-weight: unset;
+  --tile-foreground-color: unset;
+  --tile-gap: unset;
+  --tile-padding-bottom: unset;
+  --tile-padding-left: unset;
+  --tile-padding-right: unset;
+  --tile-padding-top: unset;
+  --tile-ripple-color: unset;
+  --tile-ripple-duration: .2s;
+  --tile-shadow: unset unset unset unset unset;
+  --tile-shadow-blur: unset;
+  --tile-shadow-color: unset;
+  --tile-shadow-offset-x: unset;
+  --tile-shadow-offset-y: unset;
+  --tile-shadow-spread: unset;
+  --tile-transition-duration: .2s;
+  --tile-transition-mode: ease;
+  --tile-transition-property: background-color, color, border-color, box-shadow;
+  --tile-translate: none;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  font-family: var(--tile-font-family);
+  font-size: var(--tile-font-size);
+  line-height: var(--tile-font-line-height);
+  font-weight: var(--tile-font-weight);
+  letter-spacing: var(--tile-font-letter-spacing);
+  -webkit-text-decoration: var(--tile-font-text-decoration);
+  text-decoration: var(--tile-font-text-decoration);
+  text-transform: var(--tile-font-text-transform);
+  transition-duration: var(--tile-transition-duration);
+  transition-timing-function: var(--tile-transition-mode);
+  transition-property: var(--tile-transition-property);
+  border-radius: var(--tile-border-radius);
+  translate: var(--tile-translate);
+  cursor: pointer;
+  display: flex;
+}
+
+:host [part="focusRing"] {
+  --focus-ring-color: var(--tile-focus-ring-color);
+  --focus-ring-active-width: var(--tile-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--tile-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--tile-focus-ring-outward-offset);
+}
+
+:host [part="ripple"] {
+  --ripple-background-color: var(--tile-ripple-color);
+  --ripple-duration: var(--tile-ripple-duration);
+}
+
+:host [part="button"] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  padding-top: var(--tile-padding-top);
+  padding-right: var(--tile-padding-right);
+  padding-bottom: var(--tile-padding-bottom);
+  padding-left: var(--tile-padding-left);
+  gap: var(--tile-gap);
+  background: var(--tile-background-color);
+  color: var(--tile-foreground-color);
+  border-color: var(--tile-border-color);
+  border-width: var(--tile-border-width);
+  border-radius: var(--tile-border-radius);
+  border-style: var(--tile-border-style);
+  box-shadow: var(--tile-shadow-offset-x) var(--tile-shadow-offset-y) var(--tile-shadow-blur) var(--tile-shadow-spread) var(--tile-shadow-color);
+  transition-property: inherit;
+}
+
+:host [part="button"]:before {
+  border-radius: var(--tile-border-radius);
+  border-radius: calc(var(--tile-border-radius) - var(--tile-border-width));
+  content: "";
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  transition: inherit;
+  position: absolute;
+  inset: 0;
+}
+
+:host [part="button"] {
+  width: inherit;
+  height: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  z-index: 0;
+  cursor: inherit;
+  pointer-events: inherit;
+  border-style: solid;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+  border-end-start-radius: inherit;
+  outline-style: none;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+:host [part="button"] [part="content"] {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+:host([fit="width"]) {
+  width: 100%;
+}
+
+:host([fit="height"]) {
+  height: 100%;
+}
+
+:host([fit="both"]) {
+  width: 100%;
+  height: 100%;
+}
+
+    `;
+}
+//# sourceMappingURL=TileElement.Cosmopolitan.js.map

package/Controls/Components/Buttons/Tile/Themes/TileElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Tile/Themes/TileElement.Cosmopolitan.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,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwMT,CAAC;AACN,CAAC"}

package/Controls/Components/Buttons/Tile/Themes/TileElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function tileElementJoyStyle(): CSSResult;
+//# sourceMappingURL=TileElement.Joy.d.ts.map

package/Controls/Components/Buttons/Tile/Themes/TileElement.Joy.d.ts.map

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