update docs

src/components/color-picker/color-picker.ts

@@ -45,7 +45,7 @@ declare const EyeDropper: EyeDropperConstructor;
  * @dependency sl-input
  * @dependency sl-visually-hidden
  *
- * @slot label - The color picker's label. Alternatively, you can use the label prop.
+ * @slot label - The color picker's label. Alternatively, you can use the `label` attribute.
  *
  * @event sl-change Emitted when the color picker's value changes.
  *
@@ -111,7 +111,10 @@ export default class SlColorPicker extends LitElement {
   @defaultValue()
   defaultValue = '';
 
-  /* The color picker's label. This will not be displayed, but it will be announced by assistive devices. */
+  /**
+   * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
+   * display HTML, you can use the `label` slot` instead.
+   */
   @property() label = '';
 
   /**

src/components/details/details.ts

@@ -17,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @dependency sl-icon
  *
  * @slot - The details' content.
- * @slot summary - The details' summary. Alternatively, you can use the summary prop.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
  *
  * @event sl-show - Emitted when the details opens.
  * @event sl-after-show - Emitted after the details opens and all animations are complete.

src/components/dialog/dialog.ts

@@ -21,7 +21,7 @@ import type { CSSResultGroup } from 'lit';
  * @dependency sl-icon-button
  *
  * @slot - The dialog's content.
- * @slot label - The dialog's label. Alternatively, you can use the label prop.
+ * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
  * @slot footer - The dialog's footer, usually one or more buttons representing various options.
  *
  * @event sl-show - Emitted when the dialog opens.
@@ -74,7 +74,8 @@ export default class SlDialog extends LitElement {
 
   /**
    * The dialog's label as displayed in the header. You should always include a relevant label even when using
-   * `no-header`, as it is required for proper accessibility.
+   * `no-header`, as it is required for proper accessibility. If you need to display HTML, you can use the `label` slot
+   * instead.
    */
   @property({ reflect: true }) label = '';
 

src/components/drawer/drawer.ts

@@ -22,7 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @dependency sl-icon-button
  *
  * @slot - The drawer's content.
- * @slot label - The drawer's label. Alternatively, you can use the label prop.
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
  * @slot footer - The drawer's footer, usually one or more buttons representing various options.
  *
  * @event sl-show - Emitted when the drawer opens.
@@ -82,7 +82,8 @@ export default class SlDrawer extends LitElement {
 
   /**
    * The drawer's label as displayed in the header. You should always include a relevant label even when using
-   * `no-header`, as it is required for proper accessibility.
+   * `no-header`, as it is required for proper accessibility. If you need to display HTML, you can use the `label` slot
+   * instead.
    */
   @property({ reflect: true }) label = '';
 

src/components/input/input.ts

@@ -19,13 +19,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @dependency sl-icon
  *
- * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend an icon or similar element to the input.
  * @slot suffix - Used to append an icon or similar element to the input.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot show-password-icon - An icon to use in lieu of the default show password icon.
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
- * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  *
  * @event sl-change - Emitted when an alteration to the control's value is committed by the user.
  * @event sl-clear - Emitted when the clear button is activated.
@@ -89,10 +89,10 @@ export default class SlInput extends LitElement {
   /** Draws a pill-style input with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
-  /** The input's label. Alternatively, you can use the label slot. */
+  /** The input's label. If you need to display HTML, you can use the `label` slot instead. */
   @property() label = '';
 
-  /** The input's help text. Alternatively, you can use the help-text slot. */
+  /** The input's help text. If you need to display HTML, you can use the `help-text` slot instead. */
   @property({ attribute: 'help-text' }) helpText = '';
 
   /** Adds a clear button when the input is populated. */

src/components/radio-group/radio-group.ts

@@ -19,7 +19,7 @@ const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];
  * @dependency sl-button-group
  *
  * @slot - The default slot where radio controls are placed.
- * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop.
+ * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
  *
  * @event sl-change - Emitted when the radio group's selected value changes.
  *
@@ -45,7 +45,10 @@ export default class SlRadioGroup extends LitElement {
   @state() private customErrorMessage = '';
   @state() private defaultValue = '';
 
-  /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
+  /**
+   * The radio group label. Required for proper accessibility. If you need to display HTML, you can use the `label` slot
+   * instead.
+   */
   @property() label = '';
 
   /** The selected value of the control. */

src/components/range/range.ts

@@ -16,8 +16,8 @@ import type { CSSResultGroup } from 'lit';
  * @since 2.0
  * @status stable
  *
- * @slot label - The input's label. Alternatively, you can use the label prop.
- * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  *
  * @event sl-change - Emitted when the control's value changes.
  * @event sl-blur - Emitted when the control loses focus.
@@ -60,10 +60,10 @@ export default class SlRange extends LitElement {
   /** The input's value attribute. */
   @property({ type: Number }) value = 0;
 
-  /** The range's label. Alternatively, you can use the label slot. */
+  /** The range's label. If you need to display HTML, you can use the `label` slot instead. */
   @property() label = '';
 
-  /** The range's help text. Alternatively, you can use the help-text slot. */
+  /** The range's help text. If you need to display HTML, you can use the help-text slot instead. */
   @property({ attribute: 'help-text' }) helpText = '';
 
   /** Disables the input. */

src/components/select/select.ts

@@ -34,8 +34,8 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @slot prefix - Used to prepend an icon or similar element to the select.
  * @slot suffix - Used to append an icon or similar element to the select.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
- * @slot label - The select's label. Alternatively, you can use the label prop.
- * @slot help-text - Help text that describes how to use the select.
+ * @slot label - The select's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Help text that describes how to use the select. Alternatively, you can use the `help-text` attribute.
  *
  * @event sl-clear - Emitted when the clear button is activated.
  * @event sl-change - Emitted when the control's value changes.
@@ -117,7 +117,7 @@ export default class SlSelect extends LitElement {
   /** Draws a pill-style select with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
-  /** The select's label. Alternatively, you can use the label slot. */
+  /** The select's label. If you need to display HTML, you can use the `label` slot instead. */
   @property() label = '';
 
   /**
@@ -126,7 +126,7 @@ export default class SlSelect extends LitElement {
    */
   @property() placement: 'top' | 'bottom' = 'bottom';
 
-  /** The select's help text. Alternatively, you can use the help-text slot. */
+  /** The select's help text. If you need to display HTML, you can use the `help-text` slot instead. */
   @property({ attribute: 'help-text' }) helpText = '';
 
   /** The select's required attribute. */

src/components/textarea/textarea.ts

@@ -15,8 +15,8 @@ import type { CSSResultGroup } from 'lit';
  * @since 2.0
  * @status stable
  *
- * @slot label - The textarea's label. Alternatively, you can use the label prop.
- * @slot help-text - Help text that describes how to use the input.
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  *
  * @event sl-change - Emitted when an alteration to the control's value is committed by the user.
  * @event sl-input - Emitted when the control receives input and its value changes.
@@ -55,10 +55,10 @@ export default class SlTextarea extends LitElement {
   /** Draws a filled textarea. */
   @property({ type: Boolean, reflect: true }) filled = false;
 
-  /** The textarea's label. Alternatively, you can use the label slot. */
+  /** The textarea's label. If you need to display HTML, you can use the `label` slot instead. */
   @property() label = '';
 
-  /** The textarea's help text. Alternatively, you can use the help-text slot. */
+  /** The textarea's help text. If you need to display HTML, you can use the `help-text` slot instead. */
   @property({ attribute: 'help-text' }) helpText = '';
 
   /** The textarea's placeholder text. */

src/components/tooltip/tooltip.ts

@@ -15,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  *
  * @slot - The tooltip's target element. Only the first element will be used as the target.
- * @slot content - The tooltip's content. Alternatively, you can use the content prop.
+ * @slot content - The tooltip's content. Alternatively, you can use the `content` attribute.
  *
  * @event sl-show - Emitted when the tooltip begins to show.
  * @event sl-after-show - Emitted after the tooltip has shown and all animations are complete.
@@ -44,7 +44,7 @@ export default class SlTooltip extends LitElement {
   private readonly localize = new LocalizeController(this);
   private positionerCleanup: ReturnType<typeof autoUpdate> | undefined;
 
-  /** The tooltip's content. Alternatively, you can use the content slot. */
+  /** The tooltip's content. If you need to display HTML, you can use the `content` slot instead. */
   @property() content = '';
 
   /**