Slider hint (#1174)

* update example

* show hint in correct position when present

* update example

* update example

packages/webawesome/docs/docs/components/slider.md

@@ -7,8 +7,8 @@ category: Form Controls
 
 ```html {.example}
 <wa-slider
-  label="Number of cats"
-  hint="Limit six per household"
+  label="Number of users"
+  hint="Limit six per team"
   name="value"
   value="3"
   min="0"
@@ -40,7 +40,7 @@ Use the `label` attribute to give the slider an accessible label. For labels tha
 Add descriptive hint to a slider with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
 
 ```html {.example}
-<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
+<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100" value="50"></wa-slider>
 ```
 
 ### Showing tooltips
@@ -72,7 +72,15 @@ Use the `with-markers` attribute to display visual indicators at each step incre
 Use the `reference` slot to add contextual labels below the slider. References are automatically spaced using `space-between`, making them easy to align with the start, center, and end positions.
 
 ```html {.example}
-<wa-slider label="Speed" name="speed" min="1" max="5" value="3" with-markers>
+<wa-slider
+  label="Speed"
+  name="speed"
+  min="1"
+  max="5"
+  value="3"
+  with-markers
+  hint="Controls the speed of the thing you're currently doing."
+>
   <span slot="reference">Slow</span>
   <span slot="reference">Medium</span>
   <span slot="reference">Fast</span>
@@ -249,8 +257,8 @@ By default, the filled indicator extends from the minimum value to the current p
 
 ```html {.example}
 <wa-slider
-  label="Cat playfulness"
-  hint="Energy level during playtime"
+  label="User Friendliness"
+  hint="Did you find our product easy to use?"
   name="value"
   value="0"
   min="-5"
@@ -259,8 +267,9 @@ By default, the filled indicator extends from the minimum value to the current p
   with-markers
   with-tooltip
 >
-  <span slot="reference">Lazy</span>
-  <span slot="reference">Zoomies</span>
+  <span slot="reference">Easy</span>
+  <span slot="reference">Moderate</span>
+  <span slot="reference">Difficult</span>
 </wa-slider>
 ```
 

packages/webawesome/docs/docs/resources/changelog.md

@@ -8,6 +8,10 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
 
 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
+## Next
+
+- Fixed a bug in `<wa-slider>` that prevented the hint from showing up
+
 ## 3.0.0-beta.2
 
 ### New Features {data-no-outline}
@@ -375,4 +379,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)

packages/webawesome/src/components/slider/slider.ts

@@ -769,8 +769,10 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   }
 
   render() {
-    const hasLabel = this.hasSlotController.test('label');
-    const hasHint = this.hasSlotController.test('hint');
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHintSlot = this.hasSlotController.test('hint');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHint = this.hint ? true : !!hasHintSlot;
     const hasReference = this.hasSlotController.test('reference');
 
     const sliderClasses = classMap({
@@ -791,7 +793,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
     }
 
     // Common UI fragments
-    const labelAndHint = html`
+    const label = html`
       <label
         id="label"
         part="label"
@@ -801,8 +803,16 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
       >
         <slot name="label">${this.label}</slot>
       </label>
+    `;
 
-      <div id="hint" part="hint" class=${classMap({ vh: !hasHint })}>
+    const hint = html`
+      <div
+        id="hint"
+        part="hint"
+        class=${classMap({
+          'has-slotted': hasHint,
+        })}
+      >
         <slot name="hint">${this.hint}</slot>
       </div>
     `;
@@ -856,7 +866,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
       const maxThumbPosition = clamp(this.getPercentageFromValue(this.maxValue), 0, 100);
 
       return html`
-        ${labelAndHint}
+        ${label}
 
         <div id="slider" part="slider" class=${sliderClasses}>
           <div id="track" part="track">
@@ -914,7 +924,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
             ></span>
           </div>
 
-          ${referencesTemplate}
+          ${referencesTemplate} ${hint}
         </div>
 
         ${createTooltip('thumb-min', this.minValue)} ${createTooltip('thumb-max', this.maxValue)}
@@ -929,7 +939,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
       );
 
       return html`
-        ${labelAndHint}
+        ${label}
 
         <div
           id="slider"
@@ -963,7 +973,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
             <span id="thumb" part="thumb" style="--position: ${thumbPosition}%"></span>
           </div>
 
-          ${referencesTemplate}
+          ${referencesTemplate} ${hint}
         </div>
 
         ${createTooltip('thumb', this.value)}