@synergy-design-system/metadata 3.16.1 → 3.18.0

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

@@ -1,5 +1,5 @@
 import {
-  type EChartsType, init, use,
+  type EChartsType, init, registerPreprocessor, registerTheme, use,
 } from 'echarts/core.js';
 import { CanvasRenderer } from 'echarts/renderers.js';
 import { html } from 'lit';
@@ -10,12 +10,14 @@ import { LineChart } from 'echarts/charts.js';
 import {
   GridComponent, LegendComponent, TitleComponent, TooltipComponent,
 } from 'echarts/components.js';
-import { classMap } from 'lit/directives/class-map.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import componentStyles from '../../styles/component.styles.js';
 import styles from './chart.styles.js';
-import { PALETTE_TOKENS, type SynChartPalette } from './chart.palettes.js';
-import type { ECConfig } from './types.js';
+import { type ChartPalette, PALETTE_TOKENS } from './chart.palettes.js';
+import { resolveConfigInput } from './configs/config.js';
+import type { ChartConfigType, ECConfig } from './types.js';
+import { synergyLightTheme } from './themes/light.js';
+import { applyAxisDefaultsPreprocessor } from './configs/axes/utilities.js';
 
 // TODO: Check, should we let the user define the *use* so the bundle size is optimized for their specific use case?
 use([
@@ -32,7 +34,7 @@ use([
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -49,31 +51,59 @@ export default class SynChart extends SynergyElement {
 
   private resizeObserver: ResizeObserver;
 
+  private resolvedConfig: ECConfig = {};
+
   /**
-   * The ECharts configuration option object.
+   * 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.
    *
-   * This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+   * 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 the object directly to this property.
+   * 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 object completely replaces the previous chart configuration (`notMerge: true`).
+   * 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.
    *
    * @example
    * ```js
+   * // Using a plain object
    * chart.config = {
    *   xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    *   yAxis: { type: 'value' },
    *   series: [{ type: 'line', data: [150, 230, 224] }],
    * };
+   *
+   * // Using the handle with method chaining
+   * chart.config = (handle) => handle
+   *   .baseConfig({
+   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *     yAxis: { type: 'value' },
+   *     series: [{ type: 'line', data: [150, 230, 224] }],
+   *   })
+   *   .axesShowSplitLines();
+   *
+   * // Using the handle with sequential calls
+   * chart.config = (handle) => {
+   *   handle.baseConfig({
+   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *     yAxis: { type: 'value' },
+   *     series: [{ type: 'line', data: [150, 230, 224] }],
+   *   });
+   *   handle.axesShowSplitLines();
+   * };
    * ```
    */
   @property({ attribute: false })
-  config: ECConfig = {};
+  config: ChartConfigType = {};
 
   /**
    * The color palette to apply to chart series.
@@ -88,13 +118,13 @@ export default class SynChart extends SynergyElement {
    * it takes precedence over the palette.
    */
   @property({ reflect: true })
-  palette: SynChartPalette = 'categorical';
+  palette: ChartPalette = 'categorical';
 
   /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
   private applyPalette(): void {
     if (!this.chartInstance) return;
     // If the user explicitly set config.color, respect it — palette is a default only
-    if (Array.isArray(this.config.color) && this.config.color.length > 0) return;
+    if (Array.isArray(this.resolvedConfig.color) && this.resolvedConfig.color.length > 0) return;
 
     const tokens = PALETTE_TOKENS[this.palette];
     const computedStyles = getComputedStyle(this);
@@ -103,23 +133,41 @@ export default class SynChart extends SynergyElement {
       .filter(Boolean);
 
     if (colors.length > 0) {
-      this.chartInstance.setOption({ color: colors }, { notMerge: false });
+      const oldOption = this.chartInstance.getOption();
+      if (!oldOption) return;
+
+      oldOption.color = colors;
+      // We can not only replace 'color' via { replaceMerge: ['color'] }. Echarts does not allow to do this.
+      // Therefore we need to completely replace it, with the old option but new color.
+      this.chartInstance.setOption(oldOption, { notMerge: true });
     }
   }
 
   protected updated(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('config') && this.chartInstance) {
-      this.chartInstance.setOption(this.config, { notMerge: true });
+      this.resolvedConfig = resolveConfigInput(this.config);
+      this.chartInstance.setOption(this.resolvedConfig, { notMerge: true });
     }
     if ((changedProperties.has('palette') || changedProperties.has('config')) && this.chartInstance) {
       this.applyPalette();
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    registerTheme('default', synergyLightTheme);
+    /**
+     * Depending if x-axis or y-axis, the axis name has different positions and alignments. This preprocessor ensures that the correct styles are applied to the axis names based on the axis type.
+     * This is needed because ECharts does not provide a way to set specific styles for x and y axis, only for axis types.
+     */
+    registerPreprocessor(applyAxisDefaultsPreprocessor);
+  }
+
   // Initialize echarts instance and resize observer
   protected firstUpdated(_changedProperties: PropertyValues): void {
     if (this.chartContainer !== null && this.chartContainer !== undefined) {
-      this.chartInstance = init(this.chartContainer);
+      this.chartInstance = init(this.chartContainer, 'default');
+
       // Resize observer
       this.resizeObserver = new ResizeObserver(() => {
         this.chartInstance?.resize();
@@ -127,8 +175,9 @@ export default class SynChart extends SynergyElement {
       this.resizeObserver.observe(this.chartContainer);
 
       // Apply config if already set before first render
-      if (Object.keys(this.config).length > 0) {
-        this.chartInstance.setOption(this.config);
+      this.resolvedConfig = resolveConfigInput(this.config);
+      if (Object.keys(this.resolvedConfig).length > 0) {
+        this.chartInstance.setOption(this.resolvedConfig);
       }
       // Apply palette after config so colors blend in without replacing the full config
       this.applyPalette();
@@ -172,9 +221,7 @@ export default class SynChart extends SynergyElement {
     return html`
       <div
         part="base"
-        class=${classMap({
-          chart: true,
-        })}>
+        class="chart">
       </div>
     `;
   }

package/data/layers/full/component/component:syn-chart/components/chart.palettes.ts

@@ -7,7 +7,7 @@
  *   (`01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral)
  * - `sequential-status-critical/error/info/success/warning` — 10-step status color ramps, ordered from darkest to brightest
  */
-export type SynChartPalette =
+export type ChartPalette =
   | 'categorical'
   | 'sequential-01'
   | 'sequential-02'
@@ -23,88 +23,88 @@ export type SynChartPalette =
   | 'sequential-status-warning';
 
 /** Maps each palette name to the ordered list of CSS custom property names to resolve. */
-export const PALETTE_TOKENS: Record<SynChartPalette, string[]> = {
+export const PALETTE_TOKENS: Record<ChartPalette, string[]> = {
   categorical: [
-    '--syn-categorical-01', '--syn-categorical-02', '--syn-categorical-03',
-    '--syn-categorical-04', '--syn-categorical-05', '--syn-categorical-06',
-    '--syn-categorical-07', '--syn-categorical-08', '--syn-categorical-09',
-    '--syn-categorical-10', '--syn-categorical-11', '--syn-categorical-12',
+    '--syn-chart-categorical-01', '--syn-chart-categorical-02', '--syn-chart-categorical-03',
+    '--syn-chart-categorical-04', '--syn-chart-categorical-05', '--syn-chart-categorical-06',
+    '--syn-chart-categorical-07', '--syn-chart-categorical-08', '--syn-chart-categorical-09',
+    '--syn-chart-categorical-10', '--syn-chart-categorical-11', '--syn-chart-categorical-12',
   ],
   'sequential-01': [
-    '--syn-sequential-01-100', '--syn-sequential-01-90', '--syn-sequential-01-80',
-    '--syn-sequential-01-70', '--syn-sequential-01-60', '--syn-sequential-01-50',
-    '--syn-sequential-01-40', '--syn-sequential-01-30', '--syn-sequential-01-20',
-    '--syn-sequential-01-10',
+    '--syn-chart-sequential-01-100', '--syn-chart-sequential-01-90', '--syn-chart-sequential-01-80',
+    '--syn-chart-sequential-01-70', '--syn-chart-sequential-01-60', '--syn-chart-sequential-01-50',
+    '--syn-chart-sequential-01-40', '--syn-chart-sequential-01-30', '--syn-chart-sequential-01-20',
+    '--syn-chart-sequential-01-10',
   ],
   'sequential-02': [
-    '--syn-sequential-02-100', '--syn-sequential-02-90', '--syn-sequential-02-80',
-    '--syn-sequential-02-70', '--syn-sequential-02-60', '--syn-sequential-02-50',
-    '--syn-sequential-02-40', '--syn-sequential-02-30', '--syn-sequential-02-20',
-    '--syn-sequential-02-10',
+    '--syn-chart-sequential-02-100', '--syn-chart-sequential-02-90', '--syn-chart-sequential-02-80',
+    '--syn-chart-sequential-02-70', '--syn-chart-sequential-02-60', '--syn-chart-sequential-02-50',
+    '--syn-chart-sequential-02-40', '--syn-chart-sequential-02-30', '--syn-chart-sequential-02-20',
+    '--syn-chart-sequential-02-10',
   ],
   'sequential-03': [
-    '--syn-sequential-03-100', '--syn-sequential-03-90', '--syn-sequential-03-80',
-    '--syn-sequential-03-70', '--syn-sequential-03-60', '--syn-sequential-03-50',
-    '--syn-sequential-03-40', '--syn-sequential-03-30', '--syn-sequential-03-20',
-    '--syn-sequential-03-10',
+    '--syn-chart-sequential-03-100', '--syn-chart-sequential-03-90', '--syn-chart-sequential-03-80',
+    '--syn-chart-sequential-03-70', '--syn-chart-sequential-03-60', '--syn-chart-sequential-03-50',
+    '--syn-chart-sequential-03-40', '--syn-chart-sequential-03-30', '--syn-chart-sequential-03-20',
+    '--syn-chart-sequential-03-10',
   ],
   'sequential-04': [
-    '--syn-sequential-04-100', '--syn-sequential-04-90', '--syn-sequential-04-80',
-    '--syn-sequential-04-70', '--syn-sequential-04-60', '--syn-sequential-04-50',
-    '--syn-sequential-04-40', '--syn-sequential-04-30', '--syn-sequential-04-20',
-    '--syn-sequential-04-10',
+    '--syn-chart-sequential-04-100', '--syn-chart-sequential-04-90', '--syn-chart-sequential-04-80',
+    '--syn-chart-sequential-04-70', '--syn-chart-sequential-04-60', '--syn-chart-sequential-04-50',
+    '--syn-chart-sequential-04-40', '--syn-chart-sequential-04-30', '--syn-chart-sequential-04-20',
+    '--syn-chart-sequential-04-10',
   ],
   'sequential-05': [
-    '--syn-sequential-05-100', '--syn-sequential-05-90', '--syn-sequential-05-80',
-    '--syn-sequential-05-70', '--syn-sequential-05-60', '--syn-sequential-05-50',
-    '--syn-sequential-05-40', '--syn-sequential-05-30', '--syn-sequential-05-20',
-    '--syn-sequential-05-10',
+    '--syn-chart-sequential-05-100', '--syn-chart-sequential-05-90', '--syn-chart-sequential-05-80',
+    '--syn-chart-sequential-05-70', '--syn-chart-sequential-05-60', '--syn-chart-sequential-05-50',
+    '--syn-chart-sequential-05-40', '--syn-chart-sequential-05-30', '--syn-chart-sequential-05-20',
+    '--syn-chart-sequential-05-10',
   ],
   'sequential-06': [
-    '--syn-sequential-06-100', '--syn-sequential-06-90', '--syn-sequential-06-80',
-    '--syn-sequential-06-70', '--syn-sequential-06-60', '--syn-sequential-06-50',
-    '--syn-sequential-06-40', '--syn-sequential-06-30', '--syn-sequential-06-20',
-    '--syn-sequential-06-10',
+    '--syn-chart-sequential-06-100', '--syn-chart-sequential-06-90', '--syn-chart-sequential-06-80',
+    '--syn-chart-sequential-06-70', '--syn-chart-sequential-06-60', '--syn-chart-sequential-06-50',
+    '--syn-chart-sequential-06-40', '--syn-chart-sequential-06-30', '--syn-chart-sequential-06-20',
+    '--syn-chart-sequential-06-10',
   ],
   'sequential-07': [
-    '--syn-sequential-07-100', '--syn-sequential-07-90', '--syn-sequential-07-80',
-    '--syn-sequential-07-70', '--syn-sequential-07-60', '--syn-sequential-07-50',
-    '--syn-sequential-07-40', '--syn-sequential-07-30', '--syn-sequential-07-20',
-    '--syn-sequential-07-10',
+    '--syn-chart-sequential-07-100', '--syn-chart-sequential-07-90', '--syn-chart-sequential-07-80',
+    '--syn-chart-sequential-07-70', '--syn-chart-sequential-07-60', '--syn-chart-sequential-07-50',
+    '--syn-chart-sequential-07-40', '--syn-chart-sequential-07-30', '--syn-chart-sequential-07-20',
+    '--syn-chart-sequential-07-10',
   ],
   'sequential-status-critical': [
-    '--syn-sequential-status-critical-100', '--syn-sequential-status-critical-90',
-    '--syn-sequential-status-critical-80', '--syn-sequential-status-critical-70',
-    '--syn-sequential-status-critical-60', '--syn-sequential-status-critical-50',
-    '--syn-sequential-status-critical-40', '--syn-sequential-status-critical-30',
-    '--syn-sequential-status-critical-20', '--syn-sequential-status-critical-10',
+    '--syn-chart-sequential-status-critical-100', '--syn-chart-sequential-status-critical-90',
+    '--syn-chart-sequential-status-critical-80', '--syn-chart-sequential-status-critical-70',
+    '--syn-chart-sequential-status-critical-60', '--syn-chart-sequential-status-critical-50',
+    '--syn-chart-sequential-status-critical-40', '--syn-chart-sequential-status-critical-30',
+    '--syn-chart-sequential-status-critical-20', '--syn-chart-sequential-status-critical-10',
   ],
   'sequential-status-error': [
-    '--syn-sequential-status-error-100', '--syn-sequential-status-error-90',
-    '--syn-sequential-status-error-80', '--syn-sequential-status-error-70',
-    '--syn-sequential-status-error-60', '--syn-sequential-status-error-50',
-    '--syn-sequential-status-error-40', '--syn-sequential-status-error-30',
-    '--syn-sequential-status-error-20', '--syn-sequential-status-error-10',
+    '--syn-chart-sequential-status-error-100', '--syn-chart-sequential-status-error-90',
+    '--syn-chart-sequential-status-error-80', '--syn-chart-sequential-status-error-70',
+    '--syn-chart-sequential-status-error-60', '--syn-chart-sequential-status-error-50',
+    '--syn-chart-sequential-status-error-40', '--syn-chart-sequential-status-error-30',
+    '--syn-chart-sequential-status-error-20', '--syn-chart-sequential-status-error-10',
   ],
   'sequential-status-info': [
-    '--syn-sequential-status-info-100', '--syn-sequential-status-info-90',
-    '--syn-sequential-status-info-80', '--syn-sequential-status-info-70',
-    '--syn-sequential-status-info-60', '--syn-sequential-status-info-50',
-    '--syn-sequential-status-info-40', '--syn-sequential-status-info-30',
-    '--syn-sequential-status-info-20', '--syn-sequential-status-info-10',
+    '--syn-chart-sequential-status-info-100', '--syn-chart-sequential-status-info-90',
+    '--syn-chart-sequential-status-info-80', '--syn-chart-sequential-status-info-70',
+    '--syn-chart-sequential-status-info-60', '--syn-chart-sequential-status-info-50',
+    '--syn-chart-sequential-status-info-40', '--syn-chart-sequential-status-info-30',
+    '--syn-chart-sequential-status-info-20', '--syn-chart-sequential-status-info-10',
   ],
   'sequential-status-success': [
-    '--syn-sequential-status-success-100', '--syn-sequential-status-success-90',
-    '--syn-sequential-status-success-80', '--syn-sequential-status-success-70',
-    '--syn-sequential-status-success-60', '--syn-sequential-status-success-50',
-    '--syn-sequential-status-success-40', '--syn-sequential-status-success-30',
-    '--syn-sequential-status-success-20', '--syn-sequential-status-success-10',
+    '--syn-chart-sequential-status-success-100', '--syn-chart-sequential-status-success-90',
+    '--syn-chart-sequential-status-success-80', '--syn-chart-sequential-status-success-70',
+    '--syn-chart-sequential-status-success-60', '--syn-chart-sequential-status-success-50',
+    '--syn-chart-sequential-status-success-40', '--syn-chart-sequential-status-success-30',
+    '--syn-chart-sequential-status-success-20', '--syn-chart-sequential-status-success-10',
   ],
   'sequential-status-warning': [
-    '--syn-sequential-status-warning-100', '--syn-sequential-status-warning-90',
-    '--syn-sequential-status-warning-80', '--syn-sequential-status-warning-70',
-    '--syn-sequential-status-warning-60', '--syn-sequential-status-warning-50',
-    '--syn-sequential-status-warning-40', '--syn-sequential-status-warning-30',
-    '--syn-sequential-status-warning-20', '--syn-sequential-status-warning-10',
+    '--syn-chart-sequential-status-warning-100', '--syn-chart-sequential-status-warning-90',
+    '--syn-chart-sequential-status-warning-80', '--syn-chart-sequential-status-warning-70',
+    '--syn-chart-sequential-status-warning-60', '--syn-chart-sequential-status-warning-50',
+    '--syn-chart-sequential-status-warning-40', '--syn-chart-sequential-status-warning-30',
+    '--syn-chart-sequential-status-warning-20', '--syn-chart-sequential-status-warning-10',
   ],
 };

package/data/layers/full/component/component:syn-chart/components/types.ts

@@ -1,5 +1,48 @@
-import type { LineSeriesOption } from 'echarts/charts.js';
-import type { ComposeOption } from 'echarts/core.js';
+import type { EChartsOption } from 'echarts/types/dist/shared.js';
+import {
+  type ChartPresets,
+} from './configs/presets/index.js';
+import type { ChartConfigBuilder } from './configs/config.js';
 
-// Scoped option type — only includes the components and chart types registered via use()
-export type ECConfig = ComposeOption<LineSeriesOption>;
+export type ECConfig = EChartsOption;
+
+export type ChartPresetFunctions = {
+  [K in keyof typeof ChartPresets]: (...args: Parameters<(typeof ChartPresets)[K]>) => ChartConfigHandle;
+};
+
+export type ChartConfigHandle = ChartPresetFunctions & Omit<ChartConfigBuilder, 'build'>;
+
+/**
+ * Configuration callback for the chart `config` property.
+ *
+ * This callback is invoked with a configuration handle that provides preset functions
+ * for building the chart configuration. Use the handle to call preset functions and
+ * set the base configuration. The callback is responsible for configuring all aspects
+ * of the chart before rendering.
+ *
+ * @example
+ * ```typescript
+ * config={(handle) => {
+ *   handle.baseConfig({ ... });
+ *   handle.axesShowSplitLines();
+ *   handle.axesAddXLabelIcons({ ... });
+ * }}
+ * ```
+ */
+export type ChartConfigCallback = (handle: ChartConfigHandle) => void;
+
+/**
+ * Accepted input type for the `config` property on `<syn-chart>`.
+ *
+ * Can be either:
+ * - A direct ECharts configuration object
+ * - A callback function that configures the chart using preset functions
+ */
+export type ChartConfigType = ECConfig | ChartConfigCallback;
+
+export type {
+  AxisIndices,
+  AxisUpdateOptions,
+  AxesUpdateOptions,
+  AxisLabelIconOptions,
+} from './configs/axes/types.js';

package/data/layers/full/component/component:syn-chart/react/chart.ts

@@ -15,7 +15,7 @@ Component.define('syn-chart');
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */

package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue

@@ -10,7 +10,7 @@
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -44,16 +44,22 @@ it takes precedence over the palette.
   palette?: SynChart['palette'];
 
   /**
-* The ECharts configuration option object.
+* The ECharts configuration input.
 
-This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+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 the object directly to this property.
+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 object completely replaces the previous chart configuration (`notMerge: true`).
+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.
  */

package/data/layers/full/component/component:syn-radio-button/angular/radio-button.component.ts

@@ -21,7 +21,7 @@ import '@synergy-design-system/components/components/radio-button/radio-button.j
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -82,6 +82,19 @@ export class SynRadioButtonComponent {
     return this.nativeElement.disabled;
   }
 
+  /**
+   * Sets the radio button to a readonly state.
+   */
+  @Input()
+  set readonly(v: '' | SynRadioButton['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynRadioButton['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
   /**
 * The radio button's size.
 * When used inside a radio group, the size will be determined by the radio group's size so
@@ -95,19 +108,6 @@ this attribute can typically be omitted.
     return this.nativeElement.size;
   }
 
-  /**
-   * Draws a pill-style radio button with rounded edges.
-   */
-  @Input()
-  set pill(v: '' | SynRadioButton['pill']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.pill = v === '' || v),
-    );
-  }
-  get pill(): SynRadioButton['pill'] {
-    return this.nativeElement.pill;
-  }
-
   /**
    * Emitted when the button loses focus.
    */

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

@@ -1,21 +1,20 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit/static-html.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { type CSSResultGroup, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController, getTextContent } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './radio-button.styles.js';
-import type { CSSResultGroup } from 'lit';
+import buttonStyles from '../button/button.styles.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
- * @since 1.0.0
+ * @since 3.17.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.
@@ -33,26 +32,32 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynRadioButton')
 export default class SynRadioButton extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static styles: CSSResultGroup = [componentStyles, buttonStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
 
   @query('.button') input: HTMLInputElement;
-  @query('.hidden-input') hiddenInput: HTMLInputElement;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   @state() protected hasFocus = false;
 
+  @state() private iconOnly = false;
+
   /**
    * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
    * it easier to style in button groups.
    */
-  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ reflect: true, type: Boolean }) checked = false;
 
   /** The radio's value. When selected, the radio group will receive this value. */
   @property() value: string | number;
 
   /** Disables the radio button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ reflect: true, type: Boolean }) disabled = false;
+
+  /** Sets the radio button to a readonly state. */
+  @property({ reflect: true, type: Boolean }) readonly = false;
 
   /**
    * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
@@ -60,21 +65,22 @@ export default class SynRadioButton extends SynergyElement {
    */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-  /** Draws a pill-style radio button with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'presentation');
   }
 
+  private isDisabled() {
+    return this.disabled || this.readonly;
+  }
+
   private handleBlur() {
     this.hasFocus = false;
     this.emit('syn-blur');
   }
 
   private handleClick(e: MouseEvent) {
-    if (this.disabled) {
+    if (this.isDisabled()) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -88,9 +94,17 @@ export default class SynRadioButton extends SynergyElement {
     this.emit('syn-focus');
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  private handleSlotChange() {
+    const textContent = getTextContent(this.defaultSlot).trim();
+    const assignedElements = this.defaultSlot.assignedElements({ flatten: true });
+    const iconOnlyElement = assignedElements.length === 1 && assignedElements[0].tagName.toLowerCase() === 'syn-icon';
+
+    this.iconOnly = iconOnlyElement && textContent === '';
+  }
+
+  @watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
   handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    this.setAttribute('aria-disabled', this.isDisabled() ? 'true' : 'false');
   }
 
   /** Sets focus on the radio button. */
@@ -104,6 +118,7 @@ export default class SynRadioButton extends SynergyElement {
   }
 
   render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
     return html`
       <div part="base" role="presentation">
         <button
@@ -112,31 +127,36 @@ export default class SynRadioButton extends SynergyElement {
           aria-checked="${this.checked}"
           class=${classMap({
             button: true,
-            'button--default': true,
-            'button--small': this.size === 'small',
-            'button--medium': this.size === 'medium',
-            'button--large': this.size === 'large',
             'button--checked': this.checked,
+            'button--default': true,
             'button--disabled': this.disabled,
+            'button--filled': this.checked,
             'button--focused': this.hasFocus,
-            'button--outline': true,
-            'button--pill': this.pill,
             'button--has-label': this.hasSlotController.test('[default]'),
             'button--has-prefix': this.hasSlotController.test('prefix'),
-            'button--has-suffix': this.hasSlotController.test('suffix')
+            'button--has-suffix': this.hasSlotController.test('suffix'),
+            'button--icon-only': this.iconOnly,
+            'button--large': this.size === 'large',
+            'button--medium': this.size === 'medium',
+            'button--primary': true,
+            'button--readonly': this.readonly,
+            'button--small': this.size === 'small',
+            'button--text': !this.checked,
           })}
           aria-disabled=${this.disabled}
           type="button"
+          tabindex=${ifDefined(this.disabled ? '-1': undefined)}
           value=${ifDefined(this.value)}
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
           @click=${this.handleClick}
         >
           <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
+          <slot part="label" class="button__label" @slotchange=${this.handleSlotChange}></slot>
           <slot name="suffix" part="suffix" class="button__suffix"></slot>
         </button>
       </div>
     `;
+    /* eslint-enable @typescript-eslint/unbound-method */
   }
 }