@breadstone/mosaik-elements-foundation 0.0.32 → 0.0.33

package/Controls/Behaviors/TextFormattable.d.ts

@@ -1,8 +1,8 @@
 import type { CustomElement } from '../Components/Abstracts/CustomElement';
-import type { TextFormatter } from '../Types/TextFormatter';
+import { type TextFormatter } from '../Types/TextFormatter';
 import type { ControlBehaviorBase, ControlBehaviorReturn } from './Abstracts/Behavior';
 /**
- * Represents the `ITextFormattable` interface.
+ * Represents the `ITextFormattableProps` interface.
  *
  * @public
  */

package/Controls/Behaviors/TextFormattable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextFormattable.d.ts","sourceRoot":"","sources":["../../../src/Controls/Behaviors/TextFormattable.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAIvF;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IAIlC,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;CAInC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,mBAAmB,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,KAAG,qBAAqB,CAAC,CAAC,EAAE,qBAAqB,CAgDrI,CAAC"}
+{"version":3,"file":"TextFormattable.d.ts","sourceRoot":"","sources":["../../../src/Controls/Behaviors/TextFormattable.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAkB,KAAK,aAAa,EAAwB,MAAM,wBAAwB,CAAC;AAClG,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAIvF;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IAIlC,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;CAInC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,mBAAmB,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,KAAG,qBAAqB,CAAC,CAAC,EAAE,qBAAqB,CAoErI,CAAC"}

package/Controls/Behaviors/TextFormattable.js

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Property } from '../Decorators/PropertyDecorator';
+import { TextFormatters } from '../Types/TextFormatter';
 /**
  * @public
  */
@@ -46,7 +47,24 @@ export const TextFormattable = (base) => {
         }
     }
     __decorate([
-        Property({ type: Object }),
+        Property({
+            type: Object,
+            converter: (value) => {
+                if (typeof value === 'function') {
+                    return value;
+                }
+                if (typeof value === 'string') {
+                    for (const [key, formatter] of Object.entries(TextFormatters)) {
+                        if (key.toLowerCase() === value.toLowerCase()) {
+                            value = formatter;
+                            break;
+                        }
+                    }
+                    return value;
+                }
+                return null;
+            }
+        }),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
     ], TextFormattableElement.prototype, "formatter", null);

