@kubex/zinc 1.1.185 → 2.0.1

package/src/components/checkbox-group/checkbox-group.component.ts

@@ -81,6 +81,9 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
   /** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
   @property({type: Boolean, reflect: true}) square = false;
 
+  /** Centres the text of every contained checkbox in the group. */
+  @property({type: Boolean, reflect: true}) centered = false;
+
   /**
    * Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
    * `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
@@ -174,6 +177,10 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
           checkbox.square = true;
         }
 
+        if (this.centered) {
+          checkbox.centered = true;
+        }
+
         // Add class to checkboxes in a Checkbox Group so that we can style them without using :slotted
         checkbox.classList.add('groupedCheckbox');
 
@@ -317,7 +324,6 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
           'form-control--has-label-tooltip': hasLabelTooltip,
           'form-control--has-help-text': hasHelpText
         })}
-        role="listbox"
         aria-labelledby="label"
         aria-describedby="help-text"
         aria-errormessage="error-message">

package/src/components/chip/chip.component.ts

@@ -31,9 +31,16 @@ export default class ZnChip extends ZincElement {
 
   @property({attribute: 'icon-size', type: Number}) iconSize: number = 18;
 
-  @property() type: 'info' | 'success' | 'warning' | 'error' | 'primary' |
+  /** `ai` marks AI-generated content only. */
+  @property() type: 'info' | 'success' | 'warning' | 'error' | 'primary' | 'ai' |
     'transparent' | 'custom' | 'neutral' = 'neutral';
 
+  /** Fills the chip with its type colour. */
+  @property({type: Boolean}) solid = false;
+
+  /** Leads the label with a dot in the type colour. */
+  @property({type: Boolean}) dot = false;
+
   @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
   @property({attribute: 'flush-x', type: Boolean, reflect: true}) flushX: boolean = false;
   @property({attribute: 'flush-y', type: Boolean, reflect: true}) flushY: boolean = false;
@@ -59,6 +66,9 @@ export default class ZnChip extends ZincElement {
         'chip--transparent': this.type === 'transparent',
         'chip--custom': this.type === 'custom',
         'chip--neutral': this.type === 'neutral',
+        'chip--ai': this.type === 'ai',
+        'chip--solid': this.solid,
+        'chip--dot': this.dot,
       })}">
         ${this.icon ? html`
           <zn-icon src="${this.icon}" size="${this.iconSize}"></zn-icon>` : ''}

package/src/components/chip/chip.scss

