@breadstone/mosaik-elements-foundation 0.0.76 → 0.0.79

package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CA+F9C"}
+{"version":3,"file":"AppElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CAyG9C"}

package/Controls/Components/Shell/Themes/AppElement.Joy.js

@@ -14,6 +14,9 @@ export function appElementJoyStyle() {
     return css `
 :host {
   --app-background-color: var(--joy-scheme-background);
+  --app-border-radius: unset;
+  --app-drawer-height: 100%;
+  --app-drawer-width: 320px;
   --app-font-family: var(--joy-typography-body1-font-family);
   --app-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
   --app-font-line-height: var(--joy-typography-body1-line-height);
@@ -74,11 +77,18 @@ export function appElementJoyStyle() {
   transition-property: var(--app-transition-property);
   background-color: var(--app-background-color);
   color: var(--app-foreground-color);
+  border-radius: var(--app-border-radius);
   width: 100vw;
   height: 100vh;
   display: block;
   position: absolute;
   inset: 0;
+  overflow: clip;
+}
+
+:host [part="drawer"] {
+  --drawer-width: var(--app-drawer-width);
+  --drawer-height: var(--app-drawer-height);
 }
 
 :host [part="content"] {
@@ -89,7 +99,7 @@ export function appElementJoyStyle() {
 
 :host [part="nav"] {
   height: 100%;
-  width: var(--drawer-width);
+  width: var(--app-drawer-width);
   flex-direction: column;
   flex: 1;
   display: flex;

package/Controls/Components/Shell/Themes/AppElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Joy.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6FT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppElement.Joy.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuGT,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppElement.Retro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,CA2FhD"}
+{"version":3,"file":"AppElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,CAqGhD"}

package/Controls/Components/Shell/Themes/AppElement.Retro.js

@@ -14,6 +14,9 @@ export function appElementRetroStyle() {
     return css `
 :host {
   --app-background-color: var(--retro-scheme-background);
+  --app-border-radius: unset;
+  --app-drawer-height: 100%;
+  --app-drawer-width: 320px;
   --app-font-family: var(--retro-typography-body1-font-family);
   --app-font-letter-spacing: var(--retro-typography-body1-letter-spacing);
   --app-font-line-height: var(--retro-typography-body1-line-height);
@@ -74,11 +77,18 @@ export function appElementRetroStyle() {
   transition-property: var(--app-transition-property);
   background-color: var(--app-background-color);
   color: var(--app-foreground-color);
+  border-radius: var(--app-border-radius);
   width: 100vw;
   height: 100vh;
   display: block;
   position: absolute;
   inset: 0;
+  overflow: clip;
+}
+
+:host [part="drawer"] {
+  --drawer-width: var(--app-drawer-width);
+  --drawer-height: var(--app-drawer-height);
 }
 
 :host [part="content"] {
@@ -89,7 +99,7 @@ export function appElementRetroStyle() {
 
 :host [part="nav"] {
   height: 100%;
-  width: var(--drawer-width);
+  width: var(--app-drawer-width);
   flex-direction: column;
   flex: 1;
   display: flex;

package/Controls/Components/Shell/Themes/AppElement.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Retro.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Retro.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppElement.Retro.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Retro.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAyF7D"}
+{"version":3,"file":"AppHeaderElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAiG7D"}

package/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.js

@@ -79,6 +79,7 @@ export function appHeaderElementCosmopolitanStyle() {
   background-color: var(--app-header-background-color);
   color: var(--app-header-foreground-color);
   z-index: 2;
+  width: 100%;
   height: 64px;
   display: block;
   position: sticky;
@@ -98,6 +99,13 @@ export function appHeaderElementCosmopolitanStyle() {
   right: 0;
 }
 
+:host [part="root"] [part="progressBar"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
     `;
 }
 //# sourceMappingURL=AppHeaderElement.Cosmopolitan.js.map

package/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppHeaderElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppHeaderElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAwHpD"}
+{"version":3,"file":"AppHeaderElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAmIpD"}

package/Controls/Components/Shell/Themes/AppHeaderElement.Joy.js

@@ -79,6 +79,7 @@ export function appHeaderElementJoyStyle() {
   background-color: var(--app-header-background-color);
   color: var(--app-header-foreground-color);
   z-index: 2;
+  width: 100%;
   height: 64px;
   display: block;
   position: sticky;
@@ -92,13 +93,23 @@ export function appHeaderElementJoyStyle() {
 :host [part="root"]:after {
   content: "";
   background-color: var(--app-header-border-color);
-  height: var(--app-header-line-thickness);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
+:host [part="root"] [part="progressBar"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="root"]:after {
+  height: var(--app-header-line-thickness);
+}
+
 :host([data-shadow]) [part="toolbar"] {
   box-shadow: var(--joy-elevation-regular);
 }

package/Controls/Components/Shell/Themes/AppHeaderElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.Joy.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppHeaderElement.Joy.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiIT,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppHeaderElement.Retro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CA0FtD"}
+{"version":3,"file":"AppHeaderElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAqGtD"}

package/Controls/Components/Shell/Themes/AppHeaderElement.Retro.js

@@ -79,6 +79,7 @@ export function appHeaderElementRetroStyle() {
   background-color: var(--app-header-background-color);
   color: var(--app-header-foreground-color);
   z-index: 2;
+  width: 100%;
   height: 64px;
   display: block;
   position: sticky;
@@ -92,13 +93,23 @@ export function appHeaderElementRetroStyle() {
 :host [part="root"]:after {
   content: "";
   background-color: var(--app-header-border-color);
-  height: var(--app-header-border-width);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
+:host [part="root"] [part="progressBar"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="root"]:after {
+  height: var(--app-header-border-width);
+}
+
     `;
 }
 //# sourceMappingURL=AppHeaderElement.Retro.js.map

package/Controls/Components/Shell/Themes/AppHeaderElement.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.Retro.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Retro.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppHeaderElement.Retro.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppHeaderElement.Retro.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

package/Controls/Components/States/Empty/Themes/EmptyStateElement.Cosmopolitan.js

@@ -84,7 +84,7 @@ export function emptyStateElementCosmopolitanStyle() {
 }
 
 :host [part="icon"] {
-  --icon-foreground-color: base. component-property($ props, foreground-color);
+  --icon-foreground-color: var(--empty-state-foreground-color);
 }
 
 :host [part="header"] {

package/Controls/Components/States/Empty/Themes/EmptyStateElement.Joy.js

@@ -84,7 +84,7 @@ export function emptyStateElementJoyStyle() {
 }
 
 :host [part="icon"] {
-  --icon-foreground-color: base. component-property($ props, foreground-color);
+  --icon-foreground-color: var(--empty-state-foreground-color);
 }
 
 :host [part="header"] {

package/Controls/Components/States/Empty/Themes/EmptyStateElement.Retro.js

@@ -84,7 +84,7 @@ export function emptyStateElementRetroStyle() {
 }
 
 :host [part="icon"] {
-  --icon-foreground-color: base. component-property($ props, foreground-color);
+  --icon-foreground-color: var(--empty-state-foreground-color);
 }
 
 :host [part="header"] {

package/Controls/Components/States/Error/ErrorStateElement.d.ts

@@ -13,7 +13,7 @@ declare const ErrorStateElement_base: (abstract new (...args: Array<any>) => imp
  * @element mosaik-error-state
  * @category States
  *
- * @slot default - The default slot for placing additional content or elements related to the error.
+ * @slot - The default slot for placing additional content or elements related to the error.
  * @slot actions - The actions slot for placing actionable elements such as buttons or links for error resolution.
  *
  * @csspart header - The header part of the error state component.

package/Controls/Components/States/Error/ErrorStateElement.js

@@ -33,7 +33,7 @@ import { Themeable } from '../../../Behaviors/Themeable';
  * @element mosaik-error-state
  * @category States
  *
- * @slot default - The default slot for placing additional content or elements related to the error.
+ * @slot - The default slot for placing additional content or elements related to the error.
  * @slot actions - The actions slot for placing actionable elements such as buttons or links for error resolution.
  *
  * @csspart header - The header part of the error state component.

package/Controls/Controllers/Abstracts/ElementController.js

@@ -65,7 +65,7 @@ export class ElementController extends ControllerBase {
     tryQueryElement(root, selector) {
         const result = root.renderRoot.querySelector(selector) ?? null;
         if (result === null && !root.hasUpdated) {
-            console.warn(`Element with selector '${selector}' not und. This may be due to the element not being rendered yet.`);
+            console.warn(`[ElementController]: Element with selector '${selector}' not found. This may be due to the element not being rendered yet.`);
         }
         return result;
     }

package/Controls/Controllers/Abstracts/ElementController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementController.js","sourceRoot":"","sources":["../../../../src/Controls/Controllers/Abstracts/ElementController.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAGlB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAiBlD;;;;;GAKG;AACH,MAAM,OAAgB,iBAClB,SAAQ,cAA6B;IAErC,iBAAiB;IAEA,OAAO,CAAqC;IAE7D,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,IAAmB,EAAE,MAA0C;QAC9E,KAAK,CAAC,IAAI,CAAC,CAAC;QAEZ,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IAC1B,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;;;;OAOG;IACI,GAAG,CAAC,IAAY;QACnB,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC;QACvF,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAElE,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED;;;;;;OAMG;IACI,KAAK,CAAC,QAAQ,CAAC,IAAY;QAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC;QACvF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7E,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC9D,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAYD;;OAEG;IACK,eAAe,CAAC,IAAmB,EAAE,QAAgB;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,QAAQ,CAAC,IAAI,IAAI,CAAC;QAE5E,IAAI,MAAM,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,CAAC,0BAA0B,QAAQ,mEAAmE,CAAC,CAAC;QACxH,CAAC;QAED,OAAO,MAAyB,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,oBAAoB,CAAC,IAAmB,EAAE,QAAgB;QAC9D,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChF,CAAC;CAIJ"}
+{"version":3,"file":"ElementController.js","sourceRoot":"","sources":["../../../../src/Controls/Controllers/Abstracts/ElementController.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAGlB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAiBlD;;;;;GAKG;AACH,MAAM,OAAgB,iBAClB,SAAQ,cAA6B;IAErC,iBAAiB;IAEA,OAAO,CAAqC;IAE7D,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,IAAmB,EAAE,MAA0C;QAC9E,KAAK,CAAC,IAAI,CAAC,CAAC;QAEZ,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IAC1B,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;;;;OAOG;IACI,GAAG,CAAC,IAAY;QACnB,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC;QACvF,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAElE,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC9D,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED;;;;;;OAMG;IACI,KAAK,CAAC,QAAQ,CAAC,IAAY;QAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC;QACvF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7E,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC9D,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAYD;;OAEG;IACK,eAAe,CAAC,IAAmB,EAAE,QAAgB;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,QAAQ,CAAC,IAAI,IAAI,CAAC;QAE5E,IAAI,MAAM,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,CAAC,+CAA+C,QAAQ,qEAAqE,CAAC,CAAC;QAC/I,CAAC;QAED,OAAO,MAAyB,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,oBAAoB,CAAC,IAAmB,EAAE,QAAgB;QAC9D,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChF,CAAC;CAIJ"}

package/Controls/Controllers/InfiniteScrollController.d.ts

@@ -0,0 +1,80 @@
+import type { ControllerHost } from './Abstracts/ControllerBase';
+import { ControllerBase } from './Abstracts/ControllerBase';
+/**
+ * Represents the `IInfiniteScrollControllerConfig` interface.
+ *
+ * @public
+ */
+export interface IInfiniteScrollControllerConfig {
+    /**
+     * The delay in milliseconds before the scroll event is processed.
+     */
+    delay?: number;
+    /**
+     * Whether the infinite scroll is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The offset in pixels from the bottom of the scrollable area to trigger the infinite scroll.
+     */
+    offset?: number;
+    /**
+     * Whether the direction of the scroll is reversed.
+     */
+    directionReversed?: boolean;
+    /**
+     * The CSS selector or HTMLElement for the scroll container.
+     */
+    container?: string | HTMLElement;
+    /**
+     * Callback function to be called when the infinite scroll is triggered.
+     */
+    callback?: () => void;
+}
+/**
+ * Controller for HTML Infinite Scroll logic.
+ *
+ * @public
+ */
+export declare class InfiniteScrollController extends ControllerBase {
+    private readonly _callback;
+    private _container;
+    private _containerElement;
+    private _delay;
+    private _disabled;
+    private _offset;
+    private _directionReversed;
+    private _connected;
+    private _scrollTimeout;
+    /**
+     * Constructs a new instance of the `InfiniteScrollController` class.
+     *
+     * @public
+     */
+    constructor(host: ControllerHost, config: IInfiniteScrollControllerConfig);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get delay(): number;
+    set delay(value: number);
+    get offset(): number;
+    set offset(value: number);
+    get directionReversed(): boolean;
+    set directionReversed(value: boolean);
+    get container(): string | HTMLElement;
+    set container(value: string | HTMLElement);
+    /**
+     * Initializes the infinite scroll controller.
+     *
+     * @public
+     */
+    initialize(): void;
+    /**
+     * Disconnects the infinite scroll controller.
+     *
+     * @public
+     */
+    disconnect(): void;
+    private onScroll;
+    private resolveScrollContainer;
+}
+//# sourceMappingURL=InfiniteScrollController.d.ts.map

package/Controls/Controllers/InfiniteScrollController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScrollController.d.ts","sourceRoot":"","sources":["../../../src/Controls/Controllers/InfiniteScrollController.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAI5D;;;;GAIG;AACH,MAAM,WAAW,+BAA+B;IAI5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CAIzB;AAED;;;;GAIG;AACH,qBAAa,wBACT,SAAQ,cAAc;IAItB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,kBAAkB,CAAU;IACpC,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,cAAc,CAAgB;IAMtC;;;;OAIG;gBACgB,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,+BAA+B;IAmBhF,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAEjC;IAED,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED,IAAW,MAAM,IAAI,MAAM,CAE1B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED,IAAW,iBAAiB,IAAI,OAAO,CAEtC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAE1C;IAED,IAAW,SAAS,IAAI,MAAM,GAAG,WAAW,CAE3C;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAE/C;IAMD;;;;OAIG;IACI,UAAU,IAAI,IAAI;IAQzB;;;;OAIG;IACI,UAAU,IAAI,IAAI;IAWzB,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,sBAAsB;CAiBjC"}

package/Controls/Controllers/InfiniteScrollController.js

@@ -0,0 +1,132 @@
+// #region Imports
+import { ControllerBase } from './Abstracts/ControllerBase';
+/**
+ * Controller for HTML Infinite Scroll logic.
+ *
+ * @public
+ */
+export class InfiniteScrollController extends ControllerBase {
+    // #region Fields
+    _callback;
+    _container;
+    _containerElement;
+    _delay;
+    _disabled;
+    _offset;
+    _directionReversed;
+    _connected;
+    _scrollTimeout;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `InfiniteScrollController` class.
+     *
+     * @public
+     */
+    constructor(host, config) {
+        super(host);
+        this._callback = config.callback ?? (() => { });
+        this._container = config.container ?? host;
+        this._delay = config.delay ?? 0;
+        this._disabled = config.disabled ?? false;
+        this._offset = config.offset ?? 0;
+        this._directionReversed = config.directionReversed ?? false;
+        this._containerElement = null;
+        this._scrollTimeout = null;
+        this._connected = false;
+        this._scrollTimeout = null;
+    }
+    // #endregion
+    // #region Properties
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get delay() {
+        return this._delay;
+    }
+    set delay(value) {
+        this._delay = value;
+    }
+    get offset() {
+        return this._offset;
+    }
+    set offset(value) {
+        this._offset = value;
+    }
+    get directionReversed() {
+        return this._directionReversed;
+    }
+    set directionReversed(value) {
+        this._directionReversed = value;
+    }
+    get container() {
+        return this._container;
+    }
+    set container(value) {
+        this._container = value;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Initializes the infinite scroll controller.
+     *
+     * @public
+     */
+    initialize() {
+        this._containerElement = this.resolveScrollContainer();
+        if (this._containerElement) {
+            this._containerElement.addEventListener('scroll', (e) => this.onScroll(e), { passive: true });
+            this._connected = true;
+        }
+    }
+    /**
+     * Disconnects the infinite scroll controller.
+     *
+     * @public
+     */
+    disconnect() {
+        if (this._containerElement) {
+            this._containerElement.removeEventListener('scroll', (e) => this.onScroll(e));
+        }
+        this._connected = false;
+        if (this._scrollTimeout !== null) {
+            clearTimeout(this._scrollTimeout);
+            this._scrollTimeout = null;
+        }
+    }
+    onScroll(event) {
+        if (this._disabled)
+            return;
+        if (this._scrollTimeout !== null) {
+            clearTimeout(this._scrollTimeout);
+        }
+        this._scrollTimeout = window.setTimeout(() => {
+            const target = event.target;
+            const height = target.scrollHeight;
+            const top = target.scrollTop;
+            const offsetHeight = target.offsetHeight;
+            const y = top + offsetHeight + this._offset;
+            if (y >= height) {
+                this._callback();
+            }
+        }, this._delay);
+    }
+    resolveScrollContainer() {
+        if (typeof this._container === 'string') {
+            if (this._container.length > 0) {
+                const queryElement = this.host.querySelector(this._container);
+                if (queryElement) {
+                    return queryElement;
+                }
+                this._connected = false;
+                return null;
+            }
+            return null;
+        }
+        return this._container;
+    }
+}
+//# sourceMappingURL=InfiniteScrollController.js.map

package/Controls/Controllers/InfiniteScrollController.js.map

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

package/Controls/Controllers/InlineStyleController.js

@@ -62,7 +62,7 @@ export class InlineStyleController extends ControllerBase {
             throw new Error('CSS variable name should not start with "--".');
         }
         return this.host.shadowRoot
-            ? getComputedStyle(this.host.shadowRoot.host).getPropertyValue(`--${name}`)
+            ? window.getComputedStyle(this.host.shadowRoot.host).getPropertyValue(`--${name}`)
                 .trim() || null
             : null;
     }

package/Controls/Controllers/InlineStyleController.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineStyleController.js","sourceRoot":"","sources":["../../../src/Controls/Controllers/InlineStyleController.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,cAAc,EAAuB,MAAM,4BAA4B,CAAC;AAEjF,aAAa;AAEb;;;;;GAKG;AACH,MAAM,OAAO,qBACT,SAAQ,cAAc;IAEtB,iBAAiB;IAET,MAAM,CAAiB;IACvB,KAAK,CAAgB;IAE7B,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,IAAoB;QACnC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;OAGG;IACa,aAAa;QACzB,KAAK,CAAC,aAAa,EAAE,CAAC;QAEtB,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,GAAG;gBACtC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB;gBAC1C,IAAI,CAAC,MAAM;aACd,CAAC;QACN,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAiB,CAAC;IACzD,CAAC;IAED;;;;;OAKG;IACI,GAAG,CAAC,IAAY,EAAE,KAAc;QACnC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;QACrE,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,CAAC;IAED;;;;;OAKG;IACI,GAAG,CAAC,IAAY;QACnB,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;QACrE,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU;YACvB,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC;iBACtE,IAAI,EAAE,IAAI,IAAI;YACnB,CAAC,CAAC,IAAI,CAAC;IACf,CAAC;CAIJ"}
+{"version":3,"file":"InlineStyleController.js","sourceRoot":"","sources":["../../../src/Controls/Controllers/InlineStyleController.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,cAAc,EAAuB,MAAM,4BAA4B,CAAC;AAEjF,aAAa;AAEb;;;;;GAKG;AACH,MAAM,OAAO,qBACT,SAAQ,cAAc;IAEtB,iBAAiB;IAET,MAAM,CAAiB;IACvB,KAAK,CAAgB;IAE7B,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,IAAoB;QACnC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;OAGG;IACa,aAAa;QACzB,KAAK,CAAC,aAAa,EAAE,CAAC;QAEtB,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,GAAG;gBACtC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB;gBAC1C,IAAI,CAAC,MAAM;aACd,CAAC;QACN,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAiB,CAAC;IACzD,CAAC;IAED;;;;;OAKG;IACI,GAAG,CAAC,IAAY,EAAE,KAAc;QACnC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;QACrE,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,CAAC;IAED;;;;;OAKG;IACI,GAAG,CAAC,IAAY;QACnB,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;QACrE,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU;YACvB,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC;iBAC7E,IAAI,EAAE,IAAI,IAAI;YACnB,CAAC,CAAC,IAAI,CAAC;IACf,CAAC;CAIJ"}

package/Controls/Decorators/ComponentDecorator.d.ts

@@ -18,7 +18,7 @@ export interface IComponentOptions<TComponent = any> {
     /**
      * The styles to apply to the custom element.
      */
-    styles?: string | (() => CSSResultGroup) | CSSResultGroup;
+    styles?: string | (() => CSSResultGroup) | CSSResultGroup | Array<string | (() => CSSResultGroup) | CSSResultGroup>;
     /**
      * The themes to apply to the custom element.
      */

package/Controls/Decorators/ComponentDecorator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentDecorator.d.ts","sourceRoot":"","sources":["../../../src/Controls/Decorators/ComponentDecorator.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAO,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAkU3D,UAAU,UAAU;IAChB,aAAa,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAAC,UAAU,GAAG,GAAG;IAI/C;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;IAE1D;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,GAAG,cAAc,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC;IAEvH;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,cAAc,CAAC,GAAG,cAAc,CAAC;IAEzE;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC7B,CAAC,CAAC;CAIN;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,iBAAiB,GAAG,QAAQ,CAI9D"}
+{"version":3,"file":"ComponentDecorator.d.ts","sourceRoot":"","sources":["../../../src/Controls/Decorators/ComponentDecorator.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAO,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAuU3D,UAAU,UAAU;IAChB,aAAa,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAAC,UAAU,GAAG,GAAG;IAI/C;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC,CAAC;IAEpH;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,GAAG,cAAc,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC;IAEvH;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,cAAc,CAAC,GAAG,cAAc,CAAC;IAEzE;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC7B,CAAC,CAAC;CAIN;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,iBAAiB,GAAG,QAAQ,CAI9D"}

package/Controls/Decorators/ComponentDecorator.js

@@ -45,15 +45,21 @@ function getPrototypes(object) {
  * @private
  */
 function createStyleSheets(styles) {
-    let newStyles = null;
-    if (isFunction(styles)) {
-        newStyles = styles();
-    }
-    else if (isString(styles)) {
-        newStyles = css `${unsafeCSS(styles)}`;
+    let newStyles = css ``;
+    if (Array.isArray(styles)) {
+        newStyles = styles.map((s) => createStyleSheets(s));
+        return newStyles;
     }
     else {
-        newStyles = styles;
+        if (isFunction(styles)) {
+            newStyles = styles();
+        }
+        else if (isString(styles)) {
+            newStyles = css `${unsafeCSS(styles)}`;
+        }
+        else if (styles !== undefined) {
+            newStyles = styles;
+        }
     }
     return newStyles;
 }
@@ -239,7 +245,7 @@ function legacyCustomElement(ctor, options) {
         customElements.define(options.selector, ctor);
     }
     else {
-        console.warn(`[@Component] The element '${options.selector}' is already defined.`);
+        console.warn(`[Component]: The element '${options.selector}' is already defined.`);
     }
     return ctor;
 }
@@ -273,7 +279,7 @@ function standardCustomElement(descriptor, options) {
                 customElements.define(options.selector, ctor);
             }
             else {
-                console.warn(`[@Component] The element '${options.selector}' is already defined.`);
+                console.warn(`[Component]: The element '${options.selector}' is already defined.`);
             }
         }
     };