@ixfx/components 0.2.3 → 0.2.5

package/dist/index-CpbBI3n7.d.ts

@@ -0,0 +1,1239 @@
+import * as _$lit from "lit";
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+
+//#region src/colour-picker/types.d.ts
+/**
+ * OKLCH colour value representation
+ */
+type OklchValue = {
+  readonly l: number;
+  readonly c: number;
+  readonly h: number;
+  readonly a?: number;
+};
+/**
+ * Event detail for colour picker input/change events
+ */
+type ColourPickerEventDetail = OklchValue;
+/**
+ * Colour picker custom events
+ */
+type ColourPickerInputEvent = CustomEvent<ColourPickerEventDetail>;
+type ColourPickerChangeEvent = CustomEvent<ColourPickerEventDetail>;
+type Range = readonly [number, number];
+type RangeInput = readonly [number, number] | readonly number[];
+/**
+ * Augment HTMLElementTagNameMap for the custom element
+ */
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-colour-picker': ColourPicker;
+  }
+} //# sourceMappingURL=types.d.ts.map
+//#endregion
+//#region node_modules/.pnpm/@ixfx+random@0.56.12/node_modules/@ixfx/random/dist/index.d.ts
+//#region src/types.d.ts
+/**
+* A random source.
+*
+* Predefined sources: Math.random, {@link gaussianSource}, {@link weightedSource}
+*/
+type RandomSource = () => number;
+//#endregion
+//#region node_modules/.pnpm/@ixfx+geometry@0.56.12/node_modules/@ixfx/geometry/dist/index.d.ts
+type Angle = {
+  value: number;
+  unit: `deg` | `rad` | `turn` | `grad`;
+};
+/**
+* Parses CSS-style angle strings into an 'Angle' type. By default assumes degrees.
+* 
+* ```js
+* angleParse(`100`);     // { value: 100, unit: `deg` }
+* angleParse(100);       // { value: 100, unit: `deg` }
+* angleParse(`100deg`);  // { value: 100, unit: `deg` }
+* 
+* // More exotic units:
+* angleParse(`100rad`);  // { value: 100, unit: `rad` }
+* angleParse(`100turn`); // { value: 100, unit: `turn` }
+* angleParse(`100grad`); // { value: 100, unit: `grad` }
+* ```
+* 
+* Once parsed in this format, use {@link angleConvert} to convert to
+* a different unit.
+* @param value 
+* @returns 
+*/
+//#endregion
+//#region node_modules/.pnpm/@ixfx+visual@0.56.12/node_modules/@ixfx/visual/dist/index-a3KMyMEu.d.ts
+//#region src/colour/types.d.ts
+type HslBase = {
+  /**
+  * Hue
+  */
+  h: number;
+  /**
+  * Saturation
+  */
+  s: number;
+  /**
+  * Lightness
+  */
+  l: number;
+  /**
+  * Opacity
+  */
+  opacity?: number;
+  space?: `hsl`;
+};
+/**
+* [YCbCr format](https://en.wikipedia.org/wiki/YCbCr)
+*/
+type YCbCrBase = {
+  /**
+  * Luma
+  */
+  y: number;
+  /**
+  * Blue difference
+  */
+  cb: number;
+  /**
+  * Red difference
+  */
+  cr: number;
+  /**
+  * Opacity
+  */
+  opacity?: number;
+  space?: `ycbcr`;
+};
+/**
+* Scalar values use 0..1 for each field
+*/
+type YCbCrScalar = YCbCrBase & {
+  unit: `scalar`;
+};
+/**
+* Absolute colour use 0..255 for each field
+*/
+type YCbCr8bit = YCbCrBase & {
+  unit: `8bit`;
+};
+/**
+* [YCbCr format](https://en.wikipedia.org/wiki/YCbCr).
+*
+* By default assumes scalar coordinates (0..1) for each field.
+* Use '8bit' unit for 0..255 ranged values.
+*/
+type YCbCr = YCbCrScalar | YCbCr8bit;
+type ColourSpaces = `srgb` | `hsl` | `oklch` | `ycbcr`;
+/**
+* Scalar values use 0..1 for each field
+*/
+type HslScalar = HslBase & {
+  unit: `scalar`;
+};
+/**
+* Absolute values use hue:0..360, all other fields 0..100
+*/
+type HslAbsolute = HslBase & {
+  unit: `absolute`;
+};
+/**
+* HSL value.
+* By default assumes scalar coordinates (0..1) for each field.
+* Use 'absolute' unit for hue:0...360, all other fields on 0..100 scale.
+*/
+type Hsl = HslScalar | HslAbsolute;
+/**
+* Rgb.
+* Units determine how to interperet rgb values.
+* 'scalar': 0..1 range for RGB & opacity
+* '8bit': 0..255 range for RGB & opacity
+*/
+type RgbBase = {
+  r: number;
+  g: number;
+  b: number;
+  opacity?: number;
+  space?: `srgb`;
+};
+type RgbScalar = RgbBase & {
+  unit: `scalar`;
+};
+/**
+* RGB in 0...255 range, including opacity.
+*/
+type Rgb8Bit = RgbBase & {
+  unit: `8bit`;
+};
+/**
+* Rgb.
+* Units determine how to interperet rgb values.
+* 'scalar': 0..1 range for RGB & opacity
+* '8bit': 0..255 range for RGB & opacity
+*/
+type Rgb = RgbScalar | Rgb8Bit;
+type LchBase = {
+  /**
+  * Lightness/perceived brightnes
+  */
+  l: number;
+  /**
+  * Chroma ('amount of colour')
+  */
+  c: number;
+  /**
+  * Hue
+  */
+  h: number;
+  /**
+  * Opacity on 0..1 scale
+  */
+  opacity?: number;
+  space: `lch` | `oklch`;
+};
+type ColourInterpolator<T extends Colour> = (amount: number) => T;
+type OkLchBase = LchBase & {
+  space: `oklch`;
+};
+/**
+* Oklch colour expressed in 0..1 scalar values for LCH & opacity
+*/
+type OkLchScalar = OkLchBase & {
+  unit: `scalar`;
+};
+/**
+* Oklch colour expressed with:
+* l: 0..1
+* c: 0..4
+* h: 0..360 degrees
+* opacity: 0..1
+*/
+type OkLchAbsolute = OkLchBase & {
+  unit: `absolute`;
+};
+type OkLch = OkLchAbsolute | OkLchScalar;
+type Colour = {
+  opacity?: number;
+} & (Hsl | OkLch | Rgb | YCbCr);
+/**
+* A representation of colour. Eg: `blue`, `rgb(255,0,0)`, `hsl(20,100%,50%)`
+*/
+type Colourish = Colour | string;
+/**
+* Options for interpolation
+*/
+type ColourInterpolationOpts = {
+  direction: `longer` | `shorter`;
+  /**
+  * Space to do calculations in
+  */
+  space: ColourSpaces;
+  /**
+  * Destination of calculated colour
+  */
+  destination: ConvertDestinations;
+};
+type ColourStepOpts = ColourInterpolationOpts & {
+  /**
+  * If set, determines total number of steps, including colour stops.
+  * Use this _or_ `stepsBetween`.
+  */
+  stepsTotal?: number;
+  /**
+  * If set, determines number of steps between colour stops.
+  * Use this _or_ `stepsTotal`.
+  */
+  stepsBetween?: number;
+};
+type ParsingOptions<T> = Partial<{
+  scalar: boolean;
+  ensureSafe: boolean;
+  /**
+  * Value to use if input is invalid
+  */
+  fallbackString: string;
+  /**
+  * Fallback colour to use if value cannot be parsed
+  */
+  fallbackColour: T;
+}>;
+type ConvertDestinations = `hsl-scalar` | `hsl-absolute` | `oklch-scalar` | `oklch-absolute` | `srgb-8bit` | `srgb-scalar` | `ycbcr-scalar` | `ycbcr-8bit`; //#endregion
+//#region ../../node_modules/.pnpm/colorizr@4.0.1/node_modules/colorizr/dist/index.d.mts
+type ColorType = 'hex' | 'hsl' | 'oklab' | 'oklch' | 'rgb';
+type HEX = `#${string}`;
+interface Analysis {
+  brightnessDifference: number;
+  colorDifference: number;
+  compliant: number;
+  contrast: number;
+  largeAA: boolean;
+  largeAAA: boolean;
+  normalAA: boolean;
+  normalAAA: boolean;
+}
+interface HSL {
+  /** The alpha/opacity value (0-1). */
+  alpha?: number;
+  h: number;
+  l: number;
+  s: number;
+}
+interface LAB {
+  a: number;
+  /** The alpha/opacity value (0-1). */
+  alpha?: number;
+  b: number;
+  l: number;
+}
+interface LCH {
+  /** The alpha/opacity value (0-1). */
+  alpha?: number;
+  c: number;
+  h: number;
+  l: number;
+}
+interface RGB {
+  /** The alpha/opacity value (0-1). */
+  alpha?: number;
+  b: number;
+  g: number;
+  r: number;
+}
+interface ColorizrOptions {
+  /**
+   * Output color format.
+   *
+   * If not specified, the output will use the same format as the input color.
+   */
+  format?: ColorType;
+}
+declare class Colorizr {
+  /** The alpha/opacity value (0-1). */
+  alpha: number;
+  hex: HEX;
+  hsl: HSL;
+  oklab: LAB;
+  oklch: LCH;
+  rgb: RGB;
+  type: ColorType;
+  constructor(color: string | HSL | LAB | LCH | RGB, options?: ColorizrOptions);
+  /**
+   * Get CSS string
+   */
+  get css(): string;
+  /**
+   * Get the red value
+   */
+  get red(): number;
+  /**
+   * Get the green value
+   */
+  get green(): number;
+  /**
+   * Get the blue value
+   */
+  get blue(): number;
+  /**
+   * Get the hue value
+   */
+  get hue(): number;
+  /**
+   * Get the saturation value
+   */
+  get saturation(): number;
+  /**
+   * Get the lightness value
+   */
+  get lightness(): number;
+  /**
+   * Get the luminance value
+   */
+  get luminance(): number;
+  /**
+   * Get the chroma value
+   */
+  get chroma(): number;
+  get opacity(): number;
+  /**
+   * Get the most readable color (light or dark) for this color as a background.
+   */
+  get readableColor(): string;
+  private get currentColor();
+  /**
+   * Get the brightness difference between this color and another.
+   *
+   * @param input - The color to compare against.
+   * @returns The brightness difference value.
+   */
+  brightnessDifference(input: string): number;
+  /**
+   * Get the color difference between this color and another.
+   *
+   * @param input - The color to compare against.
+   * @returns The color difference value.
+   */
+  colorDifference(input: string): number;
+  /**
+   * Test 2 colors for WCAG compliance.
+   *
+   * @param input - The color to compare against.
+   * @returns Analysis object with compliance information.
+   */
+  compare(input: string): Analysis;
+  /**
+   * Get the contrast ratio between this color and another.
+   *
+   * @param input - The color to compare against.
+   * @returns The contrast ratio.
+   */
+  contrast(input: string): number;
+  /**
+   * Format the color to a specific type.
+   *
+   * @param type - The color format to convert to.
+   * @param precision - The decimal precision for the output.
+   * @returns The formatted color string.
+   */
+  format(type: ColorType, precision?: number): string;
+  /**
+   * Increase lightness.
+   *
+   * @param amount - A number between 0 and 100.
+   * @returns The lightened color string.
+   */
+  lighten(amount: number): string;
+  /**
+   * Decrease lightness.
+   *
+   * @param amount - A number between 0 and 100.
+   * @returns The darkened color string.
+   */
+  darken(amount: number): string;
+  /**
+   * Increase saturation.
+   *
+   * @param amount - A number between 0 and 100.
+   * @returns The saturated color string.
+   */
+  saturate(amount: number): string;
+  /**
+   * Decrease saturation.
+   *
+   * @param amount - A number between 0 and 100.
+   * @returns The desaturated color string.
+   */
+  desaturate(amount: number): string;
+  /**
+   * Convert to grayscale.
+   *
+   * @returns The grayscale color string.
+   */
+  grayscale(): string;
+  /**
+   * Invert color.
+   *
+   * @returns The inverted color string.
+   */
+  invert(): string;
+  /**
+   * Mix with another color.
+   *
+   * @param color - The color to mix with.
+   * @param ratio - A number between 0 and 1 (0 = this color, 1 = input color).
+   * @returns The mixed color string.
+   */
+  mix(color: string, ratio?: number): string;
+  /**
+   * Add opacity to the color.
+   *
+   * @param alpha - A number between 0 and 1.
+   * @returns The opacified color string.
+   */
+  opacify(alpha?: number): string;
+  /**
+   * Rotate color hue.
+   *
+   * @param degrees - A number between -360 and 360.
+   * @returns The rotated color string.
+   */
+  rotate(degrees: number): string;
+  /**
+   * Make the color more transparent.
+   *
+   * @param alpha - A number between -1 and 1.
+   * @returns The transparentized color string.
+   */
+  transparentize(alpha?: number): string;
+}
+/**
+ * Check 2 colors for WCAG compliance.
+ *
+ * @param left - The first color string.
+ * @param right - The second color string.
+ * @returns Analysis object with WCAG compliance information.
+ */
+//#endregion
+//#region src/colour/conversion.d.ts
+declare function convert<T extends ConvertDestinations>(colour: Colourish, destination: T): T extends `oklch-absolute` ? OkLchAbsolute : T extends `oklch-scalar` ? OkLchScalar : T extends `srgb-8bit` ? Rgb8Bit : T extends `srgb-scalar` ? RgbScalar : T extends `hsl-scalar` ? HslScalar : T extends `hsl-absolute` ? HslAbsolute : never;
+/**
+* Like {@link convert}, but result is a CSS colour string
+* @param colour
+* @param destination
+*/
+declare function convertToString(colour: Colourish, destination: ConvertDestinations): string;
+/**
+* Converts some kind of colour into a scalar representation. Supports oklch, hsl and srgb.
+* @param colour Colour to convert
+* @param destination Destination colour format
+*/
+declare function convertScalar<T extends ColourSpaces>(colour: Colourish, destination: T): T extends `oklch` ? OkLchScalar : T extends `hsl` ? HslScalar : T extends `srgb` ? RgbScalar : never;
+declare function toCssColour(colour: Colourish | object): string;
+declare function toHexColour(colour: Colourish | object): string;
+declare function toLibraryColour(colour: Colourish): Colorizr;
+declare function guard$4(colour: Colour): void;
+declare function toColour(colourish: any): Colour;
+/**
+* Returns a CSS-ready string
+* representation.
+* ```js
+* element.style.backgroundColor = resolveToString(`red`);
+* ```
+*
+* Tries each parameter in turn, returning the value
+* for the first that resolves. This can be useful for
+* having fallback values.
+*
+* ```js
+* // Try a CSS variable, a object property or finally fallback to red.
+* element.style.backgroundColor = toStringFirst('--some-var', opts.background, `red`);
+* ```
+* @param colours Array of colours to resolve
+*/
+declare function toStringFirst(...colours: Array<Colourish | undefined>): string;
+declare function rgbToHsl(rgb: Rgb, scalarResult: true): HslScalar;
+declare function rgbToHsl(rgb: Rgb, scalarResult: false): HslAbsolute; //#endregion
+//#region src/colour/css-colours.d.ts
+/**
+* Converts from some kind of colour that is legal in CSS
+* into a structured Colour type.
+* 
+* Handles: hex format, CSS variables, colour names
+* ```js
+* fromCssColour(`#ffffff`);
+* fromCssColour(`blue`);
+* fromCssColour(`--some-variable`);
+* fromCssColour(`hsl(50, 50%, 50%)`);
+* fromCssColour(`rgb(50, 100, 100)`);
+* ```
+* @param colour 
+* @returns 
+*/
+declare const fromCssColour: (colour: string) => Colour;
+/**
+* Resolves a named colour to a colour string.
+* 
+* ```js
+* resolveCss(`red`);
+* ```
+* @param colour CSS named colour
+* @returns 
+*/
+declare function resolveCss(colour: CssColourNames): string;
+type CssColourNames = keyof typeof cssDefinedHexColours;
+declare const cssDefinedHexColours: Record<string, string>; //#endregion
+//#region src/colour/generate.d.ts
+/**
+* Returns a full HSL colour string (eg `hsl(20,50%,75%)`) based on a index.
+* It's useful for generating perceptually different shades as the index increments.
+*
+* ```
+* el.style.backgroundColor = goldenAgeColour(10);
+* ```
+*
+* Saturation and lightness can be specified, as numeric ranges of 0-1.
+*
+* @param saturation Saturation (0-1), defaults to 0.5
+* @param lightness Lightness (0-1), defaults to 0.75
+* @param alpha Opacity (0-1), defaults to 1.0
+* @returns HSL colour string eg `hsl(20,50%,75%)`
+*/
+declare const goldenAngleColour: (index: number, saturation?: number, lightness?: number, alpha?: number) => string;
+/**
+* Returns a random hue component (0..359)
+* 
+* ```
+* // Generate hue
+* const h = randomHue(); // 0-359
+*
+* // Generate hue and assign as part of a HSL string
+* el.style.backgroundColor = `hsl(${randomHue(), 50%, 75%})`;
+* ```
+* @param rand
+* @returns
+*/
+declare const randomHue: (rand?: RandomSource) => number; //#endregion
+//#region src/colour/guards.d.ts
+declare function isHsl(v: any): v is Hsl;
+declare function isRgb(v: any): v is Rgb;
+/**
+* If the input object has r,g&b properties, it will return a fully-
+* formed Rgb type with `unit` and `space` properties.
+*
+* If it lacks these basic three properties or they are out of range,
+*  _undefined_ is returned.
+*
+* If RGB values are less than 1 assumes unit:scalar. Otherwise unit:8bit.
+* If RGB values exceed 255, _undefined_ returned.
+* @param v
+* @returns
+*/
+declare function tryParseObjectToRgb(v: any): Rgb | undefined;
+declare function tryParseObjectToHsl(v: any): Hsl | undefined;
+declare function isOkLch(v: any): v is OkLch;
+declare function isColourish(v: any): v is Colourish;
+declare namespace hsl_d_exports {
+  export { absolute$1 as absolute, changeLightness$1 as changeLightness, fromCss$3 as fromCss, fromHexString$3 as fromHexString, generateScalar$1 as generateScalar, guard$3 as guard, interpolator$3 as interpolator, parseCssHslFunction, scalar$3 as scalar, toAbsolute$1 as toAbsolute, toCssString$2 as toCssString, toHexString$3 as toHexString, toLibraryRgb, toScalar$3 as toScalar, withOpacity$3 as withOpacity };
+}
+/**
+* Scales the opacity value of an input HSL value
+* ```js
+* withOpacity()
+* ```
+* @param value Colour
+* @param fn Function that calcules opacity based on input scalar value
+*/
+declare function withOpacity$3<T extends Hsl>(value: T, fn: (opacityScalar: number, value: T) => number): T;
+/**
+* Increases or decreases lightness by this percentage, returning new colour
+*
+* Amount to change:
+* 'fixed': a fixed amount
+* 'delta': increase/decrease by this amount
+* 'pdelta': proportion of current value to change by ('percentage delta')
+*
+* ```
+* const colour = { h: 0.5, s: 0.5, l: 0.5, space: `hsl`, unit: `scalar` };
+* changeLightness(colour, { pdelta: 0.1 }); // l: 0.55
+* changeLightness(colour, { delta: 0.1 });  // l: 0.6
+* changeLightness(colour, { fixed: 0.5 });  // l: 0.5
+* ```
+*
+* Keep in mind the numerical value will depend on the unit of `value`. If it's scalar,
+* lightness is 0..1 scale, otherwise 0..100 scale.
+*
+* Use negative values to decrease (does not apply to 'fixed')
+* @param value Hsl colour
+* @param amount Amount to change
+*/
+declare function changeLightness$1(value: Hsl, amount: Partial<{
+  pdelta: number;
+  delta: number;
+  fixed: number;
+}>): Hsl;
+declare function fromHexString$3<T extends ParsingOptions<Hsl>>(hexString: string, scalar: T): T extends {
+  scalar: true;
+} ? HslScalar : HslAbsolute;
+declare function fromCss$3<T extends ParsingOptions<Hsl>>(value: string, options?: T): T extends {
+  scalar: true;
+} ? HslScalar : HslAbsolute;
+declare function toCssString$2(hsl: Hsl): string;
+declare function toHexString$3(hsl: Hsl): string;
+declare function toAbsolute$1(hslOrString: Hsl | Rgb | string): HslAbsolute;
+/**
+* Generates a {@link HslScalar} value.
+*
+* ```js
+* generateScaler(10); // 10deg, default to full saturation, half lightness and full opacity
+*
+* // Generate HSL value from radian angle and 50% saturation
+* generateScalar(`10rad`, 0.5);
+*
+* // Generate from numeric CSS variable
+* generateScalar(`--hue`);
+* ```
+* @param absoluteHslOrVariable Hue angle or CSS variable
+* @param saturation
+* @param lightness
+* @param opacity
+*/
+declare function generateScalar$1(absoluteHslOrVariable: string | number | Angle, saturation?: number, lightness?: number, opacity?: number): HslScalar;
+/**
+* Converts a {@link Hsl} value to scalar units, or parses a colour string
+* and converts it.
+*
+* ```js
+* toScalar({ h: 100, s: 50, l: 100, unit: `absolute` });
+* toScalar(`red`);
+* ```
+* @param colour
+*/
+declare function toScalar$3(colour: Rgb | Hsl | string): HslScalar;
+declare function guard$3(hsl: Hsl): void;
+declare function interpolator$3(a: Hsl | string, b: Hsl | string, direction?: `longer` | `shorter`): (amount: number) => HslScalar;
+/**
+* Creates a HslScalar value from scalar (0..1) values
+* @param hue
+* @param sat
+* @param lightness
+* @param opacity
+*/
+declare function scalar$3(hue?: number, sat?: number, lightness?: number, opacity?: number): HslScalar;
+declare function absolute$1(hue?: number, sat?: number, lightness?: number, opacity?: number): HslAbsolute;
+/**
+* It seems Colorizr can't handle 'deg' units
+* @param value
+*/
+declare function parseCssHslFunction(value: string): Hsl;
+/**
+* Converts a Hsl structure (or CSS string) to Colorizr's RGB format
+* @param hsl HSL colour
+*/
+declare function toLibraryRgb(hsl: Hsl | string): RGB; //#endregion
+//#region src/colour/interpolate.d.ts
+/**
+* Returns a function to interpolate between colours, with results as a structured {@link Colour} object.
+* ```js
+* const i = interpolator([`orange`, `yellow`, `red`]);
+*
+* // Get a random colour on the above spectrum
+* i(Math.random());
+* ```
+*
+* Results will vary depending on the colour space used, play with the options.
+* When using a hue-based colour space, the `hue` option sets the logic for how hue values wrap.
+*
+* ```js
+* interpolator([`orange`, `yellow`, `red`], { space: `hsl`, hue: `longer })
+* ```
+*
+* Example: Draw the interpolation as a spectrum on a canvas, where each pixel is one step
+* ```js
+* let v = 0;
+* let incrementBy = 0.01;
+* while (v <= 1) {
+*  // Get colour at this interpolation point 0..1
+*  const colour = fn(v);
+*  // Convert to a CSS string
+*  ctx.fillStyle = Colour.toCssColour(colour);
+*  // Draw a 1px wide rect, and shuffle along to the next x position
+*  ctx.fillRect(x, y, 1, h);
+*  x += 1;
+*  v += incrementBy;
+* }
+* ```
+* @param colours Colours to interpolate between
+* @param opts Options for interpolation
+* @returns Function that interpolates based on an amount, returning a structured Colour
+*/
+declare function interpolator$2(colours: Colourish[], opts?: Partial<ColourInterpolationOpts>): (amt: number) => Colour;
+/**
+* Returns a CSS `linear-gradient` with stops corresponding to the given list of `colours`.
+* ```js
+* element.style.background = Colour.cssLinearGradient(['red','green','blue']);
+* ```
+* @param colours
+* @returns A 'linear-gradient' string for use in CSS, eg for background.
+*/
+declare function cssLinearGradient(colours: Colourish[]): string;
+/**
+* Returns a function that interpolates between two colours. Returns string colour values.
+* If you want the result as a structured colour, use {@link interpolatorDual} instead.
+*
+* By default takes a shorter direction and uses the OkLCH colourspace.
+* ```js
+* const i = interpolator(`blue`, `red`);
+* i(0.5); // Get the colour at 50%, as a string.
+* ```
+*
+* To work with structured colour values, use one of the space's `interpolate` functions.
+*
+* If you want to create discrete steps, consider {@link createSteps} or {@link scale}.
+*
+* @param colourA First colour
+* @param colourB Second colour
+* @param options Interpolation options. By default uses shorter direction and OkLCH colour space.
+*/
+declare function interpolatorDualToString(colourA: Colourish, colourB: Colourish, options?: Partial<ColourInterpolationOpts>): ((amount: number) => string);
+/**
+* Returns a function that interpolates between two colours. Returns structured colour values.
+* If you want the result as a ready-to-use CSS string, use {@link interpolatorDualToString} instead.
+*
+* By default takes a shorter direction and uses the OkLCH colourspace.
+* ```js
+* const i = interpolator(`blue`, `red`);
+* i(0.5); // Get the colour at 50%, as a Colour structure.
+* ```
+*
+* If you want to create discrete steps, consider {@link createSteps} or {@link scale}.
+* @param colourA First colour
+* @param colourB Second colour
+* @param options Interpolation options. By default uses shorter direction and OkLCH colour space.
+* @returns Function that interpolates between two colours, returning a structured Colour
+*/
+declare function interpolatorDual(colourA: Colourish, colourB: Colourish, options?: Partial<ColourInterpolationOpts>): (amount: number) => Colour;
+/**
+* Produces a stepped scale of colours.
+*
+* Builds off {@link createSteps} which can only step between two colours.
+*
+* ```js
+* // A scale of from red to green, with three colours in-between
+* const steps = Colour.scale([ `red`, `green` ], { stepsBetween: 3 });
+* for (const step of steps) {
+*  // A CSS colour string
+* }
+* ```
+*
+* {@link cssLinearGradient} can produce a smooth gradient in CSS on the basis
+* of the stepped colours.
+* @param colours
+* @param opts
+* @returns Array of colours in string form
+*/
+declare function scale(colours: Colourish[], opts?: Partial<ColourStepOpts>): string[];
+type CreateStepsOptions = Partial<{
+  space: ColourSpaces;
+  steps: number;
+  direction: `longer` | `shorter`;
+  exclusive: boolean;
+}>;
+/**
+* Creates discrete colour steps between two colours.
+*
+* Use {@link scale} to create steps between any number of colours.
+*
+* Start and end colours are included (and counted as a step) unless `exclusive` is set to _true_
+*
+* ```js
+* // Array of five HslScalar
+* createSteps(`red`,`blue`, { steps: 5 });
+* ```
+*
+* Defaults to the oklch colour space, 5 steps and non-exclusive.
+* @param a Start colour
+* @param b End colour
+* @param options
+* @returns Colour steps
+*/
+declare function createSteps<T extends CreateStepsOptions>(a: Colourish | string, b: Colourish, options: T): T extends {
+  space: `oklch`;
+} ? OkLchScalar[] : T extends {
+  space: `srgb`;
+} ? RgbScalar[] : T extends {
+  space: `hsl`;
+} ? HslScalar[] : OkLchScalar[]; //#endregion
+//#region src/colour/math.d.ts
+declare function multiplyOpacity<T extends Colourish>(colourish: T, amount: number): T extends string ? string : T extends Hsl ? Hsl : T extends OkLch ? OkLch : T extends Rgb ? Rgb : never;
+/**
+* Does a computation with the opacity of a colour, returning colour string
+* @param colourish Colour
+* @param fn Function that takes original opacity as input and returns output opacity
+*/
+/**
+* Does a computation with the opacity of a colour in a HSL structure
+* @param hsl Colour
+* @param fn Function that takes original opacity as input and returns output opacity
+*/
+/**
+* Does a computation with the opacity of a colour in a RGB structure
+* @param colourish Colour
+* @param fn Function that takes original opacity as input and returns output opacity
+*/
+declare function withOpacity$2<T extends Colourish>(colourish: T, fn: (scalarOpacity: number) => number): T extends string ? string : T extends Hsl ? Hsl : T extends OkLch ? OkLch : T extends Rgb ? Rgb : never;
+declare function setOpacity<T extends Colourish>(colourish: T, amount: number): T extends string ? string : T extends Hsl ? Hsl : T extends OkLch ? OkLch : T extends Rgb ? Rgb : never;
+declare namespace oklch_d_exports {
+  export { OKLCH_CHROMA_MAX, absolute, fromCss$2 as fromCss, fromHexString$2 as fromHexString, fromLibrary, generateScalar, guard$2 as guard, interpolator$1 as interpolator, scalar$2 as scalar, toAbsolute, toCssString$1 as toCssString, toHexString$2 as toHexString, toScalar$2 as toScalar, withOpacity$1 as withOpacity };
+}
+declare const OKLCH_CHROMA_MAX = .4;
+declare function guard$2(lch: OkLch): void;
+/**
+* Coverts from the Colorizr library
+* Tests ranges:
+* l: 0..1
+* c: 0..1
+* h: 0..360
+* alpha: 0..1
+*
+* Default option: { scalar: true }
+* @param lch LCH value
+* @param parsingOptions Options for parsing
+*/
+declare function fromLibrary<T extends ParsingOptions<OkLch>>(lch: LCH, parsingOptions: T): T extends {
+  scalar: true;
+} ? OkLchScalar : OkLchAbsolute;
+/**
+* Parse a HEX-formatted colour into OkLch structured format
+* @param hexString
+* @param options
+*/
+declare function fromHexString$2(hexString: string, options?: ParsingOptions<OkLch>): OkLch;
+/**
+* Converts from some CSS-representation of colour to a structured OkLch format.
+*
+* ```js
+* fromCss(`yellow`);
+* fromCss(`rgb(100,200,90)`);
+* fromCss(`#ff00ff`);
+* ```
+*
+* By default returns a {@link OkLchScalar} (relative) representation. Use the flag 'scalar:true' to get back
+* {@link OkLchAbsolute}.
+* @param value
+* @param options
+*/
+declare function fromCss$2<T extends ParsingOptions<OkLch>>(value: string, options: T): T extends {
+  scalar: true;
+} ? OkLchScalar : OkLchAbsolute;
+/**
+* Returns a string or {@link OkLch} value to absolute form.
+*
+* This means ranges are:
+* lightness: 0..1
+* chroma: 0...CHROMA_MAX (0.4)
+* hue: 0..360
+* @param lchOrString
+*/
+declare function toAbsolute(lchOrString: OkLch | string): OkLchAbsolute;
+declare function toScalar$2(lchOrString: OkLch | string): OkLchScalar;
+/**
+* Returns the colour as a CSS colour string: `oklch(l c h / opacity)`.
+*
+* @param lch Colour
+* @param precision Set precision of numbers, defaults to 3
+* @returns CSS colour string
+*/
+declare function toCssString$1(lch: OkLch, precision?: number): string;
+declare function toHexString$2(lch: OkLch): string;
+declare function generateScalar(absoluteHslOrVariable: string | number | Angle, chroma?: number, lightness?: number, opacity?: number): OkLchScalar;
+/**
+* Scales the opacity value of an input Oklch value
+* ```js
+* withOpacity()
+* ```
+* @param value
+* @param fn
+*/
+declare function withOpacity$1<T extends OkLch>(value: T, fn: (opacityScalar: number, value: T) => number): T;
+declare function interpolator$1(a: OkLch | string, b: OkLch | string, direction?: `longer` | `shorter`): (amount: number) => OkLchScalar;
+declare function scalar$2(lightness?: number, chroma?: number, hue?: number, opacity?: number): OkLchScalar;
+/**
+* Create an LCH colour using absolute hue
+* @param l Lightness 0..1
+* @param c Chroma 0..4
+* @param h Hue 0..360
+* @param opacity
+*/
+declare function absolute(l: number, c: number, h: number, opacity?: number): OkLchAbsolute;
+declare namespace srgb_d_exports {
+  export { changeLightness, eightBit$1 as eightBit, fromCss$1 as fromCss, fromHexString$1 as fromHexString, guard$1 as guard, interpolator, lightness, parseCssRgbFunction, scalar$1 as scalar, to8bit$1 as to8bit, toCssString, toHexString$1 as toHexString, toLibraryHsl, toScalar$1 as toScalar, withOpacity };
+}
+declare function withOpacity<T extends Rgb>(value: T, fn: (opacityScalar: number, value: T) => number): T;
+declare function fromHexString$1<T extends boolean>(hexString: string, scalar: T): T extends true ? RgbScalar : Rgb8Bit;
+declare function fromCss$1<T extends ParsingOptions<Rgb>>(value: string, options: T): T extends {
+  scalar: true;
+} ? RgbScalar : Rgb8Bit;
+declare function toHexString$1(rgb: Rgb): string;
+declare function toCssString(rgb: Rgb): string;
+declare function to8bit$1(rgbOrString: Rgb | string): Rgb8Bit;
+declare function toScalar$1(rgbOrString: Rgb | Hsl | string): RgbScalar;
+declare function guard$1(rgb: Rgb): void;
+/**
+* Sets the lightness value.
+*
+* Amount to change:
+* 'fixed': a fixed amount
+* 'delta': increase/decrease by this amount
+* 'pdelta': proportion of current value to change by ('percentage delta')
+*
+* Use negative values to decrease
+* @param rgb Colour
+* @param amount Amount to change
+*/
+declare function changeLightness(rgb: Rgb, amount: Partial<{
+  pdelta: number;
+  delta: number;
+  fixed: number;
+}>): Rgb;
+/**
+* Returns a lightness value (0..1) for an RGB input
+*
+* Calculates lightness by converting to Oklab and using the 'L' value
+* @param rgb
+*/
+declare function lightness(rgb: Rgb): number;
+/**
+* Creates a Rgb8Bit value from 8bit (0..255) values
+* @param red
+* @param green
+* @param blue
+* @param opacity
+*/
+declare function eightBit$1(red?: number, green?: number, blue?: number, opacity?: number): Rgb8Bit;
+/**
+* Creates a RgbScalar value from scalar (0..1) values
+* @param red
+* @param green
+* @param blue
+* @param opacity
+*/
+declare function scalar$1(red?: number, green?: number, blue?: number, opacity?: number): RgbScalar;
+/**
+* It seems Colorizr can't handle % values properly :'(
+* @param value
+*/
+declare function parseCssRgbFunction(value: string): Rgb;
+/**
+* Interpolates colours in Srgb space. Probably
+* really ugly, use OkLch space isntead.
+*
+* ```js
+* const i = interpolator(`red`, `blue`);
+* i(0.5); // Get 50% between these colours
+* ```
+* @param colourA
+* @param colourB
+*/
+declare function interpolator(colourA: Rgb | string, colourB: Rgb | string): (amount: number) => RgbScalar;
+/**
+* Converts a Rgb structure (or CSS string) to Colorizr's HSL format
+* @param rgb
+*/
+declare function toLibraryHsl(rgb: Rgb | string): HSL; //#endregion
+//#region src/colour/to-integer.d.ts
+/**
+* Encode 8-bit RGB values into a 24-bit value (0...16_777_215)
+* 
+* Assumes RGB values are within 0..255 range
+* @param rgb 
+* @returns 
+*/
+declare function encodeRgbTo24Bit(rgb: Rgb8Bit | RgbBase): number;
+/**
+* Decode a 24-bit number (0...16_777_215) into 8-bit RGB
+* @param colour 
+* @returns 
+*/
+declare function decodeRgbFrom24Bit(colour: number): Rgb8Bit;
+/**
+* Encodes 8-bit RGB value into 16-bit RGB565 (0..65_535)
+* 5-bit are used for R & B channels, 6 bits for G
+* 
+* Read more: https://rgbcolorpicker.com/565
+* @param rgb 
+* @returns 
+*/
+declare function encodeRgbTo16Bit565(rgb: Rgb8Bit | RgbBase): number;
+/**
+* Decodes 8-bit RGB value from a 16-bit RGB565 value (0...65_535)
+* Read more: https://rgbcolorpicker.com/565
+* @param colour 
+* @returns 
+*/
+declare function decodeRgbFrom16Bit565(colour: number): Rgb8Bit;
+declare namespace ycbcr_d_exports {
+  export { eightBit, fromCss, fromHexString, fromSrgTo8bit, guard, scalar, to8bit, toHexString, toScalar, toSrgb8bit };
+}
+/**
+* Creates a YCbCr8bit value from 8bit (0..255) values
+* @param y Luma 0..255
+* @param cb Chroma blue 0..255
+* @param cr Chroma red 0..255
+* @param opacity 0..255
+* @returns YCbCr8bit
+*/
+declare function eightBit(y?: number, cb?: number, cr?: number, opacity?: number): YCbCr8bit;
+/**
+* Creates a YCbCr8bit value from scalar (0..1) values
+* @param y Luma 0..1
+* @param cb Chroma blue 0..1
+* @param cr Chroma red 0..1
+* @param opacity 0..1
+* @returns YCbCrScalar
+*/
+declare function scalar(y?: number, cb?: number, cr?: number, opacity?: number): YCbCrScalar;
+/**
+* Converts from scalar or 8bit RGB to YCbCr8bit
+* @param rgb
+* @returns
+*/
+declare function fromSrgTo8bit(rgb: Rgb): YCbCr8bit;
+declare function toSrgb8bit(ycbcr: YCbCr): Rgb8Bit;
+/**
+* Returns a YCbCr8bit format from either scalar or 8bit.
+* If the input is already 8bit, it is returned as-is.
+* @param ycbcr 8bit or scalar YCbCr value
+* @returns YCbCr8bit
+*/
+declare function to8bit(ycbcr: YCbCr): YCbCr8bit;
+declare function fromHexString<T extends ParsingOptions<YCbCr>>(hexString: string, scalar: T): T extends {
+  scalar: true;
+} ? YCbCrScalar : YCbCr8bit;
+declare function fromCss<T extends ParsingOptions<YCbCr>>(value: string, options: T): T extends {
+  scalar: true;
+} ? YCbCrScalar : YCbCr8bit;
+declare function toScalar(colour: YCbCr | Rgb | string): YCbCrScalar;
+declare function guard(rgb: YCbCr): void;
+/**
+* Converts a YCbCr colour to a RGB hex string.
+* @param ycbcr
+* @returns
+*/
+declare function toHexString(ycbcr: YCbCr): string;
+declare namespace index_d_exports {
+  export { Colour, ColourInterpolationOpts, ColourInterpolator, ColourSpaces, ColourStepOpts, Colourish, ConvertDestinations, CreateStepsOptions, CssColourNames, Hsl, HslAbsolute, HslBase, HslScalar, hsl_d_exports as HslSpace, LchBase, OkLch, OkLchAbsolute, OkLchBase, OkLchScalar, oklch_d_exports as OklchSpace, ParsingOptions, Rgb, Rgb8Bit, RgbBase, RgbScalar, srgb_d_exports as SrgbSpace, YCbCr, YCbCr8bit, YCbCrBase, YCbCrScalar, ycbcr_d_exports as YCbCrSpace, convert, convertScalar, convertToString, createSteps, cssDefinedHexColours, cssLinearGradient, decodeRgbFrom16Bit565, decodeRgbFrom24Bit, encodeRgbTo16Bit565, encodeRgbTo24Bit, fromCssColour, goldenAngleColour, guard$4 as guard, interpolator$2 as interpolator, interpolatorDual, interpolatorDualToString, isColourish, isHsl, isOkLch, isRgb, multiplyOpacity, randomHue, resolveCss, rgbToHsl, scale, setOpacity, toColour, toCssColour, toHexColour, toLibraryColour, toStringFirst, tryParseObjectToHsl, tryParseObjectToRgb, withOpacity$2 as withOpacity };
+} //#endregion
+//#endregion
+//#region src/colour-picker/colour-picker.d.ts
+declare class ColourPicker extends LitElement {
+  l: number;
+  c: number;
+  h: number;
+  a: number;
+  hidePreview: boolean;
+  hideH: boolean;
+  hideL: boolean;
+  hideC: boolean;
+  showA: boolean;
+  horizontal: boolean;
+  slidersVertical: boolean;
+  hideTooltips: boolean;
+  private _valueAttr;
+  rangeLAttr: string | null;
+  rangeCAttr: string | null;
+  rangeHAttr: string | null;
+  rangeAAttr: string | null;
+  private _ranges;
+  _sliderL: HTMLElement;
+  _sliderC: HTMLElement;
+  _sliderH: HTMLElement;
+  _sliderA: HTMLElement;
+  _previewEl: HTMLElement;
+  private _defaultL;
+  private _defaultC;
+  private _defaultH;
+  private _defaultA;
+  private readonly _userInitiated;
+  get value(): string;
+  set value(colourString: string);
+  /**
+   * Set the colour from any ixfx-compatible format (CSS string, OkLch object,
+   * HSL object, etc.). Also updates the double-click reset defaults for all
+   * sliders.
+   */
+  setColour(colour: index_d_exports.Colourish): void;
+  get rangeL(): Range;
+  set rangeL(range: RangeInput);
+  get rangeC(): Range;
+  set rangeC(range: RangeInput);
+  get rangeH(): Range;
+  set rangeH(range: RangeInput);
+  get rangeA(): Range;
+  set rangeA(range: RangeInput);
+  setRangeL(range: RangeInput): void;
+  setRangeC(range: RangeInput): void;
+  setRangeH(range: RangeInput): void;
+  setRangeA(range: RangeInput): void;
+  willUpdate(changedProperties: PropertyValues): void;
+  private _applyRangeInput;
+  private _coerceRangeInput;
+  private _setRangeFromAttribute;
+  private _setRange;
+  private _getRange;
+  private _parseRangeString;
+  private _normalizeRange;
+  private _clampToRange;
+  render(): _$lit.TemplateResult<1>;
+  firstUpdated(changedProperties: PropertyValues): void;
+  updated(changedProperties: PropertyValues): void;
+  _updateGradients(): void;
+  _onInput: (e: Event, channel: `l` | `c` | `h` | `a`) => void;
+  _onChange: (e: Event, channel: `l` | `c` | `h` | `a`) => void;
+  _dispatchInput(): void;
+  _dispatchChange(): void;
+  static styles: CSSResultGroup;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-colour-picker': ColourPicker;
+  }
+} //# sourceMappingURL=colour-picker.d.ts.map
+//#endregion
+//#region src/colour-picker/colour-picker-popup.d.ts
+declare const PICKER_SIZES: {
+  readonly small: {
+    readonly width: 130;
+    readonly height: 100;
+  };
+  readonly medium: {
+    readonly width: 100;
+    readonly height: 155;
+  };
+  readonly large: {
+    readonly width: 200;
+    readonly height: 180;
+  };
+  readonly huge: {
+    readonly width: 290;
+    readonly height: 240;
+  };
+};
+type PickerSize = keyof typeof PICKER_SIZES;
+declare class ColourPickerPopup extends LitElement {
+  mode: `fluid` | `confirm`;
+  l: number;
+  c: number;
+  h: number;
+  a: number;
+  showPreview: boolean;
+  hideH: boolean;
+  hideL: boolean;
+  hideC: boolean;
+  showA: boolean;
+  horizontal: boolean;
+  size: PickerSize;
+  private _isOpen;
+  private _everOpened;
+  _popupEl: HTMLElement;
+  _pickerEl: ColourPicker;
+  private readonly _uid;
+  private readonly _anchorName;
+  private readonly _popupId;
+  private _pendingL;
+  private _pendingC;
+  private _pendingH;
+  private _pendingA;
+  private _savedL;
+  private _savedC;
+  private _savedH;
+  private _savedA;
+  private _pendingConfirmed;
+  constructor();
+  get value(): string;
+  private get _innerHidePreview();
+  private get _pickerDimensions();
+  setColour(colour: index_d_exports.Colourish): void;
+  firstUpdated(changedProperties: PropertyValues): void;
+  updated(changedProperties: PropertyValues): void;
+  private _applyAnchorPositioning;
+  private _updateSwatchBackground;
+  private _onPopoverToggle;
+  private _onPickerInput;
+  private _onPickerChange;
+  private _onConfirm;
+  private _onSwatchClick;
+  private _dispatchInput;
+  private _dispatchChange;
+  render(): _$lit.TemplateResult<1>;
+  static styles: CSSResultGroup;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-colour-picker-popup': ColourPickerPopup;
+  }
+}
+//#endregion
+export { ColourPickerInputEvent as a, ColourPickerEventDetail as i, ColourPicker as n, OklchValue as o, ColourPickerChangeEvent as r, ColourPickerPopup as t };
+//# sourceMappingURL=index-CpbBI3n7.d.ts.map