@@ -6,21 +6,33 @@
 }
 
 .chip {
+  // fg = text/icon, bg = tint, line = hairline (drawn only when a theme sets
+  // --zn-chip-border-width), solid = the `solid` fill and the `dot`.
+  --chip-fg: rgb(var(--zn-text));
+  --chip-bg: rgba(var(--zn-border-color), .10);
+  --chip-line: rgba(var(--zn-border-color), .50);
+  --chip-solid: rgb(var(--zn-color-muted-text));
+  --chip-ink: 255, 255, 255;
+
+  box-sizing: border-box;
   display: inline-flex;
   font-size: var(--zn-text-chip-font-size);
   font-family: var(--zn-font-family-sans);
   font-weight: var(--zn-text-chip-font-weight);
-  border-radius: var(--zn-border-radius-x-large);
-  padding-inline: var(--zn-spacing-x-small);
+  border-radius: var(--zn-chip-border-radius, var(--zn-border-radius-x-large));
+  padding-inline: var(--zn-chip-padding-inline, var(--zn-spacing-x-small));
   padding-block: 0;
-  height: var(--zn-spacing-medium);
+  height: var(--zn-chip-height, var(--zn-spacing-medium));
+  color: var(--chip-fg);
+  background: var(--chip-bg);
+  border: var(--zn-chip-border-width, 0px) solid var(--chip-line);
   text-align: center;
-  gap: var(--zn-spacing-x-small);
+  gap: var(--zn-chip-gap, var(--zn-spacing-x-small));
   width: fit-content;
   justify-content: center;
   align-items: center;
   line-height: var(--zn-text-chip-line-height);
-  letter-spacing: var(--zn-letter-spacing-loose);
+  letter-spacing: var(--zn-chip-letter-spacing, var(--zn-letter-spacing-loose));
   white-space: nowrap;
 
   &--flush {
@@ -39,43 +51,66 @@
 }
 
 .chip--primary {
-  color: rgba(var(--zn-primary), 0.9);
-  background: rgba(var(--zn-primary), .10);
+  --chip-fg: var(--zn-chip-primary-fg, rgba(var(--zn-primary), 0.9));
+  --chip-bg: var(--zn-chip-primary-bg, rgba(var(--zn-primary), .10));
+  --chip-line: var(--zn-chip-primary-line, rgba(var(--zn-primary), .30));
+  --chip-solid: rgb(var(--zn-primary));
 }
 
-.chip--error {
-  color: rgb(var(--zn-color-error));
-  background: rgba(var(--zn-color-error), .10);
-}
-
-.chip--info {
-  color: rgb(var(--zn-color-info));
-  background: rgba(var(--zn-color-info), .10);
+@each $type, $role in (error: danger, info: info, warning: warning, success: success, ai: ai) {
+  .chip--#{$type} {
+    --chip-fg: var(--zn-color-#{$role}-fg);
+    --chip-bg: var(--zn-color-#{$role}-bg);
+    --chip-line: var(--zn-color-#{$role}-line);
+    --chip-solid: var(--zn-color-#{$role}-solid);
+  }
 }
 
 .chip--warning {
-  color: rgb(var(--zn-color-warning));
-  background: rgba(var(--zn-color-warning), .10);
+  --chip-ink: var(--zn-color-on-warning, 255, 255, 255);
 }
 
-.chip--success {
-  color: rgb(var(--zn-color-success));
-  background: rgba(var(--zn-color-success), .10);
+.chip--ai {
+  --chip-ink: var(--zn-color-on-ai, 255, 255, 255);
 }
 
 .chip--neutral {
-  color: rgb(var(--zn-text));
-  background: rgba(var(--zn-border-color), .10);
+  --chip-fg: var(--zn-chip-neutral-fg, rgb(var(--zn-text)));
+  --chip-bg: var(--zn-chip-neutral-bg, rgba(var(--zn-border-color), .10));
+  --chip-line: var(--zn-chip-neutral-line, rgba(var(--zn-border-color), .50));
+  --chip-solid: var(--zn-color-neutral-solid);
 }
 
 .chip--transparent {
-  color: rgb(var(--zn-text));
-  background: transparent;
+  --chip-fg: rgb(var(--zn-text));
+  --chip-bg: transparent;
+  --chip-line: transparent;
 }
 
 .chip--custom {
-  color: var(--chip-color-override, rgb(var(--zn-text)));
-  background-color: hsl(from var(--chip-color-override, inherit) h s l / 0.1);
+  --chip-fg: var(--chip-color-override, rgb(var(--zn-text)));
+  --chip-bg: hsl(from var(--chip-color-override, inherit) h s l / 0.1);
+  --chip-line: hsl(from var(--chip-color-override, inherit) h s l / 0.3);
+  --chip-solid: var(--chip-color-override, rgb(var(--zn-text)));
+}
+
+.chip--solid {
+  color: rgb(var(--chip-ink));
+  background: var(--chip-solid);
+  border-color: var(--chip-solid);
+}
+
+.chip--dot::before {
+  content: "";
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--chip-solid);
+}
+
+.chip--solid.chip--dot::before {
+  background: currentColor;
 }
 
 .chip__value {
@@ -101,3 +136,33 @@
 .chip--with-icon {
   padding-left: var(--zn-spacing-2x-small);
 }
+
+.chip--with-icon.chip--with-content {
+  padding-left: var(--zn-chip-icon-padding-start, var(--zn-spacing-2x-small));
+}
+
+.chip__action {
+  // Slotted zn-buttons inherit these, shrinking them to fit the circle.
+  --zn-button-height: 100%;
+  --zn-button-icon-width: 100%;
+
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  margin-inline: -1.6px -8px;
+  border-radius: 50%;
+  overflow: hidden;
+  color: var(--zn-chip-action-color, currentColor);
+
+  // zn-button's own :host colour would otherwise beat inheriting from this slot.
+  &::slotted(*) {
+    color: inherit;
+  }
+
+  &:hover {
+    color: var(--zn-chip-action-hover-color, currentColor);
+    background: var(--zn-chip-action-hover-background, rgba(var(--zn-border-color), .3));
+  }
+}

package/src/components/chip/chip.test.ts

@@ -24,4 +24,21 @@ describe('<zn-chip>', () => {
 
     expect(colour(el)).to.equal(colour(neutral));
   });
+
+  it('applies the ai, solid and dot classes', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-chip type="ai" solid dot>Generated</zn-chip>`);
+    const base = el.shadowRoot!.querySelector('[part="base"]')!;
+
+    expect(base.classList.contains('chip--ai')).to.be.true;
+    expect(base.classList.contains('chip--solid')).to.be.true;
+    expect(base.classList.contains('chip--dot')).to.be.true;
+  });
+
+  it('fills a solid chip with its type colour', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-chip type="custom" solid style="--chip-color-override: rgb(15, 118, 110)">Ticket</zn-chip>`);
+    const base = el.shadowRoot!.querySelector('[part="base"]')!;
+
+    expect(getComputedStyle(base).backgroundColor).to.equal('rgb(15, 118, 110)');
+  });
 });

package/src/components/collapsible/collapsible.component.ts

@@ -160,6 +160,16 @@ export default class ZnCollapsible extends ZincElement {
     }
   }
 
+  handleHeaderKeyDown = (e: KeyboardEvent) => {
+    // Keys from controls slotted into the header are theirs
+    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) {
+      return;
+    }
+
+    e.preventDefault();
+    this.expanded = !this.expanded;
+  }
+
   public recalculateNumberOfItems = () => {
     const assignedElements = this.hasSlotController.getDefaultSlot()
       .filter(node => node.nodeType === Node.ELEMENT_NODE) as HTMLElement[];
@@ -179,7 +189,10 @@ export default class ZnCollapsible extends ZincElement {
 
     return html`
       <div @click="${() => (!this.expanded ? (this.expanded = true) : '')}">
-        <slot name="header" part="header" class="header" @click="${this.handleCollapse}">
+        <div class="header-toggle" role="button" tabindex="0" aria-expanded="${this.expanded}"
+             @click="${this.handleCollapse}"
+             @keydown="${this.handleHeaderKeyDown}">
+        <slot name="header" part="header" class="header">
           <div class="header__left">
             <p part="caption" class="caption">
               <slot name="caption">${this.caption}</slot>
@@ -196,14 +209,15 @@ export default class ZnCollapsible extends ZincElement {
             ${this.showNumber && !this.expanded ? html`
               <zn-chip size="small" type="primary">${this.numberOfItems}</zn-chip>` : ''}
             ${this.showArrow ? html`
-              <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>` : ''}
+              <zn-icon src="chevron-down@lu" size="18" class="expand"></zn-icon>` : ''}
           </div>
         </slot>
+        </div>
         <div class=${classMap({
           'content': true,
           'content--flush': this.flush,
           'content--animating': this.animating,
-        })} part="content" @transitionend="${this.handleTransitionEnd}">
+        })} part="content" ?inert="${!this.expanded}" @transitionend="${this.handleTransitionEnd}">
           <div class="content__inner">
             <slot @slotchange="${this.requestUpdate}"></slot>
           </div>

