Sync dev → main: Play a Tune from Home Assistant page

docs/products/ESPHome-Starter-Kit/automations/play-a-tune.md

@@ -26,7 +26,7 @@ The buzzer plays songs written in **RTTTL** (Ring Tone Text Transfer Language),
 scale_up:d=32,o=5,b=100:c,c#,d,d#,e,f,f#,g,g#,a,a#,b
 ```
 
-When you added the LED & Buzzer module, Device Builder created an `rtttl` component with the id `rtttl_buzzer` wired to the buzzer output. The automation below hands that component a tune string to play.
+When you added the LED & Buzzer module, Device Builder created an `rtttl` component with the id `rtttl_player` wired to the buzzer output. The automation below hands that component a tune string to play.
 
 ## Build the automation
 
@@ -62,7 +62,7 @@ ESPHome Device Builder has a GUI for building <a href="https://esphome.io/automa
 
     </div>
 
-    1.  If your device has more than one `rtttl` component, set the **ID** to **rtttl_buzzer**. With a single buzzer it's already selected.
+    1.  If your device has more than one `rtttl` component, set the **ID** to **rtttl_player**. With a single buzzer it's already selected.
 
     Copy this tune and paste it into the **Rtttl** field:
 
@@ -140,6 +140,8 @@ Want more? <a href="https://picaxe.com/rtttl-ringtones-for-tune-command/" title=
 
     Same trigger-then-action pattern, new action. Swap the trigger (motion, a temperature threshold, a schedule) or the tune, and you have a new automation.
 
+The trigger here is a button press on the device. To play tunes from a Home Assistant automation, script, or the Developer Tools page instead, see [Play a Tune from Home Assistant](../everyday-use/play-a-tune-from-home-assistant.md).
+
 [Check out these Holiday themed buzzer examples too! :material-music-note:](https://wiki.apolloautomation.com/products/general/holiday-songs/){ .md-button .md-button--primary }
 
 --8<-- "_snippets/community-help.md"

docs/products/ESPHome-Starter-Kit/modules/rgb-buzzer-module.md

@@ -89,13 +89,13 @@ ESPHome Device Builder ships an **Add Component** flow that knows the pin layout
         id: buzzer
 
     rtttl:
-      id: rtttl_buzzer
+      id: rtttl_player
       output: buzzer
     ```
 
     Each option does something specific:
 
-    \| Option \| What it does \| \| --- \| --- \| \| **LED strip** \| \| \| `light.platform: esp32_rmt_led_strip` \| Uses the ESP32's RMT peripheral to drive addressable LEDs with precise timing. \| \| `light.pin: GPIO14` \| The data line going to the first LED on the PCB. \| \| `light.chipset: WS2812` \| Which addressable LED protocol to use. WS2812 is the most common, sometimes also called NeoPixel. \| \| `light.num_leds: 10` \| The number of LEDs on the RGB & Buzzer module. \| \| `light.rgb_order: grb` \| Color channel order. WS2812 LEDs receive color data in green-red-blue order, so this makes sure red looks red and not green. \| \| `light.rmt_symbols: 48` \| Low-level RMT setting needed on the ESP32-C6. Leave it at 48. \| \| `light.effects` \| Pre-loaded animations you can select from the web server or trigger from Home Assistant. \| \| **Piezo buzzer** \| \| \| `output.platform: ledc` \| PWM output for driving the buzzer. PWM is how digital pins create audio tones on a piezo. \| \| `output.pin: GPIO18` \| The pin the buzzer is wired to. \| \| `output.id: buzzer` \| Internal handle the rtttl component uses to send tones to this output. \| \| `rtttl.id: rtttl_buzzer` \| Internal handle for triggering tunes from automations and lambdas. \| \| `rtttl.output: buzzer` \| Tells rtttl to use the buzzer output for playback. \|
+    \| Option \| What it does \| \| --- \| --- \| \| **LED strip** \| \| \| `light.platform: esp32_rmt_led_strip` \| Uses the ESP32's RMT peripheral to drive addressable LEDs with precise timing. \| \| `light.pin: GPIO14` \| The data line going to the first LED on the PCB. \| \| `light.chipset: WS2812` \| Which addressable LED protocol to use. WS2812 is the most common, sometimes also called NeoPixel. \| \| `light.num_leds: 10` \| The number of LEDs on the RGB & Buzzer module. \| \| `light.rgb_order: grb` \| Color channel order. WS2812 LEDs receive color data in green-red-blue order, so this makes sure red looks red and not green. \| \| `light.rmt_symbols: 48` \| Low-level RMT setting needed on the ESP32-C6. Leave it at 48. \| \| `light.effects` \| Pre-loaded animations you can select from the web server or trigger from Home Assistant. \| \| **Piezo buzzer** \| \| \| `output.platform: ledc` \| PWM output for driving the buzzer. PWM is how digital pins create audio tones on a piezo. \| \| `output.pin: GPIO18` \| The pin the buzzer is wired to. \| \| `output.id: buzzer` \| Internal handle the rtttl component uses to send tones to this output. \| \| `rtttl.id: rtttl_player` \| Internal handle for triggering tunes from automations and lambdas. \| \| `rtttl.output: buzzer` \| Tells rtttl to use the buzzer output for playback. \|
 
 ## Install the firmware
 
@@ -119,7 +119,7 @@ With the device back online, the RGB LED light entity is live on the web server.
 
 !!! tip "For more effects check out this wiki on how to do advanced configurations with your RGB & Buzzer module!"
 
-    There are a lot of advanced things you can do with a light entity. Click here (NEED-TO-LINK-TO-NEW-LIGHT-COMPONENT-WIKI) to learn more about that!
+    There are a lot of advanced things you can do with a light entity. Check out the [ESPHome light strip effects documentation](https://esphome.io/components/light/#strip-animations) to learn more!
 
 The buzzer doesn't have its own web server control, since it's an output rather than a switch. Once you've added the device to Home Assistant, you can trigger tunes with the `rtttl.play` action or by exposing your own service.
 

docs/stylesheets/extra.css

@@ -154,9 +154,11 @@ article.md-typeset .cms-embed iframe {
   mask-image: var(--md-admonition-icon--song-purple);
 }
 
-/* Fit code blocks to content width inside content tabs */
+/* Fit code blocks to content width inside content tabs, but never wider than
+   the tab/admonition so long unbroken lines scroll instead of overflowing. */
 .tabbed-content .highlight {
   width: fit-content;
+  max-width: 100%;
 }
 
 /* Inline icon inside .md-button (e.g. ESPHome logo next to button label).

mkdocs.yml

@@ -552,6 +552,7 @@ nav:
               - Temperature on Your Dashboard: products/ESPHome-Starter-Kit/everyday-use/temperature-on-your-dashboard.md
               - Button Toggles a Room Light: products/ESPHome-Starter-Kit/everyday-use/button-toggles-room-light.md
               - Trash Night Reminder: products/ESPHome-Starter-Kit/everyday-use/trash-night-reminder.md
+              - Play a Tune from Home Assistant: products/ESPHome-Starter-Kit/everyday-use/play-a-tune-from-home-assistant.md
           - Learn the Basics:
               - Explaining ESPHome: products/ESPHome-Starter-Kit/learning-the-basics/explaining-esphome.md
               - Device Builder Tour: products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md