@synergy-design-system/metadata 3.16.1 → 3.18.0

package/data/layers/interface/component/component:syn-chart.json

@@ -6,7 +6,7 @@
       "fieldName": "palette",
       "name": "palette",
       "reflects": true,
-      "type": "SynChartPalette"
+      "type": "ChartPalette"
     }
   ],
   "cssParts": [
@@ -30,19 +30,19 @@
     {
       "access": "public",
       "default": "{}",
-      "description": "The ECharts configuration option object.\n\nThis property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.\nConsult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\nand assign the object directly to this property.\n\n> **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.\n> Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.\n\nAssigning a new object completely replaces the previous chart configuration (`notMerge: true`).\nTo update only parts of the chart, access the underlying ECharts instance directly and\ncall `setOption()` with custom merge options.",
+      "description": "The ECharts configuration input.\n\nThis property accepts either:\n- a plain `ECConfig` object, or\n- a callback that receives a typed preset handle and applies chart presets.\n\nThe resolved result maps 1:1 to the ECharts `option` parameter passed to\n`setOption()`.\nConsult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\nand assign either the object directly or build it through the handle.\n\n> **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.\n> Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.\n\nAssigning a new config input completely replaces the previous chart\nconfiguration (`notMerge: true`).\nTo update only parts of the chart, access the underlying ECharts instance directly and\ncall `setOption()` with custom merge options.",
       "name": "config",
-      "type": "ECConfig"
+      "type": "ChartConfigType"
     },
     {
       "access": "public",
       "default": "'categorical'",
       "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n  `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n  `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
       "name": "palette",
-      "type": "SynChartPalette"
+      "type": "ChartPalette"
     }
   ],
-  "since": "0.0.0",
+  "since": "3.15.0",
   "slots": [],
   "sourceModulePath": "components/chart/chart.js",
   "status": "experimental",

package/data/layers/interface/component/component:syn-chart.md

@@ -17,7 +17,7 @@ The `<syn-chart>` component is a container for displaying charts. It provides a
 ## Usage Information
 
 - **Status:** experimental
-- **Since:** 0.0.0
+- **Since:** 3.15.0
 
 ## Available Properties
 
@@ -25,16 +25,16 @@ The `<syn-chart>` component is a container for displaying charts. It provides a
 
 attribute: -
 reflects: -
-type: `ECConfig`
+type: `ChartConfigType`
 default: `{}`
 
-The ECharts configuration option object. This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`. Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html) and assign the object directly to this property. > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported. > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested. Assigning a new object completely replaces the previous chart configuration (`notMerge: true`). To update only parts of the chart, access the underlying ECharts instance directly and call `setOption()` with custom merge options.
+The ECharts configuration input. This property accepts either: - a plain `ECConfig` object, or - a callback that receives a typed preset handle and applies chart presets. The resolved result maps 1:1 to the ECharts `option` parameter passed to `setOption()`. Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html) and assign either the object directly or build it through the handle. > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported. > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested. Assigning a new config input completely replaces the previous chart configuration (`notMerge: true`). To update only parts of the chart, access the underlying ECharts instance directly and call `setOption()` with custom merge options.
 
 ### palette
 
 attribute: `palette`
 reflects: yes
-type: `SynChartPalette`
+type: `ChartPalette`
 default: `'categorical'`
 
 The color palette to apply to chart series. - `categorical` (default) — 12 distinct colors for comparing unrelated data series - `sequential-01` … `sequential-07` — 10-step single-hue ramps: `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral - `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`, `sequential-status-success`, `sequential-status-warning` — 10-step status ramps The palette sets the ECharts `color` array. If `config.color` is explicitly provided, it takes precedence over the palette.

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-24T08:51:18.865Z",
+  "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,12 +22,12 @@
     "serve-handler": "^6.1.7",
     "typescript": "^5.9.3",
     "zod": "^4.4.3",
-    "@synergy-design-system/components": "3.15.7",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/fonts": "1.0.8",
     "@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.15.7"
+    "@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.16.1",
+  "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",

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

