@sebgroup/green-core 3.26.3 → 3.28.0

package/components/slider/slider.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _internalStart, _internalEnd, _thumbRects, _lastPointerX, _Slider_instances, effectiveMin_fn, effectiveMax_fn, start_fn, end_fn, normalizeValues_fn, clamp_fn, percent_fn, ratio_fn, startPercent_fn, endPercent_fn, tickPosition_fn, renderTicks_fn, setQuietUpdate_fn, controlClasses_fn, thumbClasses_fn, bubbleClasses_fn, renderBubbles_fn, controlStyle_fn, syncFormValue_fn, labelledBy_fn, _handleStartInput, _handleStartChange, _handleEndInput, _handleEndChange, _handleStartPointerDown, _handleEndPointerDown, _clearActiveThumb, _handleThumbPointerMove, _updateHoveredThumb, _handleThumbPointerLeave, _handleStartFocus, _handleEndFocus, _handleStartBlur, _handleEndBlur, renderTextbox_fn, formatValue_fn, openTextbox_fn, handleTextboxDraftInput_fn, handleTextboxKeyDown_fn, commitTextbox_fn, closeTextbox_fn, isThumbVisible_fn;
+var _internalStart, _internalEnd, _textboxesWidth, _textboxCount, _thumbRects, _lastPointerX, _stackObserver, _Slider_instances, updateStacked_fn, effectiveMin_fn, effectiveMax_fn, start_fn, end_fn, normalizeValues_fn, clamp_fn, percent_fn, ratio_fn, startPercent_fn, endPercent_fn, tickPosition_fn, renderTicks_fn, setQuietUpdate_fn, controlClasses_fn, thumbClasses_fn, bubbleClasses_fn, renderBubbles_fn, renderBoundLabels_fn, controlStyle_fn, syncFormValue_fn, labelledBy_fn, _handleStartInput, _handleStartChange, _handleEndInput, _handleEndChange, _handleStartPointerDown, _handleEndPointerDown, _clearActiveThumb, _handleThumbPointerMove, _updateHoveredThumb, _handleThumbPointerLeave, _handleStartFocus, _handleEndFocus, _handleStartBlur, _handleEndBlur, renderTextbox_fn, _stopTextboxChange, textboxLabel_fn, formatValue_fn, openTextbox_fn, handleTextboxDraftInput_fn, handleTextboxKeyDown_fn, commitTextbox_fn, closeTextbox_fn, isThumbVisible_fn;
 import { localized, msg } from "@lit/localize";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -22,7 +22,9 @@ import {
   withSizeXProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsFormControlElement } from "../form/form-control.js";
+import { GdsInput } from "../input/input.component.js";
 import SliderStyles from "./slider.styles.js";
