@breadstone/mosaik-elements-svelte 0.1.45 → 0.1.47

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.1.47 (2026-07-07)
+
+### 🚀 Features
+
+- **dataList:** add caption/summary slot projection ([7e107dc5f1](https://github.com/RueDeRennes/mosaik/commit/7e107dc5f1))
+
+## 0.1.46 (2026-07-07)
+
+### 🚀 Features
+
+- **icon:** add IconPipe and update IconNameDirective for new components ([786e6dc8bb](https://github.com/RueDeRennes/mosaik/commit/786e6dc8bb))
+
 ## 0.1.45 (2026-07-03)
 
 This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.

package/index.mjs

@@ -21813,10 +21813,10 @@ function Ede() {
   --menu-font-weight: var(--joy-typography-body1-font-weight);
   --menu-foreground-color: var(--joy-scheme-foreground);
   --menu-gap: unset;
-  --menu-padding-bottom: var(--joy-layout-spacing);
-  --menu-padding-left: calc(var(--joy-layout-spacing) * 2);
-  --menu-padding-right: calc(var(--joy-layout-spacing) * 2);
-  --menu-padding-top: var(--joy-layout-spacing);
+  --menu-padding-bottom: var(--joy-layout-space);
+  --menu-padding-left: calc(var(--joy-layout-space) * 2);
+  --menu-padding-right: calc(var(--joy-layout-space) * 2);
+  --menu-padding-top: var(--joy-layout-space);
   --menu-shadow: unset unset unset unset unset;
   --menu-shadow-blur: unset;
   --menu-shadow-color: unset;
@@ -107188,26 +107188,32 @@ var DU = class extends iL {
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/List/ListElementTemplate.js
 function OU(e) {
 	return V`
-        ${U(e.showFilter, () => V`
-        <div part="filter">
-            <slot name="filter"></slot>
-            <mosaik-spacer .thickness="${"all"}"
-                           .size="${"tiny"}">
-                <mosaik-textbox .value="${e.filter}"
-                                .placeholder="${e.filterPlaceholder.trim() || e.intl.filterPlaceholder}"
-                                ?disabled="${e.disabled}"
-                                @input="${(t) => e.filter = t.target.value}"></mosaik-textbox>
-            </mosaik-spacer>
+        <div part="header"
+             ?hidden="${!AM(e, "has-header", e.hasSlotContent("header"))}">
+            <slot name="header"></slot>
         </div>
-        `)}
-        <slot name="header"></slot>
         <div part="items">
+            ${U(e.showFilter, () => V`
+            <div part="filter">
+                <slot name="filter"></slot>
+                <mosaik-spacer .thickness="${"all"}"
+                            .size="${"tiny"}">
+                    <mosaik-textbox .value="${e.filter}"
+                                    .placeholder="${e.filterPlaceholder.trim() || e.intl.filterPlaceholder}"
+                                    ?disabled="${e.disabled}"
+                                    @input="${(t) => e.filter = t.target.value}"></mosaik-textbox>
+                </mosaik-spacer>
+            </div>
+            `)}
             <slot></slot>
         </div>
          <div part="empty">
             <slot name="empty"></slot>
         </div>
-        <slot name="footer"></slot>
+        <div part="footer"
+             ?hidden="${!AM(e, "has-footer", e.hasSlotContent("footer"))}">
+            <slot name="footer"></slot>
+        </div>
     `;
 }
 //#endregion
@@ -108468,6 +108474,7 @@ function tW() {
   --list-font-weight: unset;
   --list-foreground-color: unset;
   --list-gap: unset;
+  --list-line-thickness: unset;
   --list-padding-bottom: unset;
   --list-padding-left: unset;
   --list-padding-right: unset;
@@ -108529,38 +108536,78 @@ function tW() {
   transition-timing-function: var(--list-transition-mode);
   transition-property: var(--list-transition-property);
   box-shadow: var(--list-shadow);
+  outline: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="header"], :host [part="footer"] {
   padding-top: var(--list-padding-top);
   padding-left: var(--list-padding-left);
   padding-bottom: var(--list-padding-bottom);
   padding-right: var(--list-padding-right);
-  gap: var(--list-gap);
-  overflow: overlay;
-  outline: none;
-  width: 100%;
-  height: 100%;
+  flex: none;
+  position: relative;
 }
 
-:host [part="filter"] {
-  z-index: 2;
-  position: sticky;
-  top: 8px;
+:host [part="header"][hidden], :host [part="footer"][hidden] {
+  display: none;
+}
+
+:host [part="header"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="header"]:after {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="footer"]:before {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] ::slotted(mosaik-paginator) {
+  flex-direction: row-reverse;
+  align-items: center;
+  display: flex;
 }
 
 :host [part="items"] {
   gap: var(--list-gap);
+  min-height: 0;
+  overflow-y: overlay;
   flex-direction: column;
+  flex: auto;
   display: flex;
 }
 
-:host([orientation="horizontal"]) [part="items"] {
-  flex-flow: wrap;
+:host [part="items"] [part="filter"] {
+  z-index: 2;
+  position: sticky;
+  top: 8px;
 }
 
-:host([inset*="none"]), :host([empty]) {
-  --list-padding-top: 0px;
-  --list-padding-left: 0px;
-  --list-padding-bottom: 0px;
-  --list-padding-right: 0px;
+:host([orientation="horizontal"]) [part="items"] {
+  flex-flow: wrap;
 }
 
 :host([mosaik-dropdown-button-projection]), :host([mosaik-split-button-projection]) {
@@ -108596,10 +108643,11 @@ function nW() {
   --list-font-weight: var(--joy-typography-body1-font-weight);
   --list-foreground-color: var(--joy-scheme-foreground);
   --list-gap: var(--joy-layout-space);
-  --list-padding-bottom: var(--joy-layout-spacing);
-  --list-padding-left: calc(var(--joy-layout-spacing) * 2);
-  --list-padding-right: calc(var(--joy-layout-spacing) * 2);
-  --list-padding-top: var(--joy-layout-spacing);
+  --list-line-thickness: var(--joy-layout-thickness);
+  --list-padding-bottom: calc(var(--joy-layout-space) * 2);
+  --list-padding-left: calc(var(--joy-layout-space) * 2);
+  --list-padding-right: calc(var(--joy-layout-space) * 2);
+  --list-padding-top: calc(var(--joy-layout-space) * 2);
   --list-shadow: unset unset unset unset unset;
   --list-shadow-blur: unset;
   --list-shadow-color: unset;
@@ -108657,38 +108705,78 @@ function nW() {
   transition-timing-function: var(--list-transition-mode);
   transition-property: var(--list-transition-property);
   box-shadow: var(--list-shadow);
+  outline: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="header"], :host [part="footer"] {
   padding-top: var(--list-padding-top);
   padding-left: var(--list-padding-left);
   padding-bottom: var(--list-padding-bottom);
   padding-right: var(--list-padding-right);
-  gap: var(--list-gap);
-  overflow: overlay;
-  outline: none;
-  width: 100%;
-  height: 100%;
+  flex: none;
+  position: relative;
 }
 
-:host [part="filter"] {
-  z-index: 2;
-  position: sticky;
-  top: 8px;
+:host [part="header"][hidden], :host [part="footer"][hidden] {
+  display: none;
+}
+
+:host [part="header"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="header"]:after {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="footer"]:before {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] ::slotted(mosaik-paginator) {
+  flex-direction: row-reverse;
+  align-items: center;
+  display: flex;
 }
 
 :host [part="items"] {
   gap: var(--list-gap);
+  min-height: 0;
+  overflow-y: overlay;
   flex-direction: column;
+  flex: auto;
   display: flex;
 }
 
-:host([orientation="horizontal"]) [part="items"] {
-  flex-flow: wrap;
+:host [part="items"] [part="filter"] {
+  z-index: 2;
+  position: sticky;
+  top: 8px;
 }
 
-:host([inset*="none"]), :host([empty]) {
-  --list-padding-top: 0px;
-  --list-padding-left: 0px;
-  --list-padding-bottom: 0px;
-  --list-padding-right: 0px;
+:host([orientation="horizontal"]) [part="items"] {
+  flex-flow: wrap;
 }
 
 :host([mosaik-dropdown-button-projection]), :host([mosaik-split-button-projection]) {
@@ -108724,6 +108812,7 @@ function rW() {
   --list-font-weight: unset;
   --list-foreground-color: unset;
   --list-gap: unset;
+  --list-line-thickness: unset;
   --list-padding-bottom: unset;
   --list-padding-left: unset;
   --list-padding-right: unset;
@@ -108785,38 +108874,78 @@ function rW() {
   transition-timing-function: var(--list-transition-mode);
   transition-property: var(--list-transition-property);
   box-shadow: var(--list-shadow);
+  outline: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="header"], :host [part="footer"] {
   padding-top: var(--list-padding-top);
   padding-left: var(--list-padding-left);
   padding-bottom: var(--list-padding-bottom);
   padding-right: var(--list-padding-right);
-  gap: var(--list-gap);
-  overflow: overlay;
-  outline: none;
-  width: 100%;
-  height: 100%;
+  flex: none;
+  position: relative;
 }
 
-:host [part="filter"] {
-  z-index: 2;
-  position: sticky;
-  top: 8px;
+:host [part="header"][hidden], :host [part="footer"][hidden] {
+  display: none;
+}
+
+:host [part="header"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="header"]:after {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="footer"]:before {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] ::slotted(mosaik-paginator) {
+  flex-direction: row-reverse;
+  align-items: center;
+  display: flex;
 }
 
 :host [part="items"] {
   gap: var(--list-gap);
+  min-height: 0;
+  overflow-y: overlay;
   flex-direction: column;
+  flex: auto;
   display: flex;
 }
 
-:host([orientation="horizontal"]) [part="items"] {
-  flex-flow: wrap;
+:host [part="items"] [part="filter"] {
+  z-index: 2;
+  position: sticky;
+  top: 8px;
 }
 
-:host([inset*="none"]), :host([empty]) {
-  --list-padding-top: 0px;
-  --list-padding-left: 0px;
-  --list-padding-bottom: 0px;
-  --list-padding-right: 0px;
+:host([orientation="horizontal"]) [part="items"] {
+  flex-flow: wrap;
 }
 
 :host([mosaik-dropdown-button-projection]), :host([mosaik-split-button-projection]) {
@@ -108842,7 +108971,7 @@ var iW = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, aW = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, oW = class extends F(R(dU(hx(Xw(EU))))) {
+}, oW = class extends F(R(dU(hx(Xw(Y(EU)))))) {
 	_provider = FS(this, {
 		context: kU,
 		values: () => ({ disabled: this.disabled })
@@ -109240,10 +109369,10 @@ function pW() {
   --table-foreground-color: var(--joy-scheme-foreground);
   --table-gap: var(--joy-layout-space);
   --table-line-thickness: var(--joy-layout-thickness);
-  --table-padding-bottom: var(--joy-layout-space);
+  --table-padding-bottom: calc(var(--joy-layout-space) * 2);
   --table-padding-left: calc(var(--joy-layout-space) * 2);
   --table-padding-right: calc(var(--joy-layout-space) * 2);
-  --table-padding-top: var(--joy-layout-space);
+  --table-padding-top: calc(var(--joy-layout-space) * 2);
   --table-row-border-color: var(--joy-scheme-highlight);
   --table-row-border-radius: unset;
   --table-row-border-style: solid;
@@ -189357,7 +189486,7 @@ function Jbe() {
   --dropdown-transition-duration: unset;
   --dropdown-transition-mode: unset;
   --dropdown-transition-property: unset;
-  --dropdown-translate: unset;
+  --dropdown-translate: none;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -212897,6 +213026,8 @@ xwe([
 function Swe(e) {
 	return V`
         <mosaik-list part="list">
+            <slot name="caption"
+                  slot="header"></slot>
             ${Pb(e.source, (e) => e, (t) => V`
                 <mosaik-list-item>
                 ${Pb(e.getItemDefinitions(), (e) => e.key, (e) => V`
@@ -212904,6 +213035,8 @@ function Swe(e) {
                 `)}
                 </mosaik-list-item>
             `)}
+            <slot name="summary"
+                  slot="footer"></slot>
         </mosaik-list>
     `;
 }
@@ -212989,18 +213122,10 @@ function Cwe() {
 :host {
   width: 100%;
   height: 100%;
-  overflow: overlay;
   display: block;
   position: relative;
 }
 
-:host [part="list"] {
-  overflow: unset;
-  position: unset;
-  width: 100%;
-  height: 100%;
-}
-
     `;
 }
 //#endregion
@@ -213061,18 +213186,10 @@ function wwe() {
 :host {
   width: 100%;
   height: 100%;
-  overflow: overlay;
   display: block;
   position: relative;
 }
 
-:host [part="list"] {
-  overflow: unset;
-  position: unset;
-  width: 100%;
-  height: 100%;
-}
-
     `;
 }
 //#endregion
@@ -213133,18 +213250,10 @@ function Twe() {
 :host {
   width: 100%;
   height: 100%;
-  overflow: overlay;
   display: block;
   position: relative;
 }
 
-:host [part="list"] {
-  overflow: unset;
-  position: unset;
-  width: 100%;
-  height: 100%;
-}
-
     `;
 }
 //#endregion
@@ -217019,7 +217128,8 @@ function uTe(e) {
                       @columnsChanged="${e.onColumnsChanged}"
                       @tableSelectionChanged="${(t) => e.onTableSelectionChanged(t)}"
                       @tableChooseColumns="${() => e.openEditor()}">
-            <slot  name="caption" slot="caption"></slot>
+            <slot name="caption"
+                  slot="caption"></slot>
             ${U(e.allColumnsHidden, () => V`
             <mosaik-banner part="banner"
                            slot="caption"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.1.45",
+    "version": "0.1.47",
     "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.45",
-        "@breadstone/mosaik-elements-foundation": "0.1.45",
+        "@breadstone/mosaik-elements": "0.1.47",
+        "@breadstone/mosaik-elements-foundation": "0.1.47",
         "tslib": "2.8.1"
     },
     "peerDependencies": {