package/Controls/Behaviors/TextFormattable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFormattable.js","sourceRoot":"","sources":["../../../src/Controls/Behaviors/TextFormattable.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,kBAAkB;;;;;;;;;;AAGlB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAqB3D;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAA+C,IAAO,EAAmD,EAAE;IACtI,MAAe,sBAAuB,SAAQ,IAAI;QAE9C,iBAAiB;QAET,UAAU,CAAuB;QAEzC,aAAa;QAEb,eAAe;QAEf;;;;WAIG;QACH,YAAmB,GAAG,IAAgB;YAClC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,aAAa;QAEb,qBAAqB;QAErB;;;;WAIG;QACH,IACW,SAAS;YAChB,OAAO,IAAI,CAAC,UAAU,CAAC;QAC3B,CAAC;QAED,IAAW,SAAS,CAAC,KAA2B;YAC5C,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YACpC,CAAC;QACL,CAAC;KAIJ;IAdG;QAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;2DAG1B;IAaL,OAAO,sBAAsB,CAAC;AAClC,CAAC,CAAC"}
+{"version":3,"file":"TextFormattable.js","sourceRoot":"","sources":["../../../src/Controls/Behaviors/TextFormattable.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,kBAAkB;;;;;;;;;;AAGlB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAA4C,MAAM,wBAAwB,CAAC;AAoBlG;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAA+C,IAAO,EAAmD,EAAE;IACtI,MAAe,sBAAuB,SAAQ,IAAI;QAE9C,iBAAiB;QAET,UAAU,CAAuB;QAEzC,aAAa;QAEb,eAAe;QAEf;;;;WAIG;QACH,YAAmB,GAAG,IAAgB;YAClC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,aAAa;QAEb,qBAAqB;QAErB;;;;WAIG;QACH,IAqBW,SAAS;YAChB,OAAO,IAAI,CAAC,UAAU,CAAC;QAC3B,CAAC;QAED,IAAW,SAAS,CAAC,KAA2B;YAC5C,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YACpC,CAAC;QACL,CAAC;KAIJ;IAlCG;QAAC,QAAQ,CAAC;YACN,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,CAAC,KAAU,EAAwB,EAAE;gBAC5C,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;oBAC9B,OAAO,KAAwB,CAAC;gBACpC,CAAC;gBAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;oBAC5B,KAAK,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;wBAC5D,IAAI,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;4BAC5C,KAAK,GAAG,SAAS,CAAC;4BAClB,MAAM;wBACV,CAAC;oBACL,CAAC;oBAED,OAAO,KAAsB,CAAC;gBAClC,CAAC;gBAED,OAAO,IAAI,CAAC;YAChB,CAAC;SACJ,CAAC;;;2DAGD;IAaL,OAAO,sBAAsB,CAAC;AAClC,CAAC,CAAC"}

package/Controls/Behaviors/TextOverflowable.d.ts

@@ -0,0 +1,16 @@
+import type { CustomElement } from '../Components/Abstracts/CustomElement';
+import { TextOverflow } from '../Types/TextOverflow';
+import type { ControlBehaviorBase, ControlBehaviorReturn } from './Abstracts/Behavior';
+/**
+ * Represents the `ITextOverflowableProps` interface.
+ *
+ * @public
+ */
+export interface ITextOverflowableProps {
+    textOverflow: TextOverflow;
+}
+/**
+ * @public
+ */
+export declare const TextOverflowable: <T extends ControlBehaviorBase<CustomElement>>(base: T) => ControlBehaviorReturn<T, ITextOverflowableProps>;
+//# sourceMappingURL=TextOverflowable.d.ts.map

package/Controls/Behaviors/TextOverflowable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextOverflowable.d.ts","sourceRoot":"","sources":["../../../src/Controls/Behaviors/TextOverflowable.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAIvF;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IAInC,YAAY,EAAE,YAAY,CAAC;CAI9B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,mBAAmB,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,KAAG,qBAAqB,CAAC,CAAC,EAAE,sBAAsB,CAgDvI,CAAC"}

package/Controls/Behaviors/TextOverflowable.js

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// #region Imports
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Attribute } from '../Decorators/AttributeDecorator';
+import { TextOverflow } from '../Types/TextOverflow';
+/**
+ * @public
+ */
+export const TextOverflowable = (base) => {
+    class TextOverflowableElement extends base {
+        // #region Fields
+        _textOverflow;
+        // #endregion
+        // #region Ctor
+        /**
+         * Constructs a new instance of the `TextOverflowableElement` class.
+         *
+         * @public
+         */
+        constructor(...args) {
+            super(args);
+            this._textOverflow = TextOverflow.Truncate;
+        }
+        // #endregion
+        // #region Properties
+        /**
+         * Gets or sets the `textOverflow` property.
+         *
+         * @public
+         * @attr
+         */
+        get textOverflow() {
+            return this._textOverflow;
+        }
+        set textOverflow(value) {
+            if (this._textOverflow !== value) {
+                this._textOverflow = value;
+                this.requestUpdate('textOverflow');
+            }
+        }
+    }
+    __decorate([
+        Attribute({ type: TextOverflow }),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], TextOverflowableElement.prototype, "textOverflow", null);
+    return TextOverflowableElement;
+};
+//# sourceMappingURL=TextOverflowable.js.map

package/Controls/Behaviors/TextOverflowable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextOverflowable.js","sourceRoot":"","sources":["../../../src/Controls/Behaviors/TextOverflowable.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,kBAAkB;;;;;;;;;;AAGlB,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAoBrD;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAA+C,IAAO,EAAoD,EAAE;IACxI,MAAe,uBAAwB,SAAQ,IAAI;QAE/C,iBAAiB;QAET,aAAa,CAAe;QAEpC,aAAa;QAEb,eAAe;QAEf;;;;WAIG;QACH,YAAmB,GAAG,IAAgB;YAClC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEZ,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC;QAC/C,CAAC;QAED,aAAa;QAEb,qBAAqB;QAErB;;;;;WAKG;QACH,IACW,YAAY;YACnB,OAAO,IAAI,CAAC,aAAa,CAAC;QAC9B,CAAC;QACD,IAAW,YAAY,CAAC,KAAmB;YACvC,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,EAAE,CAAC;gBAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC3B,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACvC,CAAC;QACL,CAAC;KAIJ;IAbG;QAAC,SAAS,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;;;+DAGjC;IAYL,OAAO,uBAAuB,CAAC;AACnC,CAAC,CAAC"}

