@synergy-design-system/mcp 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 2.15.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/assets@2.1.0
+
+## 2.14.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)
+
 ## 2.14.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-4a1b447c845c11f9c997efbb142e3a62
+ca762755c51a403df85afe19edcbb5e0

package/metadata/packages/assets/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2.1.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.
+
 ## 2.0.3
 
 ### Patch Changes

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

@@ -1,39 +1,35 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     --width: 31rem;
-    --header-spacing: var(--syn-spacing-large);
-    --body-spacing: var(--syn-spacing-large);
-    --footer-spacing: var(--syn-spacing-large);
+    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
+    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
+    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
 
     display: contents;
   }
 
   .dialog {
-    display: flex;
     align-items: center;
+    display: flex;
+    inset: 0;
     justify-content: center;
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     z-index: var(--syn-z-index-dialog);
   }
 
   .dialog__panel {
+    background-color: var(--syn-panel-background-color);
+    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);
     display: flex;
     flex-direction: column;
-    z-index: 2;
-    width: var(--width);
-    max-width: calc(100% - var(--syn-spacing-2x-large));
     max-height: calc(100% - var(--syn-spacing-2x-large));
-    background-color: var(--syn-panel-background-color);
-    border-radius: var(--syn-border-radius-medium);
-    box-shadow: var(--syn-shadow-x-large);
+    max-width: calc(100% - var(--syn-spacing-2x-large));
+    width: var(--width);
+    z-index: 2;
   }
 
   .dialog__panel:focus {
@@ -41,7 +37,7 @@ export default css`
   }
 
   /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-  @media screen and (max-width: 420px) {
+  @media screen and (width <= 420px) {
     .dialog__panel {
       max-height: 80vh;
     }
@@ -53,48 +49,62 @@ export default css`
   }
 
   .dialog__header {
-    flex: 0 0 auto;
     display: flex;
+    flex: 0 0 auto;
   }
 
   .dialog__title {
     flex: 1 1 auto;
     font: inherit;
-    font-size: var(--syn-font-size-large);
-    line-height: var(--syn-line-height-dense);
-    padding: var(--header-spacing);
+    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);
     margin: 0;
