@synergy-design-system/react 3.11.1 → 3.12.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @synergy-design-system/react
 
+## 3.12.0
+
+### Minor Changes
+
+- [#1240](https://github.com/synergy-design-system/synergy-design-system/pull/1240) [`06c29d4`](https://github.com/synergy-design-system/synergy-design-system/commit/06c29d4be7b9297d34919646cfd71394abdc6f88) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-22
+
+  feat: ✨ Add new component `<syn-pagination>` (#684)
+
+  Adds a new component `<syn-pagination>` that may be used to paginate large datasets.
+
+### Patch Changes
+
+- Updated dependencies [[`06c29d4`](https://github.com/synergy-design-system/synergy-design-system/commit/06c29d4be7b9297d34919646cfd71394abdc6f88)]:
+  - @synergy-design-system/components@3.12.0
+  - @synergy-design-system/tokens@3.12.0
+
 ## 3.11.1
 
 ### Patch Changes

package/dist/chunks/chunk.6FP6NGQ3.js

@@ -0,0 +1,21 @@
+// ../react/src/components/pagination.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/pagination/pagination.component.js";
+var tagName = "syn-pagination";
+Component.define("syn-pagination");
+var SynPagination = createComponent({
+  displayName: "SynPagination",
+  elementClass: Component,
+  events: {
+    onSynPaginationPageChanged: "syn-pagination-page-changed",
+    onSynPaginationPageSizeChanged: "syn-pagination-page-size-changed"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynPagination
+};
+//# sourceMappingURL=chunk.6FP6NGQ3.js.map

package/dist/chunks/chunk.6FP6NGQ3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/pagination.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/pagination/pagination.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';\nimport type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-pagination';\nComponent.define('syn-pagination');\n\n/**\n * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs\n * @status stable\n * @since 3.12.0\n *\n * @event syn-pagination-page-changed - Emitted when the current page changes\n * @event syn-pagination-page-size-changed - Emitted when the page size changes\n *\n * @csspart base - The component's base wrapper.\n * @csspart divider - The divider element displayed at the top of the pagination component.\n * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.\n * @csspart page-size-select - The page size select element.\n * @csspart page-item-summary - The text element displaying the current page item range and total items.\n * @csspart page-input-section - The section containing the page number input and total pages display.\n * @csspart page-input - The page number input element.\n * @csspart navigation - The pagination navigation element.\n * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).\n *\n * @accessibility\n * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.\n * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.\n * Example: `<syn-pagination aria-label=\"Search results pagination\"></syn-pagination>`\n */\nexport const SynPagination = createComponent({\n  displayName: 'SynPagination',\n  elementClass: Component,\n  events: {\n    onSynPaginationPageChanged:\n      'syn-pagination-page-changed' as EventName<SynPaginationPageChangedEvent>,\n    onSynPaginationPageSizeChanged:\n      'syn-pagination-page-size-changed' as EventName<SynPaginationPageSizeChangedEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';\nexport type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAMtB,IAAM,UAAU;AAChB,UAAU,OAAO,gBAAgB;AA2B1B,IAAM,gBAAgB,gBAAgB;AAAA,EAC3C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,4BACE;AAAA,IACF,gCACE;AAAA,EACJ;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/pagination.d.ts

@@ -0,0 +1,35 @@
+import Component from '@synergy-design-system/components/components/pagination/pagination.component.js';
+import { type EventName } from '@lit/react';
+import type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+import type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
+/**
+ * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
+ * @status stable
+ * @since 3.12.0
+ *
+ * @event syn-pagination-page-changed - Emitted when the current page changes
+ * @event syn-pagination-page-size-changed - Emitted when the page size changes
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider element displayed at the top of the pagination component.
+ * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
+ * @csspart page-size-select - The page size select element.
+ * @csspart page-item-summary - The text element displaying the current page item range and total items.
+ * @csspart page-input-section - The section containing the page number input and total pages display.
+ * @csspart page-input - The page number input element.
+ * @csspart navigation - The pagination navigation element.
+ * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
+ *
+ * @accessibility
+ * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
+ * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
+ * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
+ */
+export declare const SynPagination: import("@lit/react").ReactWebComponent<Component, {
+    onSynPaginationPageChanged: EventName<SynPaginationPageChangedEvent>;
+    onSynPaginationPageSizeChanged: EventName<SynPaginationPageSizeChangedEvent>;
+}>;
+export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';

package/dist/components/pagination.js

@@ -0,0 +1,7 @@
+import {
+  SynPagination
+} from "../chunks/chunk.6FP6NGQ3.js";
+export {
+  SynPagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { SynMenuLabel } from './components/menu-label.js';
 export { SynNavItem } from './components/nav-item.js';
 export { SynOptgroup } from './components/optgroup.js';
 export { SynOption } from './components/option.js';
+export { SynPagination } from './components/pagination.js';
 export { SynPopup } from './components/popup.js';
 export { SynPrioNav } from './components/prio-nav.js';
 export { SynProgressBar } from './components/progress-bar.js';

package/dist/index.js

@@ -49,9 +49,6 @@ import {
 import {
   SynSpinner
 } from "./chunks/chunk.SOARUKQP.js";
-import {
-  SynMenu
-} from "./chunks/chunk.4IVJHGWM.js";
 import {
   SynNavItem
 } from "./chunks/chunk.EFKHCKYH.js";
@@ -61,6 +58,9 @@ import {
 import {
   SynOption
 } from "./chunks/chunk.BCGANMMM.js";
+import {
+  SynPagination
+} from "./chunks/chunk.6FP6NGQ3.js";
 import {
   SynPopup
 } from "./chunks/chunk.6MRDGRZF.js";
@@ -73,9 +73,6 @@ import {
 import {
   SynProgressRing
 } from "./chunks/chunk.ADSD2U7G.js";
-import {
-  SynDropdown
-} from "./chunks/chunk.AE6RZ4W2.js";
 import {
   SynFile
 } from "./chunks/chunk.IQB5SV6K.js";
@@ -98,8 +95,8 @@ import {
   SynMenuLabel
 } from "./chunks/chunk.BTEVTUXU.js";
 import {
-  SynButton
-} from "./chunks/chunk.TGSZHDUW.js";
+  SynMenu
+} from "./chunks/chunk.4IVJHGWM.js";
 import {
   SynCard
 } from "./chunks/chunk.OJAJTT5S.js";
@@ -121,6 +118,9 @@ import {
 import {
   SynDrawer
 } from "./chunks/chunk.RWOJEMSX.js";
+import {
+  SynDropdown
+} from "./chunks/chunk.AE6RZ4W2.js";
 import {
   SynAccordion
 } from "./chunks/chunk.2PS5VOXM.js";
@@ -139,6 +139,9 @@ import {
 import {
   SynButtonGroup
 } from "./chunks/chunk.HHPIABBV.js";
+import {
+  SynButton
+} from "./chunks/chunk.TGSZHDUW.js";
 export {
   SynAccordion,
   SynAlert,
@@ -166,6 +169,7 @@ export {
   SynNavItem,
   SynOptgroup,
   SynOption,
+  SynPagination,
   SynPopup,
   SynPrioNav,
   SynProgressBar,

package/dist/types/syn-jsx-elements.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, DOMAttributes, RefObject } from 'react';
-import type { SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynBlurEvent, SynFocusEvent, SynInvalidEvent, SynChangeEvent, SynInputEvent, SynClearEvent, SynErrorEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynLoadEvent, SynClampEvent, SynSelectEvent, SynRepositionEvent, SynMoveEvent, SynCloseEvent, SynTabShowEvent, SynTabHideEvent, SynRemoveEvent, SynAccordion, SynAlert, SynBadge, SynBreadcrumb, SynBreadcrumbItem, SynButton, SynButtonGroup, SynCard, SynCheckbox, SynCombobox, SynDetails, SynDialog, SynDivider, SynDrawer, SynDropdown, SynFile, SynHeader, SynIcon, SynIconButton, SynInput, SynMenu, SynMenuItem, SynMenuLabel, SynNavItem, SynOptgroup, SynOption, SynPopup, SynPrioNav, SynProgressBar, SynProgressRing, SynRadio, SynRadioButton, SynRadioGroup, SynRange, SynRangeTick, SynSelect, SynSideNav, SynSpinner, SynSwitch, SynTab, SynTabGroup, SynTabPanel, SynTag, SynTagGroup, SynTextarea, SynTooltip, SynValidate } from '@synergy-design-system/components';
+import type { SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynBlurEvent, SynFocusEvent, SynInvalidEvent, SynChangeEvent, SynInputEvent, SynClearEvent, SynErrorEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynLoadEvent, SynClampEvent, SynSelectEvent, SynPaginationPageChangedEvent, SynPaginationPageSizeChangedEvent, SynRepositionEvent, SynMoveEvent, SynCloseEvent, SynTabShowEvent, SynTabHideEvent, SynRemoveEvent, SynAccordion, SynAlert, SynBadge, SynBreadcrumb, SynBreadcrumbItem, SynButton, SynButtonGroup, SynCard, SynCheckbox, SynCombobox, SynDetails, SynDialog, SynDivider, SynDrawer, SynDropdown, SynFile, SynHeader, SynIcon, SynIconButton, SynInput, SynMenu, SynMenuItem, SynMenuLabel, SynNavItem, SynOptgroup, SynOption, SynPagination, SynPopup, SynPrioNav, SynProgressBar, SynProgressRing, SynRadio, SynRadioButton, SynRadioGroup, SynRange, SynRangeTick, SynSelect, SynSideNav, SynSpinner, SynSwitch, SynTab, SynTabGroup, SynTabPanel, SynTag, SynTagGroup, SynTextarea, SynTooltip, SynValidate } from '@synergy-design-system/components';
 /**
  * Used core types
  * @see https://coryrylan.com/blog/how-to-use-web-components-with-typescript-and-react
@@ -970,6 +970,40 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @csspart prefix - The container that wraps the prefix.
  * @csspart suffix - The container that wraps the suffix.
  */ export type SynOptionJSXElement = SynCustomElement<SynOption, []>;
+/**
+ * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
+ * @status stable
+ * @since 3.12.0
+ *
+ * @event syn-pagination-page-changed - Emitted when the current page changes
+ * @event syn-pagination-page-size-changed - Emitted when the page size changes
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider element displayed at the top of the pagination component.
+ * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
+ * @csspart page-size-select - The page size select element.
+ * @csspart page-item-summary - The text element displaying the current page item range and total items.
+ * @csspart page-input-section - The section containing the page number input and total pages display.
+ * @csspart page-input - The page number input element.
+ * @csspart navigation - The pagination navigation element.
+ * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
+ *
+ * @accessibility
+ * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
+ * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
+ * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
+ */ export type SynPaginationJSXElement = SynCustomElement<SynPagination, [
+    [
+        'syn-pagination-page-changed',
+        SynPaginationPageChangedEvent
+    ],
+    [
+        'syn-pagination-page-size-changed',
+        SynPaginationPageSizeChangedEvent
+    ]
+]>;
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
@@ -2366,6 +2400,31 @@ declare module 'react' {
              * @csspart prefix - The container that wraps the prefix.
              * @csspart suffix - The container that wraps the suffix.
              */ 'syn-option': SynOptionJSXElement;
+            /**
+             * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
+             *
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
+             * @status stable
+             * @since 3.12.0
+             *
+             * @event syn-pagination-page-changed - Emitted when the current page changes
+             * @event syn-pagination-page-size-changed - Emitted when the page size changes
+             *
+             * @csspart base - The component's base wrapper.
+             * @csspart divider - The divider element displayed at the top of the pagination component.
+             * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
+             * @csspart page-size-select - The page size select element.
+             * @csspart page-item-summary - The text element displaying the current page item range and total items.
+             * @csspart page-input-section - The section containing the page number input and total pages display.
+             * @csspart page-input - The page number input element.
+             * @csspart navigation - The pagination navigation element.
+             * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
+             *
+             * @accessibility
+             * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
+             * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
+             * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
+             */ 'syn-pagination': SynPaginationJSXElement;
             /**
              * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
              * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@synergy-design-system/components": "3.11.1"
+    "@synergy-design-system/components": "3.12.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,12 +43,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.11.1",
+  "version": "3.12.0",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.4"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "3.11.1"
+    "@synergy-design-system/tokens": "3.12.0"
   }
 }