@breadstone/mosaik-elements-foundation 0.1.48 → 0.1.49

package/Controls/Components/Selectors/Tab/TabPanelElement.d.ts

@@ -5,15 +5,14 @@ import { CustomElement } from '../../Abstracts/CustomElement';
 import type { ITabPanelElementProps } from './ITabPanelElementProps';
 declare const TabPanelElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * Tab Panel - A scrollable container for tab strip items with optional navigation buttons.
+ * Tab Panel - A container that delegates overflowing tab strip items to the Scroll component.
  *
  * @description
- * The Tab Panel component serves as a container for the tab strip, providing horizontal scrolling
- * when the total width of tab items exceeds the available space. It automatically detects scrollable
- * content and displays navigation buttons (start/end) to allow users to scroll through tabs that
- * extend beyond the visible area. The component supports different alignments and placements,
- * integrates with the parent tab's indicator settings, and can enable swipe gestures for touch
- * devices.
+ * The Tab Panel component serves as a container for the tab strip and composes a Scroll component
+ * for overflow handling. Top and bottom placements scroll horizontally, while left and right
+ * placements scroll vertically. The composed Scroll component provides edge fades, navigation
+ * buttons, native touch scrolling, and boundary detection. The panel mirrors that boundary state
+ * through its existing public scroll properties.
  *
  * @name Tab Panel
  * @element mosaik-tab-panel
@@ -23,6 +22,7 @@ declare const TabPanelElement_base: (abstract new (...args: Array<any>) => impor
  *
  * @csspart content - The scrollable content container
  * @csspart endScrollButton - The navigation button for scrolling to end
+ * @csspart scroll - The composed Scroll element
  * @csspart startScrollButton - The navigation button for scrolling to start
  *
  * @cssprop {String} --tab-panel-background-color - The background fill color of the panel
@@ -52,7 +52,7 @@ declare const TabPanelElement_base: (abstract new (...args: Array<any>) => impor
  * @fires connected {ConnectedEvent} - Fired when connected to the DOM
  * @fires changed {PropertyChangedEvent} - Fired when properties change
  *
- * @dependency mosaik-button - The Button element.
+ * @dependency mosaik-scroll - The Scroll element.
  *
  * @example
  * Tab panel with scrollable content:
@@ -80,7 +80,7 @@ declare const TabPanelElement_base: (abstract new (...args: Array<any>) => impor
  * @public
  */
 export declare class TabPanelElement extends TabPanelElement_base implements ITabPanelElementProps, ISlottable {
-    private _containerElement;
+    private _scrollElement;
     private _hasScrollableContent;
     private _canScrollToStart;
     private _canScrollToEnd;
@@ -167,12 +167,11 @@ export declare class TabPanelElement extends TabPanelElement_base implements ITa
      * @private
      * @template
      */
-    scrollByTabOffset(direction: 'before' | 'after'): void;
+    onScrollStateChanged(): void;
     /**
      * @private
-     * @template
      */
-    onScroll(e: Event): void;
+    private syncScrollState;
 }
 /**
  * @public

package/Controls/Components/Selectors/Tab/TabPanelElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAQrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBAgBa,eACT,SAAQ,oBACR,YAAW,qBAAqB,EAAE,UAAU;IAI5C,OAAO,CAAC,iBAAiB,CAAe;IACxC,OAAO,CAAC,qBAAqB,CAAU;IACvC,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,eAAe,CAAU;IACjC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,eAAe,CAAU;IAMjC;;OAEG;;IAiBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAErC;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,OAAO,EAEvC;IAED;;;;;OAKG;IACH,IAIW,oBAAoB,IAAI,OAAO,CAEzC;IACD,OAAO,KAAK,oBAAoB,QAK/B;IAED;;;;;OAKG;IACH,IAIW,gBAAgB,IAAI,OAAO,CAErC;IACD,OAAO,KAAK,gBAAgB,QAK3B;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,OAAO,KAAK,cAAc,QAKzB;IAMe,MAAM,IAAI,OAAO;IAIjC;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAO1C;;;OAGG;IACI,iBAAiB,CAAC,SAAS,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO7D;;;OAGG;IACI,QAAQ,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAQlC;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}
+{"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAQrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBAgBa,eACT,SAAQ,oBACR,YAAW,qBAAqB,EAAE,UAAU;IAI5C,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,qBAAqB,CAAU;IACvC,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,eAAe,CAAU;IACjC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,eAAe,CAAU;IAMjC;;OAEG;;IAkBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,iBAAiB,CAExC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,iBAAiB,EAK5C;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IACD,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAErC;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,OAAO,EAEvC;IAED;;;;;OAKG;IACH,IAIW,oBAAoB,IAAI,OAAO,CAEzC;IACD,OAAO,KAAK,oBAAoB,QAK/B;IAED;;;;;OAKG;IACH,IAIW,gBAAgB,IAAI,OAAO,CAErC;IACD,OAAO,KAAK,gBAAgB,QAK3B;IAED;;;;;OAKG;IACH,IAIW,cAAc,IAAI,OAAO,CAEnC;IACD,OAAO,KAAK,cAAc,QAKzB;IAMe,MAAM,IAAI,OAAO;IAIjC;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAO1C;;;OAGG;IACI,oBAAoB,IAAI,IAAI;IAInC;;OAEG;IACH,OAAO,CAAC,eAAe;CAY1B;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}

package/Controls/Components/Selectors/Tab/TabPanelElement.js

@@ -17,22 +17,21 @@ import { Property } from '../../../Decorators/PropertyDecorator';
 import { TabPanelAlignment } from '../../../Types/TabPanelAlignment';
 import { TabStripPlacement } from '../../../Types/TabStripPlacement';
 import { CustomElement } from '../../Abstracts/CustomElement';
-import { ButtonElement } from '../../Buttons/Button/ButtonElement';
+import { ScrollElement } from '../../Primitives/Scroll/ScrollElement';
 import { tabPanelElementTemplate } from './TabPanelElementTemplate';
 import { tabPanelElementCosmopolitanStyle } from './Themes/TabPanelElement.Cosmopolitan';
 import { tabPanelElementJoyStyle } from './Themes/TabPanelElement.Joy';
 import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
 // #endregion
 /**
- * Tab Panel - A scrollable container for tab strip items with optional navigation buttons.
+ * Tab Panel - A container that delegates overflowing tab strip items to the Scroll component.
  *
  * @description
- * The Tab Panel component serves as a container for the tab strip, providing horizontal scrolling
- * when the total width of tab items exceeds the available space. It automatically detects scrollable
- * content and displays navigation buttons (start/end) to allow users to scroll through tabs that
- * extend beyond the visible area. The component supports different alignments and placements,
- * integrates with the parent tab's indicator settings, and can enable swipe gestures for touch
- * devices.
+ * The Tab Panel component serves as a container for the tab strip and composes a Scroll component
+ * for overflow handling. Top and bottom placements scroll horizontally, while left and right
+ * placements scroll vertically. The composed Scroll component provides edge fades, navigation
+ * buttons, native touch scrolling, and boundary detection. The panel mirrors that boundary state
+ * through its existing public scroll properties.
  *
  * @name Tab Panel
  * @element mosaik-tab-panel
@@ -42,6 +41,7 @@ import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
  *
  * @csspart content - The scrollable content container
  * @csspart endScrollButton - The navigation button for scrolling to end
+ * @csspart scroll - The composed Scroll element
  * @csspart startScrollButton - The navigation button for scrolling to start
  *
  * @cssprop {String} --tab-panel-background-color - The background fill color of the panel
@@ -71,7 +71,7 @@ import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
  * @fires connected {ConnectedEvent} - Fired when connected to the DOM
  * @fires changed {PropertyChangedEvent} - Fired when properties change
  *
- * @dependency mosaik-button - The Button element.
+ * @dependency mosaik-scroll - The Scroll element.
  *
  * @example
  * Tab panel with scrollable content:
@@ -100,7 +100,7 @@ import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
  */
 let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearanceable(CustomElement))) {
     // #region Fields
-    _containerElement;
+    _scrollElement;
     _hasScrollableContent;
     _canScrollToStart;
     _canScrollToEnd;
@@ -117,8 +117,9 @@ let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearan
         super();
         this._alignment = TabPanelAlignment.Start;
         this._placement = TabStripPlacement.Top;
+        this._scrollElement = null;
         this._hasScrollableContent = false;
-        this._canScrollToStart = true;
+        this._canScrollToStart = false;
         this._canScrollToEnd = false;
         this._hasIndicator = false;
         this._enableGestures = false;
@@ -246,27 +247,26 @@ let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearan
      */
     onApplyTemplate() {
         super.onApplyTemplate();
-        this._containerElement = this.getTemplatePart('content');
-        this.hasScrollableContent = this._containerElement.scrollWidth > this._containerElement.clientWidth;
+        this._scrollElement = this.getTemplatePart('scroll');
+        this.syncScrollState();
     }
     /**
      * @private
      * @template
      */
-    scrollByTabOffset(direction) {
-        // this.scrollToDirection(direction);
-        // if (this._container?.selectedItem) {
-        //     this.alignToElement(this._container.selectedItem);
-        // }
+    onScrollStateChanged() {
+        this.syncScrollState();
     }
     /**
      * @private
-     * @template
      */
-    onScroll(e) {
-        const el = e.target;
-        this.canScrollToEnd = !(el.scrollWidth <= Math.abs(this._containerElement.scrollLeft) + this._containerElement.offsetWidth);
-        this.canScrollToStart = this._containerElement.scrollLeft !== 0;
+    syncScrollState() {
+        if (!this._scrollElement) {
+            return;
+        }
+        this.hasScrollableContent = this._scrollElement.isScrollable;
+        this.canScrollToStart = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollStart;
+        this.canScrollToEnd = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollEnd;
     }
 };
 __decorate([
@@ -333,7 +333,7 @@ TabPanelElement = __decorate([
             delegatesFocus: true
         },
         imports: [
-            ButtonElement
+            ScrollElement
         ]
     }),
     __metadata("design:paramtypes", [])

package/Controls/Components/Selectors/Tab/TabPanelElement.js.map

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

package/Controls/Components/Selectors/Tab/TabPanelElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuBvF"}
+{"version":3,"file":"TabPanelElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAiBvF"}

package/Controls/Components/Selectors/Tab/TabPanelElementTemplate.js

@@ -1,8 +1,7 @@
 // #region Imports
 import { html } from '../../../../Dom/Html';
-import { Icons } from '../../../../Resources/Icons';
-import { when } from '../../../Directives/Directives';
-import { Size } from '../../../Types/Size';
+import { Orientation } from '../../../Types/Orientation';
+import { TabStripPlacement } from '../../../Types/TabStripPlacement';
 // #endregion
 /**
  * The template of the `TabPanelElement`.
@@ -10,27 +9,20 @@ import { Size } from '../../../Types/Size';
  * @public
  */
 export function tabPanelElementTemplate(e) {
+    const orientation = e.placement === TabStripPlacement.Left || e.placement === TabStripPlacement.Right
+        ? Orientation.Vertical
+        : Orientation.Horizontal;
     return html `
-        ${when(e.hasScrollableContent, () => html `
-        <mosaik-button part="startScrollButton"
-                       tabindex="-1"
-                       .size="${Size.Large}"
-                       .icon="${Icons.chevronLeft}"
-                       .disabled="${e.canScrollToStart}"
-                       @click="${() => e.scrollByTabOffset('before')}"></mosaik-button>
-        `)}
-        <div part="content"
-             @scroll="${(x) => e.onScroll(x)}">
+        <mosaik-scroll part="scroll"
+                       exportparts="scroller:content, scrollButtonPrev:startScrollButton, scrollButtonNext:endScrollButton"
+                       .dir="${e.dir}"
+                       .lang="${e.lang}"
+                       .orientation="${orientation}"
+                       .showScrollButtons="${true}"
+                       .showScrollbar="${false}"
+                       @changed="${() => e.onScrollStateChanged()}">
             <slot></slot>
-        </div>
-        ${when(e.hasScrollableContent, () => html `
-        <mosaik-button part="endScrollButton"
-                       tabindex="-1"
-                       size="large"
-                       .icon="${Icons.chevronRight}"
-                       .disabled="${e.canScrollToEnd}"
-                       @click="${() => e.scrollByTabOffset('after')}"></mosaik-button>
-        `)}
+        </mosaik-scroll>
     `;
 }
 //# sourceMappingURL=TabPanelElementTemplate.js.map

package/Controls/Components/Selectors/Tab/TabPanelElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAG3C,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAA4B,CAAI;IACnE,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;gCAGjB,IAAI,CAAC,KAAK;gCACV,KAAK,CAAC,WAAW;oCACb,CAAC,CAAC,gBAAgB;iCACrB,GAAG,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC;SAC3D,CAAC;;wBAEc,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;;;UAGzC,IAAI,CAAC,CAAC,CAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;gCAIjB,KAAK,CAAC,YAAY;oCACd,CAAC,CAAC,cAAc;iCACnB,GAAG,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC;SAC1D,CAAC;KACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabPanelElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Tab/TabPanelElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAA4B,CAAI;IACnE,MAAM,WAAW,GAAG,CAAC,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI,IAAI,CAAC,CAAC,SAAS,KAAK,iBAAiB,CAAC,KAAK;QACjG,CAAC,CAAC,WAAW,CAAC,QAAQ;QACtB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC;IAE7B,OAAO,IAAI,CAAA;;;+BAGgB,CAAC,CAAC,GAAG;gCACJ,CAAC,CAAC,IAAI;uCACC,WAAW;6CACL,IAAI;yCACR,KAAK;mCACX,GAAG,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;;KAG5D,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.d.ts.map

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

package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js

@@ -214,6 +214,10 @@ export function tabElementCosmopolitanStyle() {
   writing-mode: vertical-lr;
 }
 
+:host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
+  transform: rotate(180deg);
+}
+
 :host([placement="right"]) [part="root"] {
   flex-direction: row-reverse;
 }

package/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js.map

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

package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.d.ts.map

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

package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js

@@ -214,6 +214,10 @@ export function tabElementJoyStyle() {
   writing-mode: vertical-lr;
 }
 
+:host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
+  transform: rotate(180deg);
+}
+
 :host([placement="right"]) [part="root"] {
   flex-direction: row-reverse;
 }

package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js.map

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

package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAqPlD"}
+{"version":3,"file":"TabElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAyPlD"}

package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.js

@@ -214,6 +214,10 @@ export function tabElementMemphisStyle() {
   writing-mode: vertical-lr;
 }
 
+:host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
+  transform: rotate(180deg);
+}
+
 :host([placement="right"]) [part="root"] {
   flex-direction: row-reverse;
 }

package/Controls/Components/Selectors/Tab/Themes/TabElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmPT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuPT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CAyF5D"}
+{"version":3,"file":"TabPanelElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CAqG5D"}

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.js

@@ -69,33 +69,45 @@ export function tabPanelElementCosmopolitanStyle() {
   flex-direction: row;
   flex: 1;
   justify-content: stretch;
+  min-width: 0;
+  min-height: 0;
   display: flex;
 }
 
-:host [part="content"] {
-  scroll-behavior: smooth;
-  display: flex;
-  overflow: hidden;
+:host [part="scroll"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }
 
-:host([alignment="start"]) {
+:host([placement="top"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="bottom"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  width: max-content;
+}
+
+:host([placement="left"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="right"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  height: max-content;
+}
+
+:host([alignment="start"]) [part="scroll"]::part(content) {
   justify-content: flex-start;
 }
 
-:host([alignment="center"]) {
+:host([alignment="center"]) [part="scroll"]::part(content) {
   justify-content: center;
 }
 
-:host([alignment="end"]) {
+:host([alignment="end"]) [part="scroll"]::part(content) {
   justify-content: flex-end;
 }
 
-:host([alignment="stretch"]) {
-  justify-content: stretch;
-}
-
-:host([alignment="stretch"]) [part="content"] {
+:host([alignment="stretch"]) slot::slotted(mosaik-tab-strip) {
   flex: 1;
+  width: 100%;
+  height: 100%;
 }
 
     `;

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,gCAAgC;IAC5C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabPanelElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,gCAAgC;IAC5C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,SAAS,CAyFnD"}
+{"version":3,"file":"TabPanelElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,SAAS,CAqGnD"}

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.js

@@ -69,33 +69,45 @@ export function tabPanelElementJoyStyle() {
   flex-direction: row;
   flex: 1;
   justify-content: stretch;
+  min-width: 0;
+  min-height: 0;
   display: flex;
 }
 
-:host [part="content"] {
-  scroll-behavior: smooth;
-  display: flex;
-  overflow: hidden;
+:host [part="scroll"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }
 
-:host([alignment="start"]) {
+:host([placement="top"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="bottom"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  width: max-content;
+}
+
+:host([placement="left"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="right"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  height: max-content;
+}
+
+:host([alignment="start"]) [part="scroll"]::part(content) {
   justify-content: flex-start;
 }
 
-:host([alignment="center"]) {
+:host([alignment="center"]) [part="scroll"]::part(content) {
   justify-content: center;
 }
 
-:host([alignment="end"]) {
+:host([alignment="end"]) [part="scroll"]::part(content) {
   justify-content: flex-end;
 }
 
-:host([alignment="stretch"]) {
-  justify-content: stretch;
-}
-
-:host([alignment="stretch"]) [part="content"] {
+:host([alignment="stretch"]) slot::slotted(mosaik-tab-strip) {
   flex: 1;
+  width: 100%;
+  height: 100%;
 }
 
     `;

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabPanelElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAyFvD"}
+{"version":3,"file":"TabPanelElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAqGvD"}

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.js

@@ -69,33 +69,45 @@ export function tabPanelElementMemphisStyle() {
   flex-direction: row;
   flex: 1;
   justify-content: stretch;
+  min-width: 0;
+  min-height: 0;
   display: flex;
 }
 
-:host [part="content"] {
-  scroll-behavior: smooth;
-  display: flex;
-  overflow: hidden;
+:host [part="scroll"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }
 
-:host([alignment="start"]) {
+:host([placement="top"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="bottom"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  width: max-content;
+}
+
+:host([placement="left"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="right"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  height: max-content;
+}
+
+:host([alignment="start"]) [part="scroll"]::part(content) {
   justify-content: flex-start;
 }
 
-:host([alignment="center"]) {
+:host([alignment="center"]) [part="scroll"]::part(content) {
   justify-content: center;
 }
 
-:host([alignment="end"]) {
+:host([alignment="end"]) [part="scroll"]::part(content) {
   justify-content: flex-end;
 }
 
-:host([alignment="stretch"]) {
-  justify-content: stretch;
-}
-
-:host([alignment="stretch"]) [part="content"] {
+:host([alignment="stretch"]) slot::slotted(mosaik-tab-strip) {
   flex: 1;
+  width: 100%;
+  height: 100%;
 }
 
     `;

package/Controls/Components/Selectors/Tab/Themes/TabPanelElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanelElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TabPanelElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Tab/Themes/TabPanelElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

package/custom-elements.json

@@ -226128,7 +226128,7 @@
               "module": "./../src/Controls/Behaviors/Appearanceable.ts"
             }
           ],
-          "description": "Tab Panel - A scrollable container for tab strip items with optional navigation buttons.",
+          "description": "Tab Panel - A container that delegates overflowing tab strip items to the Scroll component.",
           "name": "TabPanelElement",
           "members": [
             {
@@ -226728,6 +226728,10 @@
               "name": "endScrollButton",
               "description": "The navigation button for scrolling to end"
             },
+            {
+              "name": "scroll",
+              "description": "The composed Scroll element"
+            },
             {
               "name": "startScrollButton",
               "description": "The navigation button for scrolling to start"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-foundation",
-    "version": "0.1.48",
+    "version": "0.1.49",
     "description": "Mosaik elements components package.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,8 +14,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "0.1.48",
-        "@breadstone/mosaik-themes": "0.1.48",
+        "@breadstone/mosaik-elements": "0.1.49",
+        "@breadstone/mosaik-themes": "0.1.49",
         "tslib": "2.8.1"
     },
     "peerDependencies": {