@synergy-design-system/mcp 2.14.0 → 2.15.0

package/metadata/packages/components/components/syn-pagination/component.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @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>`
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/pagination/pagination.js';
+
+import type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+import type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
+import type { SynPagination } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynPagination>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * When true, a divider is displayed at the top of the pagination component.
+   */
+  divider?: SynPagination['divider'];
+
+  /**
+   * When true, the pagination controls are disabled and non-interactive.
+   */
+  disabled?: SynPagination['disabled'];
+
+  /**
+   * The size of the pagination controls.
+   */
+  size?: SynPagination['size'];
+
+  /**
+* The current page number.
+* The default value is 1.
+The component will emit a `syn-pagination-page-changed` event whenever the page changes, allowing you to respond to page changes in your application.
+ */
+  currentPage?: SynPagination['currentPage'];
+
+  /**
+* The number of items to display per page.
+* The default value is 25.
+The component will emit a `syn-pagination-page-size-changed` event whenever the page size changes, allowing you to respond to page size changes in your application.
+ */
+  pageSize?: SynPagination['pageSize'];
+
+  /**
+* An array of numbers representing the available options for the number of items to display per page.
+* The default value is [10, 25, 50, 100].
+The component will use this array to populate the rows-per-page selector, allowing users to choose from the specified options.
+ */
+  pageSizeOptions?: SynPagination['pageSizeOptions'];
+
+  /**
+   * Total amount of items.
+   * The component will use this value to calculate the total number of pages based on the selected rows per page.
+   */
+  totalItems?: SynPagination['totalItems'];
+
+  /**
+* The pagination variant to use.
+* The "full" variant includes comprehensive controls for navigating between pages and adjusting the number of displayed rows,
+while the "compact" variant offers a streamlined interface with essential navigation controls.
+The default value is "full".
+ */
+  variant?: SynPagination['variant'];
+
+  /**
+   * An accessible label for the navigation landmark.
+   * Customize for multiple paginations on a page.
+   */
+  ariaLabel?: SynPagination['ariaLabel'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+
+// Map events
+defineEmits<{
+  /**
+   * Emitted when the current page changes
+   */
+  'syn-pagination-page-changed': [e: SynPaginationPageChangedEvent];
+
+  /**
+   * Emitted when the page size changes
+   */
+  'syn-pagination-page-size-changed': [e: SynPaginationPageSizeChangedEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-pagination
+    @syn-pagination-page-changed="$emit('syn-pagination-page-changed', $event)"
+    @syn-pagination-page-size-changed="
+      $emit('syn-pagination-page-size-changed', $event)
+    "
+    v-bind="visibleProps"
+    ref="nativeElement">
+  </syn-pagination>
+</template>

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 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/tokens@3.12.0
+
+## 3.11.1
+
+### Patch Changes
+
+- [#1252](https://github.com/synergy-design-system/synergy-design-system/pull/1252) [`9d36167`](https://github.com/synergy-design-system/synergy-design-system/commit/9d36167d35ebbdd43820d520140d6823e1331ea1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-20
+
+  fix: 🐛 syn-dialog has broken scrolling when slotting scrollable children (#1249)
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.11.1
+
 ## 3.11.0
 
 ### Minor Changes
@@ -89,62 +115,6 @@
   This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
   It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
 
-  You may use it via:
-
-  ```html
-  <syn-header label="App Name">
-    <nav slot="meta-navigation">
-      <syn-icon-button
-        name="settings_outline"
-        label="Settings"
-      ></syn-icon-button>
-      <syn-icon-button
-        name="insert_chart_outlined"
-        label="Analytics"
-      ></syn-icon-button>
-      <syn-divider vertical></syn-divider>
-      <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
-      <syn-divider vertical></syn-divider>
-      <syn-icon-button name="language" label="Language"></syn-icon-button>
-      <syn-icon-button name="login" label="Login"></syn-icon-button>
-    </nav>
-  </syn-header>
-  ```
-
-  or via directly slotting the `<syn-divider>` via
-
-  ```html
-  <syn-header label="App Name">
-    <syn-icon-button
-      slot="meta-navigation"
-      name="settings_outline"
-      label="Settings"
-    ></syn-icon-button>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="insert_chart_outlined"
-      label="Analytics"
-    ></syn-icon-button>
-    <syn-divider vertical slot="meta-navigation"></syn-divider>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="dark_mode"
-      label="Dark Mode"
-    ></syn-icon-button>
-    <syn-divider vertical slot="meta-navigation"></syn-divider>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="language"
-      label="Language"
-    ></syn-icon-button>
-    <syn-icon-button
-      slot="meta-navigation"
-      name="login"
-      label="Login"
-    ></syn-icon-button>
-  </syn-header>
-  ```
-
   `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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.
