@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/color-picker/color-picker.recipe.js

@@ -0,0 +1,19 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row, stack } from '../layout/index.js';
+/**
+ * Arrangement of the colour picker's popup (layout-recipes.md §14): its controls in a column; the
+ * hex and opacity entries side by side, each a label over its input; the suggested colours under
+ * their label, in a row that wraps; and the actions at the end of a row that wraps.
+ */
+export const colorPickerRecipe = defineLayoutRecipe({
+    name: 'color-picker',
+    regions: {
+        controls: stack({ gap: token('space.md') }),
+        entries: row({ gap: token('space.sm'), align: 'stretch' }),
+        entry: stack({ gap: token('space.xs') }),
+        swatches: stack({ gap: token('space.md') }),
+        'swatch-row': row({ gap: token('space.sm'), wrap: true }),
+        actions: row({ gap: token('space.xs'), justify: 'end', wrap: true }),
+    },
+});
+//# sourceMappingURL=color-picker.recipe.js.map

package/dist/color-picker/color-picker.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.recipe.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;IAClD,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE;QACP,QAAQ,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QAC3C,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QAC1D,KAAK,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QAC3C,YAAY,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;KACrE;CACF,CAAC,CAAC"}

package/dist/color-picker/color-picker.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const colorPickerRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=color-picker.recipe.styles.d.ts.map

package/dist/color-picker/color-picker.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,yCAEnC,CAAC"}

package/dist/color-picker/color-picker.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./color-picker.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const colorPickerRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .controls {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-md);\n    min-inline-size: 0;\n  }\n  .entries {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n    gap: var(--odd-space-sm);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .entry {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-xs);\n    min-inline-size: 0;\n  }\n  .swatches {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-md);\n    min-inline-size: 0;\n  }\n  .swatch-row {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-sm);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n  }\n  .actions {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-xs);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n    justify-content: end;\n  }\n}\n');
+//# sourceMappingURL=color-picker.recipe.styles.js.map

package/dist/color-picker/color-picker.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.recipe.styles.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.recipe.styles.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,SAAS,CAC9C,k/BAAk/B,CACn/B,CAAC"}

package/dist/color-picker/color-picker.structural.styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The colour picker is a block with the shared field layout: the swatch and the button over the
+ * text input's ends, as adornments; the popup (the shared overlay surface) as wide as the field
+ * box, stacking the area, the hue slider (the shared slider area, its track the full width), the
+ * hex and opacity entries side by side, the RGB values, the suggested colours (each a native radio
+ * over its square, its check white, or black where white falls below 3:1 on the colour), and the
+ * actions at the end (those columns and rows are the layout recipe in `color-picker.recipe.ts`).
+ * The area paints saturation across and brightness up for the hue (`--_hue`,
+ * `--_s`, `--_v`); the hue track paints the hues; both are mirrored right to left. They and the
+ * swatches are the user's colour data, not theme colours: where forced colours exist, they keep
+ * their colours (`forced-color-adjust`, a registered enhancement). No brand tokens.
+ */
+export declare const colorPickerStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=color-picker.structural.styles.d.ts.map

package/dist/color-picker/color-picker.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.structural.styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.structural.styles.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,2BAA2B,yCAmGvC,CAAC"}

package/dist/color-picker/color-picker.structural.styles.js

