@synergy-design-system/metadata 3.17.0 → 3.18.0

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

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

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  */
 $SynChartCategorical10: var(--syn-chart-categorical-10) !default;

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

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

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

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

package/data/layers/full/tokens/figma-variables/sick2018-dark.json

@@ -1671,6 +1671,26 @@
       }
     }
   },
+  "radio-button": {
+    "border": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.700}"
+      },
+      "radius-large": {
+        "type": "sizing",
+        "value": "{border-radius.none}"
+      },
+      "radius-medium": {
+        "type": "sizing",
+        "value": "{border-radius.none}"
+      },
+      "radius-small": {
+        "type": "sizing",
+        "value": "{border-radius.none}"
+      }
+    }
+  },
   "range": {
     "color-inactive": {
       "type": "color",

package/data/layers/full/tokens/figma-variables/sick2018-light.json

@@ -1671,6 +1671,26 @@
       }
     }
   },
+  "radio-button": {
+    "border": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.700}"
+      },
+      "radius-large": {
+        "type": "sizing",
+        "value": "{border-radius.none}"
+      },
+      "radius-medium": {
+        "type": "sizing",
+        "value": "{border-radius.none}"
+      },
+      "radius-small": {
+        "type": "sizing",
+        "value": "{border-radius.none}"
+      }
+    }
+  },
   "range": {
     "color-inactive": {
       "type": "color",

package/data/layers/full/tokens/figma-variables/sick2025-dark.json

@@ -1671,6 +1671,26 @@
       }
     }
   },
+  "radio-button": {
+    "border": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.1000}"
+      },
+      "radius-large": {
+        "type": "sizing",
+        "value": "{border-radius.small}"
+      },
+      "radius-medium": {
+        "type": "sizing",
+        "value": "{border-radius.small}"
+      },
+      "radius-small": {
+        "type": "sizing",
+        "value": "{border-radius.small}"
+      }
+    }
+  },
   "range": {
     "color-inactive": {
       "type": "color",

package/data/layers/full/tokens/figma-variables/sick2025-light.json

@@ -1671,6 +1671,26 @@
       }
     }
   },
+  "radio-button": {
+    "border": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.950}"
+      },
+      "radius-large": {
+        "type": "sizing",
+        "value": "{border-radius.small}"
+      },
+      "radius-medium": {
+        "type": "sizing",
+        "value": "{border-radius.small}"
+      },
+      "radius-small": {
+        "type": "sizing",
+        "value": "{border-radius.small}"
+      }
+    }
+  },
   "range": {
     "color-inactive": {
       "type": "color",

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  */
 
@@ -1768,6 +1768,26 @@ export const SynProgressIndicatorColor: string;
  */
 export const SynProgressTrackColor: string;
 
+/**
+ * Maps to the css variable `--syn-radio-button-border-color`
+ */
+export const SynRadioButtonBorderColor: string;
+
+/**
+ * Maps to the css variable `--syn-radio-button-border-radius-large`
+ */
+export const SynRadioButtonBorderRadiusLarge: string;
+
+/**
+ * Maps to the css variable `--syn-radio-button-border-radius-medium`
+ */
+export const SynRadioButtonBorderRadiusMedium: string;
+
+/**
+ * Maps to the css variable `--syn-radio-button-border-radius-small`
+ */
+export const SynRadioButtonBorderRadiusSmall: string;
+
 /**
  * Maps to the css variable `--syn-range-color-inactive`
  */

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  */
 
@@ -1768,6 +1768,26 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
  */
 export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
 
+/**
+ * @type {string}
+ */
+export const SynRadioButtonBorderColor = 'var(--syn-radio-button-border-color)';
+
+/**
+ * @type {string}
+ */
+export const SynRadioButtonBorderRadiusLarge = 'var(--syn-radio-button-border-radius-large)';
+
+/**
+ * @type {string}
+ */
+export const SynRadioButtonBorderRadiusMedium = 'var(--syn-radio-button-border-radius-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynRadioButtonBorderRadiusSmall = 'var(--syn-radio-button-border-radius-small)';
+
 /**
  * @type {string}
  */

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  */
 $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -355,6 +355,10 @@ $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
 $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
 $SynProgressIndicatorColor: var(--syn-progress-indicator-color) !default;
 $SynProgressTrackColor: var(--syn-progress-track-color) !default;
+$SynRadioButtonBorderColor: var(--syn-radio-button-border-color) !default;
+$SynRadioButtonBorderRadiusLarge: var(--syn-radio-button-border-radius-large) !default;
+$SynRadioButtonBorderRadiusMedium: var(--syn-radio-button-border-radius-medium) !default;
+$SynRadioButtonBorderRadiusSmall: var(--syn-radio-button-border-radius-small) !default;
 $SynRangeColorInactive: var(--syn-range-color-inactive) !default;
 $SynRangeErrorColor: var(--syn-range-error-color) !default;
 $SynRangeTickColor: var(--syn-range-tick-color) !default;

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -360,6 +360,10 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-600);
   --syn-progress-track-color: var(--syn-color-neutral-200);
+  --syn-radio-button-border-color: var(--syn-color-neutral-700);
+  --syn-radio-button-border-radius-large: var(--syn-border-radius-none);
+  --syn-radio-button-border-radius-medium: var(--syn-border-radius-none);
+  --syn-radio-button-border-radius-small: var(--syn-border-radius-none);
   --syn-range-color-inactive: var(--syn-color-neutral-200);
   --syn-range-error-color: var(--syn-color-error-700);
   --syn-range-tick-color: var(--syn-color-neutral-400);

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -360,6 +360,10 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-600);
   --syn-progress-track-color: var(--syn-color-neutral-200);