@@ -1,245 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .button {
-    font-weight: var(--syn-font-weight-bold);
-  }
-
-  .button:focus-visible {
-    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);
-    outline-offset: var(--syn-focus-ring-width);
-  }
-
-  /** #429: Use token for opacity */
-  .button--disabled {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /*
-   * Adjustments for button label paddings
-   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
-   */
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--syn-spacing-2x-small);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--syn-spacing-2x-small);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--syn-spacing-x-small);
-  }
-
-  /**
-   * Icon-only buttons
-   */
-  .button--small .button__label.button__icon-only {
-    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));
-  }
-
-  .button--small .button__label::slotted(syn-icon) {
-    font-size: var(--syn-font-size-medium);
-    vertical-align: -3px;
-  }
-
-  .button--medium .button__label.button__icon-only {
-    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));
-  }
-
-  .button--medium .button__label::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-    vertical-align: -6px;
-  }
-
-  .button--large .button__label.button__icon-only {
-    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));
-  }
-
-  .button--large .button__label::slotted(syn-icon) {
-    font-size: var(--syn-font-size-2x-large);
-    vertical-align: -8px;
-  }
-
-  /**
-   * Size modifiers
-   */
-  .button--small {
-    border-radius: var(--syn-button-border-radius-small);
-  }
-
-  .button--medium {
-    border-radius: var(--syn-button-border-radius-medium);
-  }
-
-  .button--large {
-    border-radius: var(--syn-button-border-radius-large);
-  }
-
-  /*
-   * Standard buttons
-   */
-  .button--filled.button--primary {
-    background: var(--syn-button-color);
-    border-color: var(--syn-button-color);
-    color: var(--syn-button-filled-color-text);
-  }
-
-  .button--filled.button--primary.button--disabled {
-    background-color: var(--syn-color-neutral-600);
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-typography-color-text-inverted);
-  }
-
-  .button--filled.button--primary:hover:not(.button--disabled) {
-    background-color: var(--syn-button-color-hover);
-    border-color: var(--syn-button-color-hover);
-    color: var(--syn-button-filled-color-text-hover);
-  }
-
-  .button--filled.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-button-color-active);
-    border-color: var(--syn-button-color-active);
-    color: var(--syn-button-filled-color-text-active);
-  }
-
-  /*
-   * Outline buttons
-   */
-  .button--outline {
-    /** #901: Use token for border width */
-    border-width: var(--syn-input-border-width);
-  }
-
-  .button--outline.button--primary {
-    border-color: var(--syn-button-color);
-    color: var(--syn-button-outline-color-text);
-  }
-
-  .button--outline.button--primary.button--disabled {
-    background: none;
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-600);
-  }
-
-  .button--outline.button--primary:hover:not(.button--disabled),
-  .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background-color: var(--syn-button-outline-color-hover);
-    border-color: var(--syn-button-outline-color-hover);
-    color: var(--syn-button-outline-color-text-hover);
-  }
-
-  .button--outline.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-button-outline-color-active);
-    border-color: var(--syn-button-outline-color-active);
-    color: var(--syn-button-outline-color-text-active);
-  }
-
-  /*
-   * Text buttons
-   */
-  .button--text {
-    color: var(--syn-button-text-color-text);
-  }
-
-  .button--text:hover:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-hover);
-  }
-
-  .button--text:focus-visible:not(.button--disabled) {
-    color: var(--syn-button-color);
-  }
-
-  .button--text.button--primary:active:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-active);
-  }
-
-  .button--text.button--primary.button--disabled {
-    color: var(--syn-color-neutral-600);
-  }
-
-  /**
-   * Button spacing
-   */
-  .button.button--small.button--has-label.button--has-prefix {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button.button--small.button--has-label.button--has-suffix {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button.button--small.button--has-prefix .button__prefix, 
-  .button.button--small.button--has-suffix .button__suffix {
-    font-size: var(--syn-spacing-medium);
-  }
-
-  .button.button--medium.button--has-label.button--has-prefix {
-    padding-inline-start: var(--syn-spacing-medium);
-  } 
-
-  .button.button--medium.button--has-label.button--has-suffix {
-    padding-inline-end: var(--syn-spacing-medium);
-  }
-
-  .button.button--medium.button--has-prefix .button__prefix, 
-  .button.button--medium.button--has-suffix .button__suffix {
-    font-size: var(--syn-spacing-large);
-  }
-
-  .button.button--large.button--has-label.button--has-prefix {
-    padding-inline-start: var(--syn-spacing-large);
-  }
-
-  .button.button--large.button--has-label.button--has-prefix .button__label {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button.button--large.button--has-label.button--has-suffix {
-    padding-inline-end: var(--syn-spacing-large);
-  }
-
-  .button.button--large.button--has-label.button--has-suffix .button__label {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button.button--large.button--has-prefix .button__prefix, 
-  .button.button--large.button--has-suffix .button__suffix {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  /*
-   * Caret modifier
-   */
-  .button--caret.button--small .button__caret{
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .button--caret.button--medium .button__caret{
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .button--caret.button--large .button__caret{
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  /* #392: Button Groups */
-  :host([data-syn-button-group__button--inner]) .button--filled.button {
-    border-left-color: var(--syn-panel-background-color);
-    border-right-color: var(--syn-panel-background-color);
-  }
-
-  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
-    border-right-color: var(--syn-panel-background-color);
-  }
-
-  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
-    border-left-color: var(--syn-panel-background-color);
-  }
-`;

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

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-`;