package/src/components/collapsible/collapsible.scss

@@ -8,23 +8,18 @@
   transform: rotate(180deg);
 }
 
-:host-context(.app-navigation) .header {
-  padding: var(--zn-base-px);
-}
-
 .header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
   overflow: hidden;
-  padding: var(--zn-base-gap);
+  padding: var(--zn-collapsible-header-padding, var(--zn-base-gap));
   justify-items: center;
 
   .caption {
     font-weight: 600;
     margin: 0;
-    flex-grow: 1;
     width: 100%;
     color: rgb(var(--zn-text-heading));
   }
@@ -60,6 +55,11 @@
   }
 }
 
+.header-toggle:focus-visible {
+  outline: var(--zn-focus-ring);
+  outline-offset: calc(-1 * var(--zn-focus-ring-width));
+}
+
 :host([error-label]) {
   .header {
     .caption {
@@ -90,15 +90,15 @@
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: 0fr;
   opacity: 0;
-  transition: grid-template-rows var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1),
+  transition: grid-template-rows var(--zn-transition-medium) var(--zn-ease-drawer),
   opacity var(--zn-transition-fast) ease-out;
 
   &__inner {
     min-height: 0;
     padding: 0 var(--zn-spacing-medium) var(--content-block-padding);
     transform: translateY(-4px);
-    transition: transform var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1),
-    padding-bottom var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1);
+    transition: transform var(--zn-transition-medium) var(--zn-ease-drawer),
+    padding-bottom var(--zn-transition-medium) var(--zn-ease-drawer);
   }
 
   &--flush &__inner {
@@ -126,11 +126,20 @@
 
 @media (prefers-reduced-motion: reduce) {
   .content,
-  .content__inner {
+  .content__inner,
+  .expand {
     transition-duration: 0s;
   }
 }
 
 .expand {
   margin-left: var(--zn-spacing-medium);
+  color: rgb(var(--zn-color-muted-text));
+  transition: transform var(--zn-transition-medium) var(--zn-ease-out), color var(--zn-transition-fast) ease;
+}
+
+@include wc.hover-fine {
+  .header-toggle:hover .expand {
+    color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
+  }
 }

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

@@ -0,0 +1,277 @@
+import {
+  type ColorFormat,
+  hslToRgb,
+  type Hsv,
+  hsvToRgb,
+  oklchParts,
+  oklchToRgb,
+  parseColor,
+  type Rgb,
+  rgbToHsl,
+  rgbToHsv,
+  toHex
+} from '../../utilities/color';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property, query} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './color-picker.scss';
+
+type FieldKey = 'hex' | 'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'ol' | 'oc' | 'oh';
+
+const FORMAT_OF: Record<FieldKey, ColorFormat> = {
+  hex: 'hex', r: 'rgb', g: 'rgb', b: 'rgb', h: 'hsl', s: 'hsl', l: 'hsl', ol: 'oklch', oc: 'oklch', oh: 'oklch'
+};
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+
+/**
+ * @summary A colour panel: a saturation/brightness area, a hue slider and the colour's HEX, RGB, HSL and OKLCH values.
+ * @documentation https://zinc.style/components/color-picker
+ * @status experimental
+ * @since 1.0
+ *
+ * @event zn-input - Emitted when the colour or the format being worked in changes.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class ZnColorPicker extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @query('.color-picker__area') area: HTMLElement;
+
+  /** The colour, in any CSS colour syntax. Reads back as `#RRGGBB`. */
+  @property() value = '#000000';
+
+  /** The format being worked in. Focusing or editing a row switches to that row's format. */
+  @property({reflect: true}) format: ColorFormat = 'hex';
+
+  @property() label = 'Colour';
+
+  private hsv: Hsv = [0, 0, 0];
+  private editing: FieldKey | null = null;
+
+  private get rgb(): Rgb {
+    return hsvToRgb(...this.hsv);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.adopt(this.value);
+  }
+
+  /** Moves focus to the colour area. */
+  focus(options?: FocusOptions) {
+    this.area?.focus(options);
+  }
+
+  @watch('value', {waitUntilFirstUpdate: true})
+  handleValueChange() {
+    if (this.value !== toHex(this.rgb)) {
+      this.adopt(this.value);
+      this.requestUpdate();
+    }
+  }
+
+  // Grey and black have no hue of their own, so keep the current one rather than snapping the slider to red.
+  private adopt(color: string | Rgb) {
+    const rgb = typeof color === 'string' ? parseColor(color) : color;
+    if (!rgb) return;
+    const hsv = rgbToHsv(...rgb);
+    this.hsv = hsv[1] > 0 && hsv[2] > 0 ? hsv : [this.hsv[0], hsv[1], hsv[2]];
+    this.value = toHex(rgb);
+  }
+
+  private commit(except?: FieldKey) {
+    this.editing = except ?? null;
+    this.value = toHex(this.rgb);
+    this.requestUpdate();
+    this.emit('zn-input');
+  }
+
+  private useFormat(key: FieldKey) {
+    if (FORMAT_OF[key] !== this.format) {
+      this.format = FORMAT_OF[key];
+      this.emit('zn-input');
+    }
+  }
+
+  private pick(event: PointerEvent) {
+    const rect = this.area.getBoundingClientRect();
+    this.hsv = [this.hsv[0], clamp((event.clientX - rect.left) / rect.width, 0, 1), 1 - clamp((event.clientY - rect.top) / rect.height, 0, 1)];
+    this.commit();
+  }
+
+  private handleAreaPointerDown = (event: PointerEvent) => {
+    this.area.setPointerCapture(event.pointerId);
+    this.area.focus();
+    this.pick(event);
+    this.area.addEventListener('pointermove', this.handleAreaPointerMove);
+  };
+
+  private handleAreaPointerMove = (event: PointerEvent) => this.pick(event);
+
+  private handleAreaPointerUp = () => {
+    this.area.removeEventListener('pointermove', this.handleAreaPointerMove);
+  };
+
+  private handleAreaKeyDown(event: KeyboardEvent) {
+    if (!event.key.startsWith('Arrow')) return;
+    event.preventDefault();
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const [h, s, v] = this.hsv;
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.hsv = [h, clamp(s - step, 0, 1), v];
+        break;
+      case 'ArrowRight':
+        this.hsv = [h, clamp(s + step, 0, 1), v];
+        break;
+      case 'ArrowUp':
+        this.hsv = [h, s, clamp(v + step, 0, 1)];
+        break;
+      case 'ArrowDown':
+        this.hsv = [h, s, clamp(v - step, 0, 1)];
+        break;
+    }
+    this.commit();
+  }
+
+  private handleHueInput(event: Event) {
+    this.hsv = [+(event.target as HTMLInputElement).value, this.hsv[1], this.hsv[2]];
+    this.commit();
+  }
+
+  private field(key: FieldKey) {
+    return this.renderRoot.querySelector<HTMLInputElement>(`[data-k="${key}"]`)!;
+  }
+
+  private num(key: FieldKey) {
+    return parseFloat(this.field(key).value) || 0;
+  }
+
+  private handleFieldFocus(event: FocusEvent) {
+    const key = (event.target as HTMLElement).dataset?.k as FieldKey | undefined;
+    if (key) this.useFormat(key);
+  }
+
+  private handleFieldInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const key = target.dataset.k as FieldKey | undefined;
+    if (!key) return;
+    event.stopPropagation();
+    this.editing = key;
+    this.useFormat(key);
+
+    const rgb = this.readField(key, target.value.trim());
+    if (rgb) {
+      target.removeAttribute('aria-invalid');
+      this.adopt(rgb);
+      this.commit(key);
+    } else {
+      target.setAttribute('aria-invalid', 'true');
+    }
+  }
+
+  private handleFieldBlur() {
+    this.editing = null;
+    this.requestUpdate();
+  }
+
+  /** The colour a row describes once `value` is written into its `key` field, or null when that value is out of range. */
+  private readField(key: FieldKey, value: string): Rgb | null {
+    if (key === 'hex') {
+      return /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value) ? parseColor(value) : null;
+    }
+
+    if (key === 'ol' || key === 'oc' || key === 'oh') {
+      if (!/^\d*\.?\d+$/.test(value)) return null;
+      const n = parseFloat(value);
+      if (n > (key === 'ol' ? 100 : key === 'oc' ? 0.5 : 360)) return null;
+      return oklchToRgb(
+        (key === 'ol' ? n : this.num('ol')) / 100,
+        key === 'oc' ? n : this.num('oc'),
+        key === 'oh' ? n : this.num('oh')
+      );
+    }
+
+    if (!/^\d+$/.test(value)) return null;
+    const n = +value;
+    if (key === 'r' || key === 'g' || key === 'b') {
+      if (n > 255) return null;
+      return [key === 'r' ? n : this.num('r'), key === 'g' ? n : this.num('g'), key === 'b' ? n : this.num('b')];
+    }
+    if (n > (key === 'h' ? 360 : 100)) return null;
+    return hslToRgb(key === 'h' ? n % 360 : this.num('h'), key === 's' ? n : this.num('s'), key === 'l' ? n : this.num('l'));
+  }
+
+  // The fields are written imperatively so the one being typed in keeps exactly what was typed.
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    const rgb = this.rgb;
+    const [h, s, l] = rgbToHsl(...rgb);
+    const [ol, oc, oh] = oklchParts(rgb);
+    const values: Record<FieldKey, string | number> = {
+      hex: toHex(rgb), r: rgb[0], g: rgb[1], b: rgb[2], h, s, l, ol, oc, oh
+    };
+    (Object.keys(values) as FieldKey[]).forEach(key => {
+      if (key === this.editing) return;
+      const input = this.field(key);
+      input.value = String(values[key]);
+      input.removeAttribute('aria-invalid');
+    });
+  }
+
+  private renderTrio(name: string, fields: [FieldKey, string, string][]) {
+    return html`
+      <div class="color-picker__row">
+        <span class="color-picker__row-label">${name}</span>
+        <div class="color-picker__trio">
+          ${fields.map(([key, label, mode]) => html`
+            <input class="color-picker__field" data-k=${key} inputmode=${mode} aria-label=${label}
+                   spellcheck="false" autocomplete="off">`)}
+        </div>
+      </div>`;
+  }
+
+  render() {
+    const [h, s, v] = this.hsv;
+    const hex = toHex(this.rgb);
+
+    return html`
+      <div part="base" class="color-picker" role="group" aria-label="${this.label} colour picker">
+        <div class="color-picker__area"
+             tabindex="0"
+             role="application"
+             aria-label="Colour area: left to right is saturation, bottom to top is brightness. Use the arrow keys."
+             style=${styleMap({backgroundColor: `hsl(${Math.round(h)} 100% 50%)`})}
+             @pointerdown=${this.handleAreaPointerDown}
+             @pointerup=${this.handleAreaPointerUp}
+             @lostpointercapture=${this.handleAreaPointerUp}
+             @keydown=${this.handleAreaKeyDown}>
+          <span class="color-picker__dot"
+                style=${styleMap({left: `${s * 100}%`, top: `${(1 - v) * 100}%`, background: hex})}></span>
+        </div>
+
+        <input class="color-picker__hue" type="range" min="0" max="360" step="1" aria-label="Hue"
+               .value=${String(Math.round(h))}
+               @input=${this.handleHueInput}>
+
+        <div class="color-picker__values"
+             @focusin=${this.handleFieldFocus}
+             @input=${this.handleFieldInput}
+             @focusout=${this.handleFieldBlur}>
+          <label class="color-picker__row color-picker__row--hex">
+            <span class="color-picker__row-label">HEX</span>
+            <input class="color-picker__field" data-k="hex" aria-label="Hex" spellcheck="false" autocomplete="off">
+          </label>
+          ${this.renderTrio('RGB', [['r', 'Red', 'numeric'], ['g', 'Green', 'numeric'], ['b', 'Blue', 'numeric']])}
+          ${this.renderTrio('HSL', [['h', 'Hue degrees', 'numeric'], ['s', 'Saturation percent', 'numeric'], ['l', 'Lightness percent', 'numeric']])}
+          ${this.renderTrio('OKLCH', [['ol', 'OKLCH lightness percent', 'decimal'], ['oc', 'OKLCH chroma', 'decimal'], ['oh', 'OKLCH hue degrees', 'decimal']])}
+        </div>
+      </div>
+    `;
+  }
+}