@synergy-design-system/metadata 3.1.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 3.3.0
+
+### Patch Changes
+
+- [#1278](https://github.com/synergy-design-system/synergy-design-system/pull/1278) [`e84b97a`](https://github.com/synergy-design-system/synergy-design-system/commit/e84b97ae70affae71afcc85725e56b3f690a445e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-05-04
+
+  fix: 🐛 `<syn-option>` slotted icons not visible on hover ([#1277](https://github.com/synergy-design-system/synergy-design-system/issues/1277))
+
+  This release fixes a bug that accidentally set the color of slotted elements in `<syn-option>` to white which lead to the icons appear to be invisible.
+
+## 3.2.0
+
+### Patch Changes
+
+- [#1267](https://github.com/synergy-design-system/synergy-design-system/pull/1267) [`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
+
+  fix: 🐛 `<syn-icon-button>` is not visible when `disabled` in dark mode ([#1257](https://github.com/synergy-design-system/synergy-design-system/issues/1257))
+
+  This release fixes an issue where disabled `<syn-icon-button>` components were appearing too light in dark mode, making them difficult to see. The disabled state styling now properly contrasts with the dark background.
+
 ## 3.1.0
 
 ### Minor Changes

package/data/core/component/component:syn-icon-button.json

@@ -157,10 +157,6 @@
         "layer": "full",
         "path": "layers/full/component/component:syn-icon-button/components/icon-button.component.ts"
       },
-      {
-        "layer": "full",
-        "path": "layers/full/component/component:syn-icon-button/components/icon-button.custom.styles.ts"
-      },
       {
         "layer": "full",
         "path": "layers/full/component/component:syn-icon-button/components/icon-button.styles.ts"
@@ -205,7 +201,6 @@
   "sources": [
     "packages/angular/components/icon-button/icon-button.component.ts",
     "packages/components/src/components/icon-button/icon-button.component.ts",
-    "packages/components/src/components/icon-button/icon-button.custom.styles.ts",
     "packages/components/src/components/icon-button/icon-button.styles.ts",
     "packages/components/src/components/icon-button/icon-button.ts",
     "packages/react/src/components/icon-button.ts",

package/data/core/setup/setup:angular-components-module.json

@@ -21,7 +21,7 @@
   "name": "Angular Components Module",
   "package": "angular",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/angular/modules/synergy/synergy.module.ts",
     "packages/angular/components/index.ts"

package/data/core/setup/setup:angular-forms-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Forms Module",
   "package": "angular",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/angular/modules/forms/forms.module.ts"
   ],

package/data/core/setup/setup:angular-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "angular",
     "packageName": "@synergy-design-system/angular",
-    "packageVersion": "3.13.0",
+    "packageVersion": "3.13.2",
     "subpathExports": [
       ".",
       "./components/*",
@@ -39,7 +39,7 @@
   "name": "Angular Framework Package",
   "package": "angular",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/angular/README.md",
     "packages/angular/CHANGELOG.md",

package/data/core/setup/setup:angular-validators-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Validators Module",
   "package": "angular",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/angular/directives/validators/validators.ts"
   ],

package/data/core/setup/setup:components-package.json

@@ -1,7 +1,7 @@
 {
   "custom": {
     "packageName": "@synergy-design-system/components",
-    "packageVersion": "3.13.0"
+    "packageVersion": "3.13.2"
   },
   "id": "setup:components-package",
   "kind": "setup",
@@ -40,7 +40,7 @@
   "name": "Components Package",
   "package": "components",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/components/README.md",
     "packages/components/CHANGELOG.md",

package/data/core/setup/setup:react-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "react",
     "packageName": "@synergy-design-system/react",
-    "packageVersion": "3.13.0",
+    "packageVersion": "3.13.2",
     "subpathExports": [
       ".",
       "./components/*",
@@ -42,7 +42,7 @@
   "name": "React Framework Package",
   "package": "react",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/react/README.md",
     "packages/react/CHANGELOG.md",

package/data/core/setup/setup:tokens-package.json

@@ -24,7 +24,7 @@
       "./themes/*"
     ],
     "packageName": "@synergy-design-system/tokens",
-    "packageVersion": "3.13.0"
+    "packageVersion": "3.13.2"
   },
   "id": "setup:tokens-package",
   "kind": "setup",
@@ -51,7 +51,7 @@
   "name": "Tokens Package",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/BREAKING_CHANGES.md",
     "packages/tokens/CHANGELOG.md",

package/data/core/setup/setup:vue-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "vue",
     "packageName": "@synergy-design-system/vue",
-    "packageVersion": "3.13.0"
+    "packageVersion": "3.13.2"
   },
   "id": "setup:vue-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Vue Framework Package",
   "package": "vue",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/vue/README.md",
     "packages/vue/CHANGELOG.md",

package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-light.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-light.json"
   ],

package/data/core/token/token:tokens-js-index-d-ts.json

@@ -17,7 +17,7 @@
   "name": "index.d.ts",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/js/index.d.ts"
   ],

package/data/core/token/token:tokens-js-index-js.json

@@ -17,7 +17,7 @@
   "name": "index.js",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/js/index.js"
   ],

package/data/core/token/token:tokens-scss-tokens-scss.json

@@ -17,7 +17,7 @@
   "name": "_tokens.scss",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/scss/_tokens.scss"
   ],

package/data/core/token/token:tokens-themes-sick2018-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2018_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/themes/sick2018_dark.css"
   ],

