@synergy-design-system/metadata 3.17.0 → 3.19.0

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

@@ -1,36 +1,58 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
+    cursor: pointer;
     display: inline-block;
     position: relative;
     width: auto;
-    cursor: pointer;
   }
 
   .button {
-    display: inline-flex;
+    /* Icon size tokens */
+    --button-small-icon-size: var(--syn-font-size-medium);
+    --button-medium-icon-size: var(--syn-font-size-x-large);
+    --button-large-icon-size: var(--syn-font-size-2x-large);
+
+    /* Icon alignment tokens */
+    --button-icon-offset-small: -3px;
+    --button-icon-offset-medium: -6px;
+    --button-icon-offset-large: -8px;
+
+    /* Default (medium) spacing tokens */
+    --button-icon-only-padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));
+    --button-label-padding-inline-start: var(--syn-spacing-medium);
+    --button-label-padding-inline-end: var(--syn-spacing-medium);
+    --button-label-padding-inline-start-with-prefix: var(--syn-spacing-x-small);
+    --button-label-padding-inline-end-with-suffix: var(--syn-spacing-x-small);
+    --button-prefix-spacing: var(--syn-spacing-small);
+    --button-suffix-spacing: var(--syn-spacing-small);
+    --button-affix-size: var(--button-medium-icon-size);
+    --button-labeled-prefix-spacing: var(--syn-spacing-medium);
+    --button-labeled-suffix-spacing: var(--syn-spacing-medium);
+
     align-items: stretch;
-    justify-content: center;
-    width: 100%;
     border-style: solid;
     border-width: var(--syn-input-border-width);
+    cursor: inherit;
+    display: inline-flex;
     font-family: var(--syn-input-font-family);
-    font-weight: var(--syn-font-weight-semibold);
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
+    font-weight: var(--syn-font-weight-bold);
+    height: auto;
+    justify-content: center;
     padding: 0;
+    text-decoration: none;
     transition:
       var(--syn-transition-x-fast) background-color,
       var(--syn-transition-x-fast) color,
       var(--syn-transition-x-fast) border,
       var(--syn-transition-x-fast) box-shadow;
-    cursor: inherit;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    width: 100%;
   }
 
   .button::-moz-focus-inner {
@@ -42,13 +64,13 @@ export default css`
   }
 
   .button:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);
+    outline-offset: var(--syn-focus-ring-width);
   }
 
   .button--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
 
   /* When disabled, prevent mouse events from bubbling up from children */
@@ -56,11 +78,17 @@ export default css`
     pointer-events: none;
   }
 
+  .button__prefix,
+  .button__suffix,
+  .button__caret {
+    font-size: var(--button-affix-size);
+  }
+
   .button__prefix,
   .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    display: flex;
+    flex: 0 0 auto;
     pointer-events: none;
   }
 
@@ -68,8 +96,16 @@ export default css`
     display: inline-block;
   }
 
+  /**
+   * Icon-only buttons
+   */
+  .button__label.button__icon-only {
+    padding: var(--button-icon-only-padding);
+  }
+
   .button__label::slotted(syn-icon) {
-    vertical-align: -2px;
+    font-size: var(--button-medium-icon-size);
+    vertical-align: var(--button-icon-offset-medium);
   }
 
   /*
@@ -78,76 +114,85 @@ export default css`
 
   /* Primary */
   .button--filled.button--primary {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
+    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: 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-color-primary-500);
-    border-color: var(--syn-color-primary-500);
-    color: var(--syn-color-neutral-0);
+    background: 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-color-primary-600);
-    border-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
+    background: var(--syn-button-color-active);
+    border-color: var(--syn-button-color-active);
+    color: var(--syn-button-filled-color-text-active);
   }
 
   /*
    * Outline buttons
    */
-
   .button--outline {
     background: none;
-    border: solid 1px;
+    border: var(--syn-input-border-width) solid; /* #901: Use token for border width */
   }
 
   /* Primary */
   .button--outline.button--primary {
-    border-color: var(--syn-color-primary-600);
-    color: var(--syn-color-primary-600);
+    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-color-primary-600);
-    color: var(--syn-color-neutral-0);
+    background: 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) {
-    border-color: var(--syn-color-primary-700);
-    background-color: var(--syn-color-primary-700);
-    color: var(--syn-color-neutral-0);
+    background: 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 {
-    background-color: transparent;
+    background: transparent;
     border-color: transparent;
-    color: var(--syn-color-primary-600);
+    color: var(--syn-button-text-color-text);
   }
 
   .button--text:hover:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-500);
+    color: var(--syn-button-text-color-text-hover);
   }
 
   .button--text:focus-visible:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-500);
+    color: var(--syn-button-color);
   }
 
-  .button--text:active:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-700);
+  .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);
   }
 
   /*
@@ -155,33 +200,59 @@ export default css`
    */
 
   .button--small {
-    height: auto;
-    min-height: var(--syn-input-height-small);
+    --button-icon-only-padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));
+    --button-label-padding-inline-start: var(--syn-spacing-small);
+    --button-label-padding-inline-end: var(--syn-spacing-small);
+    --button-label-padding-inline-start-with-prefix: var(--syn-spacing-2x-small);
+    --button-label-padding-inline-end-with-suffix: var(--syn-spacing-2x-small);
+    --button-prefix-spacing: var(--syn-spacing-x-small);
+    --button-suffix-spacing: var(--syn-spacing-x-small);
+    --button-affix-size: var(--button-small-icon-size);
+    --button-labeled-prefix-spacing: var(--syn-spacing-small);
+    --button-labeled-suffix-spacing: var(--syn-spacing-small);
+    
+    border-radius: var(--syn-button-border-radius-small);
     font-size: var(--syn-button-font-size-small);
     line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
-    border-radius: var(--syn-input-border-radius-small);
+    min-height: var(--syn-input-height-small);
+  }
+
+  .button--small .button__label::slotted(syn-icon) {
+    font-size: var(--button-small-icon-size);
+    vertical-align: var(--button-icon-offset-small);
   }
 
   .button--medium {
-    height: auto;
-    min-height: var(--syn-input-height-medium);
+    border-radius: var(--syn-button-border-radius-medium);
     font-size: var(--syn-button-font-size-medium);
     line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
-    border-radius: var(--syn-input-border-radius-medium);
+    min-height: var(--syn-input-height-medium);
   }
 
   .button--large {
-    height: auto;
-    min-height: var(--syn-input-height-large);
+    --button-icon-only-padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));
+    --button-label-padding-inline-start: var(--syn-spacing-large);
+    --button-label-padding-inline-end: var(--syn-spacing-large);
+    --button-label-padding-inline-start-with-prefix: var(--syn-spacing-small);
+    --button-label-padding-inline-end-with-suffix: var(--syn-spacing-small);
+    --button-affix-size: var(--button-large-icon-size);
+    --button-labeled-prefix-spacing: var(--syn-spacing-large);
+    --button-labeled-suffix-spacing: var(--syn-spacing-large);
+    
+    border-radius: var(--syn-button-border-radius-large);
     font-size: var(--syn-button-font-size-large);
     line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
-    border-radius: var(--syn-input-border-radius-large);
+    min-height: var(--syn-input-height-large);
+  }
+
+  .button--large .button__label::slotted(syn-icon) {
+    font-size: var(--button-large-icon-size);
+    vertical-align: var(--button-icon-offset-large);
   }
 
   /*
    * Caret modifier
    */
-
   .button--caret .button__suffix {
     display: none;
   }
@@ -193,10 +264,9 @@ export default css`
   /*
    * Loading modifier
    */
-
   .button--loading {
-    position: relative;
     cursor: wait;
+    position: relative;
   }
 
   .button--loading .button__prefix,
@@ -208,154 +278,73 @@ export default css`
 
   .button--loading syn-spinner {
     --indicator-color: currentColor;
-    position: absolute;
+
     font-size: 1em;
     height: 1em;
-    width: 1em;
-    top: calc(50% - 0.5em);
     left: calc(50% - 0.5em);
+    position: absolute;
+    top: calc(50% - 0.5em);
+    width: 1em;
   }
 
   /*
    * Badges
    */
-
   .button ::slotted(syn-badge) {
+    pointer-events: none;
     position: absolute;
-    top: 0;
     right: 0;
+    top: 0;
     translate: 50% -50%;
-    pointer-events: none;
   }
 
   .button--rtl ::slotted(syn-badge) {
-    right: auto;
     left: 0;
+    right: auto;
     translate: -50% -50%;
   }
 
   /*
    * Button spacing
    */
-
-  .button--has-label.button--small .button__label {
-    padding: 0 var(--syn-spacing-small);
-  }
-
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--syn-spacing-medium);
+  .button--has-label .button__label {
+    padding-block: 0;
+    padding-inline: var(--button-label-padding-inline-start) var(--button-label-padding-inline-end);
   }
 
