diff --git a/docs/components/tag.md b/docs/components/tag.md
index 06a043d1d..6a7ab9d87 100644
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -34,21 +34,21 @@ Use the `pill` attribute to give tabs rounded edges.
Large
```
-### 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
-
- Small
- Medium
- Large
+
+ Small
+ Medium
+ Large
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 664f28540..a301b3096 100644
--- a/docs/resources/changelog.md
+++ b/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 ``
- Added the `disabled` prop to ``
- Fixed a bug in `` where setting `disabled` initially didn't work
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 188eac782..d7ae089a3 100644
--- a/src/components/select/select.ts
+++ b/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 element.
- * @csspart tag - The multiselect option, a element.
+ * @csspart menu - The select menu, an element.
+ * @csspart tag - The multiselect option, an 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;
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 4b37e2ef9..d76d55497 100644
--- a/src/components/tag/tag.styles.ts
+++ b/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));
}
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index b68dc6500..2e72d077d 100644
--- a/src/components/tag/tag.ts
+++ b/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
})}
>
- ${this.clearable
+ ${this.removable
? html`
`
: ''}