igniteui-webcomponents 7.3.0-beta.0 → 7.3.0

package/components/color-picker/model.js

@@ -0,0 +1,174 @@
+import { clamp } from '#internals/utils/math.js';
+import { isValidColor, normalizeColor, parseColor } from './common.js';
+import { converter } from './converters.js';
+function makeCanvasContext() {
+    let context;
+    return () => {
+        if (context)
+            return context;
+        try {
+            context = new OffscreenCanvas(0, 0).getContext('2d');
+            return context;
+        }
+        catch { }
+        return null;
+    };
+}
+export const getContext = makeCanvasContext();
+export class ColorModel {
+    static default() {
+        return new ColorModel([0, 0, 0], 1);
+    }
+    static empty() {
+        const color = new ColorModel([255, 255, 255], 1);
+        color._empty = true;
+        return color;
+    }
+    static parse(color) {
+        const ctx = getContext();
+        const normalized = normalizeColor(color);
+        if (!isValidColor(normalized, ctx)) {
+            return ColorModel.empty();
+        }
+        const parsed = parseColor(normalized, ctx);
+        return new ColorModel(parsed.value, parsed.alpha);
+    }
+    static fromHSL(h, s, l, alpha = 1) {
+        return new ColorModel(converter.hsl.rgb([h, s, l]), alpha);
+    }
+    static fromHSV(h, s, v, alpha = 1) {
+        return new ColorModel(converter.hsv.rgb([h, s, v]), alpha);
+    }
+    constructor(value, alpha = 1) {
+        this._empty = false;
+        this._rgb = [value[0], value[1], value[2]];
+        this._hsl = converter.rgb.hsl(this._rgb);
+        this._hsv = converter.rgb.hsv(this._rgb);
+        this._alpha = clamp(alpha, 0, 1);
+    }
+    get isEmpty() {
+        return this._empty;
+    }
+    _syncFrom(space) {
+        switch (space) {
+            case 'rgb':
+                this._hsl = converter.rgb.hsl(this._rgb);
+                this._hsv = converter.rgb.hsv(this._rgb);
+                break;
+            case 'hsl':
+                this._rgb = converter.hsl.rgb(this._hsl);
+                this._hsv = converter.hsl.hsv(this._hsl);
+                break;
+            case 'hsv':
+                this._rgb = converter.hsv.rgb(this._hsv);
+                this._hsl = converter.hsv.hsl(this._hsv);
+                break;
+        }
+    }
+    _setChannel(space, index, value, max) {
+        this._empty = false;
+        const channels = space === 'rgb' ? this._rgb : space === 'hsl' ? this._hsl : this._hsv;
+        channels[index] = clamp(value, 0, max);
+        this._syncFrom(space);
+    }
+    get r() {
+        return this._rgb[0];
+    }
+    set r(value) {
+        this._setChannel('rgb', 0, value, 255);
+    }
+    get g() {
+        return this._rgb[1];
+    }
+    set g(value) {
+        this._setChannel('rgb', 1, value, 255);
+    }
+    get b() {
+        return this._rgb[2];
+    }
+    set b(value) {
+        this._setChannel('rgb', 2, value, 255);
+    }
+    get h() {
+        return this._hsl[0];
+    }
+    set h(value) {
+        this._setChannel('hsl', 0, value, 360);
+    }
+    get s() {
+        return this._hsl[1];
+    }
+    set s(value) {
+        this._setChannel('hsl', 1, value, 100);
+    }
+    get l() {
+        return this._hsl[2];
+    }
+    set l(value) {
+        this._setChannel('hsl', 2, value, 100);
+    }
+    get v() {
+        return this._hsv[2];
+    }
+    set v(value) {
+        this._setChannel('hsv', 2, value, 100);
+    }
+    get alpha() {
+        return this._alpha;
+    }
+    set alpha(value) {
+        this._empty = false;
+        this._alpha = clamp(value, 0, 1);
+    }
+    setSaturationAndValue(saturation, value) {
+        this._empty = false;
+        this._hsv[1] = clamp(saturation, 0, 100);
+        this._hsv[2] = clamp(value, 0, 100);
+        this._syncFrom('hsv');
+    }
+    asString(format, forceAlpha = false) {
+        if (this._empty) {
+            return '';
+        }
+        const alpha = this._alpha < 1 || forceAlpha ? this._alpha : null;
+        switch (format) {
+            case 'hex': {
+                const hex = converter.rgb.hex(this._rgb);
+                const suffix = alpha === null
+                    ? ''
+                    : Math.round(alpha * 255)
+                        .toString(16)
+                        .padStart(2, '0');
+                return `#${hex}${suffix}`;
+            }
+            case 'rgb': {
+                const [r, g, b] = this._rgb.map(Math.round);
+                return `rgb(${r} ${g} ${b}${alpha === null ? '' : ` / ${alpha}`})`;
+            }
+            case 'hsl': {
+                const [h, s, l] = this._hsl.map(Math.round);
+                return `hsl(${h} ${s}% ${l}%${alpha === null ? '' : ` / ${alpha}`})`;
+            }
+        }
+    }
+    clone() {
+        const color = new ColorModel(this._rgb, this._alpha);
+        color._empty = this._empty;
+        return color;
+    }
+    equals(other) {
+        return (this._empty === other._empty &&
+            this._alpha === other._alpha &&
+            this._rgb.every((channel, i) => channel === other._rgb[i]));
+    }
+    toRGB() {
+        return [...this._rgb];
+    }
+    toHSL() {
+        return [...this._hsl];
+    }
+    toHSV() {
+        return [...this._hsv];
+    }
+}
+//# sourceMappingURL=model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/color-picker/model.ts"],"names":[],"mappings":"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","sourcesContent":["import { clamp } from '#internals/utils/math.js';\nimport type { ColorFormat } from '../types.js';\nimport { isValidColor, normalizeColor, parseColor } from './common.js';\nimport { converter, type HSL, type HSV, type RGB } from './converters.js';\n\nexport type { ColorFormat };\n\n/** The color space a channel write is expressed in. */\ntype ColorSpace = 'rgb' | 'hsl' | 'hsv';\ntype Channel = 0 | 1 | 2;\n\nfunction makeCanvasContext() {\n  let context: OffscreenCanvasRenderingContext2D | null;\n\n  return () => {\n    if (context) return context;\n\n    try {\n      context = new OffscreenCanvas(0, 0).getContext('2d');\n      return context;\n    } catch {}\n    return null;\n  };\n}\nexport const getContext = makeCanvasContext();\n\n/**\n * Represents a color with support for RGB, HSL, and HSV color spaces.\n * Automatically syncs between color spaces when properties are modified.\n *\n * @example\n * ```ts\n * // Create from RGB\n * const color = new ColorModel([255, 0, 0], 0.5);\n *\n * // Parse from string\n * const parsed = ColorModel.parse('#ff0000');\n *\n * // Modify and convert\n * color.h = 120;\n * console.log(color.asString('hsl')); // 'hsla(120, 100%, 50%, 0.5)'\n * ```\n */\nexport class ColorModel {\n  private _rgb: RGB;\n  private _hsl: HSL;\n  private _hsv: HSV;\n  private _alpha: number;\n  private _empty = false;\n\n  /** Creates a black color with full opacity. */\n  public static default(): ColorModel {\n    return new ColorModel([0, 0, 0], 1);\n  }\n\n  /**\n   * Creates an empty color, representing a missing/undefined color value.\n   * An empty color serializes to an empty string and is considered \"empty\"\n   * until any of its channels are modified.\n   *\n   * Backed by white rather than black: an empty color still has to be drawn,\n   * and white is HSV `[0, 0, 100]` - the origin of the saturation/value plane,\n   * where a picker with nothing selected should start. Black would put the\n   * marker in the opposite corner, on a color the user never chose.\n   */\n  public static empty(): ColorModel {\n    const color = new ColorModel([255, 255, 255], 1);\n    color._empty = true;\n    return color;\n  }\n\n  /**\n   * Parses a color string and creates a ColorModel instance.\n   * Supports hex, rgb, rgba, hsl, hsla, and named color formats.\n   *\n   * Empty, whitespace-only, or otherwise invalid strings produce an empty\n   * ColorModel instead of a stale/incorrect color.\n   */\n  public static parse(color: string): ColorModel {\n    const ctx = getContext();\n    // Normalized up front - validating the raw string would reject a hash-less\n    // hex before `parseColor` ever got the chance to restore its `#`.\n    const normalized = normalizeColor(color);\n\n    if (!isValidColor(normalized, ctx)) {\n      return ColorModel.empty();\n    }\n\n    const parsed = parseColor(normalized, ctx);\n    return new ColorModel(parsed.value, parsed.alpha);\n  }\n\n  /** Creates a ColorModel from hue (0-360), saturation and lightness (0-100). */\n  public static fromHSL(\n    h: number,\n    s: number,\n    l: number,\n    alpha = 1\n  ): ColorModel {\n    return new ColorModel(converter.hsl.rgb([h, s, l]), alpha);\n  }\n\n  /** Creates a ColorModel from hue (0-360), saturation and value (0-100). */\n  public static fromHSV(\n    h: number,\n    s: number,\n    v: number,\n    alpha = 1\n  ): ColorModel {\n    return new ColorModel(converter.hsv.rgb([h, s, v]), alpha);\n  }\n\n  /**\n   * @param value - RGB values as [r, g, b] tuple (0-255 each)\n   * @param alpha - Alpha channel value (0-1)\n   */\n  constructor(value: RGB, alpha = 1) {\n    // Copied to prevent external mutations.\n    this._rgb = [value[0], value[1], value[2]];\n    this._hsl = converter.rgb.hsl(this._rgb);\n    this._hsv = converter.rgb.hsv(this._rgb);\n    this._alpha = clamp(alpha, 0, 1);\n  }\n\n  /** Whether the color represents a missing/undefined value. */\n  public get isEmpty(): boolean {\n    return this._empty;\n  }\n\n  /** Rebuilds the two color spaces that were not the one just written to. */\n  private _syncFrom(space: ColorSpace): void {\n    switch (space) {\n      case 'rgb':\n        this._hsl = converter.rgb.hsl(this._rgb);\n        this._hsv = converter.rgb.hsv(this._rgb);\n        break;\n      case 'hsl':\n        this._rgb = converter.hsl.rgb(this._hsl);\n        this._hsv = converter.hsl.hsv(this._hsl);\n        break;\n      case 'hsv':\n        this._rgb = converter.hsv.rgb(this._hsv);\n        this._hsl = converter.hsv.hsl(this._hsv);\n        break;\n    }\n  }\n\n  /**\n   * Writes a single channel and brings the rest of the model back in sync.\n   * Every channel setter goes through here, so no space is ever left stale.\n   */\n  private _setChannel(\n    space: ColorSpace,\n    index: Channel,\n    value: number,\n    max: number\n  ): void {\n    this._empty = false;\n\n    // Safe to hold onto: `_syncFrom` only replaces the *other* two tuples.\n    const channels =\n      space === 'rgb' ? this._rgb : space === 'hsl' ? this._hsl : this._hsv;\n\n    channels[index] = clamp(value, 0, max);\n    this._syncFrom(space);\n  }\n\n  /** Red component (0-255) */\n  public get r(): number {\n    return this._rgb[0];\n  }\n\n  public set r(value: number) {\n    this._setChannel('rgb', 0, value, 255);\n  }\n\n  /** Green component (0-255) */\n  public get g(): number {\n    return this._rgb[1];\n  }\n\n  public set g(value: number) {\n    this._setChannel('rgb', 1, value, 255);\n  }\n\n  /** Blue component (0-255) */\n  public get b(): number {\n    return this._rgb[2];\n  }\n\n  public set b(value: number) {\n    this._setChannel('rgb', 2, value, 255);\n  }\n\n  /** Hue component (0-360) */\n  public get h(): number {\n    return this._hsl[0];\n  }\n\n  public set h(value: number) {\n    this._setChannel('hsl', 0, value, 360);\n  }\n\n  /** Saturation component from HSL (0-100) */\n  public get s(): number {\n    return this._hsl[1];\n  }\n\n  public set s(value: number) {\n    this._setChannel('hsl', 1, value, 100);\n  }\n\n  /** Lightness component (0-100) */\n  public get l(): number {\n    return this._hsl[2];\n  }\n\n  public set l(value: number) {\n    this._setChannel('hsl', 2, value, 100);\n  }\n\n  /** Value component from HSV (0-100) */\n  public get v(): number {\n    return this._hsv[2];\n  }\n\n  public set v(value: number) {\n    this._setChannel('hsv', 2, value, 100);\n  }\n\n  /** Alpha/opacity channel (0-1) */\n  public get alpha(): number {\n    return this._alpha;\n  }\n\n  public set alpha(value: number) {\n    this._empty = false;\n    this._alpha = clamp(value, 0, 1);\n  }\n\n  /**\n   * Sets the HSV saturation and value in a single atomic update, preserving\n   * the current hue and alpha. Intended for the 2D saturation/value picker\n   * area, where both components change together and setting them through the\n   * individual `s` (HSL) and `v` (HSV) setters would be both incorrect\n   * (mixing color spaces) and order-dependent.\n   *\n   * @param saturation - HSV saturation (0-100)\n   * @param value - HSV value (0-100)\n   */\n  public setSaturationAndValue(saturation: number, value: number): void {\n    this._empty = false;\n    this._hsv[1] = clamp(saturation, 0, 100);\n    this._hsv[2] = clamp(value, 0, 100);\n    this._syncFrom('hsv');\n  }\n\n  /**\n   * Converts the color to a CSS color string. An empty color renders as an\n   * empty string.\n   *\n   * @param format - The output format ('hex', 'rgb', or 'hsl')\n   * @param forceAlpha - Whether to always include the alpha channel\n   */\n  public asString(format: ColorFormat, forceAlpha = false): string {\n    if (this._empty) {\n      return '';\n    }\n\n    const alpha = this._alpha < 1 || forceAlpha ? this._alpha : null;\n\n    switch (format) {\n      case 'hex': {\n        const hex = converter.rgb.hex(this._rgb);\n        const suffix =\n          alpha === null\n            ? ''\n            : Math.round(alpha * 255)\n                .toString(16)\n                .padStart(2, '0');\n        return `#${hex}${suffix}`;\n      }\n      case 'rgb': {\n        const [r, g, b] = this._rgb.map(Math.round);\n        return `rgb(${r} ${g} ${b}${alpha === null ? '' : ` / ${alpha}`})`;\n      }\n      case 'hsl': {\n        const [h, s, l] = this._hsl.map(Math.round);\n        return `hsl(${h} ${s}% ${l}%${alpha === null ? '' : ` / ${alpha}`})`;\n      }\n    }\n  }\n\n  /** Creates a copy of this color model. */\n  public clone(): ColorModel {\n    const color = new ColorModel(this._rgb, this._alpha);\n    color._empty = this._empty;\n    return color;\n  }\n\n  /** Whether this color has the same channels and emptiness as `other`. */\n  public equals(other: ColorModel): boolean {\n    return (\n      this._empty === other._empty &&\n      this._alpha === other._alpha &&\n      this._rgb.every((channel, i) => channel === other._rgb[i])\n    );\n  }\n\n  /** Returns the RGB values as a tuple. */\n  public toRGB(): RGB {\n    return [...this._rgb];\n  }\n\n  /** Returns the HSL values as a tuple. */\n  public toHSL(): HSL {\n    return [...this._hsl];\n  }\n\n  /** Returns the HSV values as a tuple. */\n  public toHSV(): HSV {\n    return [...this._hsv];\n  }\n}\n"]}

