add secure context notice

docs/docs/components/badge.md

@@ -77,16 +77,6 @@ Use the `pill` attribute to give badges rounded edges.
 <wa-badge variant="danger" pill>Danger</wa-badge>
 ```
 
-### Sizes
-
-Use the `size` attribute to change a badge's size.
-
-```html {.example}
-<wa-badge size="small">Small</wa-badge>
-<wa-badge size="medium">Medium</wa-badge>
-<wa-badge size="large">Large</wa-badge>
-```
-
 ### Pulsating Badges
 
 Use the `pulse` attribute to draw attention to the badge with a subtle animation.

docs/docs/components/copy-button.md

@@ -9,6 +9,10 @@ icon: copy-button
 <wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
 ```
 
+:::info
+Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
+:::
+
 ## Examples
 
 ### Custom Labels

src/components/badge/badge.css

@@ -1,14 +1,8 @@
-:host,
-.wa-badge {
-  --size-xs: var(--wa-font-size-2xs);
-  --size-s: var(--wa-font-size-2xs);
-  --size-m: var(--wa-font-size-2xs);
-  --size-l: var(--wa-font-size-xs);
-
+:host {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: max(var(--wa-size), 0.75em);
+  font-size: max(var(--wa-font-size-2xs), 0.75em);
   font-weight: var(--wa-font-weight-semibold);
   line-height: 1;
   background-color: var(--background-color, var(--wa-color-fill-loud));
@@ -24,15 +18,19 @@
   cursor: inherit;
 }
 
-::slotted(wa-icon),
-.wa-badge > wa-icon {
-  margin-inline-end: var(--wa-space-2xs, 0.25em);
-  opacity: 90%;
-  line-height: 1;
-  height: 0.85em;
+/* Pill modifier */
+:host([pill]) {
+  border-radius: var(--wa-border-radius-pill);
 }
 
-@keyframes wa-pulse {
+/* Pulse modifier */
+:host([pulse]) {
+  --pulse-color: var(--background-color);
+
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 var(--pulse-color);
   }
@@ -44,16 +42,9 @@
   }
 }
 
-/* Pill modifier */
-.wa-pill,
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
-}
-
-/* Pulse modifier */
-:host([pulse]),
-.wa-badge.wa-pulse {
-  --pulse-color: var(--background-color);
-
-  animation: wa-pulse 1.5s infinite;
+::slotted(wa-icon) {
+  margin-inline-end: var(--wa-space-2xs, 0.25em);
+  opacity: 90%;
+  line-height: 1;
+  height: 0.85em;
 }

src/components/badge/badge.ts

@@ -1,10 +1,9 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import nativeStyles from '../../styles/native/badge.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
-import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
+import styles from './badge.css';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
@@ -25,7 +24,7 @@ import variantStyles from '../../styles/utilities/variants.css';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, sizeStyles, appearanceStyles, nativeStyles];
+  static shadowStyle = [variantStyles, appearanceStyles, styles];
 
   /** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
   @property({ reflect: true, initial: 'brand' }) variant: