@breadstone/mosaik-elements-foundation 0.0.226 → 0.0.227

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

@@ -3,7 +3,84 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import type { IStickyElementProps } from './IStickyElementProps';
 declare const StickyElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * The `{@link StickyElement}` element.
+ * Sticky - A container that maintains fixed positioning within the viewport during scrolling.
+ *
+ * @description
+ * The Sticky element provides CSS sticky positioning behavior with configurable top and left offsets.
+ * Content inside this element will "stick" to its specified position when the user scrolls past it,
+ * remaining fixed within its containing block until the container's edge is reached. Commonly used
+ * for sticky headers, navigation bars, floating action buttons, and persistent UI elements that
+ * should remain accessible during page scrolling.
+ *
+ * @name Sticky
+ * @element mosaik-sticky
+ * @category Primitives
+ *
+ * @slot - Default slot for content that should exhibit sticky positioning
+ *
+ * @cssprop {String} --sticky-left - Left offset when sticky positioning is applied
+ * @cssprop {String} --sticky-top - Top offset when sticky positioning is applied
+ *
+ * @example
+ * Basic sticky header:
+ * ```html
+ * <div class="page-content">
+ *   <mosaik-sticky top="0px">
+ *     <header class="site-header">
+ *       <h1>My Site</h1>
+ *       <nav>...</nav>
+ *     </header>
+ *   </mosaik-sticky>
+ *   <main>
+ *     <!-- Long scrollable content -->
+ *   </main>
+ * </div>
+ * ```
+ *
+ * @example
+ * Sticky sidebar navigation:
+ * ```html
+ * <div class="layout">
+ *   <aside class="sidebar">
+ *     <mosaik-sticky top="80px">
+ *       <nav class="side-nav">
+ *         <a href="#section1">Section 1</a>
+ *         <a href="#section2">Section 2</a>
+ *         <a href="#section3">Section 3</a>
+ *       </nav>
+ *     </mosaik-sticky>
+ *   </aside>
+ *   <main>...</main>
+ * </div>
+ * ```
+ *
+ * @example
+ * Floating action button with custom offset:
+ * ```html
+ * <mosaik-sticky top="auto" left="calc(100% - 80px)">
+ *   <button class="fab">
+ *     <mosaik-icon data="add-icon"></mosaik-icon>
+ *   </button>
+ * </mosaik-sticky>
+ * ```
+ *
+ * @example
+ * Programmatic offset adjustment:
+ * ```html
+ * <mosaik-sticky id="stickyNav" top="0px">
+ *   <nav>Navigation</nav>
+ * </mosaik-sticky>
+ *
+ * <script>
+ *   const stickyNav = document.getElementById('stickyNav');
+ *
+ *   // Adjust offset when another sticky element appears
+ *   window.addEventListener('resize', () => {
+ *     const headerHeight = document.querySelector('.top-banner')?.offsetHeight || 0;
+ *     stickyNav.top = `${headerHeight}px`;
+ *   });
+ * </script>
+ * ```
  *
  * @public
  */

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

