Migrate ha-slider to webawesome (#27075)

* Migrate ha-slider to webawesome

* Fix labeled slider

* Change slider surface color

* Trigger Build

* Remove large and border

* Run prettier

* enable tooltip and focus ring

src/components/ha-labeled-slider.ts

@@ -36,15 +36,17 @@ class HaLabeledSlider extends LitElement {
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         ${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
-        <ha-slider
-          .min=${this.min}
-          .max=${this.max}
-          .step=${this.step}
-          .labeled=${this.labeled}
-          .disabled=${this.disabled}
-          .value=${this.value}
-          @change=${this._inputChanged}
-        ></ha-slider>
+        <div class="slider-wrapper">
+          <ha-slider
+            .min=${this.min}
+            .max=${this.max}
+            .step=${this.step}
+            .labeled=${this.labeled}
+            .disabled=${this.disabled}
+            .value=${this.value}
+            @change=${this._inputChanged}
+          ></ha-slider>
+        </div>
       </div>
       ${this.helper
         ? html`<ha-input-helper-text .disabled=${this.disabled}>
@@ -83,7 +85,8 @@ class HaLabeledSlider extends LitElement {
       color: var(--secondary-text-color);
     }
 
-    ha-slider {
+    .slider-wrapper {
+      padding: 0 8px;
       display: flex;
       flex-grow: 1;
       align-items: center;
@@ -91,6 +94,10 @@ class HaLabeledSlider extends LitElement {
       border-radius: 4px;
       height: 32px;
     }
+
+    ha-slider {
+      width: 100%;
+    }
   `;
 }
 

src/components/ha-slider.ts

@@ -1,33 +1,81 @@
-import { Slider } from "@material/web/slider/internal/slider";
-import { styles } from "@material/web/slider/internal/slider-styles";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
+import Slider from "@home-assistant/webawesome/dist/components/slider/slider";
+import { css, type CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")
 export class HaSlider extends Slider {
+  @property({ reflect: true }) size: "small" | "medium" = "small";
+
+  @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
+
   public connectedCallback() {
     super.connectedCallback();
     this.dir = mainWindow.document.dir;
   }
 
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --md-sys-color-primary: var(--primary-color);
-        --md-sys-color-on-primary: var(--text-primary-color);
-        --md-sys-color-outline: var(--outline-color);
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-slider-handle-width: 14px;
-        --md-slider-handle-height: 14px;
-        --md-slider-state-layer-size: 24px;
-        min-width: 100px;
-        min-inline-size: 100px;
-        width: 200px;
-      }
-    `,
-  ];
+  static get styles(): CSSResultGroup {
+    return [
+      Slider.styles,
+      css`
+        :host {
+          --wa-form-control-activated-color: var(--primary-color);
+          --track-size: var(--ha-slider-track-size, 4px);
+          --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
+          --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
+          --wa-color-surface-default: var(--card-background-color);
+          --wa-color-neutral-fill-normal: var(--disabled-color);
+          --wa-tooltip-background-color: var(--secondary-background-color);
+          --wa-tooltip-color: var(--primary-text-color);
+          --wa-tooltip-font-family: var(
+            --ha-tooltip-font-family,
+            var(--ha-font-family-body)
+          );
+          --wa-tooltip-font-size: var(
+            --ha-tooltip-font-size,
+            var(--ha-font-size-s)
+          );
+          --wa-tooltip-font-weight: var(
+            --ha-tooltip-font-weight,
+            var(--ha-font-weight-normal)
+          );
+          --wa-tooltip-line-height: var(
+            --ha-tooltip-line-height,
+            var(--ha-line-height-condensed)
+          );
+          --wa-tooltip-padding: 8px;
+          --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
+          --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
+          --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
+          min-width: 100px;
+          min-inline-size: 100px;
+          width: 200px;
+        }
+
+        #thumb {
+          border: none;
+        }
+
+        #slider {
+          &:focus-visible:not(.disabled) #thumb,
+          &:focus-visible:not(.disabled) #thumb-min,
+          &:focus-visible:not(.disabled) #thumb-max {
+            outline: var(--wa-focus-ring);
+          }
+        }
+
+        :host([size="medium"]) {
+          --thumb-width: var(--ha-font-size-l, 1.25em);
+          --thumb-height: var(--ha-font-size-l, 1.25em);
+        }
+
+        :host([size="small"]) {
+          --thumb-width: var(--ha-font-size-m, 1em);
+          --thumb-height: var(--ha-font-size-m, 1em);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {