@synergy-design-system/metadata 3.0.1 → 3.2.0

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.12.1",
+  "version": "3.13.1",
   "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,25 @@
 # Changelog
 
+## 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
+
+- Updated dependencies [[`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5)]:
+  - @synergy-design-system/tokens@3.13.0
+
 ## 3.12.1
 
 ### 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.12.1",
+  "version": "3.13.1",
   "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.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
+
+- Updated dependencies [[`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5)]:
+  - @synergy-design-system/tokens@3.13.0
+  - @synergy-design-system/components@3.13.0
+
 ## 3.12.1
 
 ### Patch Changes

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

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

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

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.1.0
+
+### Minor Changes
+
+- [#1273](https://github.com/synergy-design-system/synergy-design-system/pull/1273) [`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
+
+  feat: ✨ add new headline styles ([#1268](https://github.com/synergy-design-system/synergy-design-system/issues/1268))
+
+  This Release adds missing typographic classes:
+  - `.syn-heading--medium`
+  - `.syn-heading--4x-large`
+  - `.syn-body--2x-small`
+
 ## 2.0.4
 
 ### Patch Changes

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

@@ -36,7 +36,7 @@
     "lint": "pnpm run /^lint:.*/"
   },
   "type": "module",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "devDependencies": {
     "@synergy-design-system/eslint-config-syn": "workspace:^",
     "@synergy-design-system/stylelint-config-syn": "workspace:^",

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

@@ -1,5 +1,20 @@
 # Changelog
 
+## 3.13.1
+
+## 3.13.0
+
+### Minor Changes
+
+- [#1273](https://github.com/synergy-design-system/synergy-design-system/pull/1273) [`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
+
+  feat: ✨ add new headline styles ([#1268](https://github.com/synergy-design-system/synergy-design-system/issues/1268))
+
+  This Release adds missing typographic classes:
+  - `.syn-heading--medium`
+  - `.syn-heading--4x-large`
+  - `.syn-body--2x-small`
+
 ## 3.12.1
 
 ### Patch 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.12.1"
+  "version": "3.13.1"
 }

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

@@ -1,5 +1,21 @@
 # @synergy-design-system/vue
 
+## 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
+
+- Updated dependencies [[`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5)]:
+  - @synergy-design-system/tokens@3.13.0
+  - @synergy-design-system/components@3.13.0
+
 ## 3.12.1
 
 ### Patch Changes

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

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

package/data/layers/full/styles/typography/body.css

@@ -1,8 +1,12 @@
 /**
  * Typographic text classes
- * @variant {x-small | small | medium | large} syn-body The font size of the body text
+ * @variant {2x-small | x-small | small | medium | large} syn-body The font size of the body text
  */
-.syn-body--x-small {
+.syn-body--2x-small {
+  font: var(--syn-body-2x-small-regular);
+}
+
+ .syn-body--x-small {
   font: var(--syn-body-x-small-regular);
 }
 

package/data/layers/full/styles/typography/heading.css

@@ -1,7 +1,11 @@
 /**
  * Typographic headline classes
- * @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
+ * @variant {4x-large | 3x-large | 2x-large | x-large | large | medium} syn-heading The size of the headline
  */
+.syn-heading--medium {
+  font: var(--syn-heading-medium);
+}
+
 .syn-heading--large {
   font: var(--syn-heading-large);
 }
@@ -17,3 +21,7 @@
 .syn-heading--3x-large {
   font: var(--syn-heading-3x-large);
 }
+
+.syn-heading--4x-large {
+  font: var(--syn-heading-4x-large);
+}

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  */
 
@@ -2198,6 +2198,11 @@ export const SynBodyLargeSemibold: string;
  */
 export const SynBodyLargeBold: string;
 
+/**
+ * Maps to the css variable `--syn-body-2x-small-regular`
+ */
+export const SynBody2xSmallRegular: string;
+
 /**
  * Maps to the css variable `--syn-heading-large`
  */
@@ -2218,6 +2223,16 @@ export const SynHeading2xLarge: string;
  */
 export const SynHeading3xLarge: string;
 
+/**
+ * Maps to the css variable `--syn-heading-medium`
+ */
+export const SynHeadingMedium: string;
+
+/**
+ * Maps to the css variable `--syn-heading-4x-large`
+ */
+export const SynHeading4xLarge: string;
+
 /**
  * Maps to the css variable `--syn-focus-ring`
  */

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  */
 
@@ -2198,6 +2198,11 @@ export const SynBodyLargeSemibold = 'var(--syn-body-large-semibold)';
  */
 export const SynBodyLargeBold = 'var(--syn-body-large-bold)';
 
+/**
+ * @type {string}
+ */
+export const SynBody2xSmallRegular = 'var(--syn-body-2x-small-regular)';
+
 /**
  * @type {string}
  */
@@ -2218,6 +2223,16 @@ export const SynHeading2xLarge = 'var(--syn-heading-2x-large)';
  */
 export const SynHeading3xLarge = 'var(--syn-heading-3x-large)';
 
+/**
+ * @type {string}
+ */
+export const SynHeadingMedium = 'var(--syn-heading-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynHeading4xLarge = 'var(--syn-heading-4x-large)';
+
 /**
  * @type {string}
  */

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  */
 $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -441,8 +441,11 @@ $SynBodyMediumBold: var(--syn-body-medium-bold) !default;
 $SynBodyLargeRegular: var(--syn-body-large-regular) !default;
 $SynBodyLargeSemibold: var(--syn-body-large-semibold) !default;
 $SynBodyLargeBold: var(--syn-body-large-bold) !default;
+$SynBody2xSmallRegular: var(--syn-body-2x-small-regular) !default;
 $SynHeadingLarge: var(--syn-heading-large) !default;
 $SynHeadingXLarge: var(--syn-heading-x-large) !default;
 $SynHeading2xLarge: var(--syn-heading-2x-large) !default;
 $SynHeading3xLarge: var(--syn-heading-3x-large) !default;
+$SynHeadingMedium: var(--syn-heading-medium) !default;
+$SynHeading4xLarge: var(--syn-heading-4x-large) !default;
 $SynFocusRing: var(--syn-focus-ring) !default;

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -446,9 +446,12 @@
   --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-2x-small-regular: 400 11px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-medium: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-4x-large: 700 52px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
 }

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -446,9 +446,12 @@
   --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-2x-small-regular: 400 11px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-medium: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-4x-large: 700 52px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
 }

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -446,9 +446,12 @@
   --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-2x-small-regular: 400 11px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-medium: 600 18px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-4x-large: 400 52px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
 }

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.12.1
+ * @synergy-design-system/tokens version 3.13.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -446,9 +446,12 @@
   --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-2x-small-regular: 400 11px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-medium: 600 18px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-4x-large: 400 52px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
 }

package/data/manifest.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-04-28T09:14:39.906Z",
+  "builtAt": "2026-04-29T13:20:40.659Z",
   "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/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/components": "3.12.1",
-    "@synergy-design-system/fonts": "1.0.6",
-    "@synergy-design-system/styles": "2.0.4",
-    "@synergy-design-system/tokens": "^3.12.1"
+    "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/components": "3.13.1",
+    "@synergy-design-system/styles": "2.1.0",
+    "@synergy-design-system/tokens": "^3.13.1",
+    "@synergy-design-system/fonts": "1.0.6"
   },
   "exports": {
     ".": {
@@ -65,7 +65,7 @@
   },
   "types": "./dist/index.d.ts",
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.2.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);
-  }
-`;