rename clear => remove

docs/components/tag.md

@@ -34,21 +34,21 @@ Use the `pill` attribute to give tabs rounded edges.
 <sl-tag size="large" pill>Large</sl-tag>
 ```
 
-### Clearable
+### Removable
 
-Use the `clearable` attribute to add a clear button to the tag.
+Use the `removable` attribute to add a remove button to the tag.
 
 ```html preview
-<div class="tags-clearable">
-  <sl-tag size="small" clearable>Small</sl-tag>
-  <sl-tag size="medium" clearable>Medium</sl-tag>
-  <sl-tag size="large" clearable>Large</sl-tag>
+<div class="tags-removable">
+  <sl-tag size="small" removable>Small</sl-tag>
+  <sl-tag size="medium" removable>Medium</sl-tag>
+  <sl-tag size="large" removable>Large</sl-tag>
 </div>
 
 <script>
-  const div = document.querySelector('.tags-clearable');
+  const div = document.querySelector('.tags-removable');
 
-  div.addEventListener('sl-clear', event => {
+  div.addEventListener('sl-remove', event => {
     const tag = event.target;
     tag.style.opacity = '0';
     setTimeout(() => tag.style.opacity = '1', 2000);
@@ -56,7 +56,7 @@ Use the `clearable` attribute to add a clear button to the tag.
 </script>
 
 <style>
-  .tags-clearable sl-tag {
+  .tags-removable sl-tag {
     transition: var(--sl-transition-medium) opacity;
   }
 </style>

docs/resources/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING: renamed the `sl-clear` event to `sl-remove`, the `clear-button` part to `remove-button`, and the `clearable` property to `removable` in `<sl-tag>`
 - Added the `disabled` prop to `<sl-resize-observer>`
 - Fixed a bug in `<sl-mutation-observer>` where setting `disabled` initially didn't work
 

src/components/select/select.ts

@@ -51,8 +51,8 @@ let id = 0;
  * @csspart prefix - The select's prefix.
  * @csspart label - The select's label.
  * @csspart suffix - The select's suffix.
- * @csspart menu - The select menu, a <sl-menu> element.
- * @csspart tag - The multiselect option, a <sl-tag> element.
+ * @csspart menu - The select menu, an <sl-menu> element.
+ * @csspart tag - The multiselect option, an <sl-tag> element.
  * @csspart tags - The container in which multiselect options are rendered.
  */
 @customElement('sl-select')
@@ -336,7 +336,7 @@ export default class SlSelect extends LitElement {
     const clearButton = path.find((el: SlIconButton) => {
       if (el instanceof HTMLElement) {
         const element = el as HTMLElement;
-        return element.classList.contains('tag__clear');
+        return element.classList.contains('tag__remove');
       }
       return false;
     });
@@ -382,10 +382,10 @@ export default class SlSelect extends LitElement {
             type="neutral"
             size=${this.size}
             ?pill=${this.pill}
-            clearable
+            removable
             @click=${this.handleTagInteraction}
             @keydown=${this.handleTagInteraction}
-            @sl-clear=${(event: CustomEvent) => {
+            @sl-remove=${(event: CustomEvent) => {
               event.stopPropagation();
               if (!this.disabled) {
                 item.checked = false;

src/components/tag/tag.styles.ts

@@ -18,7 +18,7 @@ export default css`
     cursor: default;
   }
 
-  .tag__clear::part(base) {
+  .tag__remove::part(base) {
     color: inherit;
     padding: 0;
   }
@@ -69,7 +69,7 @@ export default css`
     padding: 0 var(--sl-spacing-x-small);
   }
 
-  .tag--small .tag__clear {
+  .tag--small .tag__remove {
     margin-left: var(--sl-spacing-2x-small);
     margin-right: calc(-1 * var(--sl-spacing-3x-small));
   }
@@ -82,7 +82,7 @@ export default css`
     padding: 0 var(--sl-spacing-small);
   }
 
-  .tag__clear {
+  .tag__remove {
     margin-left: var(--sl-spacing-2x-small);
     margin-right: calc(-1 * var(--sl-spacing-2x-small));
   }
@@ -95,7 +95,7 @@ export default css`
     padding: 0 var(--sl-spacing-medium);
   }
 
-  .tag__clear {
+  .tag__remove {
     margin-left: var(--sl-spacing-2x-small);
     margin-right: calc(-1 * var(--sl-spacing-x-small));
   }

src/components/tag/tag.ts

@@ -14,11 +14,11 @@ import '../icon-button/icon-button';
  *
  * @slot - The tag's content.
  *
- * @event sl-clear - Emitted when the clear button is activated.
+ * @event sl-remove - Emitted when the remove button is activated.
  *
  * @csspart base - The component's base wrapper.
  * @csspart content - The tag content.
- * @csspart clear-button - The clear button.
+ * @csspart remove-button - The remove button.
  */
 @customElement('sl-tag')
 export default class SlTag extends LitElement {
@@ -33,11 +33,11 @@ export default class SlTag extends LitElement {
   /** Draws a pill-style tag with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
-  /** Makes the tag clearable. */
-  @property({ type: Boolean }) clearable = false;
+  /** Makes the tag removable. */
+  @property({ type: Boolean }) removable = false;
 
-  handleClearClick() {
-    emit(this, 'sl-clear');
+  handleRemoveClick() {
+    emit(this, 'sl-remove');
   }
 
   render() {
@@ -62,21 +62,21 @@ export default class SlTag extends LitElement {
 
           // Modifers
           'tag--pill': this.pill,
-          'tag--clearable': this.clearable
+          'tag--removable': this.removable
         })}
       >
         <span part="content" class="tag__content">
           <slot></slot>
         </span>
 
-        ${this.clearable
+        ${this.removable
           ? html`
               <sl-icon-button
-                exportparts="base:clear-button"
+                exportparts="base:remove-button"
                 name="x"
                 library="system"
-                class="tag__clear"
-                @click=${this.handleClearClick}
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
               ></sl-icon-button>
             `
           : ''}