[channel-slider] Show the value above the slider, not in the tooltip, closes #154 (#160)

* First stab at working on #154

* Address feedback: Style improvements

Author: DmitrySharabin

src/channel-slider/channel-slider.css

@@ -1,19 +1,64 @@
 .color-slider-label {
+	--_transition-duration: var(--transition-duration, 200ms);
+
 	display: grid;
 	grid-template-columns: 1fr auto;
 	gap: .3em;
-	position: relative;
+	align-items: center;
 
 	em {
 		opacity: 60%;
+		transition: opacity var(--_transition-duration);
 	}
-}
 
-color-slider {
-	grid-column: 1 / -1;
-}
+	&:not(:hover, :focus-within) em {
+		opacity: 0;
+	}
+
+	input[type=number] {
+		--_border-color: var(--border-color, color-mix(in oklab, currentcolor calc(var(--_current-color-percent, 30) * 1%), oklab(none none none / 0%)));
+
+		all: unset;
 
+		--content-width: calc(var(--value-length) * 1ch);
+		width: calc(var(--content-width, 2ch) + 1.2em);
+		min-width: calc(2ch + 1.2em);
+		box-sizing: content-box;
+		padding: .1em .2em;
+		border-radius: .2em;
+		border: 1px solid var(--_border-color);
+		text-align: center;
+		font-size: 90%;
+		transition: var(--_transition-duration) allow-discrete;
+		transition-property: opacity, border-color, display;
 
+		&::-webkit-textfield-decoration-container {
+			gap: .2em;
+		}
 
+		&:not(:hover, :focus) {
+			--_current-color-percent: 10;
 
+			opacity: 60%;
+			border-color: var(--_border-color);
 
+			/* Hide spin buttons in Firefox */
+			appearance: textfield;
+
+			/* Hide spin buttons in Safari and Chrome */
+			&::-webkit-inner-spin-button {
+				opacity: 0;
+				display: none;
+			}
+		}
+
+		@supports (field-sizing: content) {
+			field-sizing: content;
+			width: auto;
+		}
+	}
+}
+
+color-slider {
+	grid-column: 1 / -1;
+}

src/channel-slider/channel-slider.js

@@ -9,8 +9,11 @@ const Self = class ChannelSlider extends ColorElement {
 	static shadowStyle = true;
 	static shadowTemplate = `
 		<label class="color-slider-label" part="label">
-			<slot></slot>
-			<color-slider part="color_slider" exportparts="slider" id="slider" tooltip></color-slider>
+			<slot>
+				<span id="channel_info" part="channel-info"></span>
+				<input type="number" part="spinner" min="0" max="1" step="0.01" id="spinner" />
+			</slot>
+			<color-slider part="color_slider" exportparts="slider" id="slider"></color-slider>
 		</label>`;
 
 	constructor () {
@@ -24,10 +27,12 @@ const Self = class ChannelSlider extends ColorElement {
 		super.connectedCallback?.();
 
 		this._el.slider.addEventListener("input", this);
+		this._el.slot.addEventListener("input", this);
 	}
 
 	disconnectedCallback () {
 		this._el.slider.removeEventListener("input", this);
+		this._el.slot.removeEventListener("input", this);
 	}
 
 	handleEvent (event) {
@@ -82,13 +87,26 @@ const Self = class ChannelSlider extends ColorElement {
 	propChangedCallback ({name, prop, detail: change}) {
 		if (["space", "min", "max", "step", "value", "defaultValue"].includes(name)) {
 			prop.applyChange(this._el.slider, change);
+
+			if (["min", "max", "step", "value", "defaultValue"].includes(name)) {
+				prop.applyChange(this._el.spinner, change);
+
+				if (name === "value" && this.value !== undefined) {
+					this._el.spinner.value = Number(this.value.toPrecision(4));
+
+					if (!CSS.supports("field-sizing", "content")) {
+						let valueStr = this._el.spinner.value;
+						this._el.spinner.style.setProperty("--value-length", valueStr.length);
+					}
+				}
+			}
 		}
 
 		if (name === "defaultColor" || name === "space" || name === "channel" || name === "min" || name === "max") {
 			this._el.slider.stops = this.stops;
 
 			if (name === "space" || name === "channel" || name === "min" || name === "max") {
-				this._el.slot.innerHTML = `${ this.channelName } <em>(${ this.min }&thinsp;&ndash;&thinsp;${ this.max })</em>`;
+				this._el.channel_info.innerHTML = `${ this.channelName } <em>(${ this.min }&thinsp;&ndash;&thinsp;${ this.max })</em>`;
 			}
 		}
 	}