diff --git a/gallery/src/pages/components/dialogs.markdown b/gallery/src/pages/components/ha-dialogs.markdown
similarity index 91%
rename from gallery/src/pages/components/dialogs.markdown
rename to gallery/src/pages/components/ha-dialogs.markdown
index 472265b091..2b79ae2e39 100644
--- a/gallery/src/pages/components/dialogs.markdown
+++ b/gallery/src/pages/components/ha-dialogs.markdown
@@ -5,7 +5,7 @@ subtitle: Dialogs provide important prompts in a user flow.
# Material Design 3
-Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
# Highlighted guidelines
diff --git a/gallery/src/pages/components/ha-gauge.markdown b/gallery/src/pages/components/ha-gauge.markdown
new file mode 100644
index 0000000000..33419c9588
--- /dev/null
+++ b/gallery/src/pages/components/ha-gauge.markdown
@@ -0,0 +1,61 @@
+---
+title: Gauge
+---
+
+
+
+# Gauge ``
+
+A gauge that can be used to represent sensor data and provide visual feedback about the value and the corresponding severity (success, warning, error).
+
+## Examples
+
+Info color gauge
+
+
+Success color gauge
+
+
+Warning color gauge
+
+
+Error color gauge
+
+
+Gauge with background color
+
+
+
+## CSS variables
+
+### Gauge
+
+`primary-background-color`
+Background color of the dial (rounded arch)
+
+`primary-text-color`
+Text color below dial (value and unit of measurement) plus needle color (if gauge is in needle mode)
+
+#### Dial colors
+
+`gauge-color`
+Used in the coding to control what color the gauge value is rendered with, but cannot be set via theme since its value will dynamically be set (either to `info-color` or to the matching severity variable if the severity color mode is used). To control the used colors, adjust the following variables.
+
+`success-color`
+Dial color for the "green" severity level
+
+`warning-color`
+Dial color for the "yellow" severity level
+
+`error-color`
+Dial color for the "red" severity level
+
+`info-color`
+Static dial color if not in severity color mode
diff --git a/gallery/src/pages/components/ha-gauge.ts b/gallery/src/pages/components/ha-gauge.ts
new file mode 100644
index 0000000000..d31970e7e2
--- /dev/null
+++ b/gallery/src/pages/components/ha-gauge.ts
@@ -0,0 +1 @@
+import "../../../../src/components/ha-gauge";
diff --git a/gallery/src/pages/components/ha-switch.markdown b/gallery/src/pages/components/ha-switch.markdown
new file mode 100644
index 0000000000..d281c3b0e8
--- /dev/null
+++ b/gallery/src/pages/components/ha-switch.markdown
@@ -0,0 +1,39 @@
+---
+title: Switch / Toggle
+---
+
+
+
+# Switch ``
+
+A toggle switch can represent two states: on and off.
+
+## Examples
+
+Switch in on state
+
+
+Switch in off state
+
+
+Disabled switch
+
+
+## CSS variables
+
+For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
+
+The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
+
+`switch-checked-color` / `switch-unchecked-color`
+Set both the color of the round handle and the track behind it. If you want to control them separately, use the variables below instead.
+
+`switch-checked-button-color` / `switch-unchecked-button-color`
+Color of the round handle
+
+`switch-checked-track-color` / `switch-unchecked-track-color`
+Color of the track behind the round handle
diff --git a/gallery/src/pages/components/ha-switch.ts b/gallery/src/pages/components/ha-switch.ts
new file mode 100644
index 0000000000..787decc94b
--- /dev/null
+++ b/gallery/src/pages/components/ha-switch.ts
@@ -0,0 +1 @@
+import "../../../../src/components/ha-switch";
diff --git a/gallery/src/pages/lovelace/gauge-card.ts b/gallery/src/pages/lovelace/gauge-card.ts
index 9094f678b8..ae99d1b1be 100644
--- a/gallery/src/pages/lovelace/gauge-card.ts
+++ b/gallery/src/pages/lovelace/gauge-card.ts
@@ -23,13 +23,12 @@ const CONFIGS = [
heading: "Basic example",
config: `
- type: gauge
- title: Humidity
entity: sensor.outside_humidity
name: Outside Humidity
`,
},
{
- heading: "Custom Unit of Measurement",
+ heading: "Custom unit of measurement",
config: `
- type: gauge
entity: sensor.outside_temperature
@@ -38,7 +37,16 @@ const CONFIGS = [
`,
},
{
- heading: "Setting Severity Levels",
+ heading: "Rendering needle",
+ config: `
+- type: gauge
+ entity: sensor.outside_humidity
+ name: Outside Humidity
+ needle: true
+ `,
+ },
+ {
+ heading: "Setting severity levels",
config: `
- type: gauge
entity: sensor.brightness
@@ -50,7 +58,7 @@ const CONFIGS = [
`,
},
{
- heading: "Setting Severity Levels",
+ heading: "Setting severity levels",
config: `
- type: gauge
entity: sensor.brightness_medium
@@ -62,7 +70,7 @@ const CONFIGS = [
`,
},
{
- heading: "Setting Severity Levels",
+ heading: "Setting severity levels",
config: `
- type: gauge
entity: sensor.brightness_high
@@ -74,7 +82,7 @@ const CONFIGS = [
`,
},
{
- heading: "Setting Min (0) and Max (15) Values",
+ heading: "Setting min (0) and mx (15) values",
config: `
- type: gauge
entity: sensor.brightness
@@ -84,14 +92,14 @@ const CONFIGS = [
`,
},
{
- heading: "Invalid Entity",
+ heading: "Invalid entity",
config: `
- type: gauge
entity: sensor.invalid_entity
`,
},
{
- heading: "Non-Numeric Value",
+ heading: "Non-numeric value",
config: `
- type: gauge
entity: plant.bonsai