@dile/ui 2.27.4 → 3.0.0

package/components/button/src/DileButtonIcon.js

@@ -19,6 +19,7 @@ export class DileButtonIcon extends DileButton {
           --dile-icon-color: var(--dile-button-icon-color, var(--dile-on-primary-color, #ffffff));
         }
         dile-icon {
+          --dile-icon-size: var(--dile-button-icon-size, calc(var(--dile-button-font-size, 1rem) * 1.125));
           margin-right: var(--dile-button-icon-separation, 0.3rem);
         }
         button:hover {

package/components/color-picker/color-picker.js

@@ -0,0 +1,3 @@
+import { DileColorPicker } from './src/DileColorPicker.js';
+
+window.customElements.define('dile-color-picker', DileColorPicker);

package/components/color-picker/color-picker.spec.js

@@ -0,0 +1,117 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './color-picker.js';
+
+describe('dile-color-picker', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderColorPicker(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-color-picker');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a trigger swatch matching the initial value', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#3366ff"></dile-color-picker>');
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    expect(trigger).toBeTruthy();
+    expect(trigger.style.backgroundColor).toBe('rgb(51, 102, 255)');
+  });
+
+  it('normalizes 3-digit hex shorthand set externally', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#0f0"></dile-color-picker>');
+
+    expect(el.value).toBe('#00ff00');
+  });
+
+  it('updates value and hue/saturation state when the hex input changes', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#000000"></dile-color-picker>');
+
+    const hexInput = el.shadowRoot.querySelector('.hex-input');
+    hexInput.value = '#ff0000';
+    hexInput.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.value).toBe('#ff0000');
+    expect(el._hue).toBe(0);
+    expect(el._saturation).toBe(100);
+    expect(el._value).toBe(100);
+  });
+
+  it('dispatches element-changed with name and value when the value changes', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#000000"></dile-color-picker>');
+    let detail = null;
+    el.addEventListener('element-changed', (e) => { detail = e.detail; });
+
+    const hexInput = el.shadowRoot.querySelector('.hex-input');
+    hexInput.value = '#00ff00';
+    hexInput.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(detail).toEqual({ name: 'color', value: '#00ff00' });
+  });
+
+  it('updates value when the hue slider changes', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000"></dile-color-picker>');
+
+    const hueSlider = el.shadowRoot.querySelector('.hue-slider');
+    hueSlider.value = '120';
+    hueSlider.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.value).toBe('#00ff00');
+  });
+
+  it('nudges saturation and brightness with arrow keys on the sv square', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000"></dile-color-picker>');
+
+    const svSquare = el.shadowRoot.getElementById('sv-square');
+    svSquare.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    await el.updateComplete;
+
+    expect(el._saturation).toBe(99);
+  });
+
+  it('does not change value when disabled', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000" disabled></dile-color-picker>');
+
+    const trigger = el.shadowRoot.getElementById('trigger');
+    expect(trigger.disabled).toBe(true);
+
+    const svSquare = el.shadowRoot.getElementById('sv-square');
+    svSquare.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.value).toBe('#ff0000');
+  });
+
+  it('reverts the hue slider and ignores hex edits when readonly', async () => {
+    const el = await renderColorPicker('<dile-color-picker name="color" value="#ff0000" readonly></dile-color-picker>');
+
+    const hueSlider = el.shadowRoot.querySelector('.hue-slider');
+    hueSlider.value = '200';
+    hueSlider.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.value).toBe('#ff0000');
+    expect(hueSlider.value).toBe('0');
+  });
+
+  it('participates in native form submission via FormData', async () => {
+    document.body.innerHTML = `
+      <form id="testForm">
+        <dile-color-picker name="color" value="#123456"></dile-color-picker>
+      </form>
+    `;
+    const el = document.body.querySelector('dile-color-picker');
+    await el.updateComplete;
+
+    const form = document.getElementById('testForm');
+    const data = new FormData(form);
+
+    expect(data.get('color')).toBe('#123456');
+  });
+});

package/components/color-picker/index.js

@@ -0,0 +1 @@
+export { DileColorPicker } from './src/DileColorPicker.js';

package/components/color-picker/src/DileColorPicker.js