package/components/color-picker/picker-canvas.d.ts

@@ -0,0 +1,95 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { AbstractConstructor } from '#internals/mixins/constructor.js';
+export interface IgcPickerCanvasEventMap {
+    /**
+     * Emitted when the color is picked in the canvas. Does not bubble.
+     */
+    igcColorPicked: CustomEvent<PickerCanvasEventDetail>;
+}
+export type PickerCanvasEventDetail = {
+    x: number;
+    y: number;
+};
+declare const IgcPickerCanvasComponent_base: import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcPickerCanvasEventMap>> & AbstractConstructor<LitElement>;
+/**
+ * The saturation/value plane of {@link IgcColorPickerComponent} and the marker
+ * that moves across it.
+ *
+ * An internal building block of `igc-color-picker` - it is registered so the
+ * picker can render it, but it is not part of the public component surface and
+ * is not exported from the package entry point.
+ *
+ * @element igc-picker-canvas
+ *
+ * @fires igcColorPicked - Emitted when a color is picked on the canvas. Does not bubble.
+ *
+ * @csspart marker - The draggable marker indicating the picked saturation/value.
+ * @csspart dragging - Present on the marker while it is being dragged.
+ */
+export default class IgcPickerCanvasComponent extends IgcPickerCanvasComponent_base {
+    static readonly tagName = "igc-picker-canvas";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    private readonly _marker?;
+    /** Geometry captured for the duration of a pointer drag. */
+    private _dragGeometry?;
+    /** Whether a pointer drag is currently in progress. */
+    private _dragging;
+    currentColor: string;
+    /**
+     * The color the marker is filled with.
+     *
+     * Distinct from `currentColor`: that one is the pure hue the saturation/value
+     * plane is built from, while this is the color actually picked out of it.
+     */
+    markerColor: string;
+    x: number;
+    y: number;
+    /**
+     * The HSV saturation the marker currently sits at (0-100).
+     *
+     * The canvas positions the marker in pixels and has no notion of the color
+     * space behind it, so the owning picker feeds the saturation/value pair back
+     * in purely to give the marker an announceable value.
+     */
+    saturation: number;
+    /**
+     * The HSV value the marker currently sits at (0-100).
+     *
+     * Named for the B of HSB rather than the V of HSV - on a custom element a
+     * bare `value` reads as a form value, which this is not.
+     */
+    brightness: number;
+    /** The accessible name of the marker. */
+    markerLabel: string;
+    constructor();
+    protected updated(properties: PropertyValues<this>): void;
+    /**
+     * The canvas box and half-marker offsets every interaction measures against.
+     *
+     * Both reads force a layout, so a drag takes this once on pointerdown rather
+     * than on each of the frames it spans.
+     */
+    private _measure;
+    /**
+     * Clamps the marker inside the canvas and reports the position it settled on
+     * as saturation/value percentages.
+     */
+    private _commitPosition;
+    private _onArrowKey;
+    private _move;
+    private _handlePointerDown;
+    private _handleLostPointerCapture;
+    private _handlePointerMove;
+    getMarkerDimensions(): {
+        width: number;
+        height: number;
+    };
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-picker-canvas': IgcPickerCanvasComponent;
+    }
+}
+export {};

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