+const SLIDER_MIN_TRACK_WIDTH = 200;
 const sliderValueConverter = {
   fromAttribute(value) {
     const [start, end] = value.split(",").map((part) => {
@@ -52,6 +54,8 @@ let Slider = class extends GdsFormControlElement {
     __privateAdd(this, _internalStart);
     __privateAdd(this, _internalEnd);
     this.hideTextbox = false;
+    this.minLabel = "";
+    this.maxLabel = "";
     this.readonly = false;
     this._activeThumb = null;
     this._focusedThumb = null;
@@ -64,9 +68,16 @@ let Slider = class extends GdsFormControlElement {
     this._draftMinInvalid = false;
     this._draftMaxInvalid = false;
     this._quietUpdate = false;
+    this._stacked = false;
+    this._textboxesStacked = false;
+    __privateAdd(this, _textboxesWidth, 0);
+    __privateAdd(this, _textboxCount, 0);
     __privateAdd(this, _thumbRects, {});
     // Last known pointer X per thumb, used to re-check hover once a click-to-jump updates the thumb position.
     __privateAdd(this, _lastPointerX, {});
+    // Undebounced: ResizeObserver callbacks run after layout but before paint, and Lit's
+    // update is a microtask, so the class lands in the same frame and nothing shifts.
+    __privateAdd(this, _stackObserver, new ResizeObserver(() => __privateMethod(this, _Slider_instances, updateStacked_fn).call(this)));
     // The native "input" event is composed and already bubbles out of the shadow root, so it
     // doesn't need to be re-dispatched here (unlike "change", which is not composed).
     __privateAdd(this, _handleStartInput, (e) => {
@@ -177,6 +188,11 @@ let Slider = class extends GdsFormControlElement {
       if (this._focusedThumb === "end") this._focusedThumb = null;
       if (this._focusVisibleThumb === "end") this._focusVisibleThumb = null;
     });
+    // The inner gds-input re-dispatches a composed "change", which would otherwise escape the
+    // slider and be mistaken for the slider's own change event.
+    __privateAdd(this, _stopTextboxChange, (event) => {
+      event.stopPropagation();
+    });
     __privateSet(this, _internalStart, __privateMethod(this, _Slider_instances, effectiveMin_fn).call(this));
     __privateSet(this, _internalEnd, __privateMethod(this, _Slider_instances, effectiveMax_fn).call(this));
   }
@@ -204,14 +220,27 @@ let Slider = class extends GdsFormControlElement {
     super.connectedCallback();
     __privateMethod(this, _Slider_instances, normalizeValues_fn).call(this);
     window.addEventListener("pointerup", __privateGet(this, _clearActiveThumb));
+    __privateGet(this, _stackObserver).observe(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener("pointerup", __privateGet(this, _clearActiveThumb));
+    __privateGet(this, _stackObserver).disconnect();
   }
   focus(options) {
     this._getValidityAnchor()?.focus(options);
   }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    __privateMethod(this, _Slider_instances, updateStacked_fn).call(this);
+  }
+  // Toggling either of these changes the row's contents without necessarily resizing the
+  // host, so the resize observer alone can't be relied on to recalculate.
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("range") || changed.has("hideTextbox"))
+      __privateMethod(this, _Slider_instances, updateStacked_fn).call(this);
+  }
   render() {
     const style = __privateMethod(this, _Slider_instances, controlStyle_fn).call(this);
     const effectiveMin = __privateMethod(this, _Slider_instances, effectiveMin_fn).call(this);
@@ -246,7 +275,13 @@ let Slider = class extends GdsFormControlElement {
             >`
     )}
 
-      <div id="control-row">
+      <div
+        id="control-row"
+        class=${classMap({
+      stacked: this._stacked,
+      "textboxes-stacked": this._textboxesStacked
+    })}
+      >
         ${when(
       this.range && !this.hideTextbox,
       () => __privateMethod(this, _Slider_instances, renderTextbox_fn).call(this, "min")
@@ -313,7 +348,7 @@ let Slider = class extends GdsFormControlElement {
                 @change=${__privateGet(this, _handleEndChange)}
               />`
     )}
-          ${__privateMethod(this, _Slider_instances, renderBubbles_fn).call(this)}
+          ${__privateMethod(this, _Slider_instances, renderBubbles_fn).call(this)} ${__privateMethod(this, _Slider_instances, renderBoundLabels_fn).call(this)}
         </div>
 
         ${when(!this.hideTextbox, () => __privateMethod(this, _Slider_instances, renderTextbox_fn).call(this, "max"))}
@@ -344,9 +379,38 @@ let Slider = class extends GdsFormControlElement {
 };
 _internalStart = new WeakMap();
 _internalEnd = new WeakMap();
+_textboxesWidth = new WeakMap();
+_textboxCount = new WeakMap();
 _thumbRects = new WeakMap();
 _lastPointerX = new WeakMap();
+_stackObserver = new WeakMap();
 _Slider_instances = new WeakSet();
+updateStacked_fn = function() {
+  const row = this._controlRow;
+  if (!row) return;
+  const textboxes = Array.from(row.querySelectorAll(".textbox"));
+  if (textboxes.length === 0) {
+    __privateSet(this, _textboxCount, 0);
+    this._stacked = false;
+    this._textboxesStacked = false;
+    return;
+  }
+  if (textboxes.length !== __privateGet(this, _textboxCount)) {
+    __privateSet(this, _textboxCount, textboxes.length);
+    if (this._textboxesStacked) {
+      this._textboxesStacked = false;
+      this.updateComplete.then(() => __privateMethod(this, _Slider_instances, updateStacked_fn).call(this));
+      return;
+    }
+  }
+  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+  if (!this._textboxesStacked) {
+    __privateSet(this, _textboxesWidth, textboxes.reduce((total, textbox) => total + textbox.offsetWidth, 0) + gap * (textboxes.length - 1));
+  }
+  const available = row.clientWidth;
+  this._stacked = available - __privateGet(this, _textboxesWidth) - gap < SLIDER_MIN_TRACK_WIDTH;
+  this._textboxesStacked = __privateGet(this, _textboxesWidth) > available;
+};
 effectiveMin_fn = function() {
   return Math.min(this.min, this.max);
 };
@@ -479,6 +543,19 @@ renderBubbles_fn = function() {
   )}
     `;
 };
+// The labels sit inside the control and are taken out of flow, so they always span the track
+// itself regardless of the textboxes, and never shift the control vertically.
+renderBoundLabels_fn = function() {
+  if (!this.minLabel && !this.maxLabel) return html``;
+  return html`<div id="bound-labels">
+      <span class="bound-label min-label" aria-hidden="true"
+        >${this.minLabel}</span
+      >
+      <span class="bound-label max-label" aria-hidden="true"
+        >${this.maxLabel}</span
+      >
+    </div>`;
+};
 controlStyle_fn = function() {
   const thumbAwarePos = (ratio) => `calc((100% - var(--_thumb-size)) * ${ratio} + (var(--_thumb-size) / 2))`;
   const clampedStart = __privateMethod(this, _Slider_instances, clamp_fn).call(this, __privateMethod(this, _Slider_instances, start_fn).call(this));
@@ -531,22 +608,36 @@ renderTextbox_fn = function(bound) {
   const draft = bound === "min" ? this._draftMin : this._draftMax;
   const isDraftInvalid = bound === "min" ? this._draftMinInvalid : this._draftMaxInvalid;
   const displayValue = isEditing ? draft : __privateMethod(this, _Slider_instances, formatValue_fn).call(this, currentValue);
-  return html`<input
-      class="textbox ${isDraftInvalid ? "invalid" : ""}"
+  return html`<gds-input
+      class="textbox"
       id="${bound}-textbox"
       type="number"
+      plain
+      .size=${this.size}
+      .label=${__privateMethod(this, _Slider_instances, textboxLabel_fn).call(this, bound)}
+      gds-aria-labelledby=${__privateMethod(this, _Slider_instances, labelledBy_fn).call(this, bound === "min" ? "start" : "end")}
       .value=${displayValue}
-      .step=${String(this.step)}
-      style="min-width: ${Math.min(Math.max(displayValue.length, 3), 12)}ch"
-      aria-labelledby=${__privateMethod(this, _Slider_instances, labelledBy_fn).call(this, bound === "min" ? "start" : "end")}
-      aria-invalid=${isDraftInvalid ? "true" : "false"}
-      ?disabled=${this.disabled}
-      ?readonly=${this.readonly}
+      .step=${this.step}
+      .disabled=${this.disabled}
+      .readonly=${this.readonly}
+      .invalid=${isDraftInvalid}
+      style="--_textbox-chars: ${Math.min(
+    Math.max(displayValue.length, 3),
+    12
+  )}"
       @focus=${() => __privateMethod(this, _Slider_instances, openTextbox_fn).call(this, bound)}
       @input=${(event) => __privateMethod(this, _Slider_instances, handleTextboxDraftInput_fn).call(this, bound, event)}
+      @change=${__privateGet(this, _stopTextboxChange)}
       @blur=${() => __privateMethod(this, _Slider_instances, commitTextbox_fn).call(this, bound)}
       @keydown=${(event) => __privateMethod(this, _Slider_instances, handleTextboxKeyDown_fn).call(this, bound, event)}
-    />`;
+    ></gds-input>`;
+};
+_stopTextboxChange = new WeakMap();
+// Mirrors the gds-aria-labelledby wiring as a plain string, since cross-root element
+// references reflect to an empty content attribute that name computation tools can't read.
+textboxLabel_fn = function(bound) {
+  if (!this.range) return this.label;
+  return bound === "min" ? `${this.label} ${msg("Start value")}` : `${this.label} ${msg("End value")}`;
 };
 /** Displays values with the same number of decimals as `step`, so the readout doesn't change width. */
 formatValue_fn = function(value) {
@@ -686,6 +777,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "hide-textbox" })
 ], Slider.prototype, "hideTextbox", 2);
+__decorateClass([
+  property({ attribute: "min-label" })
+], Slider.prototype, "minLabel", 2);
+__decorateClass([
+  property({ attribute: "max-label" })
+], Slider.prototype, "maxLabel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Slider.prototype, "readonly", 2);
@@ -695,6 +792,9 @@ __decorateClass([
 __decorateClass([
   query("#slider-end")
 ], Slider.prototype, "_endInput", 2);
+__decorateClass([
+  query("#control-row")
+], Slider.prototype, "_controlRow", 2);
 __decorateClass([
   state()
 ], Slider.prototype, "_activeThumb", 2);
@@ -728,6 +828,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], Slider.prototype, "_quietUpdate", 2);
+__decorateClass([
+  state()
+], Slider.prototype, "_stacked", 2);
+__decorateClass([
+  state()
+], Slider.prototype, "_textboxesStacked", 2);
 __decorateClass([
   watch("min"),
   watch("max"),
@@ -743,7 +849,7 @@ let GdsSlider = class extends withSizeXProps(
 };
 GdsSlider = __decorateClass([
   gdsCustomElement("gds-slider", {
-    dependsOn: [GdsFormControlHeader, GdsFormControlFooter]
+    dependsOn: [GdsFormControlHeader, GdsFormControlFooter, GdsInput]
   })
 ], GdsSlider);
 export {

package/components/slider/slider.styles.js

@@ -8,9 +8,15 @@ const styles = css`
     --_track-height: var(--gds-sys-space-3xs);
     --_thumb-color: var(--gds-sys-color-l3-neutral-03);
     --_thumb-ring-color: var(--gds-sys-color-border-neutral-02);
-    --_textbox-height: var(--gds-sys-space-2xl);
-    --_textbox-padding: var(--gds-sys-space-s);
-    --_textbox-font: var(--gds-sys-text-detail-s-regular);
+    --_textbox-chrome: var(--gds-sys-space-2xl);
+    --_textbox-lock-space: calc(
+      var(--gds-sys-space-l) + var(--gds-sys-space-xs)
+    );
+    --_textbox-padding-inline: var(--gds-sys-space-s);
+    --_textbox-font: var(--gds-sys-text-detail-m-regular);
+    --_bound-label-font: var(--gds-sys-text-detail-s-regular);
+    --_bound-label-line-height: var(--gds-sys-space-l);
+    --_bound-label-gap: var(--gds-sys-space-5xs);
     --_bubble-font: var(--gds-sys-text-detail-s-regular);
     --_bubble-padding-x: var(--gds-sys-space-xs);
     --_bubble-bg: var(--gds-sys-color-l3-neutral-03);
@@ -34,9 +40,14 @@ const styles = css`
   :host([size='small']) {
     --_thumb-size: var(--gds-sys-space-s);
     --_track-height: var(--gds-sys-space-3xs);
-    --_textbox-height: var(--gds-sys-space-xl);
-    --_textbox-padding: var(--gds-sys-space-xs);
-    --_textbox-font: var(--gds-sys-text-detail-xs-regular);
+    --_textbox-chrome: var(--gds-sys-space-l);
+    --_textbox-lock-space: calc(
+      var(--gds-sys-space-m) + var(--gds-sys-space-3xs)
+    );
+    --_textbox-padding-inline: var(--gds-sys-space-xs);
+    --_textbox-font: var(--gds-sys-text-detail-s-regular);
+    --_bound-label-font: var(--gds-sys-text-detail-xs-regular);
+    --_bound-label-line-height: var(--gds-sys-space-m);
     --_bubble-font: var(--gds-sys-text-detail-xs-regular);
     --_bubble-gap-pressed: var(--gds-sys-space-4xs);
     --_bubble-padding-x: var(--gds-sys-space-2xs);
@@ -60,68 +71,119 @@ const styles = css`
     width: 1px;
   }
 
+  #control-row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_row-gap);
+  }
+
   #control {
     align-items: center;
     display: grid;
-    flex: 1;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    order: 1;
     height: var(--_thumb-size);
     min-height: var(--_thumb-size);
     overflow: visible;
     position: relative;
   }
 
-  #control-row {
-    align-items: center;
-    display: flex;
-    gap: var(--_row-gap);
+  .textbox {
+    flex: 0 0 auto;
   }
 
-  .textbox {
-    -webkit-appearance: textfield;
-    appearance: textfield;
-    background: var(--gds-sys-color-l3-neutral-02);
-    border-width: var(--gds-sys-space-5xs);
-    border-style: solid;
-    border-color: var(--gds-sys-color-border-neutral-01);
-    border-radius: var(--gds-sys-radius-max);
-    box-sizing: content-box;
-    color: var(--gds-sys-color-content-neutral-01);
-    font: var(--_textbox-font);
-    min-height: calc(var(--_textbox-height) - 2 * var(--gds-sys-space-5xs));
-    min-width: 3ch;
-    max-width: 12ch;
-    width: 3ch;
-    outline: 2px solid transparent;
-    outline-offset: 0px;
-    padding: 0 var(--_textbox-padding);
-    text-align: center;
-    transition-property: outline-color, outline-offset;
-    transition-duration: var(--_t-duration), var(--_t-duration);
-    transition-timing-function: var(--_t-easing-out);
+  #min-textbox {
+    order: 0;
   }
 
-  .textbox::-webkit-outer-spin-button,
-  .textbox::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  #max-textbox {
+    order: 2;
   }
 
