@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-color-picker.mjs

@@ -0,0 +1,910 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, booleanAttribute, input, output, ElementRef, signal, computed, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, model, HostAttributeToken } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SlPopover, SlPopoverAnchor, SlPopoverBody, SlPopoverContent, SlPopoverLayer, SlPopoverTrigger } from '@slotted/angular/popover';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+import { parseColor, formatColor, COLOR_FORMATS, clampToGamut, rgbaToHsva, toCss, contrastRatio, contrastLevel, hsvaToRgba } from '@slotted/core/color';
+import { colorPickerMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { SlField } from '@slotted/angular/field';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';
+
+const FALLBACK = {
+    format: 'hex',
+    presets: undefined,
+    size: 'md',
+};
+const COLOR_PICKER_DEFAULTS = new InjectionToken('slotted color picker defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once its notation, its palette and its size. The
+ * words come from the language in force (`provideSlotted`).
+ */
+function provideColorPickerDefaults(defaults) {
+    return {
+        provide: COLOR_PICKER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectColorPickerDefaults() {
+    return inject(COLOR_PICKER_DEFAULTS);
+}
+
+/** The catalog key of each WCAG outcome. */
+const CONTRAST_LEVEL_KEYS = {
+    AAA: 'contrastLevels.AAA',
+    AA: 'contrastLevels.AA',
+    'AA-large': 'contrastLevels.AALarge',
+    fail: 'contrastLevels.fail',
+};
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function sameColor$1(a, b) {
+    const pa = parseColor(a);
+    const pb = parseColor(b);
+    return pa !== null && pb !== null && formatColor(pa.rgba, 'hex') === formatColor(pb.rgba, 'hex');
+}
+function isRtl(element) {
+    return getComputedStyle(element).direction === 'rtl';
+}
+function sliderStep(event, rtl, small, large) {
+    const step = event.shiftKey ? large : small;
+    switch (event.key) {
+        case 'ArrowRight':
+            return rtl ? -step : step;
+        case 'ArrowLeft':
+            return rtl ? step : -step;
+        case 'ArrowUp':
+            return step;
+        case 'ArrowDown':
+            return -step;
+        case 'PageUp':
+            return large;
+        case 'PageDown':
+            return -large;
+        default:
+            return null;
+    }
+}
+const optionalBoolean = (value) => value === undefined ? undefined : booleanAttribute(value);
+/**
+ * Choosing a colour: an area, a hue channel, an alpha channel, the preview of
+ * now beside before, the value as text with its notation and the eyedropper,
+ * the presets, and the contrast against `contrastWith`.
+ *
+ * The value is a string in the notation shown, and it comes back in that
+ * notation; every colour the stylesheet paints is written on the host as a
+ * runtime property from what `@slotted/core/color` parsed. It belongs in a
+ * form as it stands. React lets a consumer choose the parts by passing them as
+ * children; an attribute directive cannot see what was projected before it
+ * renders, so here the parts are chosen by inputs — `alpha`, `presets`,
+ * `contrastWith` — and the eyedropper by the platform.
+ */
+class SlColorPicker {
+    /** Present means the consumer owns the value: a colour in any supported notation. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** The notation the value is written in. */
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    defaultFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultFormat" }] : /* istanbul ignore next */ []));
+    alpha = input(true, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    presets = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /** The background the contrast is measured against; absent, no contrast is drawn. */
+    contrastWith = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contrastWith" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /**
+     * Words laid over the catalog of the language in force, key by key: every
+     * control's name, the gamut sentence and the contrast levels.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Before the colour moves: `pointer`, `keyboard`, `select` or `programmatic` (the eyedropper). */
+    valueChange = output();
+    formatChange = output();
+    defaults = injectColorPickerDefaults();
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    t = injectMessages(colorPickerMessages, this.messages);
+    field = inject(SlField, { optional: true });
+    element = inject(ElementRef).nativeElement;
+    formatNames = COLOR_FORMATS;
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    ownFormat = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownFormat" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    memory = { h: 0, s: 0 };
+    dragging = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    draft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    eyedropper = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eyedropper" }] : /* istanbul ignore next */ []));
+    /** The colour the panel opened with, read once after the first render. */
+    previous = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previous" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouched = () => undefined;
+    current = computed(() => this.value() ?? this.own() ?? this.defaultValue() ?? '#000000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    parsed = computed(() => parseColor(this.current()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
+    resolvedFormat = computed(() => this.format() ??
+        this.ownFormat() ??
+        this.defaultFormat() ??
+        parseColor(this.value() ?? this.defaultValue() ?? '')?.format ??
+        this.defaults.format, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormat" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.formDisabled() ?? this.field?.resolvedDisabled() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.field?.resolvedReadOnly() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    off = computed(() => this.resolvedDisabled() || this.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "off" }] : /* istanbul ignore next */ []));
+    channels = computed(() => this.alpha() ? ['hue', 'alpha'] : ['hue'], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "channels" }] : /* istanbul ignore next */ []));
+    rgba = computed(() => clampToGamut(this.parsed()?.rgba ?? { r: 0, g: 0, b: 0, a: 1 }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rgba" }] : /* istanbul ignore next */ []));
+    hsva = computed(() => {
+        const next = rgbaToHsva(this.rgba());
+        if (next.v === 0)
+            next.s = this.memory.s;
+        else
+            this.memory.s = next.s;
+        if (next.s === 0 || next.v === 0)
+            next.h = this.memory.h;
+        else
+            this.memory.h = next.h;
+        return next;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hsva" }] : /* istanbul ignore next */ []));
+    css = computed(() => toCss(this.rgba()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
+    opaque = computed(() => toCss(this.rgba(), true), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opaque" }] : /* istanbul ignore next */ []));
+    outOfGamut = computed(() => this.parsed()?.inGamut === false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outOfGamut" }] : /* istanbul ignore next */ []));
+    draftValid = computed(() => {
+        const draft = this.draft();
+        return draft === null || parseColor(draft) !== null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftValid" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => this.invalid() === true || this.field?.invalid() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    /** The panel has no frame of its own, so a picker the form calls invalid says so on its text. */
+    inputInvalid = computed(() => !this.draftValid() || this.resolvedInvalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+    resolvedPresets = computed(() => this.presets() ?? this.defaults.presets ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPresets" }] : /* istanbul ignore next */ []));
+    selectedPreset = computed(() => this.resolvedPresets().findIndex((preset) => sameColor$1(preset, this.current())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []));
+    previousCss = computed(() => toCss(parseColor(this.previous() ?? this.current())?.rgba ?? this.rgba()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousCss" }] : /* istanbul ignore next */ []));
+    background = computed(() => {
+        const value = this.contrastWith();
+        return value === undefined ? null : parseColor(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+    contrastCss = computed(() => {
+        const background = this.background();
+        return background === null ? null : toCss(background.rgba);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contrastCss" }] : /* istanbul ignore next */ []));
+    contrast = computed(() => {
+        const background = this.background();
+        const parsed = this.parsed();
+        if (background === null || parsed === null)
+            return null;
+        const ratio = contrastRatio(parsed.rgba, background.rgba);
+        const level = contrastLevel(ratio);
+        return { level, ratio: ratio.toFixed(2), key: CONTRAST_LEVEL_KEYS[level] };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contrast" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.previous.set(this.current());
+            this.eyedropper.set('EyeDropper' in window);
+            /* slMenuTriggerFor binds data-part to null outside a bar, and the
+               binding is a constant: the part is written back once, the rule
+               menu records for its own trigger. */
+            this.element.querySelector('[aria-haspopup="menu"]')?.setAttribute('data-part', 'format');
+        });
+    }
+    round(value) {
+        return Math.round(value);
+    }
+    percent(value) {
+        return `${Math.round(value * 100)} %`;
+    }
+    writeValue(value) {
+        if (value != null)
+            this.own.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /** Asks to move to `next`, and moves an uncontrolled value once nobody refused. */
+    request(next, reason, source) {
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.current(),
+            onRequest: (change) => this.valueChange.emit(change),
+        });
+        if (state.request(next, reason, source ?? undefined)) {
+            this.own.set(next);
+            this.onChangeFn(next);
+        }
+    }
+    requestHsva(next, reason, source) {
+        this.memory.h = next.h;
+        this.memory.s = next.s;
+        const rgba = hsvaToRgba({ ...next, a: this.alpha() ? next.a : 1 });
+        this.request(formatColor(rgba, this.resolvedFormat()), reason, source);
+    }
+    requestFormat(next, source) {
+        const state = createControllable({
+            controlled: this.format(),
+            initial: this.resolvedFormat(),
+            onRequest: (change) => this.formatChange.emit(change),
+        });
+        if (state.request(next, 'select', source ?? undefined) && this.format() === undefined) {
+            this.ownFormat.set(next);
+        }
+        const parsed = this.parsed();
+        if (parsed !== null)
+            this.request(formatColor(parsed.rgba, next), 'select', source);
+    }
+    down(event, target) {
+        if (event.button !== 0 || this.off())
+            return;
+        const box = event.currentTarget;
+        box.setPointerCapture(event.pointerId);
+        this.dragging.set(target);
+        this.place(event, target, box);
+        box.querySelector('[role="slider"]')?.focus({ preventScroll: true });
+    }
+    move(event, target) {
+        if (this.dragging() === target)
+            this.place(event, target, event.currentTarget);
+    }
+    place(event, target, box) {
+        const rect = box.getBoundingClientRect();
+        let x = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const y = clamp((event.clientY - rect.top) / rect.height, 0, 1);
+        if (isRtl(box))
+            x = 1 - x;
+        const hsva = this.hsva();
+        if (target === 'area')
+            this.requestHsva({ ...hsva, s: x, v: 1 - y }, 'pointer', event);
+        else if (target === 'hue')
+            this.requestHsva({ ...hsva, h: x * 360 }, 'pointer', event);
+        else
+            this.requestHsva({ ...hsva, a: x }, 'pointer', event);
+    }
+    areaKey(event) {
+        if (this.off())
+            return;
+        const step = sliderStep(event, isRtl(this.element), 0.01, 0.1);
+        if (step === null)
+            return;
+        event.preventDefault();
+        const hsva = this.hsva();
+        const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+        this.requestHsva(horizontal
+            ? { ...hsva, s: clamp(hsva.s + step, 0, 1) }
+            : { ...hsva, v: clamp(hsva.v + step, 0, 1) }, 'keyboard', event);
+    }
+    channelKey(event, channel) {
+        if (this.off())
+            return;
+        const hue = channel === 'hue';
+        const max = hue ? 360 : 1;
+        const hsva = this.hsva();
+        const current = hue ? hsva.h : hsva.a;
+        let next = null;
+        if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = max;
+        else {
+            const step = sliderStep(event, isRtl(this.element), hue ? 1 : 0.01, hue ? 10 : 0.1);
+            if (step !== null)
+                next = current + step;
+        }
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.requestHsva({ ...hsva, [hue ? 'h' : 'a']: clamp(next, 0, max) }, 'keyboard', event);
+    }
+    commit(event) {
+        const draft = this.draft();
+        if (draft === null)
+            return;
+        const parsed = parseColor(draft);
+        if (parsed !== null && !sameColor$1(draft, this.current())) {
+            this.request(formatColor(parsed.rgba, this.resolvedFormat()), 'keyboard', event);
+        }
+        this.draft.set(null);
+    }
+    choose(preset, event) {
+        const parsed = parseColor(preset);
+        if (parsed !== null)
+            this.request(formatColor(parsed.rgba, this.resolvedFormat()), 'select', event);
+    }
+    presetKey(event, index) {
+        const rtl = isRtl(this.element);
+        const forward = event.key === (rtl ? 'ArrowLeft' : 'ArrowRight') || event.key === 'ArrowDown';
+        const back = event.key === (rtl ? 'ArrowRight' : 'ArrowLeft') || event.key === 'ArrowUp';
+        if (!forward && !back)
+            return;
+        event.preventDefault();
+        const presets = this.resolvedPresets();
+        const next = (index + (forward ? 1 : -1) + presets.length) % presets.length;
+        const sibling = event.currentTarget.parentElement?.children[next];
+        sibling?.focus();
+        this.choose(presets[next], event);
+    }
+    async pick(event) {
+        const EyeDropper = window.EyeDropper;
+        try {
+            const { sRGBHex } = await new EyeDropper().open();
+            const parsed = parseColor(sRGBHex);
+            if (parsed !== null) {
+                this.request(formatColor(parsed.rgba, this.resolvedFormat()), 'programmatic', event);
+            }
+        }
+        catch {
+            /* The reader pressed Escape: nothing was picked. */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlColorPicker, isStandalone: true, selector: "div[slColorPicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, defaultFormat: { classPropertyName: "defaultFormat", publicName: "defaultFormat", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, contrastWith: { classPropertyName: "contrastWith", publicName: "contrastWith", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", formatChange: "formatChange" }, host: { attributes: { "data-ui": "color-picker", "data-part": "root" }, properties: { "attr.data-size": "size() ?? field?.resolvedSize() ?? defaults.size", "attr.data-format": "resolvedFormat()", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "resolvedInvalid() ? '' : null", "attr.data-out-of-gamut": "outOfGamut() ? '' : null", "style.--slotted-color-picker-color": "css()", "style.--slotted-color-picker-opaque": "opaque()", "style.--slotted-color-picker-hue": "hsva().h", "style.--slotted-color-picker-x": "hsva().s", "style.--slotted-color-picker-y": "hsva().v", "style.--slotted-color-picker-alpha": "hsva().a", "style.--slotted-color-picker-previous": "previousCss()", "style.--slotted-color-picker-contrast-with": "contrastCss()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlColorPicker), multi: true },
+        ], exportAs: ["slColorPicker"], ngImport: i0, template: `
+    <div
+      data-part="area"
+      [attr.data-dragging]="dragging() === 'area' ? '' : null"
+      (pointerdown)="down($event, 'area')"
+      (pointermove)="move($event, 'area')"
+      (pointerup)="dragging.set(null)"
+      (pointercancel)="dragging.set(null)"
+    >
+      <div
+        data-part="area-thumb"
+        role="slider"
+        [attr.aria-roledescription]="t('areaRoleDescription')"
+        [attr.aria-label]="t('area')"
+        [attr.aria-valuetext]="percent(hsva().s) + ', ' + percent(hsva().v)"
+        [attr.aria-disabled]="off() || null"
+        [attr.tabindex]="resolvedDisabled() ? -1 : 0"
+        (keydown)="areaKey($event)"
+      ></div>
+    </div>
+    @for (channel of channels(); track channel) {
+      <div
+        data-part="channel"
+        [attr.data-channel]="channel"
+        [attr.data-dragging]="dragging() === channel ? '' : null"
+        (pointerdown)="down($event, channel)"
+        (pointermove)="move($event, channel)"
+        (pointerup)="dragging.set(null)"
+        (pointercancel)="dragging.set(null)"
+      >
+        <div
+          data-part="channel-thumb"
+          role="slider"
+          [attr.data-channel]="channel"
+          [attr.aria-label]="channel === 'hue' ? t('hue') : t('alpha')"
+          aria-valuemin="0"
+          [attr.aria-valuemax]="channel === 'hue' ? 360 : 100"
+          [attr.aria-valuenow]="channel === 'hue' ? round(hsva().h) : round(hsva().a * 100)"
+          [attr.aria-valuetext]="channel === 'hue' ? round(hsva().h) + '°' : percent(hsva().a)"
+          [attr.aria-disabled]="off() || null"
+          [attr.tabindex]="resolvedDisabled() ? -1 : 0"
+          (keydown)="channelKey($event, channel)"
+        ></div>
+      </div>
+    }
+    <div data-part="row">
+      <span data-part="swatch" role="img" [attr.aria-label]="current()"></span>
+      <button
+        data-part="previous"
+        type="button"
+        [attr.aria-label]="t('previous', { color: previous() ?? current() })"
+        [disabled]="off()"
+        (click)="request(previous() ?? current(), 'select', $event)"
+      >
+        <span slIcon><svg slGlyph name="rotate-ccw"></svg></span>
+      </button>
+      <div
+        data-ui="text-field"
+        data-part="root"
+        data-size="sm"
+        data-variant="outline"
+        data-mono=""
+        [attr.data-invalid]="inputInvalid() ? '' : null"
+        [attr.data-disabled]="resolvedDisabled() ? '' : null"
+        [attr.data-readonly]="resolvedReadOnly() ? '' : null"
+      >
+        <input
+          data-part="input"
+          dir="ltr"
+          autocomplete="off"
+          spellcheck="false"
+          [attr.aria-label]="t('input')"
+          [attr.aria-invalid]="inputInvalid() ? 'true' : null"
+          [disabled]="resolvedDisabled()"
+          [readOnly]="resolvedReadOnly()"
+          [value]="draft() ?? current()"
+          (input)="draft.set($any($event.target).value)"
+          (keydown.enter)="$event.preventDefault(); commit($event)"
+          (blur)="commit($event); onTouched()"
+        />
+      </div>
+      <button
+        data-part="format"
+        type="button"
+        [attr.aria-label]="t('format', { format: resolvedFormat() })"
+        [disabled]="off()"
+        [slMenuTriggerFor]="formats"
+      >
+        {{ resolvedFormat() }}<span slIcon><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #formats>
+        <sl-menu-radio-group
+          [value]="resolvedFormat()"
+          (valueChange)="requestFormat($any($event), null)"
+        >
+          @for (format of formatNames; track format) {
+            <button slMenuRadioItem [value]="format">{{ format.toUpperCase() }}</button>
+          }
+        </sl-menu-radio-group>
+      </sl-menu>
+      @if (eyedropper()) {
+        <button
+          data-part="eyedropper"
+          type="button"
+          [attr.aria-label]="t('eyedropper')"
+          [disabled]="off()"
+          (click)="pick($event)"
+        >
+          <span slIcon><svg slGlyph name="pipette"></svg></span>
+        </button>
+      }
+    </div>
+    @if (outOfGamut()) {
+      <p data-part="gamut" role="status">
+        <span slIcon><svg slGlyph name="circle-alert"></svg></span>{{ t('gamut') }}
+      </p>
+    }
+    @if (resolvedPresets().length > 0) {
+      <div data-part="presets" role="radiogroup" [attr.aria-label]="t('presets')">
+        @for (preset of resolvedPresets(); track preset; let index = $index) {
+          <button
+            data-part="preset"
+            type="button"
+            role="radio"
+            [attr.aria-label]="preset"
+            [attr.aria-checked]="index === selectedPreset()"
+            [attr.data-selected]="index === selectedPreset() ? '' : null"
+            [attr.tabindex]="index === (selectedPreset() === -1 ? 0 : selectedPreset()) ? 0 : -1"
+            [style.--slotted-color-picker-preset]="preset"
+            [disabled]="off()"
+            (click)="choose(preset, $event)"
+            (keydown)="presetKey($event, index)"
+          ></button>
+        }
+      </div>
+    }
+    @if (contrast(); as measured) {
+      <div data-part="contrast" aria-live="polite" [attr.data-level]="measured.level">
+        <span data-part="contrast-sample" aria-hidden="true">{{ t('contrastSample') }}</span>
+        <span data-part="contrast-ratio">{{ measured.ratio }}:1</span>
+        <span data-part="contrast-level">{{ t(measured.key) }}</span>
+      </div>
+    }
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "component", type: SlMenuRadioGroup, selector: "sl-menu-radio-group", inputs: ["value"], outputs: ["valueChange", "valueChangeRequest"], exportAs: ["slMenuRadioGroup"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[slColorPicker]', standalone: true, exportAs: 'slColorPicker', imports: [SlGlyph, SlIcon, SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlColorPicker), multi: true },
+                    ], template: `
+    <div
+      data-part="area"
+      [attr.data-dragging]="dragging() === 'area' ? '' : null"
+      (pointerdown)="down($event, 'area')"
+      (pointermove)="move($event, 'area')"
+      (pointerup)="dragging.set(null)"
+      (pointercancel)="dragging.set(null)"
+    >
+      <div
+        data-part="area-thumb"
+        role="slider"
+        [attr.aria-roledescription]="t('areaRoleDescription')"
+        [attr.aria-label]="t('area')"
+        [attr.aria-valuetext]="percent(hsva().s) + ', ' + percent(hsva().v)"
+        [attr.aria-disabled]="off() || null"
+        [attr.tabindex]="resolvedDisabled() ? -1 : 0"
+        (keydown)="areaKey($event)"
+      ></div>
+    </div>
+    @for (channel of channels(); track channel) {
+      <div
+        data-part="channel"
+        [attr.data-channel]="channel"
+        [attr.data-dragging]="dragging() === channel ? '' : null"
+        (pointerdown)="down($event, channel)"
+        (pointermove)="move($event, channel)"
+        (pointerup)="dragging.set(null)"
+        (pointercancel)="dragging.set(null)"
+      >
+        <div
+          data-part="channel-thumb"
+          role="slider"
+          [attr.data-channel]="channel"
+          [attr.aria-label]="channel === 'hue' ? t('hue') : t('alpha')"
+          aria-valuemin="0"
+          [attr.aria-valuemax]="channel === 'hue' ? 360 : 100"
+          [attr.aria-valuenow]="channel === 'hue' ? round(hsva().h) : round(hsva().a * 100)"
+          [attr.aria-valuetext]="channel === 'hue' ? round(hsva().h) + '°' : percent(hsva().a)"
+          [attr.aria-disabled]="off() || null"
+          [attr.tabindex]="resolvedDisabled() ? -1 : 0"
+          (keydown)="channelKey($event, channel)"
+        ></div>
+      </div>
+    }
+    <div data-part="row">
+      <span data-part="swatch" role="img" [attr.aria-label]="current()"></span>
+      <button
+        data-part="previous"
+        type="button"
+        [attr.aria-label]="t('previous', { color: previous() ?? current() })"
+        [disabled]="off()"
+        (click)="request(previous() ?? current(), 'select', $event)"
+      >
+        <span slIcon><svg slGlyph name="rotate-ccw"></svg></span>
+      </button>
+      <div
+        data-ui="text-field"
+        data-part="root"
+        data-size="sm"
+        data-variant="outline"
+        data-mono=""
+        [attr.data-invalid]="inputInvalid() ? '' : null"
+        [attr.data-disabled]="resolvedDisabled() ? '' : null"
+        [attr.data-readonly]="resolvedReadOnly() ? '' : null"
+      >
+        <input
+          data-part="input"
+          dir="ltr"
+          autocomplete="off"
+          spellcheck="false"
+          [attr.aria-label]="t('input')"
+          [attr.aria-invalid]="inputInvalid() ? 'true' : null"
+          [disabled]="resolvedDisabled()"
+          [readOnly]="resolvedReadOnly()"
+          [value]="draft() ?? current()"
+          (input)="draft.set($any($event.target).value)"
+          (keydown.enter)="$event.preventDefault(); commit($event)"
+          (blur)="commit($event); onTouched()"
+        />
+      </div>
+      <button
+        data-part="format"
+        type="button"
+        [attr.aria-label]="t('format', { format: resolvedFormat() })"
+        [disabled]="off()"
+        [slMenuTriggerFor]="formats"
+      >
+        {{ resolvedFormat() }}<span slIcon><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+      <sl-menu #formats>
+        <sl-menu-radio-group
+          [value]="resolvedFormat()"
+          (valueChange)="requestFormat($any($event), null)"
+        >
+          @for (format of formatNames; track format) {
+            <button slMenuRadioItem [value]="format">{{ format.toUpperCase() }}</button>
+          }
+        </sl-menu-radio-group>
+      </sl-menu>
+      @if (eyedropper()) {
+        <button
+          data-part="eyedropper"
+          type="button"
+          [attr.aria-label]="t('eyedropper')"
+          [disabled]="off()"
+          (click)="pick($event)"
+        >
+          <span slIcon><svg slGlyph name="pipette"></svg></span>
+        </button>
+      }
+    </div>
+    @if (outOfGamut()) {
+      <p data-part="gamut" role="status">
+        <span slIcon><svg slGlyph name="circle-alert"></svg></span>{{ t('gamut') }}
+      </p>
+    }
+    @if (resolvedPresets().length > 0) {
+      <div data-part="presets" role="radiogroup" [attr.aria-label]="t('presets')">
+        @for (preset of resolvedPresets(); track preset; let index = $index) {
+          <button
+            data-part="preset"
+            type="button"
+            role="radio"
+            [attr.aria-label]="preset"
+            [attr.aria-checked]="index === selectedPreset()"
+            [attr.data-selected]="index === selectedPreset() ? '' : null"
+            [attr.tabindex]="index === (selectedPreset() === -1 ? 0 : selectedPreset()) ? 0 : -1"
+            [style.--slotted-color-picker-preset]="preset"
+            [disabled]="off()"
+            (click)="choose(preset, $event)"
+            (keydown)="presetKey($event, index)"
+          ></button>
+        }
+      </div>
+    }
+    @if (contrast(); as measured) {
+      <div data-part="contrast" aria-live="polite" [attr.data-level]="measured.level">
+        <span data-part="contrast-sample" aria-hidden="true">{{ t('contrastSample') }}</span>
+        <span data-part="contrast-ratio">{{ measured.ratio }}:1</span>
+        <span data-part="contrast-level">{{ t(measured.key) }}</span>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'color-picker',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'size() ?? field?.resolvedSize() ?? defaults.size',
+                        '[attr.data-format]': 'resolvedFormat()',
+                        '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() ? '' : null",
+                        '[attr.data-out-of-gamut]': "outOfGamut() ? '' : null",
+                        '[style.--slotted-color-picker-color]': 'css()',
+                        '[style.--slotted-color-picker-opaque]': 'opaque()',
+                        '[style.--slotted-color-picker-hue]': 'hsva().h',
+                        '[style.--slotted-color-picker-x]': 'hsva().s',
+                        '[style.--slotted-color-picker-y]': 'hsva().v',
+                        '[style.--slotted-color-picker-alpha]': 'hsva().a',
+                        '[style.--slotted-color-picker-previous]': 'previousCss()',
+                        '[style.--slotted-color-picker-contrast-with]': 'contrastCss()',
+                    }, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], defaultFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFormat", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], contrastWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "contrastWith", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], formatChange: [{ type: i0.Output, args: ["formatChange"] }] } });
+
+function sameColor(a, b) {
+    const pa = parseColor(a);
+    const pb = parseColor(b);
+    return pa !== null && pb !== null && formatColor(pa.rgba, 'hex') === formatColor(pb.rgba, 'hex');
+}
+/**
+ * A `text-field` holding a colour: the swatch in its start opens the panel in
+ * a popover, and the value can be typed in any notation and is kept in the
+ * one shown. The text is the field's control, so a `slField` label names it;
+ * the host is the consumer's element and the form control.
+ */
+class SlColorField {
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    alpha = input(true, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    presets = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    contrastWith = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contrastWith" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Words laid over the catalog of the language in force, for the trigger and the panel. */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is open. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    formatChange = output();
+    defaults = injectColorPickerDefaults();
+    /** The family's words in the language in force, with this field's `messages` laid over them. */
+    t = injectMessages(colorPickerMessages, this.messages);
+    /** The consumer's name for the field, moved onto the text it names. */
+    label = inject(new HostAttributeToken('aria-label'), { optional: true });
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    ownFormat = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownFormat" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    draft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouched = () => undefined;
+    current = computed(() => this.value() ?? this.own() ?? this.defaultValue() ?? '#000000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    resolvedFormat = computed(() => this.format() ??
+        this.ownFormat() ??
+        parseColor(this.current())?.format ??
+        this.defaults.format, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormat" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    css = computed(() => toCss(clampToGamut(parseColor(this.current())?.rgba ?? { r: 0, g: 0, b: 0, a: 1 })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
+    draftValid = computed(() => {
+        const draft = this.draft();
+        return draft === null || parseColor(draft) !== null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftValid" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        if (value != null)
+            this.own.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    request(next, reason, source) {
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.current(),
+            onRequest: (change) => this.valueChange.emit(change),
+        });
+        if (state.request(next, reason, source)) {
+            this.own.set(next);
+            this.onChangeFn(next);
+        }
+    }
+    commit(event) {
+        const draft = this.draft();
+        if (draft === null)
+            return;
+        const parsed = parseColor(draft);
+        if (parsed !== null && !sameColor(draft, this.current())) {
+            this.request(formatColor(parsed.rgba, this.resolvedFormat()), 'keyboard', event);
+        }
+        this.draft.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlColorField, isStandalone: true, selector: "div[slColorField]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, contrastWith: { classPropertyName: "contrastWith", publicName: "contrastWith", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", valueChange: "valueChange", formatChange: "formatChange" }, host: { properties: { "attr.aria-label": "null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlColorField), multi: true },
+        ], exportAs: ["slColorField"], ngImport: i0, template: `
+    <ng-container slPopover side="bottom" align="start" [(open)]="open">
+      <div slTextField slPopoverAnchor mono [size]="size()">
+        <span slTextFieldStart>
+          <button
+            slPopoverTrigger
+            type="button"
+            data-ui="color-picker"
+            data-part="trigger"
+            [attr.aria-label]="t('trigger')"
+            [disabled]="resolvedDisabled()"
+            [style.--slotted-color-picker-color]="css()"
+          ></button>
+        </span>
+        <input
+          slTextFieldInput
+          dir="ltr"
+          spellcheck="false"
+          autocomplete="off"
+          [attr.aria-label]="label"
+          [disabled]="resolvedDisabled()"
+          [invalid]="draftValid() ? undefined : true"
+          [value]="draft() ?? current()"
+          (valueChange)="draft.set($event.value)"
+          (keydown.enter)="$event.preventDefault(); commit($event)"
+          (blur)="commit($event); onTouched()"
+        />
+      </div>
+      <ng-template slPopoverLayer>
+        <div slPopoverContent [attr.aria-label]="t('trigger')">
+          <div slPopoverBody>
+            <div
+              slColorPicker
+              [value]="current()"
+              [format]="resolvedFormat()"
+              [alpha]="alpha()"
+              [presets]="presets()"
+              [contrastWith]="contrastWith()"
+              [messages]="messages()"
+              (valueChange)="request($event.value, $event.reason, $event.source)"
+              (formatChange)="ownFormat.set($event.value); formatChange.emit($event)"
+            ></div>
+          </div>
+        </div>
+      </ng-template>
+    </ng-container>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n"], dependencies: [{ kind: "component", type: SlColorPicker, selector: "div[slColorPicker]", inputs: ["value", "defaultValue", "format", "defaultFormat", "alpha", "presets", "contrastWith", "size", "disabled", "readOnly", "invalid", "messages"], outputs: ["valueChange", "formatChange"], exportAs: ["slColorPicker"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "directive", type: SlPopoverAnchor, selector: "[slPopoverAnchor]", exportAs: ["slPopoverAnchor"] }, { kind: "directive", type: SlPopoverBody, selector: "[slPopoverBody]", exportAs: ["slPopoverBody"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "directive", type: SlPopoverTrigger, selector: "[slPopoverTrigger]", exportAs: ["slPopoverTrigger"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorField, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[slColorField]', standalone: true, exportAs: 'slColorField', imports: [
+                        SlColorPicker,
+                        SlPopover,
+                        SlPopoverAnchor,
+                        SlPopoverBody,
+                        SlPopoverContent,
+                        SlPopoverLayer,
+                        SlPopoverTrigger,
+                        SlTextField,
+                        SlTextFieldInput,
+                        SlTextFieldStart,
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlColorField), multi: true },
+                    ], template: `
+    <ng-container slPopover side="bottom" align="start" [(open)]="open">
+      <div slTextField slPopoverAnchor mono [size]="size()">
+        <span slTextFieldStart>
+          <button
+            slPopoverTrigger
+            type="button"
+            data-ui="color-picker"
+            data-part="trigger"
+            [attr.aria-label]="t('trigger')"
+            [disabled]="resolvedDisabled()"
+            [style.--slotted-color-picker-color]="css()"
+          ></button>
+        </span>
+        <input
+          slTextFieldInput
+          dir="ltr"
+          spellcheck="false"
+          autocomplete="off"
+          [attr.aria-label]="label"
+          [disabled]="resolvedDisabled()"
+          [invalid]="draftValid() ? undefined : true"
+          [value]="draft() ?? current()"
+          (valueChange)="draft.set($event.value)"
+          (keydown.enter)="$event.preventDefault(); commit($event)"
+          (blur)="commit($event); onTouched()"
+        />
+      </div>
+      <ng-template slPopoverLayer>
+        <div slPopoverContent [attr.aria-label]="t('trigger')">
+          <div slPopoverBody>
+            <div
+              slColorPicker
+              [value]="current()"
+              [format]="resolvedFormat()"
+              [alpha]="alpha()"
+              [presets]="presets()"
+              [contrastWith]="contrastWith()"
+              [messages]="messages()"
+              (valueChange)="request($event.value, $event.reason, $event.source)"
+              (formatChange)="ownFormat.set($event.value); formatChange.emit($event)"
+            ></div>
+          </div>
+        </div>
+      </ng-template>
+    </ng-container>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[attr.aria-label]': 'null' }, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], contrastWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "contrastWith", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], formatChange: [{ type: i0.Output, args: ["formatChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLOR_PICKER_DEFAULTS, SlColorField, SlColorPicker, injectColorPickerDefaults, provideColorPickerDefaults };
+//# sourceMappingURL=slotted-angular-color-picker.mjs.map