@dile/ui 2.27.3 → 2.28.0

package/components/app-drawer/app-drawer.spec.js

@@ -0,0 +1,262 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './app-drawer.js';
+import { DILE_APP_DRAWER_EVENT_CLOSED, DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE } from './index.js';
+
+describe('dile-app-drawer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  async function renderDrawer(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-app-drawer');
+    await el.updateComplete;
+    return el;
+  }
+
+  describe('Default state', () => {
+    it('defaults to direction "top" and closed', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      expect(el.direction).toBe('top');
+      expect(el.opened).toBe(false);
+    });
+
+    it('reflects the opened property to the opened attribute', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(el.hasAttribute('opened')).toBe(true);
+    });
+  });
+
+  describe('Public API', () => {
+    it('open() sets opened to true', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(el.opened).toBe(true);
+    });
+
+    it('close() sets opened to false and dispatches dile-app-drawer-closed', async () => {
+      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
+      let fired = false;
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSED, () => { fired = true; });
+
+      el.close();
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+      expect(fired).toBe(true);
+    });
+
+    it('toggle() flips the opened state', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      el.toggle();
+      await el.updateComplete;
+      expect(el.opened).toBe(true);
+
+      el.toggle();
+      await el.updateComplete;
+      expect(el.opened).toBe(false);
+    });
+  });
+
+  describe('Modal overlay', () => {
+    it('renders a modal overlay by default', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      expect(el.shadowRoot.querySelector('.modal')).toBeTruthy();
+    });
+
+    it('does not render a modal overlay when no-modal is set', async () => {
+      const el = await renderDrawer('<dile-app-drawer no-modal></dile-app-drawer>');
+
+      expect(el.shadowRoot.querySelector('.modal')).toBeNull();
+    });
+
+    it('clicking the overlay closes the drawer and dispatches closed + click-outside events', async () => {
+      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
+      let closedFired = false;
+      let outsideFired = false;
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSED, () => { closedFired = true; });
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, () => { outsideFired = true; });
+
+      el.shadowRoot.querySelector('.modal').click();
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+      expect(closedFired).toBe(true);
+      expect(outsideFired).toBe(true);
+    });
+
+    it('clicking the overlay while already closed does not dispatch events', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      let outsideFired = false;
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, () => { outsideFired = true; });
+
+      el.shadowRoot.querySelector('.modal').click();
+      await el.updateComplete;
+
+      expect(outsideFired).toBe(false);
+    });
+
+    it('stops click events on the menu content from bubbling past the drawer', async () => {
+      const el = await renderDrawer('<div id="wrapper"><dile-app-drawer opened></dile-app-drawer></div>');
+      const wrapper = document.querySelector('#wrapper');
+      let wrapperClicked = false;
+      wrapper.addEventListener('click', () => { wrapperClicked = true; });
+
+      el.shadowRoot.querySelector('.menu').click();
+
+      expect(wrapperClicked).toBe(false);
+      expect(el.opened).toBe(true);
+    });
+  });
+
+  describe('Dialog accessibility', () => {
+    it('renders the menu as a labeled, described dialog', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      const menu = el.shadowRoot.querySelector('.menu');
+
+      expect(menu.getAttribute('role')).toBe('dialog');
+      expect(menu.getAttribute('aria-label')).toBe('Application menu');
+      expect(menu.getAttribute('aria-description')).toContain('Escape');
+    });
+
+    it('sets aria-modal to reflect the opened state', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      const menu = el.shadowRoot.querySelector('.menu');
+
+      expect(menu.getAttribute('aria-modal')).toBe('false');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(menu.getAttribute('aria-modal')).toBe('true');
+    });
+
+    it('marks the menu (and overlay) inert while closed, interactive while opened', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      const menu = el.shadowRoot.querySelector('.menu');
+      const modal = el.shadowRoot.querySelector('.modal');
+
+      expect(menu.hasAttribute('inert')).toBe(true);
+      expect(modal.hasAttribute('inert')).toBe(true);
+
+      el.open();
+      await el.updateComplete;
+
+      expect(menu.hasAttribute('inert')).toBe(false);
+      expect(modal.hasAttribute('inert')).toBe(false);
+    });
+  });
+
+  describe('Keyboard - Escape', () => {
+    it('closes the drawer when Escape is pressed while opened', async () => {
+      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+    });
+
+    it('does nothing when Escape is pressed while already closed', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+    });
+  });
+
+  describe('Focus management', () => {
+    it('moves focus into the menu when opened', async () => {
+      const el = await renderDrawer('<dile-app-drawer><button>Item</button></dile-app-drawer>');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.querySelector('.menu'));
+    });
+
+    it('restores focus to the trigger element after closing', async () => {
+      document.body.innerHTML = '<button id="trigger">Open</button><dile-app-drawer></dile-app-drawer>';
+      const trigger = document.querySelector('#trigger');
+      const el = document.querySelector('dile-app-drawer');
+      await el.updateComplete;
+
+      trigger.focus();
+      el.open();
+      await el.updateComplete;
+      el.close();
+      await el.updateComplete;
+      await wait(10);
+
+      expect(document.activeElement).toBe(trigger);
+    });
+
+    it('traps Tab focus: wraps from the last focusable element to the first', async () => {
+      const el = await renderDrawer(`
+        <dile-app-drawer opened>
+          <button id="first">First</button>
+          <button id="last">Last</button>
+        </dile-app-drawer>
+      `);
+      await el.updateComplete;
+      const first = el.querySelector('#first');
+      const last = el.querySelector('#last');
+
+      last.focus();
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
+
+      expect(document.activeElement).toBe(first);
+    });
+
+    it('traps Shift+Tab focus: wraps from the first focusable element to the last', async () => {
+      const el = await renderDrawer(`
+        <dile-app-drawer opened>
+          <button id="first">First</button>
+          <button id="last">Last</button>
+        </dile-app-drawer>
+      `);
+      await el.updateComplete;
+      const first = el.querySelector('#first');
+      const last = el.querySelector('#last');
+
+      first.focus();
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true }));
+
+      expect(document.activeElement).toBe(last);
+    });
+
+    it('does not move focus when Tab is pressed with focus outside the drawer', async () => {
+      document.body.innerHTML = `
+        <input id="outside" />
+        <dile-app-drawer opened>
+          <button id="first">First</button>
+          <button id="last">Last</button>
+        </dile-app-drawer>
+      `;
+      const el = document.querySelector('dile-app-drawer');
+      await el.updateComplete;
+      const outside = document.querySelector('#outside');
+
+      outside.focus();
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
+
+      expect(document.activeElement).toBe(outside);
+    });
+  });
+});