@@ -0,0 +1,154 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, } from '#internals/controllers/key-bindings.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { partMap } from '#internals/part-map.js';
+import { addSafeEventListener } from '#internals/utils/events.js';
+import { asPercent, clamp } from '#internals/utils/math.js';
+import { styles } from './themes/picker-canvas.base.css.js';
+export default class IgcPickerCanvasComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-picker-canvas'; }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(IgcPickerCanvasComponent);
+    }
+    constructor() {
+        super();
+        this._dragging = false;
+        this.currentColor = '';
+        this.markerColor = '';
+        this.x = 0;
+        this.y = 0;
+        this.saturation = 0;
+        this.brightness = 0;
+        this.markerLabel = 'Saturation and value';
+        addSafeEventListener(this, 'pointerdown', this._handlePointerDown);
+        addSafeEventListener(this, 'lostpointercapture', this._handleLostPointerCapture);
+        addKeybindings(this, { bindingDefaults: { repeat: true } })
+            .set(arrowDown, this._onArrowKey.bind(this, { dx: 0, dy: 1 }))
+            .set(arrowUp, this._onArrowKey.bind(this, { dx: 0, dy: -1 }))
+            .set(arrowLeft, this._onArrowKey.bind(this, { dx: -1, dy: 0 }))
+            .set(arrowRight, this._onArrowKey.bind(this, { dx: 1, dy: 0 }));
+    }
+    updated(properties) {
+        if (properties.has('currentColor')) {
+            this.style.color = this.currentColor;
+        }
+        if (properties.has('markerColor')) {
+            this.style.setProperty('--_marker-fill', this.markerColor);
+        }
+    }
+    _measure() {
+        return {
+            rect: this.getBoundingClientRect(),
+            marker: this.getMarkerDimensions(),
+        };
+    }
+    _commitPosition(x, y, { rect, marker }) {
+        const nextX = clamp(x, -marker.width, rect.width - marker.width);
+        const nextY = clamp(y, -marker.height, rect.height - marker.height);
+        if (nextX === this.x && nextY === this.y) {
+            return;
+        }
+        this.x = nextX;
+        this.y = nextY;
+        this.emitEvent('igcColorPicked', {
+            detail: {
+                x: Math.round(asPercent(nextX + marker.width, rect.width)),
+                y: Math.round(asPercent(nextY + marker.height, rect.height)),
+            },
+            bubbles: false,
+        });
+    }
+    _onArrowKey({ dx, dy }) {
+        this._commitPosition(this.x + dx, this.y + dy, this._measure());
+    }
+    _move(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const geometry = this._dragGeometry ?? this._measure();
+        const { rect, marker } = geometry;
+        this._commitPosition(event.clientX - rect.x - marker.width, event.clientY - rect.y - marker.height, geometry);
+    }
+    _handlePointerDown(event) {
+        if (event.button !== 0)
+            return;
+        this.setPointerCapture(event.pointerId);
+        this.addEventListener('pointermove', this._handlePointerMove);
+        this._dragGeometry = this._measure();
+        this._dragging = true;
+        this._move(event);
+    }
+    _handleLostPointerCapture() {
+        this.removeEventListener('pointermove', this._handlePointerMove);
+        this._dragGeometry = undefined;
+        this._dragging = false;
+        this._marker?.focus();
+    }
+    _handlePointerMove(event) {
+        this._move(event);
+    }
+    getMarkerDimensions() {
+        const marker = this._marker;
+        return marker
+            ? { width: marker.offsetWidth / 2, height: marker.offsetHeight / 2 }
+            : { width: 0, height: 0 };
+    }
+    render() {
+        const styles = styleMap({
+            top: `${this.y}px`,
+            left: `${this.x}px`,
+        });
+        const saturation = Math.round(this.saturation);
+        const brightness = Math.round(this.brightness);
+        return html `
+      <div
+        part=${partMap({ marker: true, dragging: this._dragging })}
+        style=${styles}
+        tabindex="0"
+        role="slider"
+        aria-label=${this.markerLabel}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${saturation}
+        aria-valuetext="Saturation ${saturation}%, brightness ${brightness}%"
+      ></div>
+    `;
+    }
+}
+__decorate([
+    query('[part~="marker"]', true)
+], IgcPickerCanvasComponent.prototype, "_marker", void 0);
+__decorate([
+    state()
+], IgcPickerCanvasComponent.prototype, "_dragging", void 0);
+__decorate([
+    property()
+], IgcPickerCanvasComponent.prototype, "currentColor", void 0);
+__decorate([
+    property()
+], IgcPickerCanvasComponent.prototype, "markerColor", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcPickerCanvasComponent.prototype, "x", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcPickerCanvasComponent.prototype, "y", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], IgcPickerCanvasComponent.prototype, "saturation", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], IgcPickerCanvasComponent.prototype, "brightness", void 0);
+__decorate([
+    property()
+], IgcPickerCanvasComponent.prototype, "markerLabel", void 0);
+//# sourceMappingURL=picker-canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker-canvas.js","sourceRoot":"","sources":["../../../src/components/color-picker/picker-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n} from '#internals/controllers/key-bindings.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { addSafeEventListener } from '#internals/utils/events.js';\nimport { asPercent, clamp } from '#internals/utils/math.js';\nimport { styles } from './themes/picker-canvas.base.css.js';\n\nexport interface IgcPickerCanvasEventMap {\n  /**\n   * Emitted when the color is picked in the canvas. Does not bubble.\n   */\n  igcColorPicked: CustomEvent<PickerCanvasEventDetail>;\n}\n\nexport type PickerCanvasEventDetail = { x: number; y: number };\n\n/** The measurements a marker position is resolved against. */\ntype CanvasGeometry = {\n  rect: DOMRect;\n  marker: { width: number; height: number };\n};\n\n/* blazorSuppress */\n/**\n * The saturation/value plane of {@link IgcColorPickerComponent} and the marker\n * that moves across it.\n *\n * An internal building block of `igc-color-picker` - it is registered so the\n * picker can render it, but it is not part of the public component surface and\n * is not exported from the package entry point.\n *\n * @element igc-picker-canvas\n *\n * @fires igcColorPicked - Emitted when a color is picked on the canvas. Does not bubble.\n *\n * @csspart marker - The draggable marker indicating the picked saturation/value.\n * @csspart dragging - Present on the marker while it is being dragged.\n */\nexport default class IgcPickerCanvasComponent extends EventEmitterMixin<\n  IgcPickerCanvasEventMap,\n  AbstractConstructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-picker-canvas';\n  public static styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcPickerCanvasComponent);\n  }\n\n  @query('[part~=\"marker\"]', true)\n  private readonly _marker?: HTMLDivElement;\n\n  /** Geometry captured for the duration of a pointer drag. */\n  private _dragGeometry?: CanvasGeometry;\n\n  /** Whether a pointer drag is currently in progress. */\n  @state()\n  private _dragging = false;\n\n  @property()\n  public currentColor = '';\n\n  /**\n   * The color the marker is filled with.\n   *\n   * Distinct from `currentColor`: that one is the pure hue the saturation/value\n   * plane is built from, while this is the color actually picked out of it.\n   */\n  @property()\n  public markerColor = '';\n\n  @property({ attribute: false })\n  public x = 0;\n\n  @property({ attribute: false })\n  public y = 0;\n\n  /**\n   * The HSV saturation the marker currently sits at (0-100).\n   *\n   * The canvas positions the marker in pixels and has no notion of the color\n   * space behind it, so the owning picker feeds the saturation/value pair back\n   * in purely to give the marker an announceable value.\n   */\n  @property({ type: Number, attribute: false })\n  public saturation = 0;\n\n  /**\n   * The HSV value the marker currently sits at (0-100).\n   *\n   * Named for the B of HSB rather than the V of HSV - on a custom element a\n   * bare `value` reads as a form value, which this is not.\n   */\n  @property({ type: Number, attribute: false })\n  public brightness = 0;\n\n  /** The accessible name of the marker. */\n  @property()\n  public markerLabel = 'Saturation and value';\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'pointerdown', this._handlePointerDown);\n    addSafeEventListener(\n      this,\n      'lostpointercapture',\n      this._handleLostPointerCapture\n    );\n\n    addKeybindings(this, { bindingDefaults: { repeat: true } })\n      .set(arrowDown, this._onArrowKey.bind(this, { dx: 0, dy: 1 }))\n      .set(arrowUp, this._onArrowKey.bind(this, { dx: 0, dy: -1 }))\n      .set(arrowLeft, this._onArrowKey.bind(this, { dx: -1, dy: 0 }))\n      .set(arrowRight, this._onArrowKey.bind(this, { dx: 1, dy: 0 }));\n  }\n\n  protected override updated(properties: PropertyValues<this>): void {\n    if (properties.has('currentColor')) {\n      this.style.color = this.currentColor;\n    }\n\n    // Handed to the marker through a custom property rather than an inline\n    // style on the marker itself, so that a consumer styling `::part(marker)`\n    // can still win - an inline style could not be overridden.\n    if (properties.has('markerColor')) {\n      this.style.setProperty('--_marker-fill', this.markerColor);\n    }\n  }\n\n  /**\n   * The canvas box and half-marker offsets every interaction measures against.\n   *\n   * Both reads force a layout, so a drag takes this once on pointerdown rather\n   * than on each of the frames it spans.\n   */\n  private _measure(): CanvasGeometry {\n    return {\n      rect: this.getBoundingClientRect(),\n      marker: this.getMarkerDimensions(),\n    };\n  }\n\n  /**\n   * Clamps the marker inside the canvas and reports the position it settled on\n   * as saturation/value percentages.\n   */\n  private _commitPosition(\n    x: number,\n    y: number,\n    { rect, marker }: CanvasGeometry\n  ): void {\n    const nextX = clamp(x, -marker.width, rect.width - marker.width);\n    const nextY = clamp(y, -marker.height, rect.height - marker.height);\n\n    if (nextX === this.x && nextY === this.y) {\n      return;\n    }\n\n    this.x = nextX;\n    this.y = nextY;\n\n    this.emitEvent('igcColorPicked', {\n      detail: {\n        x: Math.round(asPercent(nextX + marker.width, rect.width)),\n        y: Math.round(asPercent(nextY + marker.height, rect.height)),\n      },\n      bubbles: false,\n    });\n  }\n\n  private _onArrowKey({ dx, dy }: { dx: number; dy: number }): void {\n    this._commitPosition(this.x + dx, this.y + dy, this._measure());\n  }\n\n  private _move(event: PointerEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const geometry = this._dragGeometry ?? this._measure();\n    const { rect, marker } = geometry;\n\n    this._commitPosition(\n      event.clientX - rect.x - marker.width,\n      event.clientY - rect.y - marker.height,\n      geometry\n    );\n  }\n\n  private _handlePointerDown(event: PointerEvent): void {\n    if (event.button !== 0) return;\n    this.setPointerCapture(event.pointerId);\n    this.addEventListener('pointermove', this._handlePointerMove);\n    this._dragGeometry = this._measure();\n    this._dragging = true;\n    this._move(event);\n  }\n\n  private _handleLostPointerCapture(): void {\n    this.removeEventListener('pointermove', this._handlePointerMove);\n    this._dragGeometry = undefined;\n    this._dragging = false;\n    this._marker?.focus();\n  }\n\n  private _handlePointerMove(event: PointerEvent): void {\n    this._move(event);\n  }\n\n  public getMarkerDimensions(): { width: number; height: number } {\n    const marker = this._marker;\n\n    // Offsets rather than a client rect: the marker is scaled up while dragged\n    // and a rect would report the transformed box, shifting every position\n    // resolved against it.\n    return marker\n      ? { width: marker.offsetWidth / 2, height: marker.offsetHeight / 2 }\n      : { width: 0, height: 0 };\n  }\n\n  protected override render() {\n    const styles = styleMap({\n      top: `${this.y}px`,\n      left: `${this.x}px`,\n    });\n\n    const saturation = Math.round(this.saturation);\n    const brightness = Math.round(this.brightness);\n\n    // ARIA has no two-dimensional slider, so the marker is exposed as a single\n    // slider tracking saturation, with `aria-valuetext` carrying both axes -\n    // otherwise vertical movement would be announced as \"no change\".\n    return html`\n      <div\n        part=${partMap({ marker: true, dragging: this._dragging })}\n        style=${styles}\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-label=${this.markerLabel}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${saturation}\n        aria-valuetext=\"Saturation ${saturation}%, brightness ${brightness}%\"\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-picker-canvas': IgcPickerCanvasComponent;\n  }\n}\n"]}

package/components/color-picker/themes/color-picker.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/color-picker.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-block}:host [part=color-picker]{display:inline-grid;grid-template-columns:auto auto 1fr;align-items:center}:host ::part(helper-text){font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}:host slot[name=value-missing]{display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}:host [part=main-row],:host [part=alpha-row],:host [part=inputs-row]{display:grid}:host [part=main-row]:empty,:host [part=alpha-row]:empty,:host [part=inputs-row]:empty{display:none}:host [part=main-row]{margin-block-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem))}:host [part=main-row] input{grid-column:1/span 2}:host [part=alpha-row]{margin-block:var(--_alpha-row-spacing)}:host [part=alpha-row] input{grid-column:1/span 2}:host [part=alpha-input]{min-width:-moz-fit-content;min-width:fit-content}:host [part=inputs-row]{padding-block-end:var(--_input-row-spacing)}:host [part=inputs-row] igc-input{grid-column:1/-1}:host [part=inputs-row]:has(igc-select) igc-input{grid-column:2/-1}:host [part=buttons]{display:flex}:host [part=hue],:host [part=alpha]{grid-column:1/span 3}:host [part=picker]{display:grid;width:var(--_picker-popover-size);min-height:12rem}:host [part=picker]:has([part~=alpha-row]:not(:empty)) [part=main-row]{margin-block-end:0}:host [part=picker-canvas]{border-width:.0625rem;border-style:solid;margin-inline:1rem;margin-block:1rem max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1.25rem, -1 * 1.25rem),var(--is-small, 1)*max(1rem, -1 * 1rem))}:host [part=swatches]{display:grid;grid-column:1/-1;width:100%;padding:var(--_swatches-spacing);row-gap:var(--_swatches-row-gap);justify-content:space-between;overflow:hidden}:host [part~=anchor]{display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:1;padding:.25rem;margin:0}:host [part~=anchor]::before{content:"";-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;aspect-ratio:1;box-sizing:content-box}:host [part~=input-mode]::before{display:none}:host [part=label]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([required]) [part=label]::after{content:"*"}`;
+//# sourceMappingURL=color-picker.base.css.js.map

package/components/color-picker/themes/color-picker.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.base.css.js","sourceRoot":"","sources":["../../../../src/components/color-picker/themes/color-picker.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+uHAA+uH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-block}:host [part=color-picker]{display:inline-grid;grid-template-columns:auto auto 1fr;align-items:center}:host ::part(helper-text){font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}:host slot[name=value-missing]{display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}:host [part=main-row],:host [part=alpha-row],:host [part=inputs-row]{display:grid}:host [part=main-row]:empty,:host [part=alpha-row]:empty,:host [part=inputs-row]:empty{display:none}:host [part=main-row]{margin-block-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem))}:host [part=main-row] input{grid-column:1/span 2}:host [part=alpha-row]{margin-block:var(--_alpha-row-spacing)}:host [part=alpha-row] input{grid-column:1/span 2}:host [part=alpha-input]{min-width:-moz-fit-content;min-width:fit-content}:host [part=inputs-row]{padding-block-end:var(--_input-row-spacing)}:host [part=inputs-row] igc-input{grid-column:1/-1}:host [part=inputs-row]:has(igc-select) igc-input{grid-column:2/-1}:host [part=buttons]{display:flex}:host [part=hue],:host [part=alpha]{grid-column:1/span 3}:host [part=picker]{display:grid;width:var(--_picker-popover-size);min-height:12rem}:host [part=picker]:has([part~=alpha-row]:not(:empty)) [part=main-row]{margin-block-end:0}:host [part=picker-canvas]{border-width:.0625rem;border-style:solid;margin-inline:1rem;margin-block:1rem max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1.25rem, -1 * 1.25rem),var(--is-small, 1)*max(1rem, -1 * 1rem))}:host [part=swatches]{display:grid;grid-column:1/-1;width:100%;padding:var(--_swatches-spacing);row-gap:var(--_swatches-row-gap);justify-content:space-between;overflow:hidden}:host [part~=anchor]{display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:1;padding:.25rem;margin:0}:host [part~=anchor]::before{content:\"\";-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;aspect-ratio:1;box-sizing:content-box}:host [part~=input-mode]::before{display:none}:host [part=label]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([required]) [part=label]::after{content:\"*\"}`;\n  "]}

package/components/color-picker/themes/dark/color-picker.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/dark/color-picker.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-300));--label-color-disabled: var(--ig-color-picker-label-color-disabled, var(--ig-gray-300));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-50));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-50));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, hsl(from var(--ig-primary-600) h s l/0.5));--anchor-border-color: var(--ig-color-picker-anchor-border-color, var(--ig-gray-700));--anchor-border-color-disabled: var(--ig-color-picker-anchor-border-color-disabled, var(--ig-gray-100));--picker-border-color: var(--ig-color-picker-picker-border-color, var(--ig-gray-300));--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-300));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-0));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-50));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-100));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-100));--ig-theme: bootstrap;--ig-theme-variant: dark}`;
+//# sourceMappingURL=color-picker.bootstrap.css.js.map

package/components/color-picker/themes/dark/color-picker.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/themes/dark/color-picker.bootstrap.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gwDAAgwD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-300));--label-color-disabled: var(--ig-color-picker-label-color-disabled, var(--ig-gray-300));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-50));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-50));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, hsl(from var(--ig-primary-600) h s l/0.5));--anchor-border-color: var(--ig-color-picker-anchor-border-color, var(--ig-gray-700));--anchor-border-color-disabled: var(--ig-color-picker-anchor-border-color-disabled, var(--ig-gray-100));--picker-border-color: var(--ig-color-picker-picker-border-color, var(--ig-gray-300));--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-300));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-0));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-50));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-100));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-100));--ig-theme: bootstrap;--ig-theme-variant: dark}`;\n  "]}

package/components/color-picker/themes/dark/color-picker.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/dark/color-picker.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-100));--label-color-disabled: var(--ig-color-picker-label-color-disabled, var(--ig-gray-300));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-50));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-50));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, var(--ig-gray-400));--anchor-border-color-disabled: var(--ig-color-picker-anchor-border-color-disabled, var(--ig-gray-100));--anchor-border-radius: var(--ig-color-picker-anchor-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--swatch-preview-border-color: var(--ig-color-picker-swatch-preview-border-color, var(--ig-gray-700));--picker-border-radius: var(--ig-color-picker-picker-border-radius, 0.125rem);--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--swatch-border-radius: var(--ig-color-picker-swatch-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-100));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-50));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-100));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-100));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: fluent;--ig-theme-variant: dark}`;
+//# sourceMappingURL=color-picker.fluent.css.js.map

package/components/color-picker/themes/dark/color-picker.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/themes/dark/color-picker.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mgEAAmgE,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-100));--label-color-disabled: var(--ig-color-picker-label-color-disabled, var(--ig-gray-300));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-50));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-50));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, var(--ig-gray-400));--anchor-border-color-disabled: var(--ig-color-picker-anchor-border-color-disabled, var(--ig-gray-100));--anchor-border-radius: var(--ig-color-picker-anchor-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--swatch-preview-border-color: var(--ig-color-picker-swatch-preview-border-color, var(--ig-gray-700));--picker-border-radius: var(--ig-color-picker-picker-border-radius, 0.125rem);--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--swatch-border-radius: var(--ig-color-picker-swatch-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-100));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-50));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-100));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-100));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: fluent;--ig-theme-variant: dark}`;\n  "]}

package/components/color-picker/themes/dark/color-picker.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/dark/color-picker.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--label-color: var(--ig-color-picker-label-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--label-color-invalid: var(--ig-color-picker-label-color-invalid, hsl(from var(--ig-gray-800) h s l/0.8));--label-color-disabled: var(--ig-color-picker-label-color-disabled, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--anchor-border-color-disabled: var(--ig-color-picker-anchor-border-color-disabled, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--picker-background: var(--ig-color-picker-picker-background, var(--ig-gray-50));--picker-border-radius: var(--ig-color-picker-picker-border-radius, 0.625rem);--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--swatch-separator-color: var(--ig-color-picker-swatch-separator-color, transparent);--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-400));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: indigo;--ig-theme-variant: dark}`;
+//# sourceMappingURL=color-picker.indigo.css.js.map

package/components/color-picker/themes/dark/color-picker.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/themes/dark/color-picker.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ygEAAygE,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--label-color: var(--ig-color-picker-label-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--label-color-invalid: var(--ig-color-picker-label-color-invalid, hsl(from var(--ig-gray-800) h s l/0.8));--label-color-disabled: var(--ig-color-picker-label-color-disabled, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--anchor-border-color-disabled: var(--ig-color-picker-anchor-border-color-disabled, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--picker-background: var(--ig-color-picker-picker-background, var(--ig-gray-50));--picker-border-radius: var(--ig-color-picker-picker-border-radius, 0.625rem);--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--swatch-separator-color: var(--ig-color-picker-swatch-separator-color, transparent);--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-400));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: indigo;--ig-theme-variant: dark}`;\n  "]}

