type => variant

src/components/alert/alert.ts

@@ -51,8 +51,8 @@ export default class SlAlert extends LitElement {
   /** Makes the alert closable. */
   @property({ type: Boolean, reflect: true }) closable = false;
 
-  /** The type of alert. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
+  /** The alert's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
 
   /**
    * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
@@ -178,11 +178,11 @@ export default class SlAlert extends LitElement {
           alert: true,
           'alert--open': this.open,
           'alert--closable': this.closable,
-          'alert--primary': this.type === 'primary',
-          'alert--success': this.type === 'success',
-          'alert--neutral': this.type === 'neutral',
-          'alert--warning': this.type === 'warning',
-          'alert--danger': this.type === 'danger'
+          'alert--primary': this.variant === 'primary',
+          'alert--success': this.variant === 'success',
+          'alert--neutral': this.variant === 'neutral',
+          'alert--warning': this.variant === 'warning',
+          'alert--danger': this.variant === 'danger'
         })}
         role="alert"
         aria-live="assertive"

src/components/badge/badge.styles.ts

@@ -24,7 +24,7 @@ export default css`
     cursor: inherit;
   }
 
-  /* Type modifiers */
+  /* Variant modifiers */
   .badge--primary {
     background-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);

src/components/badge/badge.test.ts

@@ -58,10 +58,10 @@ describe('<sl-badge>', () => {
     });
   });
 
-  ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(type => {
-    describe(`when passed a type attribute ${type}`, () => {
+  ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(variant => {
+    describe(`when passed a variant attribute ${variant}`, () => {
       before(async () => {
-        el = await fixture<SlBadge>(html`<sl-badge type="${type as any}">Badge</sl-badge>`);
+        el = await fixture<SlBadge>(html`<sl-badge variant="${variant as any}">Badge</sl-badge>`);
       });
 
       it('should render a component that passes accessibility test', async () => {
@@ -70,7 +70,7 @@ describe('<sl-badge>', () => {
 
       it('should default to square styling, with the primary color', async () => {
         const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-        expect(part.classList.value.trim()).to.eq(`badge badge--${type}`);
+        expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`);
       });
     });
   });

src/components/badge/badge.ts

@@ -15,8 +15,8 @@ import styles from './badge.styles';
 export default class SlBadge extends LitElement {
   static styles = styles;
 
-  /** The badge's type. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
+  /** The badge's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
@@ -30,11 +30,11 @@ export default class SlBadge extends LitElement {
         part="base"
         class=${classMap({
           badge: true,
-          'badge--primary': this.type === 'primary',
-          'badge--success': this.type === 'success',
-          'badge--neutral': this.type === 'neutral',
-          'badge--warning': this.type === 'warning',
-          'badge--danger': this.type === 'danger',
+          'badge--primary': this.variant === 'primary',
+          'badge--success': this.variant === 'success',
+          'badge--neutral': this.variant === 'neutral',
+          'badge--warning': this.variant === 'warning',
+          'badge--danger': this.variant === 'danger',
           'badge--pill': this.pill,
           'badge--pulse': this.pulse
         })}

src/components/button/button.styles.ts

@@ -618,7 +618,7 @@ export default css`
   }
 
   /* Add a visual separator between solid buttons */
-  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [type='default']):not(:hover, :active, :focus))
+  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [variant='default']):not(:hover, :active, :focus))
     .button:after {
     content: '';
     position: absolute;

src/components/button/button.ts

@@ -39,8 +39,8 @@ export default class SlButton extends LitElement {
   @state() private hasPrefix = false;
   @state() private hasSuffix = false;
 
-  /** The button's type. */
-  @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
+  /** The button's variant. */
+  @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
     'default';
 
   /** The button's size. */
@@ -134,13 +134,13 @@ export default class SlButton extends LitElement {
         part="base"
         class=${classMap({
           button: true,
-          'button--default': this.type === 'default',
-          'button--primary': this.type === 'primary',
-          'button--success': this.type === 'success',
-          'button--neutral': this.type === 'neutral',
-          'button--warning': this.type === 'warning',
-          'button--danger': this.type === 'danger',
-          'button--text': this.type === 'text',
+          'button--default': this.variant === 'default',
+          'button--primary': this.variant === 'primary',
+          'button--success': this.variant === 'success',
+          'button--neutral': this.variant === 'neutral',
+          'button--warning': this.variant === 'warning',
+          'button--danger': this.variant === 'danger',
+          'button--text': this.variant === 'text',
           'button--small': this.size === 'small',
           'button--medium': this.size === 'medium',
           'button--large': this.size === 'large',

src/components/select/select.ts

@@ -380,7 +380,7 @@ export default class SlSelect extends LitElement {
         return html`
           <sl-tag
             exportparts="base:tag"
-            type="neutral"
+            variant="neutral"
             size=${this.size}
             ?pill=${this.pill}
             removable
@@ -404,7 +404,7 @@ export default class SlSelect extends LitElement {
         this.displayLabel = '';
         this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
         this.displayTags.push(html`
-          <sl-tag exportparts="base:tag" type="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
+          <sl-tag exportparts="base:tag" variant="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
         `);
       }
     } else {

src/components/tag/tag.styles.ts

@@ -24,7 +24,7 @@ export default css`
   }
 
   /*
-   * Type modifiers
+   * Variant modifiers
    */
 
   .tag--primary {

src/components/tag/tag.ts

@@ -24,8 +24,8 @@ import '../icon-button/icon-button';
 export default class SlTag extends LitElement {
   static styles = styles;
 
-  /** The tag's type. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
+  /** The tag's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -48,12 +48,12 @@ export default class SlTag extends LitElement {
           tag: true,
 
           // Types
-          'tag--primary': this.type === 'primary',
-          'tag--success': this.type === 'success',
-          'tag--neutral': this.type === 'neutral',
-          'tag--warning': this.type === 'warning',
-          'tag--danger': this.type === 'danger',
-          'tag--text': this.type === 'text',
+          'tag--primary': this.variant === 'primary',
+          'tag--success': this.variant === 'success',
+          'tag--neutral': this.variant === 'neutral',
+          'tag--warning': this.variant === 'warning',
+          'tag--danger': this.variant === 'danger',
+          'tag--text': this.variant === 'text',
 
           // Sizes
           'tag--small': this.size === 'small',