package/data/core/token/token:tokens-themes-sick2018-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2018_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/themes/sick2018_light.css"
   ],

package/data/core/token/token:tokens-themes-sick2025-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/themes/sick2025_dark.css"
   ],

package/data/core/token/token:tokens-themes-sick2025-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.13.0",
+  "since": "3.13.2",
   "sources": [
     "packages/tokens/dist/themes/sick2025_light.css"
   ],

package/data/index.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-04-29T12:24:03.622Z",
+  "builtAt": "2026-05-04T13:29:30.055Z",
   "entities": [
     {
       "corePath": "data/core/asset/asset:sick2018-icons.json",
@@ -491,7 +491,7 @@
       "kind": "component",
       "layers": {
         "examples": 1,
-        "full": 8,
+        "full": 7,
         "interface": 2
       },
       "name": "syn-icon-button",

package/data/layers/examples/component/component:syn-icon-button.md

@@ -17,24 +17,26 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in
 Use the size attribute to change a icon-button size.
 
 ```html
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="small"
-></syn-icon-button>
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="medium"
-></syn-icon-button>
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="large"
-></syn-icon-button>
+<div style="align-items: end; display: flex; gap: var(--syn-spacing-large)">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="small"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="large"
+  ></syn-icon-button>
+</div>
 ```
 
 ---
@@ -44,18 +46,20 @@ Use the size attribute to change a icon-button size.
 The Icon button can have two color variants, Primary or Neutral Color.
 
 ```html
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="medium"
-></syn-icon-button>
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="primary"
-  size="medium"
-></syn-icon-button>
+<div style="align-items: center; display: flex; gap: var(--syn-spacing-large)">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="primary"
+    size="medium"
+  ></syn-icon-button>
+</div>
 ```
 
 ---
@@ -82,13 +86,22 @@ It’s often helpful to have a button that works like a link. This is possible b
 Use the disabled attribute to disable the icon button.
 
 ```html
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  disabled=""
-  size="medium"
-></syn-icon-button>
+<div style="align-items: center; display: flex; gap: var(--syn-spacing-large)">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    disabled=""
+    size="medium"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="primary"
+    disabled=""
+    size="medium"
+  ></syn-icon-button>
+</div>
 ```
 
 ---
@@ -99,12 +112,28 @@ The focus event gives the user feedback that the icon-button has been focused by
 
 ```html
 <div style="padding: 5px">
-  <syn-icon-button
-    name="wallpaper"
-    label="Wallpaper"
-    color="neutral"
-    size="medium"
-  ></syn-icon-button>
+  <div
+    style="align-items: center; display: flex; gap: var(--syn-spacing-large)"
+  >
+    <syn-icon-button
+      name="wallpaper"
+      label="Wallpaper"
+      color="neutral"
+      size="small"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="wallpaper"
+      label="Wallpaper"
+      color="neutral"
+      size="medium"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="wallpaper"
+      label="Wallpaper"
+      color="neutral"
+      size="large"
+    ></syn-icon-button>
+  </div>
 </div>
 ```
 

package/data/layers/examples/component/component:syn-option.md

@@ -22,6 +22,13 @@ Use the disabled attribute to disable an option and prevent it from being select
   <syn-option value="option-1">Email</syn-option>
   <syn-option value="option-2" disabled="">Phone</syn-option>
   <syn-option value="option-3">Chat</syn-option>
+
+  <syn-option value="option-4" disabled="">
+    <syn-icon name="chat_bubble_outline" slot="prefix"></syn-icon>
+    <syn-icon name="check_circle_outline" slot="suffix"></syn-icon>
+    Other
+  </syn-option>
+  <!-- /Regression#1277 -->
 </syn-select>
 ```
 
@@ -32,7 +39,7 @@ Use the disabled attribute to disable an option and prevent it from being select
 Add icons to the start and end of menu items using the prefix and suffix slots.
 
 ```html
-<syn-select label="Select one">
+<syn-select label="Select one" open="">
   <syn-option value="option-1">
     <syn-icon slot="prefix" name="email"></syn-icon>
     Email

package/data/layers/full/component/component:syn-icon-button/components/icon-button.component.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+import type { CSSResultGroup } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { html, literal } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -7,8 +7,6 @@ import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIcon from '../icon/icon.component.js';
 import styles from './icon-button.styles.js';
-import customStyles from './icon-button.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
@@ -26,7 +24,8 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynIconButton')
 export default class SynIconButton extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
+
   static dependencies = { 'syn-icon': SynIcon };
 
   @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
@@ -67,10 +66,10 @@ export default class SynIconButton extends SynergyElement {
   * The color of the icon button.
   * The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
   */
-  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral'  = 'currentColor';
+  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral' = 'currentColor';
 
   /** Disables the button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ reflect: true, type: Boolean }) disabled = false;
 
   private handleBlur() {
     this.hasFocus = false;
@@ -104,11 +103,12 @@ export default class SynIconButton extends SynergyElement {
     this.button.blur();
   }
 
+  // eslint-disable-next-line complexity
   render() {
-    const isLink = this.href ? true : false;
+    const isLink = !!this.href;
     const tag = isLink ? literal`a` : literal`button`;
 
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html, @typescript-eslint/unbound-method */
     return html`
       <${tag}
         part="base"
@@ -116,9 +116,9 @@ export default class SynIconButton extends SynergyElement {
           'icon-button': true,
           'icon-button--disabled': !isLink && this.disabled,
           'icon-button--focused': this.hasFocus,
-          'icon-button--small': this.size === 'small',
-          'icon-button--medium': this.size === 'medium',
           'icon-button--large': this.size === 'large',
+          'icon-button--medium': this.size === 'medium',
+          'icon-button--small': this.size === 'small',
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : 'button')}

package/data/layers/full/component/component:syn-icon-button/components/icon-button.styles.ts

@@ -1,26 +1,36 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
-    display: inline-block;
     color: var(--syn-color-neutral-600);
+    display: inline-block;
   }
 
   .icon-button {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-appearance: none;
+    appearance: none;
     background: none;
     border: none;
-    border-radius: var(--syn-border-radius-medium);
+    border-radius: 0;
+    color: currentColor;
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
     font-size: inherit;
-    color: inherit;
     padding: var(--syn-spacing-x-small);
-    cursor: pointer;
     transition: var(--syn-transition-x-fast) color;
-    -webkit-appearance: none;
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button:focus-visible {
+    border-radius: var(--syn-icon-button-focus-ring-border-radius); /* Remove round borders */
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
   }
 
   .icon-button:hover:not(.icon-button--disabled),
@@ -32,21 +42,70 @@ export default css`
     color: var(--syn-color-primary-700);
   }
 
-  .icon-button:focus {
-    outline: none;
-  }
-
   .icon-button--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
-  }
-
-  .icon-button:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
 
   .icon-button__icon {
     pointer-events: none;
   }
+
+  /* Colors */
+  :host([color="currentColor"]) {
+    color: currentColor;
+  }
+
+  :host([color="primary"]),
+  :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: var(--syn-interactive-emphasis-color);
+  }
+
+  :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
+    color: var(--syn-interactive-emphasis-color-hover);
+  }
+
+  :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  :host([color="neutral"]) {
+    color: var(--syn-interactive-quiet-color);
+  }
+
+  :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
+    color: var(--syn-interactive-quiet-color-hover);
+  }
+
+  :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-interactive-quiet-color-active);
+  }
+
+  :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
+    color: var(--syn-interactive-quiet-color);
+  }
+
+  /* Sizes */
+  .icon-button--small {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .icon-button--medium {
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  .icon-button--large {
+    font-size: var(--syn-font-size-2x-large);
+  }
+
+  /* Force user to set "label" prop */
+  .icon-button[aria-label=""] {
+    border: var(--syn-border-width-large) var(--syn-color-error-600) solid;
+  }
+
+  .icon-button[aria-label=""]::after {
+    content: "Set label prop for a11y to get rid of this text and border!";
+    font-size: var(--syn-font-size-2x-small);
+    margin-left: var(--syn-spacing-2x-small);
+  }
 `;

package/data/layers/full/component/component:syn-icon-button/components/icon-button.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import SynIconButton from './icon-button.component.js';
 
 export * from './icon-button.component.js';

package/data/layers/full/component/component:syn-option/components/option.styles.ts

@@ -139,16 +139,16 @@ export default css`
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
-  .option--hover .option__prefix::slotted(syn-icon),
-  .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover);
-  }
-
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
     color: var(--syn-option-icon-color-active);
   }
 
