@kubex/zinc 1.1.69 → 1.1.71

package/src/components/input/input.component.ts

@@ -33,7 +33,7 @@ import styles from './input.scss';
  *
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
- * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.
+ * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.
  * @slot prefix - Used to prepend a presentational icon or similar element to the input.
  * @slot suffix - Used to append a presentational icon or similar element to the input.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
@@ -51,6 +51,12 @@ import styles from './input.scss';
  * @csspart clear-button - The clear button.
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
+ *
+ * @cssproperty --zn-range-track-height - The height of a range input's track.
+ * @cssproperty --zn-range-track-color - The color of a range input's track.
+ * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.
+ * @cssproperty --zn-range-thumb-color - The color of a range input's thumb.
+ * @cssproperty --zn-range-thumb-ring-width - The width of the ring drawn around a range input's thumb.
  */
 export default class ZnInput extends ZincElement implements ZincFormControl {
   static styles = unsafeCSS(styles);
@@ -80,7 +86,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
    * to `text`
    */
   @property({reflect: true}) type: 'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |
-    'search' | 'tel' | 'text' | 'time' | 'url' = 'text';
+    'range' | 'search' | 'tel' | 'text' | 'time' | 'url' = 'text';
 
   /** The name of the input, submitted as a name/value pair with form data. */
   @property() name: string = "";
@@ -146,6 +152,12 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** The color format to display for color inputs. Only applies when type is 'color'. **/
   @property({attribute: 'color-format'}) colorFormat: 'hex' | 'rgb' | 'hsl' | 'oklch' = 'hex';
 
+  /**
+   * Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type
+   * is 'range' and no `context-note` is set.
+   */
+  @property({attribute: 'value-suffix'}) valueSuffix: string = '';
+
   /**
    * By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside a form and associate it with the form that has this `id`. The form must be
@@ -615,6 +627,13 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     }
   }
 
+  protected firstUpdated() {
+    // A range input with no value resolves to the midpoint of min/max natively, so adopt it as our value
+    if (this.type === 'range' && this.value === '') {
+      this.value = this.input.value;
+    }
+  }
+
   @watch('disabled', {waitUntilFirstUpdate: true})
   handleDisabledChange() {
     // Disabled form controls are always valid
@@ -763,9 +782,10 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
     const hasContextNoteSlot = this.hasSlotController.test('context-note');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const isRange = this.type === 'range';
     const hasLabel = this.label ? true : hasLabelSlot;
     const hasLabelTooltip = this.labelTooltip ? true : hasLabelTooltipSlot;
-    const hasContextNote = this.contextNote ? true : hasContextNoteSlot;
+    const hasContextNote = this.contextNote || isRange ? true : hasContextNoteSlot;
     const hasHelpText = this.helpText ? true : hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
     const hasOptionalIcon = this.optionalIcon;
@@ -803,7 +823,8 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
 
         ${hasContextNote
           ? html`
-            <span class="form-control__label-context-note"><slot name="context-note">${this.contextNote}</slot></span>`
+            <span class="form-control__label-context-note"><slot name="context-note">${this.contextNote ||
+            (isRange ? `${this.value ?? ''}${this.valueSuffix}` : '')}</slot></span>`
           : ''}
 
         <div part="form-control-input"
@@ -822,27 +843,12 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                  'input--filled': this.filled,
                  'input--focused': this.hasFocus,
                  'input--empty': !this.value,
+                 'input--range': isRange,
                  'input--no-spin-buttons': this.noSpinButtons && this.type !== 'currency',
                })}>
 
             <span part="prefix" class="input__prefix">
-              ${this.type === 'color'
-                ? html`
-                  <div
-                    class="input__color-swatch"
-                    @click=${this.handleColorSwatchClick}
-                    style="--color-value: ${this.convertToHex(this.value) || '#000000'}">
-                    <div class="input__color-swatch-inner"></div>
-                  </div>
-                  <input
-                    class="input__color-picker"
-                    type="color"
-                    .value=${this.convertToHex(this.value) || '#000000'}
-                    @change=${this.handleColorPickerChange}
-                    @input=${this.handleColorPickerChange}
-                    tabindex="-1"
-                  />`
-                : this.type === 'currency'
+              ${this.type === 'currency'
                 ? html`
                   <zn-icon class="input__prefix-default" src="payments"></zn-icon>`
                 : this.type === 'email' && hasOptionalIcon
@@ -933,6 +939,23 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
 
             <span part="suffix" class="input__suffix">
               <slot name="suffix"></slot>
+              ${this.type === 'color'
+                ? html`
+                  <div
+                    class="input__color-swatch"
+                    @click=${this.handleColorSwatchClick}
+                    style="--color-value: ${this.convertToHex(this.value) || '#000000'}">
+                    <div class="input__color-swatch-inner"></div>
+                  </div>
+                  <input
+                    class="input__color-picker"
+                    type="color"
+                    .value=${this.convertToHex(this.value) || '#000000'}
+                    @change=${this.handleColorPickerChange}
+                    @input=${this.handleColorPickerChange}
+                    tabindex="-1"
+                  />`
+                : ''}
             </span>
           </div>
         </div>

package/src/components/input/input.scss

@@ -384,51 +384,163 @@ input[type='date']::-webkit-calendar-picker-indicator {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>');
 }
 
-/* Color input styling */
+/* Color input styling — the preview fills the trailing edge of the field */
 .input__color-swatch {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--zn-border-radius);
-  border: solid 1px rgba(0, 0, 0, 0.15);
+  align-self: stretch;
+  border: none;
+  border-inline-start: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  border-radius: 0;
   background-color: var(--zn-color-neutral-0);
   cursor: pointer;
-  transition: var(--zn-transition-fast) border-color, var(--zn-transition-fast) box-shadow;
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
-  margin-inline-start: var(--zn-input-spacing-small);
+  margin: 0;
 
-  &:hover {
-    border-color: rgba(0, 0, 0, 0.25);
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+  &:hover .input__color-swatch-inner {
+    filter: brightness(0.95);
   }
 }
 
-/* Size-specific spacing adjustments for color swatch */
+.input__color-swatch-inner {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-value, #000000);
+  transition: var(--zn-transition-fast) filter;
+}
+
+/* Size adjustments for color inputs — .input clips the trailing corners */
 .input--x-small .input__color-swatch {
-  margin-inline-start: var(--zn-input-spacing-x-small);
+  width: calc(var(--zn-input-height-x-small) * 1.2);
 }
 
 .input--small .input__color-swatch {
-  margin-inline-start: var(--zn-spacing-x2-small);
+  width: calc(var(--zn-input-height-small) * 1.2);
 }
 
 .input--medium .input__color-swatch {
-  margin-inline-start: var(--zn-spacing-x-small);
+  width: calc(var(--zn-input-height-medium) * 1.2);
 }
 
 .input--large .input__color-swatch {
-  margin-inline-start: var(--zn-spacing-small);
+  width: calc(var(--zn-input-height-large) * 1.2);
 }
 
-.input__color-swatch-inner {
-  width: 100%;
-  height: 100%;
-  border-radius: calc(var(--zn-border-radius) - 2px);
-  background-color: var(--color-value, #000000);
+/* Range inputs render as a bare track, with the value shown in the context note above */
+/* The thumb already leaves clear space above the track, so drop the label/field gap */
+:host([type='range']) .form-control--has-label .form-control__label,
+:host([type='range']) .form-control__label-context-note {
+  margin-bottom: 0;
+}
+
+:host([type='range']) .form-control-input {
+  margin-top: 0;
+}
+
+.input--standard.input--range {
+  --zn-range-track-height: 6px;
+  --zn-range-track-color: var(--zn-color-neutral-200);
+  --zn-range-thumb-size: 18px;
+  --zn-range-thumb-color: var(--zn-color-primary-600);
+  --zn-range-thumb-ring-width: 4px;
+
+  align-items: center;
+  height: var(--zn-range-thumb-size);
+  padding: 0;
+  overflow: visible;
+  cursor: pointer;
+}
+
+/* Matches the specificity of the hover/focus/disabled chrome rules above so the track stays bare */
+.input--standard.input--range,
+.input--standard.input--range:hover,
+.input--standard.input--range.input--focused,
+.input--standard.input--range.input--disabled {
+  border: none;
+  background: none;
+  box-shadow: none;
+}
+
+.input--standard.input--range.input--x-small {
+  --zn-range-track-height: 4px;
+  --zn-range-thumb-size: 14px;
+  --zn-range-thumb-ring-width: 3px;
+}
+
+.input--standard.input--range.input--small {
+  --zn-range-track-height: 5px;
+  --zn-range-thumb-size: 16px;
+  --zn-range-thumb-ring-width: 3px;
+}
+
+.input--standard.input--range.input--large {
+  --zn-range-track-height: 7px;
+  --zn-range-thumb-size: 20px;
+}
+
+.input--range .input__control {
+  -webkit-appearance: none;
+  appearance: none;
+  height: var(--zn-range-thumb-size);
+  padding: 0;
+  margin: 0;
+  background: none;
+  cursor: inherit;
+}
+
+.input--range .input__control::-webkit-slider-runnable-track {
+  height: var(--zn-range-track-height);
+  border-radius: calc(var(--zn-range-track-height) / 2);
+  background-color: var(--zn-range-track-color);
+}
+
+.input--range .input__control::-moz-range-track {
+  height: var(--zn-range-track-height);
+  border-radius: calc(var(--zn-range-track-height) / 2);
+  background-color: var(--zn-range-track-color);
+}
+
+.input--range .input__control::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--zn-range-thumb-size);
+  height: var(--zn-range-thumb-size);
+  margin-top: calc((var(--zn-range-track-height) - var(--zn-range-thumb-size)) / 2);
+  border: var(--zn-range-thumb-ring-width) solid var(--zn-color-neutral-0);
+  border-radius: 50%;
+  background-color: var(--zn-range-thumb-color);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color);
+  transition: var(--zn-transition-fast) box-shadow, var(--zn-transition-fast) background-color;
+}
+
+.input--range .input__control::-moz-range-thumb {
+  width: var(--zn-range-thumb-size);
+  height: var(--zn-range-thumb-size);
+  box-sizing: border-box;
+  border: var(--zn-range-thumb-ring-width) solid var(--zn-color-neutral-0);
+  border-radius: 50%;
+  background-color: var(--zn-range-thumb-color);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color);
+  transition: var(--zn-transition-fast) box-shadow, var(--zn-transition-fast) background-color;
+}
+
+.input--range:hover:not(.input--disabled) .input__control::-webkit-slider-thumb {
+  background-color: var(--zn-color-primary-500);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color-hover);
+}
+
+.input--range:hover:not(.input--disabled) .input__control::-moz-range-thumb {
+  background-color: var(--zn-color-primary-500);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color-hover);
+}
+
+.input--range .input__control:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+}
+
+.input--range .input__control:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
 }
 
 /* Hide the native color input but keep it functional */
