@sbb-esta/lyne-elements-dev 4.9.0-dev.1774507634 → 4.9.0-dev.1774516800

package/{compact-paginator.component-JM9tD9ys.js → compact-paginator.component-CrdZ6dqt.js}

@@ -7,7 +7,7 @@ import "./screen-reader-only.js";
 import { styleMap as o } from "lit/directives/style-map.js";
 import { SbbPaginatorCommonElementMixin as s } from "./paginator/common/paginator-common.js";
 //#region src/elements/paginator/compact-paginator/compact-paginator.scss?lit&inline
-var c = e`:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-compact-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`, l = class extends s(n) {
+var c = e`:host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-compact-paginator-height)}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([size=m]){--sbb-compact-paginator-height: var(--sbb-size-element-m)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`, l = class extends s(n) {
 	static {
 		this.elementName = "sbb-compact-paginator";
 	}
@@ -35,9 +35,7 @@ var c = e`:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-ele
 	}
 	renderPaginator() {
 		return t`
-      <div class="sbb-compact-paginator">
-        ${this.pagerPosition === "start" ? t`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : t`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
-      </div>
+      ${this.pagerPosition === "start" ? t`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : t`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
     `;
 	}
 };

package/core/styles/core.scss

@@ -175,6 +175,12 @@ $theme: 'standard' !default;
 @use '../../option/optgroup/optgroup.global' as optgroup with (
   $theme: $theme
 );
+@use '../../paginator/paginator/paginator.global' as paginator with (
+  $theme: $theme
+);
+@use '../../paginator/compact-paginator/compact-paginator.global' as compact-paginator with (
+  $theme: $theme
+);
 @use '../../popover/popover.global' as popover-component with (
   $theme: $theme
 );
@@ -270,6 +276,8 @@ $theme: 'standard' !default;
   @include option-hint.base;
   @include optgroup.base;
   @include overlay.options-panel-overlay-variables--global($theme);
+  @include paginator.base;
+  @include compact-paginator.base;
   @include popover-component.base;
   @include radio-button-common.base;
   @include selection-group.base;

package/core.css

@@ -1588,6 +1588,19 @@ slot[name=error]::slotted(*) {
   --sbb-options-panel-background-color: var(--sbb-background-color-1);
   --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
+  --sbb-paginator-height: var(--sbb-size-element-m);
+  --sbb-paginator-page-color: var(--sbb-color-metal);
+  --sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-paginator-page-border-width: 0;
+  --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
+  --sbb-paginator-animation-easing: var(--sbb-animation-easing);
+  --sbb-paginator-font-size: var(--sbb-text-font-size-s);
+  --sbb-compact-paginator-height: var(--sbb-size-element-m);
+  --sbb-compact-paginator-color: var(--sbb-color-metal);
+  --sbb-compact-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
+  --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
+  --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
   --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
   --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
   --sbb-popover-border-radius: var(--sbb-border-radius-8x);