@sebgroup/green-core 3.14.0 → 3.15.0

package/components/avatar/avatar.component.js

@@ -83,6 +83,7 @@ __decorateClass([
 __decorateClass([
   styleExpressionProperty({
     ...forColorTokens("background"),
+    property: "--gds-avatar-background",
     selector: ".avatar"
   })
 ], GdsAvatar.prototype, "background", 2);

package/components/avatar/avatar.styles.js

@@ -42,7 +42,10 @@ const style = css`
       user-select: none;
       box-sizing: border-box;
       overflow: hidden;
-      background: var(--gds-sys-color-l3-neutral-01-2);
+      background: var(
+        --gds-avatar-background,
+        var(--gds-sys-color-l3-neutral-01-2)
+      );
       color: var(--gds-sys-color-content-neutral-01);
       width: var(--_size);
       height: var(--_size);

package/components/pagination/pagination.component.d.ts

@@ -67,6 +67,11 @@ export declare class GdsPagination extends GdsPagination_base {
      * Hide options
      */
     hideOptions: boolean;
+    /**
+     * Enables a compact navigation mode with only previous/next arrows
+     * and a centered "Page N" indicator.
+     */
+    simple: boolean;
     /**
      * Controls density mode on pagination
      * Accepts: `comfortable`, `compact`, `spacious`
@@ -74,7 +79,6 @@ export declare class GdsPagination extends GdsPagination_base {
     density: DensityMode;
     /**
      * The text summary to display on the left side (e.g. "1-10 of 100").
-     * If a slot named "label" is provided, this property is ignored.
      */
     label: string;
     private _elInput?;

package/components/pagination/pagination.component.js

@@ -4,7 +4,7 @@ import {
   __privateGet,
   __privateMethod
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _pageCount, pageCount_get, _config, config_get, _getVisiblePages, getVisiblePages_fn, _renderPageButton, renderPageButton_fn, _renderPageButtons, renderPageButtons_fn, _renderJumpFirstButton, renderJumpFirstButton_fn, _renderPreviousButton, renderPreviousButton_fn, _renderNextButton, renderNextButton_fn, _renderJumpLastButton, renderJumpLastButton_fn, _renderNavigationControls, renderNavigationControls_fn, _renderPageSizeOption, renderPageSizeOption_fn, _renderPageSizeMenu, renderPageSizeMenu_fn, _renderLabel, renderLabel_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeMenuClick, handlePageSizeMenuClick_fn, _handlePopoverStateChange, handlePopoverStateChange_fn, _handleCustomPageInput, handleCustomPageInput_fn;
+var _pageCount, pageCount_get, _config, config_get, _getVisiblePages, getVisiblePages_fn, _renderPageButton, renderPageButton_fn, _renderPageButtons, renderPageButtons_fn, _renderJumpFirstButton, renderJumpFirstButton_fn, _renderPreviousButton, renderPreviousButton_fn, _renderNextButton, renderNextButton_fn, _renderJumpLastButton, renderJumpLastButton_fn, _renderNavigationControls, renderNavigationControls_fn, _renderSimpleNavigationControls, renderSimpleNavigationControls_fn, _renderPageSizeOption, renderPageSizeOption_fn, _renderPageSizeMenu, renderPageSizeMenu_fn, _renderLabel, renderLabel_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeMenuClick, handlePageSizeMenuClick_fn, _handlePopoverStateChange, handlePopoverStateChange_fn, _handleCustomPageInput, handleCustomPageInput_fn;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -83,6 +83,7 @@ let GdsPagination = class extends withMarginProps(
     __privateAdd(this, _renderNextButton);
     __privateAdd(this, _renderJumpLastButton);
     __privateAdd(this, _renderNavigationControls);
+    __privateAdd(this, _renderSimpleNavigationControls);
     __privateAdd(this, _renderPageSizeOption);
     __privateAdd(this, _renderPageSizeMenu);
     __privateAdd(this, _renderLabel);
@@ -96,6 +97,7 @@ let GdsPagination = class extends withMarginProps(
     this.options = [5, 10, 25, 50];
     this.jump = false;
     this.hideOptions = false;
+    this.simple = false;
     this.density = "comfortable";
     this.label = "";
     this._isMobile = false;
@@ -126,7 +128,10 @@ let GdsPagination = class extends withMarginProps(
             justify-content="${showNavigation ? "space-between" : "flex-end"}"
           >
             ${[
-      when(showNavigation, () => __privateMethod(this, _renderNavigationControls, renderNavigationControls_fn).call(this)),
+      when(
+        showNavigation,
+        () => this.simple ? __privateMethod(this, _renderSimpleNavigationControls, renderSimpleNavigationControls_fn).call(this) : __privateMethod(this, _renderNavigationControls, renderNavigationControls_fn).call(this)
+      ),
       pageSizeMenu
     ]}
           </gds-flex>
@@ -325,6 +330,29 @@ renderNavigationControls_fn = function() {
       </gds-flex>
     `;
 };
+_renderSimpleNavigationControls = new WeakSet();
+renderSimpleNavigationControls_fn = function() {
+  return html`
+      <gds-flex
+        gap="${__privateGet(this, _config, config_get).navGap}"
+        align-items="center"
+        class="navigation-controls navigation-controls-simple"
+        justify-content="center; m{flex-end}"
+        flex="1"
+      >
+        ${__privateMethod(this, _renderPreviousButton, renderPreviousButton_fn).call(this)}
+        <gds-text
+          font="${__privateGet(this, _config, config_get).font}"
+          color="neutral-01"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          ${msg("Page")} ${this.page}
+        </gds-text>
+        ${__privateMethod(this, _renderNextButton, renderNextButton_fn).call(this)}
+      </gds-flex>
+    `;
+};
 _renderPageSizeOption = new WeakSet();
 renderPageSizeOption_fn = function(size) {
   const isSelected = this.rows === size;
@@ -458,6 +486,9 @@ __decorateClass([
     reflect: false
   })
 ], GdsPagination.prototype, "hideOptions", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: false })
+], GdsPagination.prototype, "simple", 2);
 __decorateClass([
   property({ reflect: false })
 ], GdsPagination.prototype, "density", 2);

package/components/pagination/pagination.styles.js

@@ -13,6 +13,10 @@ const PaginationStyles = css`
     padding: 0;
     aspect-ratio: 1/1;
   }
+
+  nav {
+    width: 100%;
+  }
 `;
 export {
   PaginationStyles