import { p as t, H as i, c as e, h as s, F as r, t as o } from './p-BfLQgzDX.js';
import { c as a } from './p-D7YaJBkB.js';
import { C as l } from './p-C0U9wSBw.js';
import { f as n } from './p-BiHzhysf.js';
import { g as c } from './p-BDMnqEGL.js';
import { d as h } from './p-BY6PxsS2.js';
import { d as p } from './p-5F1gBr3j.js';
import { d } from './p-f9tCETeY.js';
import { d as k } from './p-dR-hNm6x.js';
import { d as u } from './p-BpML1w-i.js';
import { d as f } from './p-CE6EHX9u.js';
import { d as b } from './p-BQ5SoHuZ.js';
import { d as m } from './p-C6qt54JA.js';
import { v as g } from './p-CK3_k8jD.js';
function v(t, i, e, s = 1) {
  const r = Math.max((t /= 255), (i /= 255), (e /= 255)),
    o = r - Math.min(t, i, e);
  let a = 0;
  const l = 0 === r ? 0 : (o / r) * 100,
    n = 100 * r;
  if (0 !== o)
    switch (r) {
      case t:
        a = 60 * ((i - e) / o + (i < e ? 6 : 0));
        break;
      case i:
        a = 60 * ((e - t) / o + 2);
        break;
      case e:
        a = 60 * ((t - i) / o + 4);
    }
  return { h: a, s: l, v: n, a: s };
}
function x(t, i, e) {
  ((i /= 100), (e /= 100));
  let s = 0,
    r = 0,
    o = 0;
  const a = Math.floor(6 * (t /= 360)),
    l = 6 * t - a,
    n = e * (1 - i),
    c = e * (1 - l * i),
    h = e * (1 - (1 - l) * i);
  switch (a % 6) {
    case 0:
      ((s = e), (r = h), (o = n));
      break;
    case 1:
      ((s = c), (r = e), (o = n));
      break;
    case 2:
      ((s = n), (r = e), (o = h));
      break;
    case 3:
      ((s = n), (r = c), (o = e));
      break;
    case 4:
      ((s = h), (r = n), (o = e));
      break;
    case 5:
      ((s = e), (r = n), (o = c));
  }
  return { r: Math.round(255 * s), g: Math.round(255 * r), b: Math.round(255 * o) };
}
function y(t) {
  const { r: i, g: e, b: s } = x(t.h, t.s, t.v);
  if (t.a < 1) {
    const r = Math.round(255 * t.a)
      .toString(16)
      .padStart(2, '0');
    return `#${[i, e, s].map(t => t.toString(16).padStart(2, '0')).join('')}${r}`;
  }
  return '#' + [i, e, s].map(t => t.toString(16).padStart(2, '0')).join('');
}
function w(t, i) {
  const { h: e, s, v: r, a: o } = t;
  switch (i) {
    case 'hex':
    default:
      return y(t);
    case 'rgba': {
      const { r: t, g: i, b: a } = x(e, s, r);
      return `rgba(${t}, ${i}, ${a}, ${o.toFixed(2)})`;
    }
  }
}
function M(t) {
  if (!t) return { h: 0, s: 0, v: 0, a: 1 };
  if ((t = t.trim()).startsWith('#')) {
    const i = t.slice(1);
    let e = 0,
      s = 0,
      r = 0,
      o = 1;
    return (
      3 === i.length
        ? ((e = parseInt(i[0] + i[0], 16)), (s = parseInt(i[1] + i[1], 16)), (r = parseInt(i[2] + i[2], 16)))
        : 6 === i.length
          ? ((e = parseInt(i.slice(0, 2), 16)), (s = parseInt(i.slice(2, 4), 16)), (r = parseInt(i.slice(4, 6), 16)))
          : 8 === i.length && ((e = parseInt(i.slice(0, 2), 16)), (s = parseInt(i.slice(2, 4), 16)), (r = parseInt(i.slice(4, 6), 16)), (o = parseInt(i.slice(6, 8), 16) / 255)),
      v(e, s, r, o)
    );
  }
  if (t.startsWith('rgb')) {
    const i = t.match(/rgba?\(([^)]+)\)/);
    if (i) {
      const t = i[1].split(',').map(t => t.trim());
      return v(Number(t[0]), Number(t[1]), Number(t[2]), 4 === t.length ? Number(t[3]) : 1);
    }
  }
  if (t.startsWith('hsl')) {
    const i = t.match(/hsla?\(([^)]+)\)/);
    if (i) {
      const t = i[1].split(',').map(t => t.trim()),
        e = Number(t[0]),
        s = Number(t[1].replace('%', '')) / 100,
        r = Number(t[2].replace('%', '')) / 100,
        o = 4 === t.length ? Number(t[3]) : 1,
        {
          r: a,
          g: l,
          b: n,
        } = (function (t, i, e) {
          const s = (1 - Math.abs(2 * e - 1)) * i,
            r = t / 60,
            o = s * (1 - Math.abs((r % 2) - 1));
          let a = 0,
            l = 0,
            n = 0;
          r >= 0 && r < 1
            ? ((a = s), (l = o), (n = 0))
            : r < 2
              ? ((a = o), (l = s), (n = 0))
              : r < 3
                ? ((a = 0), (l = s), (n = o))
                : r < 4
                  ? ((a = 0), (l = o), (n = s))
                  : r < 5
                    ? ((a = o), (l = 0), (n = s))
                    : ((a = s), (l = 0), (n = o));
          const c = e - s / 2;
          return { r: Math.round(255 * (a + c)), g: Math.round(255 * (l + c)), b: Math.round(255 * (n + c)) };
        })(e, s, r);
      return v(a, l, n, o);
    }
  }
  return { h: 0, s: 0, v: 0, a: 1 };
}
const z = t(
    class extends i {
      constructor(t) {
        (super(),
          !1 !== t && this.__registerHost(),
          this.__attachShadow(),
          (this.tkChange = e(this, 'tk-change', 7)),
          (this.tkOpen = e(this, 'tk-open', 7)),
          (this.tkClose = e(this, 'tk-close', 7)),
          (this.tkApply = e(this, 'tk-apply', 7)),
          (this.tkCancel = e(this, 'tk-cancel', 7)),
          (this.uniqueId = g()),
          (this.isDragging = !1),
          (this.tempInputVal = null),
          (this.pendingValue = null),
          (this.isOpen = !1),
          (this.internalHSVA = { h: 0, s: 0, v: 0, a: 1 }),
          (this.currentFormat = 'hex'),
          (this.hasHeaderSlot = !1),
          (this.hasHeaderActionsSlot = !1),
          (this.hasFooterSlot = !1),
          (this.hasFooterActionsSlot = !1),
          (this.triggerInputValue = ''),
          (this.isTriggerInputFocused = !1),
          (this.value = ''),
          (this.showAsterisk = !1),
          (this.readonly = !1),
          (this.invalid = !1),
          (this.disabled = !1),
          (this.size = 'base'),
          (this.inline = !1),
          (this.orientation = 'vertical'),
          (this.format = 'hex'),
          (this.presets = ['#326FD1', '#C79807', '#A45E3C', '#119C8D', '#EDBBA3', '#ABC9FB', '#D0E1FD', '#FF6259', '#717784', '#85B2F9', '#EAD6FD']),
          (this.showHeader = !1),
          (this.showAlphaSlider = !0),
          (this.showPresets = !0),
          (this.showFormatSelector = !0),
          (this.headerType = 'basic'),
          (this.footerType = 'basic'),
          (this.preventDismiss = !1),
          (this.showCloseButton = !1),
          (this.handleDocumentMouseMove = t => {
            this.isDragging && this.currentDragHandler && (t.preventDefault(), this.currentDragHandler(t));
          }),
          (this.handleDocumentMouseUp = () => {
            this.stopDragging();
          }),
          (this.handleClickOutside = () => {
            this.handleApply();
          }),
          (this.handleTriggerClick = t => {
            (t.stopPropagation(), this.disabled || this.readonly || this.inline || this.isOpen || ((this.pendingValue = Object.assign({}, this.internalHSVA)), (this.isOpen = !0)));
          }),
          (this.handleSaturationPointer = t => {
            if (!this.saturationAreaRef) return;
            const i = this.saturationAreaRef.getBoundingClientRect(),
              e = Math.max(0, Math.min(1, (t.clientX - i.left) / i.width)),
              s = Math.max(0, Math.min(1, (t.clientY - i.top) / i.height));
            this.updateColor({ s: Math.round(100 * e), v: Math.round(100 * (1 - s)) });
          }),
          (this.handleSaturationMouseDown = t => {
            ((this.saturationAreaRef = t.currentTarget),
              this.startDragging(t => {
                this.handleSaturationPointer(t);
              }, t));
          }),
          (this.handleHueChange = t => {
            if (!this.hueSliderRef) return;
            const i = this.hueSliderRef.getBoundingClientRect(),
              e = this.hueSliderRef.classList.contains('tk-color-picker-slider-vertical');
            let s;
            ((s = Math.max(0, Math.min(1, e ? (t.clientY - i.top) / i.height : (t.clientX - i.left) / i.width))), this.updateColor({ h: 360 * s }));
          }),
          (this.handleHueMouseDown = t => {
            ((this.hueSliderRef = t.currentTarget), this.startDragging(this.handleHueChange, t));
          }),
          (this.handleAlphaChange = t => {
            if (!this.alphaSliderRef) return;
            const i = this.alphaSliderRef.getBoundingClientRect(),
              e = this.alphaSliderRef.classList.contains('tk-color-picker-slider-vertical');
            let s;
            ((s = Math.max(0, Math.min(1, e ? (t.clientY - i.top) / i.height : (t.clientX - i.left) / i.width))), this.updateColor({ a: s }));
          }),
          (this.handleAlphaMouseDown = t => {
            ((this.alphaSliderRef = t.currentTarget), this.startDragging(this.handleAlphaChange, t));
          }),
          (this.handleRgbChange = (t, i) => {
            const e = Math.max(0, Math.min(255, parseInt(i) || 0)),
              { r: s, g: r, b: o } = x(this.internalHSVA.h, this.internalHSVA.s, this.internalHSVA.v);
            let a = s,
              l = r,
              n = o;
            ('r' === t && (a = e), 'g' === t && (l = e), 'b' === t && (n = e));
            const c = v(a, l, n, this.internalHSVA.a);
            ((0 !== c.s && 0 !== c.v) || (c.h = this.internalHSVA.h), (this.internalHSVA = c));
          }),
          (this.handleInputBlur = t => {
            if (null === this.tempInputVal) return;
            const i = this.tempInputVal + '';
            if (((this.tempInputVal = null), 'hex' === t)) {
              const t = M('#' + i);
              ((0 !== t.s && 0 !== t.v) || (t.h = this.internalHSVA.h), (this.internalHSVA = t));
            } else 'a' === t ? this.updateColor({ a: Math.max(0, Math.min(100, Number(i))) / 100 }) : this.handleRgbChange(t, i);
          }),
          (this.handleEyeDropper = async () => {
            if (window.EyeDropper)
              try {
                const t = new window.EyeDropper(),
                  i = await t.open();
                this.internalHSVA = M(i.sRGBHex);
              } catch (t) {}
          }),
          (this.handleFormatChange = t => {
            ((this.currentFormat = t.detail), t.stopPropagation());
          }),
          (this.handleApply = () => {
            const t = w(this.internalHSVA, this.currentFormat);
            ((this.value = t), (this.pendingValue = null), this.tkApply.emit(t), this.tkChange.emit(t), (this.isOpen = !1));
          }),
          (this.handleCancel = () => {
            (this.pendingValue && ((this.internalHSVA = this.pendingValue), (this.pendingValue = null)), this.tkCancel.emit(), (this.isOpen = !1));
          }),
          (this.handleCloseClick = () => {
            this.handleCancel();
          }),
          (this.handleTriggerInputFocus = () => {
            ((this.isTriggerInputFocused = !0), (this.triggerInputValue = this.value || ''));
          }),
          (this.handleTriggerInputBlur = () => {
            ((this.isTriggerInputFocused = !1), this.applyTriggerInputValue());
          }),
          (this.handleTriggerInputChange = t => {
            this.triggerInputValue = t.detail.value;
          }),
          (this.handleTriggerInputKeyDown = t => {
            if ('Enter' === t.key) (t.preventDefault(), this.applyTriggerInputValue());
            else if ('Escape' === t.key) {
              t.preventDefault();
              const i = w(this.internalHSVA, this.currentFormat);
              this.triggerInputValue = i;
            }
          }));
      }
      isOpenChanged(t) {
        t ? this.tkOpen.emit() : this.tkClose.emit();
      }
      valueChanged(t) {
        this.isDragging || (this.internalHSVA = M(t));
      }
      disabledChanged(t) {
        t && (this.isOpen = !1);
      }
      componentWillLoad() {
        ((this.internalHSVA = M(this.value || '#000000')),
          (this.currentFormat = 'hex' === this.format || 'rgba' === this.format ? this.format : 'hex'),
          (this.hasHeaderSlot = !!this.el.querySelector(':scope > [slot="header"]')),
          (this.hasHeaderActionsSlot = !!this.el.querySelector(':scope > [slot="header-actions"]')),
          (this.hasFooterSlot = !!this.el.querySelector(':scope > [slot="footer"]')),
          (this.hasFooterActionsSlot = !!this.el.querySelector(':scope > [slot="footer-actions"]')));
      }
      componentDidLoad() {
        var t;
        const i = null === (t = this.inputRef) || void 0 === t ? void 0 : t.querySelector('.tk-input');
        this.clickOutsideMixin = new l({
          referenceElement: null != i ? i : this.el,
          handler: this.handleClickOutside,
          disabled: !this.isOpen || this.disabled || this.readonly || this.inline || this.preventDismiss,
        });
      }
      componentDidUpdate() {
        var t, i, e;
        (null === (t = this.clickOutsideMixin) ||
          void 0 === t ||
          t.updateConfig({ disabled: !this.isOpen || this.disabled || this.readonly || this.inline || this.preventDismiss, ignoredElements: this.panelRef ? [this.panelRef] : [] }),
          this.isOpen && this.inputRef && this.panelRef
            ? (null === (i = this.cleanup) || void 0 === i || i.call(this), this.updatePosition())
            : (null === (e = this.cleanup) || void 0 === e || e.call(this), (this.cleanup = null)));
      }
      disconnectedCallback() {
        var t, i;
        (null === (t = this.clickOutsideMixin) || void 0 === t || t.disconnectedCallback(),
          null === (i = this.cleanup) || void 0 === i || i.call(this),
          (this.cleanup = null),
          this.stopDragging());
      }
      async open() {
        this.disabled || this.readonly || this.inline || ((this.pendingValue = Object.assign({}, this.internalHSVA)), (this.isOpen = !0));
      }
      async close() {
        this.isOpen = !1;
      }
      async getValue(t) {
        return w(this.internalHSVA, t || this.currentFormat);
      }
      async apply() {
        this.handleApply();
      }
      async cancel() {
        this.handleCancel();
      }
      startDragging(t, i) {
        ((this.isDragging = !0),
          (this.currentDragHandler = t),
          t(i),
          document.addEventListener('mousemove', this.handleDocumentMouseMove),
          document.addEventListener('mouseup', this.handleDocumentMouseUp));
      }
      stopDragging() {
        ((this.isDragging = !1),
          (this.currentDragHandler = void 0),
          document.removeEventListener('mousemove', this.handleDocumentMouseMove),
          document.removeEventListener('mouseup', this.handleDocumentMouseUp));
      }
      updatePosition() {
        const t = this.inputRef.querySelector('.tk-input');
        this.cleanup = n(t, this.panelRef, void 0, { placement: 'bottom-end' });
      }
      updateColor(t) {
        this.internalHSVA = Object.assign(Object.assign({}, this.internalHSVA), t);
      }
      applyTriggerInputValue() {
        if (!this.triggerInputValue) return;
        const t = M(this.triggerInputValue);
        if (0 !== t.h || 0 !== t.s || 0 !== t.v || this.triggerInputValue.toLowerCase().includes('000')) {
          this.internalHSVA = t;
          const i = w(this.internalHSVA, this.currentFormat);
          ((this.value = i), this.tkChange.emit(i));
        }
      }
      handlePresetSelect(t) {
        this.internalHSVA = M(t);
      }
      createEyedropperButton() {
        return s('tk-button', {
          'variant': 'neutral',
          'type': 'outlined',
          'size': 'small',
          'icon': 'colorize',
          'onTk-click': this.handleEyeDropper,
          'disabled': this.disabled,
          'dataTestid': c(this.dataTestid, 'eyedropper-button'),
        });
      }
      createColorPreview() {
        return s('div', {
          'class': 'tk-color-picker-preview-box',
          'style': { backgroundColor: w(this.internalHSVA, this.currentFormat) },
          'data-testid': c(this.dataTestid, 'preview'),
        });
      }
      createSaturation() {
        const { h: t, s: i, v: e } = this.internalHSVA;
        return s(
          'div',
          {
            'class': 'tk-color-picker-saturation-container',
            'style': { backgroundColor: `hsl(${t}, 100%, 50%)` },
            'onMouseDown': this.handleSaturationMouseDown,
            'data-testid': c(this.dataTestid, 'saturation'),
          },
          s('div', { 'class': 'tk-color-picker-saturation-white', 'data-testid': c(this.dataTestid, 'white') }),
          s('div', { 'class': 'tk-color-picker-saturation-black', 'data-testid': c(this.dataTestid, 'black') }),
          s('div', { 'class': 'tk-color-picker-saturation-pointer', 'style': { left: i + '%', top: 100 - e + '%' }, 'data-testid': c(this.dataTestid, 'pointer') }),
        );
      }
      createSliders() {
        const t = 'horizontal' === this.orientation,
          i = a('tk-color-picker-slider', { 'tk-color-picker-slider-vertical': t }),
          e = (this.internalHSVA.h / 360) * 100;
        return s(
          'div',
          { 'class': a('tk-color-picker-sliders', { 'tk-color-picker-sliders-vertical-layout': t }), 'data-testid': c(this.dataTestid, 'sliders') },
          s(
            'div',
            { 'class': i + ' tk-color-picker-hue', 'ref': t => (this.hueSliderRef = t), 'onMouseDown': this.handleHueMouseDown, 'data-testid': c(this.dataTestid, 'hue') },
            s(
              'div',
              {
                'class': 'tk-color-picker-slider-thumb',
                'style': t ? { top: e + '%', left: '50%' } : { left: e + '%', top: '50%' },
                'data-testid': c(this.dataTestid, 'hue-thumb'),
              },
              s('div', { 'class': 'tk-color-picker-slider-thumb-inner', 'data-testid': c(this.dataTestid, 'hue-inner-thumb') }),
            ),
          ),
          this.showAlphaSlider &&
            s(
              'div',
              { 'class': i, 'ref': t => (this.alphaSliderRef = t), 'onMouseDown': this.handleAlphaMouseDown, 'data-testid': c(this.dataTestid, 'alpha') },
              s('div', { 'class': 'tk-color-picker-alpha-bg', 'data-testid': c(this.dataTestid, 'slider') }),
              s('div', {
                'class': 'tk-color-picker-alpha-overlay',
                'style': { background: `linear-gradient(${t ? 'to bottom' : 'to right'}, transparent, ${y(this.internalHSVA)})` },
                'data-testid': c(this.dataTestid, 'overlay'),
              }),
              s(
                'div',
                {
                  'class': 'tk-color-picker-slider-thumb',
                  'style': t ? { top: 100 * this.internalHSVA.a + '%', left: '50%' } : { left: 100 * this.internalHSVA.a + '%', top: '50%' },
                  'data-testid': c(this.dataTestid, 'alpha-thumb'),
                },
                s('div', { 'class': 'tk-color-picker-slider-thumb-inner', 'data-testid': c(this.dataTestid, 'alpha-inner-thumb') }),
              ),
            ),
        );
      }
      createAlphaInput() {
        return this.showAlphaSlider
          ? s('tk-input', {
              'class': 'tk-color-picker-alpha-input',
              'mode': 'number',
              'size': 'small',
              'min': '0',
              'max': '100',
              'value': (100 * this.internalHSVA.a).toFixed(0),
              'disabled': this.disabled,
              'onTk-change': t => (this.tempInputVal = t.detail),
              'onTk-blur': () => this.handleInputBlur('a'),
              'dataTestid': c(this.dataTestid, 'alpha-input'),
            })
          : null;
      }
      createInputs() {
        const { r: t, g: i, b: e } = x(this.internalHSVA.h, this.internalHSVA.s, this.internalHSVA.v);
        return s(
          'div',
          { 'class': 'tk-color-picker-inputs', 'data-testid': c(this.dataTestid, 'inputs') },
          this.showFormatSelector &&
            s('tk-select', {
              'class': 'tk-color-picker-format-select',
              'size': 'small',
              'value': this.currentFormat,
              'optionValueKey': 'value',
              'disabled': this.disabled,
              'options': [
                { value: 'hex', label: 'HEX' },
                { value: 'rgba', label: 'RGB' },
              ],
              'onTk-change': this.handleFormatChange,
              'data-testid': c(this.dataTestid, 'format-select'),
            }),
          s(
            'div',
            { 'class': 'tk-color-picker-input-fields', 'data-testid': c(this.dataTestid, 'input-fields') },
            'hex' === this.currentFormat &&
              s(
                r,
                null,
                s('tk-input', {
                  'class': 'tk-color-picker-hex-input',
                  'size': 'small',
                  'icon': 'tag',
                  'iconPosition': 'left',
                  'value': y(this.internalHSVA).replace('#', ''),
                  'disabled': this.disabled,
                  'onTk-change': t => (this.tempInputVal = t.detail),
                  'onTk-blur': () => this.handleInputBlur('hex'),
                  'dataTestid': c(this.dataTestid, 'hex-input'),
                }),
                this.createAlphaInput(),
              ),
            'rgba' === this.currentFormat &&
              s(
                'div',
                { 'class': 'tk-color-picker-rgb-inputs', 'data-testid': c(this.dataTestid, 'rgb') },
                s('tk-input', {
                  'class': 'tk-color-picker-rgb-input',
                  'size': 'small',
                  'value': '' + t,
                  'disabled': this.disabled,
                  'onTk-change': t => (this.tempInputVal = t.detail),
                  'onTk-blur': () => this.handleInputBlur('r'),
                  'dataTestid': c(this.dataTestid, 'red-input'),
                }),
                s('tk-input', {
                  'class': 'tk-color-picker-rgb-input',
                  'size': 'small',
                  'value': '' + i,
                  'disabled': this.disabled,
                  'onTk-change': t => (this.tempInputVal = t.detail),
                  'onTk-blur': () => this.handleInputBlur('g'),
                  'dataTestid': c(this.dataTestid, 'green-input'),
                }),
                s('tk-input', {
                  'class': 'tk-color-picker-rgb-input',
                  'size': 'small',
                  'value': '' + e,
                  'disabled': this.disabled,
                  'onTk-change': t => (this.tempInputVal = t.detail),
                  'onTk-blur': () => this.handleInputBlur('b'),
                  'dataTestid': c(this.dataTestid, 'blue-input'),
                }),
                this.createAlphaInput(),
              ),
          ),
        );
      }
      createPresets() {
        var t;
        return this.showPresets && (null === (t = this.presets) || void 0 === t ? void 0 : t.length)
          ? s(
              'div',
              { 'class': 'tk-color-picker-presets', 'data-testid': c(this.dataTestid, 'presets') },
              this.presets.map((t, i) =>
                s('div', {
                  'class': 'tk-color-picker-preset',
                  'style': { backgroundColor: t },
                  'onClick': () => this.handlePresetSelect(t),
                  'data-testid': c(this.dataTestid, 'preset', '' + i),
                }),
              ),
            )
          : null;
      }
      createFooter() {
        if (this.hasFooterSlot) return s('slot', { name: 'footer' });
        if (this.hasFooterActionsSlot) {
          const t = a('tk-color-picker-panel-footer', 'tk-color-picker-panel-footer-' + this.footerType);
          return s('div', { 'class': t, 'data-testid': c(this.dataTestid, 'footer-actions') }, s('slot', { name: 'footer-actions' }));
        }
        return null;
      }
      createPanelHeader() {
        if (!this.showHeader) return null;
        if (this.hasHeaderSlot) return s('slot', { name: 'header' });
        {
          const t = a('tk-color-picker-panel-header', 'tk-color-picker-panel-header-' + this.headerType);
          return s(
            'div',
            { 'class': t, 'data-testid': c(this.dataTestid, 'header') },
            s('span', { 'class': 'tk-color-picker-title', 'data-testid': c(this.dataTestid, 'title') }, this.header),
            this.hasHeaderActionsSlot
              ? s('slot', { name: 'header-actions' })
              : !this.inline &&
                  this.showCloseButton &&
                  s('tk-button', {
                    variant: 'neutral',
                    type: 'text',
                    size: 'small',
                    icon: 'close',
                    onClick: this.handleCloseClick,
                    dataTestid: c(this.dataTestid, 'close-button'),
                  }),
          );
        }
      }
      createPanelBody() {
        return 'horizontal' === this.orientation
          ? s(
              r,
              null,
              s(
                'div',
                { 'class': 'tk-color-picker-body-horizontal', 'data-testid': c(this.dataTestid, 'horizontal') },
                s(
                  'div',
                  { 'class': 'tk-color-picker-controls-side', 'data-testid': c(this.dataTestid, 'controls') },
                  this.createColorPreview(),
                  this.createSliders(),
                  this.createEyedropperButton(),
                ),
                s('div', { 'class': 'tk-color-picker-saturation-wrapper', 'data-testid': c(this.dataTestid, 'saturation-wrapper') }, this.createSaturation()),
              ),
              this.createInputs(),
              this.createPresets(),
            )
          : s(
              r,
              null,
              s(
                'div',
                { 'class': 'tk-color-picker-body-vertical', 'data-testid': c(this.dataTestid, 'vertical') },
                this.createSaturation(),
                s(
                  'div',
                  { 'class': 'tk-color-picker-controls-bottom', 'data-testid': c(this.dataTestid, 'controls') },
                  s(
                    'div',
                    { 'class': 'tk-color-picker-eyedropper-row', 'data-testid': c(this.dataTestid, 'eyedropper-row') },
                    this.createEyedropperButton(),
                    this.createSliders(),
                    this.createColorPreview(),
                  ),
                  this.createInputs(),
                ),
              ),
              this.createPresets(),
            );
      }
      renderInput() {
        return this.inline
          ? null
          : s('tk-input', {
              'ref': t => (this.inputRef = t),
              'label': this.label,
              'readonly': this.readonly,
              'disabled': this.disabled,
              'invalid': this.invalid,
              'error': this.error,
              'hint': this.hint,
              'showAsterisk': this.showAsterisk,
              'name': this.name,
              'size': this.size,
              'placeholder': this.placeholder,
              'icon': { left: { name: 'circle', color: this.value || '#000000', style: 'outlined', fill: !0 }, right: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' },
              'value': this.isTriggerInputFocused ? this.triggerInputValue : this.value,
              'aria-describedby': 'dropdown',
              'aria-expanded': this.isOpen,
              'onClick': this.handleTriggerClick,
              'onTk-focus': this.handleTriggerInputFocus,
              'onTk-blur': this.handleTriggerInputBlur,
              'onTk-change': this.handleTriggerInputChange,
              'onKeyDown': this.handleTriggerInputKeyDown,
              'dataTestid': c(this.dataTestid, 'trigger-input'),
            });
      }
      renderPanel() {
        const t = a('tk-color-picker-panel', { 'tk-color-picker-panel-inline': this.inline, 'tk-color-picker-panel-horizontal': 'horizontal' === this.orientation });
        return s(
          'div',
          { 'class': t, 'ref': t => (this.panelRef = t), 'data-tk-id': this.uniqueId, 'data-testid': c(this.dataTestid, 'panel') },
          this.createPanelHeader(),
          s('div', { 'class': 'tk-color-picker-panel-body', 'data-testid': c(this.dataTestid, 'body') }, this.createPanelBody()),
          this.createFooter(),
        );
      }
      render() {
        const t = a('tk-color-picker', { 'tk-color-picker-inline': this.inline, 'tk-color-picker-horizontal': 'horizontal' === this.orientation });
        return s(
          'div',
          { 'key': '78165c5fbbf530e7837fb46c6341b4ffbf77f0c1', 'class': t, 'data-testid': c(this.dataTestid, 'container') },
          this.renderInput(),
          (this.isOpen || this.inline) && this.renderPanel(),
        );
      }
      get el() {
        return this;
      }
      static get watchers() {
        return { isOpen: [{ isOpenChanged: 0 }], value: [{ valueChanged: 0 }], disabled: [{ disabledChanged: 0 }] };
      }
      static get style() {
        return '@font-face{font-family:"Material Symbols Outlined";src:url("./assets/fonts/material-symbols/Material-Symbols-Outlined.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}.material-symbols-outlined{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.material-symbols-outlined{font-variation-settings:"FILL" 0}.material-symbols-outlined.fill{font-variation-settings:"FILL" 1}@font-face{font-family:"Material Symbols Rounded";src:url("./assets/fonts/material-symbols/Material-Symbols-Rounded.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.material-symbols-rounded{font-variation-settings:"FILL" 0}.material-symbols-rounded.fill{font-variation-settings:"FILL" 1}@font-face{font-family:"Material Symbols Sharp";src:url("./assets/fonts/material-symbols/Material-Symbols-Sharp.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}.material-symbols-sharp{font-family:"Material Symbols Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.material-symbols-sharp{font-variation-settings:"FILL" 0}.material-symbols-sharp.fill{font-variation-settings:"FILL" 1}:host{display:block}.tk-color-picker{display:inline-block;position:relative;width:100%;font-family:var(--family-body)}.tk-color-picker.tk-color-picker-inline{width:auto;display:flex}.tk-color-picker-panel{position:fixed;z-index:800;background:var(--static-light, #ffffff);border:1px solid var(--border-light, #e1e4ea);border-radius:16px;box-shadow:0px 8px 20px rgba(82, 88, 102, 0.08);display:flex;flex-direction:column;overflow:hidden;width:280px}.tk-color-picker-panel.tk-color-picker-panel-inline{position:relative;z-index:1;box-shadow:none;margin-top:0}.tk-color-picker-panel-header{display:flex;align-items:center;justify-content:space-between;padding:4px 12px}.tk-color-picker-panel-header .tk-color-picker-title{font-family:var(--desktop-body-m-base-font);font-size:var(--desktop-body-m-base-size, 16px);font-weight:400;line-height:var(--desktop-body-m-base-line-height, 24px);color:var(--text-darkest, #222530)}.tk-color-picker-panel-header.tk-color-picker-panel-header-basic{background:var(--static-light, #ffffff)}.tk-color-picker-panel-header.tk-color-picker-panel-header-divided{background:var(--static-light, #ffffff);border-bottom:var(--spacing-px, 1px) solid var(--border-light, #e1e4ea)}.tk-color-picker-panel-header.tk-color-picker-panel-header-light{background:var(--background-lightest, #f9fafc);border-bottom:var(--spacing-px, 1px) solid var(--border-light, #e1e4ea)}.tk-color-picker-panel-header.tk-color-picker-panel-header-dark{background:var(--background-darkest, #222530)}.tk-color-picker-panel-header.tk-color-picker-panel-header-dark .tk-color-picker-title{color:var(--text-lightest, #f9fafc)}.tk-color-picker-panel-header.tk-color-picker-panel-header-primary{background:var(--primary-base, #c90019)}.tk-color-picker-panel-header.tk-color-picker-panel-header-primary .tk-color-picker-title{color:var(--text-lightest, #f9fafc)}.tk-color-picker-panel-body{padding:8px;display:flex;flex-direction:column;gap:16px}.tk-color-picker-body-vertical{display:flex;flex-direction:column;gap:16px}.tk-color-picker-body-vertical .tk-color-picker-saturation-container{width:100%;height:264px}.tk-color-picker-body-vertical .tk-color-picker-controls-bottom{display:flex;flex-direction:column;gap:16px}.tk-color-picker-body-vertical .tk-color-picker-controls-bottom .tk-color-picker-eyedropper-row{display:flex;gap:8px;align-items:center}.tk-color-picker-body-vertical .tk-color-picker-controls-bottom .tk-color-picker-eyedropper-row .tk-color-picker-sliders{flex:1;display:flex;flex-direction:column;gap:8px}.tk-color-picker-body-horizontal{display:flex;gap:8px;height:264px}.tk-color-picker-body-horizontal .tk-color-picker-controls-side{display:flex;flex-direction:column;gap:16px;width:32px;align-items:center}.tk-color-picker-body-horizontal .tk-color-picker-controls-side .tk-color-picker-sliders-vertical-layout{flex:1;display:flex;flex-direction:row;gap:8px;width:100%;justify-content:center}.tk-color-picker-body-horizontal .tk-color-picker-saturation-wrapper{flex:1;height:100%}.tk-color-picker-body-horizontal .tk-color-picker-saturation-wrapper .tk-color-picker-saturation-container{width:100%;height:100%}.tk-color-picker-saturation-container{position:relative;border-radius:8px;border:1px solid var(--border-light, #e1e4ea);overflow:hidden;cursor:crosshair}.tk-color-picker-saturation-container .tk-color-picker-saturation-white{position:absolute;inset:0;background:linear-gradient(to right, #fff, rgba(255, 255, 255, 0))}.tk-color-picker-saturation-container .tk-color-picker-saturation-black{position:absolute;inset:0;background:linear-gradient(to top, #000, rgba(0, 0, 0, 0))}.tk-color-picker-saturation-container .tk-color-picker-saturation-pointer{position:absolute;width:14px;height:14px;border:2px solid white;border-radius:50%;transform:translate(-50%, -50%);box-shadow:0 0 2px rgba(0, 0, 0, 0.5);pointer-events:none}.tk-color-picker-preview-box{width:32px;height:32px;border-radius:8px;border:1px solid var(--border-light, #e1e4ea);flex-shrink:0}.tk-color-picker-slider{position:relative;height:12px;border-radius:24px;cursor:pointer;width:100%;border:1px solid var(--overlay-black-xlightest, rgba(0, 0, 0, 0.08))}.tk-color-picker-slider.tk-color-picker-hue{background:linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 67%, #f0f 83%, red 100%)}.tk-color-picker-slider.tk-color-picker-slider-vertical{width:12px;height:100%}.tk-color-picker-slider.tk-color-picker-slider-vertical.tk-color-picker-hue{background:linear-gradient(to bottom, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 67%, #f0f 83%, red 100%)}.tk-color-picker-slider .tk-color-picker-alpha-bg{position:absolute;inset:0;border-radius:24px;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0}.tk-color-picker-slider .tk-color-picker-alpha-overlay{position:absolute;inset:0;border-radius:24px}.tk-color-picker-slider .tk-color-picker-slider-thumb{position:absolute;width:10px;height:10px;padding:4px;border-radius:50%;border:1px solid var(--border-light, #e1e4ea);background:var(--static-white, #fff);box-shadow:0 0 20px 3px var(--shadow-black-alpha-light, rgba(82, 88, 102, 0.04));transform:translate(-50%, -50%);pointer-events:none;display:flex;align-items:center;justify-content:center}.tk-color-picker-slider .tk-color-picker-slider-thumb .tk-color-picker-slider-thumb-inner{width:8px;height:8px;border-radius:50%;background:var(--blue-600, #326fd1)}.tk-color-picker-inputs{display:flex;gap:8px;align-items:center}.tk-color-picker-inputs .tk-color-picker-format-select{width:65px;flex-shrink:0}.tk-color-picker-inputs .tk-color-picker-input-fields{flex:1;display:flex;gap:4px;min-width:0}.tk-color-picker-inputs .tk-color-picker-input-fields tk-input{width:100%}.tk-color-picker-inputs .tk-color-picker-input-fields .tk-color-picker-rgb-inputs{flex:1;min-width:0;display:flex;gap:4px}.tk-color-picker-inputs .tk-color-picker-input-fields .tk-color-picker-rgb-inputs .tk-color-picker-rgb-input{flex:1;min-width:38px}.tk-color-picker-inputs .tk-color-picker-input-fields .tk-color-picker-hex-input{flex:1}.tk-color-picker-inputs .tk-color-picker-input-fields .tk-color-picker-alpha-input{width:56px;flex:0 0 56px}.tk-color-picker-presets{display:flex;flex-wrap:wrap;gap:4px;padding:2px}.tk-color-picker-presets .tk-color-picker-preset{width:20px;height:20px;border-radius:6px;cursor:pointer}.tk-color-picker-panel-footer{padding:8px;display:flex;justify-content:flex-end;align-items:center;gap:var(--card-footer-base-gap, 8px)}.tk-color-picker-panel-footer ::slotted([slot=footer-actions]){display:flex;align-items:center;gap:var(--card-footer-base-gap, 8px)}.tk-color-picker-panel-footer.tk-color-picker-panel-footer-basic{background:var(--static-light, #ffffff)}.tk-color-picker-panel-footer.tk-color-picker-panel-footer-divided{background:var(--static-light, #ffffff);border-top:var(--spacing-px, 1px) solid var(--border-light, #e1e4ea)}.tk-color-picker-panel-footer.tk-color-picker-panel-footer-light{background:var(--background-lightest, #f9fafc);border-top:var(--spacing-px, 1px) solid var(--border-light, #e1e4ea)}';
      }
    },
    [
      257,
      'tk-color-picker',
      {
        value: [1025],
        label: [1],
        header: [1],
        showAsterisk: [4, 'show-asterisk'],
        readonly: [4],
        name: [1],
        invalid: [4],
        error: [1],
        hint: [1],
        placeholder: [1],
        disabled: [4],
        size: [1],
        inline: [4],
        orientation: [1],
        format: [1],
        presets: [16],
        showHeader: [4, 'show-header'],
        showAlphaSlider: [4, 'show-alpha-slider'],
        showPresets: [4, 'show-presets'],
        showFormatSelector: [4, 'show-format-selector'],
        headerType: [1, 'header-type'],
        footerType: [1, 'footer-type'],
        preventDismiss: [4, 'prevent-dismiss'],
        showCloseButton: [4, 'show-close-button'],
        dataTestid: [513, 'data-testid'],
        isOpen: [32],
        internalHSVA: [32],
        currentFormat: [32],
        hasHeaderSlot: [32],
        hasHeaderActionsSlot: [32],
        hasFooterSlot: [32],
        hasFooterActionsSlot: [32],
        triggerInputValue: [32],
        isTriggerInputFocused: [32],
        open: [64],
        close: [64],
        getValue: [64],
        apply: [64],
        cancel: [64],
      },
      void 0,
      { isOpen: [{ isOpenChanged: 0 }], value: [{ valueChanged: 0 }], disabled: [{ disabledChanged: 0 }] },
    ],
  ),
  C = z,
  T = function () {
    'undefined' != typeof customElements &&
      ['tk-color-picker', 'tk-button', 'tk-checkbox', 'tk-chips', 'tk-divider', 'tk-icon', 'tk-input', 'tk-select', 'tk-spinner'].forEach(t => {
        switch (t) {
          case 'tk-color-picker':
            customElements.get(o(t)) || customElements.define(o(t), z);
            break;
          case 'tk-button':
            customElements.get(o(t)) || h();
            break;
          case 'tk-checkbox':
            customElements.get(o(t)) || p();
            break;
          case 'tk-chips':
            customElements.get(o(t)) || d();
            break;
          case 'tk-divider':
            customElements.get(o(t)) || k();
            break;
          case 'tk-icon':
            customElements.get(o(t)) || u();
            break;
          case 'tk-input':
            customElements.get(o(t)) || f();
            break;
          case 'tk-select':
            customElements.get(o(t)) || b();
            break;
          case 'tk-spinner':
            customElements.get(o(t)) || m();
        }
      });
  };
export { C as TkColorPicker, T as defineCustomElement };