@@ -0,0 +1,116 @@
+import { css } from '@oddkin/core/styles';
+import { rangeStructuralStyles } from '../styles/range.structural.styles.js';
+import { colorPickerRecipeStyles } from './color-picker.recipe.styles.js';
+/**
+ * The colour picker is a block with the shared field layout: the swatch and the button over the
+ * text input's ends, as adornments; the popup (the shared overlay surface) as wide as the field
+ * box, stacking the area, the hue slider (the shared slider area, its track the full width), the
+ * hex and opacity entries side by side, the RGB values, the suggested colours (each a native radio
+ * over its square, its check white, or black where white falls below 3:1 on the colour), and the
+ * actions at the end (those columns and rows are the layout recipe in `color-picker.recipe.ts`).
+ * The area paints saturation across and brightness up for the hue (`--_hue`,
+ * `--_s`, `--_v`); the hue track paints the hues; both are mirrored right to left. They and the
+ * swatches are the user's colour data, not theme colours: where forced colours exist, they keep
+ * their colours (`forced-color-adjust`, a registered enhancement). No brand tokens.
+ */
+export const colorPickerStructuralStyles = css `
+  ${colorPickerRecipeStyles}
+  ${rangeStructuralStyles}
+  :host {
+    display: block;
+  }
+  .button {
+    display: grid;
+    place-items: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  .button:disabled {
+    cursor: not-allowed;
+  }
+  .swatch,
+  .option-swatch {
+    box-sizing: border-box;
+    background: var(--_color);
+  }
+  .popup {
+    box-sizing: border-box;
+    inline-size: var(--_anchor-inline-size, auto);
+  }
+  .area {
+    position: relative;
+    block-size: 9.25rem;
+    touch-action: none;
+    cursor: pointer;
+    background:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to right, #fff, hsl(calc(var(--_hue) * 1deg) 100% 50%));
+  }
+  .area-thumb {
+    position: absolute;
+    box-sizing: border-box;
+    inset-inline-start: calc(var(--_s) * 100%);
+    inset-block-start: calc((1 - var(--_v)) * 100%);
+  }
+  .hue {
+    padding-inline: 0;
+  }
+  .hue > .track {
+    background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
+  }
+  :host(:dir(rtl)) .area {
+    background:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to left, #fff, hsl(calc(var(--_hue) * 1deg) 100% 50%));
+  }
+  :host(:dir(rtl)) .hue > .track {
+    background: linear-gradient(to left, red, yellow, lime, cyan, blue, magenta, red);
+  }
+  @supports (forced-color-adjust: none) {
+    .swatch,
+    .option-swatch,
+    .area,
+    .hue > .track {
+      forced-color-adjust: none;
+    }
+  }
+  .entry {
+    flex: 1;
+  }
+  .rgb {
+    margin: 0;
+  }
+  .option-swatch {
+    position: relative;
+    display: grid;
+    place-items: center;
+    color: #fff;
+    cursor: pointer;
+  }
+  .option-swatch.light {
+    color: #000;
+  }
+  .option-radio {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+  .option-swatch > .glyph {
+    visibility: hidden;
+  }
+  .option-swatch:has(:checked) > .glyph {
+    visibility: visible;
+  }
+  .option-swatch:has(:disabled) {
+    cursor: not-allowed;
+  }
+`;
+//# sourceMappingURL=color-picker.structural.styles.js.map

package/dist/color-picker/color-picker.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.structural.styles.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE1E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;IAC1C,uBAAuB;IACvB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGxB,CAAC"}