package/components/color-picker/themes/dark/color-picker.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/dark/color-picker.material.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-500));--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-500));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, hsl(from var(--ig-gray-500) h s l/0.08));--anchor-background-active: var(--ig-color-picker-anchor-background-active, hsl(from var(--ig-gray-500) h s l/0.16));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, hsl(from var(--ig-gray-500) h s l/0.16));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, hsl(from var(--ig-gray-500) h s l/0.32));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: material;--ig-theme-variant: dark}`;
+//# sourceMappingURL=color-picker.material.css.js.map

package/components/color-picker/themes/dark/color-picker.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.material.css.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/themes/dark/color-picker.material.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+qCAA+qC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-500));--slider-thumb-border-color: var(--ig-color-picker-slider-thumb-border-color, var(--ig-gray-50-contrast));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-500));--marker-color: var(--ig-color-picker-marker-color, var(--ig-gray-50-contrast));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, hsl(from var(--ig-gray-500) h s l/0.08));--anchor-background-active: var(--ig-color-picker-anchor-background-active, hsl(from var(--ig-gray-500) h s l/0.16));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, hsl(from var(--ig-gray-500) h s l/0.16));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, hsl(from var(--ig-gray-500) h s l/0.32));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: material;--ig-theme-variant: dark}`;\n  "]}

package/components/color-picker/themes/light/color-picker.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/light/color-picker.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-500));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-200));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-100));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, hsl(from var(--ig-primary-600) h s l/0.5));--anchor-border-color: var(--ig-color-picker-anchor-border-color, var(--ig-gray-700));--picker-border-color: var(--ig-color-picker-picker-border-color, var(--ig-gray-300));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-500));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-0));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-200));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-300));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-300));--ig-theme: bootstrap;--ig-theme-variant: light}`;
+//# sourceMappingURL=color-picker.bootstrap.css.js.map

package/components/color-picker/themes/light/color-picker.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/themes/light/color-picker.bootstrap.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,04CAA04C,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-500));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-200));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-100));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, hsl(from var(--ig-primary-600) h s l/0.5));--anchor-border-color: var(--ig-color-picker-anchor-border-color, var(--ig-gray-700));--picker-border-color: var(--ig-color-picker-picker-border-color, var(--ig-gray-300));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-500));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-0));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-200));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-300));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-300));--ig-theme: bootstrap;--ig-theme-variant: light}`;\n  "]}

package/components/color-picker/themes/light/color-picker.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/color-picker/themes/light/color-picker.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-500));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-200));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-100));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, var(--ig-gray-700));--anchor-border-radius: var(--ig-color-picker-anchor-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--swatch-preview-border-color: var(--ig-color-picker-swatch-preview-border-color, var(--ig-gray-700));--picker-border-radius: var(--ig-color-picker-picker-border-radius, 0.125rem);--swatch-border-radius: var(--ig-color-picker-swatch-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-500));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-200));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-300));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-300));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: fluent;--ig-theme-variant: light}`;
+//# sourceMappingURL=color-picker.fluent.css.js.map

package/components/color-picker/themes/light/color-picker.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/color-picker/themes/light/color-picker.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6oDAA6oD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--label-color-invalid: var(--ig-color-picker-label-color-invalid, var(--ig-error-500));--anchor-background-focus-visible-hover: var(--ig-color-picker-anchor-background-focus-visible-hover, var(--ig-gray-200));--anchor-background-disabled: var(--ig-color-picker-anchor-background-disabled, var(--ig-gray-100));--anchor-outline-color: var(--ig-color-picker-anchor-outline-color, var(--ig-gray-700));--anchor-border-radius: var(--ig-color-picker-anchor-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--swatch-preview-border-color: var(--ig-color-picker-swatch-preview-border-color, var(--ig-gray-700));--picker-border-radius: var(--ig-color-picker-picker-border-radius, 0.125rem);--swatch-border-radius: var(--ig-color-picker-swatch-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem));--invalid-color: var(--ig-color-picker-invalid-color, var(--ig-error-500));--picker-elevation: var(--ig-color-picker-picker-elevation, var(--ig-elevation-24));--anchor-background-hover: var(--ig-color-picker-anchor-background-hover, var(--ig-gray-200));--anchor-background-focus-visible: var(--ig-color-picker-anchor-background-focus-visible, transparent);--anchor-background-active: var(--ig-color-picker-anchor-background-active, var(--ig-gray-300));--anchor-background-active-focus-visible: var(--ig-color-picker-anchor-background-active-focus-visible, var(--ig-gray-300));--trigger-size: var(--ig-color-picker-trigger-size, max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--ig-theme: fluent;--ig-theme-variant: light}`;\n  "]}