@@ -444,23 +556,3 @@ input[type='date']::-webkit-calendar-picker-indicator {
   visibility: hidden;
 }
 
-/* Size adjustments for color inputs */
-.input--x-small .input__color-swatch {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.input--small .input__color-swatch {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.input--medium .input__color-swatch {
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-.input--large .input__color-swatch {
-  width: 2rem;
-  height: 2rem;
-}

package/src/components/input/input.test.ts

@@ -172,4 +172,49 @@ describe('<zn-input>', () => {
       expect(secondInput.value).to.equal('');
     });
   });
+
+  describe('type="range"', () => {
+    const contextNote = (el: ZnInput) =>
+      el.shadowRoot!.querySelector('.form-control__label-context-note')!.textContent!.trim();
+
+    it('adopts the native midpoint when no value is set', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="range" min="0" max="10"></zn-input>`);
+      await el.updateComplete;
+
+      expect(el.value).to.equal('5');
+    });
+
+    it('displays the value with its suffix in the context note', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" min="0" max="2" step="0.5" value="0.5" value-suffix="rem"></zn-input>`
+      );
+      await el.updateComplete;
+
+      expect(contextNote(el)).to.equal('0.5rem');
+    });
+
+    it('updates the context note as the value changes', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" min="0" max="10" value="4" value-suffix="px"></zn-input>`
+      );
+      await el.updateComplete;
+
+      const input = el.shadowRoot!.querySelector('.input__control') as HTMLInputElement;
+      input.value = '7';
+      input.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      expect(el.value).to.equal('7');
+      expect(contextNote(el)).to.equal('7px');
+    });
+
+    it('prefers an explicit context-note over the value', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" context-note="Custom" value="4"></zn-input>`
+      );
+      await el.updateComplete;
+
+      expect(contextNote(el)).to.equal('Custom');
+    });
+  });
 });