@@ -0,0 +1,496 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { DileOverlay } from '../../../mixins/overlay/index.js';
+import { DileCloseDocumentClick } from '../../../mixins/close-document-click/index.js';
+import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
+import { normalizeHex, hexToHsv, hsvToHex } from '../../../lib/color/colorConversion.js';
+
+export class DileColorPicker extends DileOverlay(
+  DileCloseDocumentClick(
+    DileCloseOnEscPressed(
+      DileEmmitChange(LitElement)
+    )
+  )
+) {
+
+  /**
+   * Listen to the generic `element-changed` event to receive value updates
+   *
+   * @event element-changed
+   */
+
+  static get properties() {
+    return {
+      /** Label to the element */
+      label: { type: String },
+
+      /** Name for this input field */
+      name: { type: String },
+
+      /** Set initial value to the input. Must be a 6-digit hex color, e.g. "#3366ff" */
+      value: { type: String },
+
+      /** Disable the input field */
+      disabled: { type: Boolean },
+
+      /** ReadOnly attribute */
+      readonly: { type: Boolean },
+
+      /** Has error on this input field */
+      errored: { type: Boolean },
+
+      /** Message Displayed */
+      message: { type: String },
+
+      /** Hide errors on input */
+      hideErrorOnInput: { type: Boolean },
+
+      /** Set the application focus to this the input component after the initialization */
+      focusOnStart: { type: Boolean },
+
+      _hue: { state: true },
+      _saturation: { state: true },
+      _value: { state: true },
+      _hexInputValue: { state: true },
+    };
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.name = '';
+    this.value = '#000000';
+    this.disabled = false;
+    this.readonly = false;
+    this.errored = false;
+    this.message = '';
+    this.hideErrorOnInput = false;
+    this.focusOnStart = false;
+
+    const { h, s, v } = hexToHsv(this.value);
+    this._hue = h;
+    this._saturation = s;
+    this._value = v;
+    this._hexInputValue = this.value;
+    this._skipValueSync = false;
+
+    this.internals = this.attachInternals();
+  }
+
+  get opened() {
+    return this._overlayClass === 'opened';
+  }
+
+  get svSquareEl() {
+    return this.shadowRoot.getElementById('sv-square');
+  }
+
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (this.focusOnStart) {
+      this.focus();
+    }
+  }
+
+  willUpdate(changedProperties) {
+    const skip = this._skipValueSync;
+    this._skipValueSync = false;
+    if (changedProperties.has('value') && !skip) {
+      const normalized = normalizeHex(this.value);
+      if (normalized) {
+        const { h, s, v } = hexToHsv(normalized);
+        this._hue = h;
+        this._saturation = s;
+        this._value = v;
+        if (normalized !== this.value) {
+          this.value = normalized;
+        }
+      } else {
+        console.warn(`dile-color-picker: invalid value "${this.value}", ignoring`);
+      }
+      this._hexInputValue = this.value;
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('value')) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+    }
+    if (changedProperties.has('_overlayClass')) {
+      if (this._overlayClass === 'opened') {
+        this.svSquareEl?.focus();
+      } else if (changedProperties.get('_overlayClass') === 'opened') {
+        this.trigger?.focus();
+      }
+    }
+  }
+
+  static get styles() {
+    return [
+      labelStyles,
+      messageStyles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: inline-block;
+          margin-bottom: 10px;
+        }
+        #trigger {
+          padding: 0;
+          width: var(--dile-color-picker-swatch-size, 2em);
+          height: var(--dile-color-picker-swatch-size, 2em);
+          border-radius: var(--dile-color-picker-swatch-border-radius, 5px);
+          border: var(--dile-color-picker-swatch-border-width, 1px) solid var(--dile-color-picker-swatch-border-color, #888);
+          cursor: pointer;
+        }
+        #trigger:disabled {
+          cursor: default;
+          opacity: 0.6;
+        }
+        #trigger.errored {
+          border-color: var(--dile-color-picker-error-border-color, #c00);
+        }
+        #trigger:focus-visible {
+          outline: none;
+          border-width: var(--dile-color-picker-swatch-focus-border-width, 3px);
+          border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
+        }
+        #overlay {
+          display: none;
+          position: absolute;
+          opacity: 0;
+          z-index: var(--dile-color-picker-panel-z-index, 999);
+          width: var(--dile-color-picker-panel-width, 220px);
+          background-color: var(--dile-color-picker-panel-background-color, #fff);
+          border-radius: var(--dile-color-picker-panel-border-radius, 5px);
+          box-shadow: var(--dile-color-picker-panel-box-shadow, 0 0 20px rgba(102, 102, 102, 0.5));
+          padding: var(--dile-color-picker-panel-padding, 1rem);
+          transition: var(--dile-color-picker-panel-transition, ease 0.2s);
+          transition-property: transform, opacity;
+          transform: translateY(-10px);
+        }
+        #overlay.opened {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        #sv-square {
+          position: relative;
+          width: 100%;
+          height: var(--dile-color-picker-sv-square-size, 160px);
+          border-radius: var(--dile-color-picker-sv-square-border-radius, 4px);
+          background-image: linear-gradient(to top, #000, transparent),
+                             linear-gradient(to right, #fff, transparent);
+          touch-action: none;
+          cursor: crosshair;
+        }
+        #sv-square:focus-visible {
+          outline: 2px solid var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
+          outline-offset: 2px;
+        }
+        .sv-thumb {
+          position: absolute;
+          width: var(--dile-color-picker-sv-thumb-size, 14px);
+          height: var(--dile-color-picker-sv-thumb-size, 14px);
+          border-radius: 50%;
+          border: var(--dile-color-picker-sv-thumb-border-width, 2px) solid var(--dile-color-picker-sv-thumb-border-color, #fff);
+          box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+        }
+        .hue-slider {
+          display: block;
+          width: 100%;
+          margin-top: 0.75rem;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          appearance: none;
+          background: transparent;
+          cursor: pointer;
+        }
+        .hue-slider:focus {
+          outline: none;
+        }
+        .hue-slider::-webkit-slider-runnable-track {
+          height: var(--dile-color-picker-hue-track-height, 12px);
+          border-radius: var(--dile-color-picker-hue-track-border-radius, 6px);
+          background: linear-gradient(
+            to right,
+            hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%),
+            hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%)
+          );
+        }
+        .hue-slider::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          margin-top: calc((var(--dile-color-picker-hue-track-height, 12px) - var(--dile-color-picker-hue-thumb-size, 18px)) / 2);
+          width: var(--dile-color-picker-hue-thumb-size, 18px);
+          height: var(--dile-color-picker-hue-thumb-size, 18px);
+          border-radius: 50%;
+          background-color: #fff;
+          border: var(--dile-color-picker-hue-thumb-border-width, 2px) solid var(--dile-color-picker-hue-thumb-border-color, #888);
+          box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+        }
+        .hue-slider::-moz-range-track {
+          height: var(--dile-color-picker-hue-track-height, 12px);
+          border-radius: var(--dile-color-picker-hue-track-border-radius, 6px);
+          background: linear-gradient(
+            to right,
+            hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%),
+            hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%)
+          );
+        }
+        .hue-slider::-moz-range-thumb {
+          width: var(--dile-color-picker-hue-thumb-size, 18px);
+          height: var(--dile-color-picker-hue-thumb-size, 18px);
+          border-radius: 50%;
+          background-color: #fff;
+          border: var(--dile-color-picker-hue-thumb-border-width, 2px) solid var(--dile-color-picker-hue-thumb-border-color, #888);
+          box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+        }
+        .hex-row {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          margin-top: 0.75rem;
+        }
+        .hex-swatch {
+          display: block;
+          flex-shrink: 0;
+          width: var(--dile-color-picker-swatch-size, 2em);
+          height: var(--dile-color-picker-swatch-size, 2em);
+          border-radius: var(--dile-color-picker-swatch-border-radius, 5px);
+          border: var(--dile-color-picker-swatch-border-width, 1px) solid var(--dile-color-picker-swatch-border-color, #888);
+        }
+        .hex-input {
+          box-sizing: border-box;
+          flex-grow: 1;
+          min-width: 0;
+          border-radius: var(--dile-color-picker-hex-input-border-radius, 4px);
+          border: 1px solid var(--dile-color-picker-hex-input-border-color, #888);
+          padding: 5px;
+          font-size: var(--dile-color-picker-hex-input-font-size, 0.875rem);
+          background-color: var(--dile-color-picker-hex-input-background-color, #fff);
+          color: var(--dile-color-picker-hex-input-color, #303030);
+        }
+        .hex-input:focus {
+          outline: none;
+          border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
+        }
+        .hex-input.errored {
+          border-color: var(--dile-color-picker-error-border-color, #c00);
+        }
+        #trigger-overlay {
+            display: flex;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <main>
+        ${this.label ? html`<label id="cp-label">${this.label}</label>` : ''}
+        <div id="trigger-overlay">
+            <button
+            type="button"
+            id="trigger"
+            class="${this.errored ? 'errored' : ''}"
+            style="background-color: ${this.value}"
+            ?disabled="${this.disabled}"
+            aria-haspopup="dialog"
+            aria-expanded="${this.opened}"
+            aria-label="${this.label || 'Color picker'}"
+            @click="${this.toggle}"
+            ></button>
+        </div>
+        ${this.messageTemplate}
+        ${this.overlayTemplate}
+      </main>
+    `;
+  }
+
+  get overlayTemplate() {
+    return html`
+      <div
+        id="overlay"
+        class="${this._overlayClass}"
+        role="dialog"
+        aria-label="${this.label || 'Color picker'}"
+        @click="${this._onOverlayClick}"
+      >
+        <div
+          id="sv-square"
+          role="slider"
+          tabindex="${this.disabled ? -1 : 0}"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-valuenow="${this._value}"
+          aria-valuetext="Saturation ${this._saturation}%, brightness ${this._value}%"
+          aria-readonly="${this.readonly}"
+          style="background-color: hsl(${this._hue}, 100%, 50%)"
+          @pointerdown="${this._onSvPointerDown}"
+          @pointermove="${this._onSvPointerMove}"
+          @pointerup="${this._onSvPointerUp}"
+          @pointercancel="${this._onSvPointerUp}"
+          @keydown="${this._onSvKeydown}"
+        >
+          <div class="sv-thumb" style="left: ${this._saturation}%; top: ${100 - this._value}%"></div>
+        </div>
+        <input
+          type="range"
+          class="hue-slider"
+          min="0"
+          max="360"
+          step="1"
+          aria-label="Hue"
+          .value="${String(this._hue)}"
+          ?disabled="${this.disabled}"
+          @input="${this._onHueInput}"
+        />
+        <div class="hex-row">
+          <span class="hex-swatch" style="background-color: ${this.value}"></span>
+          <input
+            type="text"
+            class="hex-input ${this.errored ? 'errored' : ''}"
+            aria-label="Hex color"
+            maxlength="7"
+            spellcheck="false"
+            autocomplete="off"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            .value="${this._hexInputValue}"
+            @input="${this._onHexInput}"
+            @blur="${this._onHexBlur}"
+            @keydown="${this._onHexKeydown}"
+          />
+        </div>
+      </div>
+    `;
+  }
+
+  get messageTemplate() {
+    return html`
+      ${this.message
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `;
+  }
+
+  _onOverlayClick(e) {
+    e.stopPropagation();
+  }
+
+  _commitHsv() {
+    const hex = hsvToHex(this._hue, this._saturation, this._value);
+    this._hexInputValue = hex;
+    if (this.value !== hex) {
+      this._skipValueSync = true;
+      this.value = hex;
+    }
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+  }
+
+  _onSvPointerDown(e) {
+    if (this.disabled || this.readonly) return;
+    e.preventDefault();
+    this._svDragging = true;
+    e.target.setPointerCapture(e.pointerId);
+    this._updateSvFromPointer(e);
+  }
+
+  _onSvPointerMove(e) {
+    if (!this._svDragging) return;
+    this._updateSvFromPointer(e);
+  }
+
+  _onSvPointerUp() {
+    this._svDragging = false;
+  }
+
+  _updateSvFromPointer(e) {
+    const rect = this.svSquareEl.getBoundingClientRect();
+    const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+    const y = Math.min(Math.max(e.clientY - rect.top, 0), rect.height);
+    this._saturation = rect.width === 0 ? 0 : Math.round((x / rect.width) * 100);
+    this._value = rect.height === 0 ? 100 : Math.round(100 - (y / rect.height) * 100);
+    this._commitHsv();
+  }
+
+  _onSvKeydown(e) {
+    if (this.disabled || this.readonly) return;
+    const step = e.shiftKey ? 10 : 1;
+    const clamp = (n) => Math.max(0, Math.min(100, n));
+    let handled = true;
+    switch (e.key) {
+      case 'ArrowRight': this._saturation = clamp(this._saturation + step); break;
+      case 'ArrowLeft': this._saturation = clamp(this._saturation - step); break;
+      case 'ArrowUp': this._value = clamp(this._value + step); break;
+      case 'ArrowDown': this._value = clamp(this._value - step); break;
+      case 'Home': this._saturation = 0; break;
+      case 'End': this._saturation = 100; break;
+      case 'PageUp': this._value = clamp(this._value + 10); break;
+      case 'PageDown': this._value = clamp(this._value - 10); break;
+      default: handled = false;
+    }
+    if (handled) {
+      e.preventDefault();
+      this._commitHsv();
+    }
+  }
+
+  _onHueInput(e) {
+    if (this.disabled || this.readonly) {
+      e.target.value = this._hue;
+      return;
+    }
+    this._hue = Number(e.target.value);
+    this._commitHsv();
+  }
+
+  _onHexInput(e) {
+    this._hexInputValue = e.target.value;
+    if (this.disabled || this.readonly) return;
+    const normalized = normalizeHex(this._hexInputValue);
+    if (!normalized) return;
+    const { h, s, v } = hexToHsv(normalized);
+    this._hue = h;
+    this._saturation = s;
+    this._value = v;
+    this._skipValueSync = true;
+    this.value = normalized;
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+  }
+
+  _onHexBlur() {
+    this._hexInputValue = this.value;
+  }
+
+  _onHexKeydown(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this._onHexBlur();
+    }
+  }
+
+  clearError() {
+    this.errored = false;
+    this.message = '';
+  }
+
+  focus() {
+    this.trigger.focus();
+  }
+}

package/components/drop-file/src/DileDropFile.js

@@ -1,11 +1,13 @@
 import { LitElement, html, css } from 'lit';
 import '../file-preview.js';
 import '../../button/button.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 
 export class DileDropFile extends DileEmmitChange(LitElement) {
   static styles = [
+    labelStyles,
     messageStyles,
     css`
       * { box-sizing: border-box; }
@@ -41,13 +43,6 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         display: none;
       }
 
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       main {
         width: var(--dile-input-section-width, 100%);
       }

package/components/input/index.js

@@ -5,5 +5,6 @@ export { DileInputMoney } from './src/DileInputMoney.js';
 export { DileInputNumberMask } from './src/DileInputNumberMask.js';
 export { DileInputPercentage } from './src/DileInputPercentage.js';
 export { DileInputSearch } from './src/DileInputSearch.js';
+export { labelStyles } from './src/label-styles.js';
 export { messageStyles } from './src/message-styles.js';
 export { Mask } from './src/Mask.js';

package/components/input/src/DileInput.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { labelStyles } from './label-styles.js';
 import { messageStyles } from './message-styles.js';
 
 export class DileInput extends DileEmmitChange(LitElement) {
@@ -76,7 +77,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
         this.disableAutocomplete = false;
         this.name = '';
         this.type = 'text';
-        this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];     
+        this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];
         this.internals = this.attachInternals();
     }
 
@@ -95,6 +96,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
 
     static get styles() {
         return [
+          labelStyles,
           messageStyles,
           css`
             * {
@@ -110,13 +112,6 @@ export class DileInput extends DileEmmitChange(LitElement) {
             main {
               width: var(--dile-input-section-width, 100%);
             }
-            label {
-              display: block;
-              margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-              font-size: var(--dile-input-label-font-size, 1em);
-              color: var(--dile-input-label-color, #59e);
-              font-weight: var(--dile-input-label-font-weight, normal);
-            }
             input {
               box-sizing: border-box;
               border-radius: var(--dile-input-border-radius, 5px);
@@ -131,8 +126,9 @@ export class DileInput extends DileEmmitChange(LitElement) {
               flex-grow: 1;
             }
             input:focus {
-              outline: none;
-              border-color: var(--dile-input-focus-border-color, #6af)
+              outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+              outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+              border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
             }
             input::placeholder {
               color: var(--dile-input-placeholder-color, #ccc);
@@ -152,13 +148,13 @@ export class DileInput extends DileEmmitChange(LitElement) {
             }
             .labelright {
               margin-left: var(--dile-input-label-right-margin-left, 10px);
-              color: var(--dile-input-label-color, #59e);
+              color: var(--dile-input-label-color, var(--dile-on-background-color, #59e));
               font-size: var(--dile-input-label-right-font-size, 1.2em);
             }
           `
         ];
     }
-    
+
     render() {
         return html`
           <main>
@@ -180,8 +176,8 @@ export class DileInput extends DileEmmitChange(LitElement) {
                 @input="${this._input}"
                 @blur="${this.doBlur}"
                 @focus="${this.doFocus}"
-              /> 
-              ${this.labelRight 
+              />
+              ${this.labelRight
                 ? html`<span class="labelright">${this.labelRight}</span>`
                 : ''
               }
@@ -193,7 +189,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
 
     get messageTemplate() {
       return html`
-        ${this.message 
+        ${this.message
           ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
           : ''
         }
@@ -212,10 +208,10 @@ export class DileInput extends DileEmmitChange(LitElement) {
     _input(e) {
         this.value = e.target.value;
         if (this.hideErrorOnInput && this.errored) {
-          this.clearError();  
+          this.clearError();
         }
     }
-    
+
     clearError() {
       this.errored = false;
       this.message = '';
@@ -249,4 +245,4 @@ export class DileInput extends DileEmmitChange(LitElement) {
     focus() {
       this.el.focus();
     }
-}
+}

package/components/input/src/DileInputSearch.js

@@ -18,7 +18,7 @@ export class DileInputSearch extends LitElement {
                 background-color: var(--dile-input-background-color, #fff);
             }
             div:focus-within {
-                border-color: var(--dile-input-focus-border-color, #6af);
+                border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
             }
             input {
                 flex-grow: 1;

package/components/input/src/label-styles.js

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+
+export const labelStyles = css`
+  label, .label {
+    display: block;
+    margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+    font-size: var(--dile-input-label-font-size, 1em);
+    color: var(--dile-input-label-color, var(--dile-on-background-color, #59e));
+    font-weight: var(--dile-input-label-font-weight, normal);
+  }
+`;

package/components/number-picker/src/DileNumberPicker.js

@@ -1,10 +1,12 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../number-picker-element.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 export class DileNumberPicker extends DileEmmitChange(LitElement) {
   static styles = [
+      labelStyles,
       messageStyles,
       css`
       :host {
@@ -14,13 +16,6 @@ export class DileNumberPicker extends DileEmmitChange(LitElement) {
       * {
         box-sizing: border-box;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
   `
   ];
 

package/components/otp-input/src/DileOtpInput.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 import { sanitizeOtpValue } from '../../../lib/otp/sanitizeOtpValue.js';
 
 export class DileOtpInput extends DileEmmitChange(LitElement) {
@@ -106,6 +106,7 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
         * {
@@ -118,13 +119,6 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
         main {
           width: var(--dile-otp-input-section-width, auto);
         }
-        label {
-          display: block;
-          margin-bottom: var(--dile-otp-input-label-margin-bottom, 4px);
-          font-size: var(--dile-otp-input-label-font-size, 1em);
-          color: var(--dile-otp-input-label-color, #59e);
-          font-weight: var(--dile-otp-input-label-font-weight, normal);
-        }
         section.for-input {
           display: flex;
           gap: var(--dile-otp-input-gap, 8px);
@@ -143,7 +137,7 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
         }
         input:focus {
           outline: none;
-          border-color: var(--dile-otp-input-focus-border-color, #6af);
+          border-color: var(--dile-otp-input-focus-border-color, var(--dile-link-color, #6af));
         }
         input:disabled {
           background-color: #f5f5f5;

package/components/radio-group/src/DileRadioGroup.js

@@ -2,21 +2,16 @@ import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../radio.js';
 import '../../input/input-message.js';
+import { labelStyles } from '../../input/index.js';
 
 export class DileRadioGroup extends DileEmmitChange(LitElement) {
   static styles = [
+    labelStyles,
     css`
       :host {
         display: block;
         margin-bottom: 10px;
       }
-      .label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       :host([disabled]) {
         --dile-radio-icon-color: var(--dile-radio-disabled-icon-color, #ccc);
       }

package/components/range/src/DileRange.js

@@ -1,11 +1,14 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../../input/input-message.js';
+import { labelStyles } from '../../input/index.js';
 
 export class DileRange extends DileEmmitChange(LitElement) {
 
   static get styles() {
-    return css`
+    return [
+      labelStyles,
+      css`
       :host {
         display: block;
         margin-bottom: 10px;
@@ -15,14 +18,6 @@ export class DileRange extends DileEmmitChange(LitElement) {
         --dile-range-line-color: var(--dile-range-line-errored-color, #c00);
       }
 
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
-
       /*********** Baseline, reset styles ***********/
       input[type="range"] {
         -webkit-appearance: none;
@@ -87,7 +82,8 @@ export class DileRange extends DileEmmitChange(LitElement) {
       }
 
 
-    `;
+    `
+    ];
   }
 
   static get formAssociated() {

package/components/select/src/DileSelect.js

@@ -1,10 +1,11 @@
 import { html, css, LitElement } from "lit";
 import { DileEmmitChange } from '../../../mixins/form/index.js';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 
 export class DileSelect extends DileEmmitChange(LitElement) {
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
       :host {
@@ -14,13 +15,6 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       * {
         box-sizing: border-box;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       ::slotted(select) {
         box-sizing: border-box;
         width: var(--dile-input-width, 100%);
@@ -42,9 +36,10 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       ::slotted(select.dark) {
         background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
       }
-      ::slotted(select):focus {
-        outline: none;
-        border-color: var(--dile-input-focus-border-color, #6af);
+      :host(:focus-within) ::slotted(select) {
+        outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+        outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+        border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
       }
       ::slotted(select.errored) {
         border-color: var(--dile-input-error-border-color, #c00);

package/components/select/src/DileSelectAjax.js

@@ -3,6 +3,7 @@ import '../../input/input-search.js';
 import '../../spinner/spinner-horizontal.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../select.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 
@@ -10,6 +11,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
       * {
@@ -23,13 +25,6 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       #result {
           margin-bottom: 0.5rem;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       .anchor {
         margin-top: 0.5rem;
         position: relative;

package/components/textarea/src/DileTextarea.js

@@ -1,23 +1,18 @@
 import { LitElement, html, css } from 'lit';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 
 export class DileTextarea extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
-      messageStyles, 
+      labelStyles,
+      messageStyles,
       css`
       :host {
         display: block;
         margin-bottom: 10px;
       }
-      label {
-        margin-bottom: var(--dile-textarea-label-margin-bottom, 4px);
-        color: var(--dile-textarea-label-color, #59e);
-        font-size: var(--dile-textarea-label-font-size, 1em);
-        font-weight: var(--dile-textarea-label-font-weight, normal);
-      }
 
       textarea {
         border: var(--dile-textarea-border, 1px solid #888);
@@ -32,6 +27,12 @@ export class DileTextarea extends DileEmmitChange(LitElement) {
         line-height: 1.5rem;
       }
 
+      textarea:focus {
+        outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+        outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+        border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
+      }
+
       textarea::placeholder {
         color: var(--dile-textarea-placeholder-color, #999);
       }

package/components/time-picker/src/DileTimePicker.js

@@ -1,23 +1,18 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../../number-picker/number-picker-element.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 export class DileTimePicker extends DileEmmitChange(LitElement) {
   static styles = [
+    labelStyles,
     messageStyles,
     css`
       :host {
         display: block;
         margin-bottom: 10px;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       section {
         display: flex;
         gap: 0.5rem;

package/lib/color/colorConversion.js

@@ -0,0 +1,87 @@
+export function normalizeHex(input) {
+  if (typeof input !== 'string') return null;
+  const match = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(input.trim());
+  if (!match) return null;
+  let digits = match[1];
+  if (digits.length === 3) {
+    digits = digits.split('').map((c) => c + c).join('');
+  }
+  return `#${digits.toLowerCase()}`;
+}
+
+export function hexToRgb(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const int = parseInt(normalized.slice(1), 16);
+  return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 };
+}
+
+export function rgbToHex({ r, g, b }) {
+  const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+  const toHex = (n) => clamp(n).toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+export function rgbToHsv({ r, g, b }) {
+  const rN = r / 255;
+  const gN = g / 255;
+  const bN = b / 255;
+  const max = Math.max(rN, gN, bN);
+  const min = Math.min(rN, gN, bN);
+  const delta = max - min;
+
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rN) {
+      h = 60 * (((gN - bN) / delta) % 6);
+    } else if (max === gN) {
+      h = 60 * ((bN - rN) / delta + 2);
+    } else {
+      h = 60 * ((rN - gN) / delta + 4);
+    }
+  }
+  if (h < 0) h += 360;
+
+  const s = max === 0 ? 0 : delta / max;
+  return { h: Math.round(h), s: Math.round(s * 100), v: Math.round(max * 100) };
+}
+
+export function hsvToRgb({ h, s, v }) {
+  const hN = ((h % 360) + 360) % 360;
+  const sN = Math.max(0, Math.min(100, s)) / 100;
+  const vN = Math.max(0, Math.min(100, v)) / 100;
+
+  const c = vN * sN;
+  const x = c * (1 - Math.abs(((hN / 60) % 2) - 1));
+  const m = vN - c;
+
+  let r1, g1, b1;
+  if (hN < 60) {
+    [r1, g1, b1] = [c, x, 0];
+  } else if (hN < 120) {
+    [r1, g1, b1] = [x, c, 0];
+  } else if (hN < 180) {
+    [r1, g1, b1] = [0, c, x];
+  } else if (hN < 240) {
+    [r1, g1, b1] = [0, x, c];
+  } else if (hN < 300) {
+    [r1, g1, b1] = [x, 0, c];
+  } else {
+    [r1, g1, b1] = [c, 0, x];
+  }
+
+  return {
+    r: Math.round((r1 + m) * 255),
+    g: Math.round((g1 + m) * 255),
+    b: Math.round((b1 + m) * 255),
+  };
+}
+
+export function hexToHsv(hex) {
+  const rgb = hexToRgb(hex);
+  return rgb ? rgbToHsv(rgb) : null;
+}
+
+export function hsvToHex(h, s, v) {
+  return rgbToHex(hsvToRgb({ h, s, v }));
+}

package/lib/color/colorConversion.test.js

@@ -0,0 +1,94 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  normalizeHex,
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  hexToHsv,
+  hsvToHex,
+} from './colorConversion.js';
+
+test('normalizeHex accepts 6-digit hex with or without the hash', () => {
+  assert.equal(normalizeHex('#ff0000'), '#ff0000');
+  assert.equal(normalizeHex('ff0000'), '#ff0000');
+});
+
+test('normalizeHex lowercases uppercase input', () => {
+  assert.equal(normalizeHex('#FF00AA'), '#ff00aa');
+});
+
+test('normalizeHex expands 3-digit shorthand', () => {
+  assert.equal(normalizeHex('#abc'), '#aabbcc');
+  assert.equal(normalizeHex('abc'), '#aabbcc');
+});
+
+test('normalizeHex rejects invalid input', () => {
+  assert.equal(normalizeHex('red'), null);
+  assert.equal(normalizeHex('#ff'), null);
+  assert.equal(normalizeHex('#gggggg'), null);
+  assert.equal(normalizeHex(''), null);
+  assert.equal(normalizeHex(null), null);
+  assert.equal(normalizeHex(undefined), null);
+});
+
+test('hexToRgb / rgbToHex round trip on reference colors', () => {
+  assert.deepEqual(hexToRgb('#ff0000'), { r: 255, g: 0, b: 0 });
+  assert.deepEqual(hexToRgb('#00ff00'), { r: 0, g: 255, b: 0 });
+  assert.deepEqual(hexToRgb('#0000ff'), { r: 0, g: 0, b: 255 });
+  assert.equal(rgbToHex({ r: 255, g: 0, b: 0 }), '#ff0000');
+  assert.equal(rgbToHex({ r: 0, g: 255, b: 0 }), '#00ff00');
+  assert.equal(rgbToHex({ r: 0, g: 0, b: 255 }), '#0000ff');
+});
+
+test('rgbToHex clamps out-of-range channels', () => {
+  assert.equal(rgbToHex({ r: 300, g: -10, b: 128 }), '#ff0080');
+});
+
+test('hexToRgb returns null for invalid hex', () => {
+  assert.equal(hexToRgb('not-a-color'), null);
+});
+
+test('rgbToHsv matches known reference hues', () => {
+  assert.deepEqual(rgbToHsv({ r: 255, g: 0, b: 0 }), { h: 0, s: 100, v: 100 });
+  assert.deepEqual(rgbToHsv({ r: 0, g: 255, b: 0 }), { h: 120, s: 100, v: 100 });
+  assert.deepEqual(rgbToHsv({ r: 0, g: 0, b: 255 }), { h: 240, s: 100, v: 100 });
+});
+
+test('rgbToHsv reports saturation 0 for grays, including white and black', () => {
+  assert.deepEqual(rgbToHsv({ r: 255, g: 255, b: 255 }), { h: 0, s: 0, v: 100 });
+  assert.deepEqual(rgbToHsv({ r: 0, g: 0, b: 0 }), { h: 0, s: 0, v: 0 });
+  assert.deepEqual(rgbToHsv({ r: 128, g: 128, b: 128 }), { h: 0, s: 0, v: 50 });
+});
+
+test('hsvToRgb inverts rgbToHsv for reference colors', () => {
+  assert.deepEqual(hsvToRgb({ h: 0, s: 100, v: 100 }), { r: 255, g: 0, b: 0 });
+  assert.deepEqual(hsvToRgb({ h: 120, s: 100, v: 100 }), { r: 0, g: 255, b: 0 });
+  assert.deepEqual(hsvToRgb({ h: 240, s: 100, v: 100 }), { r: 0, g: 0, b: 255 });
+});
+
+test('hexToHsv / hsvToHex round trip for arbitrary colors stays within rounding tolerance', () => {
+  for (const hex of ['#7bb93d', '#cc0000', '#336699', '#ffffff', '#000000', '#808080']) {
+    const { h, s, v } = hexToHsv(hex);
+    const original = hexToRgb(hex);
+    const roundTripped = hexToRgb(hsvToHex(h, s, v));
+    for (const channel of ['r', 'g', 'b']) {
+      assert.ok(
+        Math.abs(original[channel] - roundTripped[channel]) <= 2,
+        `${hex} channel ${channel} drifted too far after HSV round trip: ${original[channel]} vs ${roundTripped[channel]}`
+      );
+    }
+  }
+});
+
+test('hexToHsv / hsvToHex round trip is exact for colors immune to integer HSV rounding', () => {
+  for (const hex of ['#ff0000', '#00ff00', '#0000ff', '#ffffff', '#000000', '#808080']) {
+    const { h, s, v } = hexToHsv(hex);
+    assert.equal(hsvToHex(h, s, v), hex);
+  }
+});
+
+test('hexToHsv returns null for invalid hex', () => {
+  assert.equal(hexToHsv('nope'), null);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.27.4",
+  "version": "3.0.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d58cfec4206fe5fca4fa634be70f11ab3c9a6899"
+  "gitHead": "8dd04c6978c60eb0a90891ba7a128f4153348c61"
 }