+  .option--hover:not(.option--disabled) .option__prefix::slotted(syn-icon),
+  .option--hover:not(.option--disabled) .option__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-hover);
+  }
+
   /* This is needed for the highlight styling of the options in syn-combobox */
   .option__label::slotted(.syn-highlight-style) {
     background-color: transparent;

package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @synergy-design-system/angular
 
+## 3.13.2
+
+### Patch Changes
+
+- Updated dependencies [[`e84b97a`](https://github.com/synergy-design-system/synergy-design-system/commit/e84b97ae70affae71afcc85725e56b3f690a445e)]:
+  - @synergy-design-system/components@3.13.2
+  - @synergy-design-system/tokens@3.13.2
+
+## 3.13.1
+
+### Patch Changes
+
+- Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
+  - @synergy-design-system/components@3.13.1
+  - @synergy-design-system/tokens@3.13.1
+
 ## 3.13.0
 
 ### Patch Changes

package/data/layers/full/setup/setup:angular-package/angular/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/synergy-design-system/synergy-design-system.git",
     "directory": "packages/angular"
   },
-  "version": "3.13.0",
+  "version": "3.13.2",
   "scripts": {
     "_build": "pnpm _clean && ng-packagr -c tsconfig.lib.json && pnpm _after-build",
     "_clean": "rm -rf ../_private/angular-demo/.angular",

package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 3.13.2
+
+### Patch Changes
+
+- [#1278](https://github.com/synergy-design-system/synergy-design-system/pull/1278) [`e84b97a`](https://github.com/synergy-design-system/synergy-design-system/commit/e84b97ae70affae71afcc85725e56b3f690a445e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-05-04
+
+  fix: 🐛 `<syn-option>` slotted icons not visible on hover ([#1277](https://github.com/synergy-design-system/synergy-design-system/issues/1277))
+
+  This release fixes a bug that accidentally set the color of slotted elements in `<syn-option>` to white which lead to the icons appear to be invisible.
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.13.2
+
+## 3.13.1
+
+### Patch Changes
+
+- [#1267](https://github.com/synergy-design-system/synergy-design-system/pull/1267) [`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
+
+  fix: 🐛 `<syn-icon-button>` is not visible when `disabled` in dark mode ([#1257](https://github.com/synergy-design-system/synergy-design-system/issues/1257))
+
+  This release fixes an issue where disabled `<syn-icon-button>` components were appearing too light in dark mode, making them difficult to see. The disabled state styling now properly contrasts with the dark background.
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.13.1
+
 ## 3.13.0
 
 ### Patch Changes

package/data/layers/full/setup/setup:components-package/components/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "3.13.0",
+  "version": "3.13.2",
   "description": "",
   "repository": {
     "type": "git",

package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @synergy-design-system/react
 
+## 3.13.2
+
+### Patch Changes
+
+- Updated dependencies [[`e84b97a`](https://github.com/synergy-design-system/synergy-design-system/commit/e84b97ae70affae71afcc85725e56b3f690a445e)]:
+  - @synergy-design-system/components@3.13.2
+  - @synergy-design-system/tokens@3.13.2
+
+## 3.13.1
+
+### Patch Changes
+
+- Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
+  - @synergy-design-system/components@3.13.1
+  - @synergy-design-system/tokens@3.13.1
+
 ## 3.13.0
 
 ### Patch Changes

package/data/layers/full/setup/setup:react-package/react/package.json

@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.13.0",
+  "version": "3.13.2",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.5"

package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.13.2
+
+## 3.13.1
+
 ## 3.13.0
 
 ### Minor Changes

package/data/layers/full/setup/setup:tokens-package/tokens/package.json

@@ -77,5 +77,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.13.0"
+  "version": "3.13.2"
 }

package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @synergy-design-system/vue
 
+## 3.13.2
+
+### Patch Changes
+
+- Updated dependencies [[`e84b97a`](https://github.com/synergy-design-system/synergy-design-system/commit/e84b97ae70affae71afcc85725e56b3f690a445e)]:
+  - @synergy-design-system/components@3.13.2
+  - @synergy-design-system/tokens@3.13.2
+
+## 3.13.1
+
+### Patch Changes
+
+- Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
+  - @synergy-design-system/components@3.13.1
+  - @synergy-design-system/tokens@3.13.1
+
 ## 3.13.0
 
 ### Patch Changes

package/data/layers/full/setup/setup:vue-package/vue/package.json

@@ -43,7 +43,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "3.13.0",
+  "version": "3.13.2",
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.6",
     "@vue/tsconfig": "^0.9.1",

package/data/layers/full/tokens/js/index.d.ts

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

package/data/layers/full/tokens/js/index.js

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

package/data/layers/full/tokens/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.13.0
+ * @synergy-design-system/tokens version 3.13.2
  * SICK Global UX Foundation
  */
 $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;

package/data/layers/full/tokens/themes/sick2018_dark.css

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

package/data/layers/full/tokens/themes/sick2018_light.css

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

package/data/layers/full/tokens/themes/sick2025_dark.css

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

package/data/layers/full/tokens/themes/sick2025_light.css

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

package/data/manifest.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-04-29T12:24:03.623Z",
+  "builtAt": "2026-05-04T13:29:30.056Z",
   "sources": [
     {
       "entityCount": 4,

package/package.json

@@ -19,12 +19,12 @@
     "serve-handler": "^6.1.7",
     "typescript": "^5.9.3",
     "zod": "^4.3.6",
-    "@synergy-design-system/components": "3.13.0",
+    "@synergy-design-system/components": "3.13.2",
+    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/fonts": "1.0.6",
-    "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/styles": "2.1.0",
-    "@synergy-design-system/tokens": "^3.13.0"
+    "@synergy-design-system/tokens": "^3.13.2",
+    "@synergy-design-system/styles": "2.1.0"
   },
   "exports": {
     ".": {
@@ -65,7 +65,7 @@
   },
   "types": "./dist/index.d.ts",
   "type": "module",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "scripts": {
     "build:all": "METADATA_LOG_LEVEL=info pnpm run build:ts && RUN_STORYBOOK_SCRAPER=true pnpm run build:data",
     "build": "METADATA_LOG_LEVEL=info pnpm run build:ts && pnpm run build:data",

package/data/layers/full/component/component:syn-icon-button/components/icon-button.custom.styles.ts

@@ -1,79 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .icon-button {
-    border-radius: 0;
-    color: currentColor;
-    font-size: inherit;
-  }
-
-  .icon-button--disabled {
-    color: var(--syn-color-neutral-400);
-
-    /** #429: Use token for opacity */
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /* Remove round borders */
-  .icon-button:focus-visible {
-    border-radius: var(--syn-icon-button-focus-ring-border-radius);
-  }
-
-  /* Colors */
-  :host([color="currentColor"]) {
-    color: currentColor;
-  }
-
-  :host([color="primary"]),
-  :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color);
-  }
-
-  :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  :host([color="neutral"]) {
-    color: var(--syn-interactive-quiet-color);
-  }
-
-  :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-hover);
-  }
-
-  :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-interactive-quiet-color-active);
-  }
-
-  :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
-    color: var(--syn-interactive-quiet-color);
-  }
-
-  /* Sizes */
-  .icon-button--small {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .icon-button--medium {
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .icon-button--large {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  /* Force user to set "label" prop */
-  .icon-button[aria-label=""] {
-    border: var(--syn-border-width-large) var(--syn-color-error-600) solid;
-  }
-
-  .icon-button[aria-label=""]::after {
-    content: "Set label prop for a11y to get rid of this text and border!";
-    font-size: var(--syn-font-size-2x-small);
-    margin-left: var(--syn-spacing-2x-small);
-  }
-`;