@breadstone/mosaik-elements-foundation 0.0.12-beta.8 → 0.0.13

package/Controls/Components/Misc/BackTop/BackTopElement.js

@@ -109,7 +109,7 @@ let BackTopElement = class BackTopElement extends Themeable(Attachable(CustomEle
         return this._restored;
     }
     /**
-     * Emitts the {@link restored} event.
+     * Emits the {@link restored} event.
      *
      * @protected
      */

package/Controls/Components/Misc/CookieConsent/CookiesConsentElement.d.ts

@@ -100,13 +100,13 @@ export declare class CookiesConsentElement extends CookiesConsentElement_base im
      */
     disconnectedCallback(): void;
     /**
-     * Emitts the {@link accepted} event.
+     * Emits the {@link accepted} event.
      *
      * @protected
      */
     protected onAccepted(args: any): void;
     /**
-     * Emitts the {@link dismissed} event.
+     * Emits the {@link dismissed} event.
      *
      * @protected
      */

package/Controls/Components/Misc/CookieConsent/CookiesConsentElement.js

@@ -173,7 +173,7 @@ let CookiesConsentElement = class CookiesConsentElement extends Themeable(Animat
         super.disconnectedCallback();
     }
     /**
-     * Emitts the {@link accepted} event.
+     * Emits the {@link accepted} event.
      *
      * @protected
      */
@@ -184,7 +184,7 @@ let CookiesConsentElement = class CookiesConsentElement extends Themeable(Animat
         });
     }
     /**
-     * Emitts the {@link dismissed} event.
+     * Emits the {@link dismissed} event.
      *
      * @protected
      */

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Cosmopolitan.d.ts.map

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

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Cosmopolitan.js