@@ -1 +1 @@
-{"version":3,"file":"StickyElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Sticky/StickyElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AASjE;;;;GAIG;AACH,qBAUa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAK9B,OAAO,CAAC,IAAI,CAAY;IACxB,OAAO,CAAC,KAAK,CAAY;IAMzB;;OAEG;;IAiBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,SAAS,CAE1B;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,SAAS,EAK9B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,SAAS,CAE3B;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,SAAS,EAK/B;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAKzC;;;OAGG;IACa,oBAAoB,IAAI,IAAI;IAK5C;;OAEG;IAEH,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;IAMxE;;OAEG;IAEH,SAAS,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;CAQ5E;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"StickyElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Sticky/StickyElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AASjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,qBAUa,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAK9B,OAAO,CAAC,IAAI,CAAY;IACxB,OAAO,CAAC,KAAK,CAAY;IAMzB;;OAEG;;IAiBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,SAAS,CAE1B;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,SAAS,EAK9B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,SAAS,CAE3B;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,SAAS,EAK/B;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAKzC;;;OAGG;IACa,oBAAoB,IAAI,IAAI;IAK5C;;OAEG;IAEH,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;IAMxE;;OAEG;IAEH,SAAS,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI;CAQ5E;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

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

@@ -21,7 +21,84 @@ import { stickyElementCosmopolitanStyle } from './Themes/StickyElement.Cosmopoli
 import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
- * The `{@link StickyElement}` element.
+ * Sticky - A container that maintains fixed positioning within the viewport during scrolling.
+ *
+ * @description
+ * The Sticky element provides CSS sticky positioning behavior with configurable top and left offsets.
+ * Content inside this element will "stick" to its specified position when the user scrolls past it,
+ * remaining fixed within its containing block until the container's edge is reached. Commonly used
+ * for sticky headers, navigation bars, floating action buttons, and persistent UI elements that
+ * should remain accessible during page scrolling.
+ *
+ * @name Sticky
+ * @element mosaik-sticky
+ * @category Primitives
+ *
+ * @slot - Default slot for content that should exhibit sticky positioning
+ *
+ * @cssprop {String} --sticky-left - Left offset when sticky positioning is applied
+ * @cssprop {String} --sticky-top - Top offset when sticky positioning is applied
+ *
+ * @example
+ * Basic sticky header:
+ * ```html
+ * <div class="page-content">
+ *   <mosaik-sticky top="0px">
+ *     <header class="site-header">
+ *       <h1>My Site</h1>
+ *       <nav>...</nav>
+ *     </header>
+ *   </mosaik-sticky>
+ *   <main>
+ *     <!-- Long scrollable content -->
+ *   </main>
+ * </div>
+ * ```
+ *
+ * @example
+ * Sticky sidebar navigation:
+ * ```html
+ * <div class="layout">
+ *   <aside class="sidebar">
+ *     <mosaik-sticky top="80px">
+ *       <nav class="side-nav">
+ *         <a href="#section1">Section 1</a>
+ *         <a href="#section2">Section 2</a>
+ *         <a href="#section3">Section 3</a>
+ *       </nav>
+ *     </mosaik-sticky>
+ *   </aside>
+ *   <main>...</main>
+ * </div>
+ * ```
+ *
+ * @example
+ * Floating action button with custom offset:
+ * ```html
+ * <mosaik-sticky top="auto" left="calc(100% - 80px)">
+ *   <button class="fab">
+ *     <mosaik-icon data="add-icon"></mosaik-icon>
+ *   </button>
+ * </mosaik-sticky>
+ * ```
+ *
+ * @example
+ * Programmatic offset adjustment:
+ * ```html
+ * <mosaik-sticky id="stickyNav" top="0px">
+ *   <nav>Navigation</nav>
+ * </mosaik-sticky>
+ *
+ * <script>
+ *   const stickyNav = document.getElementById('stickyNav');
+ *
+ *   // Adjust offset when another sticky element appears
+ *   window.addEventListener('resize', () => {
+ *     const headerHeight = document.querySelector('.top-banner')?.offsetHeight || 0;
+ *     stickyNav.top = `${headerHeight}px`;
+ *   });
+ * </script>
+ * ```
  *
  * @public
  */

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

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

package/Controls/Components/Primitives/Summary/SummaryElement.d.ts

@@ -2,13 +2,76 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import { ISummaryElementProps } from './ISummaryElementProps';
 declare const SummaryElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * The `{@link SummaryElement}` element.
+ * Summary - A semantic container for grouping related information with a header and content.
  *
- * @slot - The default slot.
- * @slot prefix - The prefix slot.
- * @slot suffix - The suffix slot.
- * @slot header - The header slot.
- * @slot content - The content slot.
+ * @description
+ * The Summary element provides a structured container using HTML fieldset/legend semantics for
+ * grouping related form controls or information blocks. Features a prominent header (legend) and
+ * flexible content slots for prefix/suffix elements. Ideal for creating labeled sections within
+ * forms, settings panels, or information cards. The fieldset structure provides built-in accessibility
+ * benefits for screen readers and assistive technologies.
+ *
+ * @name Summary
+ * @element mosaik-summary
+ * @category Primitives
+ *
+ * @slot - Default slot for additional content below the main container
+ * @slot prefix - Content positioned before the main content
+ * @slot suffix - Content positioned after the main content
+ * @slot header - Custom header content (overrides header attribute, rendered as legend)
+ * @slot content - Main content area (overrides content attribute)
+ *
+ * @csspart root - The fieldset root element
+ * @csspart header - The legend header element
+ * @csspart container - Container for prefix, content, and suffix
+ * @csspart content - The main content text element
+ *
+ * @cssprop {String} --summary-gap - Spacing between elements (from gap mixin)
+ *
+ * @dependency {TextElement} - Text rendering component for content
+ *
+ * @example
+ * Basic summary with text attributes:
+ * ```html
+ * <mosaik-summary
+ *   header="Personal Information"
+ *   content="Please provide your contact details">
+ *   <input type="text" placeholder="Name">
+ *   <input type="email" placeholder="Email">
+ * </mosaik-summary>
+ * ```
+ *
+ * @example
+ * Summary with slotted content and prefix/suffix:
+ * ```html
+ * <mosaik-summary>
+ *   <span slot="header">Account Settings</span>
+ *   <mosaik-icon slot="prefix" data="settings-icon"></mosaik-icon>
+ *   <div slot="content">
+ *     <p>Configure your account preferences</p>
+ *   </div>
+ *   <mosaik-badge slot="suffix" label="3"></mosaik-badge>
+ * </mosaik-summary>
+ * ```
+ *
+ * @example
+ * Form section grouping:
+ * ```html
+ * <form>
+ *   <mosaik-summary header="Billing Address">
+ *     <input type="text" name="street" placeholder="Street">
+ *     <input type="text" name="city" placeholder="City">
+ *     <input type="text" name="zip" placeholder="ZIP Code">
+ *   </mosaik-summary>
+ *
+ *   <mosaik-summary header="Payment Method">
+ *     <select name="payment">
+ *       <option>Credit Card</option>
+ *       <option>PayPal</option>
+ *     </select>
+ *   </mosaik-summary>
+ * </form>
+ * ```
  *
  * @public
  */

package/Controls/Components/Primitives/Summary/SummaryElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Summary/SummaryElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAS9D;;;;;;;;;;GAUG;AACH,qBAYa,cACT,SAAQ,mBACR,YAAW,oBAAoB;IAI/B,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAA4B;IAM5C;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS,CAE7C;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAKjD;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS,CAE9C;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAKlD;CAIJ;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}
+{"version":3,"file":"SummaryElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Summary/SummaryElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,qBAYa,cACT,SAAQ,mBACR,YAAW,oBAAoB;IAI/B,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAA4B;IAM5C;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS,CAE7C;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAKjD;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS,CAE9C;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAKlD;CAIJ;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}

package/Controls/Components/Primitives/Summary/SummaryElement.js

@@ -8,24 +8,87 @@ 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 { Component } from '../../../Decorators/ComponentDecorator';
 import { Property } from '../../../Decorators/PropertyDecorator';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { TextElement } from '../Text/TextElement';
 import { summaryElementTemplate } from './SummaryElementTemplate';
+import { summaryElementCosmopolitanStyle } from './Themes/SummaryElement.Cosmopolitan';
 import { summaryElementJoyStyle } from './Themes/SummaryElement.Joy';
 import { summaryElementMemphisStyle } from './Themes/SummaryElement.Memphis';
-import { summaryElementCosmopolitanStyle } from './Themes/SummaryElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
- * The `{@link SummaryElement}` element.
+ * Summary - A semantic container for grouping related information with a header and content.
+ *
+ * @description
+ * The Summary element provides a structured container using HTML fieldset/legend semantics for
+ * grouping related form controls or information blocks. Features a prominent header (legend) and
+ * flexible content slots for prefix/suffix elements. Ideal for creating labeled sections within
+ * forms, settings panels, or information cards. The fieldset structure provides built-in accessibility
+ * benefits for screen readers and assistive technologies.
+ *
+ * @name Summary
+ * @element mosaik-summary
+ * @category Primitives
+ *
+ * @slot - Default slot for additional content below the main container
+ * @slot prefix - Content positioned before the main content
+ * @slot suffix - Content positioned after the main content
+ * @slot header - Custom header content (overrides header attribute, rendered as legend)
+ * @slot content - Main content area (overrides content attribute)
+ *
+ * @csspart root - The fieldset root element
+ * @csspart header - The legend header element
+ * @csspart container - Container for prefix, content, and suffix
+ * @csspart content - The main content text element
+ *
+ * @cssprop {String} --summary-gap - Spacing between elements (from gap mixin)
+ *
+ * @dependency {TextElement} - Text rendering component for content
+ *
+ * @example
+ * Basic summary with text attributes:
+ * ```html
+ * <mosaik-summary
+ *   header="Personal Information"
+ *   content="Please provide your contact details">
+ *   <input type="text" placeholder="Name">
+ *   <input type="email" placeholder="Email">
+ * </mosaik-summary>
+ * ```
+ *
+ * @example
+ * Summary with slotted content and prefix/suffix:
+ * ```html
+ * <mosaik-summary>
+ *   <span slot="header">Account Settings</span>
+ *   <mosaik-icon slot="prefix" data="settings-icon"></mosaik-icon>
+ *   <div slot="content">
+ *     <p>Configure your account preferences</p>
+ *   </div>
+ *   <mosaik-badge slot="suffix" label="3"></mosaik-badge>
+ * </mosaik-summary>
+ * ```
+ *
+ * @example
+ * Form section grouping:
+ * ```html
+ * <form>
+ *   <mosaik-summary header="Billing Address">
+ *     <input type="text" name="street" placeholder="Street">
+ *     <input type="text" name="city" placeholder="City">
+ *     <input type="text" name="zip" placeholder="ZIP Code">
+ *   </mosaik-summary>
  *
- * @slot - The default slot.
- * @slot prefix - The prefix slot.
- * @slot suffix - The suffix slot.
- * @slot header - The header slot.
- * @slot content - The content slot.
+ *   <mosaik-summary header="Payment Method">
+ *     <select name="payment">
+ *       <option>Credit Card</option>
+ *       <option>PayPal</option>
+ *     </select>
+ *   </mosaik-summary>
+ * </form>
+ * ```
  *
  * @public
  */

package/Controls/Components/Primitives/Summary/SummaryElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Summary/SummaryElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,aAAa;AAEb;;;;;;;;;;GAUG;AAaI,IAAM,cAAc,GAApB,MAAM,cACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAET,OAAO,CAA4B;IACnC,QAAQ,CAA4B;IAE5C,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,gBAAgB,CAAC;IAC5B,CAAC;IAED;;;;OAIG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAgC;QAC9C,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAW,OAAO,CAAC,KAAgC;QAC/C,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;CAIJ,CAAA;AA/BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG1B;AAcD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG1B;AAhEQ,cAAc;IAZ1B,SAAS,CAAC;QACP,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE;YACJ,GAAG,EAAE,sBAAsB;YAC3B,OAAO,EAAE,0BAA0B;YACnC,YAAY,EAAE,+BAA+B;SAChD;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,cAAc,CA2E1B"}
+{"version":3,"file":"SummaryElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Summary/SummaryElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE7E,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAaI,IAAM,cAAc,GAApB,MAAM,cACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAET,OAAO,CAA4B;IACnC,QAAQ,CAA4B;IAE5C,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,gBAAgB,CAAC;IAC5B,CAAC;IAED;;;;OAIG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAgC;QAC9C,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IACD,IAAW,OAAO,CAAC,KAAgC;QAC/C,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;CAIJ,CAAA;AA9BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG1B;AAcD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG1B;AAhEQ,cAAc;IAZ1B,SAAS,CAAC;QACP,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE;YACJ,GAAG,EAAE,sBAAsB;YAC3B,OAAO,EAAE,0BAA0B;YACnC,YAAY,EAAE,+BAA+B;SAChD;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,cAAc,CA0E1B"}

package/Controls/Components/Primitives/Swipe/SwipeElement.d.ts

@@ -1,7 +1,6 @@
 import { IEventEmitter } from '@breadstone/mosaik-elements';
+import { ISwipeLeftEventDetail, ISwipeRightEventDetail } from '../../../events';
 import { CustomElement } from '../../Abstracts/CustomElement';
-import { ISwipeLeftPannedEvent, ISwipeLeftPannedEventDetail } from './Events/ISwipeLeftPannedEventDetail';
-import { ISwipeRightPannedEvent, ISwipeRightPannedEventDetail } from './Events/ISwipeRightPannedEventDetail';
 import { ISwipeElementProps } from './ISwipeElementProps';
 declare const SwipeElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
@@ -18,6 +17,9 @@ declare const SwipeElement_base: (abstract new (...args: Array<any>) => import("
  * @slot after - The after swipe slot.
  * @slot - The default content slot.
  *
+ * @fires swipeLeft {SwipeLeftEvent} - Called when the left swipe gesture is detected.
+ * @fires swipeRight {SwipeRightEvent} - Called when the right swipe gesture is detected.
+ *
  * @example
  * ```html
  * <mosaik-swipe>
@@ -28,17 +30,17 @@ declare const SwipeElement_base: (abstract new (...args: Array<any>) => import("
  * @public
  */
 export declare class SwipeElement extends SwipeElement_base implements ISwipeElementProps {
+    private readonly _swipeLeft;
+    private readonly _swipeRight;
+    private _panOffset;
+    private _panState;
+    private readonly _panController;
     private _beforePanningContainerElement;
     private _afterPanningContainerElement;
     private _contentContainerElement;
-    private readonly _panController;
     private _panEndTriggeringThreshold;
     private _panLeftDisabled;
     private _panRightDisabled;
-    private readonly _leftPanned;
-    private readonly _rightPanned;
-    private _panOffset;
-    private _panState;
     /**
      * @public
      */
@@ -78,22 +80,22 @@ export declare class SwipeElement extends SwipeElement_base implements ISwipeEle
     set panRightDisabled(value: boolean);
     /**
      * Called when the left swipe gesture is detected.
-     * Provides reference to `{@link ISwipeLeftPannedEventDetail}` as event detail.
+     * Provides reference to `{@link ISwipeLeftEventDetail}` as event detail.
      *
      * @public
      * @readonly
      * @eventProperty
      */
-    get leftPanned(): IEventEmitter<ISwipeLeftPannedEventDetail>;
+    get swipeLeft(): IEventEmitter<ISwipeLeftEventDetail>;
     /**
      * Called when the right swipe gesture is detected.
-     * Provides reference to `{@link ISwipeRightPannedEventDetail}` as event detail.
+     * Provides reference to `{@link ISwipeRightEventDetail}` as event detail.
      *
      * @public
      * @readonly
      * @eventProperty
      */
-    get rightPanned(): IEventEmitter<ISwipeRightPannedEventDetail>;
+    get swipeRight(): IEventEmitter<ISwipeRightEventDetail>;
     /**
      * @public
      */
@@ -133,10 +135,6 @@ declare global {
     interface HTMLElementTagNameMap {
         'mosaik-swipe': SwipeElement;
     }
-    interface HTMLElementEventMap {
-        leftPanned: ISwipeLeftPannedEvent;
-        rightPanned: ISwipeRightPannedEvent;
-    }
 }
 export {};
 //# sourceMappingURL=SwipeElement.d.ts.map

package/Controls/Components/Primitives/Swipe/SwipeElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Swipe/SwipeElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAM5D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAC1G,OAAO,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AAC7G,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAS1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAUa,YACT,SAAQ,iBACR,YAAW,kBAAkB;IAI7B,OAAO,CAAC,8BAA8B,CAAe;IACrD,OAAO,CAAC,6BAA6B,CAAe;IACpD,OAAO,CAAC,wBAAwB,CAAe;IAC/C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAgB;IAC/C,OAAO,CAAC,0BAA0B,CAAS;IAC3C,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,iBAAiB,CAAU;IAEnC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA8C;IAE1E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA+C;IAE5E,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,SAAS,CAAW;IAM5B;;OAEG;;IAgBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,yBAAyB,IAAI,MAAM,CAE7C;IACD,IAAW,yBAAyB,CAAC,KAAK,EAAE,MAAM,EAKjD;IAED;;;;;OAKG;IACH,IAIW,eAAe,IAAI,OAAO,CAEpC;IACD,IAAW,eAAe,CAAC,KAAK,EAAE,OAAO,EAKxC;IAED;;;;;OAKG;IACH,IAIW,gBAAgB,IAAI,OAAO,CAErC;IACD,IAAW,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAKzC;IAED;;;;;;;OAOG;IACH,IAAW,UAAU,IAAI,aAAa,CAAC,2BAA2B,CAAC,CAElE;IAED;;;;;;;OAOG;IACH,IAAW,WAAW,IAAI,aAAa,CAAC,4BAA4B,CAAC,CAEpE;IAMD;;OAEG;IACI,OAAO,IAAI,IAAI;IAQtB;;OAEG;IACI,QAAQ,IAAI,IAAI;cAQJ,eAAe,IAAI,IAAI;IAQ1C;;OAEG;IAEH,SAAS,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAMzC;;OAEG;IAEH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAoB7C;;OAEG;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAuDvC;;OAEG;IACH,OAAO,CAAC,0BAA0B;CAMrC;AAED;;GAEG;AACH,yBAAiB,YAAY,CAAC;IAC1B,KAAY,KAAK,GAAG,kBAAkB,CAAC;CAC1C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,YAAY,CAAC;KAChC;IAED,UAAU,mBAAmB;QACzB,UAAU,EAAE,qBAAqB,CAAC;QAClC,WAAW,EAAE,sBAAsB,CAAC;KACvC;CACJ"}
+{"version":3,"file":"SwipeElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Swipe/SwipeElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAQrF,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAEhF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAQ1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAUa,YACT,SAAQ,iBACR,YAAW,kBAAkB;IAK7B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwC;IAEnE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAyC;IAErE,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAgB;IAC/C,OAAO,CAAC,8BAA8B,CAAe;IACrD,OAAO,CAAC,6BAA6B,CAAe;IACpD,OAAO,CAAC,wBAAwB,CAAe;IAC/C,OAAO,CAAC,0BAA0B,CAAS;IAC3C,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,iBAAiB,CAAU;IAMnC;;OAEG;;IAkBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,yBAAyB,IAAI,MAAM,CAE7C;IACD,IAAW,yBAAyB,CAAC,KAAK,EAAE,MAAM,EAKjD;IAED;;;;;OAKG;IACH,IAIW,eAAe,IAAI,OAAO,CAEpC;IACD,IAAW,eAAe,CAAC,KAAK,EAAE,OAAO,EAKxC;IAED;;;;;OAKG;IACH,IAIW,gBAAgB,IAAI,OAAO,CAErC;IACD,IAAW,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAKzC;IAED;;;;;;;OAOG;IACH,IAAW,SAAS,IAAI,aAAa,CAAC,qBAAqB,CAAC,CAE3D;IAED;;;;;;;OAOG;IACH,IAAW,UAAU,IAAI,aAAa,CAAC,sBAAsB,CAAC,CAE7D;IAMD;;OAEG;IACI,OAAO,IAAI,IAAI;IAQtB;;OAEG;IACI,QAAQ,IAAI,IAAI;cAQJ,eAAe,IAAI,IAAI;IAQ1C;;OAEG;IAEH,SAAS,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAMzC;;OAEG;IAEH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAoB7C;;OAEG;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAuDvC;;OAEG;IACH,OAAO,CAAC,0BAA0B;CAMrC;AAED;;GAEG;AACH,yBAAiB,YAAY,CAAC;IAC1B,KAAY,KAAK,GAAG,kBAAkB,CAAC;CAC1C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,YAAY,CAAC;KAChC;CACJ"}

package/Controls/Components/Primitives/Swipe/SwipeElement.js

@@ -8,8 +8,10 @@ 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 { Emit } from '../../../../Events/Decorators/EmitDecorator';
-import { Listen } from '../../../../Events/Decorators/ListenDecorator';
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
+import { Emit } from '../../../../events/Decorators/EmitDecorator';
+import { Listen } from '../../../../events/Decorators/ListenDecorator';
+import { Themeable } from '../../../Behaviors/Themeable';
 import { PanController } from '../../../Controllers/PanController';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
@@ -17,10 +19,9 @@ import { State } from '../../../Decorators/StateDecorator';
 import { PanState } from '../../../Types/PanState';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { swipeElementTemplate } from './SwipeElementTemplate';
+import { swipeElementCosmopolitanStyle } from './Themes/SwipeElement.Cosmopolitan';
 import { swipeElementJoyStyle } from './Themes/SwipeElement.Joy';
 import { swipeElementMemphisStyle } from './Themes/SwipeElement.Memphis';
-import { swipeElementCosmopolitanStyle } from './Themes/SwipeElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
  * Swipe - A gesture-based interaction for move content by swiping.
@@ -36,6 +37,9 @@ import { Themeable } from '../../../Behaviors/Themeable';
  * @slot after - The after swipe slot.
  * @slot - The default content slot.
  *
+ * @fires swipeLeft {SwipeLeftEvent} - Called when the left swipe gesture is detected.
+ * @fires swipeRight {SwipeRightEvent} - Called when the right swipe gesture is detected.
+ *
  * @example
  * ```html
  * <mosaik-swipe>
@@ -47,17 +51,17 @@ import { Themeable } from '../../../Behaviors/Themeable';
  */
 let SwipeElement = class SwipeElement extends Themeable(CustomElement) {
     // #region Fields
+    _swipeLeft;
+    _swipeRight;
+    _panOffset;
+    _panState;
+    _panController;
     _beforePanningContainerElement;
     _afterPanningContainerElement;
     _contentContainerElement;
-    _panController;
     _panEndTriggeringThreshold;
     _panLeftDisabled;
     _panRightDisabled;
-    _leftPanned;
-    _rightPanned;
-    _panOffset;
-    _panState;
     // #endregion
     // #region Ctor
     /**
@@ -71,6 +75,8 @@ let SwipeElement = class SwipeElement extends Themeable(CustomElement) {
         this._panOffset = 0;
         this._panState = PanState.None;
         this._panController = new PanController(this);
+        this._swipeLeft = new HTMLElementEventEmitter(this, 'swipeLeft');
+        this._swipeRight = new HTMLElementEventEmitter(this, 'swipeRight');
     }
     // #endregion
     // #region Properties
@@ -132,25 +138,25 @@ let SwipeElement = class SwipeElement extends Themeable(CustomElement) {
     }
     /**
      * Called when the left swipe gesture is detected.
-     * Provides reference to `{@link ISwipeLeftPannedEventDetail}` as event detail.
+     * Provides reference to `{@link ISwipeLeftEventDetail}` as event detail.
      *
      * @public
      * @readonly
      * @eventProperty
      */
-    get leftPanned() {
-        return this._leftPanned;
+    get swipeLeft() {
+        return this._swipeLeft;
     }
     /**
      * Called when the right swipe gesture is detected.
-     * Provides reference to `{@link ISwipeRightPannedEventDetail}` as event detail.
+     * Provides reference to `{@link ISwipeRightEventDetail}` as event detail.
      *
      * @public
      * @readonly
      * @eventProperty
      */
-    get rightPanned() {
-        return this._rightPanned;
+    get swipeRight() {
+        return this._swipeRight;
     }
     // #endregion
     // #region Methods
@@ -183,6 +189,7 @@ let SwipeElement = class SwipeElement extends Themeable(CustomElement) {
      */
     onPanStart(_event) {
         if (!this._panLeftDisabled && !this._panRightDisabled) {
+            return;
         }
     }
     /**
@@ -235,10 +242,10 @@ let SwipeElement = class SwipeElement extends Themeable(CustomElement) {
             cancel: false
         };
         if (state === PanState.Left) {
-            this._leftPanned.emit(args);
+            this._swipeLeft.emit(args);
         }
         else {
-            this._rightPanned.emit(args);
+            this._swipeRight.emit(args);
         }
         if (args.cancel) {
             this.setContentElementTransform(0);
@@ -266,13 +273,13 @@ let SwipeElement = class SwipeElement extends Themeable(CustomElement) {
     }
 };
 __decorate([
-    Emit({ eventName: 'leftPanned' }),
+    Emit({ eventName: 'swipeLeft' }),
     __metadata("design:type", Object)
-], SwipeElement.prototype, "_leftPanned", void 0);
+], SwipeElement.prototype, "_swipeLeft", void 0);
 __decorate([
-    Emit({ eventName: 'rightPanned' }),
+    Emit({ eventName: 'swipeRight' }),
     __metadata("design:type", Object)
-], SwipeElement.prototype, "_rightPanned", void 0);
+], SwipeElement.prototype, "_swipeRight", void 0);
 __decorate([
     State(),
     __metadata("design:type", Number)