+  --syn-radio-button-border-color: var(--syn-color-neutral-700);
+  --syn-radio-button-border-radius-large: var(--syn-border-radius-none);
+  --syn-radio-button-border-radius-medium: var(--syn-border-radius-none);
+  --syn-radio-button-border-radius-small: var(--syn-border-radius-none);
   --syn-range-color-inactive: var(--syn-color-neutral-200);
   --syn-range-error-color: var(--syn-color-error-700);
   --syn-range-tick-color: var(--syn-color-neutral-400);

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -360,6 +360,10 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-500);
   --syn-progress-track-color: var(--syn-color-neutral-300);
+  --syn-radio-button-border-color: var(--syn-color-neutral-1000);
+  --syn-radio-button-border-radius-large: var(--syn-border-radius-small);
+  --syn-radio-button-border-radius-medium: var(--syn-border-radius-small);
+  --syn-radio-button-border-radius-small: var(--syn-border-radius-small);
   --syn-range-color-inactive: var(--syn-color-neutral-300);
   --syn-range-error-color: var(--syn-color-error-600);
   --syn-range-tick-color: var(--syn-color-neutral-600);

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

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.16.0
+ * @synergy-design-system/tokens version 3.17.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -360,6 +360,10 @@
   --syn-panel-border-width: var(--syn-border-width-small);
   --syn-progress-indicator-color: var(--syn-color-primary-700);
   --syn-progress-track-color: var(--syn-color-neutral-100);
+  --syn-radio-button-border-color: var(--syn-color-neutral-950);
+  --syn-radio-button-border-radius-large: var(--syn-border-radius-small);
+  --syn-radio-button-border-radius-medium: var(--syn-border-radius-small);
+  --syn-radio-button-border-radius-small: var(--syn-border-radius-small);
   --syn-range-color-inactive: var(--syn-color-neutral-100);
   --syn-range-error-color: var(--syn-color-error-600);
   --syn-range-tick-color: var(--syn-color-neutral-500);

package/data/layers/interface/component/component:syn-radio-button.json

@@ -10,9 +10,9 @@
     },
     {
       "default": "false",
-      "description": "Draws a pill-style radio button with rounded edges.",
-      "fieldName": "pill",
-      "name": "pill",
+      "description": "Sets the radio button to a readonly state.",
+      "fieldName": "readonly",
+      "name": "readonly",
       "reflects": true,
       "type": "boolean"
     },
@@ -72,6 +72,8 @@
       "type": "SynFocusEvent"
     }
   ],
+  "figmaComponentId": "47863-30109",
+  "figmaDocsId": "49697-83768",
   "methods": [
     {
       "description": "Removes focus from the radio button.",
@@ -95,6 +97,12 @@
     }
   ],
   "properties": [
+    {
+      "access": "public",
+      "description": "",
+      "name": "defaultSlot",
+      "type": "HTMLSlotElement"
+    },
     {
       "access": "public",
       "default": "false",
@@ -109,12 +117,6 @@
       "name": "hasFocus",
       "type": "boolean"
     },
-    {
-      "access": "public",
-      "description": "",
-      "name": "hiddenInput",
-      "type": "HTMLInputElement"
-    },
     {
       "access": "public",
       "description": "",
@@ -124,8 +126,8 @@
     {
       "access": "public",
       "default": "false",
-      "description": "Draws a pill-style radio button with rounded edges.",
-      "name": "pill",
+      "description": "Sets the radio button to a readonly state.",
+      "name": "readonly",
       "type": "boolean"
     },
     {
@@ -142,7 +144,7 @@
       "type": "string | number"
     }
   ],
-  "since": "1.0.0",
+  "since": "3.17.0",
   "slots": [
     {
       "description": "The radio button's label.",

package/data/layers/interface/component/component:syn-radio-button.md

@@ -7,6 +7,8 @@ Radios buttons allow the user to select a single option from a group using a but
 ## Documentation
 
 - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs)
+- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=49697-83768)
+- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=47863-30109)
 
 ## Class Information
 
@@ -16,7 +18,7 @@ Radios buttons allow the user to select a single option from a group using a but
 ## Usage Information
 
 - **Status:** stable