-  .button--has-label.button--large .button__label {
-    padding: 0 var(--syn-spacing-large);
-  }
-
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-prefix.button--large {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--small,
-  .button--caret.button--small {
-    padding-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--large .button__label,
-  .button--caret.button--large .button__label {
-    padding-inline-end: var(--syn-spacing-small);
+  .button--has-label .button__label.button__icon-only {
+    padding: var(--button-icon-only-padding);
   }
 
   /*
-   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-   * buttons and we style them here instead.
+   * Adjustments for button label paddings
+   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
    */
-
-  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-syn-button-group__button--inner]) .button {
-    border-radius: 0;
+  .button--has-prefix .button__label {
+    padding-inline-start: var(--button-label-padding-inline-start-with-prefix);
   }
 
-  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+  .button--has-suffix .button__label,
+  .button--caret .button__label {
+    padding-inline-end: var(--button-label-padding-inline-end-with-suffix);
   }
 
-  /* All except the first */
-  :host([data-syn-button-group__button]:not([data-syn-button-group__button--first])) {
-    margin-inline-start: calc(-1 * var(--syn-input-border-width));
+  /* Basic prefix/suffix spacing */
+  .button--has-prefix {
+    padding-inline-start: var(--button-prefix-spacing);
   }
 
-  /* Add a visual separator between solid buttons */
-  :host(
-      [data-syn-button-group__button]:not(
-          [data-syn-button-group__button--first],
-          [data-syn-button-group__button--radio],
-          [variant='filled']
-        ):not(:hover)
-    )
-    .button:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
-    mix-blend-mode: multiply;
+  .button--has-suffix,
+  .button--caret {
+    padding-inline-end: var(--button-suffix-spacing);
   }
 
-  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-  :host([data-syn-button-group__button--hover]) {
-    z-index: 1;
+  /* Enhanced spacing for labeled buttons with prefix/suffix */
+  .button--has-label.button--has-prefix {
+    padding-inline-start: var(--button-labeled-prefix-spacing);
   }
 
-  /* Focus and checked are always on top */
-  :host([data-syn-button-group__button--focus]),
-  :host([data-syn-button-group__button][checked]) {
-    z-index: 2;
+  .button--has-label.button--has-suffix {
+    padding-inline-end: var(--button-labeled-suffix-spacing);
   }
 `;

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

@@ -1,15 +1,20 @@
-/* eslint-disable */
+import type { CSSResultGroup } from 'lit';
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './button-group.styles.js';
-import customStyles from './button-group.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 import type SynButton from '../button/button.component.js';
 import type SynRadioButton from '../radio-button/radio-button.component.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
+function findButton(el: HTMLElement) {
+  const selector = 'syn-button, syn-radio-button';
+
+  // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)
+  return el.closest(selector) ?? el.querySelector(selector);
+}
+
 /**
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
@@ -22,7 +27,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynButtonGroup')
 export default class SynButtonGroup extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -42,21 +47,25 @@ export default class SynButtonGroup extends SynergyElement {
 
   private mutationObserver: MutationObserver;
 
+  // eslint-disable-next-line class-methods-use-this
   private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.toggleAttribute('data-syn-button-group__button--focus', true);
   }
 
+  // eslint-disable-next-line class-methods-use-this
   private handleBlur(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.toggleAttribute('data-syn-button-group__button--focus', false);
   }
 
+  // eslint-disable-next-line class-methods-use-this
   private handleMouseOver(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.toggleAttribute('data-syn-button-group__button--hover', true);
   }
 
+  // eslint-disable-next-line class-methods-use-this
   private handleMouseOut(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.toggleAttribute('data-syn-button-group__button--hover', false);
@@ -82,7 +91,7 @@ export default class SynButtonGroup extends SynergyElement {
         button.toggleAttribute('data-syn-button-group__button--last', index === slottedElements.length - 1);
         button.toggleAttribute(
           'data-syn-button-group__button--radio',
-          button.tagName.toLowerCase() === 'syn-radio-button'
+          button.tagName.toLowerCase() === 'syn-radio-button',
         );
       }
     });
@@ -91,9 +100,9 @@ export default class SynButtonGroup extends SynergyElement {
   firstUpdated() {
     const startObserving = () => {
       this.mutationObserver.observe(this, {
-        subtree: true,
-        attributes: true,
         attributeFilter: ['size', 'variant'],
+        attributes: true,
+        subtree: true,
       });
     };
 
@@ -115,11 +124,11 @@ export default class SynButtonGroup extends SynergyElement {
 
             if (button) {
               // Unset the size property to allow button-group to control it
-              button.size = undefined as any;
+              button.size = undefined as never;
 
               // Also unset variant for syn-buttons
               if (button.tagName.toLowerCase() === 'syn-button') {
-                (button as SynButton).variant = undefined as any;
+                (button as SynButton).variant = undefined as never;
               }
             }
           });
@@ -129,8 +138,9 @@ export default class SynButtonGroup extends SynergyElement {
       if (buttonGroupChanged || childrenChanged) {
         this.handleSlotChange();
       }
-      
+
       // Reconnect observer after changes are done
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.updateComplete.then(() => {
         startObserving();
       });
@@ -145,7 +155,7 @@ export default class SynButtonGroup extends SynergyElement {
   }
 
   render() {
-    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
+    /* eslint-disable @typescript-eslint/unbound-method, lit-a11y/mouse-events-have-key-events */
     return html`
       <div
         part="base"
@@ -160,12 +170,6 @@ export default class SynButtonGroup extends SynergyElement {
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
+    /* eslint-enable @typescript-eslint/unbound-method, lit-a11y/mouse-events-have-key-events */
   }
 }
-
-function findButton(el: HTMLElement) {
-  const selector = 'syn-button, syn-radio-button';
-
-  // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)
-  return el.closest(selector) ?? el.querySelector(selector);
-}

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

@@ -1,8 +1,6 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     display: inline-block;
   }

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.
    */