@breadstone/mosaik-elements-svelte 0.1.47 → 0.1.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/index.mjs +511 -160
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## 0.1.48 (2026-07-09)
2
+
3
+ This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
4
+
1
5
  ## 0.1.47 (2026-07-07)
2
6
 
3
7
  ### 🚀 Features
package/index.mjs CHANGED
@@ -177680,7 +177680,7 @@ function Ive(e) {
177680
177680
  `;
177681
177681
  }
177682
177682
  //#endregion
177683
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.js
177683
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.js
177684
177684
  function Lve() {
177685
177685
  return B`
177686
177686
  :host {
@@ -177691,7 +177691,11 @@ function Lve() {
177691
177691
  --drawer-content-font-text-decoration: unset;
177692
177692
  --drawer-content-font-text-transform: unset;
177693
177693
  --drawer-content-font-weight: unset;
177694
- --drawer-content-gap: var(--joy-layout-space);
177694
+ --drawer-content-gap: unset;
177695
+ --drawer-content-inset-bottom: unset;
177696
+ --drawer-content-inset-left: unset;
177697
+ --drawer-content-inset-right: unset;
177698
+ --drawer-content-inset-top: unset;
177695
177699
  --drawer-content-padding-bottom: unset;
177696
177700
  --drawer-content-padding-left: unset;
177697
177701
  --drawer-content-padding-right: unset;
@@ -177735,10 +177739,13 @@ function Lve() {
177735
177739
  }
177736
177740
 
177737
177741
  :host {
177742
+ margin-left: var(--drawer-content-inset-left);
177743
+ margin-right: var(--drawer-content-inset-right);
177744
+ margin-top: var(--drawer-content-inset-top);
177745
+ margin-bottom: var(--drawer-content-inset-bottom);
177746
+ height: calc(100% - var(--drawer-content-inset-top) - var(--drawer-content-inset-bottom));
177738
177747
  z-index: 1;
177739
- height: 100%;
177740
- padding: var(--drawer-content-padding-top) var(--drawer-content-padding-right) var(--drawer-content-padding-bottom) var(--drawer-content-padding-left);
177741
- transition-property: transform, margin-left, margin-right;
177748
+ transition-property: transform, margin-left, margin-right, margin-top, margin-bottom;
177742
177749
  transition-duration: .4s;
177743
177750
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
177744
177751
  display: block;
@@ -177749,7 +177756,7 @@ function Lve() {
177749
177756
  `;
177750
177757
  }
177751
177758
  //#endregion
177752
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.js
177759
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.js
177753
177760
  function Rve() {
177754
177761
  return B`
177755
177762
  :host {
@@ -177760,7 +177767,11 @@ function Rve() {
177760
177767
  --drawer-content-font-text-decoration: unset;
177761
177768
  --drawer-content-font-text-transform: unset;
177762
177769
  --drawer-content-font-weight: unset;
177763
- --drawer-content-gap: var(--memphis-layout-space);
177770
+ --drawer-content-gap: var(--joy-layout-space);
177771
+ --drawer-content-inset-bottom: var(--joy-layout-space);
177772
+ --drawer-content-inset-left: unset;
177773
+ --drawer-content-inset-right: var(--joy-layout-space);
177774
+ --drawer-content-inset-top: var(--joy-layout-space);
177764
177775
  --drawer-content-padding-bottom: unset;
177765
177776
  --drawer-content-padding-left: unset;
177766
177777
  --drawer-content-padding-right: unset;
@@ -177804,10 +177815,13 @@ function Rve() {
177804
177815
  }
177805
177816
 
177806
177817
  :host {
177818
+ margin-left: var(--drawer-content-inset-left);
177819
+ margin-right: var(--drawer-content-inset-right);
177820
+ margin-top: var(--drawer-content-inset-top);
177821
+ margin-bottom: var(--drawer-content-inset-bottom);
177822
+ height: calc(100% - var(--drawer-content-inset-top) - var(--drawer-content-inset-bottom));
177807
177823
  z-index: 1;
177808
- height: 100%;
177809
- padding: var(--drawer-content-padding-top) var(--drawer-content-padding-right) var(--drawer-content-padding-bottom) var(--drawer-content-padding-left);
177810
- transition-property: transform, margin-left, margin-right;
177824
+ transition-property: transform, margin-left, margin-right, margin-top, margin-bottom;
177811
177825
  transition-duration: .4s;
177812
177826
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
177813
177827
  display: block;
@@ -177818,7 +177832,7 @@ function Rve() {
177818
177832
  `;
177819
177833
  }
177820
177834
  //#endregion
177821
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.js
177835
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.js
177822
177836
  function zve() {
177823
177837
  return B`
177824
177838
  :host {
@@ -177829,7 +177843,11 @@ function zve() {
177829
177843
  --drawer-content-font-text-decoration: unset;
177830
177844
  --drawer-content-font-text-transform: unset;
177831
177845
  --drawer-content-font-weight: unset;
177832
- --drawer-content-gap: unset;
177846
+ --drawer-content-gap: var(--memphis-layout-space);
177847
+ --drawer-content-inset-bottom: unset;
177848
+ --drawer-content-inset-left: unset;
177849
+ --drawer-content-inset-right: unset;
177850
+ --drawer-content-inset-top: unset;
177833
177851
  --drawer-content-padding-bottom: unset;
177834
177852
  --drawer-content-padding-left: unset;
177835
177853
  --drawer-content-padding-right: unset;
@@ -177873,10 +177891,13 @@ function zve() {
177873
177891
  }
177874
177892
 
177875
177893
  :host {
177894
+ margin-left: var(--drawer-content-inset-left);
177895
+ margin-right: var(--drawer-content-inset-right);
177896
+ margin-top: var(--drawer-content-inset-top);
177897
+ margin-bottom: var(--drawer-content-inset-bottom);
177898
+ height: calc(100% - var(--drawer-content-inset-top) - var(--drawer-content-inset-bottom));
177876
177899
  z-index: 1;
177877
- height: 100%;
177878
- padding: var(--drawer-content-padding-top) var(--drawer-content-padding-right) var(--drawer-content-padding-bottom) var(--drawer-content-padding-left);
177879
- transition-property: transform, margin-left, margin-right;
177900
+ transition-property: transform, margin-left, margin-right, margin-top, margin-bottom;
177880
177901
  transition-duration: .4s;
177881
177902
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
177882
177903
  display: block;
@@ -177896,27 +177917,25 @@ var p2 = function(e, t, n, r) {
177896
177917
  }, m2 = function(e, t) {
177897
177918
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
177898
177919
  }, h2 = class extends F(j) {
177899
- _opened;
177920
+ _isOpen;
177900
177921
  constructor() {
177901
- super(), this._opened = !1;
177922
+ super(), this._isOpen = !1;
177902
177923
  }
177903
177924
  static get is() {
177904
177925
  return "mosaik-drawer-content";
177905
177926
  }
177906
- get opened() {
177907
- return this._opened;
177927
+ get isOpen() {
177928
+ return this._isOpen;
177908
177929
  }
177909
- set opened(e) {
177910
- this._opened !== e && (this._opened = e);
177930
+ set isOpen(e) {
177931
+ this._isOpen !== e && (this._isOpen = e, this.requestUpdate("isOpen"));
177911
177932
  }
177912
177933
  onApplyTemplate() {
177913
- super.onApplyTemplate();
177914
- let e = O.current.findAncestor(this, z2, { strict: !1 });
177915
- e?.on("contentMarginChanged", (t) => {
177916
- I.current.setStyle(this, "margin-left", `${t.detail.left}px`), I.current.setStyle(this, "margin-right", `${t.detail.right}px`), this.opened = e.drawer?.isOpen ?? !1;
177934
+ super.onApplyTemplate(), O.current.findAncestor(this, z2, { strict: !1 })?.on("contentMarginChanged", (e) => {
177935
+ I.current.setStyle(this, "margin-left", `calc(${e.detail.left}px + var(--drawer-content-inset-left, 0px))`), I.current.setStyle(this, "margin-right", `calc(${e.detail.right}px + var(--drawer-content-inset-right, 0px))`);
177917
177936
  }, { passive: !0 });
177918
177937
  }
177919
- onOpenedPropertyChanged(e, t) {
177938
+ onIsOpenPropertyChanged(e, t) {
177920
177939
  t ? I.current.addClass(this, "drawer-opened") : I.current.removeClass(this, "drawer-opened");
177921
177940
  }
177922
177941
  };
@@ -177927,18 +177946,18 @@ p2([
177927
177946
  }),
177928
177947
  m2("design:type", Boolean),
177929
177948
  m2("design:paramtypes", [Boolean])
177930
- ], h2.prototype, "opened", null), p2([
177931
- L("opened"),
177949
+ ], h2.prototype, "isOpen", null), p2([
177950
+ L("isOpen"),
177932
177951
  m2("design:type", Function),
177933
177952
  m2("design:paramtypes", [Boolean, Boolean]),
177934
177953
  m2("design:returntype", void 0)
177935
- ], h2.prototype, "onOpenedPropertyChanged", null), h2 = p2([H({
177954
+ ], h2.prototype, "onIsOpenPropertyChanged", null), h2 = p2([H({
177936
177955
  selector: "mosaik-drawer-content",
177937
177956
  template: Ive,
177938
177957
  themes: {
177939
- joy: Lve,
177940
- memphis: Rve,
177941
- cosmopolitan: zve
177958
+ joy: Rve,
177959
+ memphis: zve,
177960
+ cosmopolitan: Lve
177942
177961
  },
177943
177962
  options: {
177944
177963
  mode: "open",
@@ -179477,8 +179496,12 @@ function cye() {
179477
179496
  transition-duration: var(--drawer-transition-duration);
179478
179497
  transition-timing-function: var(--drawer-transition-mode);
179479
179498
  transition-property: var(--drawer-transition-property);
179499
+ padding: 0;
179500
+ padding-top: env(safe-area-inset-top);
179501
+ padding-bottom: env(safe-area-inset-bottom);
179480
179502
  border-radius: 0;
179481
179503
  flex-direction: column;
179504
+ margin: 0;
179482
179505
  display: flex;
179483
179506
  position: absolute;
179484
179507
  overflow: hidden;
@@ -179726,8 +179749,12 @@ function lye() {
179726
179749
  transition-duration: var(--drawer-transition-duration);
179727
179750
  transition-timing-function: var(--drawer-transition-mode);
179728
179751
  transition-property: var(--drawer-transition-property);
179752
+ padding: 0;
179753
+ padding-top: env(safe-area-inset-top);
179754
+ padding-bottom: env(safe-area-inset-bottom);
179729
179755
  border-radius: 0;
179730
179756
  flex-direction: column;
179757
+ margin: 0;
179731
179758
  display: flex;
179732
179759
  position: absolute;
179733
179760
  overflow: hidden;
@@ -179982,8 +180009,12 @@ function uye() {
179982
180009
  transition-duration: var(--drawer-transition-duration);
179983
180010
  transition-timing-function: var(--drawer-transition-mode);
179984
180011
  transition-property: var(--drawer-transition-property);
180012
+ padding: 0;
180013
+ padding-top: env(safe-area-inset-top);
180014
+ padding-bottom: env(safe-area-inset-bottom);
179985
180015
  border-radius: 0;
179986
180016
  flex-direction: column;
180017
+ margin: 0;
179987
180018
  display: flex;
179988
180019
  position: absolute;
179989
180020
  overflow: hidden;
@@ -180267,6 +180298,9 @@ var N2 = function(e, t, n, r) {
180267
180298
  onApplyTemplate() {
180268
180299
  super.onApplyTemplate(), O.current.findAncestor(this, z2) && (this.isComposed = !0);
180269
180300
  }
180301
+ onIsOpenChanged(e, t) {
180302
+ super.onIsOpenChanged(e, t), O.current.findAncestor(this, z2, { strict: !1 })?.updateDrawerState();
180303
+ }
180270
180304
  createVerticalDrawerRootStyles(e) {
180271
180305
  let t = this.getDrawerViewportInset(), n = this.createInsetSize(F2.FULL_SIZE, t);
180272
180306
  return {
@@ -180375,6 +180409,7 @@ N2([
180375
180409
  function dye() {
180376
180410
  return B`
180377
180411
  :host {
180412
+ --drawer-container-background-color: unset;
180378
180413
  --drawer-container-font-family: unset;
180379
180414
  --drawer-container-font-letter-spacing: unset;
180380
180415
  --drawer-container-font-line-height: unset;
@@ -180426,8 +180461,8 @@ function dye() {
180426
180461
  }
180427
180462
 
180428
180463
  :host {
180464
+ background-color: var(--drawer-container-background-color);
180429
180465
  z-index: 1;
180430
- box-sizing: border-box;
180431
180466
  -webkit-overflow-scrolling: touch;
180432
180467
  overflow: hidden;
180433
180468
  }
@@ -180465,6 +180500,7 @@ function dye() {
180465
180500
  function fye() {
180466
180501
  return B`
180467
180502
  :host {
180503
+ --drawer-container-background-color: var(--joy-scheme-surface);
180468
180504
  --drawer-container-font-family: unset;
180469
180505
  --drawer-container-font-letter-spacing: unset;
180470
180506
  --drawer-container-font-line-height: unset;
@@ -180516,8 +180552,8 @@ function fye() {
180516
180552
  }
180517
180553
 
180518
180554
  :host {
180555
+ background-color: var(--drawer-container-background-color);
180519
180556
  z-index: 1;
180520
- box-sizing: border-box;
180521
180557
  -webkit-overflow-scrolling: touch;
180522
180558
  overflow: hidden;
180523
180559
  }
@@ -180555,6 +180591,7 @@ function fye() {
180555
180591
  function pye() {
180556
180592
  return B`
180557
180593
  :host {
180594
+ --drawer-container-background-color: unset;
180558
180595
  --drawer-container-font-family: unset;
180559
180596
  --drawer-container-font-letter-spacing: unset;
180560
180597
  --drawer-container-font-line-height: unset;
@@ -180606,8 +180643,8 @@ function pye() {
180606
180643
  }
180607
180644
 
180608
180645
  :host {
180646
+ background-color: var(--drawer-container-background-color);
180609
180647
  z-index: 1;
180610
- box-sizing: border-box;
180611
180648
  -webkit-overflow-scrolling: touch;
180612
180649
  overflow: hidden;
180613
180650
  }
@@ -180656,8 +180693,9 @@ var L2 = function(e, t, n, r) {
180656
180693
  _content;
180657
180694
  _autoSize;
180658
180695
  _hasBackdrop;
180696
+ _isOpen;
180659
180697
  constructor() {
180660
- super(), this._drawer = null, this._content = null, this._autoSize = !1, this._hasBackdrop = !1, this._contentMarginChanged = new E(this, "contentMarginChanged", { bubbles: !1 }), this._resizeController = new Yz(this, { callback: () => this.updateContentMargins() });
180698
+ super(), this._drawer = null, this._content = null, this._autoSize = !1, this._hasBackdrop = !1, this._isOpen = !1, this._contentMarginChanged = new E(this, "contentMarginChanged", { bubbles: !1 }), this._resizeController = new Yz(this, { callback: () => this.updateContentMargins() });
180661
180699
  }
180662
180700
  static get is() {
180663
180701
  return "mosaik-drawer-container";
@@ -180674,6 +180712,12 @@ var L2 = function(e, t, n, r) {
180674
180712
  set hasBackdrop(e) {
180675
180713
  this._hasBackdrop !== e && (this._hasBackdrop = e, this.requestUpdate("hasBackdrop"));
180676
180714
  }
180715
+ get isOpen() {
180716
+ return this._isOpen;
180717
+ }
180718
+ set isOpen(e) {
180719
+ this._isOpen !== e && (this._isOpen = e, this.classList.toggle("drawer-container-has-open", e), this.requestUpdate("isOpen"));
180720
+ }
180677
180721
  get contentMarginChanged() {
180678
180722
  return this._contentMarginChanged;
180679
180723
  }
@@ -180689,8 +180733,12 @@ var L2 = function(e, t, n, r) {
180689
180733
  close() {
180690
180734
  this._drawer?.close();
180691
180735
  }
180736
+ updateDrawerState() {
180737
+ let e = this._drawer?.isOpen ?? !1;
180738
+ this.isOpen = e, this._content && (this._content.isOpen = e), this.updateContentMargins();
180739
+ }
180692
180740
  onApplyTemplate() {
180693
- super.onApplyTemplate(), this._drawer = O.current.findDescendant(this, I2), this._content = O.current.findDescendant(this, h2), this._drawer?.parentElement === this && (this._drawer.on("opened", () => this.updateContentMargins()), this._drawer.on("closed", () => this.updateContentMargins()), this.updateContentMargins());
180741
+ super.onApplyTemplate(), this._drawer = O.current.findDescendant(this, I2), this._content = O.current.findDescendant(this, h2), this._drawer?.parentElement === this && (this._drawer.on("opened", () => this.updateContentMargins()), this._drawer.on("closed", () => this.updateContentMargins()), this.updateDrawerState());
180694
180742
  }
180695
180743
  updateContentMargins() {
180696
180744
  this.updateComplete.then(() => {
@@ -180731,6 +180779,13 @@ L2([
180731
180779
  R2("design:type", Boolean),
180732
180780
  R2("design:paramtypes", [Boolean])
180733
180781
  ], z2.prototype, "hasBackdrop", null), L2([
180782
+ A({
180783
+ type: Boolean,
180784
+ useDefault: !0
180785
+ }),
180786
+ R2("design:type", Boolean),
180787
+ R2("design:paramtypes", [Boolean])
180788
+ ], z2.prototype, "isOpen", null), L2([
180734
180789
  k({ eventName: "contentMarginChanged" }),
180735
180790
  R2("design:type", Object),
180736
180791
  R2("design:paramtypes", [])
@@ -199246,7 +199301,9 @@ var n6;
199246
199301
  variant: Gy.DEFAULTS.variant,
199247
199302
  appearance: Jx.DEFAULTS.appearance,
199248
199303
  total: 0,
199304
+ totalRecords: 0,
199249
199305
  size: 20,
199306
+ rows: 20,
199250
199307
  sizes: [
199251
199308
  20,
199252
199309
  50,
@@ -199254,7 +199311,14 @@ var n6;
199254
199311
  ],
199255
199312
  showSizes: !1,
199256
199313
  currentPage: 0,
199257
- showFirstLastButtons: !0
199314
+ first: 0,
199315
+ pageLinkSize: 5,
199316
+ alwaysShow: !0,
199317
+ showPageLinks: !0,
199318
+ showFirstLastIcon: !0,
199319
+ showFirstLastButtons: !0,
199320
+ showCurrentPageReport: !1,
199321
+ currentPageReportTemplate: "{currentPage} of {totalPages}"
199258
199322
  };
199259
199323
  })(n6 ||= {});
199260
199324
  //#endregion
@@ -199266,8 +199330,9 @@ var r6 = class extends iL {
199266
199330
  _nextPageLabel;
199267
199331
  _previousPageLabel;
199268
199332
  _itemsPerPageLabel;
199333
+ _pageLabel;
199269
199334
  constructor(e) {
199270
- super(e), this._rangeLabel = "{0}-{1} of {2}", this._firstPageLabel = "First page", this._lastPageLabel = "Last page", this._nextPageLabel = "Next page", this._previousPageLabel = "Previous page", this._itemsPerPageLabel = "Items per page";
199335
+ super(e), this._rangeLabel = "{0}-{1} of {2}", this._firstPageLabel = "First page", this._lastPageLabel = "Last page", this._nextPageLabel = "Next page", this._previousPageLabel = "Previous page", this._itemsPerPageLabel = "Items per page", this._pageLabel = "Page {0}";
199271
199336
  }
199272
199337
  get rangeLabel() {
199273
199338
  return this._rangeLabel;
@@ -199305,17 +199370,23 @@ var r6 = class extends iL {
199305
199370
  set itemsPerPageLabel(e) {
199306
199371
  this._itemsPerPageLabel = e;
199307
199372
  }
199373
+ get pageLabel() {
199374
+ return this._pageLabel;
199375
+ }
199376
+ set pageLabel(e) {
199377
+ this._pageLabel = e;
199378
+ }
199308
199379
  };
199309
199380
  //#endregion
199310
199381
  //#region ../mosaik-elements-foundation/dist/Controls/Components/Primitives/Paginator/PaginatorElementTemplate.js
199311
199382
  function CSe(e) {
199312
199383
  return V`
199313
- <mosaik-stack part="container"
199314
- .lang="${e.lang}"
199315
- .dir="${e.dir}"
199316
- .gap="${"8px"}"
199317
- .verticalAlignment="${Zb.Center}">
199318
- ${U(e.showFirstLastButtons, () => V`
199384
+ ${U(e.isVisible, () => V`
199385
+ <div part="container navigation-container"
199386
+ lang="${e.lang}"
199387
+ dir="${e.dir}"
199388
+ role="navigation">
199389
+ ${U(e.showFirstLastIcon, () => V`
199319
199390
  <mosaik-button part="first"
199320
199391
  .lang="${e.lang}"
199321
199392
  .dir="${e.dir}"
@@ -199335,8 +199406,10 @@ function CSe(e) {
199335
199406
  .disabled="${e.disabled || !e.hasPreviousPage}"
199336
199407
  .ariaLabel="${e.intl.previousPageLabel}"
199337
199408
  @click="${() => e.goToPreviousPage()}"></mosaik-button>
199338
- <mosaik-stack part="pages-container" .lang="${e.lang}"
199339
- .dir="${e.dir}">
199409
+ ${U(e.showPageLinks, () => V`
199410
+ <div part="pages-container page-links"
199411
+ lang="${e.lang}"
199412
+ dir="${e.dir}">
199340
199413
  ${Pb(e.calculatePages(e.total, e.size), (e) => e, (t) => V`
199341
199414
  <mosaik-button part="page"
199342
199415
  .lang="${e.lang}"
@@ -199345,11 +199418,12 @@ function CSe(e) {
199345
199418
  .appearance="${t - 1 === e.currentPage ? e.appearance : q.Plain}"
199346
199419
  .variant="${t - 1 === e.currentPage ? e.variant : Uy.Default}"
199347
199420
  .disabled="${e.disabled}"
199348
- .ariaLabel="${"Page " + t}"
199421
+ .ariaLabel="${CR(e.intl.pageLabel, t)}"
199349
199422
  .ariaCurrent="${t - 1 === e.currentPage ? "page" : null}"
199350
199423
  @click="${() => e.goToPage(t - 1)}"></mosaik-button>
199351
199424
  `)}
199352
- </mosaik-stack>
199425
+ </div>
199426
+ `)}
199353
199427
  <mosaik-button part="next"
199354
199428
  .lang="${e.lang}"
199355
199429
  .dir="${e.dir}"
@@ -199359,7 +199433,7 @@ function CSe(e) {
199359
199433
  .disabled="${e.disabled || !e.hasNextPage}"
199360
199434
  .ariaLabel="${e.intl.nextPageLabel}"
199361
199435
  @click="${() => e.goToNextPage()}"></mosaik-button>
199362
- ${U(e.showFirstLastButtons, () => V`
199436
+ ${U(e.showFirstLastIcon, () => V`
199363
199437
  <mosaik-button part="last"
199364
199438
  .lang="${e.lang}"
199365
199439
  .dir="${e.dir}"
@@ -199372,17 +199446,18 @@ function CSe(e) {
199372
199446
  `)}
199373
199447
 
199374
199448
  ${U(e.showSizes, () => V`
199375
- <mosaik-stack part="size-selector-container"
199376
- .lang="${e.lang}"
199377
- .dir="${e.dir}">
199378
- <mosaik-select part="size-selector" .lang="${e.lang}"
199449
+ <div part="size-selector-container page-size-container"
199450
+ lang="${e.lang}"
199451
+ dir="${e.dir}">
199452
+ <mosaik-select part="size-selector"
199453
+ .lang="${e.lang}"
199379
199454
  .dir="${e.dir}"
199380
- .appearance="${e.appearance}"
199455
+ .appearance="${"plain"}"
199381
199456
  .variant="${e.variant}"
199382
199457
  .disabled="${e.disabled}"
199383
199458
  .value="${e.size.toString()}"
199384
199459
  .ariaLabel="${e.intl.itemsPerPageLabel}"
199385
- @selectionChanged="${(t) => e.changePageSize(t.detail.newValue.value)}">
199460
+ @selectionChanged="${(t) => e.changePageSize(Number(t.detail.newValue.value))}">
199386
199461
  ${Pb(e.sizes, (e) => e, (t) => V`
199387
199462
  <mosaik-select-item .lang="${e.lang}"
199388
199463
  .dir="${e.dir}"
@@ -199390,17 +199465,21 @@ function CSe(e) {
199390
199465
  .label="${t.toString()}"></mosaik-select-item>
199391
199466
  `)}
199392
199467
  </mosaik-select>
199393
- </mosaik-stack>
199468
+ </div>
199394
199469
  `)}
199395
- </mosaik-stack>
199396
- <mosaik-stack part="range-container"
199397
- .lang="${e.lang}"
199398
- .dir="${e.dir}">
199399
- <mosaik-text part="range"
199400
- .lang="${e.lang}"
199401
- .dir="${e.dir}"
199402
- .text="${CR(e.intl.rangeLabel, e.rangeStart, e.rangeEnd, e.total)}"></mosaik-text>
199403
- </mosaik-stack>
199470
+ ${U(e.showCurrentPageReport, () => V`
199471
+ <div part="range-container report-container"
199472
+ lang="${e.lang}"
199473
+ dir="${e.dir}">
199474
+ <mosaik-text part="range current-page-report"
199475
+ .lang="${e.lang}"
199476
+ .dir="${e.dir}"
199477
+ .ariaLive="${"polite"}"
199478
+ .text="${e.currentPageReport}"></mosaik-text>
199479
+ </div>
199480
+ `)}
199481
+ </div>
199482
+ `)}
199404
199483
  `;
199405
199484
  }
199406
199485
  //#endregion
@@ -199459,12 +199538,38 @@ function wSe() {
199459
199538
  display: none !important;
199460
199539
  }
199461
199540
 
199462
- :host [part^="page"], :host [part="page more"] {
199541
+ :host [part~="container"] {
199542
+ flex-wrap: nowrap;
199543
+ align-items: center;
199544
+ gap: 8px;
199545
+ min-width: 0;
199546
+ display: flex;
199547
+ }
199548
+
199549
+ :host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
199550
+ flex: none;
199551
+ align-items: center;
199552
+ min-width: 0;
199553
+ display: flex;
199554
+ }
199555
+
199556
+ :host [part~="pages-container"], :host [part~="range-container"] {
199557
+ flex-wrap: nowrap;
199558
+ }
199559
+
199560
+ :host [part~="range"] {
199561
+ white-space: nowrap;
199562
+ }
199563
+
199564
+ :host [part~="page"] {
199565
+ flex: none;
199463
199566
  min-width: 40px;
199464
199567
  }
199465
199568
 
199466
- :host [part="size-selector"] {
199569
+ :host [part~="size-selector"] {
199570
+ flex: none;
199467
199571
  width: 160px;
199572
+ min-width: 160px;
199468
199573
  }
199469
199574
 
199470
199575
  `;
@@ -199525,12 +199630,38 @@ function TSe() {
199525
199630
  display: none !important;
199526
199631
  }
199527
199632
 
199528
- :host [part^="page"], :host [part="page more"] {
199633
+ :host [part~="container"] {
199634
+ flex-wrap: nowrap;
199635
+ align-items: center;
199636
+ gap: 8px;
199637
+ min-width: 0;
199638
+ display: flex;
199639
+ }
199640
+
199641
+ :host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
199642
+ flex: none;
199643
+ align-items: center;
199644
+ min-width: 0;
199645
+ display: flex;
199646
+ }
199647
+
199648
+ :host [part~="pages-container"], :host [part~="range-container"] {
199649
+ flex-wrap: nowrap;
199650
+ }
199651
+
199652
+ :host [part~="range"] {
199653
+ white-space: nowrap;
199654
+ }
199655
+
199656
+ :host [part~="page"] {
199657
+ flex: none;
199529
199658
  min-width: 40px;
199530
199659
  }
199531
199660
 
199532
- :host [part="size-selector"] {
199661
+ :host [part~="size-selector"] {
199662
+ flex: none;
199533
199663
  width: 160px;
199664
+ min-width: 160px;
199534
199665
  }
199535
199666
 
199536
199667
  `;
@@ -199591,12 +199722,38 @@ function ESe() {
199591
199722
  display: none !important;
199592
199723
  }
199593
199724
 
199594
- :host [part^="page"], :host [part="page more"] {
199725
+ :host [part~="container"] {
199726
+ flex-wrap: nowrap;
199727
+ align-items: center;
199728
+ gap: 8px;
199729
+ min-width: 0;
199730
+ display: flex;
199731
+ }
199732
+
199733
+ :host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
199734
+ flex: none;
199735
+ align-items: center;
199736
+ min-width: 0;
199737
+ display: flex;
199738
+ }
199739
+
199740
+ :host [part~="pages-container"], :host [part~="range-container"] {
199741
+ flex-wrap: nowrap;
199742
+ }
199743
+
199744
+ :host [part~="range"] {
199745
+ white-space: nowrap;
199746
+ }
199747
+
199748
+ :host [part~="page"] {
199749
+ flex: none;
199595
199750
  min-width: 40px;
199596
199751
  }
199597
199752
 
199598
- :host [part="size-selector"] {
199753
+ :host [part~="size-selector"] {
199754
+ flex: none;
199599
199755
  width: 160px;
199756
+ min-width: 160px;
199600
199757
  }
199601
199758
 
199602
199759
  `;
@@ -199619,9 +199776,14 @@ var i6 = function(e, t, n, r) {
199619
199776
  _sizes;
199620
199777
  _showSizes;
199621
199778
  _currentPage;
199622
- _showFirstLastButtons;
199779
+ _pageLinkSize;
199780
+ _alwaysShow;
199781
+ _showPageLinks;
199782
+ _showFirstLastIcon;
199783
+ _showCurrentPageReport;
199784
+ _currentPageReportTemplate;
199623
199785
  constructor() {
199624
- super(), this._intl = new OI(this, { factory: () => new r6() }), this._pageChanged = new E(this, "pageChanged"), this._pageSizeChanged = new E(this, "pageSizeChanged"), this._total = n6.DEFAULTS.total, this._size = n6.DEFAULTS.size, this._sizes = n6.DEFAULTS.sizes, this._showSizes = n6.DEFAULTS.showSizes, this._currentPage = n6.DEFAULTS.currentPage, this._showFirstLastButtons = n6.DEFAULTS.showFirstLastButtons;
199786
+ super(), this._intl = new OI(this, { factory: () => new r6() }), this._pageChanged = new E(this, "pageChanged"), this._pageSizeChanged = new E(this, "pageSizeChanged"), this._total = n6.DEFAULTS.total, this._size = n6.DEFAULTS.size, this._sizes = n6.DEFAULTS.sizes, this._showSizes = n6.DEFAULTS.showSizes, this._currentPage = n6.DEFAULTS.currentPage, this._pageLinkSize = n6.DEFAULTS.pageLinkSize, this._alwaysShow = n6.DEFAULTS.alwaysShow, this._showPageLinks = n6.DEFAULTS.showPageLinks, this._showFirstLastIcon = n6.DEFAULTS.showFirstLastIcon, this._showCurrentPageReport = n6.DEFAULTS.showCurrentPageReport, this._currentPageReportTemplate = n6.DEFAULTS.currentPageReportTemplate;
199625
199787
  }
199626
199788
  static get is() {
199627
199789
  return "mosaik-paginator";
@@ -199630,13 +199792,27 @@ var i6 = function(e, t, n, r) {
199630
199792
  return this._total;
199631
199793
  }
199632
199794
  set total(e) {
199633
- this._total !== e && (this._total = e, this.requestUpdate("total"));
199795
+ let t = this.normalizeNonNegativeNumber(e);
199796
+ this._total !== t && (this._total = t, this.clampCurrentPage(), this.requestUpdate("total"), this.requestUpdate("totalRecords"));
199797
+ }
199798
+ get totalRecords() {
199799
+ return this._total;
199800
+ }
199801
+ set totalRecords(e) {
199802
+ this.total = e, this.requestUpdate("totalRecords");
199634
199803
  }
199635
199804
  get size() {
199636
199805
  return this._size;
199637
199806
  }
199638
199807
  set size(e) {
199639
- this._size !== e && (this._size = e, this.requestUpdate("size"));
199808
+ let t = this.normalizeNonNegativeNumber(e);
199809
+ this._size !== t && (this._size = t, this.clampCurrentPage(), this.requestUpdate("size"), this.requestUpdate("rows"), this.requestUpdate("first"));
199810
+ }
199811
+ get rows() {
199812
+ return this._size;
199813
+ }
199814
+ set rows(e) {
199815
+ this.size = e, this.requestUpdate("rows");
199640
199816
  }
199641
199817
  get sizes() {
199642
199818
  return this._sizes;
@@ -199660,14 +199836,58 @@ var i6 = function(e, t, n, r) {
199660
199836
  return this._currentPage;
199661
199837
  }
199662
199838
  set currentPage(e) {
199663
- let t = Math.max(0, Math.min(e, this.totalPages - 1));
199664
- this._currentPage !== t && (this._currentPage = t, this.requestUpdate("currentPage"));
199839
+ let t = this.normalizePageIndex(e);
199840
+ this._currentPage !== t && (this._currentPage = t, this.requestUpdate("currentPage"), this.requestUpdate("first"));
199841
+ }
199842
+ get first() {
199843
+ return this._currentPage * this._size;
199844
+ }
199845
+ set first(e) {
199846
+ let t = this.normalizeNonNegativeNumber(e), n = this._size > 0 ? Math.floor(t / this._size) : 0;
199847
+ this._currentPage !== this.normalizePageIndex(n) && (this.currentPage = n, this.requestUpdate("first"));
199848
+ }
199849
+ get pageLinkSize() {
199850
+ return this._pageLinkSize;
199851
+ }
199852
+ set pageLinkSize(e) {
199853
+ let t = this.normalizeNonNegativeNumber(e);
199854
+ this._pageLinkSize !== t && (this._pageLinkSize = t, this.requestUpdate("pageLinkSize"));
199855
+ }
199856
+ get alwaysShow() {
199857
+ return this._alwaysShow;
199858
+ }
199859
+ set alwaysShow(e) {
199860
+ this._alwaysShow !== e && (this._alwaysShow = e, this.requestUpdate("alwaysShow"));
199861
+ }
199862
+ get showPageLinks() {
199863
+ return this._showPageLinks;
199864
+ }
199865
+ set showPageLinks(e) {
199866
+ this._showPageLinks !== e && (this._showPageLinks = e, this.requestUpdate("showPageLinks"));
199867
+ }
199868
+ get showFirstLastIcon() {
199869
+ return this._showFirstLastIcon;
199870
+ }
199871
+ set showFirstLastIcon(e) {
199872
+ this._showFirstLastIcon !== e && (this._showFirstLastIcon = e, this.requestUpdate("showFirstLastIcon"), this.requestUpdate("showFirstLastButtons"));
199665
199873
  }
199666
199874
  get showFirstLastButtons() {
199667
- return this._showFirstLastButtons;
199875
+ return this._showFirstLastIcon;
199668
199876
  }
199669
199877
  set showFirstLastButtons(e) {
199670
- this._showFirstLastButtons !== e && (this._showFirstLastButtons = e, this.requestUpdate("showFirstLastButtons"));
199878
+ this.showFirstLastIcon = e, this.requestUpdate("showFirstLastButtons");
199879
+ }
199880
+ get showCurrentPageReport() {
199881
+ return this._showCurrentPageReport;
199882
+ }
199883
+ set showCurrentPageReport(e) {
199884
+ this._showCurrentPageReport !== e && (this._showCurrentPageReport = e, this.requestUpdate("showCurrentPageReport"));
199885
+ }
199886
+ get currentPageReportTemplate() {
199887
+ return this._currentPageReportTemplate;
199888
+ }
199889
+ set currentPageReportTemplate(e) {
199890
+ this._currentPageReportTemplate !== e && (this._currentPageReportTemplate = e, this.requestUpdate("currentPageReportTemplate"));
199671
199891
  }
199672
199892
  get totalPages() {
199673
199893
  return this._total <= 0 || this._size <= 0 ? 0 : Math.ceil(this._total / this._size);
@@ -199684,6 +199904,12 @@ var i6 = function(e, t, n, r) {
199684
199904
  get hasNextPage() {
199685
199905
  return this._currentPage < this.totalPages - 1;
199686
199906
  }
199907
+ get isVisible() {
199908
+ return this._alwaysShow || this.totalPages > 1;
199909
+ }
199910
+ get currentPageReport() {
199911
+ return this._currentPageReportTemplate.replace("{currentPage}", String(this.currentPageNumber)).replace("{totalPages}", String(this.totalPages)).replace("{rows}", String(this._size)).replace("{first}", String(this._total > 0 ? this.first + 1 : 0)).replace("{last}", String(this.rangeEnd)).replace("{totalRecords}", String(this._total));
199912
+ }
199687
199913
  get pageChanged() {
199688
199914
  return this._pageChanged;
199689
199915
  }
@@ -199705,26 +199931,47 @@ var i6 = function(e, t, n, r) {
199705
199931
  goToPage(e) {
199706
199932
  if (this.disabled) return;
199707
199933
  let t = this._currentPage;
199708
- this.currentPage = e, t !== this._currentPage && this._pageChanged.emit({
199709
- pageIndex: this._currentPage,
199710
- pageSize: this._size,
199711
- totalItems: this._total
199712
- });
199934
+ this.currentPage = e, t !== this._currentPage && this._pageChanged.emit(this.createPaginatedEventDetail());
199713
199935
  }
199714
199936
  changePageSize(e) {
199715
- if (this.disabled || e <= 0) return;
199716
- let t = this._size;
199717
- this._size = e, this._currentPage = 0, this.requestUpdate("size"), this.requestUpdate("currentPage"), t !== this._size && this._pageSizeChanged.emit({
199718
- pageIndex: this._currentPage,
199719
- pageSize: this._size,
199720
- totalItems: this._total
199721
- });
199937
+ let t = this.normalizeNonNegativeNumber(e);
199938
+ if (this.disabled || t <= 0) return;
199939
+ let n = this._size;
199940
+ this._size = t, this._currentPage = 0, this.requestUpdate("size"), this.requestUpdate("rows"), this.requestUpdate("currentPage"), this.requestUpdate("first"), n !== this._size && this._pageSizeChanged.emit(this.createPaginatedEventDetail());
199722
199941
  }
199723
199942
  calculatePages(e, t) {
199724
199943
  if (e <= 0 || t <= 0) return [];
199725
- let n = Math.ceil(e / t), r = [];
199726
- for (let e = 1; e <= n; e++) r.push(e);
199727
- return r;
199944
+ let n = Math.ceil(e / t), r = Math.min(this._pageLinkSize, n);
199945
+ if (r <= 0) return [];
199946
+ let i = [], a = Math.max(0, Math.ceil(this._currentPage - r / 2)), o = Math.min(n - 1, a + r - 1), s = this._pageLinkSize - (o - a + 1);
199947
+ a = Math.max(0, a - s);
199948
+ for (let e = a; e <= o; e++) i.push(e + 1);
199949
+ return i;
199950
+ }
199951
+ get currentPageNumber() {
199952
+ return this.totalPages > 0 ? this._currentPage + 1 : 0;
199953
+ }
199954
+ clampCurrentPage() {
199955
+ let e = this.normalizePageIndex(this._currentPage);
199956
+ this._currentPage !== e && (this._currentPage = e, this.requestUpdate("currentPage"), this.requestUpdate("first"));
199957
+ }
199958
+ normalizeNonNegativeNumber(e) {
199959
+ return Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0;
199960
+ }
199961
+ normalizePageIndex(e) {
199962
+ return Number.isFinite(e) ? Math.max(0, Math.min(Math.floor(e), Math.max(this.totalPages - 1, 0))) : 0;
199963
+ }
199964
+ createPaginatedEventDetail() {
199965
+ return {
199966
+ pageIndex: this._currentPage,
199967
+ page: this._currentPage,
199968
+ first: this.first,
199969
+ pageSize: this._size,
199970
+ rows: this._size,
199971
+ pageCount: this.totalPages,
199972
+ totalItems: this._total,
199973
+ totalRecords: this._total
199974
+ };
199728
199975
  }
199729
199976
  };
199730
199977
  i6([
@@ -199735,7 +199982,15 @@ i6([
199735
199982
  A({ type: Number }),
199736
199983
  a6("design:type", Number),
199737
199984
  a6("design:paramtypes", [Number])
199985
+ ], o6.prototype, "totalRecords", null), i6([
199986
+ A({ type: Number }),
199987
+ a6("design:type", Number),
199988
+ a6("design:paramtypes", [Number])
199738
199989
  ], o6.prototype, "size", null), i6([
199990
+ A({ type: Number }),
199991
+ a6("design:type", Number),
199992
+ a6("design:paramtypes", [Number])
199993
+ ], o6.prototype, "rows", null), i6([
199739
199994
  A({ type: Array }),
199740
199995
  a6("design:type", Array),
199741
199996
  a6("design:paramtypes", [Array])
@@ -199755,6 +200010,35 @@ i6([
199755
200010
  a6("design:type", Number),
199756
200011
  a6("design:paramtypes", [Number])
199757
200012
  ], o6.prototype, "currentPage", null), i6([
200013
+ A({ type: Number }),
200014
+ a6("design:type", Number),
200015
+ a6("design:paramtypes", [Number])
200016
+ ], o6.prototype, "first", null), i6([
200017
+ A({ type: Number }),
200018
+ a6("design:type", Number),
200019
+ a6("design:paramtypes", [Number])
200020
+ ], o6.prototype, "pageLinkSize", null), i6([
200021
+ A({
200022
+ type: Boolean,
200023
+ useDefault: !0
200024
+ }),
200025
+ a6("design:type", Boolean),
200026
+ a6("design:paramtypes", [Boolean])
200027
+ ], o6.prototype, "alwaysShow", null), i6([
200028
+ A({
200029
+ type: Boolean,
200030
+ useDefault: !0
200031
+ }),
200032
+ a6("design:type", Boolean),
200033
+ a6("design:paramtypes", [Boolean])
200034
+ ], o6.prototype, "showPageLinks", null), i6([
200035
+ A({
200036
+ type: Boolean,
200037
+ useDefault: !0
200038
+ }),
200039
+ a6("design:type", Boolean),
200040
+ a6("design:paramtypes", [Boolean])
200041
+ ], o6.prototype, "showFirstLastIcon", null), i6([
199758
200042
  A({
199759
200043
  type: Boolean,
199760
200044
  useDefault: !0
@@ -199762,6 +200046,17 @@ i6([
199762
200046
  a6("design:type", Boolean),
199763
200047
  a6("design:paramtypes", [Boolean])
199764
200048
  ], o6.prototype, "showFirstLastButtons", null), i6([
200049
+ A({
200050
+ type: Boolean,
200051
+ useDefault: !0
200052
+ }),
200053
+ a6("design:type", Boolean),
200054
+ a6("design:paramtypes", [Boolean])
200055
+ ], o6.prototype, "showCurrentPageReport", null), i6([
200056
+ A({ type: String }),
200057
+ a6("design:type", String),
200058
+ a6("design:paramtypes", [String])
200059
+ ], o6.prototype, "currentPageReportTemplate", null), i6([
199765
200060
  k({ eventName: "pageChanged" }),
199766
200061
  a6("design:type", Object),
199767
200062
  a6("design:paramtypes", [])
@@ -229458,13 +229753,14 @@ R7([
229458
229753
  function aDe(e) {
229459
229754
  return V`
229460
229755
  <mosaik-theme2 .theme="${e.theme}">
229461
- <mosaik-drawer-container .lang="${e.lang}"
229756
+ <mosaik-drawer-container part="root"
229757
+ .lang="${e.lang}"
229462
229758
  .dir="${e.dir}"
229463
229759
  .fit="${nx.Both}"
229464
229760
  .hasBackdrop="${e.isMobile}">
229465
229761
  ${U(e.hasNav, () => V`
229466
- <mosaik-drawer slot="drawer"
229467
- part="drawer"
229762
+ <mosaik-drawer part="nav"
229763
+ slot="drawer"
229468
229764
  .lang="${e.lang}"
229469
229765
  .dir="${e.dir}"
229470
229766
  .isOpen="${e.isNavOpen}"
@@ -229472,12 +229768,13 @@ function aDe(e) {
229472
229768
  .hasBackdrop="${e.isMobile}"
229473
229769
  .hasShadow="${e.isMobile}"
229474
229770
  .clickOutsideToClose="${e.isMobile}">
229475
- <nav part="nav">
229771
+ <nav part="nav-body">
229476
229772
  <slot name="nav"></slot>
229477
229773
  </nav>
229478
229774
  </mosaik-drawer>
229479
229775
  `)}
229480
- <mosaik-drawer-content slot="content"
229776
+ <mosaik-drawer-content part="view"
229777
+ slot="content"
229481
229778
  .lang="${e.lang}"
229482
229779
  .dir="${e.dir}">
229483
229780
  <slot name="header"></slot>
@@ -229497,7 +229794,7 @@ function aDe(e) {
229497
229794
  name="headerActions"></slot>
229498
229795
  </mosaik-app-header>
229499
229796
  `)}
229500
- <div part="content">
229797
+ <div part="body">
229501
229798
  <main part="main">
229502
229799
  <slot name="content"></slot>
229503
229800
  </main>
@@ -230101,10 +230398,11 @@ function dDe() {
230101
230398
  return B`
230102
230399
  :host {
230103
230400
  --app-background-color: var(--cosmopolitan-scheme-background);
230401
+ --app-body-offset-top: unset;
230402
+ --app-border-color: unset;
230104
230403
  --app-border-radius: unset;
230105
- --app-content-offset-top: unset;
230106
- --app-drawer-height: 100%;
230107
- --app-drawer-width: 320px;
230404
+ --app-border-style: solid;
230405
+ --app-border-width: unset;
230108
230406
  --app-font-family: var(--cosmopolitan-typography-body1-font-family);
230109
230407
  --app-font-letter-spacing: var(--cosmopolitan-typography-body1-letter-spacing);
230110
230408
  --app-font-line-height: var(--cosmopolitan-typography-body1-line-height);
@@ -230115,6 +230413,8 @@ function dDe() {
230115
230413
  --app-foreground-color: var(--cosmopolitan-scheme-foreground);
230116
230414
  --app-gap: var(--cosmopolitan-layout-space);
230117
230415
  --app-line-thickness: var(--cosmopolitan-layout-thickness);
230416
+ --app-nav-height: 100%;
230417
+ --app-nav-width: 320px;
230118
230418
  --app-padding-bottom: unset;
230119
230419
  --app-padding-left: unset;
230120
230420
  --app-padding-right: unset;
@@ -230129,6 +230429,10 @@ function dDe() {
230129
230429
  --app-transition-mode: ease;
230130
230430
  --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
230131
230431
  --app-translate: none;
230432
+ --app-view-border-color: unset;
230433
+ --app-view-border-radius: unset;
230434
+ --app-view-border-style: solid;
230435
+ --app-view-border-width: unset;
230132
230436
  }
230133
230437
 
230134
230438
  @media screen and (prefers-reduced-motion: reduce) {
@@ -230171,7 +230475,10 @@ function dDe() {
230171
230475
  transition-property: var(--app-transition-property);
230172
230476
  background-color: var(--app-background-color);
230173
230477
  color: var(--app-foreground-color);
230478
+ border-color: var(--app-border-color);
230174
230479
  border-radius: var(--app-border-radius);
230480
+ border-style: var(--app-border-style);
230481
+ border-width: var(--app-border-width);
230175
230482
  width: 100vw;
230176
230483
  height: 100vh;
230177
230484
  display: block;
@@ -230180,35 +230487,43 @@ function dDe() {
230180
230487
  overflow: clip;
230181
230488
  }
230182
230489
 
230183
- :host [part="drawer"] {
230184
- --drawer-width: var(--app-drawer-width);
230185
- --drawer-height: var(--app-drawer-height);
230490
+ :host [part="nav"] {
230491
+ --drawer-width: var(--app-nav-width);
230492
+ --drawer-height: var(--app-nav-height);
230493
+ --drawer-line-thickness: var(--app-line-thickness);
230186
230494
  --drawer-viewport-inset: 0px;
230187
230495
  }
230188
230496
 
230189
- :host [part="content"] {
230190
- height: calc(100% - var(--app-content-offset-top));
230497
+ :host [part="nav-body"] {
230498
+ height: 100%;
230499
+ width: var(--app-nav-width);
230500
+ flex-direction: column;
230501
+ flex: 1;
230502
+ display: flex;
230503
+ overflow: auto;
230504
+ }
230505
+
230506
+ :host [part="view"] {
230507
+ border-color: var(--app-view-border-color);
230508
+ border-radius: var(--app-view-border-radius);
230509
+ border-style: var(--app-view-border-style);
230510
+ border-width: var(--app-view-border-width);
230511
+ }
230512
+
230513
+ :host [part="body"] {
230514
+ height: calc(100% - var(--app-body-offset-top));
230191
230515
  flex-direction: row;
230192
230516
  width: 100%;
230193
230517
  display: flex;
230194
230518
  }
230195
230519
 
230196
- :host [part="content"] [part="main"] {
230520
+ :host [part="body"] [part="main"] {
230197
230521
  flex: 1;
230198
230522
  width: 100%;
230199
230523
  overflow: auto;
230200
230524
  }
230201
230525
 
230202
- :host [part="content"] [part="rail"] {
230203
- overflow: auto;
230204
- }
230205
-
230206
- :host [part="nav"] {
230207
- height: 100%;
230208
- width: var(--app-drawer-width);
230209
- flex-direction: column;
230210
- flex: 1;
230211
- display: flex;
230526
+ :host [part="body"] [part="rail"] {
230212
230527
  overflow: auto;
230213
230528
  }
230214
230529
 
@@ -230220,10 +230535,11 @@ function fDe() {
230220
230535
  return B`
230221
230536
  :host {
230222
230537
  --app-background-color: var(--joy-scheme-background);
230223
- --app-border-radius: none;
230224
- --app-content-offset-top: none;
230225
- --app-drawer-height: 100%;
230226
- --app-drawer-width: 320px;
230538
+ --app-body-offset-top: none;
230539
+ --app-border-color: unset;
230540
+ --app-border-radius: unset;
230541
+ --app-border-style: solid;
230542
+ --app-border-width: unset;
230227
230543
  --app-font-family: var(--joy-typography-body1-font-family);
230228
230544
  --app-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
230229
230545
  --app-font-line-height: var(--joy-typography-body1-line-height);
@@ -230234,6 +230550,8 @@ function fDe() {
230234
230550
  --app-foreground-color: var(--joy-scheme-foreground);
230235
230551
  --app-gap: var(--joy-layout-space);
230236
230552
  --app-line-thickness: var(--joy-layout-thickness);
230553
+ --app-nav-height: 100%;
230554
+ --app-nav-width: 320px;
230237
230555
  --app-padding-bottom: unset;
230238
230556
  --app-padding-left: unset;
230239
230557
  --app-padding-right: unset;
@@ -230248,6 +230566,10 @@ function fDe() {
230248
230566
  --app-transition-mode: ease;
230249
230567
  --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
230250
230568
  --app-translate: none;
230569
+ --app-view-border-color: unset;
230570
+ --app-view-border-radius: unset;
230571
+ --app-view-border-style: solid;
230572
+ --app-view-border-width: unset;
230251
230573
  }
230252
230574
 
230253
230575
  @media screen and (prefers-reduced-motion: reduce) {
@@ -230290,7 +230612,10 @@ function fDe() {
230290
230612
  transition-property: var(--app-transition-property);
230291
230613
  background-color: var(--app-background-color);
230292
230614
  color: var(--app-foreground-color);
230615
+ border-color: var(--app-border-color);
230293
230616
  border-radius: var(--app-border-radius);
230617
+ border-style: var(--app-border-style);
230618
+ border-width: var(--app-border-width);
230294
230619
  width: 100vw;
230295
230620
  height: 100vh;
230296
230621
  display: block;
@@ -230299,35 +230624,43 @@ function fDe() {
230299
230624
  overflow: clip;
230300
230625
  }
230301
230626
 
230302
- :host [part="drawer"] {
230303
- --drawer-width: var(--app-drawer-width);
230304
- --drawer-height: var(--app-drawer-height);
230627
+ :host [part="nav"] {
230628
+ --drawer-width: var(--app-nav-width);
230629
+ --drawer-height: var(--app-nav-height);
230630
+ --drawer-line-thickness: var(--app-line-thickness);
230305
230631
  --drawer-viewport-inset: 0px;
230306
230632
  }
230307
230633
 
230308
- :host [part="content"] {
230309
- height: calc(100% - var(--app-content-offset-top));
230634
+ :host [part="nav-body"] {
230635
+ height: 100%;
230636
+ width: var(--app-nav-width);
230637
+ flex-direction: column;
230638
+ flex: 1;
230639
+ display: flex;
230640
+ overflow: auto;
230641
+ }
230642
+
230643
+ :host [part="view"] {
230644
+ border-color: var(--app-view-border-color);
230645
+ border-radius: var(--app-view-border-radius);
230646
+ border-style: var(--app-view-border-style);
230647
+ border-width: var(--app-view-border-width);
230648
+ }
230649
+
230650
+ :host [part="body"] {
230651
+ height: calc(100% - var(--app-body-offset-top));
230310
230652
  flex-direction: row;
230311
230653
  width: 100%;
230312
230654
  display: flex;
230313
230655
  }
230314
230656
 
230315
- :host [part="content"] [part="main"] {
230657
+ :host [part="body"] [part="main"] {
230316
230658
  flex: 1;
230317
230659
  width: 100%;
230318
230660
  overflow: auto;
230319
230661
  }
230320
230662
 
230321
- :host [part="content"] [part="rail"] {
230322
- overflow: auto;
230323
- }
230324
-
230325
- :host [part="nav"] {
230326
- height: 100%;
230327
- width: var(--app-drawer-width);
230328
- flex-direction: column;
230329
- flex: 1;
230330
- display: flex;
230663
+ :host [part="body"] [part="rail"] {
230331
230664
  overflow: auto;
230332
230665
  }
230333
230666
 
@@ -230343,10 +230676,11 @@ function pDe() {
230343
230676
  return B`
230344
230677
  :host {
230345
230678
  --app-background-color: var(--memphis-scheme-background);
230679
+ --app-body-offset-top: unset;
230680
+ --app-border-color: unset;
230346
230681
  --app-border-radius: unset;
230347
- --app-content-offset-top: unset;
230348
- --app-drawer-height: 100%;
230349
- --app-drawer-width: 320px;
230682
+ --app-border-style: solid;
230683
+ --app-border-width: unset;
230350
230684
  --app-font-family: var(--memphis-typography-body1-font-family);
230351
230685
  --app-font-letter-spacing: var(--memphis-typography-body1-letter-spacing);
230352
230686
  --app-font-line-height: var(--memphis-typography-body1-line-height);
@@ -230357,6 +230691,8 @@ function pDe() {
230357
230691
  --app-foreground-color: var(--memphis-scheme-foreground);
230358
230692
  --app-gap: var(--memphis-layout-space);
230359
230693
  --app-line-thickness: var(--memphis-layout-thickness);
230694
+ --app-nav-height: 100%;
230695
+ --app-nav-width: 320px;
230360
230696
  --app-padding-bottom: unset;
230361
230697
  --app-padding-left: unset;
230362
230698
  --app-padding-right: unset;
@@ -230371,6 +230707,10 @@ function pDe() {
230371
230707
  --app-transition-mode: ease;
230372
230708
  --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
230373
230709
  --app-translate: none;
230710
+ --app-view-border-color: unset;
230711
+ --app-view-border-radius: unset;
230712
+ --app-view-border-style: solid;
230713
+ --app-view-border-width: unset;
230374
230714
  }
230375
230715
 
230376
230716
  @media screen and (prefers-reduced-motion: reduce) {
@@ -230413,7 +230753,10 @@ function pDe() {
230413
230753
  transition-property: var(--app-transition-property);
230414
230754
  background-color: var(--app-background-color);
230415
230755
  color: var(--app-foreground-color);
230756
+ border-color: var(--app-border-color);
230416
230757
  border-radius: var(--app-border-radius);
230758
+ border-style: var(--app-border-style);
230759
+ border-width: var(--app-border-width);
230417
230760
  width: 100vw;
230418
230761
  height: 100vh;
230419
230762
  display: block;
@@ -230422,35 +230765,43 @@ function pDe() {
230422
230765
  overflow: clip;
230423
230766
  }
230424
230767
 
230425
- :host [part="drawer"] {
230426
- --drawer-width: var(--app-drawer-width);
230427
- --drawer-height: var(--app-drawer-height);
230768
+ :host [part="nav"] {
230769
+ --drawer-width: var(--app-nav-width);
230770
+ --drawer-height: var(--app-nav-height);
230771
+ --drawer-line-thickness: var(--app-line-thickness);
230428
230772
  --drawer-viewport-inset: 0px;
230429
230773
  }
230430
230774
 
230431
- :host [part="content"] {
230432
- height: calc(100% - var(--app-content-offset-top));
230775
+ :host [part="nav-body"] {
230776
+ height: 100%;
230777
+ width: var(--app-nav-width);
230778
+ flex-direction: column;
230779
+ flex: 1;
230780
+ display: flex;
230781
+ overflow: auto;
230782
+ }
230783
+
230784
+ :host [part="view"] {
230785
+ border-color: var(--app-view-border-color);
230786
+ border-radius: var(--app-view-border-radius);
230787
+ border-style: var(--app-view-border-style);
230788
+ border-width: var(--app-view-border-width);
230789
+ }
230790
+
230791
+ :host [part="body"] {
230792
+ height: calc(100% - var(--app-body-offset-top));
230433
230793
  flex-direction: row;
230434
230794
  width: 100%;
230435
230795
  display: flex;
230436
230796
  }
230437
230797
 
230438
- :host [part="content"] [part="main"] {
230798
+ :host [part="body"] [part="main"] {
230439
230799
  flex: 1;
230440
230800
  width: 100%;
230441
230801
  overflow: auto;
230442
230802
  }
230443
230803
 
230444
- :host [part="content"] [part="rail"] {
230445
- overflow: auto;
230446
- }
230447
-
230448
- :host [part="nav"] {
230449
- height: 100%;
230450
- width: var(--app-drawer-width);
230451
- flex-direction: column;
230452
- flex: 1;
230453
- display: flex;
230804
+ :host [part="body"] [part="rail"] {
230454
230805
  overflow: auto;
230455
230806
  }
230456
230807
 
@@ -230538,7 +230889,7 @@ var W7 = function(e, t, n, r) {
230538
230889
  }
230539
230890
  }
230540
230891
  onApplyTemplate() {
230541
- super.onApplyTemplate(), this._contentElement = this.getTemplatePart("content"), this._headerElement = this.getTemplatePart("header"), this._drawerElement = this.getTemplatePart("drawer");
230892
+ super.onApplyTemplate(), this._contentElement = this.getTemplatePart("main"), this._headerElement = this.getTemplatePart("header"), this._drawerElement = this.getTemplatePart("nav");
230542
230893
  }
230543
230894
  onIsNavOpenPropertyChanged(e, t) {
230544
230895
  this._headerElement.isToggled = t ?? !1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@breadstone/mosaik-elements-svelte",
3
- "version": "0.1.47",
3
+ "version": "0.1.48",
4
4
  "description": "Mosaik elements for Svelte.",
5
5
  "license": "MIT",
6
6
  "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -11,8 +11,8 @@
11
11
  "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
12
12
  },
13
13
  "dependencies": {
14
- "@breadstone/mosaik-elements": "0.1.47",
15
- "@breadstone/mosaik-elements-foundation": "0.1.47",
14
+ "@breadstone/mosaik-elements": "0.1.48",
15
+ "@breadstone/mosaik-elements-foundation": "0.1.48",
16
16
  "tslib": "2.8.1"
17
17
  },
18
18
  "peerDependencies": {