@breadstone/mosaik-elements-foundation 0.0.32 → 0.0.34

package/Controls/Components/Primitives/Ribbon/Themes/RibbonElement.Retro.js

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

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

@@ -14,17 +14,17 @@ export function scrollElementCosmopolitanStyle() {
     return css `
 :host {
   --scroll-font-family: unset;
-  --scroll-font-size: unset;
-  --scroll-font-line-height: unset;
-  --scroll-font-weight: unset;
   --scroll-font-letter-spacing: unset;
+  --scroll-font-line-height: unset;
+  --scroll-font-size: unset;
   --scroll-font-text-decoration: unset;
   --scroll-font-text-transform: unset;
-  --scroll-padding-top: unset;
-  --scroll-padding-right: unset;
+  --scroll-font-weight: unset;
+  --scroll-gap: unset;
   --scroll-padding-bottom: unset;
   --scroll-padding-left: unset;
-  --scroll-gap: unset;
+  --scroll-padding-right: unset;
+  --scroll-padding-top: unset;
   --scroll-transition-duration: unset;
   --scroll-transition-mode: unset;
   --scroll-transition-property: unset;

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

@@ -14,17 +14,17 @@ export function scrollElementJoyStyle() {
     return css `
 :host {
   --scroll-font-family: unset;
-  --scroll-font-size: unset;
-  --scroll-font-line-height: unset;
-  --scroll-font-weight: unset;
   --scroll-font-letter-spacing: unset;
+  --scroll-font-line-height: unset;
+  --scroll-font-size: unset;
   --scroll-font-text-decoration: unset;
   --scroll-font-text-transform: unset;
-  --scroll-padding-top: unset;
-  --scroll-padding-right: unset;
+  --scroll-font-weight: unset;
+  --scroll-gap: unset;
   --scroll-padding-bottom: unset;
   --scroll-padding-left: unset;
-  --scroll-gap: unset;
+  --scroll-padding-right: unset;
+  --scroll-padding-top: unset;
   --scroll-transition-duration: unset;
   --scroll-transition-mode: unset;
   --scroll-transition-property: unset;

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

@@ -14,17 +14,17 @@ export function scrollElementRetroStyle() {
     return css `
 :host {
   --scroll-font-family: unset;
-  --scroll-font-size: unset;
-  --scroll-font-line-height: unset;
-  --scroll-font-weight: unset;
   --scroll-font-letter-spacing: unset;
+  --scroll-font-line-height: unset;
+  --scroll-font-size: unset;
   --scroll-font-text-decoration: unset;
   --scroll-font-text-transform: unset;
-  --scroll-padding-top: unset;
-  --scroll-padding-right: unset;
+  --scroll-font-weight: unset;
+  --scroll-gap: unset;
   --scroll-padding-bottom: unset;
   --scroll-padding-left: unset;
-  --scroll-gap: unset;
+  --scroll-padding-right: unset;
+  --scroll-padding-top: unset;
   --scroll-transition-duration: unset;
   --scroll-transition-mode: unset;
   --scroll-transition-property: unset;

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SpacerElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Spacer/SpacerElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAYnF"}
+{"version":3,"file":"SpacerElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Spacer/SpacerElementTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAYnF"}

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

@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 // #region Imports
 import { html } from '../../../../Dom/Html';
 import { Spacing } from '../../../Types/Spacing';

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

@@ -1 +1 @@
-{"version":3,"file":"SpacerElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Spacer/SpacerElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,OAAO,IAAI,CAAA;;;8BAGe,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;gCAClE,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;iCACvE,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;+BACzE,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;;;;KAIjG,CAAC;AACN,CAAC"}
+{"version":3,"file":"SpacerElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Spacer/SpacerElementTemplate.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAA0B,CAAI;IAC/D,OAAO,IAAI,CAAA;;;8BAGe,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;gCAClE,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;iCACvE,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;+BACzE,CAAC,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;;;;KAIjG,CAAC;AACN,CAAC"}

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

@@ -14,17 +14,17 @@ export function spacerElementCosmopolitanStyle() {
     return css `
 :host {
   --spacer-font-family: unset;
-  --spacer-font-size: unset;
-  --spacer-font-line-height: unset;
-  --spacer-font-weight: unset;
   --spacer-font-letter-spacing: unset;
+  --spacer-font-line-height: unset;
+  --spacer-font-size: unset;
   --spacer-font-text-decoration: unset;
   --spacer-font-text-transform: unset;
-  --spacer-padding-top: unset;
-  --spacer-padding-right: unset;
+  --spacer-font-weight: unset;
+  --spacer-gap: unset;
   --spacer-padding-bottom: unset;
   --spacer-padding-left: unset;
-  --spacer-gap: unset;
+  --spacer-padding-right: unset;
+  --spacer-padding-top: unset;
   --spacer-transition-duration: unset;
   --spacer-transition-mode: unset;
   --spacer-transition-property: unset;

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

@@ -14,17 +14,17 @@ export function spacerElementJoyStyle() {
     return css `
 :host {
   --spacer-font-family: unset;
-  --spacer-font-size: unset;
-  --spacer-font-line-height: unset;
-  --spacer-font-weight: unset;
   --spacer-font-letter-spacing: unset;
+  --spacer-font-line-height: unset;
+  --spacer-font-size: unset;
   --spacer-font-text-decoration: unset;
   --spacer-font-text-transform: unset;
-  --spacer-padding-top: unset;
-  --spacer-padding-right: unset;
+  --spacer-font-weight: unset;
+  --spacer-gap: unset;
   --spacer-padding-bottom: unset;
   --spacer-padding-left: unset;
-  --spacer-gap: unset;
+  --spacer-padding-right: unset;
+  --spacer-padding-top: unset;
   --spacer-transition-duration: unset;
   --spacer-transition-mode: unset;
   --spacer-transition-property: unset;

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

@@ -14,17 +14,17 @@ export function spacerElementRetroStyle() {
     return css `
 :host {
   --spacer-font-family: unset;
-  --spacer-font-size: unset;
-  --spacer-font-line-height: unset;
-  --spacer-font-weight: unset;
   --spacer-font-letter-spacing: unset;
+  --spacer-font-line-height: unset;
+  --spacer-font-size: unset;
   --spacer-font-text-decoration: unset;
   --spacer-font-text-transform: unset;
-  --spacer-padding-top: unset;
-  --spacer-padding-right: unset;
+  --spacer-font-weight: unset;
+  --spacer-gap: unset;
   --spacer-padding-bottom: unset;
   --spacer-padding-left: unset;
-  --spacer-gap: unset;
+  --spacer-padding-right: unset;
+  --spacer-padding-top: unset;
   --spacer-transition-duration: unset;
   --spacer-transition-mode: unset;
   --spacer-transition-property: unset;

package/Controls/Components/Primitives/Sticky/StickyController.d.ts

@@ -0,0 +1,60 @@
+import { ControllerBase, type ControllerHost } from '../../../Controllers/Abstracts/ControllerBase';
+import type { CssLength } from '@breadstone/mosaik-themes';
+/**
+ * Controller options.
+ *
+ * @public
+ */
+export interface IStickyControllerOptions {
+    top?: CssLength;
+    left?: CssLength;
+}
+/**
+ * A controller that enables sticky positioning via flexible strategies.
+ *
+ * @public
+ */
+export declare class StickyController extends ControllerBase {
+    private _strategy?;
+    private readonly _options;
+    /**
+     * Constructs a new instance of the `StickyController` class.
+     *
+     * @param host - The controller host element.
+     * @param options - Optional configuration for the sticky controller.
+     *
+     * @public
+     */
+    constructor(host: ControllerHost, options?: IStickyControllerOptions);
+    /**
+     * Gets or sets the `top` property.
+     *
+     * @public
+     * @writeonly
+     */
+    set top(value: CssLength);
+    /**
+     * Gets or sets the `left` property.
+     *
+     * @public
+     * @writeonly
+     */
+    set left(value: CssLength);
+    /**
+     * @public
+     */
+    hostConnected(): void;
+    /**
+     * @public
+     */
+    hostDisconnected(): void;
+    /**
+     * @private
+     */
+    private applyCssVariables;
+    /**
+     * @private
+     */
+    private hasScrollableParent;
+}
+//# sourceMappingURL=StickyController.d.ts.map

package/Controls/Components/Primitives/Sticky/StickyController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyController.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Sticky/StickyController.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACpG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI3D;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACrC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;GAIG;AACH,qBAAa,gBAAiB,SAAQ,cAAc;IAIhD,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAMpD;;;;;;;OAOG;gBACgB,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,wBAAwB;IAa3E;;;;;OAKG;IACH,IAAW,GAAG,CAAC,KAAK,EAAE,SAAS,EAK9B;IAED;;;;;OAKG;IACH,IAAW,IAAI,CAAC,KAAK,EAAE,SAAS,EAK/B;IAMD;;OAEG;IACa,aAAa,IAAI,IAAI;IAWrC;;OAEG;IACa,gBAAgB,IAAI,IAAI;IAKxC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAKzB;;OAEG;IACH,OAAO,CAAC,mBAAmB;CAY9B"}

package/Controls/Components/Primitives/Sticky/StickyController.js

@@ -0,0 +1,191 @@
+/* eslint-disable no-restricted-syntax */
+// #region Imports
+import { on } from '@breadstone/mosaik-elements';
+import { RendererServiceLocator } from '../../../../Dom/Renderer';
+import { ScrollerServiceLocator } from '../../../../Dom/Scroller';
+import { ControllerBase } from '../../../Controllers/Abstracts/ControllerBase';
+/**
+ * A controller that enables sticky positioning via flexible strategies.
+ *
+ * @public
+ */
+export class StickyController extends ControllerBase {
+    // #region Fields
+    _strategy;
+    _options;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `StickyController` class.
+     *
+     * @param host - The controller host element.
+     * @param options - Optional configuration for the sticky controller.
+     *
+     * @public
+     */
+    constructor(host, options) {
+        super(host);
+        this._options = options ?? {
+            top: '0px',
+            left: '0px'
+        };
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Gets or sets the `top` property.
+     *
+     * @public
+     * @writeonly
+     */
+    set top(value) {
+        if (this._options.top !== value) {
+            this._options.top = value;
+            this.applyCssVariables();
+        }
+    }
+    /**
+     * Gets or sets the `left` property.
+     *
+     * @public
+     * @writeonly
+     */
+    set left(value) {
+        if (this._options.left !== value) {
+            this._options.left = value;
+            this.applyCssVariables();
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     */
+    hostConnected() {
+        super.hostConnected();
+        this.applyCssVariables();
+        this._strategy = this.hasScrollableParent(this.host)
+            ? new ParentBoundStickyStrategy(this.host)
+            : new ScrollPositionStickyStrategy(this.host);
+        this._strategy.attach();
+    }
+    /**
+     * @public
+     */
+    hostDisconnected() {
+        this._strategy?.detach();
+        super.hostDisconnected();
+    }
+    /**
+     * @private
+     */
+    applyCssVariables() {
+        RendererServiceLocator.current.setStyle(this.host, '--sticky-top', this._options.top ?? '0px');
+        RendererServiceLocator.current.setStyle(this.host, '--sticky-left', this._options.left ?? '0px');
+    }
+    /**
+     * @private
+     */
+    hasScrollableParent(el) {
+        while (el && el !== document.body) {
+            const style = window.getComputedStyle(el);
+            const overflowY = style.overflowY;
+            if ((/(auto|scroll|overlay)/).test(overflowY))
+                return true;
+            el = el.parentElement;
+        }
+        return false;
+    }
+}
+/**
+ * Uses native `position: sticky` CSS logic.
+ * Works only if the host has a scrollable ancestor.
+ *
+ * @private
+ */
+class ParentBoundStickyStrategy {
+    // #region Fields
+    _element;
+    // #endregion
+    // #region Ctor
+    constructor(element) {
+        this._element = element;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     */
+    attach() {
+        RendererServiceLocator.current.setStyle(this._element, 'position', 'sticky');
+        RendererServiceLocator.current.setStyle(this._element, '--sticky-top', this._element.style.getPropertyValue('--sticky-top') || '0px');
+        RendererServiceLocator.current.setStyle(this._element, '--sticky-left', this._element.style.getPropertyValue('--sticky-left') || '0px');
+    }
+    /**
+     * @public
+     */
+    detach() {
+        RendererServiceLocator.current.setStyle(this._element, 'position', '');
+        RendererServiceLocator.current.setStyle(this._element, '--sticky-top', '');
+        RendererServiceLocator.current.setStyle(this._element, '--sticky-left', '');
+    }
+}
+class ScrollPositionStickyStrategy {
+    // #region Fields
+    _element;
+    _scrollContainer;
+    _scrollSubscription;
+    // #endregion
+    // #region Ctor
+    constructor(element) {
+        this._element = element;
+        this._scrollSubscription = undefined;
+    }
+    // #endregion
+    // #region Methods
+    attach() {
+        this._scrollContainer = ScrollerServiceLocator.current.tryFindScrollParent(this._element) ?? undefined;
+        if (this._scrollContainer) {
+            this._scrollSubscription = on(this._scrollContainer, 'scroll', () => this.handleScroll(), { passive: true });
+        }
+        this.handleScroll();
+    }
+    detach() {
+        this._scrollSubscription?.dispose();
+        this._scrollContainer = undefined;
+    }
+    handleScroll() {
+        if (!this._scrollContainer) {
+            return;
+        }
+        // const containerRect = this._scrollContainer.getBoundingClientRect();
+        // const elementRect = this._element.getBoundingClientRect();
+        const stickyOffset = parseInt(this._element.style.getPropertyValue('--sticky-top') || '0', 10);
+        // const shouldStick = elementRect.top <= containerRect.top + stickyOffset;
+        const scrollY = this._scrollContainer.scrollTop;
+        const shouldStick = scrollY >= stickyOffset;
+        // if (shouldStick !== this._lastStuck) {
+        //     this._lastStuck = shouldStick;
+        //     this._onStickyChange?.(shouldStick);
+        if (shouldStick) {
+            Object.assign(this._element.style, {
+                position: 'fixed',
+                top: scrollY + 'px',
+                left: this._element.style.getPropertyValue('--sticky-left') || '0px',
+                right: '0px',
+                width: `${this._element.offsetWidth}px`
+            });
+        }
+        else {
+            Object.assign(this._element.style, {
+                position: 'relative',
+                top: '',
+                left: '',
+                right: '',
+                width: ''
+            });
+        }
+        // }
+    }
+}
+//# sourceMappingURL=StickyController.js.map

package/Controls/Components/Primitives/Sticky/StickyController.js.map

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

package/Controls/Components/Primitives/Sticky/StickyDirective.d.ts

@@ -0,0 +1,36 @@
+import { type ChildPart } from 'lit/directive.js';
+import { type DirectiveArgs, DirectiveBase } from '../../../Directives/Abstracts/DirectiveBase';
+import type { CssLength } from '@breadstone/mosaik-themes';
+/**
+ * @private
+ */
+declare class StickyDirective extends DirectiveBase {
+    private readonly _controller;
+    private _lastTop?;
+    private _lastLeft?;
+    /**
+     * Constructs a new instance of the `StickyDirective` class.
+     *
+     * @public
+     */
+    constructor(args: DirectiveArgs);
+    /**
+     * @public
+     */
+    render(top?: CssLength, left?: CssLength): unknown;
+    /**
+     * @public
+     * @override
+     */
+    update(_part: ChildPart, [top, left]: Parameters<this['render']>): unknown;
+}
+/**
+ * The `sticky` directive enables sticky positioning for any element using `StickyController`.
+ *
+ * @public
+ * @param top - CSS top offset (e.g. `'0px'`).
+ * @param left - CSS left offset (e.g. `'0px'`).
+ */
+export declare const sticky: (...values: Parameters<StickyDirective["render"]>) => any;
+export {};
+//# sourceMappingURL=StickyDirective.d.ts.map

package/Controls/Components/Primitives/Sticky/StickyDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyDirective.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Sticky/StickyDirective.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,KAAK,aAAa,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAEhG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAM3D;;GAEG;AACH,cAAM,eAAgB,SAAQ,aAAa;IAIvC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAmB;IAC/C,OAAO,CAAC,QAAQ,CAAC,CAAY;IAC7B,OAAO,CAAC,SAAS,CAAC,CAAY;IAM9B;;;;OAIG;gBACgB,IAAI,EAAE,aAAa;IAkBtC;;OAEG;IACI,MAAM,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO;IAWzD;;;OAGG;IACa,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO;CAM7F;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAwC,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}