package/dist/color-picker/color-picker.styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Oddkin's default colour picker: Figma `colorPicker` and `color/Swatch`. The field is the shared
+ * control look with the colour's swatch (large-icon size, small radius, strong border; dimmed while
+ * disabled, as a disabled suggested colour) at its start and the chevron button (as the date
+ * picker's) at its end. The popup is the overlay surface joined to the field box: the shared
+ * corners at the far side only, no border on the near side. Inside, padded by medium spacing (the
+ * arrangement and gaps are the layout recipe in `color-picker.recipe.ts`): the area (small radius;
+ * a ring for the handle), the hue (the shared slider look, small-icon thick, round, its handle the
+ * surface colour with a strong border), the hex and opacity entries (small secondary labels), the
+ * RGB values, the suggested colours under a divider (small-control squares; the check small-icon
+ * size, white unless white falls below 3:1 on the colour), and the actions (small buttons).
+ */
+export declare const colorPickerStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=color-picker.styles.d.ts.map

package/dist/color-picker/color-picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.styles.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,yCAsG7B,CAAC"}

package/dist/color-picker/color-picker.styles.js

@@ -0,0 +1,119 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+import { rangeStyles } from '../styles/range.styles.js';
+/**
+ * Oddkin's default colour picker: Figma `colorPicker` and `color/Swatch`. The field is the shared
+ * control look with the colour's swatch (large-icon size, small radius, strong border; dimmed while
+ * disabled, as a disabled suggested colour) at its start and the chevron button (as the date
+ * picker's) at its end. The popup is the overlay surface joined to the field box: the shared
+ * corners at the far side only, no border on the near side. Inside, padded by medium spacing (the
+ * arrangement and gaps are the layout recipe in `color-picker.recipe.ts`): the area (small radius;
+ * a ring for the handle), the hue (the shared slider look, small-icon thick, round, its handle the
+ * surface colour with a strong border), the hex and opacity entries (small secondary labels), the
+ * RGB values, the suggested colours under a divider (small-control squares; the check small-icon
+ * size, white unless white falls below 3:1 on the colour), and the actions (small buttons).
+ */
+export const colorPickerStyles = css `
+  ${rangeStyles}
+  .control-box > .swatch {
+    inline-size: ${token('icon.size.lg')};
+    block-size: ${token('icon.size.lg')};
+  }
+  .control-box:has(> .swatch) > .control {
+    padding-inline-start: calc(
+      ${token('control.padding.inline.md')} + ${token('icon.size.lg')} + ${token('control.gap')}
+    );
+  }
+  .swatch,
+  .option-swatch {
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('radius.sm')};
+  }
+  .button {
+    inline-size: ${token('target.min')};
+    block-size: ${token('target.min')};
+    margin: calc((1em - ${token('target.min')}) / 2);
+    border-radius: ${token('control.radius')};
+    color: ${token('color.text.secondary')};
+  }
+  @media (hover: hover) {
+    .button:enabled:hover {
+      background: ${token('color.surface.hover')};
+      color: ${token('color.text.primary')};
+    }
+  }
+  .controls {
+    padding: ${token('space.md')};
+  }
+  .popup[data-side='block-end'] {
+    border-block-start-width: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .popup[data-side='block-start'] {
+    border-block-end-width: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  :host(:state(open)) .field:has(.popup[data-side='block-end']) .control-box > .control {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  :host(:state(open)) .field:has(.popup[data-side='block-start']) .control-box > .control {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .area {
+    --_area-thumb: ${token('space.sm')};
+    border-radius: ${token('radius.sm')};
+  }
+  .area-thumb {
+    inline-size: var(--_area-thumb);
+    block-size: var(--_area-thumb);
+    margin-inline-start: calc(var(--_area-thumb) / -2);
+    margin-block-start: calc(var(--_area-thumb) / -2);
+    border: calc(2 * ${token('border.width.default')}) solid ${token('color.surface.default')};
+    border-radius: ${token('radius.full')};
+    box-shadow: 0 0 0 ${token('border.width.default')} ${token('color.border.strong')};
+  }
+  .hue {
+    --_thumb: ${token('icon.size.sm')};
+    min-block-size: auto;
+  }
+  .hue > .track {
+    block-size: ${token('icon.size.sm')};
+    border-radius: ${token('radius.full')};
+  }
+  .hue > .thumb {
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    background: ${token('color.surface.default')};
+  }
+  .entry-label,
+  .rgb,
+  .swatches-label {
+    color: ${token('color.text.secondary')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .swatches {
+    padding-block-start: ${token('space.md')};
+    border-block-start: ${token('border.width.default')} solid ${token('color.border.default')};
+  }
+  .swatches-label {
+    margin: 0;
+  }
+  .option-swatch {
+    inline-size: ${token('control.height.sm')};
+    block-size: ${token('control.height.sm')};
+    font-size: ${token('icon.size.sm')};
+  }
+  .option-swatch:has(:focus-visible) {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: ${token('focus.offset')};
+  }
+  .control:disabled ~ .swatch,
+  .option-swatch:has(:disabled) {
+    opacity: 0.45;
+  }
+`;
+//# sourceMappingURL=color-picker.styles.js.map

package/dist/color-picker/color-picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.styles.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;IAChC,WAAW;;mBAEI,KAAK,CAAC,cAAc,CAAC;kBACtB,KAAK,CAAC,cAAc,CAAC;;;;QAI/B,KAAK,CAAC,2BAA2B,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,aAAa,CAAC;;;;;cAKjF,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,WAAW,CAAC;;;mBAGpB,KAAK,CAAC,YAAY,CAAC;kBACpB,KAAK,CAAC,YAAY,CAAC;0BACX,KAAK,CAAC,YAAY,CAAC;qBACxB,KAAK,CAAC,gBAAgB,CAAC;aAC/B,KAAK,CAAC,sBAAsB,CAAC;;;;oBAItB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;;eAI3B,KAAK,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;qBAqBX,KAAK,CAAC,UAAU,CAAC;qBACjB,KAAK,CAAC,WAAW,CAAC;;;;;;;uBAOhB,KAAK,CAAC,sBAAsB,CAAC,WAAW,KAAK,CAAC,uBAAuB,CAAC;qBACxE,KAAK,CAAC,aAAa,CAAC;wBACjB,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,qBAAqB,CAAC;;;gBAGrE,KAAK,CAAC,cAAc,CAAC;;;;kBAInB,KAAK,CAAC,cAAc,CAAC;qBAClB,KAAK,CAAC,aAAa,CAAC;;;cAG3B,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;kBAC/D,KAAK,CAAC,uBAAuB,CAAC;;;;;aAKnC,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;2BAGvB,KAAK,CAAC,UAAU,CAAC;0BAClB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;;;;;;mBAM3E,KAAK,CAAC,mBAAmB,CAAC;kBAC3B,KAAK,CAAC,mBAAmB,CAAC;iBAC3B,KAAK,CAAC,cAAc,CAAC;;;eAGvB,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;;;;CAM1C,CAAC"}

package/dist/color-picker/color-picker.template.d.ts

@@ -0,0 +1,12 @@
+import type { OddkinColorPicker } from './color-picker.js';
+/**
+ * Anatomy: the `label` for the text input (part `control`) in the field box, the colour's `swatch`
+ * before it and the `button` after it; the `description` and `error`; and the `popup` (a
+ * non-modal dialog joined under the field box): the saturation-and-brightness `area` with its
+ * `area-thumb`, the `hue` slider (the shared slider area) with its `hue-thumb`, the `hex` and
+ * (with `alpha`) `opacity` inputs, the `rgb` values, the suggested `swatches` (native radios, part
+ * `option-swatch`), and the `cancel` and `apply` buttons. The inputs keep their text through
+ * `live()`.
+ */
+export declare const colorPickerTemplate: (picker: OddkinColorPicker) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=color-picker.template.d.ts.map

package/dist/color-picker/color-picker.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.template.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-picker.template.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI3D;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,WAAY,iBAAiB,mDA8L5D,CAAC"}

package/dist/color-picker/color-picker.template.js

@@ -0,0 +1,204 @@
+import { live } from '@oddkin/core/helpers/live';
+import { styleMap } from '@oddkin/core/helpers/style-map';
+import { html, nothing } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { checkGlyph, chevronDownGlyph } from '../styles/glyphs.js';
+import { hexText, isLight, parseColor } from './color.js';
+const percent = (fraction) => String(Math.round(fraction * 100));
+/**
+ * Anatomy: the `label` for the text input (part `control`) in the field box, the colour's `swatch`
+ * before it and the `button` after it; the `description` and `error`; and the `popup` (a
+ * non-modal dialog joined under the field box): the saturation-and-brightness `area` with its
+ * `area-thumb`, the `hue` slider (the shared slider area) with its `hue-thumb`, the `hex` and
+ * (with `alpha`) `opacity` inputs, the `rgb` values, the suggested `swatches` (native radios, part
+ * `option-swatch`), and the `cancel` and `apply` buttons. The inputs keep their text through
+ * `live()`.
+ */
+export const colorPickerTemplate = (picker) => {
+    const text = picker._strings.value;
+    const inactive = picker._inactive;
+    const color = picker._color.value;
+    const draft = picker._draft;
+    const options = picker._options.value;
+    return html `<div part="field" class="field">
+    <label part="label" class="label" for="control" ?hidden=${!picker.label}>${picker.label}</label>
+    <div part="description" id="description" class="description" ?hidden=${!picker.description}>
+      ${picker.description}
+    </div>
+    <div class="control-box">
+      <input
+        part="control"
+        id="control"
+        class="control"
+        type="text"
+        autocomplete="off"
+        spellcheck="false"
+        .value=${live(picker._text)}
+        ?disabled=${inactive}
+        aria-describedby=${picker._describedBy}
+        aria-invalid=${picker._userInvalid.value ? 'true' : null}
+        @input=${picker._onInput}
+        @change=${picker._onChange}
+        @blur=${picker._onBlur}
+      />
+      <span
+        part="swatch"
+        class="control-start swatch"
+        aria-hidden="true"
+        style=${styleMap({ '--_color': hexText(color) })}
+      ></span>
+      <span class="control-end">
+        <button
+          part="button"
+          class="button"
+          type="button"
+          aria-label=${picker._buttonLabel}
+          aria-haspopup="dialog"
+          aria-expanded=${picker._open.value ? 'true' : 'false'}
+          ?disabled=${inactive}
+          @click=${picker._onButton}
+        >
+          ${chevronDownGlyph}
+        </button>
+      </span>
+    </div>
+    <div part="error" id="error" class="error" ?hidden=${!picker.error}>${picker.error}</div>
+    <div
+      part="popup"
+      class="overlay-surface popup"
+      role="dialog"
+      aria-label=${text.choose}
+      @input=${(event) => event.stopPropagation()}
+    >
+      <div class="controls">
+        <div
+          part="area"
+          class="area"
+          style=${styleMap({
+        '--_hue': String(draft.h),
+        '--_s': String(draft.s),
+        '--_v': String(draft.v),
+    })}
+        >
+          <div
+            part="area-thumb"
+            class="area-thumb"
+            role="slider"
+            tabindex="0"
+            aria-label=${text.area}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow=${percent(draft.s)}
+            aria-valuetext=${picker._areaText}
+            @keydown=${picker._onAreaKeydown}
+          ></div>
+        </div>
+        <div
+          part="hue"
+          class="slider hue"
+          style=${styleMap({ '--_fraction': String(draft.h / 360) })}
+        >
+          <div class="track"></div>
+          <div
+            part="hue-thumb"
+            class="thumb"
+            role="slider"
+            tabindex="0"
+            aria-label=${text.hue}
+            aria-valuemin="0"
+            aria-valuemax="360"
+            aria-valuenow=${String(Math.round(draft.h))}
+            @keydown=${picker._onHueKeydown}
+          ></div>
+        </div>
+        <div class="entries">
+          <label class="entry">
+            <span class="entry-label">${text.hex}</span>
+            <input
+              part="hex"
+              class="control"
+              type="text"
+              autocomplete="off"
+              spellcheck="false"
+              .value=${live(picker._hexText)}
+              aria-invalid=${picker._hexInvalid ? 'true' : null}
+              @input=${picker._onHexInput}
+            />
+          </label>
+          ${picker.alpha
+        ? html `<label class="entry">
+                  <span class="entry-label">${text.opacity}</span>
+                  <input
+                    part="opacity"
+                    class="control"
+                    type="text"
+                    role="spinbutton"
+                    inputmode="numeric"
+                    autocomplete="off"
+                    .value=${live(picker._opacityText)}
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                    aria-valuenow=${percent(draft.a)}
+                    aria-valuetext=${`${percent(draft.a)}%`}
+                    @input=${picker._onOpacityInput}
+                    @keydown=${picker._onOpacityKeydown}
+                  />
+                </label>`
+        : nothing}
+        </div>
+        <p part="rgb" class="rgb">${picker._rgbText}</p>
+        ${options.length
+        ? html `<div part="swatches" class="swatches">
+                <p id="swatches-label" class="swatches-label">${text.swatches}</p>
+                <div class="swatch-row" role="radiogroup" aria-labelledby="swatches-label">
+                  ${options.map((option) => {
+            const optionColor = parseColor(option.value);
+            return html `<label
+                      part="option-swatch"
+                      class=${optionColor && isLight(optionColor) ? 'option-swatch light' : 'option-swatch'}
+                      style=${styleMap({ '--_color': optionColor ? hexText(optionColor) : null })}
+                    >
+                      <input
+                        class="option-radio"
+                        type="radio"
+                        name="swatch"
+                        .value=${option.value}
+                        .checked=${live(picker._isDraft(option))}
+                        ?disabled=${option.disabled}
+                        aria-label=${option.label || (optionColor ? hexText(optionColor) : option.value)}
+                        @change=${picker._onSwatch}
+                      />
+                      ${checkGlyph}
+                    </label>`;
+        })}
+                </div>
+              </div>`
+        : nothing}
+        <div class="actions">
+          <button
+            part="cancel"
+            class="odd-button"
+            data-size="sm"
+            type="button"
+            @click=${picker._onCancel}
+          >
+            ${text.cancel}
+          </button>
+          <button
+            part="apply"
+            class="odd-button"
+            data-appearance="primary"
+            data-size="sm"
+            type="button"
+            ?disabled=${picker._hexInvalid}
+            @click=${picker._onApply}
+          >
+            ${text.apply}
+          </button>
+        </div>
+      </div>
+    </div>
+    ${externalDescriptionTemplate(picker._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=color-picker.template.js.map

package/dist/color-picker/color-picker.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.template.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.template.ts"],"names":[],"mappings":"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"}

package/dist/color-picker/color.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Colours as `<input type="color">` handles them (HTML §4.10.5.1.14): parsing any CSS colour,
+ * serializing to `#rrggbb`, or to `color(srgb r g b / a)` when the alpha component applies, both
+ * limited to 8 bits per channel; the hex text a field takes; and HSV for the picker's area and hue.
+ */
+/** Red, green, and blue from 0 to 255; alpha from 0 to 1. */
+export interface Rgba {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    readonly a: number;
+}
+/** Hue in degrees (0 to 360); saturation, value (brightness), and alpha from 0 to 1. */
+export interface Hsva {
+    readonly h: number;
+    readonly s: number;
+    readonly v: number;
+    readonly a: number;
+}
+export declare const BLACK: Rgba;
+/** `#rgb`, `#rgba`, `#rrggbb`, or `#rrggbbaa`, the `#` optional; `undefined` for anything else. */
+export declare function parseHex(text: string): Rgba | undefined;
+/** Any CSS colour the engine parses, in sRGB; `undefined` when it does not parse. */
+export declare function parseColor(text: string): Rgba | undefined;
+/**
+ * The value a native colour input gives: `#rrggbb` (the alpha dropped), or with `alpha`,
+ * `color(srgb r g b)` with ` / a` while not opaque.
+ */
+export declare function serializeColor(color: Rgba, alpha: boolean): string;
+/** The colour as a field shows it: `#RRGGBB`, with the alpha byte while not opaque. */
+export declare function hexText(color: Rgba): string;
+/** White on the colour falls below WCAG's 3:1 for graphics, so a mark on it is drawn black. */
+export declare function isLight({ r, g, b }: Rgba): boolean;
+export declare function toHsva({ r, g, b, a }: Rgba): Hsva;
+export declare function toRgba({ h, s, v, a }: Hsva): Rgba;
+//# sourceMappingURL=color.d.ts.map

package/dist/color-picker/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/color-picker/color.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,6DAA6D;AAC7D,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wFAAwF;AACxF,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,IAAiC,CAAC;AAStD,mGAAmG;AACnG,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAMvD;AAID,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAuBzD;AAKD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAIlE;AAED,uFAAuF;AACvF,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAG3C;AAOD,+FAA+F;AAC/F,wBAAgB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,GAAG,OAAO,CAElD;AAED,wBAAgB,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,GAAG,IAAI,CAWjD;AAED,wBAAgB,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,GAAG,IAAI,CAMjD"}