-- **Since:** 1.0.0
+- **Since:** 3.17.0
 
 ## Available Slots
 
@@ -35,14 +37,14 @@ default: `false`
 
 Disables the radio button.
 
-### pill
+### readonly
 
-attribute: `pill`
+attribute: `readonly`
 reflects: yes
 type: `boolean`
 default: `false`
 
-Draws a pill-style radio button with rounded edges.
+Sets the radio button to a readonly state.
 
 ### size
 

package/data/layers/rules/component/component:syn-radio-button.md

@@ -6,22 +6,26 @@ Radios buttons allow the user to select a single option from a group using a but
 
 ## Common Use Cases
 
-- Select one option from a group where one is already preselected.
-- Switch between groups of settings.
-- Filter views by a parent category.
+- Filter or switch between views with button-style appearance and icon support.
+- Select one option from a group where one is already preselected and no invalid state exists.
+- Switch between groups of settings with visual button presentation.
+- Display categorization choices with prominent, icon-enhanced options.
+- Preference or mode selection in UI controls where traditional form input is not needed.
 
 ## Usage Guidelines
 
-### Background
+### When to Use
 
-- Use with light background options such as white, neutral-100, or primary-100.
+- Use syn-radio-button when you need button-style appearance for single option selection.
+- Use syn-radio for traditional radio button appearance.
+- Both work as form inputs when slotted inside syn-radio-group; the difference is visual presentation.
+- Choose syn-radio-button for use cases like filtering, view switching, or category selection where button styling enhances UX.
+- Slot inside syn-radio-group to participate in form submission and group state management.
+- Use only in groups, as they are designed to allow the user to activate one of several options. For single options, use syn-checkbox instead.
 
 ### Behavior
 
-- Don't use as input method in forms, for they are not form elements. Use syn-radio instead.
-- Slot inside of an syn-radio-group.
-- Use only in groups, as they are designed to allow the user to activate one of several options. To work with a single option, use syn-checkbox instead.
-- Pre-select always a "default" value; there is no invalid state.
+- Always pre-select a "default" value. There is no invalid state; one option must always be selected.
 - Limit the number of options in the group. Users should be able to retain all options available and not be overwhelmed by them.
 
 ### Content
@@ -36,8 +40,9 @@ Radios buttons allow the user to select a single option from a group using a but
 
 ## Accessibility
 
-- Provide meaningful alternative text for icon-only radio buttons.
-- Communicate the group's function-such as filtering or view switching-through clear context or labels.
+- Provide meaningful alternative text for icon-only radio buttons using the label attribute.
+- Communicate the group's function—such as filtering or view switching—through clear context or labels.
+- Ensure each button option has a unique, non-ambiguous label to help assistive technology users understand their choices.
 
 ## Related Components
 

package/data/manifest.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-06-24T10:06:47.287Z",
+  "builtAt": "2026-06-30T12:09:05.534Z",
   "sources": [
     {
       "entityCount": 4,

package/dist/intentPolicy/domains/input/capabilities.js

@@ -27,6 +27,10 @@ export const inputCapabilities = [
         categories: ['input'],
         target: { id: 'component:syn-radio-group', kind: 'component', name: 'syn-radio-group' },
     },
+    {
+        categories: ['input'],
+        target: { id: 'component:syn-radio-button', kind: 'component', name: 'syn-radio-button' },
+    },
     {
         categories: ['input'],
         target: { id: 'component:syn-file', kind: 'component', name: 'syn-file' },

package/dist/intentPolicy/domains/input/patterns.js

@@ -75,6 +75,15 @@ export const inputPatterns = [
         notes: ['Provide one default selected option as recommended in component usage rules.'],
         target: { id: 'component:syn-radio-group', kind: 'component', name: 'syn-radio-group' },
     },
+    {
+        description: 'Single selectable option used within a radio-button group.',
+        intent: 'input.selection.single',
+        notes: [
+            'Use inside syn-radio-group to provide one explicit selection among related options.',
+            'Provide a default selected value at group level, as recommended in component usage rules.',
+        ],
+        target: { id: 'component:syn-radio-button', kind: 'component', name: 'syn-radio-button' },
+    },
     {
         description: 'File attachment or upload control with optional multi-file mode.',
         intent: 'input.file.upload',

package/package.json

@@ -22,11 +22,11 @@
     "serve-handler": "^6.1.7",
     "typescript": "^5.9.3",
     "zod": "^4.4.3",
-    "@synergy-design-system/components": "3.16.0",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/components": "3.17.0",
     "@synergy-design-system/styles": "2.1.2",
-    "@synergy-design-system/tokens": "^3.16.0",
+    "@synergy-design-system/tokens": "^3.17.0",
     "@synergy-design-system/fonts": "1.0.8"
   },
   "exports": {
@@ -70,7 +70,7 @@
   },
   "types": "./dist/index.d.ts",
   "type": "module",
-  "version": "3.17.0",
+  "version": "3.18.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",