+
+## 3.11.1
+
 ## 3.11.0
 
 ## 3.10.5

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.10.5
+ * @synergy-design-system/tokens version 3.11.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/static/components/syn-pagination/docs.md

@@ -0,0 +1,102 @@
+## Default
+
+The default pagination offers the most comprehensive controls and is optimized for tables, lists, and complex data views. It is intended for use cases where users need to adjust both the number of displayed rows and the active page. The navigation controls allow switching between pages as well as jumping directly to the first or last page.
+
+```html
+<syn-pagination
+  current-page="1"
+  page-size="25"
+  page-size-options="10, 25, 50, 100"
+  total-items="500"
+  size="medium"
+  variant="full"
+></syn-pagination>
+```
+
+---
+
+## With Divider
+
+An optional divider can be shown to provide visual separation depending on the layout needs.
+
+```html
+<syn-pagination
+  divider=""
+  current-page="2"
+  page-size="25"
+  total-items="500"
+  size="medium"
+  variant="full"
+></syn-pagination>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable all interactive elements like syn-select, syn-input, and the previous and next syn-icon-buttons. This can be useful if you want to prevent the user from entering something again immediately after an entry before the first entry has been processed.
+
+```html
+<syn-pagination
+  disabled=""
+  current-page="1"
+  page-size="25"
+  total-items="500"
+  size="medium"
+  variant="full"
+></syn-pagination>
+```
+
+---
+
+## Compact
+
+The compact variant focuses on essential pagination controls and fits tight layouts or mobile environments. Use this variant when space is limited or page size stays fixed.
+
+```html
+<syn-pagination
+  variant="compact"
+  current-page="1"
+  page-size="25"
+  total-items="500"
+  size="medium"
+></syn-pagination>
+```
+
+---
+
+## Sizes
+
+Use the size attribute to change the pagination size.
+
+```html
+<div
+  style="
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-2x-large);
+  "
+>
+  <syn-pagination
+    current-page="1"
+    page-size="25"
+    total-items="500"
+    size="small"
+    variant="full"
+  ></syn-pagination>
+  <syn-pagination
+    current-page="1"
+    page-size="25"
+    total-items="500"
+    size="medium"
+    variant="full"
+  ></syn-pagination>
+  <syn-pagination
+    current-page="1"
+    page-size="25"
+    total-items="500"
+    size="large"
+    variant="full"
+  ></syn-pagination>
+</div>
+```

package/package.json

@@ -10,7 +10,7 @@
     "@modelcontextprotocol/sdk": "^1.27.1",
     "globby": "^16.1.1",
     "zod": "^4.3.6",
-    "@synergy-design-system/assets": "2.0.3"
+    "@synergy-design-system/assets": "2.1.0"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.7",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "3.12.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/fonts": "1.0.5",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/tokens": "^3.11.0",
+    "@synergy-design-system/fonts": "1.0.5",
     "@synergy-design-system/styles": "2.0.3",
-    "@synergy-design-system/components": "3.11.0"
+    "@synergy-design-system/tokens": "^3.12.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",

package/metadata/packages/components/components/syn-dialog/component.custom.styles.ts

@@ -1,60 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    /**
-     * Used as the default padding for the dialog title
-     */
-    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
-
-    /**
-     * Defines the default body spacing
-     */
-    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
-
-    /**
-     * Defines the default footer spacing
-     */
-    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
-  }
-
-  .dialog__panel {
-    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);
-    border-radius: var(--syn-border-radius-none);
-    box-shadow: var(--syn-shadow-large);
-  }
-
-  .dialog__header-actions {
-    align-items: flex-start;
-    gap: var(--syn-spacing-x-small);
-    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
-  }
-
-  /* Overlay Background */
-  .dialog__overlay {
-    /* #946: Add background blur for sick 2025 */
-    backdrop-filter: blur(var(--syn-overlay-background-blur));
-  }
-
-  /**
-   * We need this to make sure we are big enough as defined in the layout
-   * When omitting this statement, we will get rounding problems via line-height
-   */
-  .dialog__title,
-  .dialog__header-actions {
-    min-height: 88px;
-  }
-
-  .dialog__header-actions syn-icon-button,
-  .dialog__header-actions ::slotted(syn-icon-button) {
-    color: var(--syn-color-neutral-950);
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .dialog__title {
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-x-large);
-    font-weight: var(--syn-font-weight-bold);
-    line-height: var(--syn-line-height-normal);
-  }
-`;