@kubex/zinc 1.1.68 → 1.1.70

package/src/components/icon-picker/icon-picker.component.ts

@@ -26,19 +26,27 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   };
 
   private readonly formControlController = new FormControlController(this, {
-    assumeInteractionOn: ['zn-change']
+    assumeInteractionOn: ['zn-change'],
+    // With allow-upload, a chosen file is submitted under `name` in place of
+    // the icon string — the two are mutually exclusive.
+    value: (el: ZnIconPicker) => el._file ?? el.icon
   });
 
   @property() name = '';
   @property() icon = '';
   @property() label = '';
-  @property() library: string = 'material';
+  // Matches zn-icon's defaultLibrary so the picked icon previews the same way
+  // it will render wherever the stored name is displayed.
+  @property() library: string = 'material-symbols-outlined';
   @property() color: string = '';
   @property({type: Boolean, attribute: 'no-color'}) noColor: boolean = false;
   @property({type: Boolean, attribute: 'no-library'}) noLibrary: boolean = false;
   @property({attribute: 'help-text'}) helpText: string = '';
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
+  @property({type: Boolean, attribute: 'allow-upload'}) allowUpload = false;
+  @property() accept = 'image/*';
   @property({reflect: true}) form: string;
 
   @defaultValue() defaultValue = '';
@@ -52,8 +60,16 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   @state() private _pendingIcon = '';
   @state() private _pendingLibrary = '';
   @state() private _pendingColor = '';
+  @state() private _pendingFile: File | null = null;
+  @state() private _pendingFileUrl: string | null = null;
+  @state() private _mode: 'icon' | 'upload' = 'icon';
+
+  // Committed upload (allow-upload mode)
+  @state() private _file: File | null = null;
+  @state() private _fileUrl: string | null = null;
 
   @query('zn-dialog') private _dialog: ZnDialog;
+  @query('.icon-picker__file-input') private _fileInput: HTMLInputElement;
 
   get value(): string {
     return this.icon;
@@ -63,8 +79,18 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     this.icon = val;
   }
 