-  .textbox:focus-visible {
-    outline-color: var(--gds-sys-color-content-neutral-01);
-    outline-offset: 2px;
+  /* Set by the resize observer once too little is left for the track on the row. */
+  #control-row.stacked #control {
+    order: -1;
+    flex-basis: 100%;
   }
 
-  .textbox:disabled {
-    cursor: default;
+  #control-row.stacked #max-textbox {
+    margin-inline-start: auto;
   }
 
-  :host([readonly]) .native-control {
-    cursor: default;
-    pointer-events: none;
+  /* Second stage: the two textboxes no longer fit on one row either. */
+  #control-row.textboxes-stacked .textbox {
+    flex-basis: 100%;
+    inline-size: 100%;
+  }
+
+  #control-row.textboxes-stacked #max-textbox {
+    margin-inline-start: 0;
+  }
+
+  /* Reserves room for the out-of-flow bound labels without moving the control itself,
+     since flex centering ignores the padding box. */
+  #control-row:has(#bound-labels) {
+    padding-block-end: calc(
+      var(--_bound-label-gap) + var(--_bound-label-line-height)
+    );
+  }
+
+  /* Stacked, the labels sit between the two rows, so the track carries the reservation. */
+  #control-row.stacked:has(#bound-labels) {
+    padding-block-end: 0;
+  }
+
+  #control-row.stacked #control:has(#bound-labels) {
+    margin-block-end: calc(
+      var(--_bound-label-gap) + var(--_bound-label-line-height)
+    );
+  }
+
+  #bound-labels {
+    display: flex;
+    gap: var(--gds-sys-space-xs);
+    inset-block-start: calc(100% + var(--_bound-label-gap));
+    inset-inline: 0;
+    justify-content: space-between;
+    position: absolute;
+  }
+
+  .bound-label {
+    color: var(--gds-sys-color-content-neutral-02);
+    font: var(--_bound-label-font);
+    line-height: var(--_bound-label-line-height);
+    white-space: nowrap;
+  }
+
+  .max-label {
+    margin-inline-start: auto;
+    text-align: end;
+  }
+
+  .textbox {
+    --_appearance-spin-button: none;
+    --_gds-input-radius: var(--gds-sys-radius-max);
+    --_gds-input-text-align: center;
+    --_gds-input-padding-inline: var(--_textbox-padding-inline);
+    --_gds-input-block-size: var(--gds-sys-space-2xl);
+
+    /* Matches the native input's font so the ch-based width measures the right glyphs. */
+    font: var(--_textbox-font);
+    inline-size: calc(
+      var(--_textbox-chars, 3) * 1ch + var(--_textbox-chrome) +
+        var(--_textbox-extras, 0px)
+    );
   }
 
   :host([readonly]) .textbox {
+    --_textbox-extras: var(--_textbox-lock-space);
+  }
+
+  :host([readonly]) .native-control {
     cursor: default;
+    pointer-events: none;
   }
 
   #track-before,