move class to fieldset

docs/docs/resources/changelog.md

@@ -15,9 +15,7 @@ During the alpha period, things might break! We take breaking changes very serio
 ## Next
 
 - Added an orientation example to the native radio docs
-- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
 - Fixed a number of broken event listeners throughout the docs
-- Fixed a bug in `<wa-card>` that prevented slots from showing automatically without `with-` attributes
 
 ## 3.0.0-alpha.10
 

src/components/card/card.ts

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './card.css';
@@ -29,26 +28,17 @@ import styles from './card.css';
 export default class WaCard extends WebAwesomeElement {
   static shadowStyle = [sizeStyles, styles];
 
-  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
-
   /** The component's size. Will be inherited by any descendants with a `size` attribute. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
 
   /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
+  @property({ attribute: 'with-header', type: Boolean }) withHeader = false;
 
   /** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-image', type: Boolean, reflect: true }) withImage = false;
+  @property({ attribute: 'with-image', type: Boolean }) withImage = false;
 
   /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
-  @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
-
-  updated() {
-    // Enable the respective slots when detected
-    if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
-    if (!this.withImage && this.hasSlotController.test('image')) this.withImage = true;
-    if (!this.withFooter && this.hasSlotController.test('footer')) this.withFooter = true;
-  }
+  @property({ attribute: 'with-footer', type: Boolean }) withFooter = false;
 
   render() {
     return html`

src/components/select/select.ts

@@ -68,6 +68,7 @@ import styles from './select.css';
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.
  * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
  * @csspart tag__content - The tag's content part.
  * @csspart tag__remove-button - The tag's remove button.
  * @csspart tag__remove-button__base - The tag's remove button base part.
@@ -660,18 +661,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
         </div>`;
       } else if (index === this.maxOptionsVisible) {
         // Hit tag limit
-        return html`
-          <wa-tag
-            part="tag"
-            exportparts="
-              base:tag__base,
-              content:tag__content,
-              remove-button:tag__remove-button,
-              remove-button__base:tag__remove-button__base
-            "
-            >+${this.selectedOptions.length - index}</wa-tag
-          >
-        `;
+        return html`<wa-tag>+${this.selectedOptions.length - index}</wa-tag>`;
       }
       return html``;
     });