@@ -36,7 +36,11 @@ export function dialogElementCosmopolitanStyle() {
   --dialog-border-width: unset;
   --dialog-divider-height: unset;
   --dialog-foreground-color: unset;
-  --dialog-shadow: unset;
+  --dialog-shadow-blur: unset;
+  --dialog-shadow-color: unset;
+  --dialog-shadow-offset-x: unset;
+  --dialog-shadow-offset-y: unset;
+  --dialog-shadow-spread: unset;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -95,12 +99,11 @@ export function dialogElementCosmopolitanStyle() {
   padding-bottom: env(safe-area-inset-bottom);
   pointer-events: all;
   background-color: var(--dialog-background-color);
-  box-shadow: var(--dialog-shadow);
+  box-shadow: var(--dialog-shadow-offset-x) var(--dialog-shadow-offset-y) var(--dialog-shadow-blur) var(--dialog-shadow-spread) var(--dialog-shadow-color);
   transition-duration: var(--dialog-transition-duration);
   transition-timing-function: var(--dialog-transition-mode);
   transition-property: var(--dialog-transition-property);
   border-width: var(--dialog-border-width);
-  border-radius: 0;
   border-radius: var(--dialog-border-radius);
   border-style: var(--dialog-border-style);
   height: inherit;
@@ -111,7 +114,6 @@ export function dialogElementCosmopolitanStyle() {
   min-height: inherit;
   min-width: inherit;
   width: inherit;
-  border: none;
   outline: none;
   flex-direction: column;
   display: flex;

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Dialog/Themes/DialogElement.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqKT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DialogElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Dialog/Themes/DialogElement.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuKT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.d.ts.map

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

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js

@@ -20,11 +20,11 @@ export function dialogElementJoyStyle() {
   --dialog-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
   --dialog-font-text-decoration: var(--joy-typography-body1-text-decoration);
   --dialog-font-text-transform: var(--joy-typography-body1-text-transform);
-  --dialog-padding-top: 8px;
-  --dialog-padding-right: 16px;
-  --dialog-padding-bottom: 8px;
-  --dialog-padding-left: 16px;
-  --dialog-gap: 8px;
+  --dialog-padding-top: var(--joy-layout-space);
+  --dialog-padding-right: calc(var(--joy-layout-space) * 2);
+  --dialog-padding-bottom: var(--joy-layout-space);
+  --dialog-padding-left: calc(var(--joy-layout-space) * 2);
+  --dialog-gap: var(--joy-layout-space);
   --dialog-transition-duration: .2s;
   --dialog-transition-mode: ease;
   --dialog-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
@@ -36,7 +36,11 @@ export function dialogElementJoyStyle() {
   --dialog-border-width: 0px;
   --dialog-divider-height: 1px;
   --dialog-foreground-color: var(--joy-scheme-foreground);
-  --dialog-shadow: var(--joy-elevation-bold);
+  --dialog-shadow-blur: var(--joy-elevation-light-blur-0);
+  --dialog-shadow-color: var(--joy-elevation-light-color-0);
+  --dialog-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
+  --dialog-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
+  --dialog-shadow-spread: var(--joy-elevation-light-spread-0);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -95,12 +99,11 @@ export function dialogElementJoyStyle() {
   padding-bottom: env(safe-area-inset-bottom);
   pointer-events: all;
   background-color: var(--dialog-background-color);
-  box-shadow: var(--dialog-shadow);
+  box-shadow: var(--dialog-shadow-offset-x) var(--dialog-shadow-offset-y) var(--dialog-shadow-blur) var(--dialog-shadow-spread) var(--dialog-shadow-color);
   transition-duration: var(--dialog-transition-duration);
   transition-timing-function: var(--dialog-transition-mode);
   transition-property: var(--dialog-transition-property);
   border-width: var(--dialog-border-width);
-  border-radius: 0;
   border-radius: var(--dialog-border-radius);
   border-style: var(--dialog-border-style);
   height: inherit;
@@ -111,7 +114,6 @@ export function dialogElementJoyStyle() {
   min-height: inherit;
   min-width: inherit;
   width: inherit;
-  border: none;
   outline: none;
   flex-direction: column;
   display: flex;

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Dialog/Themes/DialogElement.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqKT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DialogElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Dialog/Themes/DialogElement.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuKT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Retro.d.ts.map

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

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Retro.js

@@ -20,11 +20,11 @@ export function dialogElementRetroStyle() {
   --dialog-font-letter-spacing: var(--retro-typography-body1-letter-spacing);
   --dialog-font-text-decoration: var(--retro-typography-body1-text-decoration);
   --dialog-font-text-transform: var(--retro-typography-body1-text-transform);
-  --dialog-padding-top: 8px;
-  --dialog-padding-right: 16px;
-  --dialog-padding-bottom: 8px;
-  --dialog-padding-left: 16px;
-  --dialog-gap: 8px;
+  --dialog-padding-top: var(--retro-layout-space);
+  --dialog-padding-right: calc(var(--retro-layout-space) * 2);
+  --dialog-padding-bottom: var(--retro-layout-space);
+  --dialog-padding-left: calc(var(--retro-layout-space) * 2);
+  --dialog-gap: var(--retro-layout-space);
   --dialog-transition-duration: .2s;
   --dialog-transition-mode: ease;
   --dialog-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
@@ -33,10 +33,14 @@ export function dialogElementRetroStyle() {
   --dialog-border-color: var(--retro-scheme-contrast);
   --dialog-border-radius: var(--retro-layout-radius);
   --dialog-border-style: solid;
-  --dialog-border-width: 0px;
+  --dialog-border-width: var(--retro-layout-thickness);
   --dialog-divider-height: 1px;
   --dialog-foreground-color: var(--retro-scheme-foreground);
-  --dialog-shadow: var(--retro-elevation-extra-bold);
+  --dialog-shadow-blur: var(--retro-elevation-bold-blur-0);
+  --dialog-shadow-color: var(--retro-elevation-bold-color-0);
+  --dialog-shadow-offset-x: var(--retro-elevation-bold-offset-x-0);
+  --dialog-shadow-offset-y: var(--retro-elevation-bold-offset-y-0);
+  --dialog-shadow-spread: var(--retro-elevation-bold-spread-0);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -80,15 +84,11 @@ export function dialogElementRetroStyle() {
   opacity: 1;
   z-index: 1;
   pointer-events: none;
-  --dialog-border-color: #000;
-  --dialog-border-width: 3px;
-  --dialog-border-style: solid;
-  --dialog-shadow: var(--retro-elevation-regular);
+  --dialog-shadow-color: var(--retro-scheme-highlight);
   width: 100%;
   max-width: 100%;
   height: 100%;
   max-height: 100%;
-  box-shadow: var(--dialog-shadow);
   position: fixed;
   top: 0;
   left: 0;
@@ -100,12 +100,11 @@ export function dialogElementRetroStyle() {
   padding-bottom: env(safe-area-inset-bottom);
   pointer-events: all;
   background-color: var(--dialog-background-color);
-  box-shadow: var(--dialog-shadow);
+  box-shadow: var(--dialog-shadow-offset-x) var(--dialog-shadow-offset-y) var(--dialog-shadow-blur) var(--dialog-shadow-spread) var(--dialog-shadow-color);
   transition-duration: var(--dialog-transition-duration);
   transition-timing-function: var(--dialog-transition-mode);
   transition-property: var(--dialog-transition-property);
   border-width: var(--dialog-border-width);
-  border-radius: 0;
   border-radius: var(--dialog-border-radius);
   border-style: var(--dialog-border-style);
   height: inherit;
@@ -116,7 +115,6 @@ export function dialogElementRetroStyle() {
   min-height: inherit;
   min-width: inherit;
   width: inherit;
-  border: none;
   outline: none;
   flex-direction: column;
   display: flex;

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Dialog/Themes/DialogElement.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0KT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DialogElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Dialog/Themes/DialogElement.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwKT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Box/BoxElement.d.ts

@@ -11,7 +11,7 @@ declare const BoxElement_base: (abstract new (...args: Array<any>) => import("..
  */
 export declare class BoxElement extends BoxElement_base implements IBoxElementProps {
     private _highlighted;
-    private _cornerd;
+    private _cornered;
     /**
      * @public
      */
@@ -39,16 +39,16 @@ export declare class BoxElement extends BoxElement_base implements IBoxElementPr
      * @public
      * @attr
      */
-    get cornerd(): boolean;
-    set cornerd(value: boolean);
+    get cornered(): boolean;
+    set cornered(value: boolean);
     /**
      * @protected
      */
-    protected onWidthPropertyChanged(prev?: CssLength, next?: CssLength): void;
+    protected onWidthPropertyChanged(_prev?: CssLength, next?: CssLength): void;
     /**
      * @protected
      */
-    protected onHeightPropertyChanged(prev?: CssLength, next?: CssLength): void;
+    protected onHeightPropertyChanged(_prev?: CssLength, next?: CssLength): void;
 }
 /**
  * @public

package/Controls/Components/Primitives/Box/BoxElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Box/BoxElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAOtD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;AAQ3D;;;;;;GAMG;AACH,qBAUa,UACT,SAAQ,eACR,YAAW,gBAAgB;IAI3B,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,QAAQ,CAAU;IAM1B;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,OAAO,EAKpC;IAED;;;;;OAKG;IACH,IACW,OAAO,IAAI,OAAO,CAE5B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAKhC;IAMD;;OAEG;IAEH,SAAS,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;IAK1E;;OAEG;IAEH,SAAS,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;CAO9E;AAED;;GAEG;AACH,yBAAiB,UAAU,CAAC;IACxB,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACxC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,YAAY,EAAE,UAAU,CAAC;KAC5B;CACJ"}
+{"version":3,"file":"BoxElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Box/BoxElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAOtD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;AAQ3D;;;;;;GAMG;AACH,qBAUa,UACT,SAAQ,eACR,YAAW,gBAAgB;IAI3B,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,SAAS,CAAU;IAM3B;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,OAAO,EAKpC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAMD;;OAEG;IAEH,SAAS,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;IAK3E;;OAEG;IAEH,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;CAO/E;AAED;;GAEG;AACH,yBAAiB,UAAU,CAAC;IACxB,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACxC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,YAAY,EAAE,UAAU,CAAC;KAC5B;CACJ"}

package/Controls/Components/Primitives/Box/BoxElement.js

@@ -33,7 +33,7 @@ import { Themeable } from '../../../Behaviors/Themeable';
 let BoxElement = class BoxElement extends Themeable(Fitable(Dimensionable(Insetable(CustomElement)))) {
     // #region Fields
     _highlighted;
-    _cornerd;
+    _cornered;
     // #endregion
     // #region Ctor
     /**
@@ -42,7 +42,7 @@ let BoxElement = class BoxElement extends Themeable(Fitable(Dimensionable(Inseta
     constructor() {
         super();
         this._highlighted = false;
-        this._cornerd = false;
+        this._cornered = false;
     }
     // #endregion
     // #region Properties
@@ -78,13 +78,13 @@ let BoxElement = class BoxElement extends Themeable(Fitable(Dimensionable(Inseta
      * @public
      * @attr
      */
-    get cornerd() {
-        return this._cornerd;
+    get cornered() {
+        return this._cornered;
     }
-    set cornerd(value) {
-        if (this._cornerd !== value) {
-            this._cornerd = value;
-            this.requestUpdate('cornerd');
+    set cornered(value) {
+        if (this._cornered !== value) {
+            this._cornered = value;
+            this.requestUpdate('cornered');
         }
     }
     // #endregion
@@ -92,14 +92,14 @@ let BoxElement = class BoxElement extends Themeable(Fitable(Dimensionable(Inseta
     /**
      * @protected
      */
-    onWidthPropertyChanged(prev, next) {
+    onWidthPropertyChanged(_prev, next) {
         RendererServiceLocator.current.setStyle(this, 'min-width', next);
         RendererServiceLocator.current.setStyle(this, 'width', next);
     }
     /**
      * @protected
      */
-    onHeightPropertyChanged(prev, next) {
+    onHeightPropertyChanged(_prev, next) {
         RendererServiceLocator.current.setStyle(this, 'min-height', next);
         RendererServiceLocator.current.setStyle(this, 'height', next);
     }
@@ -113,7 +113,7 @@ __decorate([
     Attribute({ type: Boolean }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
-], BoxElement.prototype, "cornerd", null);
+], BoxElement.prototype, "cornered", null);
 __decorate([
     Watch('width'),
     __metadata("design:type", Function),

package/Controls/Components/Primitives/Box/BoxElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Box/BoxElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BoxElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Box/BoxElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Primitives/Box/IBoxElementProps.d.ts

@@ -8,6 +8,6 @@ import type { IInsetableProps } from '../../../Behaviors/Insetable';
  */
 export interface IBoxElementProps extends IFitableProps, IDimensionableProps, IInsetableProps {
     highlighted: boolean;
-    cornerd: boolean;
+    cornered: boolean;
 }
 //# sourceMappingURL=IBoxElementProps.d.ts.map

package/Controls/Components/Primitives/Box/IBoxElementProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IBoxElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Box/IBoxElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE;;;;GAIG;AACH,MAAM,WAAW,gBACb,SAAQ,aAAa,EAAE,mBAAmB,EAAE,eAAe;IAE3D,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,OAAO,CAAC;CAEpB"}
+{"version":3,"file":"IBoxElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Box/IBoxElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE;;;;GAIG;AACH,MAAM,WAAW,gBACb,SAAQ,aAAa,EAAE,mBAAmB,EAAE,eAAe;IAE3D,WAAW,EAAE,OAAO,CAAC;IAErB,QAAQ,EAAE,OAAO,CAAC;CAErB"}

package/Controls/Components/Primitives/Box/Themes/BoxElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAqFvD"}
+{"version":3,"file":"BoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAyIvD"}

package/Controls/Components/Primitives/Box/Themes/BoxElement.Cosmopolitan.js

@@ -91,7 +91,59 @@ export function boxElementCosmopolitanStyle() {
 }
 
 :host([inset*="none"]) {
-  padding: 0;
+  --box-padding-top: 0;
+  --box-padding-right: 0;
+  --box-padding-bottom: 0;
+  --box-padding-left: 0;
+}
+
+:host([inset*="top"]) {
+  padding-top: var(--box-padding-top);
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+:host([inset*="right"]) {
+  padding-top: 0;
+  padding-right: var(--box-padding-right);
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+:host([inset*="bottom"]) {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: 0;
+}
+
+:host([inset*="left"]) {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0;
+  padding-left: var(--box-padding-left);
+}
+
+:host([inset*="vertical"]) {
+  padding-top: var(--box-padding-top);
+  padding-right: 0;
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: 0;
+}
+
+:host([inset*="horizontal"]) {
+  padding-top: 0;
+  padding-right: var(--box-padding-right);
+  padding-bottom: 0;
+  padding-left: var(--box-padding-left);
+}
+
+:host([inset*="all"]) {
+  padding-top: var(--box-padding-top);
+  padding-right: var(--box-padding-right);
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: var(--box-padding-left);
 }
 
     `;

package/Controls/Components/Primitives/Box/Themes/BoxElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"BoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Box/Themes/BoxElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CA2H9C"}
+{"version":3,"file":"BoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CAiJ9C"}

package/Controls/Components/Primitives/Box/Themes/BoxElement.Joy.js

@@ -91,44 +91,66 @@ export function boxElementJoyStyle() {
 }
 
 :host([inset*="none"]) {
-  padding: 0;
+  --box-padding-top: 0;
+  --box-padding-right: 0;
+  --box-padding-bottom: 0;
+  --box-padding-left: 0;
 }
 
 :host([inset*="top"]) {
-  padding-top: var(--joy-layout-space);
+  padding-top: var(--box-padding-top);
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 :host([inset*="right"]) {
-  padding-right: var(--joy-layout-space);
+  padding-top: 0;
+  padding-right: var(--box-padding-right);
+  padding-bottom: 0;
+  padding-left: 0;
 }
 
 :host([inset*="bottom"]) {
-  padding-bottom: var(--joy-layout-space);
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: 0;
 }
 
 :host([inset*="left"]) {
-  padding-left: var(--joy-layout-space);
-}
-
-:host([inset*="all"]) {
-  padding: calc(var(--joy-layout-space) * 4);
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0;
+  padding-left: var(--box-padding-left);
 }
 
 :host([inset*="vertical"]) {
-  padding-top: calc(var(--joy-layout-space) * 4);
-  padding-bottom: calc(var(--joy-layout-space) * 4);
+  padding-top: var(--box-padding-top);
+  padding-right: 0;
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: 0;
 }
 
 :host([inset*="horizontal"]) {
-  padding-left: calc(var(--joy-layout-space) * 4);
-  padding-right: calc(var(--joy-layout-space) * 4);
+  padding-top: 0;
+  padding-right: var(--box-padding-right);
+  padding-bottom: 0;
+  padding-left: var(--box-padding-left);
+}
+
+:host([inset*="all"]) {
+  padding-top: var(--box-padding-top);
+  padding-right: var(--box-padding-right);
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: var(--box-padding-left);
 }
 
 :host([highlighted]) {
   --box-background-color: var(--joy-scheme-highlight);
 }
 
-:host([cornerd]) {
+:host([cornered]) {
   --box-border-radius: var(--joy-layout-radius);
 }
 

package/Controls/Components/Primitives/Box/Themes/BoxElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.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,kBAAkB;IAC9B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"BoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.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,kBAAkB;IAC9B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+IT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Box/Themes/BoxElement.Retro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,CAqFhD"}
+{"version":3,"file":"BoxElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,CAyIhD"}

package/Controls/Components/Primitives/Box/Themes/BoxElement.Retro.js

@@ -20,20 +20,20 @@ export function boxElementRetroStyle() {
   --box-font-letter-spacing: unset;
   --box-font-text-decoration: unset;
   --box-font-text-transform: unset;
-  --box-padding-top: unset;
-  --box-padding-right: unset;
-  --box-padding-bottom: unset;
-  --box-padding-left: unset;
-  --box-gap: unset;
+  --box-padding-top: var(--retro-layout-space);
+  --box-padding-right: var(--retro-layout-space);
+  --box-padding-bottom: var(--retro-layout-space);
+  --box-padding-left: var(--retro-layout-space);
+  --box-gap: var(--retro-layout-space);
   --box-transition-duration: unset;
   --box-transition-mode: unset;
   --box-transition-property: unset;
   --box-translate: unset;
-  --box-background-color: unset;
+  --box-background-color: var(--retro-scheme-transparent);
   --box-border-color: unset;
-  --box-border-radius: unset;
-  --box-border-style: unset;
-  --box-border-width: unset;
+  --box-border-radius: 0;
+  --box-border-style: solid;
+  --box-border-width: 0;
   --box-foreground-color: unset;
 }
 
@@ -91,7 +91,59 @@ export function boxElementRetroStyle() {
 }
 
 :host([inset*="none"]) {
-  padding: 0;
+  --box-padding-top: 0;
+  --box-padding-right: 0;
+  --box-padding-bottom: 0;
+  --box-padding-left: 0;
+}
+
+:host([inset*="top"]) {
+  padding-top: var(--box-padding-top);
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+:host([inset*="right"]) {
+  padding-top: 0;
+  padding-right: var(--box-padding-right);
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+:host([inset*="bottom"]) {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: 0;
+}
+
+:host([inset*="left"]) {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0;
+  padding-left: var(--box-padding-left);
+}
+
+:host([inset*="vertical"]) {
+  padding-top: var(--box-padding-top);
+  padding-right: 0;
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: 0;
+}
+
+:host([inset*="horizontal"]) {
+  padding-top: 0;
+  padding-right: var(--box-padding-right);
+  padding-bottom: 0;
+  padding-left: var(--box-padding-left);
+}
+
+:host([inset*="all"]) {
+  padding-top: var(--box-padding-top);
+  padding-right: var(--box-padding-right);
+  padding-bottom: var(--box-padding-bottom);
+  padding-left: var(--box-padding-left);
 }
 
     `;

package/Controls/Components/Primitives/Box/Themes/BoxElement.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.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,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"BoxElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Box/Themes/BoxElement.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,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIT,CAAC;AACN,CAAC"}