package/components/app-drawer/src/DileAppDrawer.js

@@ -27,6 +27,9 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
     this.direction = 'top';
     this.opened = false;
     this._documentClose = this._documentClose.bind(this);
+    this._triggerElement = null;
+    this._handleKeyDown = this._handleKeyDown.bind(this);
+    this._focusTrapActive = false;
   }
 
   static get styles() {
@@ -106,22 +109,113 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
         transform: translateX(0);
         box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
       }
+
+      /* Respect prefers-reduced-motion */
+      @media (prefers-reduced-motion: reduce) {
+        .modal {
+          transition: none;
+        }
+
+        .menu {
+          transition: none;
+        }
+      }
     `;
   }
 
   render() {
     return html`
       ${this.modalTemplate}
-      <div class="menu" @click="${this._contentClick}">
-        <section>
+      <div 
+        class="menu" 
+        role="dialog"
+        aria-modal="${this.opened ? 'true' : 'false'}"
+        aria-label="Application menu"
+        aria-description="Press Escape to close. You can also click outside the menu."
+        ?inert="${!this.opened}"
+        tabindex="-1"
+        @click="${this._contentClick}"
+        @keydown="${this._handleKeyDown}">
+        <nav aria-label="Main navigation">
           <slot></slot>
-        </section>
+        </nav>
       </div>
     `;
   }
 
   get modalTemplate() {
-    return this.noModal ? '' : html`<div class="modal" @click=${this._documentClose}></div>`;
+    return this.noModal ? '' : html`<div 
+      class="modal" 
+      aria-hidden="true"
+      ?inert="${!this.opened}"
+      @click=${this._documentClose}>
+    </div>`;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('opened')) {
+      if (this.opened) {
+        this._openDrawer();
+      } else {
+        this._closeDrawer();
+      }
+    }
+  }
+
+  _openDrawer() {
+    this._triggerElement = document.activeElement;
+    this.shadowRoot.querySelector('.menu').focus();
+    this._focusTrapActive = true;
+    document.addEventListener('keydown', this._handleKeyDown);
+  }
+
+  _closeDrawer() {
+    this._focusTrapActive = false;
+    document.removeEventListener('keydown', this._handleKeyDown);
+    
+    if (this._triggerElement && typeof this._triggerElement.focus === 'function') {
+      setTimeout(() => {
+        this._triggerElement.focus();
+      }, 0);
+    }
+  }
+
+  _getFocusableElements() {
+    const focusableSelector = `
+      button:not([disabled]),
+      [href],
+      input:not([disabled]),
+      select:not([disabled]),
+      textarea:not([disabled]),
+      [tabindex]:not([tabindex="-1"]):not([disabled]),
+      [role="button"]:not([aria-disabled="true"])
+    `;
+    return Array.from(this.querySelectorAll(focusableSelector)).filter(el => {
+      return el.offsetParent !== null;
+    });
+  }
+
+  _handleKeyDown(e) {
+    if (!this._focusTrapActive || e.key !== 'Tab') return;
+    
+    const focusableElements = this._getFocusableElements();
+    if (focusableElements.length === 0) return;
+    
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const activeElement = document.activeElement;
+    
+    const focusIsInsideDrawer = focusableElements.includes(activeElement);
+    if (!focusIsInsideDrawer) return;
+    
+    if (e.shiftKey && activeElement === firstElement) {
+      e.preventDefault();
+      lastElement.focus();
+    }
+    else if (!e.shiftKey && activeElement === lastElement) {
+      e.preventDefault();
+      firstElement.focus();
+    }
   }
 
   _documentClose() {

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,502 @@
+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 { 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 [
+      messageStyles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: inline-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);
+        }
+        #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, #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, #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, #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/hamburger/src/DileHamburger.js

@@ -125,6 +125,19 @@ export class DileHamburger extends LitElement {
       .hamburger:focus-visible .hamburger-inner::after {
         background-color: var(--dile-hamburger-focus-color, var(--dile-primary-dark-color, #0a66ff));
       }
+
+      /* Respect prefers-reduced-motion */
+      @media (prefers-reduced-motion: reduce) {
+        .hamburger {
+          transition: none;
+        }
+
+        .hamburger-inner,
+        .hamburger-inner::before,
+        .hamburger-inner::after {
+          transition: none;
+        }
+      }
     `;
   }
 

package/components/menu-hamburger/src/DileMenuHamburger.js

@@ -63,7 +63,15 @@ export class DileMenuHamburger extends LitElement {
 
   render() {
     return html`
-      <dile-hamburger @click="${this.toggle}" ?active="${this.opened}"></dile-hamburger>
+      <dile-hamburger 
+        @click="${this.toggle}" 
+        ?active="${this.opened}"
+        aria-label="Open main menu"
+        aria-expanded="${this.opened}"
+        aria-controls="drawer"
+        aria-haspopup="dialog"
+        role="button">
+      </dile-hamburger>
       <dile-app-drawer 
         id="drawer" 
         ?opened="${this.opened}" 

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.3",
+  "version": "2.28.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c1d820ed3098c991942d79b299327e2ea6aef07"
+  "gitHead": "d90ac8ac1b524d3591fc65ac57a6156131a940bb"
 }