@breadstone/mosaik-elements-foundation 0.0.226 → 0.0.227

package/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Memphis.js

@@ -13,6 +13,7 @@ import { css } from '../../../../../Dom/Css';
 export function scrollElementMemphisStyle() {
     return css `
 :host {
+  --scroll-action-button-width: 40px;
   --scroll-font-family: unset;
   --scroll-font-letter-spacing: unset;
   --scroll-font-line-height: unset;
@@ -21,13 +22,14 @@ export function scrollElementMemphisStyle() {
   --scroll-font-text-transform: unset;
   --scroll-font-weight: unset;
   --scroll-gap: unset;
+  --scroll-gradient-size: 40px;
   --scroll-padding-bottom: unset;
   --scroll-padding-left: unset;
   --scroll-padding-right: unset;
   --scroll-padding-top: unset;
-  --scroll-transition-duration: unset;
-  --scroll-transition-mode: unset;
-  --scroll-transition-property: unset;
+  --scroll-transition-duration: var(--memphis-duration-medium);
+  --scroll-transition-mode: ease;
+  --scroll-transition-property: background-color, box-shadow, transform;
   --scroll-translate: unset;
 }
 
@@ -57,33 +59,223 @@ export function scrollElementMemphisStyle() {
   display: none !important;
 }
 
+:host [part="root"] {
+  height: inherit;
+  display: grid;
+  position: relative;
+}
+
 :host [part="scroller"] {
   z-index: 1;
+  overflow: auto;
+}
+
+:host [part="content"] {
+  gap: var(--scroll-content-gap, 0);
+  min-height: 28px;
+  padding: var(--scroll-padding-top) var(--scroll-padding-right) var(--scroll-padding-bottom) var(--scroll-padding-left);
+  position: relative;
+}
+
+:host [part="content"] [part="anchorTop"] {
+  position: absolute;
+  top: 0;
+}
+
+:host [part="content"] [part="anchorBottom"] {
+  position: absolute;
+  bottom: 0;
+}
+
+:host [part="content"] [part="triggerStart"], :host [part="content"] [part="triggerEnd"] {
+  visibility: hidden;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+:host [part="content"] [part="triggerStart"] {
+  left: 0;
+}
+
+:host [part="content"] [part="triggerEnd"] {
+  right: 0;
+}
+
+:host(:not([orientation="horizontal"])) [part="scroller"] {
   flex-direction: column;
   flex: 1;
   display: flex;
-  overflow: auto;
 }
 
-:host [part="scroller"] [part="content"] {
+:host(:not([orientation="horizontal"])) [part="content"] {
   transform-origin: top;
-  padding: var(--scroll-padding-top) var(--scroll-padding-right) var(--scroll-padding-bottom) var(--scroll-padding-left);
   flex-direction: column;
   flex-grow: 1;
   height: min-content;
   display: flex;
-  position: relative;
   overflow: hidden;
 }
 
-:host [part="scroller"] [part="content"] [part="anchorTop"] {
+:host([orientation="horizontal"]) [part="scroller"] {
+  overflow: auto hidden;
+}
+
+:host([orientation="horizontal"]) [part="content"] {
+  vertical-align: top;
+  flex-direction: row;
+  min-width: 100%;
+  display: inline-flex;
+}
+
+:host([orientation="vertical"]) [part="triggerStart"], :host([orientation="vertical"]) [part="triggerEnd"] {
+  width: auto;
+  height: 1px;
+  left: 0;
+  right: 0;
+}
+
+:host([orientation="vertical"]) [part="triggerStart"] {
+  inset: 0 auto auto;
+}
+
+:host([orientation="vertical"]) [part="triggerEnd"] {
+  inset: auto auto 0;
+}
+
+:host([show-scroll-buttons]) [part="root"], :host([show-scroll-buttons][orientation="horizontal"]) [part="root"] {
+  grid-template-columns: var(--scroll-action-button-width, 40px) minmax(0, 1fr) var(--scroll-action-button-width, 40px);
+}
+
+:host([show-scroll-buttons]) [part="scroller"], :host([show-scroll-buttons][orientation="horizontal"]) [part="scroller"] {
+  grid-area: 1 / 1 / 1 / -1;
+  overflow: auto hidden;
+}
+
+:host([show-scroll-buttons]) [part="content"], :host([show-scroll-buttons][orientation="horizontal"]) [part="content"] {
+  flex-direction: row;
+  min-width: 100%;
+  display: inline-flex;
+}
+
+:host([show-scroll-buttons]) [part="actionPrev"], :host([show-scroll-buttons]) [part="actionNext"], :host([show-scroll-buttons][orientation="horizontal"]) [part="actionPrev"], :host([show-scroll-buttons][orientation="horizontal"]) [part="actionNext"] {
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity var(--scroll-transition-duration, .25s) var(--scroll-transition-mode, ease);
+}
+
+:host([show-scroll-buttons]) [part="actionPrev"], :host([show-scroll-buttons][orientation="horizontal"]) [part="actionPrev"] {
+  width: var(--scroll-action-button-width, 40px);
+  align-items: var(--scroll-align-scroll-indicator, center);
+  z-index: 2;
+  direction: ltr;
+  justify-content: flex-start;
+  display: flex;
   position: absolute;
   top: 0;
+  bottom: 0;
+  left: 0;
 }
 
-:host [part="scroller"] [part="content"] [part="anchorBottom"] {
+:host([show-scroll-buttons]) [part="actionNext"], :host([show-scroll-buttons][orientation="horizontal"]) [part="actionNext"] {
+  width: var(--scroll-action-button-width, 40px);
+  align-items: var(--scroll-align-scroll-indicator, center);
+  z-index: 2;
+  direction: ltr;
+  justify-content: flex-end;
+  display: flex;
   position: absolute;
+  top: 0;
   bottom: 0;
+  right: 0;
+}
+
+:host([show-scroll-buttons][orientation="vertical"]) {
+  height: 100%;
+}
+
+:host([show-scroll-buttons][orientation="vertical"]) [part="root"] {
+  grid-template-columns: auto;
+  grid-template-rows: var(--scroll-action-button-width, 40px) minmax(0, 1fr) var(--scroll-action-button-width, 40px);
+  height: 100%;
+}
+
+:host([show-scroll-buttons][orientation="vertical"]) [part="scroller"] {
+  grid-area: 1 / 1 / -1 / 1;
+  overflow: hidden auto;
+}
+
+:host([show-scroll-buttons][orientation="vertical"]) [part="content"] {
+  flex-direction: column;
+  min-height: 100%;
+  display: flex;
+}
+
+:host([show-scroll-buttons][orientation="vertical"]) [part="actionPrev"] {
+  width: auto;
+  height: var(--scroll-action-button-width, 40px);
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0 0 auto;
+}
+
+:host([show-scroll-buttons][orientation="vertical"]) [part="actionNext"] {
+  width: auto;
+  height: var(--scroll-action-button-width, 40px);
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: auto 0 0;
+}
+
+:host([show-scroll-buttons][is-at-scroll-start]) [part="actionPrev"], :host([show-scroll-buttons][is-at-scroll-end]) [part="actionNext"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(:not([orientation="vertical"]):not([is-at-scroll-start]):not([is-at-scroll-end])) [part="scroller"] {
+  -webkit-mask: linear-gradient(90deg, #0000 0, #000 var(--scroll-gradient-size, 40px) calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+  mask: linear-gradient(90deg, #0000 0, #000 var(--scroll-gradient-size, 40px) calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+}
+
+:host(:not([orientation="vertical"])[is-at-scroll-start]:not([is-at-scroll-end])) [part="scroller"] {
+  -webkit-mask: linear-gradient(90deg, #000 calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+  mask: linear-gradient(90deg, #000 calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+}
+
+:host(:not([orientation="vertical"]):not([is-at-scroll-start])[is-at-scroll-end]) [part="scroller"] {
+  -webkit-mask: linear-gradient(90deg, #0000 0, #000 var(--scroll-gradient-size, 40px)) alpha;
+  mask: linear-gradient(90deg, #0000 0, #000 var(--scroll-gradient-size, 40px)) alpha;
+}
+
+:host([orientation="vertical"]:not([is-at-scroll-start]):not([is-at-scroll-end])) [part="scroller"] {
+  -webkit-mask: linear-gradient(180deg, #0000 0, #000 var(--scroll-gradient-size, 40px) calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+  mask: linear-gradient(180deg, #0000 0, #000 var(--scroll-gradient-size, 40px) calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+}
+
+:host([orientation="vertical"][is-at-scroll-start]:not([is-at-scroll-end])) [part="scroller"] {
+  -webkit-mask: linear-gradient(180deg, #000 calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+  mask: linear-gradient(180deg, #000 calc(100% - var(--scroll-gradient-size, 40px)), #0000 100%) alpha;
+}
+
+:host([orientation="vertical"]:not([is-at-scroll-start])[is-at-scroll-end]) [part="scroller"] {
+  -webkit-mask: linear-gradient(180deg, #0000 0, #000 var(--scroll-gradient-size, 40px)) alpha;
+  mask: linear-gradient(180deg, #0000 0, #000 var(--scroll-gradient-size, 40px)) alpha;
+}
+
+:host(:not([show-scrollbar])) [part="scroller"] {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+:host(:not([show-scrollbar])) [part="scroller"]::-webkit-scrollbar {
+  display: none;
 }
 
     `;

package/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Memphis.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2ET,CAAC;AACN,CAAC"}
+{"version":3,"file":"ScrollElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Scroll/Themes/ScrollElement.Memphis.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2QT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Skeleton/SkeletonElement.d.ts

@@ -7,39 +7,39 @@ declare const SkeletonElement_base: (abstract new (...args: Array<any>) => impor
 /**
  * Skeleton - A placeholder element that mimics content structure during loading states.
  *
- * Provides visual feedback while content loads by displaying placeholder shapes that approximate
- * the final content layout. Reduces perceived loading time and improves user experience.
- * Supports various shapes (rectangle, circle, text) with optional shimmer animation.
+ * @description
+ * The Skeleton component is a fundamental loading indicator that provides visual feedback while
+ * content is being fetched or processed. It displays placeholder shapes that approximate the final
+ * content layout, reducing perceived loading time and improving user experience by showing the
+ * structure of upcoming content. The component supports multiple shape variants (rectangle, circle,
+ * text) through the SkeletonShape enumeration, configurable dimensions via the Dimensionable behavior,
+ * and an optional shimmer animation effect that creates a subtle sweeping highlight to indicate
+ * loading activity. Skeleton screens are proven to reduce bounce rates and increase user engagement
+ * during asynchronous operations.
  *
- * @name SkeletonElement
+ * @name Skeleton
  * @element mosaik-skeleton
- * @category Primitive
+ * @category Primitives
  *
- * @csspart skeleton - The main skeleton placeholder element
+ * @csspart shimmer - The animated shimmer highlight overlay element
  *
- * @cssprop --skeleton-color - Background color of the skeleton placeholder
- * @cssprop --skeleton-highlight-color - Color of the shimmer highlight animation
- * @cssprop --skeleton-animation-duration - Duration of the shimmer animation cycle
- * @cssprop --skeleton-border-radius - Border radius for rounded skeleton shapes
+ * @cssprop {String} --skeleton-background-color - The base background color of the skeleton placeholder
+ * @cssprop {String} --skeleton-border-color - The border color of the skeleton placeholder
+ * @cssprop {String} --skeleton-border-radius - The border radius for rounded skeleton shapes
+ * @cssprop {String} --skeleton-border-style - The border style for the skeleton placeholder
+ * @cssprop {String} --skeleton-border-width - The border width for the skeleton placeholder
+ * @cssprop {String} --skeleton-foreground-color - The foreground color (typically unused but available)
  *
  * @example
+ * Text line skeleton placeholder:
  * ```html
- * <!-- Text line skeleton -->
  * <mosaik-skeleton shape="text" width="200px" height="16px"></mosaik-skeleton>
+ * ```
  *
- * <!-- Avatar skeleton with shimmer -->
- * <mosaik-skeleton shape="circle" width="40px" height="40px" shimmer></mosaik-skeleton>
- *
- * <!-- Card skeleton -->
- * <mosaik-skeleton shape="rect" width="300px" height="200px" shimmer></mosaik-skeleton>
- *
- * <!-- Loading article layout -->
- * <div class="article-skeleton">
- *   <mosaik-skeleton shape="rect" width="100%" height="200px" shimmer></mosaik-skeleton>
- *   <mosaik-skeleton shape="text" width="80%" height="24px"></mosaik-skeleton>
- *   <mosaik-skeleton shape="text" width="60%" height="16px"></mosaik-skeleton>
- *   <mosaik-skeleton shape="text" width="90%" height="16px"></mosaik-skeleton>
- * </div>
+ * @example
+ * Avatar skeleton with shimmer animation:
+ * ```html
+ * <mosaik-skeleton shape="circle" width="48px" height="48px" shimmer></mosaik-skeleton>
  * ```
  *
  * @public

package/Controls/Components/Primitives/Skeleton/SkeletonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Skeleton/SkeletonElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAShE,KAAK,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAUa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,QAAQ,CAAU;IAM1B;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAEM,MAAM,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;OAKG;IACH,IACW,KAAK,IAAI,aAAa,CAEhC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,aAAa,EAKpC;IAED;;;;;OAKG;IACH,IAEW,OAAO,IAAI,OAAO,CAE5B;IACD,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,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}
+{"version":3,"file":"SkeletonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Skeleton/SkeletonElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAOtD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAQhE,KAAK,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAUa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,QAAQ,CAAU;IAM1B;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAEM,MAAM,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;OAKG;IACH,IACW,KAAK,IAAI,aAAa,CAEhC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,aAAa,EAKpC;IAED;;;;;OAKG;IACH,IAIW,OAAO,IAAI,OAAO,CAE5B;IACD,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,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}

package/Controls/Components/Primitives/Skeleton/SkeletonElement.js

@@ -8,55 +8,55 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { RendererServiceLocator } from '../../../../Dom/Renderer';
 import { CssLength } from '@breadstone/mosaik-themes';
+import { RendererServiceLocator } from '../../../../Dom/Renderer';
 import { Dimensionable } from '../../../Behaviors/Dimensionable';
+import { Themeable } from '../../../Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { Watch } from '../../../Decorators/WatchDecorator';
 import { SkeletonShape } from '../../../Types/SkeletonShape';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { skeletonElementTemplate } from './SkeletonElementTemplate';
+import { skeletonElementCosmopolitanStyle } from './Themes/SkeletonElement.Cosmopolitan';
 import { skeletonElementJoyStyle } from './Themes/SkeletonElement.Joy';
 import { skeletonElementMemphisStyle } from './Themes/SkeletonElement.Memphis';
-import { skeletonElementCosmopolitanStyle } from './Themes/SkeletonElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
 /**
  * Skeleton - A placeholder element that mimics content structure during loading states.
  *
- * Provides visual feedback while content loads by displaying placeholder shapes that approximate
- * the final content layout. Reduces perceived loading time and improves user experience.
- * Supports various shapes (rectangle, circle, text) with optional shimmer animation.
+ * @description
+ * The Skeleton component is a fundamental loading indicator that provides visual feedback while
+ * content is being fetched or processed. It displays placeholder shapes that approximate the final
+ * content layout, reducing perceived loading time and improving user experience by showing the
+ * structure of upcoming content. The component supports multiple shape variants (rectangle, circle,
+ * text) through the SkeletonShape enumeration, configurable dimensions via the Dimensionable behavior,
+ * and an optional shimmer animation effect that creates a subtle sweeping highlight to indicate
+ * loading activity. Skeleton screens are proven to reduce bounce rates and increase user engagement
+ * during asynchronous operations.
  *
- * @name SkeletonElement
+ * @name Skeleton
  * @element mosaik-skeleton
- * @category Primitive
+ * @category Primitives
  *
- * @csspart skeleton - The main skeleton placeholder element
+ * @csspart shimmer - The animated shimmer highlight overlay element
  *
- * @cssprop --skeleton-color - Background color of the skeleton placeholder
- * @cssprop --skeleton-highlight-color - Color of the shimmer highlight animation
- * @cssprop --skeleton-animation-duration - Duration of the shimmer animation cycle
- * @cssprop --skeleton-border-radius - Border radius for rounded skeleton shapes
+ * @cssprop {String} --skeleton-background-color - The base background color of the skeleton placeholder
+ * @cssprop {String} --skeleton-border-color - The border color of the skeleton placeholder
+ * @cssprop {String} --skeleton-border-radius - The border radius for rounded skeleton shapes
+ * @cssprop {String} --skeleton-border-style - The border style for the skeleton placeholder
+ * @cssprop {String} --skeleton-border-width - The border width for the skeleton placeholder
+ * @cssprop {String} --skeleton-foreground-color - The foreground color (typically unused but available)
  *
  * @example
+ * Text line skeleton placeholder:
  * ```html
- * <!-- Text line skeleton -->
  * <mosaik-skeleton shape="text" width="200px" height="16px"></mosaik-skeleton>
+ * ```
  *
- * <!-- Avatar skeleton with shimmer -->
- * <mosaik-skeleton shape="circle" width="40px" height="40px" shimmer></mosaik-skeleton>
- *
- * <!-- Card skeleton -->
- * <mosaik-skeleton shape="rect" width="300px" height="200px" shimmer></mosaik-skeleton>
- *
- * <!-- Loading article layout -->
- * <div class="article-skeleton">
- *   <mosaik-skeleton shape="rect" width="100%" height="200px" shimmer></mosaik-skeleton>
- *   <mosaik-skeleton shape="text" width="80%" height="24px"></mosaik-skeleton>
- *   <mosaik-skeleton shape="text" width="60%" height="16px"></mosaik-skeleton>
- *   <mosaik-skeleton shape="text" width="90%" height="16px"></mosaik-skeleton>
- * </div>
+ * @example
+ * Avatar skeleton with shimmer animation:
+ * ```html
+ * <mosaik-skeleton shape="circle" width="48px" height="48px" shimmer></mosaik-skeleton>
  * ```
  *
  * @public
@@ -142,8 +142,10 @@ __decorate([
     __metadata("design:paramtypes", [String])
 ], SkeletonElement.prototype, "shape", null);
 __decorate([
-    Attribute({ type: Boolean,
-        useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], SkeletonElement.prototype, "shimmer", null);

package/Controls/Components/Primitives/Skeleton/SkeletonElement.js.map

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

package/Controls/Components/Primitives/Spacer/SpacerElement.d.ts

@@ -6,42 +6,35 @@ declare const SpacerElement_base: (abstract new (...args: Array<any>) => import(
 /**
  * Spacer - A flexible spacing element for creating consistent gaps and layout control.
  *
- * Provides precise spacing control between UI elements with configurable thickness, size multipliers,
- * and directional spacing. Essential for maintaining consistent visual rhythm and alignment in layouts.
- * Supports responsive spacing based on design system tokens.
+ * @description
+ * The Spacer component is a fundamental layout utility that provides precise spacing control between
+ * UI elements, maintaining consistent visual rhythm and alignment throughout the interface. It uses
+ * the design system's spacing scale to ensure harmonious layouts across different screen sizes and
+ * contexts. The component supports configurable thickness properties that define which sides (top,
+ * right, bottom, left, vertical, horizontal, or all) receive spacing, size multipliers for scaling
+ * the base spacing value, predefined size categories (tiny, small, medium, large, giant), and an
+ * invert option for creating negative margins when needed. The Spacer integrates with the theme
+ * system to ensure spacing values align with the overall design language, making it essential for
+ * building responsive, well-structured layouts without manual margin/padding calculations.
  *
- * @name SpacerElement
+ * @name Spacer
  * @element mosaik-spacer
- * @category Primitive
+ * @category Primitives
  *
- * @csspart spacer - The main spacing container element
- *
- * @cssprop --spacer-thickness - Base thickness for the spacer element
- * @cssprop --spacer-multiplier - Multiplier applied to base spacing values
- * @cssprop --spacer-size - Predefined size category (xs, sm, md, lg, xl)
+ * @slot - Default content slot for spacer element (typically empty)
  *
  * @example
+ * Basic spacing between elements:
  * ```html
- * <!-- Basic spacing -->
  * <div>Content Above</div>
  * <mosaik-spacer></mosaik-spacer>
  * <div>Content Below</div>
+ * ```
  *
- * <!-- Custom multiplier for larger gap -->
- * <mosaik-spacer multiplier="2"></mosaik-spacer>
- *
- * <!-- Size-based spacing -->
- * <mosaik-spacer size="lg"></mosaik-spacer>
- *
- * <!-- Multiple thickness values -->
- * <mosaik-spacer thickness="md lg"></mosaik-spacer>
- *
- * <!-- Flex layout spacing -->
- * <div style="display: flex; align-items: center;">
- *   <button>Button 1</button>
- *   <mosaik-spacer></mosaik-spacer>
- *   <button>Button 2</button>
- * </div>
+ * @example
+ * Custom multiplier for proportional spacing:
+ * ```html
+ * <mosaik-spacer multiplier="2" thickness="vertical"></mosaik-spacer>
  * ```
  *
  * @public

package/Controls/Components/Primitives/Spacer/SpacerElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpacerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Spacer/SpacerElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAgC,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAQ/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAUa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAI9B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,KAAK,CAAO;IACpB,OAAO,CAAC,UAAU,CAAwB;IAC1C,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,oBAAoB,CAA6B;IAMzD;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;;;OAOG;IACH,IACW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAOlC;IAED;;;;;;;;OAQG;IACH,IACW,IAAI,IAAI,IAAI,CAEtB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,IAAI,EAK1B;IAED;;;;;;;;OAQG;IACH,IAQW,SAAS,IAAI,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAEtD;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,EAK1D;IAED;;;;;;;;OAQG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;;;;OAOG;IACH,IACW,mBAAmB,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAE3D;IACD,IAAW,mBAAmB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAK/D;IAMD;;;;;OAKG;IACI,eAAe,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO;IAyBrE;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAiBtB;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAqCzB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAiBvB;;;;OAIG;IACH,OAAO,CAAC,SAAS;CAcpB;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"SpacerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Spacer/SpacerElement.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAgC,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAM/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBAUa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAI9B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,KAAK,CAAO;IACpB,OAAO,CAAC,UAAU,CAAwB;IAC1C,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,oBAAoB,CAA6B;IAMzD;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;;;OAOG;IACH,IACW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAOlC;IAED;;;;;;;;OAQG;IACH,IACW,IAAI,IAAI,IAAI,CAEtB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,IAAI,EAK1B;IAED;;;;;;;;OAQG;IACH,IAQW,SAAS,IAAI,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAEtD;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,EAK1D;IAED;;;;;;;;OAQG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;;;;OAOG;IACH,IACW,mBAAmB,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAE3D;IACD,IAAW,mBAAmB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAK/D;IAMD;;;;;OAKG;IACI,eAAe,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO;IAyBrE;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAiBtB;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAqCzB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAiBvB;;;;OAIG;IACH,OAAO,CAAC,SAAS;CAcpB;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

package/Controls/Components/Primitives/Spacer/SpacerElement.js

@@ -8,56 +8,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { Themeable } from '../../../Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
 import { Size } from '../../../Types/Size';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { DEFAULT_SPACER_ELEMENT_PROPS } from './ISpacerElementProps';
 import { spacerElementTemplate } from './SpacerElementTemplate';
+import { spacerElementCosmopolitanStyle } from './Themes/SpacerElement.Cosmopolitan';
 import { spacerElementJoyStyle } from './Themes/SpacerElement.Joy';
 import { spacerElementMemphisStyle } from './Themes/SpacerElement.Memphis';
-import { spacerElementCosmopolitanStyle } from './Themes/SpacerElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
-import { Property } from '../../../Decorators/PropertyDecorator';
 /**
  * Spacer - A flexible spacing element for creating consistent gaps and layout control.
  *
- * Provides precise spacing control between UI elements with configurable thickness, size multipliers,
- * and directional spacing. Essential for maintaining consistent visual rhythm and alignment in layouts.
- * Supports responsive spacing based on design system tokens.
+ * @description
+ * The Spacer component is a fundamental layout utility that provides precise spacing control between
+ * UI elements, maintaining consistent visual rhythm and alignment throughout the interface. It uses
+ * the design system's spacing scale to ensure harmonious layouts across different screen sizes and
+ * contexts. The component supports configurable thickness properties that define which sides (top,
+ * right, bottom, left, vertical, horizontal, or all) receive spacing, size multipliers for scaling
+ * the base spacing value, predefined size categories (tiny, small, medium, large, giant), and an
+ * invert option for creating negative margins when needed. The Spacer integrates with the theme
+ * system to ensure spacing values align with the overall design language, making it essential for
+ * building responsive, well-structured layouts without manual margin/padding calculations.
  *
- * @name SpacerElement
+ * @name Spacer
  * @element mosaik-spacer
- * @category Primitive
- *
- * @csspart spacer - The main spacing container element
+ * @category Primitives
  *
- * @cssprop --spacer-thickness - Base thickness for the spacer element
- * @cssprop --spacer-multiplier - Multiplier applied to base spacing values
- * @cssprop --spacer-size - Predefined size category (xs, sm, md, lg, xl)
+ * @slot - Default content slot for spacer element (typically empty)
  *
  * @example
+ * Basic spacing between elements:
  * ```html
- * <!-- Basic spacing -->
  * <div>Content Above</div>
  * <mosaik-spacer></mosaik-spacer>
  * <div>Content Below</div>
+ * ```
  *
- * <!-- Custom multiplier for larger gap -->
- * <mosaik-spacer multiplier="2"></mosaik-spacer>
- *
- * <!-- Size-based spacing -->
- * <mosaik-spacer size="lg"></mosaik-spacer>
- *
- * <!-- Multiple thickness values -->
- * <mosaik-spacer thickness="md lg"></mosaik-spacer>
- *
- * <!-- Flex layout spacing -->
- * <div style="display: flex; align-items: center;">
- *   <button>Button 1</button>
- *   <mosaik-spacer></mosaik-spacer>
- *   <button>Button 2</button>
- * </div>
+ * @example
+ * Custom multiplier for proportional spacing:
+ * ```html
+ * <mosaik-spacer multiplier="2" thickness="vertical"></mosaik-spacer>
  * ```
  *
  * @public

package/Controls/Components/Primitives/Spacer/SpacerElement.js.map

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