@designbasekorea/ui-wc 0.8.1 → 0.8.2

package/dist/esm/components/db-cookie-banner.js

@@ -1 +1 @@
-class DbCookieBanner extends HTMLElement{static get observedAttributes(){return["title","description","policy-label","policy-href","accept-label","reject-label","settings-label","show-reject","show-settings","fixed","dismissed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}isEnabled(e,t){const s=this.getAttribute(e);return null===s?t:"false"!==s}createButton(e,t,s,i){const n=document.createElement("db-button");return n.setAttribute("variant",t),n.setAttribute("size","s"),n.textContent=e,n.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0})),i&&(this.setAttribute("dismissed",""),this.render())}),n}render(){if(this.hasAttribute("dismissed"))return this.replaceChildren(),this.className="designbase-wc-cookie-banner designbase-wc-cookie-banner--dismissed",this.style.display="none",void this.removeAttribute("role");this.style.display="";const e=this.getAttribute("title")||"쿠키 사용 안내",t=this.getAttribute("description")||"더 나은 서비스 제공을 위해 쿠키를 사용합니다. 계속 이용하시면 쿠키 사용에 동의하는 것으로 간주됩니다.",s=this.getAttribute("policy-label")||"쿠키 정책",i=this.getAttribute("policy-href")||"",n=this.getAttribute("accept-label")||"모두 허용",a=this.getAttribute("reject-label")||"필수만 허용",c=this.getAttribute("settings-label")||"설정",r=this.isEnabled("show-reject",!0),o=this.isEnabled("show-settings",!1),d=this.isEnabled("fixed",!0);this.className=["designbase-wc-cookie-banner",d&&"designbase-wc-cookie-banner--fixed"].filter(Boolean).join(" "),this.setAttribute("role","dialog"),this.setAttribute("aria-label",e),this.setAttribute("aria-live","polite");const l=document.createElement("div");l.className="designbase-wc-cookie-banner__inner";const b=document.createElement("div");if(b.className="designbase-wc-cookie-banner__copy",e){const t=document.createElement("p");t.className="designbase-wc-cookie-banner__title",t.textContent=e,b.append(t)}const h=document.createElement("p");if(h.className="designbase-wc-cookie-banner__description",h.append(document.createTextNode(t)),i){h.append(document.createTextNode(" "));const e=document.createElement("a");e.className="designbase-wc-cookie-banner__policy",e.href=i,e.target="_blank",e.rel="noopener noreferrer",e.textContent=s,e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-policy",{bubbles:!0,composed:!0}))}),h.append(e)}b.append(h);const p=document.createElement("div");p.className="designbase-wc-cookie-banner__actions",o&&p.append(this.createButton(c,"ghost","db-settings",!1)),r&&p.append(this.createButton(a,"tertiary","db-reject",!0)),p.append(this.createButton(n,"primary","db-accept",!0)),l.append(b,p),this.replaceChildren(l)}}customElements.get("db-cookie-banner")||customElements.define("db-cookie-banner",DbCookieBanner);export{DbCookieBanner};
+class DbCookieBanner extends HTMLElement{static get observedAttributes(){return["title","description","policy-label","policy-href","accept-label","reject-label","settings-label","show-reject","show-settings","fixed","dismissed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}isEnabled(e,t){const s=this.getAttribute(e);return null===s?t:"false"!==s}createButton(e,t,s,i){const n=document.createElement("db-button");return n.setAttribute("variant",t),n.setAttribute("size","s"),n.textContent=e,n.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0})),i&&(this.setAttribute("dismissed",""),this.render())}),n}render(){if(this.hasAttribute("dismissed"))return this.replaceChildren(),this.className="designbase-wc-cookie-banner designbase-wc-cookie-banner--dismissed",this.style.display="none",void this.removeAttribute("role");this.style.display="";const e=this.getAttribute("title")||"쿠키 사용 안내",t=this.getAttribute("description")||"더 나은 서비스 제공을 위해 쿠키를 사용합니다. 계속 이용하시면 쿠키 사용에 동의하는 것으로 간주됩니다.",s=this.getAttribute("policy-label")||"쿠키 정책",i=this.getAttribute("policy-href")||"",n=this.getAttribute("accept-label")||"모두 허용",a=this.getAttribute("reject-label")||"필수만 허용",r=this.getAttribute("settings-label")||"설정",c=this.isEnabled("show-reject",!0),o=this.isEnabled("show-settings",!1),d=this.isEnabled("fixed",!0);this.className=["designbase-wc-cookie-banner",d&&"designbase-wc-cookie-banner--fixed"].filter(Boolean).join(" "),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","false"),this.setAttribute("aria-label",e),this.setAttribute("aria-live","polite");const l=document.createElement("div");l.className="designbase-wc-cookie-banner__inner";const b=document.createElement("div");if(b.className="designbase-wc-cookie-banner__copy",e){const t=document.createElement("p");t.className="designbase-wc-cookie-banner__title",t.textContent=e,b.append(t)}const h=document.createElement("p");if(h.className="designbase-wc-cookie-banner__description",h.append(document.createTextNode(t)),i){h.append(document.createTextNode(" "));const e=document.createElement("a");e.className="designbase-wc-cookie-banner__policy",e.href=i,e.target="_blank",e.rel="noopener noreferrer",e.textContent=s,e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-policy",{bubbles:!0,composed:!0}))}),h.append(e)}b.append(h);const p=document.createElement("div");p.className="designbase-wc-cookie-banner__actions",o&&p.append(this.createButton(r,"ghost","db-settings",!1)),c&&p.append(this.createButton(a,"tertiary","db-reject",!0)),p.append(this.createButton(n,"primary","db-accept",!0)),l.append(b,p),this.replaceChildren(l)}}customElements.get("db-cookie-banner")||customElements.define("db-cookie-banner",DbCookieBanner);export{DbCookieBanner};

package/dist/esm/components/db-date-picker.d.ts

@@ -22,6 +22,9 @@ declare class DbDatePicker extends HTMLElement {
     private boundDocumentMouseDown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** 열린 달력은 Escape 로 닫히고 포커스는 트리거로 돌아간다 (A11Y-ESCAPE) */
+    private handleDocumentKeyDown;
+    private boundDocumentKeyDown;
     attributeChangedCallback(name: string): void;
     get value(): string;
     set value(value: string);

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

@@ -1 +1 @@
-import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";import"./db-modal.js";import{startOfDay as i,parseISODate as s,DEFAULT_DATE_PICKER_PRESETS as n,formatDisplayDate as a,toISODate as r,detectActivePresetId as l,addMonths as d,generateWeekdays as o,generateCalendarGrid as h,formatPanelInputDate as u}from"./date-picker-utils.js";const c="designbase-wc-date-picker",p=["s","m","l"],m=["default","outlined","filled"],isRangeValue=t=>Boolean(t)&&"object"==typeof t&&!Array.isArray(t)&&"start"in t&&"end"in t;class DbDatePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.currentMonth=new Date,this.viewStartMonth=new Date,this.rangeStart=null,this.hoveredDate=null,this.activePresetId="custom",this.inputText="",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t)}static get observedAttributes(){return["mode","layout","type","inline","value","default-value","min-date","max-date","size","variant","disabled","readonly","label","full-width","error","locale","start-of-week","show-outside-days","dropdown-position","open","events"]}connectedCallback(){this.built||this.build(),this.readInitialValue(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown)}attributeChangedCallback(t){if(this.built){if("value"===t&&(this.readAttributeValue(),this.syncInputText()),"open"===t)return this.isOpen=this.hasAttribute("open"),void this.render();this.render()}}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get mode(){const t=this.getAttribute("mode")||"single";return"range"===t?"range":"multiple"===t?"multiple":"single"}set mode(t){this.setAttribute("mode",t)}get isPanelLayout(){return"panel"===this.getAttribute("layout")}get effectiveMode(){return this.isPanelLayout?"range":this.mode}get inline(){return this.hasAttribute("inline")}set inline(t){this.toggleAttribute("inline",Boolean(t))}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get locale(){return this.getAttribute("locale")||"ko-KR"}get startOfWeek(){return"monday"===this.getAttribute("start-of-week")?"monday":"sunday"}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get usesPendingValue(){return this.isPanelLayout||"modal"===this.type}get today(){return i(new Date)}get minDate(){return s(this.getAttribute("min-date"))}get maxDate(){return s(this.getAttribute("max-date"))}get presets(){return this.isPanelLayout?n:[]}get events(){const t=this.getAttribute("events");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${c}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${c}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${c}__icon-display`,t.setAttribute("aria-label","날짜 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${c}__input`,this.inputEl.setAttribute("aria-label","날짜 입력"),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const e=document.createElement("button");e.type="button",e.className=`${c}__toggle`,e.setAttribute("aria-label","날짜 선택 열기"),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${c}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false"),this.calendarHost=document.createElement("div"),this.dropdownEl.appendChild(this.calendarHost)}readInitialValue(){const t=this.getAttribute("value")??this.getAttribute("default-value");if(t&&(this.selectedValue=this.parseValue(t)),this.tempValue=this.selectedValue,this.syncInputText(),isRangeValue(this.selectedValue)){const t=s(this.selectedValue.start);t&&(this.viewStartMonth=new Date(t))}else if("string"==typeof this.selectedValue){const t=s(this.selectedValue);t&&(this.currentMonth=new Date(t))}}readAttributeValue(){const t=this.getAttribute("value");if(!t)return this.selectedValue=void 0,void(this.tempValue=void 0);this.selectedValue=this.parseValue(t),this.isOpen&&this.usesPendingValue||(this.tempValue=this.selectedValue)}parseValue(t){if(t){if("multiple"===this.effectiveMode||t.trim().startsWith("["))try{const e=JSON.parse(t);if(Array.isArray(e))return e.filter(t=>Boolean(s(t)))}catch{return}if("range"===this.effectiveMode||t.trim().startsWith("{"))try{const e=JSON.parse(t);if(e?.start&&e?.end)return{start:e.start,end:e.end}}catch{return}return s(t)?t:void 0}}serializeValue(t){return t?"string"==typeof t?t:JSON.stringify(t):""}formatDisplay(t){if(!t)return"";if("string"==typeof t){const e=s(t);return e?a(e,this.locale):""}if(Array.isArray(t))return t.map(t=>s(t)).filter(Boolean).map(t=>a(t,this.locale)).join(", ");const e=s(t.start),i=s(t.end);return e&&i?t.start===t.end?a(e,this.locale):`${a(e,this.locale)} ~ ${a(i,this.locale)}`:""}syncInputText(){this.inputText=this.formatDisplay(this.selectedValue),this.inputEl&&(this.inputEl.value=this.inputText)}getWorkingValue(){return"range"===this.effectiveMode&&this.rangeStart?this.tempValue??this.selectedValue:this.usesPendingValue&&(this.isOpen||this.inline)?this.tempValue:this.selectedValue}presetContext(){return{today:this.today,startOfWeek:this.startOfWeek,minDate:this.minDate??void 0,maxDate:this.maxDate??void 0}}isDateValid(t){return!(this.minDate&&t<this.minDate)&&!(this.maxDate&&t>this.maxDate)}emitChange(t){const e=this.serializeValue(t);e?this.setAttribute("value",e):this.removeAttribute("value"),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t??null},bubbles:!0,composed:!0}))}applyValue(t,e=!this.usesPendingValue){if(e)return this.selectedValue=t,this.tempValue=t,this.syncInputText(),void this.emitChange(t);this.tempValue=t,this.renderCalendar()}handleDateClick(t){if(this.disabled||this.readonly||!this.isDateValid(t))return;this.isPanelLayout&&(this.activePresetId="custom");const e=this.getWorkingValue();if("single"===this.effectiveMode){const e=r(t);return this.applyValue(e,!this.usesPendingValue),this.inline||this.isPanelLayout||this.closePicker(),void this.render()}if("multiple"===this.effectiveMode){const i=r(t),s=Array.isArray(e)?e:[],n=s.includes(i)?s.filter(t=>t!==i):[...s,i];return this.applyValue(n,!this.usesPendingValue),void this.render()}if(!this.rangeStart)return this.rangeStart=t,this.applyValue({start:r(t),end:r(t)},!1),void this.renderCalendar();const i=this.rangeStart,s=t,n=i>s?{start:r(s),end:r(i)}:{start:r(i),end:r(s)};this.rangeStart=null,this.applyValue(n,!0),this.inline||this.isPanelLayout||this.closePicker(),this.render()}handlePresetSelect(t){if(this.activePresetId=t.id,this.rangeStart=null,"custom"===t.id)return void this.renderCalendar();const e=t.getRange(this.presetContext());if(!e)return;const i={start:r(e.start),end:r(e.end)};this.viewStartMonth=new Date(e.start),this.applyValue(i,!this.usesPendingValue),this.render()}handlePendingApply(){this.selectedValue=this.tempValue,this.syncInputText(),this.emitChange(this.tempValue),this.rangeStart=null,this.closePicker(),this.render()}handlePendingCancel(){this.tempValue=this.selectedValue,this.rangeStart=null,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext()),this.closePicker(),this.render()}handleInputBlur(){if(!this.inputEl)return;const t=this.inputEl.value.trim();if(t.match(/^(\d{4})-(\d{2})-(\d{2})$/)){const e=s(t);if(e&&this.isDateValid(e)){const t=r(e);return this.applyValue(t,!0),void this.render()}}this.syncInputText()}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}get readonly(){return this.hasAttribute("readonly")}set readonly(t){this.toggleAttribute("readonly",Boolean(t))}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,this.usesPendingValue&&(this.tempValue=this.selectedValue,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext())),this.render())}closePicker(){this.isOpen=!1,this.rangeStart=null,this.hoveredDate=null,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&!this.inline&&(this.contains(t.target)||(this.usesPendingValue&&(this.tempValue=this.selectedValue),this.closePicker()))}isDateSelected(t){const e=r(t),i=this.getWorkingValue();return"single"===this.effectiveMode?"string"==typeof i&&i===e:"multiple"===this.effectiveMode?Array.isArray(i)&&i.includes(e):!(!this.rangeStart||r(this.rangeStart)!==e)||!!isRangeValue(i)&&(i.start===e||i.end===e)}isInRange(t){if("range"!==this.effectiveMode)return!1;let e=null,i=null;if(this.rangeStart)e=this.rangeStart,i=this.hoveredDate;else{const t=this.getWorkingValue();isRangeValue(t)&&(e=s(t.start),i=s(t.end))}if(!e)return!1;const n=r(t),a=r(e),l=i?r(i):a;return n>=a&&n<=l}renderDateCell(t,e){const i=t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear(),n=t.toDateString()===this.today.toDateString(),a=this.isDateSelected(t),r=this.isInRange(t),l=0===t.getDay()||6===t.getDay(),d=this.events.filter(e=>{const i=s(e.date);return!!i&&i.toDateString()===t.toDateString()}),o=this.getWorkingValue(),h=isRangeValue(o)?s(o.end)?.toDateString():void 0,u=isRangeValue(o)?s(o.start)?.toDateString():void 0,p=document.createElement("button");p.type="button",p.className=[`${c}__date`,!i&&this.showOutsideDays&&`${c}__date--outside`,n&&`${c}__date--today`,a&&`${c}__date--selected`,r&&!a&&`${c}__date--in-range`,"range"===this.effectiveMode&&(this.rangeStart?.toDateString()===t.toDateString()||u===t.toDateString())&&`${c}__date--range-start`,"range"===this.effectiveMode&&h===t.toDateString()&&`${c}__date--range-end`,l&&`${c}__date--weekend`,!this.isDateValid(t)&&`${c}__date--disabled`,d.length>0&&`${c}__date--has-events`].filter(Boolean).join(" "),p.disabled=!this.isDateValid(t)||this.disabled||this.readonly,p.addEventListener("click",()=>this.handleDateClick(t));const m=document.createElement("span");if(m.className=`${c}__date-number`,m.textContent=String(t.getDate()),p.appendChild(m),d.length>0){const t=document.createElement("div");t.className=`${c}__events`,d.slice(0,3).forEach(e=>{const i=document.createElement("div");i.className=`${c}__event ${c}__event--${e.type||"dot"}`,e.color&&(i.style.backgroundColor=e.color),e.label&&(i.title=e.label),t.appendChild(i)}),p.appendChild(t)}return p}renderSingleMonth(i,s={}){const{showPrev:n=!1,showNext:a=!1}=s,r=this.getAttribute("size")||"m",l=e(r),u=document.createElement("div");u.className=`${c}__month`;const p=document.createElement("div");if(p.className=`${c}__header`,n){const e=document.createElement("button");e.type="button",e.className=`${c}__nav-button`,e.setAttribute("aria-label","이전 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-left",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,-1):this.currentMonth=d(this.currentMonth,-1),this.renderCalendar()}),p.appendChild(e)}else{const t=document.createElement("span");t.className=`${c}__nav-spacer`,t.setAttribute("aria-hidden","true"),p.appendChild(t)}const m=document.createElement("div");if(m.className=`${c}__current-month`,m.textContent=i.toLocaleDateString(this.locale,{year:"numeric",month:"long"}),p.appendChild(m),a){const e=document.createElement("button");e.type="button",e.className=`${c}__nav-button`,e.setAttribute("aria-label","다음 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-right",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,1):this.currentMonth=d(this.currentMonth,1),this.renderCalendar()}),p.appendChild(e)}else{const t=document.createElement("span");t.className=`${c}__nav-spacer`,t.setAttribute("aria-hidden","true"),p.appendChild(t)}u.appendChild(p);const g=document.createElement("div");g.className=`${c}__weekdays`,o(this.startOfWeek).forEach(t=>{const e=document.createElement("div");e.className=`${c}__weekday`,e.textContent=t,g.appendChild(e)}),u.appendChild(g);const b=document.createElement("div");b.className=`${c}__grid`;const v=this.isPanelLayout;return h(i,this.startOfWeek,v).forEach((t,e)=>{if(!t){const t=document.createElement("span");return t.className=`${c}__date ${c}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}const s=t.getMonth()===i.getMonth()&&t.getFullYear()===i.getFullYear();if(!this.showOutsideDays&&!s){const t=document.createElement("span");return t.className=`${c}__date ${c}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}b.appendChild(this.renderDateCell(t,i))}),u.appendChild(b),u}renderDefaultCalendar(){const t=document.createElement("div");t.className=`${c}__selector`;const e=this.isPanelLayout?this.viewStartMonth:this.currentMonth;if(t.appendChild(this.renderSingleMonth(e,{showPrev:!0,showNext:!0})),!this.isPanelLayout){const e=document.createElement("div");e.className=`${c}__footer`;const i=document.createElement("button");i.type="button",i.className=`${c}__today-button`,i.textContent="오늘",i.disabled=this.disabled||this.readonly,i.addEventListener("click",()=>{const t=new Date;this.isPanelLayout?this.viewStartMonth=t:this.currentMonth=t,this.renderCalendar()}),e.appendChild(i),t.appendChild(e)}return t}renderPanelCalendar(){const t=document.createElement("div");t.className=`${c}__panel`;const e=document.createElement("div");e.className=`${c}__presets`,e.setAttribute("role","listbox"),e.setAttribute("aria-label","기간 프리셋"),this.presets.forEach(t=>{const i=document.createElement("button");i.type="button",i.className=[`${c}__preset`,this.activePresetId===t.id&&`${c}__preset--active`].filter(Boolean).join(" "),i.setAttribute("role","option"),i.setAttribute("aria-selected",String(this.activePresetId===t.id)),i.textContent=t.label,i.addEventListener("click",()=>this.handlePresetSelect(t)),e.appendChild(i)}),t.appendChild(e);const i=document.createElement("div");i.className=`${c}__panel-main`;const n=document.createElement("div");n.className=`${c}__months ${c}__months--count-2`,[0,1].forEach(t=>{const e=d(this.viewStartMonth,t);n.appendChild(this.renderSingleMonth(e,{showPrev:0===t,showNext:1===t}))}),i.appendChild(n);const a=document.createElement("div");a.className=`${c}__panel-footer`;const r=isRangeValue(this.tempValue)?this.tempValue:void 0,l=document.createElement("div");l.className=`${c}__range-display`;const o=document.createElement("span");o.className=`${c}__range-text`,o.textContent=r?.start&&s(r.start)?u(s(r.start),this.locale):"시작일";const h=document.createElement("span");h.className=`${c}__range-separator`,h.textContent="–";const p=document.createElement("span");p.className=`${c}__range-text`,p.textContent=r?.end&&s(r.end)?u(s(r.end),this.locale):"종료일",l.append(o,h,p),a.appendChild(l);const m=document.createElement("div");m.className=`${c}__panel-actions`;const g=document.createElement("db-button");g.setAttribute("variant","secondary"),g.setAttribute("size","m"),g.textContent="취소",g.addEventListener("click",()=>this.handlePendingCancel());const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="적용",b.addEventListener("click",()=>this.handlePendingApply()),m.append(g,b),a.appendChild(m),i.appendChild(a),t.appendChild(i),t}renderCalendar(){this.calendarHost&&(this.calendarHost.replaceChildren(),this.calendarHost.appendChild(this.isPanelLayout?this.renderPanelCalendar():this.renderDefaultCalendar()))}render(){const i=p.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",s=m.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",n=this.getAttribute("dropdown-position")||"bottom-start",a=e(i);if(this.className=[c,this.inline?`${c}--size-${i}`:`${c}--${i}`,`${c}--variant-${s}`,this.hasAttribute("full-width")&&`${c}--full-width`,this.disabled&&`${c}--disabled`,this.readonly&&`${c}--readonly`,this.isOpen&&`${c}--open`,this.hasAttribute("error")&&`${c}--error`,this.isPanelLayout&&`${c}--panel`].filter(Boolean).join(" "),this.replaceChildren(),this.inline)return this.calendarHost=document.createElement("div"),this.appendChild(this.calendarHost),void this.renderCalendar();if(!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const r=this.getAttribute("label")||"";this.labelEl.textContent=r,this.labelEl.hidden=!r,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.isPanelLayout?"기간을 선택하세요":"날짜를 선택하세요",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const l=this.triggerEl.querySelector(`.${c}__icon-display`);l&&(l.innerHTML="",l.appendChild(t("calendar",a)),l.disabled=this.disabled);const d=this.triggerEl.querySelector(`.${c}__toggle`);if(d&&(d.innerHTML="",d.appendChild(t("chevron-down",a)),d.disabled=this.disabled),this.dropdownEl.className=[`${c}__dropdown`,`${c}__dropdown--${n}`,this.isPanelLayout&&`${c}__dropdown--panel`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen||"modal"===this.type,this.calendarHost=document.createElement("div"),this.dropdownEl.replaceChildren(this.calendarHost),this.renderCalendar(),this.append(this.labelEl,this.triggerEl),this.isOpen&&"dropdown"===this.type&&this.appendChild(this.dropdownEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title",this.isPanelLayout?"기간 선택":"날짜 선택"),t.setAttribute("size",this.isPanelLayout?"l":"s"),t.addEventListener("db-close",()=>this.handlePendingCancel());const e=document.createElement("div");if(this.calendarHost=e,this.renderCalendar(),t.append(e),this.usesPendingValue){const e=document.createElement("div");e.className=`${c}__modal-footer`;const i=document.createElement("db-button");i.setAttribute("variant","secondary"),i.setAttribute("size","m"),i.textContent="취소",i.addEventListener("click",()=>this.handlePendingCancel());const s=document.createElement("db-button");s.setAttribute("variant","primary"),s.setAttribute("size","m"),s.textContent="적용",s.addEventListener("click",()=>this.handlePendingApply()),e.append(i,s),t.append(e)}this.appendChild(t)}}}customElements.get("db-date-picker")||customElements.define("db-date-picker",DbDatePicker);export{DbDatePicker};
+import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";import"./db-modal.js";import{startOfDay as i,parseISODate as s,DEFAULT_DATE_PICKER_PRESETS as n,formatDisplayDate as a,toISODate as r,detectActivePresetId as l,addMonths as d,generateWeekdays as o,generateCalendarGrid as h,formatPanelInputDate as u}from"./date-picker-utils.js";import{DATE_PICKER_SIZES as c,DATE_PICKER_VARIANTS as p}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const m="designbase-wc-date-picker",isRangeValue=t=>Boolean(t)&&"object"==typeof t&&!Array.isArray(t)&&"start"in t&&"end"in t;class DbDatePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.currentMonth=new Date,this.viewStartMonth=new Date,this.rangeStart=null,this.hoveredDate=null,this.activePresetId="custom",this.inputText="",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t),this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.isOpen&&(t.preventDefault(),this.closePicker(),this.inputEl?.focus())},this.boundDocumentKeyDown=t=>this.handleDocumentKeyDown(t)}static get observedAttributes(){return["mode","layout","type","inline","value","default-value","min-date","max-date","size","variant","disabled","readonly","label","full-width","error","locale","start-of-week","show-outside-days","dropdown-position","open","events"]}connectedCallback(){this.built||this.build(),this.readInitialValue(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown),document.addEventListener("keydown",this.boundDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown),document.removeEventListener("keydown",this.boundDocumentKeyDown)}attributeChangedCallback(t){if(this.built){if("value"===t&&(this.readAttributeValue(),this.syncInputText()),"open"===t)return this.isOpen=this.hasAttribute("open"),void this.render();this.render()}}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get mode(){const t=this.getAttribute("mode")||"single";return"range"===t?"range":"multiple"===t?"multiple":"single"}set mode(t){this.setAttribute("mode",t)}get isPanelLayout(){return"panel"===this.getAttribute("layout")}get effectiveMode(){return this.isPanelLayout?"range":this.mode}get inline(){return this.hasAttribute("inline")}set inline(t){this.toggleAttribute("inline",Boolean(t))}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get locale(){return this.getAttribute("locale")||"ko-KR"}get startOfWeek(){return"monday"===this.getAttribute("start-of-week")?"monday":"sunday"}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get usesPendingValue(){return this.isPanelLayout||"modal"===this.type}get today(){return i(new Date)}get minDate(){return s(this.getAttribute("min-date"))}get maxDate(){return s(this.getAttribute("max-date"))}get presets(){return this.isPanelLayout?n:[]}get events(){const t=this.getAttribute("events");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${m}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${m}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${m}__icon-display`,t.setAttribute("aria-label","날짜 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${m}__input`,this.inputEl.setAttribute("aria-label","날짜 입력"),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const e=document.createElement("button");e.type="button",e.className=`${m}__toggle`,e.setAttribute("aria-label","날짜 선택 열기"),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${m}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false"),this.calendarHost=document.createElement("div"),this.dropdownEl.appendChild(this.calendarHost)}readInitialValue(){const t=this.getAttribute("value")??this.getAttribute("default-value");if(t&&(this.selectedValue=this.parseValue(t)),this.tempValue=this.selectedValue,this.syncInputText(),isRangeValue(this.selectedValue)){const t=s(this.selectedValue.start);t&&(this.viewStartMonth=new Date(t))}else if("string"==typeof this.selectedValue){const t=s(this.selectedValue);t&&(this.currentMonth=new Date(t))}}readAttributeValue(){const t=this.getAttribute("value");if(!t)return this.selectedValue=void 0,void(this.tempValue=void 0);this.selectedValue=this.parseValue(t),this.isOpen&&this.usesPendingValue||(this.tempValue=this.selectedValue)}parseValue(t){if(t){if("multiple"===this.effectiveMode||t.trim().startsWith("["))try{const e=JSON.parse(t);if(Array.isArray(e))return e.filter(t=>Boolean(s(t)))}catch{return}if("range"===this.effectiveMode||t.trim().startsWith("{"))try{const e=JSON.parse(t);if(e?.start&&e?.end)return{start:e.start,end:e.end}}catch{return}return s(t)?t:void 0}}serializeValue(t){return t?"string"==typeof t?t:JSON.stringify(t):""}formatDisplay(t){if(!t)return"";if("string"==typeof t){const e=s(t);return e?a(e,this.locale):""}if(Array.isArray(t))return t.map(t=>s(t)).filter(Boolean).map(t=>a(t,this.locale)).join(", ");const e=s(t.start),i=s(t.end);return e&&i?t.start===t.end?a(e,this.locale):`${a(e,this.locale)} ~ ${a(i,this.locale)}`:""}syncInputText(){this.inputText=this.formatDisplay(this.selectedValue),this.inputEl&&(this.inputEl.value=this.inputText)}getWorkingValue(){return"range"===this.effectiveMode&&this.rangeStart?this.tempValue??this.selectedValue:this.usesPendingValue&&(this.isOpen||this.inline)?this.tempValue:this.selectedValue}presetContext(){return{today:this.today,startOfWeek:this.startOfWeek,minDate:this.minDate??void 0,maxDate:this.maxDate??void 0}}isDateValid(t){return!(this.minDate&&t<this.minDate)&&!(this.maxDate&&t>this.maxDate)}emitChange(t){const e=this.serializeValue(t);e?this.setAttribute("value",e):this.removeAttribute("value"),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t??null},bubbles:!0,composed:!0}))}applyValue(t,e=!this.usesPendingValue){if(e)return this.selectedValue=t,this.tempValue=t,this.syncInputText(),void this.emitChange(t);this.tempValue=t,this.renderCalendar()}handleDateClick(t){if(this.disabled||this.readonly||!this.isDateValid(t))return;this.isPanelLayout&&(this.activePresetId="custom");const e=this.getWorkingValue();if("single"===this.effectiveMode){const e=r(t);return this.applyValue(e,!this.usesPendingValue),this.inline||this.isPanelLayout||this.closePicker(),void this.render()}if("multiple"===this.effectiveMode){const i=r(t),s=Array.isArray(e)?e:[],n=s.includes(i)?s.filter(t=>t!==i):[...s,i];return this.applyValue(n,!this.usesPendingValue),void this.render()}if(!this.rangeStart)return this.rangeStart=t,this.applyValue({start:r(t),end:r(t)},!1),void this.renderCalendar();const i=this.rangeStart,s=t,n=i>s?{start:r(s),end:r(i)}:{start:r(i),end:r(s)};this.rangeStart=null,this.applyValue(n,!0),this.inline||this.isPanelLayout||this.closePicker(),this.render()}handlePresetSelect(t){if(this.activePresetId=t.id,this.rangeStart=null,"custom"===t.id)return void this.renderCalendar();const e=t.getRange(this.presetContext());if(!e)return;const i={start:r(e.start),end:r(e.end)};this.viewStartMonth=new Date(e.start),this.applyValue(i,!this.usesPendingValue),this.render()}handlePendingApply(){this.selectedValue=this.tempValue,this.syncInputText(),this.emitChange(this.tempValue),this.rangeStart=null,this.closePicker(),this.render()}handlePendingCancel(){this.tempValue=this.selectedValue,this.rangeStart=null,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext()),this.closePicker(),this.render()}handleInputBlur(){if(!this.inputEl)return;const t=this.inputEl.value.trim();if(t.match(/^(\d{4})-(\d{2})-(\d{2})$/)){const e=s(t);if(e&&this.isDateValid(e)){const t=r(e);return this.applyValue(t,!0),void this.render()}}this.syncInputText()}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}get readonly(){return this.hasAttribute("readonly")}set readonly(t){this.toggleAttribute("readonly",Boolean(t))}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,this.usesPendingValue&&(this.tempValue=this.selectedValue,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext())),this.render())}closePicker(){this.isOpen=!1,this.rangeStart=null,this.hoveredDate=null,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&!this.inline&&(this.contains(t.target)||(this.usesPendingValue&&(this.tempValue=this.selectedValue),this.closePicker()))}isDateSelected(t){const e=r(t),i=this.getWorkingValue();return"single"===this.effectiveMode?"string"==typeof i&&i===e:"multiple"===this.effectiveMode?Array.isArray(i)&&i.includes(e):!(!this.rangeStart||r(this.rangeStart)!==e)||!!isRangeValue(i)&&(i.start===e||i.end===e)}isInRange(t){if("range"!==this.effectiveMode)return!1;let e=null,i=null;if(this.rangeStart)e=this.rangeStart,i=this.hoveredDate;else{const t=this.getWorkingValue();isRangeValue(t)&&(e=s(t.start),i=s(t.end))}if(!e)return!1;const n=r(t),a=r(e),l=i?r(i):a;return n>=a&&n<=l}renderDateCell(t,e){const i=t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear(),n=t.toDateString()===this.today.toDateString(),a=this.isDateSelected(t),r=this.isInRange(t),l=0===t.getDay()||6===t.getDay(),d=this.events.filter(e=>{const i=s(e.date);return!!i&&i.toDateString()===t.toDateString()}),o=this.getWorkingValue(),h=isRangeValue(o)?s(o.end)?.toDateString():void 0,u=isRangeValue(o)?s(o.start)?.toDateString():void 0,c=document.createElement("button");c.type="button",c.className=[`${m}__date`,!i&&this.showOutsideDays&&`${m}__date--outside`,n&&`${m}__date--today`,a&&`${m}__date--selected`,r&&!a&&`${m}__date--in-range`,"range"===this.effectiveMode&&(this.rangeStart?.toDateString()===t.toDateString()||u===t.toDateString())&&`${m}__date--range-start`,"range"===this.effectiveMode&&h===t.toDateString()&&`${m}__date--range-end`,l&&`${m}__date--weekend`,!this.isDateValid(t)&&`${m}__date--disabled`,d.length>0&&`${m}__date--has-events`].filter(Boolean).join(" "),c.disabled=!this.isDateValid(t)||this.disabled||this.readonly,c.addEventListener("click",()=>this.handleDateClick(t));const p=document.createElement("span");if(p.className=`${m}__date-number`,p.textContent=String(t.getDate()),c.appendChild(p),d.length>0){const t=document.createElement("div");t.className=`${m}__events`,d.slice(0,3).forEach(e=>{const i=document.createElement("div");i.className=`${m}__event ${m}__event--${e.type||"dot"}`,e.color&&(i.style.backgroundColor=e.color),e.label&&(i.title=e.label),t.appendChild(i)}),c.appendChild(t)}return c}renderSingleMonth(i,s={}){const{showPrev:n=!1,showNext:a=!1}=s,r=this.getAttribute("size")||"m",l=e(r),u=document.createElement("div");u.className=`${m}__month`;const c=document.createElement("div");if(c.className=`${m}__header`,n){const e=document.createElement("button");e.type="button",e.className=`${m}__nav-button`,e.setAttribute("aria-label","이전 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-left",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,-1):this.currentMonth=d(this.currentMonth,-1),this.renderCalendar()}),c.appendChild(e)}else{const t=document.createElement("span");t.className=`${m}__nav-spacer`,t.setAttribute("aria-hidden","true"),c.appendChild(t)}const p=document.createElement("div");if(p.className=`${m}__current-month`,p.textContent=i.toLocaleDateString(this.locale,{year:"numeric",month:"long"}),c.appendChild(p),a){const e=document.createElement("button");e.type="button",e.className=`${m}__nav-button`,e.setAttribute("aria-label","다음 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-right",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,1):this.currentMonth=d(this.currentMonth,1),this.renderCalendar()}),c.appendChild(e)}else{const t=document.createElement("span");t.className=`${m}__nav-spacer`,t.setAttribute("aria-hidden","true"),c.appendChild(t)}u.appendChild(c);const g=document.createElement("div");g.className=`${m}__weekdays`,o(this.startOfWeek).forEach(t=>{const e=document.createElement("div");e.className=`${m}__weekday`,e.textContent=t,g.appendChild(e)}),u.appendChild(g);const b=document.createElement("div");b.className=`${m}__grid`;const v=this.isPanelLayout;return h(i,this.startOfWeek,v).forEach((t,e)=>{if(!t){const t=document.createElement("span");return t.className=`${m}__date ${m}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}const s=t.getMonth()===i.getMonth()&&t.getFullYear()===i.getFullYear();if(!this.showOutsideDays&&!s){const t=document.createElement("span");return t.className=`${m}__date ${m}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}b.appendChild(this.renderDateCell(t,i))}),u.appendChild(b),u}renderDefaultCalendar(){const t=document.createElement("div");t.className=`${m}__selector`;const e=this.isPanelLayout?this.viewStartMonth:this.currentMonth;if(t.appendChild(this.renderSingleMonth(e,{showPrev:!0,showNext:!0})),!this.isPanelLayout){const e=document.createElement("div");e.className=`${m}__footer`;const i=document.createElement("button");i.type="button",i.className=`${m}__today-button`,i.textContent="오늘",i.disabled=this.disabled||this.readonly,i.addEventListener("click",()=>{const t=new Date;this.isPanelLayout?this.viewStartMonth=t:this.currentMonth=t,this.renderCalendar()}),e.appendChild(i),t.appendChild(e)}return t}renderPanelCalendar(){const t=document.createElement("div");t.className=`${m}__panel`;const e=document.createElement("div");e.className=`${m}__presets`,e.setAttribute("role","listbox"),e.setAttribute("aria-label","기간 프리셋"),this.presets.forEach(t=>{const i=document.createElement("button");i.type="button",i.className=[`${m}__preset`,this.activePresetId===t.id&&`${m}__preset--active`].filter(Boolean).join(" "),i.setAttribute("role","option"),i.setAttribute("aria-selected",String(this.activePresetId===t.id)),i.textContent=t.label,i.addEventListener("click",()=>this.handlePresetSelect(t)),e.appendChild(i)}),t.appendChild(e);const i=document.createElement("div");i.className=`${m}__panel-main`;const n=document.createElement("div");n.className=`${m}__months ${m}__months--count-2`,[0,1].forEach(t=>{const e=d(this.viewStartMonth,t);n.appendChild(this.renderSingleMonth(e,{showPrev:0===t,showNext:1===t}))}),i.appendChild(n);const a=document.createElement("div");a.className=`${m}__panel-footer`;const r=isRangeValue(this.tempValue)?this.tempValue:void 0,l=document.createElement("div");l.className=`${m}__range-display`;const o=document.createElement("span");o.className=`${m}__range-text`,o.textContent=r?.start&&s(r.start)?u(s(r.start),this.locale):"시작일";const h=document.createElement("span");h.className=`${m}__range-separator`,h.textContent="–";const c=document.createElement("span");c.className=`${m}__range-text`,c.textContent=r?.end&&s(r.end)?u(s(r.end),this.locale):"종료일",l.append(o,h,c),a.appendChild(l);const p=document.createElement("div");p.className=`${m}__panel-actions`;const g=document.createElement("db-button");g.setAttribute("variant","secondary"),g.setAttribute("size","m"),g.textContent="취소",g.addEventListener("click",()=>this.handlePendingCancel());const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="적용",b.addEventListener("click",()=>this.handlePendingApply()),p.append(g,b),a.appendChild(p),i.appendChild(a),t.appendChild(i),t}renderCalendar(){this.calendarHost&&(this.calendarHost.replaceChildren(),this.calendarHost.appendChild(this.isPanelLayout?this.renderPanelCalendar():this.renderDefaultCalendar()))}render(){const i=c.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",s=p.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",n=this.getAttribute("dropdown-position")||"bottom-start",a=e(i);if(this.className=[m,this.inline?`${m}--size-${i}`:`${m}--${i}`,`${m}--variant-${s}`,this.hasAttribute("full-width")&&`${m}--full-width`,this.disabled&&`${m}--disabled`,this.readonly&&`${m}--readonly`,this.isOpen&&`${m}--open`,this.hasAttribute("error")&&`${m}--error`,this.isPanelLayout&&`${m}--panel`].filter(Boolean).join(" "),this.inputEl?.setAttribute("aria-invalid",String(this.hasAttribute("error"))),this.replaceChildren(),this.inline)return this.calendarHost=document.createElement("div"),this.appendChild(this.calendarHost),void this.renderCalendar();if(!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const r=this.getAttribute("label")||"";this.labelEl.textContent=r,this.labelEl.hidden=!r,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.isPanelLayout?"기간을 선택하세요":"날짜를 선택하세요",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const l=this.triggerEl.querySelector(`.${m}__icon-display`);l&&(l.innerHTML="",l.appendChild(t("calendar",a)),l.disabled=this.disabled);const d=this.triggerEl.querySelector(`.${m}__toggle`);if(d&&(d.innerHTML="",d.appendChild(t("chevron-down",a)),d.disabled=this.disabled),this.dropdownEl.className=[`${m}__dropdown`,`${m}__dropdown--${n}`,this.isPanelLayout&&`${m}__dropdown--panel`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen||"modal"===this.type,this.calendarHost=document.createElement("div"),this.dropdownEl.replaceChildren(this.calendarHost),this.renderCalendar(),this.append(this.labelEl,this.triggerEl),this.isOpen&&"dropdown"===this.type&&this.appendChild(this.dropdownEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title",this.isPanelLayout?"기간 선택":"날짜 선택"),t.setAttribute("size",this.isPanelLayout?"l":"s"),t.addEventListener("db-close",()=>this.handlePendingCancel());const e=document.createElement("div");if(this.calendarHost=e,this.renderCalendar(),t.append(e),this.usesPendingValue){const e=document.createElement("div");e.className=`${m}__modal-footer`;const i=document.createElement("db-button");i.setAttribute("variant","secondary"),i.setAttribute("size","m"),i.textContent="취소",i.addEventListener("click",()=>this.handlePendingCancel());const s=document.createElement("db-button");s.setAttribute("variant","primary"),s.setAttribute("size","m"),s.textContent="적용",s.addEventListener("click",()=>this.handlePendingApply()),e.append(i,s),t.append(e)}this.appendChild(t)}}}customElements.get("db-date-picker")||customElements.define("db-date-picker",DbDatePicker);export{DbDatePicker};

package/dist/esm/components/db-divider.js

@@ -1 +1 @@
-const t=["primary","secondary","success","warning","danger","muted"];class DbDivider extends HTMLElement{static get observedAttributes(){return["orientation","thickness","color","length","variant","margin"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("orientation")||"horizontal",i=this.getAttribute("variant")||"solid",s=Number(this.getAttribute("thickness")||1),r=this.getAttribute("color"),d=this.getAttribute("length"),n=this.getAttribute("margin");this.className=["designbase-wc-divider",`designbase-wc-divider--${e}`,`designbase-wc-divider--${i}`,r&&t.includes(r)?`designbase-wc-divider--${r}`:""].filter(Boolean).join(" "),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",e),this.style.border="none",this.style.background="none",this.style.margin="",this.style.width="",this.style.height="","vertical"===e?(this.style.display="inline-block",this.style.borderLeft=`${s}px ${i} var(--db-border-base)`,this.style.verticalAlign="middle",d&&(this.style.height=d.endsWith("px")||d.endsWith("%")?d:`${d}px`)):(this.style.display="block",this.style.width="100%",this.style.borderTop=`${s}px ${i} var(--db-border-base)`),r&&!t.includes(r)&&("vertical"===e?this.style.borderLeftColor=r:this.style.borderTopColor=r),n&&(this.style.margin=/^\d+$/.test(n)?`${n}px`:n)}}customElements.get("db-divider")||customElements.define("db-divider",DbDivider);export{DbDivider};
+import{DIVIDER_COLORS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbDivider extends HTMLElement{static get observedAttributes(){return["orientation","thickness","color","length","variant","margin"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("orientation")||"horizontal",i=this.getAttribute("variant")||"solid",s=Number(this.getAttribute("thickness")||1),r=this.getAttribute("color"),d=this.getAttribute("length"),n=this.getAttribute("margin");this.className=["designbase-wc-divider",`designbase-wc-divider--${e}`,`designbase-wc-divider--${i}`,r&&t.includes(r)?`designbase-wc-divider--${r}`:""].filter(Boolean).join(" "),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",e),this.style.border="none",this.style.background="none",this.style.margin="",this.style.width="",this.style.height="","vertical"===e?(this.style.display="inline-block",this.style.borderLeft=`${s}px ${i} var(--db-border-base)`,this.style.verticalAlign="middle",d&&(this.style.height=d.endsWith("px")||d.endsWith("%")?d:`${d}px`)):(this.style.display="block",this.style.width="100%",this.style.borderTop=`${s}px ${i} var(--db-border-base)`),r&&!t.includes(r)&&("vertical"===e?this.style.borderLeftColor=r:this.style.borderTopColor=r),n&&(this.style.margin=/^\d+$/.test(n)?`${n}px`:n)}}customElements.get("db-divider")||customElements.define("db-divider",DbDivider);export{DbDivider};

package/dist/esm/components/db-download-progress.d.ts

@@ -1,10 +1,9 @@
 import './db-progressbar.js';
 import './db-button.js';
+import { DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS } from '@designbasekorea/ui-contracts';
 
-declare const STATUSES: readonly ["downloading", "paused", "error", "complete"];
-type DownloadStatus = (typeof STATUSES)[number];
-declare const POSITIONS: readonly ["bottom-right", "bottom-left", "bottom-center", "top-right", "top-left", "top-center"];
-type DownloadPosition = (typeof POSITIONS)[number];
+type DownloadStatus = (typeof DOWNLOAD_PROGRESS_STATUSES)[number];
+type DownloadPosition = (typeof DOWNLOAD_PROGRESS_POSITIONS)[number];
 /**
  * 우측 하단(기본)에 떠 있는 다운로드 진행률 위젯.
  *

package/dist/esm/components/db-download-progress.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import"./db-progressbar.js";import"./db-button.js";const t=["downloading","paused","error","complete"],s=["bottom-right","bottom-left","bottom-center","top-right","top-left","top-center"],i={downloading:"download",paused:"pause",error:"error-filled",complete:"circle-checked"},o={downloading:"다운로드 중",paused:"일시정지됨",error:"다운로드 실패",complete:"다운로드 완료"},n={downloading:"완료될 때까지 기다려 주세요.",paused:"다운로드가 일시정지되었습니다.",error:"문제가 발생했어요. 다시 시도해 주세요.",complete:"파일 다운로드가 완료되었습니다."},r={downloading:"primary",paused:"default",error:"danger",complete:"success"},a=new Map;function getStackSet(e){let t=a.get(e);return t||(t=new Set,a.set(e,t)),t}function isStackParticipant(e){return!(!e.isConnected||e.closed||e.hasAttribute("no-stack"))&&"fixed"===getComputedStyle(e).position}function relayoutStack(e){const t=a.get(e);if(!t)return;const s=[...t].filter(isStackParticipant),i=e.startsWith("top"),o=s[0]?.stackMode??"stack";s.forEach((e,t)=>{const n=s.length-1-t;if(e.dataset.stackIndex=String(n),e.style.setProperty("--dbdl-stack-index",String(n)),e.style.zIndex=String(9999+t),"deck"===o){const t=Math.max(.88,1-.04*n),s=10*n;e.style.setProperty("--dbdl-stack-offset","0px"),e.style.setProperty("--dbdl-stack-scale",String(t)),e.style.setProperty("--dbdl-stack-shift",`${i?s:-s}px`),e.classList.add("designbase-wc-download-progress--stacked-deck"),e.classList.remove("designbase-wc-download-progress--stacked-list")}else{let i=0;for(let e=s.length-1;e>t;e-=1)i+=s[e].offsetHeight+12;e.style.setProperty("--dbdl-stack-offset",`${i}px`),e.style.setProperty("--dbdl-stack-scale","1"),e.style.setProperty("--dbdl-stack-shift","0px"),e.classList.add("designbase-wc-download-progress--stacked-list"),e.classList.remove("designbase-wc-download-progress--stacked-deck")}}),t.forEach(e=>{s.includes(e)||(e.style.removeProperty("--dbdl-stack-offset"),e.style.removeProperty("--dbdl-stack-scale"),e.style.removeProperty("--dbdl-stack-shift"),e.style.removeProperty("z-index"),e.classList.remove("designbase-wc-download-progress--stacked-list","designbase-wc-download-progress--stacked-deck"),delete e.dataset.stackIndex)})}class DbDownloadProgress extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.renderedStatus=null,this.closeTimerId=null,this.resizeObserver=null,this.registeredPosition=null,this.closed=!1,this.handleMainClick=e=>{e.target.closest(".designbase-wc-download-progress__header-actions")||this.toggle()},this.handleToggleClick=e=>{e.stopPropagation(),this.toggle()},this.handleCloseClick=e=>{e.stopPropagation(),this.close()}}static get observedAttributes(){return["file-name","value","max","status","position","minimized","label","description","remaining","size-label","error-text","closable","stack-mode","no-stack","auto-remove"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}get max(){return Number(this.getAttribute("max")||100)}set max(e){this.setAttribute("max",String(e))}get status(){const e=this.getAttribute("status");return t.includes(e)?e:"downloading"}set status(e){this.setAttribute("status",e)}get fileName(){return this.getAttribute("file-name")||""}set fileName(e){this.setAttribute("file-name",e)}get position(){const e=this.getAttribute("position");return s.includes(e)?e:"bottom-right"}set position(e){this.setAttribute("position",e)}get minimized(){return this.hasAttribute("minimized")}set minimized(e){this.toggleAttribute("minimized",e)}get stackMode(){return"deck"===this.getAttribute("stack-mode")?"deck":"stack"}set stackMode(e){this.setAttribute("stack-mode",e)}connectedCallback(){this.build(),this.sync(),this.registerStack(),requestAnimationFrame(()=>{this.classList.add("designbase-wc-download-progress--visible"),relayoutStack(this.position)}),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.registeredPosition&&relayoutStack(this.registeredPosition)}),this.resizeObserver.observe(this))}disconnectedCallback(){this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.unregisterStack()}attributeChangedCallback(e){this.built&&(this.sync(),"position"!==e&&"stack-mode"!==e&&"no-stack"!==e&&"minimized"!==e||(this.registerStack(),this.registeredPosition&&relayoutStack(this.registeredPosition),s.forEach(e=>{e!==this.registeredPosition&&relayoutStack(e)})))}registerStack(){const e=this.position;this.registeredPosition&&this.registeredPosition!==e&&(getStackSet(this.registeredPosition).delete(this),relayoutStack(this.registeredPosition)),getStackSet(e).add(this),this.registeredPosition=e}unregisterStack(){if(!this.registeredPosition)return;const e=this.registeredPosition;getStackSet(e).delete(this),this.registeredPosition=null,relayoutStack(e)}build(){if(this.built)return;this.built=!0,this.classList.add("designbase-wc-download-progress"),this.replaceChildren();const t=el("div","designbase-wc-download-progress__shell");this.mainRow=el("button","designbase-wc-download-progress__main"),this.mainRow.type="button",this.mainRow.setAttribute("aria-label","다운로드 상세 펼치기/접기"),this.mainRow.addEventListener("click",this.handleMainClick),this.iconEl=el("span","designbase-wc-download-progress__icon"),this.iconEl.setAttribute("aria-hidden","true");const s=el("span","designbase-wc-download-progress__text"),i=el("span","designbase-wc-download-progress__title");this.labelEl=el("span","designbase-wc-download-progress__label"),this.fileEl=el("span","designbase-wc-download-progress__file"),i.append(this.labelEl,this.fileEl),this.subtitleEl=el("span","designbase-wc-download-progress__subtitle"),s.append(i,this.subtitleEl),this.inlinePercentEl=el("span","designbase-wc-download-progress__inline-percent");const o=el("span","designbase-wc-download-progress__header-actions");this.toggleBtn=el("button","designbase-wc-download-progress__icon-button"),this.toggleBtn.type="button",this.toggleBtn.addEventListener("click",this.handleToggleClick),this.closeBtn=el("button","designbase-wc-download-progress__icon-button"),this.closeBtn.type="button",this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(e("close",18)),this.closeBtn.addEventListener("click",this.handleCloseClick),o.append(this.toggleBtn,this.closeBtn),this.mainRow.append(this.iconEl,s,this.inlinePercentEl,o);const n=el("div","designbase-wc-download-progress__collapsible"),r=el("div","designbase-wc-download-progress__collapse-inner"),a=el("div","designbase-wc-download-progress__body");this.bodyBar=document.createElement("db-progressbar"),this.bodyBar.setAttribute("full-width",""),this.bodyBar.setAttribute("size","s");const d=el("div","designbase-wc-download-progress__meta");this.percentEl=el("span","designbase-wc-download-progress__percent"),this.metaDotEl=el("span","designbase-wc-download-progress__meta-dot"),this.metaDotEl.textContent="•",this.remainingEl=el("span","designbase-wc-download-progress__remaining"),d.append(this.percentEl,this.metaDotEl,this.remainingEl),a.append(this.bodyBar,d);const l=el("div","designbase-wc-download-progress__footer");this.actionsEl=el("div","designbase-wc-download-progress__actions"),l.append(this.actionsEl),r.append(a,l),n.append(r);const c=el("div","designbase-wc-download-progress__edge");this.edgeBar=document.createElement("db-progressbar"),this.edgeBar.setAttribute("full-width",""),this.edgeBar.setAttribute("size","s"),c.append(this.edgeBar),t.append(this.mainRow,n,c),this.append(t)}sync(){const a=this.status,d=this.max,l="complete"===a?d:this.value,c=Math.max(0,Math.min(d,l)),h=0===d?0:Math.round((c-0)/(d-0)*100);this.classList.add("designbase-wc-download-progress"),s.forEach(e=>this.classList.toggle(`designbase-wc-download-progress--${e}`,e===this.position)),t.forEach(e=>this.classList.toggle(`designbase-wc-download-progress--${e}`,e===a)),this.classList.toggle("designbase-wc-download-progress--minimized",this.minimized),this.renderedStatus!==a&&(this.iconEl.className=`designbase-wc-download-progress__icon designbase-wc-download-progress__icon--${a}`,this.iconEl.replaceChildren(e(i[a],20)),this.renderActions(a),"complete"===a&&(this.iconEl.classList.remove("designbase-wc-download-progress__icon--pop"),this.iconEl.offsetWidth,this.iconEl.classList.add("designbase-wc-download-progress__icon--pop"),this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0}))),this.renderedStatus=a),this.labelEl.textContent=this.getAttribute("label")||o[a],this.fileEl.textContent=this.fileName,this.fileEl.hidden=!this.fileName,this.subtitleEl.textContent="error"===a&&this.getAttribute("error-text")||this.getAttribute("description")||n[a],this.inlinePercentEl.textContent="complete"===a?"100%":`${h}%`,this.percentEl.textContent=`${h}%`;const g=this.getAttribute("remaining")||"",b=this.getAttribute("size-label")||"";"complete"===a?(this.percentEl.textContent=b||"완료됨",this.metaDotEl.hidden=!0,this.remainingEl.hidden=!0):"error"===a?(this.percentEl.textContent=`${h}%`,this.metaDotEl.hidden=!g,this.remainingEl.hidden=!g,this.remainingEl.textContent=g):(this.metaDotEl.hidden=!g,this.remainingEl.hidden=!g,this.remainingEl.textContent=g);const p=r[a],u="downloading"===a?"animated":"solid";[this.bodyBar,this.edgeBar].forEach(e=>{e.setAttribute("value",String(c)),e.setAttribute("max",String(d)),e.setAttribute("variant",p),e.setAttribute("bar-style",u)}),this.toggleBtn.replaceChildren(e(this.minimized?"expand":"chevron-down",18)),this.toggleBtn.setAttribute("aria-label",this.minimized?"펼치기":"최소화"),this.toggleBtn.setAttribute("aria-expanded",String(!this.minimized));const m="true"===this.getAttribute("closable")||this.hasAttribute("closable")&&"false"!==this.getAttribute("closable")||"complete"===a;this.closeBtn.hidden=!m,this.mainRow.setAttribute("aria-label",this.minimized?"다운로드 펼치기":"다운로드 접기"),this.setAttribute("role","status"),this.setAttribute("aria-live","error"===a?"assertive":"polite")}renderActions(e){this.actionsEl.replaceChildren();const make=(e,t,s,i)=>{const o=document.createElement("db-button");return o.setAttribute("variant",t),o.setAttribute("size","s"),i&&o.setAttribute("start-icon",i),o.textContent=e,o.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0})),"db-cancel"!==s&&"db-dismiss"!==s||this.close()}),o};"downloading"===e?this.actionsEl.append(make("취소","ghost","db-cancel")):"paused"===e?this.actionsEl.append(make("취소","ghost","db-cancel"),make("재개","primary","db-resume","play")):"error"===e?this.actionsEl.append(make("취소","ghost","db-cancel"),make("다시 시도","primary","db-retry","refresh")):"complete"===e&&this.actionsEl.append(make("폴더 열기","secondary","db-open","folder-open"),make("닫기","ghost","db-dismiss"))}minimize(){this.minimized||(this.minimized=!0,this.dispatchEvent(new CustomEvent("db-minimize",{bubbles:!0,composed:!0})))}expand(){this.minimized&&(this.minimized=!1,this.dispatchEvent(new CustomEvent("db-expand",{bubbles:!0,composed:!0})))}toggle(){this.minimized?this.expand():this.minimize()}setProgress(e){this.value=e}setStatus(e){this.status=e}close(){this.closed||(this.closed=!0,this.classList.remove("designbase-wc-download-progress--visible"),this.classList.add("designbase-wc-download-progress--closing"),this.unregisterStack(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})),this.setAttribute("closed",""),this.hidden=!0;("true"===this.getAttribute("auto-remove")||this.hasAttribute("auto-remove")&&"false"!==this.getAttribute("auto-remove"))&&this.remove()},260))}}function el(e,t){const s=document.createElement(e);return s.className=t,s}customElements.get("db-download-progress")||customElements.define("db-download-progress",DbDownloadProgress);export{DbDownloadProgress};
+import{createDbIcon as e}from"./db-icons.js";import"./db-progressbar.js";import"./db-button.js";import{DOWNLOAD_PROGRESS_STATUSES as t,DOWNLOAD_PROGRESS_POSITIONS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i={downloading:"download",paused:"pause",error:"error-filled",complete:"circle-checked"},o={downloading:"다운로드 중",paused:"일시정지됨",error:"다운로드 실패",complete:"다운로드 완료"},n={downloading:"완료될 때까지 기다려 주세요.",paused:"다운로드가 일시정지되었습니다.",error:"문제가 발생했어요. 다시 시도해 주세요.",complete:"파일 다운로드가 완료되었습니다."},r={downloading:"primary",paused:"default",error:"danger",complete:"success"},a=new Map;function getStackSet(e){let t=a.get(e);return t||(t=new Set,a.set(e,t)),t}function isStackParticipant(e){return!(!e.isConnected||e.closed||e.hasAttribute("no-stack"))&&"fixed"===getComputedStyle(e).position}function relayoutStack(e){const t=a.get(e);if(!t)return;const s=[...t].filter(isStackParticipant),i=e.startsWith("top"),o=s[0]?.stackMode??"stack";s.forEach((e,t)=>{const n=s.length-1-t;if(e.dataset.stackIndex=String(n),e.style.setProperty("--dbdl-stack-index",String(n)),e.style.zIndex=String(9999+t),"deck"===o){const t=Math.max(.88,1-.04*n),s=10*n;e.style.setProperty("--dbdl-stack-offset","0px"),e.style.setProperty("--dbdl-stack-scale",String(t)),e.style.setProperty("--dbdl-stack-shift",`${i?s:-s}px`),e.classList.add("designbase-wc-download-progress--stacked-deck"),e.classList.remove("designbase-wc-download-progress--stacked-list")}else{let i=0;for(let e=s.length-1;e>t;e-=1)i+=s[e].offsetHeight+12;e.style.setProperty("--dbdl-stack-offset",`${i}px`),e.style.setProperty("--dbdl-stack-scale","1"),e.style.setProperty("--dbdl-stack-shift","0px"),e.classList.add("designbase-wc-download-progress--stacked-list"),e.classList.remove("designbase-wc-download-progress--stacked-deck")}}),t.forEach(e=>{s.includes(e)||(e.style.removeProperty("--dbdl-stack-offset"),e.style.removeProperty("--dbdl-stack-scale"),e.style.removeProperty("--dbdl-stack-shift"),e.style.removeProperty("z-index"),e.classList.remove("designbase-wc-download-progress--stacked-list","designbase-wc-download-progress--stacked-deck"),delete e.dataset.stackIndex)})}class DbDownloadProgress extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.renderedStatus=null,this.closeTimerId=null,this.resizeObserver=null,this.registeredPosition=null,this.closed=!1,this.handleMainClick=e=>{e.target.closest(".designbase-wc-download-progress__header-actions")||this.toggle()},this.handleToggleClick=e=>{e.stopPropagation(),this.toggle()},this.handleCloseClick=e=>{e.stopPropagation(),this.close()}}static get observedAttributes(){return["file-name","value","max","status","position","minimized","label","description","remaining","size-label","error-text","closable","stack-mode","no-stack","auto-remove"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}get max(){return Number(this.getAttribute("max")||100)}set max(e){this.setAttribute("max",String(e))}get status(){const e=this.getAttribute("status");return t.includes(e)?e:"downloading"}set status(e){this.setAttribute("status",e)}get fileName(){return this.getAttribute("file-name")||""}set fileName(e){this.setAttribute("file-name",e)}get position(){const e=this.getAttribute("position");return s.includes(e)?e:"bottom-right"}set position(e){this.setAttribute("position",e)}get minimized(){return this.hasAttribute("minimized")}set minimized(e){this.toggleAttribute("minimized",e)}get stackMode(){return"deck"===this.getAttribute("stack-mode")?"deck":"stack"}set stackMode(e){this.setAttribute("stack-mode",e)}connectedCallback(){this.build(),this.sync(),this.registerStack(),requestAnimationFrame(()=>{this.classList.add("designbase-wc-download-progress--visible"),relayoutStack(this.position)}),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.registeredPosition&&relayoutStack(this.registeredPosition)}),this.resizeObserver.observe(this))}disconnectedCallback(){this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.unregisterStack()}attributeChangedCallback(e){this.built&&(this.sync(),"position"!==e&&"stack-mode"!==e&&"no-stack"!==e&&"minimized"!==e||(this.registerStack(),this.registeredPosition&&relayoutStack(this.registeredPosition),s.forEach(e=>{e!==this.registeredPosition&&relayoutStack(e)})))}registerStack(){const e=this.position;this.registeredPosition&&this.registeredPosition!==e&&(getStackSet(this.registeredPosition).delete(this),relayoutStack(this.registeredPosition)),getStackSet(e).add(this),this.registeredPosition=e}unregisterStack(){if(!this.registeredPosition)return;const e=this.registeredPosition;getStackSet(e).delete(this),this.registeredPosition=null,relayoutStack(e)}build(){if(this.built)return;this.built=!0,this.classList.add("designbase-wc-download-progress"),this.replaceChildren();const t=el("div","designbase-wc-download-progress__shell");this.mainRow=el("button","designbase-wc-download-progress__main"),this.mainRow.type="button",this.mainRow.setAttribute("aria-label","다운로드 상세 펼치기/접기"),this.mainRow.addEventListener("click",this.handleMainClick),this.iconEl=el("span","designbase-wc-download-progress__icon"),this.iconEl.setAttribute("aria-hidden","true");const s=el("span","designbase-wc-download-progress__text"),i=el("span","designbase-wc-download-progress__title");this.labelEl=el("span","designbase-wc-download-progress__label"),this.fileEl=el("span","designbase-wc-download-progress__file"),i.append(this.labelEl,this.fileEl),this.subtitleEl=el("span","designbase-wc-download-progress__subtitle"),s.append(i,this.subtitleEl),this.inlinePercentEl=el("span","designbase-wc-download-progress__inline-percent");const o=el("span","designbase-wc-download-progress__header-actions");this.toggleBtn=el("button","designbase-wc-download-progress__icon-button"),this.toggleBtn.type="button",this.toggleBtn.addEventListener("click",this.handleToggleClick),this.closeBtn=el("button","designbase-wc-download-progress__icon-button"),this.closeBtn.type="button",this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(e("close",18)),this.closeBtn.addEventListener("click",this.handleCloseClick),o.append(this.toggleBtn,this.closeBtn),this.mainRow.append(this.iconEl,s,this.inlinePercentEl,o);const n=el("div","designbase-wc-download-progress__collapsible"),r=el("div","designbase-wc-download-progress__collapse-inner"),a=el("div","designbase-wc-download-progress__body");this.bodyBar=document.createElement("db-progressbar"),this.bodyBar.setAttribute("full-width",""),this.bodyBar.setAttribute("size","s");const d=el("div","designbase-wc-download-progress__meta");this.percentEl=el("span","designbase-wc-download-progress__percent"),this.metaDotEl=el("span","designbase-wc-download-progress__meta-dot"),this.metaDotEl.textContent="•",this.remainingEl=el("span","designbase-wc-download-progress__remaining"),d.append(this.percentEl,this.metaDotEl,this.remainingEl),a.append(this.bodyBar,d);const l=el("div","designbase-wc-download-progress__footer");this.actionsEl=el("div","designbase-wc-download-progress__actions"),l.append(this.actionsEl),r.append(a,l),n.append(r);const c=el("div","designbase-wc-download-progress__edge");this.edgeBar=document.createElement("db-progressbar"),this.edgeBar.setAttribute("full-width",""),this.edgeBar.setAttribute("size","s"),c.append(this.edgeBar),t.append(this.mainRow,n,c),this.append(t)}sync(){const a=this.status,d=this.max,l="complete"===a?d:this.value,c=Math.max(0,Math.min(d,l)),h=0===d?0:Math.round((c-0)/(d-0)*100);this.classList.add("designbase-wc-download-progress"),s.forEach(e=>this.classList.toggle(`designbase-wc-download-progress--${e}`,e===this.position)),t.forEach(e=>this.classList.toggle(`designbase-wc-download-progress--${e}`,e===a)),this.classList.toggle("designbase-wc-download-progress--minimized",this.minimized),this.renderedStatus!==a&&(this.iconEl.className=`designbase-wc-download-progress__icon designbase-wc-download-progress__icon--${a}`,this.iconEl.replaceChildren(e(i[a],20)),this.renderActions(a),"complete"===a&&(this.iconEl.classList.remove("designbase-wc-download-progress__icon--pop"),this.iconEl.offsetWidth,this.iconEl.classList.add("designbase-wc-download-progress__icon--pop"),this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0}))),this.renderedStatus=a),this.labelEl.textContent=this.getAttribute("label")||o[a],this.fileEl.textContent=this.fileName,this.fileEl.hidden=!this.fileName,this.subtitleEl.textContent="error"===a&&this.getAttribute("error-text")||this.getAttribute("description")||n[a],this.inlinePercentEl.textContent="complete"===a?"100%":`${h}%`,this.percentEl.textContent=`${h}%`;const g=this.getAttribute("remaining")||"",b=this.getAttribute("size-label")||"";"complete"===a?(this.percentEl.textContent=b||"완료됨",this.metaDotEl.hidden=!0,this.remainingEl.hidden=!0):"error"===a?(this.percentEl.textContent=`${h}%`,this.metaDotEl.hidden=!g,this.remainingEl.hidden=!g,this.remainingEl.textContent=g):(this.metaDotEl.hidden=!g,this.remainingEl.hidden=!g,this.remainingEl.textContent=g);const p=r[a],u="downloading"===a?"animated":"solid";[this.bodyBar,this.edgeBar].forEach(e=>{e.setAttribute("value",String(c)),e.setAttribute("max",String(d)),e.setAttribute("variant",p),e.setAttribute("bar-style",u)}),this.toggleBtn.replaceChildren(e(this.minimized?"expand":"chevron-down",18)),this.toggleBtn.setAttribute("aria-label",this.minimized?"펼치기":"최소화"),this.toggleBtn.setAttribute("aria-expanded",String(!this.minimized));const m="true"===this.getAttribute("closable")||this.hasAttribute("closable")&&"false"!==this.getAttribute("closable")||"complete"===a;this.closeBtn.hidden=!m,this.mainRow.setAttribute("aria-label",this.minimized?"다운로드 펼치기":"다운로드 접기"),this.setAttribute("role","status"),this.setAttribute("aria-live","error"===a?"assertive":"polite")}renderActions(e){this.actionsEl.replaceChildren();const make=(e,t,s,i)=>{const o=document.createElement("db-button");return o.setAttribute("variant",t),o.setAttribute("size","s"),i&&o.setAttribute("start-icon",i),o.textContent=e,o.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0})),"db-cancel"!==s&&"db-dismiss"!==s||this.close()}),o};"downloading"===e?this.actionsEl.append(make("취소","ghost","db-cancel")):"paused"===e?this.actionsEl.append(make("취소","ghost","db-cancel"),make("재개","primary","db-resume","play")):"error"===e?this.actionsEl.append(make("취소","ghost","db-cancel"),make("다시 시도","primary","db-retry","refresh")):"complete"===e&&this.actionsEl.append(make("폴더 열기","secondary","db-open","folder-open"),make("닫기","ghost","db-dismiss"))}minimize(){this.minimized||(this.minimized=!0,this.dispatchEvent(new CustomEvent("db-minimize",{bubbles:!0,composed:!0})))}expand(){this.minimized&&(this.minimized=!1,this.dispatchEvent(new CustomEvent("db-expand",{bubbles:!0,composed:!0})))}toggle(){this.minimized?this.expand():this.minimize()}setProgress(e){this.value=e}setStatus(e){this.status=e}close(){this.closed||(this.closed=!0,this.classList.remove("designbase-wc-download-progress--visible"),this.classList.add("designbase-wc-download-progress--closing"),this.unregisterStack(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})),this.setAttribute("closed",""),this.hidden=!0;("true"===this.getAttribute("auto-remove")||this.hasAttribute("auto-remove")&&"false"!==this.getAttribute("auto-remove"))&&this.remove()},260))}}function el(e,t){const s=document.createElement(e);return s.className=t,s}customElements.get("db-download-progress")||customElements.define("db-download-progress",DbDownloadProgress);export{DbDownloadProgress};

package/dist/esm/components/db-drawer.d.ts

@@ -3,15 +3,19 @@ declare class DbDrawer extends HTMLElement {
     private root?;
     private overlay?;
     private container?;
+    private focusTrap?;
     private contentEl?;
     private isMounted;
     private isActive;
     private enterFrame?;
     private exitTimer?;
-    private previousActiveElement;
+    /** 참조 카운트 스크롤락을 이 인스턴스가 잡고 있는지 (PERF-GLOBAL-STATE) */
+    private scrollLocked;
     private keyHandler;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** 잠근 적이 있을 때만 푼다 — 카운트가 음수로 새지 않도록 */
+    private releaseScrollLock;
     attributeChangedCallback(name: string): void;
     private isOpenRequested;
     private clearTimers;

package/dist/esm/components/db-drawer.js

@@ -1 +1 @@
-const t=["left","right","top","bottom"],e=["s","m","l","xl","full"];class DbDrawer extends HTMLElement{constructor(){super(...arguments),this.isMounted=!1,this.isActive=!1,this.previousActiveElement=null,this.keyHandler=null}static get observedAttributes(){return["open","title","position","size","show-close-button","close-on-backdrop-click","close-on-escape","animation-duration","show-overlay","overlay-closable","z-index","trap-focus","drawer-id"]}connectedCallback(){this.style.display="contents",this.render(),this.syncOpenState()}disconnectedCallback(){this.clearTimers(),this.detachEscape(),this.root?.remove(),this.root=void 0,document.body.style.overflow="",this.previousActiveElement&&this.previousActiveElement.focus()}attributeChangedCallback(t){this.isConnected&&("open"!==t?(this.render(),this.isMounted&&this.syncActiveClasses()):this.syncOpenState())}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}clearTimers(){null!=this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=void 0),this.exitTimer&&(clearTimeout(this.exitTimer),this.exitTimer=void 0)}attachEscape(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"false"!==this.getAttribute("close-on-escape")&&this.close()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}close(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}syncOpenState(){const t=this.isOpenRequested(),e=Number(this.getAttribute("animation-duration")||300);if(this.clearTimers(),t)return this.render(),this.isMounted=!0,this.isActive=!1,this.syncActiveClasses(),this.root&&!this.root.isConnected&&document.body.append(this.root),"false"!==this.getAttribute("trap-focus")&&(this.previousActiveElement=document.activeElement),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=void 0,this.isActive=!0,this.syncActiveClasses(),"false"!==this.getAttribute("trap-focus")&&this.container?.focus()})}),document.body.style.overflow="hidden",void this.attachEscape();this.isActive=!1,this.syncActiveClasses(),this.exitTimer=setTimeout(()=>{this.exitTimer=void 0,this.isMounted=!1,this.syncActiveClasses(),this.root?.remove(),document.body.style.overflow="",this.detachEscape(),"false"!==this.getAttribute("trap-focus")&&this.previousActiveElement&&(this.previousActiveElement.focus(),this.previousActiveElement=null)},e),this.detachEscape()}syncActiveClasses(){this.root&&(this.root.classList.toggle("designbase-wc-drawer--open",this.isActive),this.root.classList.toggle("designbase-wc-drawer--closing",this.isMounted&&!this.isActive),this.overlay?.classList.toggle("designbase-wc-drawer__overlay--open",this.isActive),this.container?.classList.toggle("designbase-wc-drawer__container--open",this.isActive))}render(){const i=t.includes(this.getAttribute("position")||"right")&&this.getAttribute("position")||"right",s=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",r=this.getAttribute("title"),n="false"!==this.getAttribute("show-close-button"),o="false"!==this.getAttribute("show-overlay"),a=this.getAttribute("animation-duration")||"300",c=this.getAttribute("z-index")||"1000",l=this.getAttribute("drawer-id")||"drawer",h=this.collectChildren();this.root||(this.root=document.createElement("div"),this.root.setAttribute("data-wc-internal",""),this.overlay=document.createElement("div"),this.overlay.className="designbase-wc-drawer__overlay",this.overlay.setAttribute("aria-hidden","true"),this.overlay.addEventListener("click",t=>{if(t.target!==this.overlay)return;const e="false"!==this.getAttribute("overlay-closable"),i="false"!==this.getAttribute("close-on-backdrop-click");e&&i&&this.close()}),this.container=document.createElement("div"),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-modal","true"),this.container.tabIndex=-1,this.container.addEventListener("click",t=>t.stopPropagation()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-drawer__content",this.container.append(this.contentEl)),this.root.className=["designbase-wc-drawer",`designbase-wc-drawer--${i}`,`designbase-wc-drawer--${s}`].join(" "),this.root.style.setProperty("--drawer-animation-duration",`${a}ms`),this.root.style.setProperty("--drawer-z-index",c),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.id=l,r?this.container.setAttribute("aria-labelledby",`${l}-title`):this.container.removeAttribute("aria-labelledby"),this.contentEl.id=`${l}-content`,this.root.replaceChildren(),o&&this.overlay&&this.root.append(this.overlay);if(Boolean(r)||n){const t=document.createElement("div");if(t.className="designbase-wc-drawer__header",r){const e=document.createElement("h2");e.className="designbase-wc-drawer__title",e.id=`${l}-title`,e.textContent=r,t.append(e)}if(n){const e=document.createElement("db-button");e.className="designbase-wc-drawer__close-button",e.setAttribute("variant","ghost"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon","close"),e.setAttribute("aria-label","닫기"),e.addEventListener("db-click",t=>{t.stopPropagation(),this.close()}),t.append(e)}this.container.replaceChildren(t,this.contentEl)}else this.container.replaceChildren(this.contentEl);this.contentEl.replaceChildren(...h),this.root.append(this.container),this.isMounted&&!this.root.isConnected&&document.body.append(this.root)}}customElements.get("db-drawer")||customElements.define("db-drawer",DbDrawer);export{DbDrawer};
+import{createFocusTrap as t}from"../core/focus-trap.js";import{unlockScroll as e,lockScroll as s}from"../core/scroll-lock.js";import{DRAWER_POSITIONS as i,DRAWER_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbDrawer extends HTMLElement{constructor(){super(...arguments),this.isMounted=!1,this.isActive=!1,this.scrollLocked=!1,this.keyHandler=null}static get observedAttributes(){return["open","title","position","size","show-close-button","close-on-backdrop-click","close-on-escape","animation-duration","show-overlay","overlay-closable","z-index","trap-focus","drawer-id"]}connectedCallback(){this.style.display="contents",this.render(),this.syncOpenState()}disconnectedCallback(){this.clearTimers(),this.detachEscape(),this.focusTrap?.deactivate(),this.focusTrap=void 0,this.root?.remove(),this.root=void 0,this.releaseScrollLock()}releaseScrollLock(){this.scrollLocked&&(this.scrollLocked=!1,e())}attributeChangedCallback(t){this.isConnected&&("open"!==t?(this.render(),this.isMounted&&this.syncActiveClasses()):this.syncOpenState())}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}clearTimers(){null!=this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=void 0),this.exitTimer&&(clearTimeout(this.exitTimer),this.exitTimer=void 0)}attachEscape(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"false"!==this.getAttribute("close-on-escape")&&this.close()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}close(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}syncOpenState(){const e=this.isOpenRequested(),i=Number(this.getAttribute("animation-duration")||300);if(this.clearTimers(),e)return this.render(),this.isMounted=!0,this.isActive=!1,this.syncActiveClasses(),this.root&&!this.root.isConnected&&document.body.append(this.root),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=void 0,this.isActive=!0,this.syncActiveClasses(),"false"!==this.getAttribute("trap-focus")&&this.container&&(this.focusTrap=t(this.container),this.focusTrap.activate())})}),this.scrollLocked||(s(),this.scrollLocked=!0),void this.attachEscape();this.isActive=!1,this.syncActiveClasses(),this.exitTimer=setTimeout(()=>{this.exitTimer=void 0,this.isMounted=!1,this.syncActiveClasses(),this.root?.remove(),this.releaseScrollLock(),this.detachEscape(),this.focusTrap?.deactivate(),this.focusTrap=void 0},i),this.detachEscape()}syncActiveClasses(){this.root&&(this.root.classList.toggle("designbase-wc-drawer--open",this.isActive),this.root.classList.toggle("designbase-wc-drawer--closing",this.isMounted&&!this.isActive),this.overlay?.classList.toggle("designbase-wc-drawer__overlay--open",this.isActive),this.container?.classList.toggle("designbase-wc-drawer__container--open",this.isActive))}render(){const t=i.includes(this.getAttribute("position")||"right")&&this.getAttribute("position")||"right",e=r.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",s=this.getAttribute("title"),o="false"!==this.getAttribute("show-close-button"),a="false"!==this.getAttribute("show-overlay"),n=this.getAttribute("animation-duration")||"300",c=this.getAttribute("z-index")||"1000",l=this.getAttribute("drawer-id")||"drawer",d=this.collectChildren();this.root||(this.root=document.createElement("div"),this.root.setAttribute("data-wc-internal",""),this.overlay=document.createElement("div"),this.overlay.className="designbase-wc-drawer__overlay",this.overlay.setAttribute("aria-hidden","true"),this.overlay.addEventListener("click",t=>{if(t.target!==this.overlay)return;const e="false"!==this.getAttribute("overlay-closable"),s="false"!==this.getAttribute("close-on-backdrop-click");e&&s&&this.close()}),this.container=document.createElement("div"),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${t}`,this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-modal","true"),this.container.tabIndex=-1,this.container.addEventListener("click",t=>t.stopPropagation()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-drawer__content",this.container.append(this.contentEl)),this.root.className=["designbase-wc-drawer",`designbase-wc-drawer--${t}`,`designbase-wc-drawer--${e}`].join(" "),this.root.style.setProperty("--drawer-animation-duration",`${n}ms`),this.root.style.setProperty("--drawer-z-index",c),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${t}`,this.container.id=l,s?this.container.setAttribute("aria-labelledby",`${l}-title`):this.container.removeAttribute("aria-labelledby"),this.contentEl.id=`${l}-content`,this.root.replaceChildren(),a&&this.overlay&&this.root.append(this.overlay);if(Boolean(s)||o){const t=document.createElement("div");if(t.className="designbase-wc-drawer__header",s){const e=document.createElement("h2");e.className="designbase-wc-drawer__title",e.id=`${l}-title`,e.textContent=s,t.append(e)}if(o){const e=document.createElement("db-button");e.className="designbase-wc-drawer__close-button",e.setAttribute("variant","ghost"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon","close"),e.setAttribute("aria-label","닫기"),e.addEventListener("db-click",t=>{t.stopPropagation(),this.close()}),t.append(e)}this.container.replaceChildren(t,this.contentEl)}else this.container.replaceChildren(this.contentEl);this.contentEl.replaceChildren(...d),this.root.append(this.container),this.isMounted&&!this.root.isConnected&&document.body.append(this.root)}}customElements.get("db-drawer")||customElements.define("db-drawer",DbDrawer);export{DbDrawer};

package/dist/esm/components/db-dropdown.js

@@ -1 +1 @@
-import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i=["s","m","l"],r=["bottom-left","bottom-right","top-left","top-right"],s=["primary","secondary","tertiary","danger","ghost"];class DbDropdown extends HTMLElement{constructor(){super(...arguments),this.focusedIndex=-1,this.onTriggerActivate=null,this.lastTriggerSignature="",this.handleTriggerKeyDown=e=>{if(("Enter"===e.key||" "===e.key||"ArrowDown"===e.key)&&!this.open)return e.preventDefault(),this.open=!0,requestAnimationFrame(()=>this.focusItem(0)),void this.render();"Escape"===e.key&&this.open&&(e.preventDefault(),this.open=!1,this.render())},this.handleDocumentKeyDown=e=>{if(!this.open)return;if("Escape"===e.key)return e.preventDefault(),this.open=!1,this.render(),void this.triggerWrap?.querySelector("[aria-haspopup]")?.focus();const t=this.enabledItems();if(!t.length)return;const i=t.findIndex(e=>this.parsedItems.indexOf(e)===this.focusedIndex);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i+1)%t.length]));break;case"ArrowUp":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i-1+t.length)%t.length]));break;case"Home":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[0]));break;case"End":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[t.length-1]));break;case"Enter":case" ":{e.preventDefault();const t=this.parsedItems[this.focusedIndex];!t||t.divider||t.disabled||this.selectItem(t);break}}},this.handleDocumentMouseDown=e=>{this.open&&(this.contains(e.target)||(this.open=!1,this.render()))}}static get observedAttributes(){return["options","items","placeholder","label","value","size","placement","full-width","disabled","open","trigger-variant","trigger-icon","icon-only"]}get parsedItems(){const e=this.getAttribute("items");if(e)try{const t=JSON.parse(e);if(Array.isArray(t))return t}catch{}return(this.getAttribute("options")||"").split(",").map(e=>e.trim()).filter(Boolean).map((e,t)=>({id:`option-${t}`,label:e}))}get options(){return this.parsedItems.map(e=>e.label||e.id)}set options(e){this.setAttribute("options",Array.isArray(e)?e.join(","):e)}get items(){return this.parsedItems}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}get open(){return this.hasAttribute("open")}set open(e){const t=this.open;this.toggleAttribute("open",e),t!==e&&this.dispatchEvent(new CustomEvent("db-open",{detail:{open:e},bubbles:!0,composed:!0}))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}get size(){return this.getAttribute("size")||"m"}set size(e){this.setAttribute("size",e)}get placement(){return this.getAttribute("placement")||"bottom-left"}set placement(e){this.setAttribute("placement",e)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){e?this.setAttribute("placeholder",e):this.removeAttribute("placeholder")}get label(){return this.getAttribute("label")||""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(e){this.toggleAttribute("full-width",e)}connectedCallback(){requestAnimationFrame(()=>this.render()),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindTrigger()}attributeChangedCallback(e){this.isConnected&&("open"!==e||this.open||(this.focusedIndex=-1),this.render())}resolvedSize(){return i.includes(this.size)?this.size:"m"}resolvedPlacement(){return r.includes(this.placement)?this.placement:"bottom-left"}menuItemIconSize(){const e=this.resolvedSize();return"s"===e?14:"l"===e?18:16}triggerLabel(){return this.label?this.label:this.placeholder?this.placeholder:this.value?this.value:"메뉴"}enabledItems(){return this.parsedItems.filter(e=>!e.disabled&&!e.divider)}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap||e===this.menu||e===this.defaultTrigger,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>!isInternalNode(e))}hasCustomTrigger(){return this.collectTriggerChildren().length>0}bindTrigger(){this.triggerWrap&&(this.unbindTrigger(),this.onTriggerActivate=e=>{this.disabled||(e.preventDefault(),e.stopPropagation(),this.toggleOpen())},this.triggerWrap.addEventListener("click",this.onTriggerActivate),this.triggerWrap.addEventListener("keydown",this.handleTriggerKeyDown))}unbindTrigger(){this.triggerWrap&&this.onTriggerActivate&&this.triggerWrap.removeEventListener("click",this.onTriggerActivate),this.triggerWrap&&this.triggerWrap.removeEventListener("keydown",this.handleTriggerKeyDown),this.onTriggerActivate=null}toggleOpen(){this.disabled||(this.open=!this.open,this.open&&requestAnimationFrame(()=>this.focusItem(0)),this.render())}triggerSignature(){return[this.resolvedSize(),this.getAttribute("trigger-variant")||"tertiary",this.hasAttribute("icon-only")?"1":"0",this.getAttribute("trigger-icon")||"",this.fullWidth?"1":"0"].join("|")}renderDefaultTrigger(){const t=this.resolvedSize(),i=this.getAttribute("trigger-variant")||"tertiary",r=s.includes(i)?i:"tertiary",n=this.hasAttribute("icon-only"),a=this.getAttribute("trigger-icon"),o=document.createElement("db-button");if(o.setAttribute("type","button"),o.setAttribute("variant",r),o.setAttribute("size",t),o.className="designbase-wc-dropdown__trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-label",this.triggerLabel()),this.fullWidth&&o.setAttribute("full-width",""),n)o.setAttribute("icon-only",""),o.setAttribute("start-icon",a&&e(a)?a:"edit"),o.removeAttribute("end-icon");else{o.removeAttribute("icon-only"),a&&e(a)?o.setAttribute("start-icon",a):o.removeAttribute("start-icon");const t=document.createElement("span");t.className="designbase-wc-dropdown__trigger-label",t.textContent=this.triggerLabel(),o.append(t),o.setAttribute("end-icon","chevron-down")}return o}syncDefaultTriggerState(e){e.setAttribute("aria-expanded",String(this.open)),e.setAttribute("aria-label",this.triggerLabel()),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled");const t=e.querySelector(".designbase-wc-dropdown__trigger-label");t&&(t.textContent=this.triggerLabel())}ensureStructure(){this.triggerWrap||(this.triggerWrap=document.createElement("div"),this.triggerWrap.className="designbase-wc-dropdown__trigger-wrap",this.triggerWrap.setAttribute("data-wc-internal","")),this.menu||(this.menu=document.createElement("div"),this.menu.className="designbase-wc-dropdown__menu",this.menu.setAttribute("data-wc-internal",""),this.menu.setAttribute("role","menu")),this.contains(this.triggerWrap)||this.append(this.triggerWrap),this.triggerWrap.contains(this.menu)||this.triggerWrap.append(this.menu),Array.from(this.children).forEach(e=>{e===this.triggerWrap||e.hasAttribute("data-wc-internal")||this.triggerWrap.insertBefore(e,this.menu)})}renderTrigger(){const e=this.collectTriggerChildren();if(e.length>0){this.defaultTrigger?.remove(),this.defaultTrigger=void 0;Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),e.forEach(e=>{e.setAttribute("aria-haspopup","menu"),e.setAttribute("aria-expanded",String(this.open)),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.triggerWrap.insertBefore(e,this.menu||null)})}else{Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),this.defaultTrigger&&this.triggerSignature()===this.lastTriggerSignature||(this.defaultTrigger?.remove(),this.defaultTrigger=this.renderDefaultTrigger(),this.lastTriggerSignature=this.triggerSignature(),this.triggerWrap.insertBefore(this.defaultTrigger,this.menu||null)),this.syncDefaultTriggerState(this.defaultTrigger)}this.bindTrigger()}renderMenu(){const e=this.resolvedPlacement();this.menu.className=`designbase-wc-dropdown__menu designbase-wc-dropdown__menu--${e}${this.open?" designbase-wc-dropdown__menu--open":""}`,this.menu.setAttribute("aria-hidden",String(!this.open)),this.menu.setAttribute("aria-label",this.triggerLabel()),this.menu.replaceChildren();const i=this.menuItemIconSize();this.parsedItems.forEach((e,r)=>{if(e.divider){const e=document.createElement("div");return e.className="designbase-wc-dropdown__divider",e.setAttribute("role","separator"),void this.menu?.append(e)}e.id||e.label||String(r);const s=e.label||e.id,n=Boolean(e.disabled||this.disabled),a=this.focusedIndex===r,o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-dropdown__item",n&&"designbase-wc-dropdown__item--disabled",a&&"designbase-wc-dropdown__item--focused"].filter(Boolean).join(" "),o.setAttribute("role","menuitem"),o.disabled=n,o.tabIndex=a?0:-1,o.dataset.index=String(r),e.icon){const r=t(e.icon,i);r.classList.add("designbase-wc-dropdown__item-icon"),o.append(r)}const d=document.createElement("span");d.className="designbase-wc-dropdown__item-label",d.textContent=s,o.append(d),o.addEventListener("click",t=>{t.stopPropagation(),this.selectItem(e)}),this.menu?.append(o)})}render(){const e=this.resolvedSize();this.className=["designbase-wc-dropdown",`designbase-wc-dropdown--${e}`,this.open&&"designbase-wc-dropdown--open",this.fullWidth&&"designbase-wc-dropdown--full-width",this.disabled&&"designbase-wc-dropdown--disabled"].filter(Boolean).join(" "),this.ensureStructure(),this.renderTrigger(),this.renderMenu()}selectItem(e){e.disabled||e.divider||(this.open=!1,this.focusedIndex=-1,this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.label||e.id,id:e.id,item:e},bubbles:!0,composed:!0})),this.render(),this.triggerWrap?.querySelector("[aria-haspopup]")?.focus())}focusItem(e){const t=this.enabledItems();if(!t.length)return;const i=t[Math.max(0,Math.min(e,t.length-1))],r=this.parsedItems.indexOf(i);this.focusedIndex=r;Array.from(this.menu?.querySelectorAll(".designbase-wc-dropdown__item")||[]).forEach(e=>{const t=Number(e.dataset.index)===r;e.classList.toggle("designbase-wc-dropdown__item--focused",t),e.tabIndex=t?0:-1,t&&e.focus()})}}customElements.get("db-dropdown")||customElements.define("db-dropdown",DbDropdown);export{DbDropdown};
+import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";import{DROPDOWN_SIZES as i,DROPDOWN_PLACEMENTS as r,DROPDOWN_TRIGGER_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbDropdown extends HTMLElement{constructor(){super(...arguments),this.focusedIndex=-1,this.onTriggerActivate=null,this.lastTriggerSignature="",this.handleTriggerKeyDown=e=>{if(("Enter"===e.key||" "===e.key||"ArrowDown"===e.key)&&!this.open)return e.preventDefault(),this.open=!0,requestAnimationFrame(()=>this.focusItem(0)),void this.render();"Escape"===e.key&&this.open&&(e.preventDefault(),this.open=!1,this.render())},this.handleDocumentKeyDown=e=>{if(!this.open)return;if("Escape"===e.key)return e.preventDefault(),this.open=!1,this.render(),void this.triggerWrap?.querySelector("[aria-haspopup]")?.focus();const t=this.enabledItems();if(!t.length)return;const i=t.findIndex(e=>this.parsedItems.indexOf(e)===this.focusedIndex);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i+1)%t.length]));break;case"ArrowUp":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i-1+t.length)%t.length]));break;case"Home":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[0]));break;case"End":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[t.length-1]));break;case"Enter":case" ":{e.preventDefault();const t=this.parsedItems[this.focusedIndex];!t||t.divider||t.disabled||this.selectItem(t);break}}},this.handleDocumentMouseDown=e=>{this.open&&(this.contains(e.target)||(this.open=!1,this.render()))}}static get observedAttributes(){return["options","items","placeholder","label","value","size","placement","full-width","disabled","open","trigger-variant","trigger-icon","icon-only"]}get parsedItems(){const e=this.getAttribute("items");if(e)try{const t=JSON.parse(e);if(Array.isArray(t))return t}catch{}return(this.getAttribute("options")||"").split(",").map(e=>e.trim()).filter(Boolean).map((e,t)=>({id:`option-${t}`,label:e}))}get options(){return this.parsedItems.map(e=>e.label||e.id)}set options(e){this.setAttribute("options",Array.isArray(e)?e.join(","):e)}get items(){return this.parsedItems}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}get open(){return this.hasAttribute("open")}set open(e){const t=this.open;this.toggleAttribute("open",e),t!==e&&this.dispatchEvent(new CustomEvent("db-open",{detail:{open:e},bubbles:!0,composed:!0}))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}get size(){return this.getAttribute("size")||"m"}set size(e){this.setAttribute("size",e)}get placement(){return this.getAttribute("placement")||"bottom-left"}set placement(e){this.setAttribute("placement",e)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){e?this.setAttribute("placeholder",e):this.removeAttribute("placeholder")}get label(){return this.getAttribute("label")||""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(e){this.toggleAttribute("full-width",e)}connectedCallback(){requestAnimationFrame(()=>this.render()),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindTrigger()}attributeChangedCallback(e){this.isConnected&&("open"!==e||this.open||(this.focusedIndex=-1),this.render())}resolvedSize(){return i.includes(this.size)?this.size:"m"}resolvedPlacement(){return r.includes(this.placement)?this.placement:"bottom-left"}menuItemIconSize(){const e=this.resolvedSize();return"s"===e?14:"l"===e?18:16}triggerLabel(){return this.label?this.label:this.placeholder?this.placeholder:this.value?this.value:"메뉴"}enabledItems(){return this.parsedItems.filter(e=>!e.disabled&&!e.divider)}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap||e===this.menu||e===this.defaultTrigger,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>!isInternalNode(e))}hasCustomTrigger(){return this.collectTriggerChildren().length>0}bindTrigger(){this.triggerWrap&&(this.unbindTrigger(),this.onTriggerActivate=e=>{this.disabled||(e.preventDefault(),e.stopPropagation(),this.toggleOpen())},this.triggerWrap.addEventListener("click",this.onTriggerActivate),this.triggerWrap.addEventListener("keydown",this.handleTriggerKeyDown))}unbindTrigger(){this.triggerWrap&&this.onTriggerActivate&&this.triggerWrap.removeEventListener("click",this.onTriggerActivate),this.triggerWrap&&this.triggerWrap.removeEventListener("keydown",this.handleTriggerKeyDown),this.onTriggerActivate=null}toggleOpen(){this.disabled||(this.open=!this.open,this.open&&requestAnimationFrame(()=>this.focusItem(0)),this.render())}triggerSignature(){return[this.resolvedSize(),this.getAttribute("trigger-variant")||"tertiary",this.hasAttribute("icon-only")?"1":"0",this.getAttribute("trigger-icon")||"",this.fullWidth?"1":"0"].join("|")}renderDefaultTrigger(){const t=this.resolvedSize(),i=this.getAttribute("trigger-variant")||"tertiary",r=s.includes(i)?i:"tertiary",n=this.hasAttribute("icon-only"),a=this.getAttribute("trigger-icon"),o=document.createElement("db-button");if(o.setAttribute("type","button"),o.setAttribute("variant",r),o.setAttribute("size",t),o.className="designbase-wc-dropdown__trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-label",this.triggerLabel()),this.fullWidth&&o.setAttribute("full-width",""),n)o.setAttribute("icon-only",""),o.setAttribute("start-icon",a&&e(a)?a:"edit"),o.removeAttribute("end-icon");else{o.removeAttribute("icon-only"),a&&e(a)?o.setAttribute("start-icon",a):o.removeAttribute("start-icon");const t=document.createElement("span");t.className="designbase-wc-dropdown__trigger-label",t.textContent=this.triggerLabel(),o.append(t),o.setAttribute("end-icon","chevron-down")}return o}syncDefaultTriggerState(e){e.setAttribute("aria-expanded",String(this.open)),e.setAttribute("aria-label",this.triggerLabel()),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled");const t=e.querySelector(".designbase-wc-dropdown__trigger-label");t&&(t.textContent=this.triggerLabel())}ensureStructure(){this.triggerWrap||(this.triggerWrap=document.createElement("div"),this.triggerWrap.className="designbase-wc-dropdown__trigger-wrap",this.triggerWrap.setAttribute("data-wc-internal","")),this.menu||(this.menu=document.createElement("div"),this.menu.className="designbase-wc-dropdown__menu",this.menu.setAttribute("data-wc-internal",""),this.menu.setAttribute("role","menu")),this.contains(this.triggerWrap)||this.append(this.triggerWrap),this.triggerWrap.contains(this.menu)||this.triggerWrap.append(this.menu),Array.from(this.children).forEach(e=>{e===this.triggerWrap||e.hasAttribute("data-wc-internal")||this.triggerWrap.insertBefore(e,this.menu)})}renderTrigger(){const e=this.collectTriggerChildren();if(e.length>0){this.defaultTrigger?.remove(),this.defaultTrigger=void 0;Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),e.forEach(e=>{e.setAttribute("aria-haspopup","menu"),e.setAttribute("aria-expanded",String(this.open)),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.triggerWrap.insertBefore(e,this.menu||null)})}else{Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),this.defaultTrigger&&this.triggerSignature()===this.lastTriggerSignature||(this.defaultTrigger?.remove(),this.defaultTrigger=this.renderDefaultTrigger(),this.lastTriggerSignature=this.triggerSignature(),this.triggerWrap.insertBefore(this.defaultTrigger,this.menu||null)),this.syncDefaultTriggerState(this.defaultTrigger)}this.bindTrigger()}renderMenu(){const e=this.resolvedPlacement();this.menu.className=`designbase-wc-dropdown__menu designbase-wc-dropdown__menu--${e}${this.open?" designbase-wc-dropdown__menu--open":""}`,this.menu.setAttribute("aria-hidden",String(!this.open)),this.menu.setAttribute("aria-label",this.triggerLabel()),this.menu.replaceChildren();const i=this.menuItemIconSize();this.parsedItems.forEach((e,r)=>{if(e.divider){const e=document.createElement("div");return e.className="designbase-wc-dropdown__divider",e.setAttribute("role","separator"),void this.menu?.append(e)}e.id||e.label||String(r);const s=e.label||e.id,n=Boolean(e.disabled||this.disabled),a=this.focusedIndex===r,o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-dropdown__item",n&&"designbase-wc-dropdown__item--disabled",a&&"designbase-wc-dropdown__item--focused"].filter(Boolean).join(" "),o.setAttribute("role","menuitem"),o.disabled=n,o.tabIndex=a?0:-1,o.dataset.index=String(r),e.icon){const r=t(e.icon,i);r.classList.add("designbase-wc-dropdown__item-icon"),o.append(r)}const d=document.createElement("span");d.className="designbase-wc-dropdown__item-label",d.textContent=s,o.append(d),o.addEventListener("click",t=>{t.stopPropagation(),this.selectItem(e)}),this.menu?.append(o)})}render(){const e=this.resolvedSize();this.className=["designbase-wc-dropdown",`designbase-wc-dropdown--${e}`,this.open&&"designbase-wc-dropdown--open",this.fullWidth&&"designbase-wc-dropdown--full-width",this.disabled&&"designbase-wc-dropdown--disabled"].filter(Boolean).join(" "),this.ensureStructure(),this.renderTrigger(),this.renderMenu()}selectItem(e){e.disabled||e.divider||(this.open=!1,this.focusedIndex=-1,this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.label||e.id,id:e.id,item:e},bubbles:!0,composed:!0})),this.render(),this.triggerWrap?.querySelector("[aria-haspopup]")?.focus())}focusItem(e){const t=this.enabledItems();if(!t.length)return;const i=t[Math.max(0,Math.min(e,t.length-1))],r=this.parsedItems.indexOf(i);this.focusedIndex=r;Array.from(this.menu?.querySelectorAll(".designbase-wc-dropdown__item")||[]).forEach(e=>{const t=Number(e.dataset.index)===r;e.classList.toggle("designbase-wc-dropdown__item--focused",t),e.tabIndex=t?0:-1,t&&e.focus()})}}customElements.get("db-dropdown")||customElements.define("db-dropdown",DbDropdown);export{DbDropdown};

package/dist/esm/components/db-dropzone.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],i=["default","outlined","filled"];class DbDropzone extends HTMLElement{constructor(){super(...arguments),this.internalDragOver=!1,this.handleFileInputChange=()=>{this.emitFiles(this.fileInput?.files??null),this.fileInput&&(this.fileInput.value="")},this.handleDragOver=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!0,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-over",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDragLeave=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-leave",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDrop=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.emitFiles(e.dataTransfer?.files??null),this.dispatchEvent(new CustomEvent("db-drop",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleClick=e=>{this.isDisabled()||e.target.closest(".designbase-wc-dropzone__button")||(this.fileInput?.click(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:e}})))}}static get observedAttributes(){return["size","variant","show-icon","icon","image","title","description","button-text","show-button","accept","max-size","multiple","drag-over","disabled","readonly"]}connectedCallback(){this.ensureInput(),this.sync(),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}ensureInput(){this.fileInput||(this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.style.display="none",this.fileInput.setAttribute("data-wc-internal",""),this.fileInput.addEventListener("change",this.handleFileInputChange),this.append(this.fileInput))}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}isDragOver(){return this.hasAttribute("drag-over")?"false"!==this.getAttribute("drag-over"):this.internalDragOver}validateFile(e){const t=this.getAttribute("accept");if(t){const i=t.split(",").map(e=>e.trim()),s=e.type,n=`.${e.name.split(".").pop()?.toLowerCase()}`;if(!i.some(e=>e.startsWith(".")?n===e.toLowerCase():s===e||s.startsWith(e.replace("*",""))))return!1}const i=Number(this.getAttribute("max-size")||0);return!(i>0&&e.size>i)}emitFiles(e){if(!e||0===e.length)return;const t=Array.from(e).filter(e=>this.validateFile(e));t.length&&this.dispatchEvent(new CustomEvent("db-file-select",{bubbles:!0,composed:!0,detail:{files:t}}))}getDescriptionText(){const e=this.getAttribute("description");if(e)return e;const t=this.getAttribute("accept");if(!t)return"모든 파일 형식 지원";let i=t.split(",").map(e=>{const t=e.trim();return t.startsWith(".")?t.toUpperCase():t.includes("*")?t.replace("*","").toUpperCase():t}).join(", ");const s=Number(this.getAttribute("max-size")||0);if(s>0){const e=1024,t=["Bytes","KB","MB","GB"],n=Math.floor(Math.log(s)/Math.log(e));i+=` (최대 ${`${parseFloat((s/e**n).toFixed(2))} ${t[n]}`})`}return i}collectChildren(){return Array.from(this.children).filter(e=>e!==this.fileInput&&!e.hasAttribute("data-wc-internal"))}syncClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=t.includes(e)?e:"m",a=i.includes(s)?s:"default";this.className=["designbase-wc-dropzone",`designbase-wc-dropzone--size-${n}`,`designbase-wc-dropzone--variant-${a}`,this.isDragOver()&&"designbase-wc-dropzone--drag-over",this.hasAttribute("disabled")&&"designbase-wc-dropzone--disabled",this.hasAttribute("readonly")&&"designbase-wc-dropzone--readonly"].filter(Boolean).join(" ")}sync(){this.ensureInput(),this.syncClasses();const i=this.getAttribute("accept"),s=this.hasAttribute("multiple");this.fileInput&&(i?this.fileInput.setAttribute("accept",i):this.fileInput.removeAttribute("accept"),this.fileInput.toggleAttribute("multiple",s),this.fileInput.disabled=this.isDisabled());const n=this.collectChildren(),a=this.querySelector(":scope > .designbase-wc-dropzone__content[data-wc-internal]");if(n.length)return void a?.remove();let r=a;r||(r=document.createElement("div"),r.className="designbase-wc-dropzone__content",r.setAttribute("data-wc-internal",""),this.append(r)),r.replaceChildren();const l=this.getAttribute("size")||"m",o=t.includes(l)?l:"m",d=this.getAttribute("image"),c="false"!==this.getAttribute("show-icon"),h=this.getAttribute("icon")||"gallery",p=this.getAttribute("title")||"파일을 드래그하여 업로드하거나 클릭하여 선택하세요",u=this.getDescriptionText(),b=this.hasAttribute("show-button"),g=this.getAttribute("button-text")||"파일 선택";if(d){const e=document.createElement("div");e.className="designbase-wc-dropzone__image";const t=document.createElement("img");t.src=d,t.alt="Upload illustration",e.append(t),r.append(e)}else if(c){const t=document.createElement("div");t.className="designbase-wc-dropzone__icon";const i="s"===o?32:"l"===o?56:48;t.append(e(h,i)),r.append(t)}if(p){const e=document.createElement("div");e.className="designbase-wc-dropzone__title",e.textContent=p,r.append(e)}if(u){const e=document.createElement("div");e.className="designbase-wc-dropzone__description",e.textContent=u,r.append(e)}if(b){const e=document.createElement("button");e.type="button",e.className="designbase-wc-dropzone__button",e.textContent=g,e.disabled=this.isDisabled(),e.addEventListener("click",e=>{e.stopPropagation(),this.isDisabled()||this.fileInput?.click()}),r.append(e)}}}customElements.get("db-dropzone")||customElements.define("db-dropzone",DbDropzone);export{DbDropzone};
+import{createDbIcon as e}from"./db-icons.js";import{DROPZONE_SIZES as t,DROPZONE_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbDropzone extends HTMLElement{constructor(){super(...arguments),this.internalDragOver=!1,this.handleFileInputChange=()=>{this.emitFiles(this.fileInput?.files??null),this.fileInput&&(this.fileInput.value="")},this.handleDragOver=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!0,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-over",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDragLeave=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.dispatchEvent(new CustomEvent("db-drag-leave",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleDrop=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||(this.internalDragOver=!1,this.syncClasses(),this.emitFiles(e.dataTransfer?.files??null),this.dispatchEvent(new CustomEvent("db-drop",{bubbles:!0,composed:!0,detail:{event:e}})))},this.handleClick=e=>{this.isDisabled()||e.target.closest(".designbase-wc-dropzone__button")||(this.fileInput?.click(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:e}})))}}static get observedAttributes(){return["size","variant","show-icon","icon","image","title","description","button-text","show-button","accept","max-size","multiple","drag-over","disabled","readonly"]}connectedCallback(){this.ensureInput(),this.sync(),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}ensureInput(){this.fileInput||(this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.style.display="none",this.fileInput.setAttribute("data-wc-internal",""),this.fileInput.addEventListener("change",this.handleFileInputChange),this.append(this.fileInput))}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}isDragOver(){return this.hasAttribute("drag-over")?"false"!==this.getAttribute("drag-over"):this.internalDragOver}validateFile(e){const t=this.getAttribute("accept");if(t){const s=t.split(",").map(e=>e.trim()),i=e.type,n=`.${e.name.split(".").pop()?.toLowerCase()}`;if(!s.some(e=>e.startsWith(".")?n===e.toLowerCase():i===e||i.startsWith(e.replace("*",""))))return!1}const s=Number(this.getAttribute("max-size")||0);return!(s>0&&e.size>s)}emitFiles(e){if(!e||0===e.length)return;const t=Array.from(e).filter(e=>this.validateFile(e));t.length&&this.dispatchEvent(new CustomEvent("db-file-select",{bubbles:!0,composed:!0,detail:{files:t}}))}getDescriptionText(){const e=this.getAttribute("description");if(e)return e;const t=this.getAttribute("accept");if(!t)return"모든 파일 형식 지원";let s=t.split(",").map(e=>{const t=e.trim();return t.startsWith(".")?t.toUpperCase():t.includes("*")?t.replace("*","").toUpperCase():t}).join(", ");const i=Number(this.getAttribute("max-size")||0);if(i>0){const e=1024,t=["Bytes","KB","MB","GB"],n=Math.floor(Math.log(i)/Math.log(e));s+=` (최대 ${`${parseFloat((i/e**n).toFixed(2))} ${t[n]}`})`}return s}collectChildren(){return Array.from(this.children).filter(e=>e!==this.fileInput&&!e.hasAttribute("data-wc-internal"))}syncClasses(){const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",n=t.includes(e)?e:"m",a=s.includes(i)?i:"default";this.className=["designbase-wc-dropzone",`designbase-wc-dropzone--size-${n}`,`designbase-wc-dropzone--variant-${a}`,this.isDragOver()&&"designbase-wc-dropzone--drag-over",this.hasAttribute("disabled")&&"designbase-wc-dropzone--disabled",this.hasAttribute("readonly")&&"designbase-wc-dropzone--readonly"].filter(Boolean).join(" ")}sync(){this.ensureInput(),this.syncClasses();const s=this.getAttribute("accept"),i=this.hasAttribute("multiple");this.fileInput&&(s?this.fileInput.setAttribute("accept",s):this.fileInput.removeAttribute("accept"),this.fileInput.toggleAttribute("multiple",i),this.fileInput.disabled=this.isDisabled());const n=this.collectChildren(),a=this.querySelector(":scope > .designbase-wc-dropzone__content[data-wc-internal]");if(n.length)return void a?.remove();let r=a;r||(r=document.createElement("div"),r.className="designbase-wc-dropzone__content",r.setAttribute("data-wc-internal",""),this.append(r)),r.replaceChildren();const o=this.getAttribute("size")||"m",l=t.includes(o)?o:"m",d=this.getAttribute("image"),c="false"!==this.getAttribute("show-icon"),h=this.getAttribute("icon")||"gallery",p=this.getAttribute("title")||"파일을 드래그하여 업로드하거나 클릭하여 선택하세요",u=this.getDescriptionText(),b=this.hasAttribute("show-button"),g=this.getAttribute("button-text")||"파일 선택";if(d){const e=document.createElement("div");e.className="designbase-wc-dropzone__image";const t=document.createElement("img");t.src=d,t.alt="Upload illustration",e.append(t),r.append(e)}else if(c){const t=document.createElement("div");t.className="designbase-wc-dropzone__icon";const s="s"===l?32:"l"===l?56:48;t.append(e(h,s)),r.append(t)}if(p){const e=document.createElement("div");e.className="designbase-wc-dropzone__title",e.textContent=p,r.append(e)}if(u){const e=document.createElement("div");e.className="designbase-wc-dropzone__description",e.textContent=u,r.append(e)}if(b){const e=document.createElement("button");e.type="button",e.className="designbase-wc-dropzone__button",e.textContent=g,e.disabled=this.isDisabled(),e.addEventListener("click",e=>{e.stopPropagation(),this.isDisabled()||this.fileInput?.click()}),r.append(e)}}}customElements.get("db-dropzone")||customElements.define("db-dropzone",DbDropzone);export{DbDropzone};

package/dist/esm/components/db-email-verify.d.ts

@@ -1,6 +1,7 @@
 import './db-button.js';
 import './db-input.js';
 import './db-otp-input.js';
+import { EMAIL_VERIFY_SIZES } from '@designbasekorea/ui-contracts';
 
 /**
  * ui-wc — db-email-verify (수동 작성, 자동 동기화 대상 아님)
@@ -8,8 +9,7 @@ import './db-otp-input.js';
  * 이메일 인증: code(OTP) 모드 / confirm(메일함 확인) 모드.
  */
 
-declare const SIZES: readonly ["s", "m", "l"];
-type Size = (typeof SIZES)[number];
+type Size = (typeof EMAIL_VERIFY_SIZES)[number];
 declare class DbEmailVerify extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-email-verify.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";const e=["s","m","l"];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbEmailVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["mode","email","code","step","size","disabled","error","error-message","countdown","title","description","send-label","resend-label","verify-label","confirm-label","code-length","closable","manual","sending","verifying","auto-submit"]}get mode(){return"confirm"===this.getAttribute("mode")?"confirm":"code"}set mode(t){this.setAttribute("mode",t)}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(e,this.getAttribute("size"),"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"sent"===t||"verified"===t?t:"email"}set step(t){this.setAttribute("step",t)}get email(){return this.getAttribute("email")||""}set email(t){this.setAttribute("email",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.mode&&"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"!==t&&"mode"!==t||e===i||("code"===this.mode&&"code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"!==this.mode&&(this.mode="code"),"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.mode&&"code"===this.step&&this.startTimer(this.countdown)}markSent(){this.step="sent",this.clearTimer()}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const t=Math.max(0,Math.floor(this.remaining/60)),e=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const e="designbase-wc-email-verify";this.replaceChildren();const i=el("div",`${e}__shell`),s=el("div",`${e}__top`),n=el("span",`${e}__eyebrow`);n.dataset.role="eyebrow",this.closeBtn=el("button",`${e}__close`),this.closeBtn.type="button",this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",18)),this.closeBtn.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),s.append(n,this.closeBtn);const r=el("div",`${e}__header`),o=el("h3",`${e}__title`);o.dataset.role="title";const d=el("p",`${e}__description`);d.dataset.role="description",r.append(o,d),this.emailRow=el("div",`${e}__email-row`),this.emailInput=document.createElement("db-input"),this.emailInput.setAttribute("type","email"),this.emailInput.setAttribute("label","이메일"),this.emailInput.setAttribute("placeholder","name@example.com"),this.emailInput.setAttribute("full-width",""),this.emailInput.setAttribute("start-icon","mail"),this.emailInput.addEventListener("db-input",t=>{t.stopPropagation();const e=String(t.detail?.value??this.emailInput.value??"");this.setAttribute("email",e),this.dispatchEvent(new CustomEvent("db-email-change",{detail:{email:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isEmailValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{email:this.email,mode:this.mode},bubbles:!0,composed:!0})),this.hasAttribute("manual")||("confirm"===this.mode?this.markSent():this.startCodeStep()))}),this.emailRow.append(this.emailInput,this.sendBtn),this.codeBlock=el("div",`${e}__code`);const a=el("div",`${e}__code-head`),l=el("span",`${e}__code-label`);l.textContent="인증 코드",this.timerEl=el("span",`${e}__timer`),a.append(l,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,email:this.email},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const h=el("div",`${e}__code-actions`);this.resendBtn=el("button",`${e}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{email:this.email},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),h.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(a,this.otpInput,h),this.confirmBlock=el("div",`${e}__confirm`);const c=el("div",`${e}__confirm-icon`);c.append(t("mail",40));const m=el("span",`${e}__confirm-badge`);m.append(t("circle-checked",16)),c.append(m);const u=el("h4",`${e}__confirm-title`);u.dataset.role="confirm-title";const b=el("p",`${e}__confirm-desc`);b.dataset.role="confirm-desc",this.confirmBtn=document.createElement("db-button"),this.confirmBtn.setAttribute("variant","primary"),this.confirmBtn.setAttribute("full-width",""),this.confirmBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-confirm",{detail:{email:this.email},bubbles:!0,composed:!0}))});const p=el("button",`${e}__resend`);p.type="button",p.dataset.role="confirm-resend",p.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-resend",{detail:{email:this.email},bubbles:!0,composed:!0}))}),this.confirmBlock.append(c,u,b,this.confirmBtn,p),this.verifiedBlock=el("div",`${e}__confirm`);const f=el("div",`${e}__confirm-icon`);f.append(t("circle-checked",40));const v=el("h4",`${e}__confirm-title`);v.textContent="이메일 인증 완료";const g=el("p",`${e}__confirm-desc`);g.dataset.role="verified-desc",this.verifiedBlock.append(f,v,g),this.errorEl=el("p",`${e}__error`),this.errorEl.hidden=!0,i.append(s,r,this.emailRow,this.codeBlock,this.confirmBlock,this.verifiedBlock,this.errorEl),this.append(i)}sync(){const t="designbase-wc-email-verify",e=this.size,i=this.mode,s=this.step,n=this.hasAttribute("disabled"),r=this.getAttribute("code-length")||"6",o=this.email;this.className=[t,`${t}--${e}`,`${t}--mode-${i}`,`${t}--step-${s}`,n&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");this.querySelector('[data-role="eyebrow"]').textContent="confirm"===i?"회원가입":"이메일 인증";const d=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');d.textContent=this.getAttribute("title")||("confirm"===i?"이메일을 확인해 주세요":"이메일 인증");const l=this.getAttribute("description");l?a.textContent=l:"confirm"===i?this.setEmphasizedText(a,"",o||"your@email.com"," 으로 인증 링크를 보냈어요."):this.setEmphasizedText(a,"인증 코드를 ",o||"이메일"," 로 보내 드릴게요."),this.closeBtn&&(this.closeBtn.hidden=!this.hasAttribute("closable")),this.emailInput.value=o,this.emailInput.setAttribute("size",e),this.emailInput.toggleAttribute("disabled",n||"code"===s||"sent"===s||"verified"===s),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||("confirm"===i?"인증 메일 보내기":"인증번호 받기"),this.sendBtn.toggleAttribute("disabled",n||!this.isEmailValid()||"email"!==s),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",r),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",n||"code"!==s),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",n||"code"!==s||(this.getAttribute("code")||"").length!==Number(r)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying"));const h=this.querySelector('[data-role="confirm-title"]'),c=this.querySelector('[data-role="confirm-desc"]');h.textContent="메일함을 확인해 주세요!",this.setEmphasizedText(c,"",o||"your@email.com"," 으로 보낸 링크를 클릭하면 인증이 완료됩니다."),this.confirmBtn.setAttribute("size",e),this.confirmBtn.textContent=this.getAttribute("confirm-label")||"확인";const m=this.querySelector('[data-role="confirm-resend"]');m&&(m.textContent="메일 다시 보내기");const u=this.querySelector('[data-role="verified-desc"]');this.setEmphasizedText(u,"",o||"your@email.com"," 주소가 인증되었습니다."),this.emailRow.hidden="confirm"===i&&("sent"===s||"verified"===s)||"code"===i&&"verified"===s,this.codeBlock.hidden=!("code"===i&&"code"===s),this.confirmBlock.hidden=!("confirm"===i&&("sent"===s||"verified"===s)),this.verifiedBlock.hidden=!("code"===i&&"verified"===s);const b=this.getAttribute("error-message")||"";this.errorEl.textContent=b,this.errorEl.hidden=!this.hasAttribute("error")||!b}isEmailValid(){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email.trim())}requestVerify(){const t=(this.getAttribute("code")||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{email:this.email,code:t},bubbles:!0,composed:!0}))}setEmphasizedText(t,e,i,s){const n=document.createElement("strong");n.textContent=i,t.replaceChildren(document.createTextNode(e),n,document.createTextNode(s))}}customElements.get("db-email-verify")||customElements.define("db-email-verify",DbEmailVerify);export{DbEmailVerify};
+import{createDbIcon as t}from"./db-icons.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";import{EMAIL_VERIFY_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbEmailVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["mode","email","code","step","size","disabled","error","error-message","countdown","title","description","send-label","resend-label","verify-label","confirm-label","code-length","closable","manual","sending","verifying","auto-submit"]}get mode(){return"confirm"===this.getAttribute("mode")?"confirm":"code"}set mode(t){this.setAttribute("mode",t)}get size(){return function pick(t,e,i){return t.includes(e)?e:i}(e,this.getAttribute("size"),"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"sent"===t||"verified"===t?t:"email"}set step(t){this.setAttribute("step",t)}get email(){return this.getAttribute("email")||""}set email(t){this.setAttribute("email",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.mode&&"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"!==t&&"mode"!==t||e===i||("code"===this.mode&&"code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"!==this.mode&&(this.mode="code"),"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.mode&&"code"===this.step&&this.startTimer(this.countdown)}markSent(){this.step="sent",this.clearTimer()}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const t=Math.max(0,Math.floor(this.remaining/60)),e=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const e="designbase-wc-email-verify";this.replaceChildren();const i=el("div",`${e}__shell`),s=el("div",`${e}__top`),n=el("span",`${e}__eyebrow`);n.dataset.role="eyebrow",this.closeBtn=el("button",`${e}__close`),this.closeBtn.type="button",this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",18)),this.closeBtn.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),s.append(n,this.closeBtn);const r=el("div",`${e}__header`),o=el("h3",`${e}__title`);o.dataset.role="title";const d=el("p",`${e}__description`);d.dataset.role="description",r.append(o,d),this.emailRow=el("div",`${e}__email-row`),this.emailInput=document.createElement("db-input"),this.emailInput.setAttribute("type","email"),this.emailInput.setAttribute("label","이메일"),this.emailInput.setAttribute("placeholder","name@example.com"),this.emailInput.setAttribute("full-width",""),this.emailInput.setAttribute("start-icon","mail"),this.emailInput.addEventListener("db-input",t=>{t.stopPropagation();const e=String(t.detail?.value??this.emailInput.value??"");this.setAttribute("email",e),this.dispatchEvent(new CustomEvent("db-email-change",{detail:{email:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isEmailValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{email:this.email,mode:this.mode},bubbles:!0,composed:!0})),this.hasAttribute("manual")||("confirm"===this.mode?this.markSent():this.startCodeStep()))}),this.emailRow.append(this.emailInput,this.sendBtn),this.codeBlock=el("div",`${e}__code`);const a=el("div",`${e}__code-head`),l=el("span",`${e}__code-label`);l.textContent="인증 코드",this.timerEl=el("span",`${e}__timer`),a.append(l,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,email:this.email},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const h=el("div",`${e}__code-actions`);this.resendBtn=el("button",`${e}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{email:this.email},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),h.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(a,this.otpInput,h),this.confirmBlock=el("div",`${e}__confirm`);const c=el("div",`${e}__confirm-icon`);c.append(t("mail",40));const m=el("span",`${e}__confirm-badge`);m.append(t("circle-checked",16)),c.append(m);const u=el("h4",`${e}__confirm-title`);u.dataset.role="confirm-title";const b=el("p",`${e}__confirm-desc`);b.dataset.role="confirm-desc",this.confirmBtn=document.createElement("db-button"),this.confirmBtn.setAttribute("variant","primary"),this.confirmBtn.setAttribute("full-width",""),this.confirmBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-confirm",{detail:{email:this.email},bubbles:!0,composed:!0}))});const p=el("button",`${e}__resend`);p.type="button",p.dataset.role="confirm-resend",p.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-resend",{detail:{email:this.email},bubbles:!0,composed:!0}))}),this.confirmBlock.append(c,u,b,this.confirmBtn,p),this.verifiedBlock=el("div",`${e}__confirm`);const f=el("div",`${e}__confirm-icon`);f.append(t("circle-checked",40));const v=el("h4",`${e}__confirm-title`);v.textContent="이메일 인증 완료";const g=el("p",`${e}__confirm-desc`);g.dataset.role="verified-desc",this.verifiedBlock.append(f,v,g),this.errorEl=el("p",`${e}__error`),this.errorEl.hidden=!0,i.append(s,r,this.emailRow,this.codeBlock,this.confirmBlock,this.verifiedBlock,this.errorEl),this.append(i)}sync(){const t="designbase-wc-email-verify",e=this.size,i=this.mode,s=this.step,n=this.hasAttribute("disabled"),r=this.getAttribute("code-length")||"6",o=this.email;this.className=[t,`${t}--${e}`,`${t}--mode-${i}`,`${t}--step-${s}`,n&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" "),this.emailInput?.toggleAttribute("error",this.hasAttribute("error"));this.querySelector('[data-role="eyebrow"]').textContent="confirm"===i?"회원가입":"이메일 인증";const d=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');d.textContent=this.getAttribute("title")||("confirm"===i?"이메일을 확인해 주세요":"이메일 인증");const l=this.getAttribute("description");l?a.textContent=l:"confirm"===i?this.setEmphasizedText(a,"",o||"your@email.com"," 으로 인증 링크를 보냈어요."):this.setEmphasizedText(a,"인증 코드를 ",o||"이메일"," 로 보내 드릴게요."),this.closeBtn&&(this.closeBtn.hidden=!this.hasAttribute("closable")),this.emailInput.value=o,this.emailInput.setAttribute("size",e),this.emailInput.toggleAttribute("disabled",n||"code"===s||"sent"===s||"verified"===s),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||("confirm"===i?"인증 메일 보내기":"인증번호 받기"),this.sendBtn.toggleAttribute("disabled",n||!this.isEmailValid()||"email"!==s),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",r),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",n||"code"!==s),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",n||"code"!==s||(this.getAttribute("code")||"").length!==Number(r)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying"));const h=this.querySelector('[data-role="confirm-title"]'),c=this.querySelector('[data-role="confirm-desc"]');h.textContent="메일함을 확인해 주세요!",this.setEmphasizedText(c,"",o||"your@email.com"," 으로 보낸 링크를 클릭하면 인증이 완료됩니다."),this.confirmBtn.setAttribute("size",e),this.confirmBtn.textContent=this.getAttribute("confirm-label")||"확인";const m=this.querySelector('[data-role="confirm-resend"]');m&&(m.textContent="메일 다시 보내기");const u=this.querySelector('[data-role="verified-desc"]');this.setEmphasizedText(u,"",o||"your@email.com"," 주소가 인증되었습니다."),this.emailRow.hidden="confirm"===i&&("sent"===s||"verified"===s)||"code"===i&&"verified"===s,this.codeBlock.hidden=!("code"===i&&"code"===s),this.confirmBlock.hidden=!("confirm"===i&&("sent"===s||"verified"===s)),this.verifiedBlock.hidden=!("code"===i&&"verified"===s);const b=this.getAttribute("error-message")||"";this.errorEl.textContent=b,this.errorEl.hidden=!this.hasAttribute("error")||!b}isEmailValid(){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email.trim())}requestVerify(){const t=(this.getAttribute("code")||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{email:this.email,code:t},bubbles:!0,composed:!0}))}setEmphasizedText(t,e,i,s){const n=document.createElement("strong");n.textContent=i,t.replaceChildren(document.createTextNode(e),n,document.createTextNode(s))}}customElements.get("db-email-verify")||customElements.define("db-email-verify",DbEmailVerify);export{DbEmailVerify};

package/dist/esm/components/db-file-uploader.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","outlined","filled"];class DbFileUploader extends HTMLElement{constructor(){super(...arguments),this.uploadedFiles=[],this.uploadIntervals=new Map,this.handleFileSelect=e=>{if(this.isDisabled())return;const t=e.detail,s=t?.files??[];if(!s.length)return;const i=s.map(e=>({file:e,id:`${Date.now()}-${Math.random()}`,status:"pending",progress:0}));this.hasAttribute("multiple")?this.uploadedFiles=[...this.uploadedFiles,...i]:this.uploadedFiles=i,this.dispatchEvent(new CustomEvent("db-upload",{bubbles:!0,composed:!0,detail:{files:i}})),this.simulateUpload(i),this.renderFileList()},this.handleRemove=e=>{if(this.isDisabled())return;const t=this.uploadIntervals.get(e);t&&(clearInterval(t),this.uploadIntervals.delete(e)),this.uploadedFiles=this.uploadedFiles.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent("db-remove",{bubbles:!0,composed:!0,detail:{fileId:e}})),this.renderFileList()},this.handleRetry=e=>{if(this.isDisabled())return;const t=this.uploadedFiles.find(t=>t.id===e);t&&(this.updateFile(e,{status:"pending",progress:0,error:void 0}),this.dispatchEvent(new CustomEvent("db-retry",{bubbles:!0,composed:!0,detail:{fileId:e}})),this.simulateUpload([t]),this.renderFileList())}}static get observedAttributes(){return["size","variant","accept","max-size","multiple","show-file-list","show-progress","disabled","readonly"]}connectedCallback(){this.ensureDropzone(),this.sync(),this.dropzone?.addEventListener("db-file-select",this.handleFileSelect)}disconnectedCallback(){this.dropzone?.removeEventListener("db-file-select",this.handleFileSelect),this.uploadIntervals.forEach(e=>clearInterval(e)),this.uploadIntervals.clear()}attributeChangedCallback(){this.isConnected&&this.sync()}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}ensureDropzone(){this.dropzone||(this.dropzone=document.createElement("db-dropzone"),this.dropzone.setAttribute("data-wc-internal",""),this.prepend(this.dropzone))}formatFileSize(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/1024**t).toFixed(2))} ${["Bytes","KB","MB","GB"][t]}`}simulateUpload(e){e.forEach((e,t)=>{this.updateFile(e.id,{status:"uploading",progress:0});let s=0;const i=setInterval(()=>{if(s+=20*Math.random(),s>=100)return s=100,clearInterval(i),this.uploadIntervals.delete(e.id),this.updateFile(e.id,{status:"success",progress:100}),void this.renderFileList();this.updateFile(e.id,{progress:s}),this.renderFileList()},100+50*t);this.uploadIntervals.set(e.id,i)})}updateFile(e,t){this.uploadedFiles=this.uploadedFiles.map(s=>s.id===e?{...s,...t}:s)}sync(){if(this.ensureDropzone(),!this.dropzone)return;const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",l=t.includes(e)?e:"m",a=s.includes(i)?i:"default";this.className=["designbase-wc-file-uploader",`designbase-wc-file-uploader--size-${l}`,`designbase-wc-file-uploader--variant-${a}`,this.hasAttribute("disabled")&&"designbase-wc-file-uploader--disabled",this.hasAttribute("readonly")&&"designbase-wc-file-uploader--readonly"].filter(Boolean).join(" "),this.dropzone.setAttribute("size",l),this.dropzone.setAttribute("variant",a),this.getAttribute("accept")?this.dropzone.setAttribute("accept",this.getAttribute("accept")):this.dropzone.removeAttribute("accept"),this.getAttribute("max-size")?this.dropzone.setAttribute("max-size",this.getAttribute("max-size")):this.dropzone.removeAttribute("max-size"),this.dropzone.toggleAttribute("multiple",this.hasAttribute("multiple")),this.dropzone.toggleAttribute("disabled",this.hasAttribute("disabled")),this.dropzone.toggleAttribute("readonly",this.hasAttribute("readonly")),this.renderFileList()}renderStatusIcon(t){if("uploading"===t){const e=document.createElement("db-spinner");return e.setAttribute("type","circular"),e.setAttribute("size","s"),e}return e("success"===t?"done":"error"===t?"error-filled":"gallery",20)}renderFileList(){const e=!this.hasAttribute("show-file-list")||"false"!==this.getAttribute("show-file-list"),t=!this.hasAttribute("show-progress")||"false"!==this.getAttribute("show-progress");if(this.querySelector(":scope > .designbase-wc-file-uploader__file-list")?.remove(),!e||!this.uploadedFiles.length)return;const s=document.createElement("div");s.className="designbase-wc-file-uploader__file-list";const i=document.createElement("div");i.className="designbase-wc-file-uploader__file-list-title",i.textContent=`업로드된 파일들 (${this.uploadedFiles.length}개)`,s.append(i);const l=document.createElement("div");l.className="designbase-wc-file-uploader__file-items",this.uploadedFiles.forEach(e=>{const s=document.createElement("div");s.className=`designbase-wc-file-uploader__file-item designbase-wc-file-uploader__file-item--${e.status}`;const i=document.createElement("div");i.className="designbase-wc-file-uploader__file-info";const a=document.createElement("div");a.className="designbase-wc-file-uploader__file-icon",a.append(this.renderStatusIcon(e.status));const d=document.createElement("div");d.className="designbase-wc-file-uploader__file-details";const r=document.createElement("div");r.className="designbase-wc-file-uploader__file-name",r.textContent=e.file.name;const n=document.createElement("div");if(n.className="designbase-wc-file-uploader__file-size",n.textContent=this.formatFileSize(e.file.size),d.append(r,n),e.error){const t=document.createElement("div");t.className="designbase-wc-file-uploader__file-error",t.textContent=e.error,d.append(t)}if(i.append(a,d),s.append(i),t&&"uploading"===e.status){const t=document.createElement("div");t.className="designbase-wc-file-uploader__progress";const i=document.createElement("db-progressbar");i.setAttribute("value",String(Math.round(e.progress||0))),i.setAttribute("size","s"),i.setAttribute("variant","primary"),i.setAttribute("bar-style","solid"),i.setAttribute("show-label",""),i.setAttribute("label-position","inside"),i.setAttribute("full-width",""),t.append(i),s.append(t)}const o=document.createElement("div");if(o.className="designbase-wc-file-uploader__file-actions","error"===e.status){const t=document.createElement("button");t.type="button",t.className="designbase-wc-file-uploader__retry-button",t.textContent="재시도",t.disabled=this.isDisabled(),t.addEventListener("click",()=>this.handleRetry(e.id)),o.append(t)}const u=document.createElement("button");u.type="button",u.className="designbase-wc-file-uploader__remove-button",u.textContent="삭제",u.disabled=this.isDisabled(),u.addEventListener("click",()=>this.handleRemove(e.id)),o.append(u),s.append(o),l.append(s)}),s.append(l),this.append(s)}}customElements.get("db-file-uploader")||customElements.define("db-file-uploader",DbFileUploader);export{DbFileUploader};
+import{createDbIcon as e}from"./db-icons.js";import{FILE_UPLOADER_SIZES as t,FILE_UPLOADER_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbFileUploader extends HTMLElement{constructor(){super(...arguments),this.uploadedFiles=[],this.uploadIntervals=new Map,this.handleFileSelect=e=>{if(this.isDisabled())return;const t=e.detail,s=t?.files??[];if(!s.length)return;const i=s.map(e=>({file:e,id:`${Date.now()}-${Math.random()}`,status:"pending",progress:0}));this.hasAttribute("multiple")?this.uploadedFiles=[...this.uploadedFiles,...i]:this.uploadedFiles=i,this.dispatchEvent(new CustomEvent("db-upload",{bubbles:!0,composed:!0,detail:{files:i}})),this.simulateUpload(i),this.renderFileList()},this.handleRemove=e=>{if(this.isDisabled())return;const t=this.uploadIntervals.get(e);t&&(clearInterval(t),this.uploadIntervals.delete(e)),this.uploadedFiles=this.uploadedFiles.filter(t=>t.id!==e),this.dispatchEvent(new CustomEvent("db-remove",{bubbles:!0,composed:!0,detail:{fileId:e}})),this.renderFileList()},this.handleRetry=e=>{if(this.isDisabled())return;const t=this.uploadedFiles.find(t=>t.id===e);t&&(this.updateFile(e,{status:"pending",progress:0,error:void 0}),this.dispatchEvent(new CustomEvent("db-retry",{bubbles:!0,composed:!0,detail:{fileId:e}})),this.simulateUpload([t]),this.renderFileList())}}static get observedAttributes(){return["size","variant","accept","max-size","multiple","show-file-list","show-progress","disabled","readonly"]}connectedCallback(){this.ensureDropzone(),this.sync(),this.dropzone?.addEventListener("db-file-select",this.handleFileSelect)}disconnectedCallback(){this.dropzone?.removeEventListener("db-file-select",this.handleFileSelect),this.uploadIntervals.forEach(e=>clearInterval(e)),this.uploadIntervals.clear()}attributeChangedCallback(){this.isConnected&&this.sync()}isDisabled(){return this.hasAttribute("disabled")||this.hasAttribute("readonly")}ensureDropzone(){this.dropzone||(this.dropzone=document.createElement("db-dropzone"),this.dropzone.setAttribute("data-wc-internal",""),this.prepend(this.dropzone))}formatFileSize(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/1024**t).toFixed(2))} ${["Bytes","KB","MB","GB"][t]}`}simulateUpload(e){e.forEach((e,t)=>{this.updateFile(e.id,{status:"uploading",progress:0});let s=0;const i=setInterval(()=>{if(s+=20*Math.random(),s>=100)return s=100,clearInterval(i),this.uploadIntervals.delete(e.id),this.updateFile(e.id,{status:"success",progress:100}),void this.renderFileList();this.updateFile(e.id,{progress:s}),this.renderFileList()},100+50*t);this.uploadIntervals.set(e.id,i)})}updateFile(e,t){this.uploadedFiles=this.uploadedFiles.map(s=>s.id===e?{...s,...t}:s)}sync(){if(this.ensureDropzone(),!this.dropzone)return;const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",l=t.includes(e)?e:"m",a=s.includes(i)?i:"default";this.className=["designbase-wc-file-uploader",`designbase-wc-file-uploader--size-${l}`,`designbase-wc-file-uploader--variant-${a}`,this.hasAttribute("disabled")&&"designbase-wc-file-uploader--disabled",this.hasAttribute("readonly")&&"designbase-wc-file-uploader--readonly"].filter(Boolean).join(" "),this.dropzone.setAttribute("size",l),this.dropzone.setAttribute("variant",a),this.getAttribute("accept")?this.dropzone.setAttribute("accept",this.getAttribute("accept")):this.dropzone.removeAttribute("accept"),this.getAttribute("max-size")?this.dropzone.setAttribute("max-size",this.getAttribute("max-size")):this.dropzone.removeAttribute("max-size"),this.dropzone.toggleAttribute("multiple",this.hasAttribute("multiple")),this.dropzone.toggleAttribute("disabled",this.hasAttribute("disabled")),this.dropzone.toggleAttribute("readonly",this.hasAttribute("readonly")),this.renderFileList()}renderStatusIcon(t){if("uploading"===t){const e=document.createElement("db-spinner");return e.setAttribute("type","circular"),e.setAttribute("size","s"),e}return e("success"===t?"done":"error"===t?"error-filled":"gallery",20)}renderFileList(){const e=!this.hasAttribute("show-file-list")||"false"!==this.getAttribute("show-file-list"),t=!this.hasAttribute("show-progress")||"false"!==this.getAttribute("show-progress");if(this.querySelector(":scope > .designbase-wc-file-uploader__file-list")?.remove(),!e||!this.uploadedFiles.length)return;const s=document.createElement("div");s.className="designbase-wc-file-uploader__file-list";const i=document.createElement("div");i.className="designbase-wc-file-uploader__file-list-title",i.textContent=`업로드된 파일들 (${this.uploadedFiles.length}개)`,s.append(i);const l=document.createElement("div");l.className="designbase-wc-file-uploader__file-items",this.uploadedFiles.forEach(e=>{const s=document.createElement("div");s.className=`designbase-wc-file-uploader__file-item designbase-wc-file-uploader__file-item--${e.status}`;const i=document.createElement("div");i.className="designbase-wc-file-uploader__file-info";const a=document.createElement("div");a.className="designbase-wc-file-uploader__file-icon",a.append(this.renderStatusIcon(e.status));const r=document.createElement("div");r.className="designbase-wc-file-uploader__file-details";const d=document.createElement("div");d.className="designbase-wc-file-uploader__file-name",d.textContent=e.file.name;const n=document.createElement("div");if(n.className="designbase-wc-file-uploader__file-size",n.textContent=this.formatFileSize(e.file.size),r.append(d,n),e.error){const t=document.createElement("div");t.className="designbase-wc-file-uploader__file-error",t.textContent=e.error,r.append(t)}if(i.append(a,r),s.append(i),t&&"uploading"===e.status){const t=document.createElement("div");t.className="designbase-wc-file-uploader__progress";const i=document.createElement("db-progressbar");i.setAttribute("value",String(Math.round(e.progress||0))),i.setAttribute("size","s"),i.setAttribute("variant","primary"),i.setAttribute("bar-style","solid"),i.setAttribute("show-label",""),i.setAttribute("label-position","inside"),i.setAttribute("full-width",""),t.append(i),s.append(t)}const o=document.createElement("div");if(o.className="designbase-wc-file-uploader__file-actions","error"===e.status){const t=document.createElement("button");t.type="button",t.className="designbase-wc-file-uploader__retry-button",t.textContent="재시도",t.disabled=this.isDisabled(),t.addEventListener("click",()=>this.handleRetry(e.id)),o.append(t)}const u=document.createElement("button");u.type="button",u.className="designbase-wc-file-uploader__remove-button",u.textContent="삭제",u.disabled=this.isDisabled(),u.addEventListener("click",()=>this.handleRemove(e.id)),o.append(u),s.append(o),l.append(s)}),s.append(l),this.append(s)}}customElements.get("db-file-uploader")||customElements.define("db-file-uploader",DbFileUploader);export{DbFileUploader};

package/dist/esm/components/db-floating-action-button.d.ts

@@ -1,4 +1,5 @@
 declare class DbFloatingActionButton extends HTMLElement {
+    private detachKeyActivation?;
     static get observedAttributes(): string[];
     get size(): string;
     set size(value: string);

package/dist/esm/components/db-floating-action-button.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],i=["primary","secondary","tertiary"],s={s:12,m:16,l:20},n={s:"xs",m:"s",l:"m"};class DbFloatingActionButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}static get observedAttributes(){return["size","variant","icon","loading","disabled","aria-label"]}get size(){const t=this.getAttribute("size")||"m";return e.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get variant(){const t=this.getAttribute("variant")||"primary";return i.includes(t)?t:"primary"}set variant(t){this.setAttribute("variant",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",Boolean(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}connectedCallback(){"button"!==this.getAttribute("role")&&this.setAttribute("role","button"),this.hasAttribute("type")||this.setAttribute("type","button"),this.addEventListener("click",this.handleClick),this.sync()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.isConnected&&this.sync()}resolveIconName(t){if(!t)return;return t in{plus:1,search:1,settings:1,edit:1,close:1}?t:void 0}sync(){this.className=["designbase-wc-fab",`designbase-wc-fab--${this.size}`,`designbase-wc-fab--${this.variant}`,this.disabled&&"designbase-wc-fab--disabled",this.loading&&"designbase-wc-fab--loading"].filter(Boolean).join(" ");const e=this.getAttribute("aria-label")||"Floating action button";this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e);const i=String(this.loading);this.getAttribute("aria-busy")!==i&&this.setAttribute("aria-busy",i);const a=String(this.disabled||this.loading);this.getAttribute("aria-disabled")!==a&&this.setAttribute("aria-disabled",a);let r=this.querySelector(":scope > .designbase-wc-fab__icon");if(r||(r=document.createElement("div"),r.className="designbase-wc-fab__icon",this.append(r)),r.replaceChildren(),this.loading){const t=document.createElement("span");return t.className=`designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${n[this.size]}`,t.setAttribute("aria-hidden","true"),t.innerHTML='<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>',void r.append(t)}const c=this.getAttribute("icon"),o=this.resolveIconName(c);if(o)return void r.append(t(o,s[this.size]));const l=Array.from(this.children).find(t=>t!==r&&!t.hasAttribute("data-wc-internal"));l&&!l.isConnected&&r.append(l)}}customElements.get("db-floating-action-button")||customElements.define("db-floating-action-button",DbFloatingActionButton);export{DbFloatingActionButton};
+import{createDbIcon as t}from"./db-icons.js";import{activateOnKey as e}from"../core/a11y.js";import{FLOATING_ACTION_BUTTON_SIZES as i,FLOATING_ACTION_BUTTON_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n={s:12,m:16,l:20},a={s:"xs",m:"s",l:"m"};class DbFloatingActionButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}static get observedAttributes(){return["size","variant","icon","loading","disabled","aria-label"]}get size(){const t=this.getAttribute("size")||"m";return i.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get variant(){const t=this.getAttribute("variant")||"primary";return s.includes(t)?t:"primary"}set variant(t){this.setAttribute("variant",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",Boolean(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}connectedCallback(){"button"!==this.getAttribute("role")&&this.setAttribute("role","button"),this.hasAttribute("type")||this.setAttribute("type","button"),this.addEventListener("click",this.handleClick),this.detachKeyActivation=e(this,{isDisabled:()=>this.disabled}),this.sync()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.detachKeyActivation?.(),this.detachKeyActivation=void 0}attributeChangedCallback(){this.isConnected&&this.sync()}resolveIconName(t){if(!t)return;return t in{plus:1,search:1,settings:1,edit:1,close:1}?t:void 0}sync(){this.className=["designbase-wc-fab",`designbase-wc-fab--${this.size}`,`designbase-wc-fab--${this.variant}`,this.disabled&&"designbase-wc-fab--disabled",this.loading&&"designbase-wc-fab--loading"].filter(Boolean).join(" ");const e=this.getAttribute("aria-label")||"Floating action button";this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e);const i=String(this.loading);this.getAttribute("aria-busy")!==i&&this.setAttribute("aria-busy",i);const s=String(this.disabled||this.loading);this.getAttribute("aria-disabled")!==s&&this.setAttribute("aria-disabled",s);let r=this.querySelector(":scope > .designbase-wc-fab__icon");if(r||(r=document.createElement("div"),r.className="designbase-wc-fab__icon",this.append(r)),r.replaceChildren(),this.loading){const t=document.createElement("span");return t.className=`designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${a[this.size]}`,t.setAttribute("aria-hidden","true"),t.innerHTML='<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>',void r.append(t)}const o=this.getAttribute("icon"),c=this.resolveIconName(o);if(c)return void r.append(t(c,n[this.size]));const l=Array.from(this.children).find(t=>t!==r&&!t.hasAttribute("data-wc-internal"));l&&!l.isConnected&&r.append(l)}}customElements.get("db-floating-action-button")||customElements.define("db-floating-action-button",DbFloatingActionButton);export{DbFloatingActionButton};