package/Controls/Components/Buttons/Anchor/Themes/AnchorElement.Cosmopolitan.js

@@ -13,25 +13,25 @@ import { css } from '../../../../../Dom/Css';
 export function anchorElementCosmopolitanStyle() {
     return css `
 :host {
+  --anchor-background-color: var(--cosmopolitan-scheme-background);
+  --anchor-border-color: var(--cosmopolitan-scheme-highlight);
   --anchor-font-family: var(--cosmopolitan-typography-content-font-family);
-  --anchor-font-size: var(--cosmopolitan-typography-content-font-size);
-  --anchor-font-line-height: var(--cosmopolitan-typography-content-line-height);
-  --anchor-font-weight: var(--cosmopolitan-typography-content-font-weight);
   --anchor-font-letter-spacing: var(--cosmopolitan-typography-content-letter-spacing);
+  --anchor-font-line-height: var(--cosmopolitan-typography-content-line-height);
+  --anchor-font-size: var(--cosmopolitan-typography-content-font-size);
   --anchor-font-text-decoration: var(--cosmopolitan-typography-content-text-decoration);
   --anchor-font-text-transform: var(--cosmopolitan-typography-content-text-transform);
-  --anchor-padding-top: unset;
-  --anchor-padding-right: unset;
+  --anchor-font-weight: var(--cosmopolitan-typography-content-font-weight);
+  --anchor-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --anchor-gap: unset;
   --anchor-padding-bottom: unset;
   --anchor-padding-left: unset;
-  --anchor-gap: unset;
+  --anchor-padding-right: unset;
+  --anchor-padding-top: unset;
   --anchor-transition-duration: .2s;
   --anchor-transition-mode: ease;
   --anchor-transition-property: background-color, color, border-color, opacity, box-shadow;
   --anchor-translate: unset;
-  --anchor-background-color: var(--cosmopolitan-scheme-background);
-  --anchor-border-color: var(--cosmopolitan-scheme-highlight);
-  --anchor-foreground-color: var(--cosmopolitan-scheme-foreground);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/Buttons/Anchor/Themes/AnchorElement.Joy.js

@@ -13,25 +13,25 @@ import { css } from '../../../../../Dom/Css';
 export function anchorElementJoyStyle() {
     return css `
 :host {
+  --anchor-background-color: var(--joy-scheme-background);
+  --anchor-border-color: var(--joy-scheme-highlight);
   --anchor-font-family: var(--joy-typography-button-font-family);
-  --anchor-font-size: var(--joy-typography-button-font-size);
-  --anchor-font-line-height: var(--joy-typography-button-line-height);
-  --anchor-font-weight: var(--joy-typography-button-font-weight);
   --anchor-font-letter-spacing: var(--joy-typography-button-letter-spacing);
+  --anchor-font-line-height: var(--joy-typography-button-line-height);
+  --anchor-font-size: var(--joy-typography-button-font-size);
   --anchor-font-text-decoration: var(--joy-typography-button-text-decoration);
   --anchor-font-text-transform: var(--joy-typography-button-text-transform);
-  --anchor-padding-top: unset;
-  --anchor-padding-right: unset;
+  --anchor-font-weight: var(--joy-typography-button-font-weight);
+  --anchor-foreground-color: var(--joy-scheme-foreground);
+  --anchor-gap: unset;
   --anchor-padding-bottom: unset;
   --anchor-padding-left: unset;
-  --anchor-gap: unset;
+  --anchor-padding-right: unset;
+  --anchor-padding-top: unset;
   --anchor-transition-duration: .2s;
   --anchor-transition-mode: ease;
   --anchor-transition-property: background-color, color, border-color, opacity, box-shadow;
   --anchor-translate: unset;
-  --anchor-background-color: var(--joy-scheme-background);
-  --anchor-border-color: var(--joy-scheme-highlight);
-  --anchor-foreground-color: var(--joy-scheme-foreground);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/Buttons/Anchor/Themes/AnchorElement.Retro.js

@@ -13,25 +13,25 @@ import { css } from '../../../../../Dom/Css';
 export function anchorElementRetroStyle() {
     return css `
 :host {
+  --anchor-background-color: var(--retro-scheme-background);
+  --anchor-border-color: var(--retro-scheme-highlight);
   --anchor-font-family: var(--retro-font-family);
-  --anchor-font-size: var(--retro-typography-button-font-size);
-  --anchor-font-line-height: var(--retro-typography-button-line-height);
-  --anchor-font-weight: var(--retro-typography-button-font-weight);
   --anchor-font-letter-spacing: var(--retro-typography-button-letter-spacing);
+  --anchor-font-line-height: var(--retro-typography-button-line-height);
+  --anchor-font-size: var(--retro-typography-button-font-size);
   --anchor-font-text-decoration: var(--retro-typography-button-text-decoration);
   --anchor-font-text-transform: var(--retro-typography-button-text-transform);
-  --anchor-padding-top: unset;
-  --anchor-padding-right: unset;
+  --anchor-font-weight: var(--retro-typography-button-font-weight);
+  --anchor-foreground-color: var(--retro-scheme-foreground);
+  --anchor-gap: unset;
   --anchor-padding-bottom: unset;
   --anchor-padding-left: unset;
-  --anchor-gap: unset;
+  --anchor-padding-right: unset;
+  --anchor-padding-top: unset;
   --anchor-transition-duration: .2s;
   --anchor-transition-mode: ease;
   --anchor-transition-property: background-color, color, border-color, opacity, box-shadow;
   --anchor-translate: unset;
-  --anchor-background-color: var(--retro-scheme-background);
-  --anchor-border-color: var(--retro-scheme-highlight);
-  --anchor-foreground-color: var(--retro-scheme-foreground);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

package/Controls/Components/Buttons/Button/ButtonElementTemplate.js

@@ -55,7 +55,7 @@ export function buttonElementTemplate(e) {
         ${when(e.isBusy, () => html `
         <mosaik-progress-ring part="progressRing"
                               .thickness="${styleSheetVar('--button-progress-thickness')}"
-                              .radius="${12}"
+                              .radius="${'12px'}"
                               .variant="${e.variant}"
                               .isIndeterminate="${true}"
                               ?disabled="${e.disabled}"></mosaik-progress-ring>

package/Controls/Components/Buttons/Button/ButtonElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Button/ButtonElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;UACxB,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;uCAEC,CAAC,CAAC,OAAO;uCACT,CAAC,CAAC,SAAS;0CACR,QAAQ;mCACf,QAAQ;SAClC,CAAC;;;wBAGc,CAAC,CAAC,IAAI;cAChB,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;uCAEH,CAAC,CAAC,OAAO;mCACb,QAAQ;aAC9B,CAAC;0CAC4B,CAAC,CAAC,WAAW;gDACP,CAAC,CAAC,wBAAwB;kDACxB,CAAC,CAAC,0BAA0B;kCAC5C,aAAa,CAAC,cAAc,CAAC;sCACzB,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,KAAK;;kBAEzD,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;gDAEO,UAAU,CAAC,KAAK;6CACnB,CAAC,CAAC,OAAO;0CACZ,CAAC,CAAC,IAAI;0CACN,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI;4CAClB,IAAI;8CACF,CAAC,CAAC,QAAQ;iBACvC,CAAC;;;kBAGA,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEA,CAAC,CAAC,KAAK;6CACJ,CAAC,CAAC,OAAO;8CACR,CAAC,CAAC,QAAQ;iBACvC,CAAC;;;;UAIR,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;4CAES,aAAa,CAAC,6BAA6B,CAAC;yCAC/C,EAAE;0CACD,CAAC,CAAC,OAAO;kDACD,IAAI;2CACX,CAAC,CAAC,QAAQ;SAC5C,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;mBAEL,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;kBAClB,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;qBACb,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;yCACC,CAAC,CAAC,WAAW;gDACN,CAAC,CAAC,wBAAwB;kDACxB,CAAC,CAAC,0BAA0B;kCAC5C,aAAa,CAAC,cAAc,CAAC;sCACzB,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,KAAK;;sBAErD,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;gDAEG,UAAU,CAAC,KAAK;6CACnB,CAAC,CAAC,OAAO;0CACZ,CAAC,CAAC,IAAI;0CACN,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI;4CAClB,IAAI;8CACF,CAAC,CAAC,QAAQ;qBACnC,CAAC;;;sBAGA,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEJ,CAAC,CAAC,KAAK;6CACJ,CAAC,CAAC,OAAO;8CACR,CAAC,CAAC,QAAQ;qBACnC,CAAC;;;;SAIb,CAAC;;KAEL,CAAC;AACN,CAAC"}
+{"version":3,"file":"ButtonElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/Button/ButtonElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;UACxB,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;uCAEC,CAAC,CAAC,OAAO;uCACT,CAAC,CAAC,SAAS;0CACR,QAAQ;mCACf,QAAQ;SAClC,CAAC;;;wBAGc,CAAC,CAAC,IAAI;cAChB,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;uCAEH,CAAC,CAAC,OAAO;mCACb,QAAQ;aAC9B,CAAC;0CAC4B,CAAC,CAAC,WAAW;gDACP,CAAC,CAAC,wBAAwB;kDACxB,CAAC,CAAC,0BAA0B;kCAC5C,aAAa,CAAC,cAAc,CAAC;sCACzB,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,KAAK;;kBAEzD,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;gDAEO,UAAU,CAAC,KAAK;6CACnB,CAAC,CAAC,OAAO;0CACZ,CAAC,CAAC,IAAI;0CACN,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI;4CAClB,IAAI;8CACF,CAAC,CAAC,QAAQ;iBACvC,CAAC;;;kBAGA,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEA,CAAC,CAAC,KAAK;6CACJ,CAAC,CAAC,OAAO;8CACR,CAAC,CAAC,QAAQ;iBACvC,CAAC;;;;UAIR,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;4CAES,aAAa,CAAC,6BAA6B,CAAC;yCAC/C,MAAM;0CACL,CAAC,CAAC,OAAO;kDACD,IAAI;2CACX,CAAC,CAAC,QAAQ;SAC5C,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;mBAEL,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;kBAClB,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;qBACb,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;yCACC,CAAC,CAAC,WAAW;gDACN,CAAC,CAAC,wBAAwB;kDACxB,CAAC,CAAC,0BAA0B;kCAC5C,aAAa,CAAC,cAAc,CAAC;sCACzB,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,KAAK;;sBAErD,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;gDAEG,UAAU,CAAC,KAAK;6CACnB,CAAC,CAAC,OAAO;0CACZ,CAAC,CAAC,IAAI;0CACN,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI;4CAClB,IAAI;8CACF,CAAC,CAAC,QAAQ;qBACnC,CAAC;;;sBAGA,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEJ,CAAC,CAAC,KAAK;6CACJ,CAAC,CAAC,OAAO;8CACR,CAAC,CAAC,QAAQ;qBACnC,CAAC;;;;SAIb,CAAC;;KAEL,CAAC;AACN,CAAC"}

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

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

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

@@ -13,31 +13,36 @@ import { css } from '../../../../../Dom/Css';
 export function buttonElementCosmopolitanStyle() {
     return css `
 :host {
+  --button-background-color: var(--cosmopolitan-scheme-background);
+  --button-border-color: var(--cosmopolitan-scheme-highlight);
+  --button-border-radius: var(--cosmopolitan-layout-radius);
+  --button-border-style: solid;
+  --button-border-width: var(--cosmopolitan-layout-thickness);
+  --button-focus-ring-active-width: 8px;
+  --button-focus-ring-color: var(--cosmopolitan-scheme-highlight);
+  --button-focus-ring-inward-offset: 2px;
+  --button-focus-ring-outward-offset: 2px;
   --button-font-family: var(--cosmopolitan-typography-button-font-family);
-  --button-font-size: var(--cosmopolitan-typography-button-font-size);
-  --button-font-line-height: var(--cosmopolitan-typography-button-line-height);
-  --button-font-weight: var(--cosmopolitan-typography-button-font-weight);
   --button-font-letter-spacing: var(--cosmopolitan-typography-button-letter-spacing);
+  --button-font-line-height: var(--cosmopolitan-typography-button-line-height);
+  --button-font-size: var(--cosmopolitan-typography-button-font-size);
   --button-font-text-decoration: var(--cosmopolitan-typography-button-text-decoration);
   --button-font-text-transform: var(--cosmopolitan-typography-button-text-transform);
-  --button-padding-top: var(--cosmopolitan-layout-space);
-  --button-padding-right: var(--cosmopolitan-layout-space);
+  --button-font-weight: var(--cosmopolitan-typography-button-font-weight);
+  --button-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --button-gap: var(--cosmopolitan-layout-space);
+  --button-height: auto;
   --button-padding-bottom: var(--cosmopolitan-layout-space);
   --button-padding-left: var(--cosmopolitan-layout-space);
-  --button-gap: var(--cosmopolitan-layout-space);
+  --button-padding-right: var(--cosmopolitan-layout-space);
+  --button-padding-top: var(--cosmopolitan-layout-space);
+  --button-progress-thickness: var(--cosmopolitan-layout-thickness);
+  --button-ripple-color: unset;
+  --button-ripple-duration: .2s;
   --button-transition-duration: var(--cosmopolitan-layout-transition);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --button-translate: unset;
-  --button-background-color: var(--cosmopolitan-scheme-background);
-  --button-border-color: var(--cosmopolitan-scheme-highlight);
-  --button-border-radius: var(--cosmopolitan-layout-radius);
-  --button-border-style: solid;
-  --button-border-width: var(--cosmopolitan-layout-thickness);
-  --button-focus-ring-color: var(--cosmopolitan-scheme-highlight);
-  --button-foreground-color: var(--cosmopolitan-scheme-foreground);
-  --button-height: auto;
-  --button-progress-thickness: var(--cosmopolitan-layout-thickness);
   --button-width: auto;
 }
 
@@ -92,6 +97,14 @@ export function buttonElementCosmopolitanStyle() {
 
 :host [part="focusRing"] {
   --focus-ring-color: var(--button-focus-ring-color);
+  --focus-ring-active-width: var(--button-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--button-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--button-focus-ring-outward-offset);
+}
+
+:host [part="ripple"] {
+  --ripple-background-color: var(--button-ripple-color);
+  --ripple-duration: var(--button-ripple-duration);
 }
 
 :host [part="button"] {

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.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,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwRT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ButtonElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.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,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqST,CAAC;AACN,CAAC"}

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

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

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

@@ -13,31 +13,36 @@ import { css } from '../../../../../Dom/Css';
 export function buttonElementJoyStyle() {
     return css `
 :host {
+  --button-background-color: var(--joy-scheme-background);
+  --button-border-color: var(--joy-scheme-highlight);
+  --button-border-radius: var(--joy-layout-radius);
+  --button-border-style: solid;
+  --button-border-width: var(--joy-layout-thickness);
+  --button-focus-ring-active-width: 8px;
+  --button-focus-ring-color: var(--joy-scheme-highlight);
+  --button-focus-ring-inward-offset: 2px;
+  --button-focus-ring-outward-offset: 2px;
   --button-font-family: var(--joy-typography-button-font-family);
-  --button-font-size: var(--joy-typography-button-font-size);
-  --button-font-line-height: var(--joy-typography-button-line-height);
-  --button-font-weight: var(--joy-typography-button-font-weight);
   --button-font-letter-spacing: var(--joy-typography-button-letter-spacing);
+  --button-font-line-height: var(--joy-typography-button-line-height);
+  --button-font-size: var(--joy-typography-button-font-size);
   --button-font-text-decoration: var(--joy-typography-button-text-decoration);
   --button-font-text-transform: var(--joy-typography-button-text-transform);
-  --button-padding-top: var(--joy-layout-space);
-  --button-padding-right: var(--joy-layout-space);
+  --button-font-weight: var(--joy-typography-button-font-weight);
+  --button-foreground-color: var(--joy-scheme-foreground);
+  --button-gap: var(--joy-layout-space);
+  --button-height: calc(var(--joy-layout-space) * 5 - var(--joy-layout-space) / 2);
   --button-padding-bottom: var(--joy-layout-space);
   --button-padding-left: var(--joy-layout-space);
-  --button-gap: var(--joy-layout-space);
+  --button-padding-right: var(--joy-layout-space);
+  --button-padding-top: var(--joy-layout-space);
+  --button-progress-thickness: var(--joy-layout-thickness);
+  --button-ripple-color: unset;
+  --button-ripple-duration: .2s;
   --button-transition-duration: var(--joy-layout-transition);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --button-translate: none;
-  --button-background-color: var(--joy-scheme-background);
-  --button-border-color: var(--joy-scheme-highlight);
-  --button-border-radius: var(--joy-layout-radius);
-  --button-border-style: solid;
-  --button-border-width: var(--joy-layout-thickness);
-  --button-focus-ring-color: var(--joy-scheme-highlight);
-  --button-foreground-color: var(--joy-scheme-foreground);
-  --button-height: calc(var(--joy-layout-space) * 5 - var(--joy-layout-space) / 2);
-  --button-progress-thickness: var(--joy-layout-thickness);
   --button-width: auto;
 }
 
@@ -92,6 +97,14 @@ export function buttonElementJoyStyle() {
 
 :host [part="focusRing"] {
   --focus-ring-color: var(--button-focus-ring-color);
+  --focus-ring-active-width: var(--button-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--button-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--button-focus-ring-outward-offset);
+}
+
+:host [part="ripple"] {
+  --ripple-background-color: var(--button-ripple-color);
+  --ripple-duration: var(--button-ripple-duration);
 }
 
 :host [part="button"] {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAotBT,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiuBT,CAAC;AACN,CAAC"}

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

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

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

@@ -13,36 +13,41 @@ import { css } from '../../../../../Dom/Css';
 export function buttonElementRetroStyle() {
     return css `
 :host {
-  --button-font-family: var(--retro-typography-button-font-family);
-  --button-font-size: var(--retro-typography-button-font-size);
-  --button-font-line-height: var(--retro-typography-button-line-height);
-  --button-font-weight: var(--retro-typography-button-font-weight);
-  --button-font-letter-spacing: var(--retro-typography-button-letter-spacing);
-  --button-font-text-decoration: var(--retro-typography-button-text-decoration);
-  --button-font-text-transform: var(--retro-typography-button-text-transform);
-  --button-padding-top: var(--retro-layout-space);
-  --button-padding-right: var(--retro-layout-space);
-  --button-padding-bottom: var(--retro-layout-space);
-  --button-padding-left: var(--retro-layout-space);
-  --button-gap: var(--retro-layout-space);
-  --button-transition-duration: var(--retro-layout-transition);
-  --button-transition-mode: ease;
-  --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
-  --button-translate: none;
   --button-background-color: var(--retro-scheme-background);
   --button-border-color: var(--retro-scheme-contrast);
   --button-border-radius: var(--retro-layout-radius);
   --button-border-style: solid;
   --button-border-width: var(--retro-layout-thickness);
+  --button-focus-ring-active-width: 8px;
   --button-focus-ring-color: var(--retro-scheme-highlight);
+  --button-focus-ring-inward-offset: 2px;
+  --button-focus-ring-outward-offset: 2px;
+  --button-font-family: var(--retro-typography-button-font-family);
+  --button-font-letter-spacing: var(--retro-typography-button-letter-spacing);
+  --button-font-line-height: var(--retro-typography-button-line-height);
+  --button-font-size: var(--retro-typography-button-font-size);
+  --button-font-text-decoration: var(--retro-typography-button-text-decoration);
+  --button-font-text-transform: var(--retro-typography-button-text-transform);
+  --button-font-weight: var(--retro-typography-button-font-weight);
   --button-foreground-color: var(--retro-scheme-foreground);
+  --button-gap: var(--retro-layout-space);
   --button-height: calc(var(--retro-layout-space) * 5 - var(--retro-layout-space) / 2);
+  --button-padding-bottom: var(--retro-layout-space);
+  --button-padding-left: var(--retro-layout-space);
+  --button-padding-right: var(--retro-layout-space);
+  --button-padding-top: var(--retro-layout-space);
   --button-progress-thickness: var(--retro-layout-thickness);
+  --button-ripple-color: unset;
+  --button-ripple-duration: .2s;
   --button-shadow-blur: var(--retro-elevation-semilight-blur-0);
   --button-shadow-color: var(--retro-elevation-semilight-color-0);
   --button-shadow-offset-x: var(--retro-elevation-semilight-offset-x-0);
   --button-shadow-offset-y: var(--retro-elevation-semilight-offset-y-0);
   --button-shadow-spread: var(--retro-elevation-semilight-spread-0);
+  --button-transition-duration: var(--retro-layout-transition);
+  --button-transition-mode: ease;
+  --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
+  --button-translate: none;
   --button-width: auto;
 }
 
@@ -101,6 +106,14 @@ export function buttonElementRetroStyle() {
 
 :host [part="focusRing"] {
   --focus-ring-color: var(--button-focus-ring-color);
+  --focus-ring-active-width: var(--button-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--button-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--button-focus-ring-outward-offset);
+}
+
+:host [part="ripple"] {
+  --ripple-background-color: var(--button-ripple-color);
+  --ripple-duration: var(--button-ripple-duration);
 }
 
 :host [part="button"] {

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.Retro.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+fT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ButtonElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Buttons/Button/Themes/ButtonElement.Retro.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4gBT,CAAC;AACN,CAAC"}

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

@@ -13,28 +13,28 @@ import { css } from '../../../../../Dom/Css';
 export function buttonGroupElementCosmopolitanStyle() {
     return css `
 :host {
+  --button-group-background-color: unset;
+  --button-group-border-color: unset;
+  --button-group-border-radius: unset;
+  --button-group-border-style: unset;
+  --button-group-border-width: unset;
   --button-group-font-family: unset;
-  --button-group-font-size: unset;
-  --button-group-font-line-height: unset;
-  --button-group-font-weight: unset;
   --button-group-font-letter-spacing: unset;
+  --button-group-font-line-height: unset;
+  --button-group-font-size: unset;
   --button-group-font-text-decoration: unset;
   --button-group-font-text-transform: unset;
-  --button-group-padding-top: unset;
-  --button-group-padding-right: unset;
+  --button-group-font-weight: unset;
+  --button-group-foreground-color: unset;
+  --button-group-gap: unset;
   --button-group-padding-bottom: unset;
   --button-group-padding-left: unset;
-  --button-group-gap: unset;
+  --button-group-padding-right: unset;
+  --button-group-padding-top: unset;
   --button-group-transition-duration: unset;
   --button-group-transition-mode: unset;
   --button-group-transition-property: unset;
   --button-group-translate: unset;
-  --button-group-background-color: unset;
-  --button-group-border-color: unset;
-  --button-group-border-radius: unset;
-  --button-group-border-style: unset;
-  --button-group-border-width: unset;
-  --button-group-foreground-color: unset;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

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

@@ -13,28 +13,28 @@ import { css } from '../../../../../Dom/Css';
 export function buttonGroupElementJoyStyle() {
     return css `
 :host {
+  --button-group-background-color: var(--joy-scheme-background);
+  --button-group-border-color: var(--joy-scheme-highlight);
+  --button-group-border-radius: var(--joy-layout-radius);
+  --button-group-border-style: solid;
+  --button-group-border-width: var(--joy-layout-thickness);
   --button-group-font-family: var(--joy-font-family);
-  --button-group-font-size: var(--joy-typography-button-font-size);
-  --button-group-font-line-height: var(--joy-typography-button-line-height);
-  --button-group-font-weight: var(--joy-typography-button-font-weight);
   --button-group-font-letter-spacing: var(--joy-typography-button-letter-spacing);
+  --button-group-font-line-height: var(--joy-typography-button-line-height);
+  --button-group-font-size: var(--joy-typography-button-font-size);
   --button-group-font-text-decoration: var(--joy-typography-button-text-decoration);
   --button-group-font-text-transform: var(--joy-typography-button-text-transform);
-  --button-group-padding-top: 0;
-  --button-group-padding-right: 0;
+  --button-group-font-weight: var(--joy-typography-button-font-weight);
+  --button-group-foreground-color: var(--joy-scheme-foreground);
+  --button-group-gap: 0;
   --button-group-padding-bottom: 0;
   --button-group-padding-left: 0;
-  --button-group-gap: 0;
+  --button-group-padding-right: 0;
+  --button-group-padding-top: 0;
   --button-group-transition-duration: .2s;
   --button-group-transition-mode: ease;
   --button-group-transition-property: background-color, color, border-color, opacity;
   --button-group-translate: unset;
-  --button-group-background-color: var(--joy-scheme-background);
-  --button-group-border-color: var(--joy-scheme-highlight);
-  --button-group-border-radius: var(--joy-layout-radius);
-  --button-group-border-style: solid;
-  --button-group-border-width: var(--joy-layout-thickness);
-  --button-group-foreground-color: var(--joy-scheme-foreground);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {