@breadstone/mosaik-elements-svelte 0.1.48 → 0.1.49

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.49 (2026-07-10)
+
+### 🩹 Fixes
+
+- **tab:** add scroll and overflow buttons ([54dfb62877](https://github.com/RueDeRennes/mosaik/commit/54dfb62877))
+
 ## 0.1.48 (2026-07-09)
 
 This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.

package/index.mjs

@@ -225335,27 +225335,18 @@ l7([
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/Tab/TabPanelElementTemplate.js
 function f7(e) {
+	let t = e.placement === e7.Left || e.placement === e7.Right ? K.Vertical : K.Horizontal;
 	return V`
-        ${U(e.hasScrollableContent, () => V`
-        <mosaik-button part="startScrollButton"
-                       tabindex="-1"
-                       .size="${G.Large}"
-                       .icon="${X.chevronLeft}"
-                       .disabled="${e.canScrollToStart}"
-                       @click="${() => e.scrollByTabOffset("before")}"></mosaik-button>
-        `)}
-        <div part="content"
-             @scroll="${(t) => e.onScroll(t)}">
+        <mosaik-scroll part="scroll"
+                       exportparts="scroller:content, scrollButtonPrev:startScrollButton, scrollButtonNext:endScrollButton"
+                       .dir="${e.dir}"
+                       .lang="${e.lang}"
+                       .orientation="${t}"
+                       .showScrollButtons="${!0}"
+                       .showScrollbar="${!1}"
+                       @changed="${() => e.onScrollStateChanged()}">
             <slot></slot>
-        </div>
-        ${U(e.hasScrollableContent, () => V`
-        <mosaik-button part="endScrollButton"
-                       tabindex="-1"
-                       size="large"
-                       .icon="${X.chevronRight}"
-                       .disabled="${e.canScrollToEnd}"
-                       @click="${() => e.scrollByTabOffset("after")}"></mosaik-button>
-        `)}
+        </mosaik-scroll>
     `;
 }
 //#endregion
@@ -225419,33 +225410,45 @@ function gEe() {
   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%;
 }
 
     `;
@@ -225511,33 +225514,45 @@ function _Ee() {
   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([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([alignment="start"]) {
+: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%;
 }
 
     `;
@@ -225603,33 +225618,45 @@ function vEe() {
   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%;
 }
 
     `;
@@ -225644,7 +225671,7 @@ var p7 = function(e, t, n, r) {
 }, m7 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, h7 = class extends F(Y(J(j))) {
-	_containerElement;
+	_scrollElement;
 	_hasScrollableContent;
 	_canScrollToStart;
 	_canScrollToEnd;
@@ -225653,7 +225680,7 @@ var p7 = function(e, t, n, r) {
 	_hasIndicator;
 	_enableGestures;
 	constructor() {
-		super(), this._alignment = $5.Start, this._placement = e7.Top, this._hasScrollableContent = !1, this._canScrollToStart = !0, this._canScrollToEnd = !1, this._hasIndicator = !1, this._enableGestures = !1;
+		super(), this._alignment = $5.Start, this._placement = e7.Top, this._scrollElement = null, this._hasScrollableContent = !1, this._canScrollToStart = !1, this._canScrollToEnd = !1, this._hasIndicator = !1, this._enableGestures = !1;
 	}
 	static get is() {
 		return "mosaik-tab-panel";
@@ -225704,12 +225731,13 @@ var p7 = function(e, t, n, r) {
 		return f7(this);
 	}
 	onApplyTemplate() {
-		super.onApplyTemplate(), this._containerElement = this.getTemplatePart("content"), this.hasScrollableContent = this._containerElement.scrollWidth > this._containerElement.clientWidth;
+		super.onApplyTemplate(), this._scrollElement = this.getTemplatePart("scroll"), this.syncScrollState();
 	}
-	scrollByTabOffset(e) {}
-	onScroll(e) {
-		let t = e.target;
-		this.canScrollToEnd = !(t.scrollWidth <= Math.abs(this._containerElement.scrollLeft) + this._containerElement.offsetWidth), this.canScrollToStart = this._containerElement.scrollLeft !== 0;
+	onScrollStateChanged() {
+		this.syncScrollState();
+	}
+	syncScrollState() {
+		this._scrollElement && (this.hasScrollableContent = this._scrollElement.isScrollable, this.canScrollToStart = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollStart, this.canScrollToEnd = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollEnd);
 	}
 };
 p7([
@@ -225767,7 +225795,7 @@ p7([
 		mode: "open",
 		delegatesFocus: !0
 	},
-	imports: [MS]
+	imports: [V0]
 }), m7("design:paramtypes", [])], h7);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js
@@ -225975,6 +226003,10 @@ function yEe() {
   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;
 }
@@ -226210,6 +226242,10 @@ function bEe() {
   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;
 }
@@ -226477,6 +226513,10 @@ function xEe() {
   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/package.json

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