+  /** The chosen file when the user uploaded an image instead of picking an icon. */
+  get file(): File | null {
+    return this._file;
+  }
+
+  /** True when the current value renders as an image (an uploaded file or a URL) rather than a library icon. */
+  get isImageValue(): boolean {
+    return !!this._file || this.icon.includes('/');
+  }
+
   get validity(): ValidityState {
-    if (this.required && !this.icon) {
+    if (this.required && !this.icon && !this._file) {
       return {
         valid: false,
         valueMissing: true,
@@ -81,7 +107,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   }
 
   get validationMessage(): string {
-    return this.required && !this.icon ? 'Please select an icon.' : '';
+    return this.required && !this.icon && !this._file ? 'Please select an icon.' : '';
   }
 
   checkValidity(): boolean { return this.validity.valid; }
@@ -129,10 +155,11 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   }
 
   private async openDialog() {
-    this._pendingIcon = this.icon;
+    this._pendingIcon = this.isImageValue ? '' : this.icon;
     this._pendingLibrary = this.library;
     this._pendingColor = this.color;
     this._searchQuery = '';
+    this._mode = this.allowUpload && this.isImageValue ? 'upload' : 'icon';
     this._iconList = await this.getIconsForLibrary(this.library);
     this._filteredIcons = this._iconList.slice(0, 200);
     this._dialogOpen = true;
@@ -142,22 +169,74 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   }
 
   private closeDialog() {
+    this.discardPendingFile();
     this._dialog.hide();
     this._dialogOpen = false;
   }
 
   private handleConfirm() {
-    this.icon = this._pendingIcon;
-    this.library = this._pendingLibrary;
-    this.color = this._pendingColor;
+    if (this._mode === 'upload') {
+      if (this._pendingFile) {
+        if (this._fileUrl) {
+          URL.revokeObjectURL(this._fileUrl);
+        }
+        this._file = this._pendingFile;
+        this._fileUrl = this._pendingFileUrl;
+        this._pendingFile = null;
+        this._pendingFileUrl = null;
+        this.icon = '';
+      }
+    } else {
+      this.icon = this._pendingIcon;
+      this.library = this._pendingLibrary;
+      this.color = this._pendingColor;
+      this.clearFile();
+    }
     this.closeDialog();
     this.emit('zn-change');
+    if (this.triggerSubmit) {
+      this.formControlController.submit();
+    }
   }
 
   private handleCancel() {
     this.closeDialog();
   }
 
+  private handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0] ?? null;
+    if (!file) return;
+    this.discardPendingFile();
+    this._pendingFile = file;
+    this._pendingFileUrl = URL.createObjectURL(file);
+    input.value = '';
+  }
+
+  private discardPendingFile() {
+    if (this._pendingFileUrl) {
+      URL.revokeObjectURL(this._pendingFileUrl);
+    }
+    this._pendingFile = null;
+    this._pendingFileUrl = null;
+  }
+
+  private clearFile() {
+    if (this._fileUrl) {
+      URL.revokeObjectURL(this._fileUrl);
+    }
+    this._file = null;
+    this._fileUrl = null;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.discardPendingFile();
+    if (this._fileUrl) {
+      URL.revokeObjectURL(this._fileUrl);
+    }
+  }
+
   private handleSearchInput(e: Event) {
     const input = e.target as HTMLInputElement;
     this._searchQuery = input.value.toLowerCase();
@@ -209,7 +288,11 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     e.stopPropagation();
     this.icon = '';
     this.color = '';
+    this.clearFile();
     this.emit('zn-change');
+    if (this.triggerSubmit) {
+      this.formControlController.submit();
+    }
   }
 
   private _handleTriggerClick() {
@@ -220,7 +303,12 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   render() {
     const hasLabel = !!this.label;
     const hasHelpText = !!this.helpText;
-    const hasIcon = !!this.icon;
+    const hasValue = !!this.icon || !!this._file;
+    // Image values (uploaded file or URL) omit the library so zn-icon's URL
+    // auto-detection renders an <img> instead of a font ligature.
+    const triggerIcon = this._fileUrl ?? this.icon;
+    const triggerLibrary = hasValue && !this.isImageValue ? this.library : nothing;
+    const pendingPreviewUrl = this._pendingFileUrl ?? (this.isImageValue && !this._file ? this.icon : this._fileUrl);
 
     return html`
       <div part="form-control"
@@ -236,15 +324,15 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
             part="trigger"
             class="icon-picker__trigger"
             panel-bg
-            icon=${hasIcon ? this.icon : nothing}
-            icon-library=${hasIcon ? this.library : nothing}
-            icon-color=${(hasIcon && this.color) || nothing}
+            icon=${hasValue ? triggerIcon : nothing}
+            icon-library=${triggerLibrary}
+            icon-color=${(hasValue && !this.isImageValue && this.color) || nothing}
             icon-size="24"
             ?disabled=${this.disabled}
             @click=${this._handleTriggerClick}>
-            ${hasIcon ? 'Click to edit' : 'Set an icon'}
+            ${hasValue ? 'Click to edit' : 'Set an icon'}
           </zn-button>
-          ${hasIcon ? html`
+          ${hasValue ? html`
             <zn-button
               class="icon-picker__clear"
               color="transparent"
@@ -272,6 +360,38 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
           <zn-dialog size="custom" label="Select Icon" @zn-close=${this.handleCancel}>
             <div class="icon-picker__dialog-layout">
               <div class="icon-picker__dialog-main">
+                ${this.allowUpload ? html`
+                  <div class="icon-picker__mode-switch">
+                    <zn-button
+                      size="small"
+                      color=${this._mode === 'icon' ? 'secondary' : 'transparent'}
+                      icon="apps"
+                      @click=${() => this._mode = 'icon'}>
+                      Icon Library
+                    </zn-button>
+                    <zn-button
+                      size="small"
+                      color=${this._mode === 'upload' ? 'secondary' : 'transparent'}
+                      icon="upload"
+                      @click=${() => this._mode = 'upload'}>
+                      Upload Image
+                    </zn-button>
+                  </div>
+                ` : nothing}
+
+                ${this._mode === 'upload' ? html`
+                  <div class="icon-picker__upload">
+                    <input class="icon-picker__file-input" type="file" accept=${this.accept} hidden
+                           @change=${this.handleFileSelect}>
+                    <zn-icon src="image" size="48"></zn-icon>
+                    ${this._pendingFile ? html`
+                      <span class="icon-picker__upload-filename">${this._pendingFile.name}</span>
+                    ` : nothing}
+                    <zn-button icon="upload" color="secondary" @click=${() => this._fileInput.click()}>
+                      ${pendingPreviewUrl ? 'Choose a different file' : 'Choose a file'}
+                    </zn-button>
+                  </div>
+                ` : html`
                 <div class="icon-picker__dialog-controls">
                   ${!this.noLibrary ? html`
                     <zn-select
@@ -354,10 +474,21 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
                     `)}
                   </div>
                 `}
+                `}
               </div>
 
               <div class="icon-picker__dialog-sidebar">
-                ${this._pendingIcon ? html`
+                ${this._mode === 'upload' ? html`
+                  <div class="icon-picker__preview ${pendingPreviewUrl ? '' : 'icon-picker__preview--empty'}">
+                    ${pendingPreviewUrl ? html`
+                      <img class="icon-picker__upload-preview" src=${pendingPreviewUrl} alt="">
+                      <span class="icon-picker__preview-name">${this._pendingFile?.name ?? ''}</span>
+                    ` : html`
+                      <zn-icon src="image" size="48"></zn-icon>
+                      <span class="icon-picker__preview-hint">Choose an image</span>
+                    `}
+                  </div>
+                ` : this._pendingIcon ? html`
                   <div class="icon-picker__preview">
                     <zn-icon
                       src=${this._pendingIcon}
@@ -379,7 +510,10 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
 
             <div slot="footer">
               <zn-button color="default" @click=${this.handleCancel}>Cancel</zn-button>
-              <zn-button color="primary" @click=${this.handleConfirm} ?disabled=${!this._pendingIcon}>Confirm</zn-button>
+              <zn-button color="primary" @click=${this.handleConfirm}
+                         ?disabled=${this._mode === 'upload' ? !this._pendingFile && !this.isImageValue : !this._pendingIcon}>
+                Confirm
+              </zn-button>
             </div>
           </zn-dialog>
         ` : nothing}

package/src/components/icon-picker/icon-picker.scss

@@ -60,6 +60,38 @@ zn-dialog {
   }
 }
 
+.icon-picker__mode-switch {
+  display: flex;
+  gap: var(--zn-spacing-x-small);
+  margin-bottom: var(--zn-spacing-small);
+}
+
+.icon-picker__upload {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zn-spacing-small);
+  border: dashed 1px rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  padding: var(--zn-spacing-large);
+  color: rgb(var(--zn-text-muted));
+}
+
+.icon-picker__upload-preview {
+  max-width: 100%;
+  max-height: 160px;
+  object-fit: contain;
+  border-radius: var(--zn-border-radius);
+}
+
+.icon-picker__upload-filename {
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text-muted));
+  word-break: break-all;
+}
+
 .icon-picker__dialog-controls {
   display: flex;
   gap: var(--zn-spacing-small);

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;
-}