+    padding: var(--header-spacing);
   }
 
   .dialog__header-actions {
-    flex-shrink: 0;
+    align-items: flex-start;
     display: flex;
+    flex-shrink: 0;
     flex-wrap: wrap;
+    gap: var(--syn-spacing-x-small);
     justify-content: end;
-    gap: var(--syn-spacing-2x-small);
-    padding: 0 var(--header-spacing);
+    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
+  }
+
+  /**
+   * 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) {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
-    font-size: var(--syn-font-size-medium);
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--syn-font-size-x-large);
   }
 
   .dialog__body {
-    flex: 1 1 auto;
     display: block;
-    padding: var(--body-spacing);
+    flex: 1 1 auto;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    padding: var(--body-spacing);
+    will-change: transform; /* #1249: Fixes Chrome scroll issues when using multiple scrollable items as content */
   }
 
   .dialog__footer {
     flex: 0 0 auto;
-    text-align: right;
     padding: var(--footer-spacing);
+    text-align: right;
   }
 
   .dialog__footer ::slotted(syn-button:not(:first-of-type)) {
@@ -106,12 +116,10 @@ export default css`
   }
 
   .dialog__overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    backdrop-filter: blur(var(--syn-overlay-background-blur)); /* #946: Add background blur for sick 2025 */
     background-color: var(--syn-overlay-background-color);
+    inset: 0;
+    position: fixed;
   }
 
   @media (forced-colors: active) {

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

@@ -1,14 +1,15 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
 import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
-import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
@@ -16,8 +17,6 @@ import Modal from '../../internal/modal.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIconButton from '../icon-button/icon-button.component.js';
 import styles from './dialog.styles.js';
-import customStyles from './dialog.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -70,26 +69,33 @@ import type { CSSResultGroup } from 'lit';
  *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
  */
 export default class SynDialog extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
+
   static dependencies = {
-    'syn-icon-button': SynIconButton
+    'syn-icon-button': SynIconButton,
   };
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
+
   private readonly localize = new LocalizeController(this);
+
   private originalTrigger: HTMLElement | null;
+
   public modal = new Modal(this);
+
   private closeWatcher: CloseWatcher | null;
 
   @query('.dialog') dialog: HTMLElement;
+
   @query('.dialog__panel') panel: HTMLElement;
+
   @query('.dialog__overlay') overlay: HTMLElement;
 
   /**
    * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
    */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ reflect: true, type: Boolean }) open = false;
 
   /**
    * The dialog's label as displayed in the header. You should always include a relevant label even when using
@@ -101,7 +107,7 @@ export default class SynDialog extends SynergyElement {
    * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
    * accessible way for users to dismiss the dialog.
    */
-  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+  @property({ attribute: 'no-header', reflect: true, type: Boolean }) noHeader = false;
 
   firstUpdated() {
     this.dialog.hidden = !this.open;
@@ -123,7 +129,7 @@ export default class SynDialog extends SynergyElement {
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
     const slRequestClose = this.emit('syn-request-close', {
       cancelable: true,
-      detail: { source }
+      detail: { source },
     });
 
     if (slRequestClose.defaultPrevented) {
@@ -205,7 +211,7 @@ export default class SynDialog extends SynergyElement {
       const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options),
       ]);
 
       this.emit('syn-after-show');
@@ -229,7 +235,7 @@ export default class SynDialog extends SynergyElement {
         }),
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
           this.panel.hidden = true;
-        })
+        }),
       ]);
 
       this.dialog.hidden = true;
@@ -271,13 +277,14 @@ export default class SynDialog extends SynergyElement {
   }
 
   render() {
+    /* eslint-disable lit-a11y/click-events-have-key-events */
     return html`
       <div
         part="base"
         class=${classMap({
           dialog: true,
+          'dialog--has-footer': this.hasSlotController.test('footer'),
           'dialog--open': this.open,
-          'dialog--has-footer': this.hasSlotController.test('footer')
         })}
       >
         <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
@@ -324,36 +331,37 @@ export default class SynDialog extends SynergyElement {
         </div>
       </div>
     `;
+    /* eslint-enable lit-a11y/click-events-have-key-events */
   }
 }
 
 setDefaultAnimation('dialog.show', {
   keyframes: [
     { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 1, scale: 1 },
   ],
-  options: { duration: 250, easing: 'ease' }
+  options: { duration: 250, easing: 'ease' },
 });
 
 setDefaultAnimation('dialog.hide', {
   keyframes: [
     { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 0, scale: 0.8 },
   ],
-  options: { duration: 250, easing: 'ease' }
+  options: { duration: 250, easing: 'ease' },
 });
 
 setDefaultAnimation('dialog.denyClose', {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
-  options: { duration: 250 }
+  options: { duration: 250 },
 });
 
 setDefaultAnimation('dialog.overlay.show', {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 250 }
+  options: { duration: 250 },
 });
 
 setDefaultAnimation('dialog.overlay.hide', {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 250 }
+  options: { duration: 250 },
 });

package/metadata/packages/components/components/syn-header/component.ts

@@ -6,7 +6,7 @@ import SynergyElement from '../../internal/synergy-element.js';
 import { HasSlotController } from '../../internal/slot.js';
 import componentStyles from '../../styles/component.styles.js';
 import styles from './header.styles.js';
-import SynIcon from '../icon/icon.js';
+import SynIcon from '../icon/icon.component.js';
 import type SynSideNav from '../side-nav/side-nav.component.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import { watch } from '../../internal/watch.js';

package/metadata/packages/components/components/syn-pagination/component.angular.ts

@@ -0,0 +1,201 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynPagination } from '@synergy-design-system/components';
+import type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+import type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/pagination/pagination.js';
+
+/**
+ * @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>`
+ */
+@Component({
+  selector: 'syn-pagination',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynPaginationComponent {
+  public nativeElement: SynPagination;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener(
+      'syn-pagination-page-changed',
+      (e: SynPaginationPageChangedEvent) => {
+        this.synPaginationPageChangedEvent.emit(e);
+      },
+    );
+    this.nativeElement.addEventListener(
+      'syn-pagination-page-size-changed',
+      (e: SynPaginationPageSizeChangedEvent) => {
+        this.synPaginationPageSizeChangedEvent.emit(e);
+      },
+    );
+  }
+
+  /**
+   * When true, a divider is displayed at the top of the pagination component.
+   */
+  @Input()
+  set divider(v: '' | SynPagination['divider']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.divider = v === '' || v),
+    );
+  }
+  get divider(): SynPagination['divider'] {
+    return this.nativeElement.divider;
+  }
+
+  /**
+   * When true, the pagination controls are disabled and non-interactive.
+   */
+  @Input()
+  set disabled(v: '' | SynPagination['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynPagination['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * The size of the pagination controls.
+   */
+  @Input()
+  set size(v: SynPagination['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynPagination['size'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set currentPage(v: SynPagination['currentPage']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.currentPage = v));
+  }
+  get currentPage(): SynPagination['currentPage'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set pageSize(v: SynPagination['pageSize']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.pageSize = v));
+  }
+  get pageSize(): SynPagination['pageSize'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set pageSizeOptions(v: SynPagination['pageSizeOptions']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.pageSizeOptions = v),
+    );
+  }
+  get pageSizeOptions(): SynPagination['pageSizeOptions'] {
+    return this.nativeElement.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.
+   */
+  @Input()
+  set totalItems(v: SynPagination['totalItems']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.totalItems = v));
+  }
+  get totalItems(): SynPagination['totalItems'] {
+    return this.nativeElement.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".
+ */
+  @Input()
+  set variant(v: SynPagination['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynPagination['variant'] {
+    return this.nativeElement.variant;
+  }
+
+  /**
+   * An accessible label for the navigation landmark.
+   * Customize for multiple paginations on a page.
+   */
+  @Input()
+  set ariaLabel(v: SynPagination['ariaLabel']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.ariaLabel = v));
+  }
+  get ariaLabel(): SynPagination['ariaLabel'] {
+    return this.nativeElement.ariaLabel;
+  }
+
+  /**
+   * Emitted when the current page changes
+   */
+  @Output() synPaginationPageChangedEvent =
+    new EventEmitter<SynPaginationPageChangedEvent>();
+
+  /**
+   * Emitted when the page size changes
+   */
+  @Output() synPaginationPageSizeChangedEvent =
+    new EventEmitter<SynPaginationPageSizeChangedEvent>();
+}
+
+export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-pagination/component.react.ts

@@ -0,0 +1,56 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+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';
+
+const tagName = 'syn-pagination';
+Component.define('syn-pagination');
+
+/**
+ * @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 const SynPagination = createComponent({
+  displayName: 'SynPagination',
+  elementClass: Component,
+  events: {
+    onSynPaginationPageChanged:
+      'syn-pagination-page-changed' as EventName<SynPaginationPageChangedEvent>,
+    onSynPaginationPageSizeChanged:
+      'syn-pagination-page-size-changed' as EventName<SynPaginationPageSizeChangedEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
+export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';