@designbasekorea/ui-wc 0.5.5 → 0.5.6

package/dist/esm/components/db-color-picker.js

@@ -1 +1,746 @@
-import{hexToRgb as t,rgbToHsv as e,hsvToRgb as i,toHex as s,rgbToHsl as l,formatColor as n,normalizeHex as o,isHex as a,clamp as r}from"./color-picker-utils.js";import{getDbComponentIconSize as h,createDbIcon as d}from"./db-icons.js";const p=["s","m","l"],u=["dropdown","modal"],c=["bottom-start","bottom-end","top-start","top-end"],g="#006FFF",E=t(g)??{r:0,g:111,b:255},m=e(E.r,E.g,E.b),b=JSON.stringify([{label:"HEX",value:"hex"},{label:"RGB",value:"rgb"},{label:"RGBA",value:"rgba"},{label:"HSL",value:"hsl"},{label:"HSLA",value:"hsla"}]);class DbColorPicker extends HTMLElement{constructor(){super(...arguments),this.h=m.h,this.s=m.s,this.v=m.v,this.a=100,this.open=!1,this.format="hex",this.colorInput=g,this.alphaInput="100",this.isCopied=!1,this.tempColor="",this.dragging=null,this.mounted=!1,this.copiedTimer=null,this.debounceTimer=null,this.lastEmittedHex="",this.suppressNextValueSync=!1,this.didMount=!1,this.triggerInputFocused=!1,this.panelInputFocused=!1,this.panelAlphaInputFocused=!1,this.handleOutsideClick=t=>{if(!this.open||"dropdown"!==this.getOption("type",u,"dropdown"))return;const e=t.target;this.contains(e)||this.formatSelectEl?.contains(e)||(this.open=!1,this.update())},this.handleDocumentMouseMove=t=>{"area"===this.dragging&&(this.getBool("disabled")||this.getBool("readonly")||this.updateFromArea(t.clientX,t.clientY))},this.handleDocumentMouseUp=()=>{"area"===this.dragging&&(this.dragging=null,this.onColorStateChanged(!0))},this.handleModalCancel=()=>{const i=t(this.tempColor);if(i){const t=e(i.r,i.g,i.b);this.h=t.h,this.s=t.s,this.v=t.v}this.open=!1,this.update(),this.dispatchEvent(new CustomEvent("db-cancel",{bubbles:!0,composed:!0}))},this.handleModalApply=()=>{this.open=!1,this.actuallyEmit(),this.dispatchEvent(new CustomEvent("db-apply",{detail:{value:this.getOutward()},bubbles:!0,composed:!0})),this.update()}}static get observedAttributes(){return["size","type","position","value","default-value","show-input","show-alpha","show-format-selector","show-copy-button","show-eyedropper","disabled","readonly","full-width","error","on-change-format","change-debounce-ms","emit-during-drag"]}connectedCallback(){this.mounted||this.mount(),this.syncFromValueAttr(!0),this.update(),document.addEventListener("mousedown",this.handleOutsideClick),document.addEventListener("mousemove",this.handleDocumentMouseMove),document.addEventListener("mouseup",this.handleDocumentMouseUp)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleOutsideClick),document.removeEventListener("mousemove",this.handleDocumentMouseMove),document.removeEventListener("mouseup",this.handleDocumentMouseUp),this.copiedTimer&&clearTimeout(this.copiedTimer),this.debounceTimer&&clearTimeout(this.debounceTimer)}attributeChangedCallback(t){this.mounted&&("value"!==t&&"default-value"!==t||this.syncFromValueAttr(!1),this.update())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getOption(t,e,i){const s=this.getAttribute(t);return s&&e.includes(s)?s:i}getIconSize(){return h(this.getOption("size",p,"m"))}getRgb(){return i(this.h,this.s,this.v)}getHex(){const t=this.getRgb();return s(t.r,t.g,t.b)}getHsl(){const t=this.getRgb();return l(t.r,t.g,t.b)}getUiFormatted(){const t=this.getRgb(),e=this.getHex(),i=this.getHsl();return n(this.format,t,e,i,this.a)}getOutward(){return"hex"===("ui"===this.getAttribute("on-change-format")?"ui":"hex")?this.getHex():this.getUiFormatted()}syncFromValueAttr(i){const s=this.getAttribute("value")??(i?this.getAttribute("default-value"):null)??(i?g:null);if(null==s)return;const l=o(s);if(!a(l))return;if(!i&&this.suppressNextValueSync&&l===this.lastEmittedHex)return void(this.suppressNextValueSync=!1);const n=t(l);if(!n)return;const r=e(n.r,n.g,n.b);this.h=r.h,this.s=r.s,this.v=r.v,this.colorInput=l,this.lastEmittedHex=l}actuallyEmit(){const t=o(this.getHex()),e=this.hasAttribute("value")&&a(this.getAttribute("value")||"")?o(this.getAttribute("value")||""):null;e&&e===t||this.lastEmittedHex!==t&&(this.lastEmittedHex=t,this.suppressNextValueSync=!0,this.setAttribute("value",t),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.getOutward()},bubbles:!0,composed:!0})))}scheduleEmit(){const t=this.getBool("emit-during-drag",!0);if(this.dragging&&!t)return;const e=Number(this.getAttribute("change-debounce-ms")||"0");if(e>0)return this.debounceTimer&&clearTimeout(this.debounceTimer),void(this.debounceTimer=setTimeout(()=>this.actuallyEmit(),e));this.actuallyEmit()}onColorStateChanged(t=!1){this.didMount?(!t||this.getBool("emit-during-drag",!0),this.scheduleEmit()):this.didMount=!0}updateFromArea(t,e){const i=this.colorFieldEl;if(!i)return;const s=i.getBoundingClientRect(),l=r(t-s.left,0,s.width),n=r(e-s.top,0,s.height);this.s=l/s.width*100,this.v=100-n/s.height*100,this.updateVisuals(),this.onColorStateChanged()}getInputValue(t){return t?t.getAttribute("value")??"":""}setInputValue(t,e){t&&void 0!==e&&t.setAttribute("value",e)}getPanelControlSize(){return"s"===this.getOption("size",p,"m")?"s":"m"}commitColorInput(i){const s=("trigger"===i?this.triggerInputEl?.value:this.getInputValue(this.panelValueInputEl)??"").trim();if(/^#([0-9A-Fa-f]{6})$/.test(s)){const i=t(s),l=e(i.r,i.g,i.b);return this.h=l.h,this.s=l.s,this.v=l.v,this.colorInput=o(s),this.updateVisuals(),void this.onColorStateChanged()}let l=/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(s);if(l){const t=r(parseInt(l[1],10),0,255),i=r(parseInt(l[2],10),0,255),s=r(parseInt(l[3],10),0,255),n=e(t,i,s);return this.h=n.h,this.s=n.s,this.v=n.v,this.colorInput=`rgb(${t}, ${i}, ${s})`,this.updateVisuals(),void this.onColorStateChanged()}if(l=/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(s),l){const t=r(parseInt(l[1],10),0,255),i=r(parseInt(l[2],10),0,255),s=r(parseInt(l[3],10),0,255),n=parseFloat(l[4]),o=e(t,i,s);this.h=o.h,this.s=o.s,this.v=o.v,this.a=Math.round(100*n),this.alphaInput=String(this.a),this.colorInput=`rgba(${t}, ${i}, ${s}, ${n})`,this.updateVisuals(),this.onColorStateChanged()}}commitAlphaInput(){const t=Number(this.getInputValue(this.panelAlphaInputEl).trim()||this.alphaInput);if(!Number.isNaN(t)&&t>=0&&t<=100){const e=Math.round(t);this.a=e,this.alphaInput=String(e),this.updateVisuals(),this.onColorStateChanged()}else this.alphaInput=String(this.a),this.panelAlphaInputEl&&this.setInputValue(this.panelAlphaInputEl,this.alphaInput)}async onCopy(){try{await navigator.clipboard.writeText(this.getUiFormatted()),this.isCopied=!0,this.updateCopyButtons(),this.copiedTimer&&clearTimeout(this.copiedTimer),this.copiedTimer=setTimeout(()=>{this.isCopied=!1,this.updateCopyButtons()},1600)}catch{}}async onEyedrop(){try{if("EyeDropper"in window){const i=new window.EyeDropper,{sRGBHex:s}=await i.open(),l=t(s);if(!l)return;const n=e(l.r,l.g,l.b);this.h=n.h,this.s=n.s,this.v=n.v,this.updateVisuals(),this.onColorStateChanged()}}catch{}}toggleOpen(){if(this.getBool("disabled")||this.getBool("readonly"))return;if("modal"===this.getOption("type",u,"dropdown"))return this.tempColor=this.getHex(),this.open=!0,void this.update();this.open=!this.open,this.update()}mount(){this.mounted=!0;const t=this.getIconSize();this.triggerEl=document.createElement("div"),this.triggerEl.className="designbase-wc-color-picker__trigger",this.triggerEl.addEventListener("click",()=>this.toggleOpen());const e=document.createElement("div");e.className="designbase-wc-color-picker__color-display",this.colorBoxEl=document.createElement("div"),this.colorBoxEl.className="designbase-wc-color-picker__color-box",e.append(this.colorBoxEl),this.triggerInputEl=document.createElement("input"),this.triggerInputEl.type="text",this.triggerInputEl.className="designbase-wc-color-picker__input",this.triggerInputEl.placeholder="#000000",this.triggerInputEl.addEventListener("click",t=>t.stopPropagation()),this.triggerInputEl.addEventListener("focus",()=>{this.triggerInputFocused=!0}),this.triggerInputEl.addEventListener("blur",()=>{this.triggerInputFocused=!1;const t="hex"===this.format?o(this.getUiFormatted()):this.getUiFormatted();this.triggerInputEl&&this.triggerInputEl.value!==t&&(this.triggerInputEl.value=t,this.colorInput=t)}),this.triggerInputEl.addEventListener("input",()=>{this.triggerInputEl&&(this.colorInput=this.triggerInputEl.value)}),this.triggerInputEl.addEventListener("keydown",t=>{"Enter"===t.key&&this.commitColorInput("trigger")});const i=document.createElement("div");i.className="designbase-wc-color-picker__trigger-actions",this.triggerCopyBtn=document.createElement("button"),this.triggerCopyBtn.type="button",this.triggerCopyBtn.className="designbase-wc-color-picker__copy-button-inline",this.triggerCopyBtn.setAttribute("aria-label","Copy color value"),this.triggerCopyBtn.addEventListener("click",t=>{t.stopPropagation(),this.onCopy()}),this.toggleBtn=document.createElement("button"),this.toggleBtn.type="button",this.toggleBtn.className="designbase-wc-color-picker__toggle",this.toggleBtn.setAttribute("aria-label","Toggle color picker"),this.toggleBtn.append(d("chevron-down",t)),i.append(this.triggerCopyBtn,this.toggleBtn),this.triggerEl.append(e,this.triggerInputEl,i),this.dropdownEl=document.createElement("div"),this.dropdownEl.className="designbase-wc-color-picker__dropdown",this.dropdownEl.addEventListener("click",t=>t.stopPropagation()),this.dropdownEl.hidden=!0;const s=document.createElement("div");s.className="designbase-wc-color-picker__selector";const l=document.createElement("div");l.className="designbase-wc-color-picker__color-area",this.colorFieldEl=document.createElement("div"),this.colorFieldEl.className="designbase-wc-color-picker__color-field",this.colorPointerEl=document.createElement("div"),this.colorPointerEl.className="designbase-wc-color-picker__color-pointer",this.colorFieldEl.append(this.colorPointerEl),this.colorFieldEl.addEventListener("mousedown",t=>{this.getBool("disabled")||this.getBool("readonly")||(t.preventDefault(),this.dragging="area",this.updateFromArea(t.clientX,t.clientY))}),this.colorFieldEl.addEventListener("touchstart",t=>{if(this.getBool("disabled")||this.getBool("readonly"))return;this.dragging="area";const e=t.touches[0];this.updateFromArea(e.clientX,e.clientY)},{passive:!0}),this.colorFieldEl.addEventListener("touchmove",t=>{if("area"!==this.dragging)return;const e=t.touches[0];this.updateFromArea(e.clientX,e.clientY)},{passive:!0}),this.colorFieldEl.addEventListener("touchend",()=>{"area"===this.dragging&&(this.dragging=null,this.onColorStateChanged(!0))}),l.append(this.colorFieldEl);const n=document.createElement("div");n.className="designbase-wc-color-picker__controls",this.eyedropperBtnEl=document.createElement("db-button"),this.eyedropperBtnEl.setAttribute("variant","tertiary"),this.eyedropperBtnEl.setAttribute("size",this.getPanelControlSize()),this.eyedropperBtnEl.setAttribute("icon-only",""),this.eyedropperBtnEl.setAttribute("start-icon","eyedropper"),this.eyedropperBtnEl.setAttribute("aria-label","Eyedropper tool"),this.eyedropperBtnEl.addEventListener("click",()=>{this.onEyedrop()});const a=document.createElement("div");a.className="designbase-wc-color-picker__slider-container";const h=document.createElement("div");h.className="designbase-wc-color-picker__hue-slider",this.hueSliderEl=document.createElement("input"),this.hueSliderEl.type="range",this.hueSliderEl.min="0",this.hueSliderEl.max="360",this.hueSliderEl.className="designbase-wc-color-picker__slider designbase-wc-color-picker__slider--hue",this.hueSliderEl.addEventListener("input",()=>{this.h=parseFloat(this.hueSliderEl.value),this.updateVisuals(),this.onColorStateChanged()}),h.append(this.hueSliderEl),this.alphaSliderWrapEl=document.createElement("div"),this.alphaSliderWrapEl.className="designbase-wc-color-picker__alpha-slider",this.alphaSliderEl=document.createElement("input"),this.alphaSliderEl.type="range",this.alphaSliderEl.min="0",this.alphaSliderEl.max="100",this.alphaSliderEl.className="designbase-wc-color-picker__slider designbase-wc-color-picker__slider--alpha",this.alphaSliderEl.addEventListener("input",()=>{this.a=r(parseInt(this.alphaSliderEl.value,10),0,100),this.alphaInput=String(this.a),this.panelAlphaInputEl&&this.setInputValue(this.panelAlphaInputEl,this.alphaInput),this.updateVisuals(),this.onColorStateChanged()}),this.alphaSliderWrapEl.append(this.alphaSliderEl),a.append(h,this.alphaSliderWrapEl),n.append(this.eyedropperBtnEl,a);const p=document.createElement("div");p.className="designbase-wc-color-picker__value-display",this.formatSelectEl=document.createElement("db-select"),this.formatSelectEl.setAttribute("size","s"),this.formatSelectEl.setAttribute("position","top"),this.formatSelectEl.setAttribute("show-clear-button","false"),this.formatSelectEl.setAttribute("options",b),this.formatSelectEl.addEventListener("db-change",t=>{const e=t.detail,i=e?.value;i&&(this.format=i,this.updateVisuals())}),this.panelValueInputEl=document.createElement("db-input"),this.panelValueInputEl.classList.add("designbase-wc-color-picker__value-input"),this.panelValueInputEl.setAttribute("size","s"),this.panelValueInputEl.setAttribute("placeholder","#000000"),this.panelValueInputEl.addEventListener("db-focus",()=>{this.panelInputFocused=!0}),this.panelValueInputEl.addEventListener("db-blur",()=>{this.panelInputFocused=!1;const t="hex"===this.format?o(this.getUiFormatted()):this.getUiFormatted();this.getInputValue(this.panelValueInputEl)!==t&&(this.setInputValue(this.panelValueInputEl,t),this.colorInput=t)}),this.panelValueInputEl.addEventListener("db-input",t=>{const e=t.detail;void 0!==e?.value&&(this.colorInput=e.value)}),this.panelValueInputEl.addEventListener("keydown",t=>{"Enter"===t.key&&this.commitColorInput("panel")}),this.panelAlphaWrapEl=document.createElement("div"),this.panelAlphaWrapEl.className="designbase-wc-color-picker__alpha-input-wrap",this.panelAlphaInputEl=document.createElement("db-input"),this.panelAlphaInputEl.classList.add("designbase-wc-color-picker__alpha-input"),this.panelAlphaInputEl.setAttribute("size","s"),this.panelAlphaInputEl.setAttribute("placeholder","100"),this.panelAlphaInputEl.setAttribute("aria-label","Alpha percent"),this.panelAlphaInputEl.addEventListener("db-focus",()=>{this.panelAlphaInputFocused=!0}),this.panelAlphaInputEl.addEventListener("db-blur",()=>{this.panelAlphaInputFocused=!1,this.commitAlphaInput()}),this.panelAlphaInputEl.addEventListener("db-input",t=>{const e=t.detail,i=(e?.value??"").replace(/[^\d]/g,"").slice(0,3);i!==e?.value&&this.setInputValue(this.panelAlphaInputEl,i),this.alphaInput=i}),this.panelAlphaInputEl.addEventListener("keydown",t=>{"Enter"===t.key&&this.commitAlphaInput()});const u=document.createElement("span");u.className="designbase-wc-color-picker__alpha-suffix",u.textContent="%",this.panelAlphaWrapEl.append(this.panelAlphaInputEl,u),this.panelCopyBtnEl=document.createElement("db-button"),this.panelCopyBtnEl.setAttribute("variant","tertiary"),this.panelCopyBtnEl.setAttribute("size","s"),this.panelCopyBtnEl.setAttribute("icon-only",""),this.panelCopyBtnEl.setAttribute("start-icon","copy"),this.panelCopyBtnEl.setAttribute("aria-label","Copy color value"),this.panelCopyBtnEl.addEventListener("click",()=>{this.onCopy()}),p.append(this.formatSelectEl,this.panelValueInputEl,this.panelAlphaWrapEl,this.panelCopyBtnEl),s.append(l,n,p),this.selectorEl=s,this.dropdownEl.append(s),this.modalEl=document.createElement("db-modal"),this.modalEl.setAttribute("size","s"),this.modalEl.setAttribute("title","색상 선택"),this.modalEl.setAttribute("close-on-escape","true"),this.modalEl.addEventListener("db-close",this.handleModalCancel),this.modalBodyEl=document.createElement("div"),this.modalBodyEl.setAttribute("data-modal-part","body");const c=document.createElement("div");c.setAttribute("data-modal-part","footer"),c.style.display="flex",c.style.gap="8px",c.style.justifyContent="flex-end";const g=document.createElement("db-button");g.setAttribute("variant","tertiary"),g.setAttribute("size","m"),g.textContent="취소",g.addEventListener("click",this.handleModalCancel);const E=document.createElement("db-button");E.setAttribute("variant","primary"),E.setAttribute("size","m"),E.textContent="적용",E.addEventListener("click",this.handleModalApply),c.append(g,E),this.modalEl.append(this.modalBodyEl,c),this.replaceChildren(this.triggerEl,this.dropdownEl,this.modalEl)}updateCopyButtons(){const t=this.getIconSize(),e=this.isCopied?"done":"copy";this.triggerCopyBtn&&this.triggerCopyBtn.replaceChildren(d(e,t)),this.panelCopyBtnEl&&this.panelCopyBtnEl.setAttribute("start-icon",e)}updateVisuals(){const t=this.getRgb(),e=this.getHex(),i=this.getBool("show-alpha",!0),s=this.getUiFormatted(),l="hex"===this.format?o(s):s;!this.triggerInputFocused&&this.triggerInputEl&&(this.triggerInputEl.value=l),!this.panelInputFocused&&this.panelValueInputEl&&this.setInputValue(this.panelValueInputEl,l),this.colorBoxEl&&(this.colorBoxEl.style.backgroundColor=i?`rgba(${t.r}, ${t.g}, ${t.b}, ${this.a/100})`:e),this.colorFieldEl&&(this.colorFieldEl.style.backgroundImage=`\n                linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),\n                linear-gradient(to right, #ffffff, hsl(${this.h}, 100%, 50%))\n            `),this.colorPointerEl&&(this.colorPointerEl.style.left=`${this.s}%`,this.colorPointerEl.style.top=100-this.v+"%",this.colorPointerEl.style.backgroundColor=`rgb(${t.r}, ${t.g}, ${t.b})`),this.hueSliderEl&&(this.hueSliderEl.value=String(this.h),this.hueSliderEl.style.background="linear-gradient(to right,\n                hsl(0,100%,50%),\n                hsl(60,100%,50%),\n                hsl(120,100%,50%),\n                hsl(180,100%,50%),\n                hsl(240,100%,50%),\n                hsl(300,100%,50%),\n                hsl(360,100%,50%))"),this.alphaSliderEl&&(this.alphaSliderEl.value=String(this.a),this.alphaSliderEl.style.backgroundImage=`\n                linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),\n                linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),\n                linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),\n                linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),\n                linear-gradient(to right, rgba(${t.r}, ${t.g}, ${t.b}, 0), rgba(${t.r}, ${t.g}, ${t.b}, 1))\n            `,this.alphaSliderEl.style.backgroundSize="8px 8px,8px 8px,8px 8px,8px 8px,100% 100%",this.alphaSliderEl.style.backgroundPosition="0 0,0 4px,4px -4px,-4px 0,0 0",this.alphaSliderEl.style.backgroundColor="var(--db-surface-base)"),this.panelAlphaInputEl&&!this.panelAlphaInputFocused&&this.setInputValue(this.panelAlphaInputEl,this.alphaInput),this.formatSelectEl&&this.formatSelectEl.getAttribute("value")!==this.format&&this.formatSelectEl.setAttribute("value",this.format),this.colorInput=l}update(){if(!this.mounted)return;const t=this.getOption("size",p,"m"),e=this.getOption("type",u,"dropdown"),i=this.getOption("position",c,"bottom-start"),s=this.getBool("disabled"),l=this.getBool("readonly"),n=this.getBool("show-input",!0),o=this.getBool("show-alpha",!0),a=this.getBool("show-format-selector",!0),r=this.getBool("show-copy-button",!0),h=this.getBool("show-eyedropper",!0),d="undefined"!=typeof window&&"EyeDropper"in window;if(this.className=["designbase-wc-color-picker",`designbase-wc-color-picker--${t}`,`designbase-wc-color-picker--${i}`,this.open&&"dropdown"===e&&"designbase-wc-color-picker--open",this.getBool("full-width")&&"designbase-wc-color-picker--full-width",this.getBool("error")&&"designbase-wc-color-picker--error",s&&"designbase-wc-color-picker--disabled",l&&"designbase-wc-color-picker--readonly",!n&&"designbase-wc-color-picker--no-input"].filter(Boolean).join(" "),this.triggerInputEl&&(this.triggerInputEl.hidden=!n,this.triggerInputEl.disabled=s,this.triggerInputEl.readOnly=l),this.triggerCopyBtn&&(this.triggerCopyBtn.hidden=!(n&&r),this.triggerCopyBtn.disabled=s),this.toggleBtn&&(this.toggleBtn.disabled=s),this.dropdownEl&&(this.dropdownEl.className=`designbase-wc-color-picker__dropdown designbase-wc-color-picker__dropdown--${i}`,this.dropdownEl.hidden=!("dropdown"===e&&this.open)),this.alphaSliderWrapEl&&(this.alphaSliderWrapEl.hidden=!o),this.panelAlphaWrapEl&&(this.panelAlphaWrapEl.hidden=!o),this.formatSelectEl&&(this.formatSelectEl.hidden=!a),this.panelCopyBtnEl&&(this.panelCopyBtnEl.hidden=!r),this.eyedropperBtnEl&&(this.eyedropperBtnEl.hidden=!(h&&d)),this.selectorEl){const t="modal"===e?this.modalBodyEl:this.dropdownEl;t&&this.selectorEl.parentElement!==t&&t.append(this.selectorEl)}this.modalEl&&("modal"===e&&this.open?this.modalEl.setAttribute("open","true"):this.modalEl.removeAttribute("open")),this.updateCopyButtons(),this.updateVisuals()}}customElements.get("db-color-picker")||customElements.define("db-color-picker",DbColorPicker);export{DbColorPicker};
+import { hexToRgb, rgbToHsv, hsvToRgb, toHex, rgbToHsl, formatColor, normalizeHex, isHex, clamp } from './color-picker-utils.js';
+import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const TYPES = ['dropdown', 'modal'];
+const POSITIONS = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
+const DEFAULT_COLOR = '#006FFF';
+const DEFAULT_RGB = hexToRgb(DEFAULT_COLOR) ?? { r: 0, g: 111, b: 255 };
+const DEFAULT_HSV = rgbToHsv(DEFAULT_RGB.r, DEFAULT_RGB.g, DEFAULT_RGB.b);
+const FORMAT_OPTIONS = JSON.stringify([
+    { label: 'HEX', value: 'hex' },
+    { label: 'RGB', value: 'rgb' },
+    { label: 'RGBA', value: 'rgba' },
+    { label: 'HSL', value: 'hsl' },
+    { label: 'HSLA', value: 'hsla' },
+]);
+class DbColorPicker extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.h = DEFAULT_HSV.h;
+        this.s = DEFAULT_HSV.s;
+        this.v = DEFAULT_HSV.v;
+        this.a = 100;
+        this.open = false;
+        this.format = 'hex';
+        this.colorInput = DEFAULT_COLOR;
+        this.alphaInput = '100';
+        this.isCopied = false;
+        this.tempColor = '';
+        this.dragging = null;
+        this.mounted = false;
+        this.copiedTimer = null;
+        this.debounceTimer = null;
+        this.lastEmittedHex = '';
+        this.suppressNextValueSync = false;
+        this.didMount = false;
+        this.triggerInputFocused = false;
+        this.panelInputFocused = false;
+        this.panelAlphaInputFocused = false;
+        this.handleOutsideClick = (event) => {
+            if (!this.open || this.getOption('type', TYPES, 'dropdown') !== 'dropdown')
+                return;
+            const target = event.target;
+            if (this.contains(target))
+                return;
+            if (this.formatSelectEl?.contains(target))
+                return;
+            this.open = false;
+            this.update();
+        };
+        this.handleDocumentMouseMove = (event) => {
+            if (this.dragging !== 'area')
+                return;
+            if (this.getBool('disabled') || this.getBool('readonly'))
+                return;
+            this.updateFromArea(event.clientX, event.clientY);
+        };
+        this.handleDocumentMouseUp = () => {
+            if (this.dragging !== 'area')
+                return;
+            this.dragging = null;
+            this.onColorStateChanged(true);
+        };
+        this.handleModalCancel = () => {
+            const rgb = hexToRgb(this.tempColor);
+            if (rgb) {
+                const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                this.h = hsv.h;
+                this.s = hsv.s;
+                this.v = hsv.v;
+            }
+            this.open = false;
+            this.update();
+            this.dispatchEvent(new CustomEvent('db-cancel', { bubbles: true, composed: true }));
+        };
+        this.handleModalApply = () => {
+            this.open = false;
+            this.actuallyEmit();
+            this.dispatchEvent(new CustomEvent('db-apply', { detail: { value: this.getOutward() }, bubbles: true, composed: true }));
+            this.update();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'size',
+            'type',
+            'position',
+            'value',
+            'default-value',
+            'show-input',
+            'show-alpha',
+            'show-format-selector',
+            'show-copy-button',
+            'show-eyedropper',
+            'disabled',
+            'readonly',
+            'full-width',
+            'error',
+            'on-change-format',
+            'change-debounce-ms',
+            'emit-during-drag',
+        ];
+    }
+    connectedCallback() {
+        if (!this.mounted)
+            this.mount();
+        this.syncFromValueAttr(true);
+        this.update();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        document.addEventListener('mousemove', this.handleDocumentMouseMove);
+        document.addEventListener('mouseup', this.handleDocumentMouseUp);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        document.removeEventListener('mousemove', this.handleDocumentMouseMove);
+        document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+        if (this.copiedTimer)
+            clearTimeout(this.copiedTimer);
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+    }
+    attributeChangedCallback(name) {
+        if (!this.mounted)
+            return;
+        if (name === 'value' || name === 'default-value')
+            this.syncFromValueAttr(false);
+        this.update();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getOption(name, values, fallback) {
+        const value = this.getAttribute(name);
+        return value && values.includes(value) ? value : fallback;
+    }
+    getIconSize() {
+        return getDbComponentIconSize(this.getOption('size', SIZES, 'm'));
+    }
+    getRgb() {
+        return hsvToRgb(this.h, this.s, this.v);
+    }
+    getHex() {
+        const rgb = this.getRgb();
+        return toHex(rgb.r, rgb.g, rgb.b);
+    }
+    getHsl() {
+        const rgb = this.getRgb();
+        return rgbToHsl(rgb.r, rgb.g, rgb.b);
+    }
+    getUiFormatted() {
+        const rgb = this.getRgb();
+        const hex = this.getHex();
+        const hsl = this.getHsl();
+        return formatColor(this.format, rgb, hex, hsl, this.a);
+    }
+    getOutward() {
+        const onChangeFormat = this.getAttribute('on-change-format') === 'ui' ? 'ui' : 'hex';
+        return onChangeFormat === 'hex' ? this.getHex() : this.getUiFormatted();
+    }
+    syncFromValueAttr(initial) {
+        const raw = this.getAttribute('value')
+            ?? (initial ? this.getAttribute('default-value') : null)
+            ?? (initial ? DEFAULT_COLOR : null);
+        if (raw == null)
+            return;
+        const norm = normalizeHex(raw);
+        if (!isHex(norm))
+            return;
+        if (!initial && this.suppressNextValueSync && norm === this.lastEmittedHex) {
+            this.suppressNextValueSync = false;
+            return;
+        }
+        const rgb = hexToRgb(norm);
+        if (!rgb)
+            return;
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        this.h = hsv.h;
+        this.s = hsv.s;
+        this.v = hsv.v;
+        this.colorInput = norm;
+        this.lastEmittedHex = norm;
+    }
+    actuallyEmit() {
+        const currentHex = normalizeHex(this.getHex());
+        const parentHex = this.hasAttribute('value') && isHex(this.getAttribute('value') || '')
+            ? normalizeHex(this.getAttribute('value') || '')
+            : null;
+        if (parentHex && parentHex === currentHex)
+            return;
+        if (this.lastEmittedHex === currentHex)
+            return;
+        this.lastEmittedHex = currentHex;
+        this.suppressNextValueSync = true;
+        this.setAttribute('value', currentHex);
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { value: this.getOutward() },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    scheduleEmit() {
+        const emitDuringDrag = this.getBool('emit-during-drag', true);
+        if (this.dragging && !emitDuringDrag)
+            return;
+        const debounceMs = Number(this.getAttribute('change-debounce-ms') || '0');
+        if (debounceMs > 0) {
+            if (this.debounceTimer)
+                clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => this.actuallyEmit(), debounceMs);
+            return;
+        }
+        this.actuallyEmit();
+    }
+    onColorStateChanged(fromDragEnd = false) {
+        if (!this.didMount) {
+            this.didMount = true;
+            return;
+        }
+        if (fromDragEnd && !this.getBool('emit-during-drag', true)) {
+            this.scheduleEmit();
+            return;
+        }
+        this.scheduleEmit();
+    }
+    updateFromArea(clientX, clientY) {
+        const el = this.colorFieldEl;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const x = clamp(clientX - rect.left, 0, rect.width);
+        const y = clamp(clientY - rect.top, 0, rect.height);
+        this.s = (x / rect.width) * 100;
+        this.v = 100 - (y / rect.height) * 100;
+        this.updateVisuals();
+        this.onColorStateChanged();
+    }
+    getInputValue(el) {
+        if (!el)
+            return '';
+        return el.getAttribute('value') ?? '';
+    }
+    setInputValue(el, value) {
+        if (!el || value === undefined)
+            return;
+        el.setAttribute('value', value);
+    }
+    getPanelControlSize() {
+        const size = this.getOption('size', SIZES, 'm');
+        return size === 's' ? 's' : 'm';
+    }
+    commitColorInput(source) {
+        const str = (source === 'trigger'
+            ? this.triggerInputEl?.value
+            : this.getInputValue(this.panelValueInputEl)
+                ?? '').trim();
+        if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
+            const rgb = hexToRgb(str);
+            const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+            this.h = hsv.h;
+            this.s = hsv.s;
+            this.v = hsv.v;
+            this.colorInput = normalizeHex(str);
+            this.updateVisuals();
+            this.onColorStateChanged();
+            return;
+        }
+        let m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(str);
+        if (m) {
+            const r = clamp(parseInt(m[1], 10), 0, 255);
+            const g = clamp(parseInt(m[2], 10), 0, 255);
+            const b = clamp(parseInt(m[3], 10), 0, 255);
+            const hsv = rgbToHsv(r, g, b);
+            this.h = hsv.h;
+            this.s = hsv.s;
+            this.v = hsv.v;
+            this.colorInput = `rgb(${r}, ${g}, ${b})`;
+            this.updateVisuals();
+            this.onColorStateChanged();
+            return;
+        }
+        m = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(str);
+        if (m) {
+            const r = clamp(parseInt(m[1], 10), 0, 255);
+            const g = clamp(parseInt(m[2], 10), 0, 255);
+            const b = clamp(parseInt(m[3], 10), 0, 255);
+            const alpha = parseFloat(m[4]);
+            const hsv = rgbToHsv(r, g, b);
+            this.h = hsv.h;
+            this.s = hsv.s;
+            this.v = hsv.v;
+            this.a = Math.round(alpha * 100);
+            this.alphaInput = String(this.a);
+            this.colorInput = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+            this.updateVisuals();
+            this.onColorStateChanged();
+        }
+    }
+    commitAlphaInput() {
+        const n = Number(this.getInputValue(this.panelAlphaInputEl).trim() || this.alphaInput);
+        if (!Number.isNaN(n) && n >= 0 && n <= 100) {
+            const rounded = Math.round(n);
+            this.a = rounded;
+            this.alphaInput = String(rounded);
+            this.updateVisuals();
+            this.onColorStateChanged();
+        }
+        else {
+            this.alphaInput = String(this.a);
+            if (this.panelAlphaInputEl)
+                this.setInputValue(this.panelAlphaInputEl, this.alphaInput);
+        }
+    }
+    async onCopy() {
+        try {
+            await navigator.clipboard.writeText(this.getUiFormatted());
+            this.isCopied = true;
+            this.updateCopyButtons();
+            if (this.copiedTimer)
+                clearTimeout(this.copiedTimer);
+            this.copiedTimer = setTimeout(() => {
+                this.isCopied = false;
+                this.updateCopyButtons();
+            }, 1600);
+        }
+        catch {
+            // noop
+        }
+    }
+    async onEyedrop() {
+        try {
+            if ('EyeDropper' in window) {
+                const eye = new window.EyeDropper();
+                const { sRGBHex } = await eye.open();
+                const rgb = hexToRgb(sRGBHex);
+                if (!rgb)
+                    return;
+                const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                this.h = hsv.h;
+                this.s = hsv.s;
+                this.v = hsv.v;
+                this.updateVisuals();
+                this.onColorStateChanged();
+            }
+        }
+        catch {
+            // noop
+        }
+    }
+    toggleOpen() {
+        if (this.getBool('disabled') || this.getBool('readonly'))
+            return;
+        const type = this.getOption('type', TYPES, 'dropdown');
+        if (type === 'modal') {
+            this.tempColor = this.getHex();
+            this.open = true;
+            this.update();
+            return;
+        }
+        this.open = !this.open;
+        this.update();
+    }
+    mount() {
+        this.mounted = true;
+        const iconSize = this.getIconSize();
+        this.triggerEl = document.createElement('div');
+        this.triggerEl.className = 'designbase-wc-color-picker__trigger';
+        this.triggerEl.addEventListener('click', () => this.toggleOpen());
+        const colorDisplay = document.createElement('div');
+        colorDisplay.className = 'designbase-wc-color-picker__color-display';
+        this.colorBoxEl = document.createElement('div');
+        this.colorBoxEl.className = 'designbase-wc-color-picker__color-box';
+        colorDisplay.append(this.colorBoxEl);
+        this.triggerInputEl = document.createElement('input');
+        this.triggerInputEl.type = 'text';
+        this.triggerInputEl.className = 'designbase-wc-color-picker__input';
+        this.triggerInputEl.placeholder = '#000000';
+        this.triggerInputEl.addEventListener('click', (e) => e.stopPropagation());
+        this.triggerInputEl.addEventListener('focus', () => {
+            this.triggerInputFocused = true;
+        });
+        this.triggerInputEl.addEventListener('blur', () => {
+            this.triggerInputFocused = false;
+            const next = this.format === 'hex' ? normalizeHex(this.getUiFormatted()) : this.getUiFormatted();
+            if (this.triggerInputEl && this.triggerInputEl.value !== next) {
+                this.triggerInputEl.value = next;
+                this.colorInput = next;
+            }
+        });
+        this.triggerInputEl.addEventListener('input', () => {
+            if (this.triggerInputEl)
+                this.colorInput = this.triggerInputEl.value;
+        });
+        this.triggerInputEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter')
+                this.commitColorInput('trigger');
+        });
+        const actions = document.createElement('div');
+        actions.className = 'designbase-wc-color-picker__trigger-actions';
+        this.triggerCopyBtn = document.createElement('button');
+        this.triggerCopyBtn.type = 'button';
+        this.triggerCopyBtn.className = 'designbase-wc-color-picker__copy-button-inline';
+        this.triggerCopyBtn.setAttribute('aria-label', 'Copy color value');
+        this.triggerCopyBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            void this.onCopy();
+        });
+        this.toggleBtn = document.createElement('button');
+        this.toggleBtn.type = 'button';
+        this.toggleBtn.className = 'designbase-wc-color-picker__toggle';
+        this.toggleBtn.setAttribute('aria-label', 'Toggle color picker');
+        this.toggleBtn.append(createDbIcon('chevron-down', iconSize));
+        actions.append(this.triggerCopyBtn, this.toggleBtn);
+        this.triggerEl.append(colorDisplay, this.triggerInputEl, actions);
+        this.dropdownEl = document.createElement('div');
+        this.dropdownEl.className = 'designbase-wc-color-picker__dropdown';
+        this.dropdownEl.addEventListener('click', (e) => e.stopPropagation());
+        this.dropdownEl.hidden = true;
+        const selector = document.createElement('div');
+        selector.className = 'designbase-wc-color-picker__selector';
+        const colorArea = document.createElement('div');
+        colorArea.className = 'designbase-wc-color-picker__color-area';
+        this.colorFieldEl = document.createElement('div');
+        this.colorFieldEl.className = 'designbase-wc-color-picker__color-field';
+        this.colorPointerEl = document.createElement('div');
+        this.colorPointerEl.className = 'designbase-wc-color-picker__color-pointer';
+        this.colorFieldEl.append(this.colorPointerEl);
+        this.colorFieldEl.addEventListener('mousedown', (e) => {
+            if (this.getBool('disabled') || this.getBool('readonly'))
+                return;
+            e.preventDefault();
+            this.dragging = 'area';
+            this.updateFromArea(e.clientX, e.clientY);
+        });
+        this.colorFieldEl.addEventListener('touchstart', (e) => {
+            if (this.getBool('disabled') || this.getBool('readonly'))
+                return;
+            this.dragging = 'area';
+            const t = e.touches[0];
+            this.updateFromArea(t.clientX, t.clientY);
+        }, { passive: true });
+        this.colorFieldEl.addEventListener('touchmove', (e) => {
+            if (this.dragging !== 'area')
+                return;
+            const t = e.touches[0];
+            this.updateFromArea(t.clientX, t.clientY);
+        }, { passive: true });
+        this.colorFieldEl.addEventListener('touchend', () => {
+            if (this.dragging !== 'area')
+                return;
+            this.dragging = null;
+            this.onColorStateChanged(true);
+        });
+        colorArea.append(this.colorFieldEl);
+        const controls = document.createElement('div');
+        controls.className = 'designbase-wc-color-picker__controls';
+        this.eyedropperBtnEl = document.createElement('db-button');
+        this.eyedropperBtnEl.setAttribute('variant', 'tertiary');
+        this.eyedropperBtnEl.setAttribute('size', this.getPanelControlSize());
+        this.eyedropperBtnEl.setAttribute('icon-only', '');
+        this.eyedropperBtnEl.setAttribute('start-icon', 'eyedropper');
+        this.eyedropperBtnEl.setAttribute('aria-label', 'Eyedropper tool');
+        this.eyedropperBtnEl.addEventListener('click', () => void this.onEyedrop());
+        const sliderContainer = document.createElement('div');
+        sliderContainer.className = 'designbase-wc-color-picker__slider-container';
+        const hueWrap = document.createElement('div');
+        hueWrap.className = 'designbase-wc-color-picker__hue-slider';
+        this.hueSliderEl = document.createElement('input');
+        this.hueSliderEl.type = 'range';
+        this.hueSliderEl.min = '0';
+        this.hueSliderEl.max = '360';
+        this.hueSliderEl.className = 'designbase-wc-color-picker__slider designbase-wc-color-picker__slider--hue';
+        this.hueSliderEl.addEventListener('input', () => {
+            this.h = parseFloat(this.hueSliderEl.value);
+            this.updateVisuals();
+            this.onColorStateChanged();
+        });
+        hueWrap.append(this.hueSliderEl);
+        this.alphaSliderWrapEl = document.createElement('div');
+        this.alphaSliderWrapEl.className = 'designbase-wc-color-picker__alpha-slider';
+        this.alphaSliderEl = document.createElement('input');
+        this.alphaSliderEl.type = 'range';
+        this.alphaSliderEl.min = '0';
+        this.alphaSliderEl.max = '100';
+        this.alphaSliderEl.className = 'designbase-wc-color-picker__slider designbase-wc-color-picker__slider--alpha';
+        this.alphaSliderEl.addEventListener('input', () => {
+            this.a = clamp(parseInt(this.alphaSliderEl.value, 10), 0, 100);
+            this.alphaInput = String(this.a);
+            if (this.panelAlphaInputEl)
+                this.setInputValue(this.panelAlphaInputEl, this.alphaInput);
+            this.updateVisuals();
+            this.onColorStateChanged();
+        });
+        this.alphaSliderWrapEl.append(this.alphaSliderEl);
+        sliderContainer.append(hueWrap, this.alphaSliderWrapEl);
+        controls.append(this.eyedropperBtnEl, sliderContainer);
+        const valueDisplay = document.createElement('div');
+        valueDisplay.className = 'designbase-wc-color-picker__value-display';
+        this.formatSelectEl = document.createElement('db-select');
+        this.formatSelectEl.setAttribute('size', 's');
+        this.formatSelectEl.setAttribute('position', 'top');
+        this.formatSelectEl.setAttribute('show-clear-button', 'false');
+        this.formatSelectEl.setAttribute('options', FORMAT_OPTIONS);
+        this.formatSelectEl.addEventListener('db-change', (e) => {
+            const detail = e.detail;
+            const next = detail?.value;
+            if (next) {
+                this.format = next;
+                this.updateVisuals();
+            }
+        });
+        this.panelValueInputEl = document.createElement('db-input');
+        this.panelValueInputEl.classList.add('designbase-wc-color-picker__value-input');
+        this.panelValueInputEl.setAttribute('size', 's');
+        this.panelValueInputEl.setAttribute('placeholder', '#000000');
+        this.panelValueInputEl.addEventListener('db-focus', () => {
+            this.panelInputFocused = true;
+        });
+        this.panelValueInputEl.addEventListener('db-blur', () => {
+            this.panelInputFocused = false;
+            const next = this.format === 'hex' ? normalizeHex(this.getUiFormatted()) : this.getUiFormatted();
+            if (this.getInputValue(this.panelValueInputEl) !== next) {
+                this.setInputValue(this.panelValueInputEl, next);
+                this.colorInput = next;
+            }
+        });
+        this.panelValueInputEl.addEventListener('db-input', (e) => {
+            const detail = e.detail;
+            if (detail?.value !== undefined)
+                this.colorInput = detail.value;
+        });
+        this.panelValueInputEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter')
+                this.commitColorInput('panel');
+        });
+        this.panelAlphaWrapEl = document.createElement('div');
+        this.panelAlphaWrapEl.className = 'designbase-wc-color-picker__alpha-input-wrap';
+        this.panelAlphaInputEl = document.createElement('db-input');
+        this.panelAlphaInputEl.classList.add('designbase-wc-color-picker__alpha-input');
+        this.panelAlphaInputEl.setAttribute('size', 's');
+        this.panelAlphaInputEl.setAttribute('placeholder', '100');
+        this.panelAlphaInputEl.setAttribute('aria-label', 'Alpha percent');
+        this.panelAlphaInputEl.addEventListener('db-focus', () => {
+            this.panelAlphaInputFocused = true;
+        });
+        this.panelAlphaInputEl.addEventListener('db-blur', () => {
+            this.panelAlphaInputFocused = false;
+            this.commitAlphaInput();
+        });
+        this.panelAlphaInputEl.addEventListener('db-input', (e) => {
+            const detail = e.detail;
+            const cleaned = (detail?.value ?? '').replace(/[^\d]/g, '').slice(0, 3);
+            if (cleaned !== detail?.value) {
+                this.setInputValue(this.panelAlphaInputEl, cleaned);
+            }
+            this.alphaInput = cleaned;
+        });
+        this.panelAlphaInputEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter')
+                this.commitAlphaInput();
+        });
+        const alphaSuffix = document.createElement('span');
+        alphaSuffix.className = 'designbase-wc-color-picker__alpha-suffix';
+        alphaSuffix.textContent = '%';
+        this.panelAlphaWrapEl.append(this.panelAlphaInputEl, alphaSuffix);
+        this.panelCopyBtnEl = document.createElement('db-button');
+        this.panelCopyBtnEl.setAttribute('variant', 'tertiary');
+        this.panelCopyBtnEl.setAttribute('size', 's');
+        this.panelCopyBtnEl.setAttribute('icon-only', '');
+        this.panelCopyBtnEl.setAttribute('start-icon', 'copy');
+        this.panelCopyBtnEl.setAttribute('aria-label', 'Copy color value');
+        this.panelCopyBtnEl.addEventListener('click', () => void this.onCopy());
+        valueDisplay.append(this.formatSelectEl, this.panelValueInputEl, this.panelAlphaWrapEl, this.panelCopyBtnEl);
+        selector.append(colorArea, controls, valueDisplay);
+        this.selectorEl = selector;
+        this.dropdownEl.append(selector);
+        this.modalEl = document.createElement('db-modal');
+        this.modalEl.setAttribute('size', 's');
+        this.modalEl.setAttribute('title', '색상 선택');
+        this.modalEl.setAttribute('close-on-escape', 'true');
+        this.modalEl.addEventListener('db-close', this.handleModalCancel);
+        this.modalBodyEl = document.createElement('div');
+        this.modalBodyEl.setAttribute('data-modal-part', 'body');
+        const modalFooter = document.createElement('div');
+        modalFooter.setAttribute('data-modal-part', 'footer');
+        modalFooter.style.display = 'flex';
+        modalFooter.style.gap = '8px';
+        modalFooter.style.justifyContent = 'flex-end';
+        const cancelBtn = document.createElement('db-button');
+        cancelBtn.setAttribute('variant', 'tertiary');
+        cancelBtn.setAttribute('size', 'm');
+        cancelBtn.textContent = '취소';
+        cancelBtn.addEventListener('click', this.handleModalCancel);
+        const applyBtn = document.createElement('db-button');
+        applyBtn.setAttribute('variant', 'primary');
+        applyBtn.setAttribute('size', 'm');
+        applyBtn.textContent = '적용';
+        applyBtn.addEventListener('click', this.handleModalApply);
+        modalFooter.append(cancelBtn, applyBtn);
+        this.modalEl.append(this.modalBodyEl, modalFooter);
+        this.replaceChildren(this.triggerEl, this.dropdownEl, this.modalEl);
+    }
+    updateCopyButtons() {
+        const iconSize = this.getIconSize();
+        const icon = this.isCopied ? 'done' : 'copy';
+        if (this.triggerCopyBtn) {
+            this.triggerCopyBtn.replaceChildren(createDbIcon(icon, iconSize));
+        }
+        if (this.panelCopyBtnEl) {
+            this.panelCopyBtnEl.setAttribute('start-icon', icon);
+        }
+    }
+    updateVisuals() {
+        const rgb = this.getRgb();
+        const hex = this.getHex();
+        const showAlpha = this.getBool('show-alpha', true);
+        const uiFormatted = this.getUiFormatted();
+        const displayValue = this.format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+        if (!this.triggerInputFocused && this.triggerInputEl) {
+            this.triggerInputEl.value = displayValue;
+        }
+        if (!this.panelInputFocused && this.panelValueInputEl) {
+            this.setInputValue(this.panelValueInputEl, displayValue);
+        }
+        if (this.colorBoxEl) {
+            this.colorBoxEl.style.backgroundColor = showAlpha
+                ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.a / 100})`
+                : hex;
+        }
+        if (this.colorFieldEl) {
+            this.colorFieldEl.style.backgroundImage = `
+                linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
+                linear-gradient(to right, #ffffff, hsl(${this.h}, 100%, 50%))
+            `;
+        }
+        if (this.colorPointerEl) {
+            this.colorPointerEl.style.left = `${this.s}%`;
+            this.colorPointerEl.style.top = `${100 - this.v}%`;
+            this.colorPointerEl.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+        }
+        if (this.hueSliderEl) {
+            this.hueSliderEl.value = String(this.h);
+            this.hueSliderEl.style.background = `linear-gradient(to right,
+                hsl(0,100%,50%),
+                hsl(60,100%,50%),
+                hsl(120,100%,50%),
+                hsl(180,100%,50%),
+                hsl(240,100%,50%),
+                hsl(300,100%,50%),
+                hsl(360,100%,50%))`;
+        }
+        if (this.alphaSliderEl) {
+            this.alphaSliderEl.value = String(this.a);
+            this.alphaSliderEl.style.backgroundImage = `
+                linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
+                linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
+                linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
+                linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))
+            `;
+            this.alphaSliderEl.style.backgroundSize = '8px 8px,8px 8px,8px 8px,8px 8px,100% 100%';
+            this.alphaSliderEl.style.backgroundPosition = '0 0,0 4px,4px -4px,-4px 0,0 0';
+            this.alphaSliderEl.style.backgroundColor = 'var(--db-surface-base)';
+        }
+        if (this.panelAlphaInputEl && !this.panelAlphaInputFocused) {
+            this.setInputValue(this.panelAlphaInputEl, this.alphaInput);
+        }
+        if (this.formatSelectEl && this.formatSelectEl.getAttribute('value') !== this.format) {
+            this.formatSelectEl.setAttribute('value', this.format);
+        }
+        this.colorInput = displayValue;
+    }
+    update() {
+        if (!this.mounted)
+            return;
+        const size = this.getOption('size', SIZES, 'm');
+        const type = this.getOption('type', TYPES, 'dropdown');
+        const position = this.getOption('position', POSITIONS, 'bottom-start');
+        const disabled = this.getBool('disabled');
+        const readonly = this.getBool('readonly');
+        const showInput = this.getBool('show-input', true);
+        const showAlpha = this.getBool('show-alpha', true);
+        const showFormatSelector = this.getBool('show-format-selector', true);
+        const showCopyButton = this.getBool('show-copy-button', true);
+        const showEyedropper = this.getBool('show-eyedropper', true);
+        const eyedropperAvailable = typeof window !== 'undefined' && 'EyeDropper' in window;
+        this.className = [
+            'designbase-wc-color-picker',
+            `designbase-wc-color-picker--${size}`,
+            `designbase-wc-color-picker--${position}`,
+            this.open && type === 'dropdown' && 'designbase-wc-color-picker--open',
+            this.getBool('full-width') && 'designbase-wc-color-picker--full-width',
+            this.getBool('error') && 'designbase-wc-color-picker--error',
+            disabled && 'designbase-wc-color-picker--disabled',
+            readonly && 'designbase-wc-color-picker--readonly',
+            !showInput && 'designbase-wc-color-picker--no-input',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (this.triggerInputEl) {
+            this.triggerInputEl.hidden = !showInput;
+            this.triggerInputEl.disabled = disabled;
+            this.triggerInputEl.readOnly = readonly;
+        }
+        if (this.triggerCopyBtn) {
+            this.triggerCopyBtn.hidden = !(showInput && showCopyButton);
+            this.triggerCopyBtn.disabled = disabled;
+        }
+        if (this.toggleBtn)
+            this.toggleBtn.disabled = disabled;
+        if (this.dropdownEl) {
+            this.dropdownEl.className = `designbase-wc-color-picker__dropdown designbase-wc-color-picker__dropdown--${position}`;
+            this.dropdownEl.hidden = !(type === 'dropdown' && this.open);
+        }
+        if (this.alphaSliderWrapEl)
+            this.alphaSliderWrapEl.hidden = !showAlpha;
+        if (this.panelAlphaWrapEl)
+            this.panelAlphaWrapEl.hidden = !showAlpha;
+        if (this.formatSelectEl)
+            this.formatSelectEl.hidden = !showFormatSelector;
+        if (this.panelCopyBtnEl)
+            this.panelCopyBtnEl.hidden = !showCopyButton;
+        if (this.eyedropperBtnEl)
+            this.eyedropperBtnEl.hidden = !(showEyedropper && eyedropperAvailable);
+        if (this.selectorEl) {
+            const host = type === 'modal' ? this.modalBodyEl : this.dropdownEl;
+            if (host && this.selectorEl.parentElement !== host) {
+                host.append(this.selectorEl);
+            }
+        }
+        if (this.modalEl) {
+            if (type === 'modal' && this.open)
+                this.modalEl.setAttribute('open', 'true');
+            else
+                this.modalEl.removeAttribute('open');
+        }
+        this.updateCopyButtons();
+        this.updateVisuals();
+    }
+}
+if (!customElements.get('db-color-picker'))
+    customElements.define('db-color-picker', DbColorPicker);
+
+export { DbColorPicker };