@designbasekorea/ui-wc 0.9.3 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 변경 이력
 
+## 0.10.0 - 2026-10-29
+
+- Navbar·PageHeader의 반응형 배치, sticky 레이어 및 메뉴 표시 개선.
+- 폼 컨트롤과 Button·Accordion·Tabs의 포커스, 키보드, 접근성·상태 처리 보강.
+- React Accordion·Tabs의 패널 콘텐츠와 내부 상태 보존, 이벤트 연결 개선. React wrapper 사용 시 React와 React DOM을 함께 설치하세요.
+- 최신 컴포넌트·스타일·타입 및 공통 계약 ui-contracts 0.2.0을 함께 제공.
+
+
+## 0.9.4 - 2026-10-27
+
+Workspace 템플릿 인박스·프로젝트 탭에서 발견한 레이아웃 버그 수정 릴리스입니다.
+
+- Tabs: 패널 콘텐츠(슬롯) 없이 탭을 내비게이션으로만 쓸 때(`items` + `onChange`로 내용을 바깥에서 렌더) 빈 패널 박스가 패딩·배경과 함께 그려져 탭 아래 흰 여백이 생기던 문제 수정. 패널이 하나도 없으면 패널을 숨기고 `aria-controls`도 붙이지 않습니다(`designbase-wc-tabs--nav-only`).
+- Textarea: `rows`를 지정해도 `min-height: 100px` 때문에 높이가 줄지 않던 문제 수정. `rows`를 주면 그 줄 수가 높이를 결정하고, 주지 않으면 기존 기본 높이를 유지합니다.
+- Textarea: 도움말·오류·글자 수가 모두 없을 때 하단 푸터(20px)를 숨겨 필드 아래 빈 여백이 생기지 않습니다.
+- Avatar: flex 행에서 긴 텍스트 옆에 놓이면 가로로 눌려 원이 찌그러지던 문제 수정(`flex-shrink: 0`).
+
 ## 0.9.3 - 2026-10-26
 
 Pro 템플릿(AI Assistant·Docs) 제작 중 발견한 라이브러리 버그 수정 릴리스입니다.

package/README.md

@@ -34,6 +34,8 @@ npm run verify:docs     # 문서 ↔ 구현 정합성
 
 ```bash
 npm install @designbasekorea/ui-wc @designbasekorea/tokens @designbasekorea/theme
+# React apps also need matching react and react-dom (18.x or 19.x).
+npm install react react-dom
 ```
 
 ## 기본 사용법

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

@@ -1 +1 @@
-import{dbText as t,getDbLocale as e}from"../core/i18n.js";const startOfDay=t=>{const e=new Date(t);return e.setHours(0,0,0,0),e},endOfDay=t=>{const e=new Date(t);return e.setHours(23,59,59,999),e},addDays=(t,e)=>{const n=new Date(t);return n.setDate(n.getDate()+e),startOfDay(n)},getMonthEnd=t=>endOfDay(new Date(t.getFullYear(),t.getMonth()+1,0)),getYearEnd=t=>endOfDay(new Date(t.getFullYear(),11,31)),clampRange=(t,e,n)=>{let{start:a,end:r}=t;return e&&a<e&&(a=startOfDay(e)),n&&r>n&&(r=endOfDay(n)),a>r?{start:r,end:a}:{start:a,end:r}},n=[{id:"today",label:t("오늘"),getRange:({today:t})=>clampRange({start:startOfDay(t),end:endOfDay(t)})},{id:"yesterday",label:t("어제"),getRange:({today:t})=>{const e=addDays(t,-1);return clampRange({start:e,end:endOfDay(e)})}},{id:"this-week",label:t("이번 주"),getRange:({today:t,startOfWeek:e,minDate:n,maxDate:a})=>{const r=((t,e)=>{const n=t.getDay();return addDays(t,-("monday"===e?(n+6)%7:n))})(t,e);return clampRange({start:r,end:(o=r,endOfDay(addDays(o,6)))},n,a);var o}},{id:"this-month",label:t("이번 달"),getRange:({today:t,minDate:e,maxDate:n})=>{return clampRange({start:(a=t,startOfDay(new Date(a.getFullYear(),a.getMonth(),1))),end:getMonthEnd(t)},e,n);var a}},{id:"this-year",label:t("올해"),getRange:({today:t,minDate:e,maxDate:n})=>{return clampRange({start:(a=t,startOfDay(new Date(a.getFullYear(),0,1))),end:getYearEnd(t)},e,n);var a}},{id:"custom",label:t("사용자 지정"),getRange:()=>null}],addMonths=(t,e)=>{const n=new Date(t);return n.setDate(1),n.setMonth(n.getMonth()+e),n},toISODate=t=>`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`,parseISODate=t=>{if(!t)return null;const e=t.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const n=new Date(Number(e[1]),Number(e[2])-1,Number(e[3]));return Number.isNaN(n.getTime())?null:startOfDay(n)},formatDisplayDate=(t,n=("ko"===e()?"ko-KR":"en-US"))=>t.toLocaleDateString(n),generateWeekdays=(t,n=("ko"===e()?"ko-KR":"en-US"))=>{const a=Array.from({length:7},(t,e)=>new Intl.DateTimeFormat(n,{weekday:"short"}).format(new Date(2026,0,4+e)));return"monday"===t&&a.push(a.shift()),a},generateCalendarGrid=(t,e,n=!1)=>{const a=t.getFullYear(),r=t.getMonth(),o=new Date(a,r,1),s="monday"===e?(o.getDay()+6)%7:o.getDay();if(n){const t=[];for(let e=0;e<s;e+=1)t.push(null);const e=new Date(a,r+1,0).getDate();for(let n=1;n<=e;n+=1)t.push(new Date(a,r,n));return t}const u=new Date(o);return u.setDate(u.getDate()-s),Array.from({length:42},(t,e)=>{const n=new Date(u);return n.setDate(u.getDate()+e),n})},detectActivePresetId=(t,e,n)=>{if(!t)return"custom";const a=t.start.toDateString(),r=t.end.toDateString();for(const t of e){if("custom"===t.id)continue;const e=t.getRange(n);if(e&&(e.start.toDateString()===a&&e.end.toDateString()===r))return t.id}return"custom"},formatPanelInputDate=(t,e)=>t?t.toLocaleDateString(e,{year:"numeric",month:"short",day:"numeric"}):"";export{n as DEFAULT_DATE_PICKER_PRESETS,addMonths,detectActivePresetId,endOfDay,formatDisplayDate,formatPanelInputDate,generateCalendarGrid,generateWeekdays,parseISODate,startOfDay,toISODate};
+import{dbText as t,getDbLocale as e}from"../core/i18n.js";const startOfDay=t=>{const e=new Date(t);return e.setHours(0,0,0,0),e},endOfDay=t=>{const e=new Date(t);return e.setHours(23,59,59,999),e},addDays=(t,e)=>{const n=new Date(t);return n.setDate(n.getDate()+e),startOfDay(n)},getMonthEnd=t=>endOfDay(new Date(t.getFullYear(),t.getMonth()+1,0)),getYearEnd=t=>endOfDay(new Date(t.getFullYear(),11,31)),clampRange=(t,e,n)=>{let{start:a,end:r}=t;return e&&a<e&&(a=startOfDay(e)),n&&r>n&&(r=endOfDay(n)),a>r?{start:r,end:a}:{start:a,end:r}},n=[{id:"today",label:t("오늘"),getRange:({today:t})=>clampRange({start:startOfDay(t),end:endOfDay(t)})},{id:"yesterday",label:t("어제"),getRange:({today:t})=>{const e=addDays(t,-1);return clampRange({start:e,end:endOfDay(e)})}},{id:"this-week",label:t("이번 주"),getRange:({today:t,startOfWeek:e,minDate:n,maxDate:a})=>{const r=((t,e)=>{const n=t.getDay();return addDays(t,-("monday"===e?(n+6)%7:n))})(t,e);return clampRange({start:r,end:(o=r,endOfDay(addDays(o,6)))},n,a);var o}},{id:"this-month",label:t("이번 달"),getRange:({today:t,minDate:e,maxDate:n})=>{return clampRange({start:(a=t,startOfDay(new Date(a.getFullYear(),a.getMonth(),1))),end:getMonthEnd(t)},e,n);var a}},{id:"this-year",label:t("올해"),getRange:({today:t,minDate:e,maxDate:n})=>{return clampRange({start:(a=t,startOfDay(new Date(a.getFullYear(),0,1))),end:getYearEnd(t)},e,n);var a}},{id:"custom",label:t("사용자 지정"),getRange:()=>null}],addMonths=(t,e)=>{const n=new Date(t);return n.setDate(1),n.setMonth(n.getMonth()+e),n},toISODate=t=>`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`,parseISODate=t=>{if(!t)return null;const e=t.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const n=new Date(Number(e[1]),Number(e[2])-1,Number(e[3]));return Number.isNaN(n.getTime())?null:startOfDay(n)},formatDisplayDate=(t,n=("ko"===e()?"ko-KR":"en-US"))=>t.toLocaleDateString(n),generateWeekdays=(t,n=("ko"===e()?"ko-KR":"en-US"))=>{const a=Array.from({length:7},(t,e)=>new Intl.DateTimeFormat(n,{weekday:"short"}).format(new Date(2026,0,4+e)));return"monday"===t&&a.push(a.shift()),a},generateCalendarGrid=(t,e,n=!1)=>{const a=t.getFullYear(),r=t.getMonth(),o=new Date(a,r,1),s="monday"===e?(o.getDay()+6)%7:o.getDay();if(n){const t=[];for(let e=0;e<s;e+=1)t.push(null);const e=new Date(a,r+1,0).getDate();for(let n=1;n<=e;n+=1)t.push(new Date(a,r,n));return t}const u=new Date(o);return u.setDate(u.getDate()-s),Array.from({length:42},(t,e)=>{const n=new Date(u);return n.setDate(u.getDate()+e),n})},detectActivePresetId=(t,e,n)=>{if(!t)return"custom";const a=t.start.toDateString(),r=t.end.toDateString();for(const t of e){if("custom"===t.id)continue;const e=t.getRange(n);if(e&&(e.start.toDateString()===a&&e.end.toDateString()===r))return t.id}return"custom"},formatPanelInputDate=(t,e)=>t?t.toLocaleDateString(e,{year:"numeric",month:"short",day:"numeric"}):"";function resolveDateLocale(t){const n="ko"===e()?"ko-KR":"en-US";if(!t?.trim())return n;try{return Intl.getCanonicalLocales(t)[0]||n}catch{return n}}export{n as DEFAULT_DATE_PICKER_PRESETS,addMonths,detectActivePresetId,endOfDay,formatDisplayDate,formatPanelInputDate,generateCalendarGrid,generateWeekdays,parseISODate,resolveDateLocale,startOfDay,toISODate};

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

@@ -1,7 +1,7 @@
+type ExpandMode = 'multiple' | 'single' | 'all';
 interface AccordionItemConfig {
     id?: string;
     title: string;
-    /** 슬롯(content-N)이 없을 때 본문으로 렌더되는 텍스트 */
     content?: string;
     disabled?: boolean;
     itemType?: 'icon' | 'number' | 'question' | 'none';
@@ -9,28 +9,39 @@ interface AccordionItemConfig {
 }
 declare class DbAccordion extends HTMLElement {
     static get observedAttributes(): string[];
+    private readonly uid;
+    private readonly panels;
+    private readonly slotNodes;
     private expanded;
-    private isRendering;
-    private suppressExpandedAttrCallback;
+    private rendering;
+    private reflecting;
     private childObserver?;
+    private stash?;
     get items(): AccordionItemConfig[];
     set items(value: AccordionItemConfig[] | string);
+    get size(): string;
+    set size(value: string);
+    get variant(): string;
+    set variant(value: string);
     get allowMultiple(): boolean;
     set allowMultiple(value: boolean);
+    get expandMode(): ExpandMode;
+    set expandMode(value: ExpandMode);
     get expandedItems(): string[];
     set expandedItems(value: string[] | string);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(name: string): void;
-    /** id와 index 문자열 충돌 방지 — 항목당 단일 키만 사용 */
-    private resolveItemKey;
-    private getExpandMode;
+    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
+    /** Refresh externally supplied slot structure without changing expansion or emitting events. */
+    refresh(): void;
+    focus(options?: FocusOptions): void;
+    private entries;
     private syncExpandedFromAttributes;
-    private iconSize;
-    private collectPanelContent;
-    private isItemExpanded;
+    private collectSlots;
+    private createPanel;
     private syncExpandedState;
     private render;
+    private navigate;
     private toggle;
 }
 declare global {
@@ -40,3 +51,4 @@ declare global {
 }
 
 export { DbAccordion };
+export type { AccordionItemConfig };

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

@@ -1 +1 @@
-import{dbText as e}from"../core/i18n.js";import{createDbIcon as t}from"./db-icons.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ACCORDION_VARIANTS as n,ACCORDION_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbAccordion extends HTMLElement{constructor(){super(...arguments),this.expanded=new Set,this.isRendering=!1,this.suppressExpandedAttrCallback=!1}static get observedAttributes(){return["items","variant","size","allow-multiple","expand-mode","expanded-items","default-item-type"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get allowMultiple(){return this.hasAttribute("allow-multiple")}set allowMultiple(e){this.toggleAttribute("allow-multiple",e)}get expandedItems(){const e=(this.getAttribute("expanded-items")||"").trim();if(!e)return[];if("all"===e)return this.items.map((e,t)=>this.resolveItemKey(e,t));try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(e=>String(e).trim()).filter(Boolean)}catch{}return e.split(",").map(e=>e.trim()).filter(Boolean)}set expandedItems(e){Array.isArray(e)?this.setAttribute("expanded-items",e.join(",")):this.setAttribute("expanded-items",e)}connectedCallback(){this.syncExpandedFromAttributes(),this.render(),this.childObserver=new MutationObserver(e=>{if(this.isRendering)return;e.some(e=>Array.from(e.addedNodes).some(e=>e instanceof HTMLElement&&e.hasAttribute("slot")))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("expanded-items"===e){if(this.suppressExpandedAttrCallback)return;return this.syncExpandedFromAttributes(),void this.syncExpandedState()}return"expand-mode"===e||"allow-multiple"===e?(this.syncExpandedFromAttributes(),void this.syncExpandedState()):"items"===e?(this.syncExpandedFromAttributes(),void this.render()):void this.render()}}resolveItemKey(e,t){return e.id??String(t)}getExpandMode(){const e=this.getAttribute("expand-mode");return"single"===e||"multiple"===e||"all"===e?e:(this.hasAttribute("allow-multiple"),"multiple")}syncExpandedFromAttributes(){const e=this.items.map((e,t)=>this.resolveItemKey(e,t)),t=this.expandedItems,s=this.getExpandMode();t.length>0?this.expanded=new Set(t.filter(t=>e.includes(t))):this.expanded="all"!==s?new Set:new Set(e)}iconSize(e){return"s"===e?16:"l"===e?24:20}collectPanelContent(){const e=new Map,register=(t,s)=>{if(!(t instanceof HTMLElement)||"SLOT"===t.tagName)return;e.has(s)||e.set(s,[]);const n=e.get(s);n.includes(t)||n.push(t)};return Array.from(this.children).forEach(e=>{const t=e.getAttribute("slot")?.match(/^content-(\d+)$/);t&&register(e,Number(t[1]))}),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((e,t)=>{const s=e.querySelector(":scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner");s&&Array.from(s.children).forEach(e=>register(e,t))}),e}isItemExpanded(e,t){return this.expanded.has(this.resolveItemKey(e,t))}syncExpandedState(){const e=this.items;this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((t,s)=>{const n=e[s];if(!n)return;const i=this.isItemExpanded(n,s);t.classList.toggle("designbase-wc-accordion__item--expanded",i),t.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(n.disabled));const a=t.querySelector(".designbase-wc-accordion__trigger"),d=t.querySelector(".designbase-wc-accordion__content");a?.setAttribute("aria-expanded",String(i)),d?.setAttribute("aria-hidden",String(!i))})}render(){this.isRendering=!0;const a=this.collectPanelContent(),d=s(this.getAttribute("variant"),n,"default"),r=s(this.getAttribute("size"),i,"m"),o=this.getExpandMode(),c=this.getAttribute("default-item-type")||"none",l=this.items,m=this.iconSize(r);this.className=["designbase-wc-accordion",`designbase-wc-accordion--${d}`,`designbase-wc-accordion--${r}`,"multiple"===o&&"designbase-wc-accordion--multiple","single"===o&&"designbase-wc-accordion--single","all"===o&&"designbase-wc-accordion--all"].filter(Boolean).join(" "),this.setAttribute("role","region"),this.setAttribute("aria-label",e("아코디언")),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach(e=>e.remove()),l.forEach((e,s)=>{const n=this.resolveItemKey(e,s),i=this.isItemExpanded(e,s),r=document.createElement("div");r.className=["designbase-wc-accordion__item",`designbase-wc-accordion__item--${d}`,i&&"designbase-wc-accordion__item--expanded",e.disabled&&"designbase-wc-accordion__item--disabled"].filter(Boolean).join(" "),r.dataset.itemKey=n;const o=document.createElement("button");o.type="button",o.className="designbase-wc-accordion__trigger",o.disabled=Boolean(e.disabled),o.setAttribute("aria-expanded",String(i)),o.setAttribute("aria-controls",`accordion-content-${n}`),o.addEventListener("click",()=>{e.disabled||this.toggle(n)});const l=e.itemType||c;if("number"===l){const e=document.createElement("div");e.className="designbase-wc-accordion__number",e.textContent=`${s+1}.`,o.append(e)}else if("question"===l){const e=document.createElement("div");e.className="designbase-wc-accordion__question",e.textContent="Q.",o.append(e)}else if("icon"===l&&e.icon){const s=document.createElement("div");s.className="designbase-wc-accordion__icon",s.append(t(e.icon,m)),o.append(s)}const p=document.createElement("span");p.className="designbase-wc-accordion__title",p.textContent=e.title;const h=document.createElement("div");h.className="designbase-wc-accordion__chevron",h.append(t("chevron-down",m)),o.append(p,h);const u=document.createElement("div");u.id=`accordion-content-${n}`,u.className="designbase-wc-accordion__content",u.setAttribute("aria-hidden",String(!i));const b=document.createElement("div");b.className="designbase-wc-accordion__content-inner";const g=a.get(s)||[];if(g.length>0)g.forEach(e=>{e.removeAttribute("slot"),b.append(e)});else if(e.content){const t=document.createElement("p");t.className="designbase-wc-accordion__content-text",t.textContent=e.content,b.append(t)}u.append(b),r.append(o,u),this.append(r)}),this.isRendering=!1}toggle(e){const t=this.getExpandMode();this.expanded.has(e)?this.expanded.delete(e):"single"===t?this.expanded=new Set([e]):this.expanded.add(e);const s=Array.from(this.expanded);this.syncExpandedState(),this.suppressExpandedAttrCallback=!0,this.expandedItems=s,this.suppressExpandedAttrCallback=!1,this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:s},bubbles:!0,composed:!0}))}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};
+import{dbText as e}from"../core/i18n.js";import{dbUid as t}from"../core/uid.js";import{setHostClasses as s}from"../core/host-class.js";import{createDbIcon as n,isDbIconName as i}from"./db-icons.js";import{coerceToContract as r}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ACCORDION_SIZES as a,ACCORDION_VARIANTS as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbAccordion extends HTMLElement{constructor(){super(...arguments),this.uid=t("db-accordion"),this.panels=new Map,this.slotNodes=new Set,this.expanded=new Set,this.rendering=!1,this.reflecting=!1}static get observedAttributes(){return["items","variant","size","allow-multiple","expand-mode","expanded-items","default-item-type"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e.filter(e=>!!e&&"object"==typeof e&&"string"==typeof e.title):[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get size(){return r(this.getAttribute("size"),a,"m")}set size(e){this.setAttribute("size",e)}get variant(){return r(this.getAttribute("variant"),o,"default")}set variant(e){this.setAttribute("variant",e)}get allowMultiple(){return this.hasAttribute("allow-multiple")}set allowMultiple(e){this.toggleAttribute("allow-multiple",e)}get expandMode(){return r(this.getAttribute("expand-mode"),["multiple","single","all"],"multiple")}set expandMode(e){this.setAttribute("expand-mode",e)}get expandedItems(){return this.isConnected||this.syncExpandedFromAttributes(),[...this.expanded]}set expandedItems(e){this.setAttribute("expanded-items",Array.isArray(e)?JSON.stringify(e):e)}connectedCallback(){for(const e of["items","size","variant","allowMultiple","expandMode","expandedItems"])if(Object.prototype.hasOwnProperty.call(this,e)){const t=this[e];delete this[e],this[e]=t}this.syncExpandedFromAttributes(),this.render(),this.childObserver??(this.childObserver=new MutationObserver(e=>{if(this.rendering)return;e.some(e=>"attributes"===e.type||Array.from(e.addedNodes).some(e=>e instanceof HTMLElement&&e.parentElement===this&&/^content-\d+$/.test(e.getAttribute("slot")||""))||Array.from(e.removedNodes).some(e=>e instanceof HTMLElement&&(this.slotNodes.has(e)&&!this.contains(e)||e.parentElement!==this&&[...this.panels.values()].some(t=>t.wrapper===e))))&&this.render()})),this.childObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e,t,s){this.isConnected&&!this.reflecting&&t!==s&&(["items","expand-mode","allow-multiple","expanded-items"].includes(e)&&this.syncExpandedFromAttributes(),"expanded-items"===e?this.syncExpandedState():this.render())}refresh(){this.isConnected&&this.render()}focus(e){[...this.panels.values()].find(e=>!e.trigger.disabled)?.trigger.focus(e)}entries(){const e=new Set;return this.items.map((t,s)=>{const n="string"==typeof t.id&&t.id.length?t.id:String(s);let i=n,r=1;for(;e.has(i);)i=`${n}#${++r}`;return e.add(i),{item:t,index:s,key:i}})}syncExpandedFromAttributes(){const e=this.entries().map(e=>e.key),t=this.getAttribute("expanded-items");let s=[];if(null===t)s="all"===this.expandMode?e:[];else if("all"===t.trim())s=e;else try{const e=JSON.parse(t);s=Array.isArray(e)?e.filter(e=>"string"==typeof e||"number"==typeof e).map(String):t.split(",").map(e=>e.trim()).filter(Boolean)}catch{s=t.split(",").map(e=>e.trim()).filter(Boolean)}const n=[...new Set(s)].filter(t=>e.includes(t));this.expanded=new Set("single"===this.expandMode?n.slice(0,1):n)}collectSlots(){for(const e of Array.from(this.children))e instanceof HTMLElement&&/^content-\d+$/.test(e.getAttribute("slot")||"")&&this.slotNodes.add(e);const e=new Map;for(const t of this.slotNodes){if(!this.contains(t)){this.slotNodes.delete(t);continue}const s=t.getAttribute("slot")?.match(/^content-(\d+)$/);if(!s)continue;const n=Number(s[1]),i=e.get(n)||[];i.push(t),e.set(n,i)}return e}createPanel(e){const s=document.createElement("div");s.className="designbase-wc-accordion__item",s.dataset.itemKey=e;const i=document.createElement("button");i.type="button",i.className="designbase-wc-accordion__trigger";const r=document.createElement("div");r.className="designbase-wc-accordion__content";const a=t(this.uid);i.id=`${a}-trigger`,r.id=`${a}-content`,i.setAttribute("aria-controls",r.id),r.setAttribute("role","region"),r.setAttribute("aria-labelledby",i.id);const o=document.createElement("span");o.setAttribute("aria-hidden","true");const d=document.createElement("span");d.className="designbase-wc-accordion__title";const c=document.createElement("span");c.className="designbase-wc-accordion__chevron",c.setAttribute("aria-hidden","true"),c.append(n("chevron-down",20)),i.append(o,d,c),i.addEventListener("click",()=>this.toggle(e)),i.addEventListener("keydown",t=>this.navigate(t,e));const l=document.createElement("div");return l.className="designbase-wc-accordion__content-inner",l.id=`${a}-inner`,r.append(l),s.append(i,r),{wrapper:s,trigger:i,title:d,prefix:o,content:r,inner:l}}syncExpandedState(){for(const[e,t]of this.panels){const s=this.expanded.has(e);!s&&t.content.contains(document.activeElement)&&t.trigger.focus(),t.wrapper.classList.toggle("designbase-wc-accordion__item--expanded",s),t.trigger.setAttribute("aria-expanded",String(s)),t.content.setAttribute("aria-hidden",String(!s)),t.content.inert=!s}}render(){if(!this.rendering){this.rendering=!0;try{const t=this.collectSlots(),a=this.entries(),o=document.activeElement,d=[...this.panels.values()].findIndex(e=>e.wrapper.contains(o)),c=new Set(a.map(e=>e.key));s(this,["designbase-wc-accordion",`designbase-wc-accordion--${this.variant}`,`designbase-wc-accordion--${this.size}`,`designbase-wc-accordion--${this.expandMode}`]),this.setAttribute("role","region"),this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")||this.setAttribute("aria-label",e("아코디언"));const l=new Set;let h=null;for(const{item:e,index:s,key:o}of a){const a=this.panels.get(o)||this.createPanel(o);this.panels.set(o,a),a.wrapper.className=`designbase-wc-accordion__item designbase-wc-accordion__item--${this.variant}`,a.wrapper.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(e.disabled)),a.trigger.disabled=Boolean(e.disabled),a.title.textContent=e.title,a.inner.dataset.dbAccordionContentIndex=String(s);const d=r(e.itemType||this.getAttribute("default-item-type"),["icon","number","question","none"],"none"),c="s"===this.size?16:"l"===this.size?24:20,p=`${d}:${e.icon}:${s}:${c}`;if(a.iconSignature!==p){if(a.prefix.replaceChildren(),a.prefix.hidden="none"===d||!["icon","number","question"].includes(d),a.prefix.className=`designbase-wc-accordion__${d}`,"number"===d)a.prefix.textContent=`${s+1}.`;else if("question"===d)a.prefix.textContent="Q.";else if("icon"===d){const t=e.icon;"string"==typeof t&&i(t)&&a.prefix.append(n(t,c))}a.iconSignature=p}if(!a.inner.hasAttribute("data-db-react-content")){const n=t.get(s)||[];for(const e of Array.from(a.inner.children))e===a.fallback||n.includes(e)||(this.stash??(this.stash=Object.assign(document.createElement("div"),{hidden:!0,inert:!0})),this.stash.parentElement||this.append(this.stash),this.stash.append(e));if(n.length){a.fallback?.remove();for(const e of n)l.add(e),e.parentElement!==a.inner&&a.inner.append(e)}else void 0!==e.content&&""!==e.content?(a.fallback??(a.fallback=Object.assign(document.createElement("p"),{className:"designbase-wc-accordion__content-text"})),a.fallback.dataset.dbGenerated="",a.fallback.textContent="string"==typeof e.content?e.content:String(e.content),a.fallback.parentElement!==a.inner&&a.inner.append(a.fallback)):a.fallback?.remove()}const m=h?h.nextElementSibling:this.firstElementChild;m!==a.wrapper&&this.insertBefore(a.wrapper,m),h=a.wrapper}for(const[e,t]of this.panels)if(!c.has(e)){for(const e of this.slotNodes)t.wrapper.contains(e)&&!l.has(e)&&(this.stash??(this.stash=Object.assign(document.createElement("div"),{hidden:!0,inert:!0})),this.stash.parentElement||this.append(this.stash),this.stash.append(e));t.wrapper.remove(),this.panels.delete(e)}for(const e of this.slotNodes)l.has(e)||(this.stash??(this.stash=Object.assign(document.createElement("div"),{hidden:!0,inert:!0})),this.stash.parentElement||this.append(this.stash),e.parentElement!==this.stash&&this.stash.append(e));const p=a.map(({key:e})=>[e,this.panels.get(e)]);this.panels.clear();for(const[e,t]of p)this.panels.set(e,t);if(this.syncExpandedState(),o instanceof HTMLElement&&o!==document.body&&document.activeElement!==o&&d>=0){const e=[...this.panels.values()].filter(e=>!e.trigger.disabled);!o.isConnected||o.closest("[inert]")||o instanceof HTMLButtonElement&&o.disabled?e[Math.min(d,e.length-1)]?.trigger.focus():o.focus()}}finally{this.rendering=!1}this.dispatchEvent(new Event("db-content-targets-change"))}}navigate(e,t){if(!["ArrowDown","ArrowUp","Home","End"].includes(e.key)||e.altKey||e.ctrlKey||e.metaKey)return;const s=[...this.panels.entries()].filter(([,e])=>!e.trigger.disabled),n=s.findIndex(([e])=>e===t);if(n<0)return;e.preventDefault();const i="Home"===e.key?0:"End"===e.key?s.length-1:(n+("ArrowDown"===e.key?1:-1)+s.length)%s.length;s[i]?.[1].trigger.focus()}toggle(e){if(!this.panels.get(e)?.trigger.disabled){this.expanded.has(e)?this.expanded.delete(e):"single"===this.expandMode?this.expanded=new Set([e]):this.expanded.add(e),this.syncExpandedState(),this.reflecting=!0;try{this.expandedItems=[...this.expanded]}finally{this.reflecting=!1}this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:[...this.expanded]},bubbles:!0,composed:!0}))}}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};

package/dist/esm/components/db-activity-heatmap.js

@@ -1 +1 @@
-import{dbText as e,getDbLocale as t}from"../core/i18n.js";import{sanitizeHref as a}from"../core/safe-url.js";import{ACTIVITY_HEATMAP_SIZES as s,ACTIVITY_HEATMAP_COLOR_SCHEMES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r="designbase-wc-activity-heatmap";class DbActivityHeatmap extends HTMLElement{constructor(){super(...arguments),this.handleClick=e=>{const t=e.target,a=t?.closest(`.${r}__cell`);if(!a||a.disabled)return;const s=a.dataset.date;if(!s)return;const n=Number(a.dataset.value??"0"),l=Number(a.dataset.level??"0");this.dispatchEvent(new CustomEvent("db-cell-click",{detail:{date:s,value:n,level:l},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["data","end-date","weeks","week-starts-on","size","locale","color-scheme","show-legend","show-month-labels","show-day-labels","legend-less-label","legend-more-label","value-label","max-value","footer-text","footer-href"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.render()}parseData(){const e=this.getAttribute("data");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&"string"==typeof e.date&&"number"==typeof e.value):[]}catch{return[]}}parseEndDate(){const e=this.getAttribute("end-date");if(e){const t=this.parseISODate(e);if(t)return t}const t=new Date;return new Date(t.getFullYear(),t.getMonth(),t.getDate())}parseISODate(e){const t=/^(\d{4})-(\d{2})-(\d{2})/.exec(e.trim());if(!t)return null;const a=Number(t[1]),s=Number(t[2]),n=Number(t[3]);return a&&s&&n?new Date(a,s-1,n):null}formatISODate(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}startOfWeek(e,t){const a=(e.getDay()-t+7)%7;return this.addDays(e,-a)}isAfter(e,t){return e.getTime()>t.getTime()}buildWeeks(e,t,a){const s=this.startOfWeek(e,a),n=this.addDays(s,7*-(t-1)),r=[];for(let e=0;e<t;e+=1){const t=[];for(let a=0;a<7;a+=1)t.push(this.addDays(n,7*e+a));r.push(t)}return r}resolveLevel(e,t,a){if(e<=0||t<=0)return 0;const s=e/t;return Math.min(a,Math.max(1,Math.ceil(s*a)))}formatMonthLabel(e,t){return new Intl.DateTimeFormat(t,{month:"short"}).format(e)}formatTooltip(e,t,a,s){const n=new Intl.DateTimeFormat(a,{year:"numeric",month:"long",day:"numeric"}).format(e);return t<=0?`${n}: 활동 없음`:`${n}: ${t.toLocaleString(a)}${s}`}getDayLabels(e,t){const a=Array.from({length:7},(a,s)=>{const n=new Date(2024,0,7+(e+s)%7);return new Intl.DateTimeFormat(t,{weekday:"short"}).format(n)}),s=1===e?[0,2,4,6]:[1,3,5,0];return a.map((e,t)=>s.includes(t)?e:"")}getMonthLabels(e,t){const a=e.map(e=>{const t=e.find(e=>e.getDate()<=7)??e[0];return t.getMonth()+12*t.getFullYear()}),s=e.map(()=>"");let n=0;for(;n<e.length;){const r=a[n];let l=n+1;for(;l<e.length&&a[l]===r;)l+=1;if(l-n>=2){const a=e[n],r=a.find(e=>e.getDate()<=7)??a[0];s[n]=this.formatMonthLabel(r,t)}n=l}return s}render(){const l=this.parseData(),o=new Map(l.map(e=>[e.date,e.value])),i=this.parseEndDate(),c=Math.max(1,Number(this.getAttribute("weeks")??"53")||53),d="0"===this.getAttribute("week-starts-on")?0:1,m=this.getAttribute("size")||"m",u=s.includes(m)?m:"m",h=this.getAttribute("locale")||("ko"===t()?"ko-KR":"en-US"),p=this.getAttribute("color-scheme")||"green",b=n.includes(p)?p:"green",g="false"!==this.getAttribute("show-legend"),f="false"!==this.getAttribute("show-month-labels"),_="false"!==this.getAttribute("show-day-labels"),v=this.getAttribute("legend-less-label")||"적음",$=this.getAttribute("legend-more-label")||"많음",E=this.getAttribute("value-label")||"회",A=this.getAttribute("footer-text")||"",D=this.getAttribute("footer-href")||"",y=this.getAttribute("max-value"),N=l.map(e=>e.value).filter(e=>e>0),k=N.length?Math.max(...N):0,w=y?Math.max(Number(y)||0,k):k,x=this.buildWeeks(i,c,d),C=this.getMonthLabels(x,h),M=this.getDayLabels(d,h);this.className=[r,`${r}--size-${u}`,`${r}--color-${b}`,g&&`${r}--with-legend`].filter(Boolean).join(" "),this.replaceChildren();const L=document.createElement("div");L.className=`${r}__viewport`;const S=document.createElement("div");if(S.className=`${r}__scroll-inner`,_){const e=document.createElement("div");e.className=`${r}__sticky-rail`;const t=document.createElement("div");t.className=`${r}__sticky-spacer`,f||t.classList.add(`${r}__sticky-spacer--hidden`);const a=document.createElement("div");a.className=`${r}__days`,a.setAttribute("aria-hidden","true"),M.forEach(e=>{const t=document.createElement("span");t.className=`${r}__day`,t.textContent=e,a.append(t)}),e.append(t,a),S.append(e)}const T=document.createElement("div");if(T.className=`${r}__grid-area`,f){const e=document.createElement("div");e.className=`${r}__months`,e.setAttribute("aria-hidden","true"),C.forEach(t=>{const a=document.createElement("span");a.className=`${r}__month`,a.textContent=t,e.append(a)}),T.append(e)}const I=document.createElement("div");if(I.className=`${r}__weeks`,I.setAttribute("role","grid"),I.setAttribute("aria-label",e("활동 히트맵")),x.forEach(e=>{const t=document.createElement("div");t.className=`${r}__week`,t.setAttribute("role","row"),e.forEach(e=>{const a=this.formatISODate(e),s=this.isAfter(e,i),n=s?0:o.get(a)??0,l=s?0:this.resolveLevel(n,w,4),c=document.createElement("button");c.type="button",c.className=[`${r}__cell`,`${r}__cell--level-${l}`,s&&`${r}__cell--future`].filter(Boolean).join(" "),c.dataset.date=a,c.dataset.value=String(n),c.dataset.level=String(l),c.title=this.formatTooltip(e,n,h,E),c.setAttribute("aria-label",this.formatTooltip(e,n,h,E)),c.disabled=s,t.append(c)}),I.append(t)}),T.append(I),S.append(T),L.append(S),this.append(L),g||A){const e=document.createElement("div");if(e.className=`${r}__footer`,A)if(D){const t=document.createElement("a");t.className=`${r}__footer-link`,t.href=a(D,"#"),t.textContent=A,e.append(t)}else{const t=document.createElement("span");t.className=`${r}__footer-text`,t.textContent=A,e.append(t)}else e.append(document.createElement("span"));if(g){const t=document.createElement("div");t.className=`${r}__legend`,t.setAttribute("aria-hidden","true");const a=document.createElement("span");a.className=`${r}__legend-label`,a.textContent=v;const s=document.createElement("div");s.className=`${r}__legend-scale`;for(let e=0;e<=4;e+=1){const t=document.createElement("span");t.className=`${r}__legend-cell ${r}__legend-cell--level-${e}`,s.append(t)}const n=document.createElement("span");n.className=`${r}__legend-label`,n.textContent=$,t.append(a,s,n),e.append(t)}this.append(e)}}}customElements.get("db-activity-heatmap")||customElements.define("db-activity-heatmap",DbActivityHeatmap);export{DbActivityHeatmap};
+import{getDbLocale as e,dbText as t}from"../core/i18n.js";import{sanitizeHref as a}from"../core/safe-url.js";import{ACTIVITY_HEATMAP_SIZES as s,ACTIVITY_HEATMAP_COLOR_SCHEMES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r="designbase-wc-activity-heatmap";class DbActivityHeatmap extends HTMLElement{constructor(){super(...arguments),this.handleClick=e=>{const t=e.target,a=t?.closest(`.${r}__cell`);if(!a||a.disabled)return;const s=a.dataset.date;if(!s)return;const n=Number(a.dataset.value??"0"),l=Number(a.dataset.level??"0");this.dispatchEvent(new CustomEvent("db-cell-click",{detail:{date:s,value:n,level:l},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["data","end-date","weeks","week-starts-on","size","locale","color-scheme","show-legend","show-month-labels","show-day-labels","legend-less-label","legend-more-label","value-label","max-value","footer-text","footer-href"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(){this.render()}parseData(){const e=this.getAttribute("data");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&"string"==typeof e.date&&"number"==typeof e.value):[]}catch{return[]}}parseEndDate(){const e=this.getAttribute("end-date");if(e){const t=this.parseISODate(e);if(t)return t}const t=new Date;return new Date(t.getFullYear(),t.getMonth(),t.getDate())}parseISODate(e){const t=/^(\d{4})-(\d{2})-(\d{2})/.exec(e.trim());if(!t)return null;const a=Number(t[1]),s=Number(t[2]),n=Number(t[3]);return a&&s&&n?new Date(a,s-1,n):null}formatISODate(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}startOfWeek(e,t){const a=(e.getDay()-t+7)%7;return this.addDays(e,-a)}isAfter(e,t){return e.getTime()>t.getTime()}buildWeeks(e,t,a){const s=this.startOfWeek(e,a),n=this.addDays(s,7*-(t-1)),r=[];for(let e=0;e<t;e+=1){const t=[];for(let a=0;a<7;a+=1)t.push(this.addDays(n,7*e+a));r.push(t)}return r}resolveLevel(e,t,a){if(e<=0||t<=0)return 0;const s=e/t;return Math.min(a,Math.max(1,Math.ceil(s*a)))}formatMonthLabel(e,t){return new Intl.DateTimeFormat(t,{month:"short"}).format(e)}formatTooltip(e,t,a,s){const n=new Intl.DateTimeFormat(a,{year:"numeric",month:"long",day:"numeric"}).format(e);return t<=0?`${n}: 활동 없음`:`${n}: ${t.toLocaleString(a)}${s}`}getDayLabels(e,t){const a=Array.from({length:7},(a,s)=>{const n=new Date(2024,0,7+(e+s)%7);return new Intl.DateTimeFormat(t,{weekday:"short"}).format(n)}),s=1===e?[0,2,4,6]:[1,3,5,0];return a.map((e,t)=>s.includes(t)?e:"")}getMonthLabels(e,t){const a=e.map(e=>{const t=e.find(e=>e.getDate()<=7)??e[0];return t.getMonth()+12*t.getFullYear()}),s=e.map(()=>"");let n=0;for(;n<e.length;){const r=a[n];let l=n+1;for(;l<e.length&&a[l]===r;)l+=1;if(l-n>=2){const a=e[n],r=a.find(e=>e.getDate()<=7)??a[0];s[n]=this.formatMonthLabel(r,t)}n=l}return s}render(){const l=this.parseData(),o=new Map(l.map(e=>[e.date,e.value])),i=this.parseEndDate(),c=Math.max(1,Number(this.getAttribute("weeks")??"53")||53),d="0"===this.getAttribute("week-starts-on")?0:1,m=this.getAttribute("size")||"m",u=s.includes(m)?m:"m",h=this.getAttribute("locale")||("ko"===e()?"ko-KR":"en-US"),p=this.getAttribute("color-scheme")||"green",b=n.includes(p)?p:"green",g="false"!==this.getAttribute("show-legend"),f="false"!==this.getAttribute("show-month-labels"),_="false"!==this.getAttribute("show-day-labels"),v=this.getAttribute("legend-less-label")||"적음",$=this.getAttribute("legend-more-label")||"많음",E=this.getAttribute("value-label")||"회",A=this.getAttribute("footer-text")||"",D=this.getAttribute("footer-href")||"",y=this.getAttribute("max-value"),N=l.map(e=>e.value).filter(e=>e>0),k=N.length?Math.max(...N):0,w=y?Math.max(Number(y)||0,k):k,x=this.buildWeeks(i,c,d),C=this.getMonthLabels(x,h),M=this.getDayLabels(d,h);this.className=[r,`${r}--size-${u}`,`${r}--color-${b}`,g&&`${r}--with-legend`].filter(Boolean).join(" "),this.replaceChildren();const L=document.createElement("div");L.className=`${r}__viewport`;const S=document.createElement("div");if(S.className=`${r}__scroll-inner`,_){const e=document.createElement("div");e.className=`${r}__sticky-rail`;const t=document.createElement("div");t.className=`${r}__sticky-spacer`,f||t.classList.add(`${r}__sticky-spacer--hidden`);const a=document.createElement("div");a.className=`${r}__days`,a.setAttribute("aria-hidden","true"),M.forEach(e=>{const t=document.createElement("span");t.className=`${r}__day`,t.textContent=e,a.append(t)}),e.append(t,a),S.append(e)}const T=document.createElement("div");if(T.className=`${r}__grid-area`,f){const e=document.createElement("div");e.className=`${r}__months`,e.setAttribute("aria-hidden","true"),C.forEach(t=>{const a=document.createElement("span");a.className=`${r}__month`,a.textContent=t,e.append(a)}),T.append(e)}const I=document.createElement("div");if(I.className=`${r}__weeks`,I.setAttribute("role","grid"),I.setAttribute("aria-label",t("활동 히트맵")),x.forEach(e=>{const t=document.createElement("div");t.className=`${r}__week`,t.setAttribute("role","row"),e.forEach(e=>{const a=this.formatISODate(e),s=this.isAfter(e,i),n=s?0:o.get(a)??0,l=s?0:this.resolveLevel(n,w,4),c=document.createElement("button");c.type="button",c.className=[`${r}__cell`,`${r}__cell--level-${l}`,s&&`${r}__cell--future`].filter(Boolean).join(" "),c.dataset.date=a,c.dataset.value=String(n),c.dataset.level=String(l),c.title=this.formatTooltip(e,n,h,E),c.setAttribute("aria-label",this.formatTooltip(e,n,h,E)),c.disabled=s,t.append(c)}),I.append(t)}),T.append(I),S.append(T),L.append(S),this.append(L),g||A){const e=document.createElement("div");if(e.className=`${r}__footer`,A)if(D){const t=document.createElement("a");t.className=`${r}__footer-link`,t.href=a(D,"#"),t.textContent=A,e.append(t)}else{const t=document.createElement("span");t.className=`${r}__footer-text`,t.textContent=A,e.append(t)}else e.append(document.createElement("span"));if(g){const t=document.createElement("div");t.className=`${r}__legend`,t.setAttribute("aria-hidden","true");const a=document.createElement("span");a.className=`${r}__legend-label`,a.textContent=v;const s=document.createElement("div");s.className=`${r}__legend-scale`;for(let e=0;e<=4;e+=1){const t=document.createElement("span");t.className=`${r}__legend-cell ${r}__legend-cell--level-${e}`,s.append(t)}const n=document.createElement("span");n.className=`${r}__legend-label`,n.textContent=$,t.append(a,s,n),e.append(t)}this.append(e)}}}customElements.get("db-activity-heatmap")||customElements.define("db-activity-heatmap",DbActivityHeatmap);export{DbActivityHeatmap};

package/dist/esm/components/db-ai-file-tree.js

@@ -1 +1 @@
-import{t as e}from"../core/i18n.js";import{DbAiDataElement as i,aiNode as t}from"../core/ai-element.js";class DbAiFileTree extends i{static get observedAttributes(){return["label","items","disabled"]}view(){const build=(i,s=[])=>{const l=t("ul","designbase-wc-ai__files","");for(const e of i){const i=document.createElement("li");if(e.children){const t=this.disclosure(`folder:${[...s,e.id].map(encodeURIComponent).join("/")}`,e.label,"complete",[build(e.children,[...s,e.id])],!0,"folder"),l=t.querySelector(".designbase-wc-ai__icon");l?.removeAttribute("aria-label"),l?.setAttribute("aria-hidden","true");const r=t.querySelector("summary"),n=r.lastElementChild;n.classList.add("designbase-wc-ai__folder-chevron"),r.prepend(n),i.append(t)}else i.append(this.button("file-open",e.label,"file-new",e.id));l.append(i)}return i.length||l.append(t("li","designbase-wc-ai__empty-folder",e("aiElement.emptyFolder"))),l};if(!this.rows.length)return[t("p","designbase-wc-ai__description",e("aiElement.noFiles"))];const i=t("div","designbase-wc-ai__file-tree","");return i.setAttribute("aria-label",this.attr("label","files")),i.append(build(this.rows)),[i]}}customElements.get("db-ai-file-tree")||customElements.define("db-ai-file-tree",DbAiFileTree);export{DbAiFileTree};
+import{t as e}from"../core/i18n.js";import{DbAiDataElement as t,aiNode as i}from"../core/ai-element.js";class DbAiFileTree extends t{static get observedAttributes(){return["label","items","disabled","selected-id"]}view(){const build=(t,r=[])=>{const s=i("ul","designbase-wc-ai__files","");for(const e of t){const t=document.createElement("li");if(e.children){const i=this.disclosure(`folder:${[...r,e.id].map(encodeURIComponent).join("/")}`,e.label,"complete",[build(e.children,[...r,e.id])],!0,"folder"),s=i.querySelector(".designbase-wc-ai__icon");s?.removeAttribute("aria-label"),s?.setAttribute("aria-hidden","true");const l=i.querySelector("summary"),n=l.lastElementChild;n.classList.add("designbase-wc-ai__folder-chevron"),l.prepend(n),t.append(i)}else{const i=this.button("file-open",e.label,"file-new",e.id);e.id===this.getAttribute("selected-id")&&(i.setAttribute("variant","secondary"),i.setAttribute("aria-current","true")),t.append(i)}s.append(t)}return t.length||s.append(i("li","designbase-wc-ai__empty-folder",e("aiElement.emptyFolder"))),s};if(!this.rows.length)return[i("p","designbase-wc-ai__description",e("aiElement.noFiles"))];const t=i("div","designbase-wc-ai__file-tree","");return t.setAttribute("aria-label",this.attr("label","files")),t.append(build(this.rows)),[t]}}customElements.get("db-ai-file-tree")||customElements.define("db-ai-file-tree",DbAiFileTree);export{DbAiFileTree};

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{AVATAR_SIZES as e,AVATAR_VARIANTS as a,AVATAR_STATUSES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i=["#E3F2FD","#F3E5F5","#E8F5E8","#FFF3E0","#FCE4EC","#E0F2F1","#FFF8E1","#F1F8E9","#E8EAF6","#FFEBEE"],n=["#1976D2","#7B1FA2","#388E3C","#F57C00","#C2185B","#00796B","#F9A825","#689F38","#3F51B5","#D32F2F"];class DbAvatar extends HTMLElement{constructor(){super(...arguments),this.imageFailed=!1,this.imageLoaded=!1,this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","initials","size","variant","status","disabled","clickable","badge","badge-max-count","badge-variant","badge-type","badge-text"]}connectedCallback(){this.render(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"src"===t&&(this.imageFailed=!1,this.imageLoaded=!1),this.render()}render(){const r=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",d=a.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",c=this.hasAttribute("disabled"),l=this.hasAttribute("clickable"),o=this.getAttribute("src"),b=this.getAttribute("initials")||"",h=Boolean(o&&!this.imageFailed),u=h&&!this.imageLoaded;if(this.className=["designbase-wc-avatar",`designbase-wc-avatar--${r}`,`designbase-wc-avatar--${d}`,l&&"designbase-wc-avatar--clickable",c&&"designbase-wc-avatar--disabled",u&&"designbase-wc-avatar--loading"].filter(Boolean).join(" "),l&&!c?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.toggleAttribute("aria-disabled",c),this.replaceChildren(),u){const t=document.createElement("div");t.className="designbase-wc-avatar__loading";const e=document.createElement("div");e.className="designbase-wc-avatar__skeleton",t.append(e),this.append(t)}if(h){const t=document.createElement("img");t.className="designbase-wc-avatar__image",t.src=o,t.alt=this.getAttribute("alt")||"아바타 이미지",t.loading="lazy",t.addEventListener("load",()=>{this.imageLoaded=!0,this.classList.remove("designbase-wc-avatar--loading"),this.querySelector(".designbase-wc-avatar__loading")?.remove()}),t.addEventListener("error",()=>{this.imageFailed=!0,this.imageLoaded=!1,this.render()}),this.append(t)}else if(b){const t=document.createElement("div");if(t.className="designbase-wc-avatar__initials","default"===d){const e=function initialsColor(t){let e=0;for(let a=0;a<t.length;a++)e=t.charCodeAt(a)+((e<<5)-e);const a=Math.abs(e)%i.length;return{backgroundColor:i[a],color:n[a]}}(b);t.style.backgroundColor=e.backgroundColor,t.style.color=e.color}t.textContent=b.charAt(0).toUpperCase(),this.append(t)}else{const e=document.createElement("div");e.className="designbase-wc-avatar__icon",e.append(t("user",function iconSize(t){return"xs"===t?12:"s"===t?16:"m"===t?20:"l"===t?24:"xl"===t?32:40}(r))),this.append(e)}const g=this.getAttribute("status")||"";if(s.includes(g)){const t=document.createElement("span");t.className=`designbase-wc-avatar__status designbase-wc-avatar__status--${g}`,this.append(t)}if(this.hasAttribute("badge")){const t=document.createElement("div");t.className="designbase-wc-avatar__badge";const e=document.createElement("db-badge");e.setAttribute("count",this.getAttribute("badge")||"0");const a=this.getAttribute("badge-type")||"number";e.setAttribute("type",a),this.hasAttribute("badge-max-count")&&e.setAttribute("max-count",this.getAttribute("badge-max-count")),e.setAttribute("variant",this.getAttribute("badge-variant")||"danger"),this.hasAttribute("badge-text")&&(e.textContent=this.getAttribute("badge-text"));const s="xl"===r||"2xl"===r?"m":"s";e.setAttribute("size",s),t.append(e),this.append(t)}}}customElements.get("db-avatar")||customElements.define("db-avatar",DbAvatar);export{DbAvatar};
+import{setHostClasses as t}from"../core/host-class.js";import{createDbIcon as e}from"./db-icons.js";import{AVATAR_SIZES as a,AVATAR_VARIANTS as s,AVATAR_STATUSES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n=["#E3F2FD","#F3E5F5","#E8F5E8","#FFF3E0","#FCE4EC","#E0F2F1","#FFF8E1","#F1F8E9","#E8EAF6","#FFEBEE"],r=["#1976D2","#7B1FA2","#388E3C","#F57C00","#C2185B","#00796B","#F9A825","#689F38","#3F51B5","#D32F2F"];class DbAvatar extends HTMLElement{constructor(){super(...arguments),this.imageFailed=!1,this.imageLoaded=!1,this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","initials","size","variant","status","disabled","clickable","badge","badge-max-count","badge-variant","badge-type","badge-text"]}connectedCallback(){this.render(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"src"===t&&(this.imageFailed=!1,this.imageLoaded=!1),this.render()}render(){const d=a.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",c=s.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",l=this.hasAttribute("disabled"),o=this.hasAttribute("clickable"),b=this.getAttribute("src"),h=this.getAttribute("initials")||"",u=Boolean(b&&!this.imageFailed),g=u&&!this.imageLoaded,m=["designbase-wc-avatar",`designbase-wc-avatar--${d}`,`designbase-wc-avatar--${c}`,o&&"designbase-wc-avatar--clickable",l&&"designbase-wc-avatar--disabled",g&&"designbase-wc-avatar--loading"];if(t(this,m),o&&!l?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.toggleAttribute("aria-disabled",l),this.replaceChildren(),g){const t=document.createElement("div");t.className="designbase-wc-avatar__loading";const e=document.createElement("div");e.className="designbase-wc-avatar__skeleton",t.append(e),this.append(t)}if(u){const e=document.createElement("img");e.className="designbase-wc-avatar__image",e.src=b,e.alt=this.getAttribute("alt")||"아바타 이미지",e.loading="lazy",e.addEventListener("load",()=>{this.imageLoaded=!0,t(this,m.filter(t=>"designbase-wc-avatar--loading"!==t)),this.querySelector(".designbase-wc-avatar__loading")?.remove()}),e.addEventListener("error",()=>{this.imageFailed=!0,this.imageLoaded=!1,this.render()}),this.append(e)}else if(h){const t=document.createElement("div");if(t.className="designbase-wc-avatar__initials","default"===c){const e=function initialsColor(t){let e=0;for(let a=0;a<t.length;a++)e=t.charCodeAt(a)+((e<<5)-e);const a=Math.abs(e)%n.length;return{backgroundColor:n[a],color:r[a]}}(h);t.style.backgroundColor=e.backgroundColor,t.style.color=e.color}t.textContent=h.charAt(0).toUpperCase(),this.append(t)}else{const t=document.createElement("div");t.className="designbase-wc-avatar__icon",t.append(e("user",function iconSize(t){return"xs"===t?12:"s"===t?16:"m"===t?20:"l"===t?24:"xl"===t?32:40}(d))),this.append(t)}const v=this.getAttribute("status")||"";if(i.includes(v)){const t=document.createElement("span");t.className=`designbase-wc-avatar__status designbase-wc-avatar__status--${v}`,this.append(t)}if(this.hasAttribute("badge")){const t=document.createElement("div");t.className="designbase-wc-avatar__badge";const e=document.createElement("db-badge");e.setAttribute("count",this.getAttribute("badge")||"0");const a=this.getAttribute("badge-type")||"number";e.setAttribute("type",a),this.hasAttribute("badge-max-count")&&e.setAttribute("max-count",this.getAttribute("badge-max-count")),e.setAttribute("variant",this.getAttribute("badge-variant")||"danger"),this.hasAttribute("badge-text")&&(e.textContent=this.getAttribute("badge-text"));const s="xl"===d||"2xl"===d?"m":"s";e.setAttribute("size",s),t.append(e),this.append(t)}}}customElements.get("db-avatar")||customElements.define("db-avatar",DbAvatar);export{DbAvatar};

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

@@ -5,6 +5,17 @@
  * their renderer. This keeps React/Vue slots stable while sharing one element.
  */
 declare class DbButton extends HTMLElement {
+    static readonly formAssociated = true;
+    private readonly internals;
+    private formDisabled;
+    private spacePressed;
+    private syncing;
+    private pendingSync;
+    private managedLoadingLabel;
+    private actionEpoch;
+    private implicitSubmitter?;
+    private childObserver?;
+    private desiredTabIndex;
     static get observedAttributes(): string[];
     /**
      * 계약에 없는 값이 attribute 로 들어오면 기본값으로 되돌린다 — throw 하지 않는다.
@@ -21,6 +32,24 @@ declare class DbButton extends HTMLElement {
     set accentStyle(value: string);
     get type(): string;
     set type(value: string);
+    get form(): HTMLFormElement | null;
+    get name(): string;
+    set name(value: string);
+    get value(): string;
+    set value(value: string);
+    get formNoValidate(): boolean;
+    set formNoValidate(value: boolean);
+    get formAction(): string;
+    set formAction(value: string);
+    get formMethod(): string;
+    set formMethod(value: string);
+    get formEnctype(): string;
+    set formEnctype(value: string);
+    get formTarget(): string;
+    set formTarget(value: string);
+    private get blocked();
+    formDisabledCallback(disabled: boolean): void;
+    click(): void;
     get href(): string;
     set href(value: string);
     get loadingText(): string;
@@ -35,14 +64,17 @@ declare class DbButton extends HTMLElement {
     set fullWidth(value: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name?: string, oldValue?: string | null, value?: string | null): void;
     private handleClick;
+    private followLink;
     private handleKeyDown;
     private handleKeyUp;
+    private handleBlur;
     private handlePointerDown;
     private handlePointerUp;
     private syncAttributes;
     private getIconSize;
+    private syncImplicitSubmitter;
     private resolveIconName;
     private isManagedIconNode;
     private syncIcons;

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

@@ -1 +1 @@
-import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceWithAliases as i,coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BUTTON_RADII as r,BUTTON_SIZES as a,BUTTON_ACCENT_STYLES as c,BUTTON_VARIANTS as o,BUTTON_VARIANT_ALIASES as d}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l=["disabled","loading","icon-only","full-width"];class DbButton 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}));const e=this.href;if(e){"_blank"===(this.getAttribute("target")||"_self")?window.open(e,"_blank","noopener,noreferrer"):window.location.assign(e)}},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed"),this.click())},this.handleKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.classList.remove("designbase-wc-button--pressed")},this.handlePointerDown=()=>{this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed")},this.handlePointerUp=()=>{this.classList.remove("designbase-wc-button--pressed")}}static get observedAttributes(){return["variant","size","radius","accent-style","type","href","loading-text","start-icon","end-icon",...l]}get variant(){return i(this.getAttribute("variant"),o,d,"primary")}set variant(t){this.setAttribute("variant",t)}get size(){return n(this.getAttribute("size"),a,"m")}set size(t){this.setAttribute("size",t)}get radius(){const t=this.getAttribute("radius");return t?n(t,r,r[0]):""}set radius(t){t?this.setAttribute("radius",t):this.removeAttribute("radius")}get accentStyle(){return n(this.getAttribute("accent-style"),c,"solid")}set accentStyle(t){t?this.setAttribute("accent-style",t):this.removeAttribute("accent-style")}get type(){return this.getAttribute("type")||"button"}set type(t){this.setAttribute("type",t)}get href(){return s(this.getAttribute("href"),"")}set href(t){t?this.setAttribute("href",t):this.removeAttribute("href")}get loadingText(){return this.getAttribute("loading-text")||""}set loadingText(t){t?this.setAttribute("loading-text",t):this.removeAttribute("loading-text")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get iconOnly(){return this.hasAttribute("icon-only")}set iconOnly(t){this.toggleAttribute("icon-only",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",t)}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("keyup",this.handleKeyUp),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointerleave",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.syncAttributes()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointerleave",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){this.syncAttributes()}syncAttributes(){this.classList.add("designbase-wc-button"),this.setAttribute("role","button"),this.setAttribute("aria-disabled",String(this.disabled||this.loading)),this.loading?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.disabled||this.loading?this.removeAttribute("tabindex"):this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.syncModifier("variant",this.variant),this.syncModifier("size",this.size),this.syncRadius(),this.syncAccentStyle(),this.syncAccentField(),this.syncAccentRing(),this.syncBooleanModifier("disabled"),this.syncBooleanModifier("icon-only"),this.syncBooleanModifier("full-width"),this.syncLoadingVisual(),this.loading?(this.querySelector(":scope > .designbase-wc-button__start-icon")?.remove(),this.querySelector(":scope > .designbase-wc-button__end-icon")?.remove()):this.syncIcons()}getIconSize(){return"s"===this.size?16:"l"===this.size?24:20}resolveIconName(e){if(e&&t(e))return e}isManagedIconNode(t){return t instanceof HTMLElement&&(t.classList.contains("designbase-wc-button__start-icon")||t.classList.contains("designbase-wc-button__end-icon")||t.classList.contains("designbase-wc-button__spinner")||t.classList.contains("designbase-wc-button__accent-field")||t.classList.contains("designbase-wc-button__accent-glass")||t.classList.contains("designbase-wc-button__accent-orb")||t.classList.contains("designbase-wc-button__accent-ring"))}syncIcons(){const t=this.resolveIconName(this.getAttribute("start-icon")),s=this.resolveIconName(this.getAttribute("end-icon")),i=this.getIconSize();let n=this.querySelector(":scope > .designbase-wc-button__start-icon");if(t){if(!n){n=document.createElement("span"),n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true");const t=Array.from(this.childNodes).find(t=>!this.isManagedIconNode(t));t?this.insertBefore(n,t):this.append(n)}n.replaceChildren(e(t,i))}else n?.remove();let r=this.querySelector(":scope > .designbase-wc-button__end-icon");s?(r||(r=document.createElement("span"),r.className="designbase-wc-button__end-icon",r.setAttribute("aria-hidden","true")),r.replaceChildren(e(s,i)),this.append(r)):r?.remove()}getDefaultRadiusClass(){if(r.includes(this.radius))return`designbase-wc-button--radius-${this.radius}`;const t=a.includes(this.size)?this.size:"m";return`designbase-wc-button--radius-${"s"===t||"l"===t?t:"m"}`}syncRadius(){r.forEach(t=>this.classList.remove(`designbase-wc-button--radius-${t}`)),this.classList.add(this.getDefaultRadiusClass())}syncAccentStyle(){if(c.forEach(t=>this.classList.remove(`designbase-wc-button--accent-${t}`)),"accent"!==this.variant)return;const t=this.accentStyle,e=c.includes(t)?t:"solid";this.classList.add(`designbase-wc-button--accent-${e}`)}syncAccentRing(){const t="accent"===this.variant&&["outline","prism"].includes(this.accentStyle),e=this.querySelector(":scope > .designbase-wc-button__accent-ring");if(!t)return void e?.remove();if(e)return;const s=document.createElement("span");s.className="designbase-wc-button__accent-ring",s.setAttribute("aria-hidden","true");const i=document.createElement("span");i.className="designbase-wc-button__accent-ring-spin",s.appendChild(i),this.insertBefore(s,this.firstChild)}syncAccentField(){const t="accent"===this.variant&&"gradient"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-field"),s=this.querySelector(":scope > .designbase-wc-button__accent-glass");if(!t)return e?.remove(),void s?.remove();let i=e;if(!i){i=document.createElement("span"),i.className="designbase-wc-button__accent-field",i.setAttribute("aria-hidden","true");for(let t=1;t<=5;t+=1){const e=document.createElement("span");e.className=`designbase-wc-button__accent-orb designbase-wc-button__accent-orb--${t}`,i.appendChild(e)}this.insertBefore(i,this.firstChild)}if(!s){const t=document.createElement("span");t.className="designbase-wc-button__accent-glass",t.setAttribute("aria-hidden","true"),i.insertAdjacentElement("afterend",t)}}syncModifier(t,e){if(Array.from(this.classList).filter(e=>e.startsWith(`designbase-wc-button--${t}-`)).forEach(t=>this.classList.remove(t)),"variant"===t||"size"===t){("variant"===t?o:a).forEach(t=>this.classList.remove(`designbase-wc-button--${t}`)),this.classList.add(`designbase-wc-button--${e}`)}}syncBooleanModifier(t){const e=`designbase-wc-button--${t}`;this.classList.toggle(e,this.hasAttribute(t))}getSpinnerSize(){return a.includes(this.size)?this.size:"m"}syncLoadingVisual(){this.classList.toggle("designbase-wc-button--loading",this.loading);const t=this.querySelector(":scope > .designbase-wc-button__spinner");if(!this.loading)return void t?.remove();const e=`designbase-wc-button__spinner designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${this.getSpinnerSize()}`;if(t)return t.className=e,void t.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=e,s.setAttribute("aria-hidden","true"),s.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>',this.insertBefore(s,this.firstChild)}}customElements.get("db-button")||customElements.define("db-button",DbButton);export{DbButton};
+import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";import{sanitizeHref as i}from"../core/safe-url.js";import{coerceWithAliases as s,coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BUTTON_RADII as r,BUTTON_SIZES as a,BUTTON_ACCENT_STYLES as o,BUTTON_VARIANTS as c,BUTTON_VARIANT_ALIASES as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const d=["disabled","loading","icon-only","full-width"];class DbButton extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formDisabled=!1,this.spacePressed=!1,this.syncing=!1,this.pendingSync=!1,this.managedLoadingLabel=null,this.actionEpoch=0,this.desiredTabIndex=null,this.handleClick=t=>{if(t.target!==this&&t.target instanceof Element&&t.target.closest('button,a,input,select,textarea,[contenteditable="true"]'))return;if(this.blocked)return t.preventDefault(),void t.stopImmediatePropagation();if(t.defaultPrevented)return;const e=this.actionEpoch,i=new CustomEvent("db-click",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i),setTimeout(()=>{if(e!==this.actionEpoch||t.defaultPrevented||i.defaultPrevented||this.blocked||!this.isConnected)return;if(this.href)return void this.followLink(t);const s=this.form;if(!s)return;if("reset"===this.type)return void HTMLFormElement.prototype.reset.call(s);if("submit"!==this.type)return;const n=document.createElement("button");n.type="submit",n.hidden=!0,n.tabIndex=-1,n.name=this.name,n.value=this.value;for(const t of["formaction","formmethod","formenctype","formtarget","formnovalidate"])this.hasAttribute(t)&&n.setAttribute(t,this.getAttribute(t));n.setAttribute("data-db-submitter",""),s.append(n);try{HTMLFormElement.prototype.requestSubmit.call(s,n)}finally{n.remove()}},0)},this.handleKeyDown=t=>{t.target!==this||t.defaultPrevented||t.isComposing||"Enter"!==t.key&&" "!==t.key||this.href&&" "===t.key||(t.preventDefault(),this.blocked||t.repeat||(this.classList.add("designbase-wc-button--pressed")," "===t.key?this.spacePressed=!0:this.click()))},this.handleKeyUp=t=>{if(t.target!==this||"Enter"!==t.key&&" "!==t.key)return;const e=" "===t.key&&this.spacePressed&&!t.defaultPrevented&&!this.blocked;this.handleBlur(),e&&(t.preventDefault(),this.click())},this.handleBlur=()=>{this.spacePressed=!1,this.classList.remove("designbase-wc-button--pressed")},this.handlePointerDown=()=>{this.blocked||this.classList.add("designbase-wc-button--pressed")},this.handlePointerUp=()=>{this.classList.remove("designbase-wc-button--pressed")}}static get observedAttributes(){return["variant","size","radius","accent-style","type","href","loading-text","start-icon","end-icon","tabindex","aria-label","aria-labelledby","form","name","value","formaction","formmethod","formenctype","formtarget","formnovalidate","target","rel","download",...d]}get variant(){return s(this.getAttribute("variant"),c,l,"primary")}set variant(t){this.setAttribute("variant",t)}get size(){return n(this.getAttribute("size"),a,"m")}set size(t){this.setAttribute("size",t)}get radius(){const t=this.getAttribute("radius");return t?n(t,r,r[0]):""}set radius(t){t?this.setAttribute("radius",t):this.removeAttribute("radius")}get accentStyle(){return n(this.getAttribute("accent-style"),o,"solid")}set accentStyle(t){t?this.setAttribute("accent-style",t):this.removeAttribute("accent-style")}get type(){const t=this.getAttribute("type")?.toLowerCase();return"submit"===t||"reset"===t?t:"button"}set type(t){this.setAttribute("type",t)}get form(){return this.internals.form}get name(){return this.getAttribute("name")||""}set name(t){this.setAttribute("name",t)}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get formNoValidate(){return this.hasAttribute("formnovalidate")}set formNoValidate(t){this.toggleAttribute("formnovalidate",t)}get formAction(){return this.getAttribute("formaction")||""}set formAction(t){this.setAttribute("formaction",t)}get formMethod(){return this.getAttribute("formmethod")||""}set formMethod(t){this.setAttribute("formmethod",t)}get formEnctype(){return this.getAttribute("formenctype")||""}set formEnctype(t){this.setAttribute("formenctype",t)}get formTarget(){return this.getAttribute("formtarget")||""}set formTarget(t){this.setAttribute("formtarget",t)}get blocked(){return this.disabled||this.loading||this.formDisabled}formDisabledCallback(t){this.formDisabled!==t&&(this.formDisabled=t,this.syncing?this.pendingSync=!0:this.syncAttributes())}click(){this.blocked||super.click()}get href(){return i(this.getAttribute("href"),"")}set href(t){t?this.setAttribute("href",t):this.removeAttribute("href")}get loadingText(){return this.getAttribute("loading-text")||""}set loadingText(t){t?this.setAttribute("loading-text",t):this.removeAttribute("loading-text")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get iconOnly(){return this.hasAttribute("icon-only")}set iconOnly(t){this.toggleAttribute("icon-only",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",t)}connectedCallback(){for(const t of["variant","size","radius","accentStyle","type","href","loadingText","disabled","loading","iconOnly","fullWidth","name","value","formNoValidate","formAction","formMethod","formEnctype","formTarget"])if(Object.prototype.hasOwnProperty.call(this,t)){const e=this[t];delete this[t],this[t]=e}this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("keyup",this.handleKeyUp),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointerleave",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.addEventListener("blur",this.handleBlur),this.syncAttributes(),this.childObserver??(this.childObserver=new MutationObserver(t=>{t.some(t=>Array.from(t.removedNodes).some(t=>this.isManagedIconNode(t)&&t.parentNode!==this))&&this.syncAttributes()})),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.actionEpoch++,this.childObserver?.disconnect(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointerleave",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp),this.removeEventListener("blur",this.handleBlur),this.handleBlur()}attributeChangedCallback(t,e,i){this.syncing||t&&e===i||("tabindex"===t&&(this.desiredTabIndex=i??null),"aria-label"===t&&i!==this.managedLoadingLabel&&(this.managedLoadingLabel=null),this.syncAttributes())}followLink(t){const e=document.createElement("a");e.href=this.href,e.hidden=!0;for(const t of["target","download","rel"])this.hasAttribute(t)&&e.setAttribute(t,this.getAttribute(t));"_blank"===e.target&&(e.rel=`${e.rel} noopener noreferrer`.trim()),document.body.append(e);try{e.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,ctrlKey:t.ctrlKey,metaKey:t.metaKey,shiftKey:t.shiftKey,altKey:t.altKey,button:t.button}))}finally{e.remove()}}syncAttributes(){if(!this.syncing){this.syncing=!0;try{this.classList.add("designbase-wc-button"),this.setAttribute("role",this.href?"link":"button"),this.setAttribute("aria-disabled",String(this.blocked)),this.loading?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.setAttribute("tabindex",this.blocked?"-1":this.desiredTabIndex??"0"),this.blocked&&(this.actionEpoch++,this.handleBlur()),this.syncModifier("variant",this.variant),this.syncModifier("size",this.size),this.syncRadius(),this.syncAccentStyle(),this.syncAccentField(),this.syncAccentRing(),this.syncBooleanModifier("disabled"),this.classList.toggle("designbase-wc-button--disabled",this.disabled||this.formDisabled),this.syncBooleanModifier("icon-only"),this.syncBooleanModifier("full-width"),this.syncLoadingVisual(),this.syncImplicitSubmitter(),this.loading?(this.querySelector(":scope > .designbase-wc-button__start-icon")?.remove(),this.querySelector(":scope > .designbase-wc-button__end-icon")?.remove()):this.syncIcons()}finally{this.syncing=!1,this.pendingSync&&(this.pendingSync=!1,this.syncAttributes())}}}getIconSize(){return"s"===this.size?16:"l"===this.size?24:20}syncImplicitSubmitter(){if("submit"!==this.type||this.href)return this.implicitSubmitter?.remove(),void(this.implicitSubmitter=void 0);if(!this.implicitSubmitter){const t=document.createElement("button");t.type="submit",t.hidden=!0,t.style.display="none",t.tabIndex=-1,t.className="designbase-wc-button__submit-proxy",t.setAttribute("aria-hidden","true"),t.setAttribute("data-db-implicit-submitter",""),t.addEventListener("click",t=>{t.preventDefault(),t.stopPropagation(),this.click()}),this.implicitSubmitter=t}this.implicitSubmitter.disabled=this.blocked,this.hasAttribute("form")?this.implicitSubmitter.setAttribute("form",this.getAttribute("form")):this.implicitSubmitter.removeAttribute("form"),this.implicitSubmitter.parentElement!==this&&this.append(this.implicitSubmitter)}resolveIconName(e){if(e&&t(e))return e}isManagedIconNode(t){return t instanceof HTMLElement&&(t.classList.contains("designbase-wc-button__start-icon")||t.classList.contains("designbase-wc-button__end-icon")||t.classList.contains("designbase-wc-button__spinner")||t.classList.contains("designbase-wc-button__loading-label")||t.classList.contains("designbase-wc-button__submit-proxy")||t.classList.contains("designbase-wc-button__accent-field")||t.classList.contains("designbase-wc-button__accent-glass")||t.classList.contains("designbase-wc-button__accent-orb")||t.classList.contains("designbase-wc-button__accent-ring"))}syncIcons(){const t=this.resolveIconName(this.getAttribute("start-icon")),i=this.resolveIconName(this.getAttribute("end-icon")),s=this.getIconSize();let n=this.querySelector(":scope > .designbase-wc-button__start-icon");if(t){if(!n){n=document.createElement("span"),n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true");const t=Array.from(this.childNodes).find(t=>!this.isManagedIconNode(t));t?this.insertBefore(n,t):this.append(n)}n.replaceChildren(e(t,s))}else n?.remove();let r=this.querySelector(":scope > .designbase-wc-button__end-icon");i?(r||(r=document.createElement("span"),r.className="designbase-wc-button__end-icon",r.setAttribute("aria-hidden","true")),r.replaceChildren(e(i,s)),this.append(r)):r?.remove()}getDefaultRadiusClass(){if(r.includes(this.radius))return`designbase-wc-button--radius-${this.radius}`;const t=a.includes(this.size)?this.size:"m";return`designbase-wc-button--radius-${"s"===t||"l"===t?t:"m"}`}syncRadius(){r.forEach(t=>this.classList.remove(`designbase-wc-button--radius-${t}`)),this.classList.add(this.getDefaultRadiusClass())}syncAccentStyle(){if(o.forEach(t=>this.classList.remove(`designbase-wc-button--accent-${t}`)),"accent"!==this.variant)return;const t=this.accentStyle,e=o.includes(t)?t:"solid";this.classList.add(`designbase-wc-button--accent-${e}`)}syncAccentRing(){const t="accent"===this.variant&&["outline","prism"].includes(this.accentStyle),e=this.querySelector(":scope > .designbase-wc-button__accent-ring");if(!t)return void e?.remove();if(e)return;const i=document.createElement("span");i.className="designbase-wc-button__accent-ring",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className="designbase-wc-button__accent-ring-spin",i.appendChild(s),this.insertBefore(i,this.firstChild)}syncAccentField(){const t="accent"===this.variant&&"gradient"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-field"),i=this.querySelector(":scope > .designbase-wc-button__accent-glass");if(!t)return e?.remove(),void i?.remove();let s=e;if(!s){s=document.createElement("span"),s.className="designbase-wc-button__accent-field",s.setAttribute("aria-hidden","true");for(let t=1;t<=5;t+=1){const e=document.createElement("span");e.className=`designbase-wc-button__accent-orb designbase-wc-button__accent-orb--${t}`,s.appendChild(e)}this.insertBefore(s,this.firstChild)}if(!i){const t=document.createElement("span");t.className="designbase-wc-button__accent-glass",t.setAttribute("aria-hidden","true"),s.insertAdjacentElement("afterend",t)}}syncModifier(t,e){if(Array.from(this.classList).filter(e=>e.startsWith(`designbase-wc-button--${t}-`)).forEach(t=>this.classList.remove(t)),"variant"===t||"size"===t){("variant"===t?c:a).forEach(t=>this.classList.remove(`designbase-wc-button--${t}`)),this.classList.add(`designbase-wc-button--${e}`)}}syncBooleanModifier(t){const e=`designbase-wc-button--${t}`;this.classList.toggle(e,this.hasAttribute(t))}getSpinnerSize(){return a.includes(this.size)?this.size:"m"}syncLoadingVisual(){this.classList.toggle("designbase-wc-button--loading",this.loading);const t=this.loading&&!!this.loadingText;this.classList.toggle("designbase-wc-button--loading-text",t);const e=this.getAttribute("aria-label");!t||this.hasAttribute("aria-labelledby")||this.hasAttribute("aria-label")&&e!==this.managedLoadingLabel?null!==this.managedLoadingLabel&&(e===this.managedLoadingLabel&&this.removeAttribute("aria-label"),this.managedLoadingLabel=null):(this.managedLoadingLabel=this.loadingText,this.setAttribute("aria-label",this.loadingText));let i=this.querySelector(":scope > .designbase-wc-button__loading-label");t?(i||(i=document.createElement("span"),i.className="designbase-wc-button__loading-label",i.setAttribute("aria-hidden","true"),this.append(i)),i.textContent=this.loadingText):i?.remove();const s=this.querySelector(":scope > .designbase-wc-button__spinner");if(!this.loading)return void s?.remove();const n=`designbase-wc-button__spinner designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${this.getSpinnerSize()}`;if(s)return s.className=n,void s.setAttribute("aria-hidden","true");const r=document.createElement("span");r.className=n,r.setAttribute("aria-hidden","true"),r.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>',this.insertBefore(r,this.firstChild)}}DbButton.formAssociated=!0,customElements.get("db-button")||customElements.define("db-button",DbButton);export{DbButton};

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

@@ -36,7 +36,8 @@ declare class DbCalendar extends HTMLElement {
     private eventForm;
     connectedCallback(): void;
     attributeChangedCallback(): void;
-    private get locale();
+    get locale(): string;
+    set locale(value: string);
     private get showWeekends();
     private get highlightToday();
     private get showOutsideDays();

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

@@ -1 +1 @@
-import{dbText as e,getDbLocale as t}from"../core/i18n.js";import{createDbIcon as a,getDbComponentIconSize as n}from"./db-icons.js";import{parseISODate as s,toISODate as i}from"./date-picker-utils.js";import"./db-modal.js";import"./db-input.js";import"./db-select.js";import"./db-date-picker.js";import"./db-time-picker.js";import"./db-button.js";const d="designbase-wc-calendar";class DbCalendar extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.currentView="month",this.selectedDate=new Date,this._events=[],this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.draggedEvent=null,this.dragOverDate=null,this.selectedDateRange={start:null,end:null},this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""}}static get observedAttributes(){return["view","current-date","events","locale","show-weekends","highlight-today","show-outside-days"]}connectedCallback(){this.built||this.build(),this.readAttributes(),this.render()}attributeChangedCallback(){this.built&&(this.readAttributes(),this.render())}get locale(){return this.getAttribute("locale")||("ko"===t()?"ko-KR":"en-US")}get showWeekends(){return"false"!==this.getAttribute("show-weekends")}get highlightToday(){return"false"!==this.getAttribute("highlight-today")}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get events(){return this._events}set events(e){"string"!=typeof e?(this._events=Array.isArray(e)?e:[],this.setAttribute("events",JSON.stringify(this._events))):this.setAttribute("events",e)}build(){this.built=!0,this.headerEl=document.createElement("div"),this.headerEl.className=`${d}__header`,this.bodyEl=document.createElement("div"),this.bodyEl.className=`${d}__body`,this.modalEl=document.createElement("db-modal"),this.modalEl.setAttribute("size","m"),this.modalEl.addEventListener("db-close",()=>this.closeModal())}readAttributes(){this.currentView="month";const e=s(this.getAttribute("current-date"));e&&(this.selectedDate=e);const t=this.getAttribute("events");if(t)try{const e=JSON.parse(t);this._events=Array.isArray(e)?e:[]}catch{this._events=[]}else this._events=[]}isSameDate(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}eventsForDate(e){return this._events.filter(t=>{const a=s(t.date);return!!a&&this.isSameDate(a,e)})}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}handleViewChange(e){this.currentView="month",this.emit("db-view-change",{view:e}),this.render()}shiftMonth(e){const t=new Date(this.selectedDate);t.setMonth(t.getMonth()+e),this.selectedDate=t,this.emit("db-month-change",{date:i(t)}),this.render()}shiftYear(e){const t=new Date(this.selectedDate);t.setFullYear(t.getFullYear()+e),this.selectedDate=t,this.emit("db-month-change",{date:i(t)}),this.render()}handleDateClick(e){this.selectedDate=e,this.emit("db-date-click",{date:i(e)}),!this.selectedDateRange.start||this.selectedDateRange.start&&this.selectedDateRange.end?this.selectedDateRange={start:e,end:null}:this.selectedDateRange.start&&!this.selectedDateRange.end&&(e<this.selectedDateRange.start?this.selectedDateRange={start:e,end:this.selectedDateRange.start}:this.selectedDateRange={start:this.selectedDateRange.start,end:e}),this.openAddModal(e)}handleDragStart(e,t){this.draggedEvent=e,t.dataTransfer?.setData("text/plain",e.id),t.dataTransfer?.setData("application/json",JSON.stringify(e)),t.dataTransfer&&(t.dataTransfer.effectAllowed="move")}handleDragOver(e,t){t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.dragOverDate=e,this.render()}handleDragLeave(e){const t=e.relatedTarget,a=e.currentTarget;a&&t&&a.contains(t)||(this.dragOverDate=null,this.render())}handleDrop(e,t){if(t.preventDefault(),!this.draggedEvent)return;const a={...this.draggedEvent,date:i(e)};this.emit("db-event-edit",{event:a}),this.draggedEvent=null,this.dragOverDate=null,this.render()}handleDragEnd(){this.draggedEvent=null,this.dragOverDate=null,this.render()}handleEventClick(e,t){t.stopPropagation(),this.selectedEvent=e,this.isEditing=!0;const a=s(e.date);a&&(this.selectedDate=a),this.eventForm={title:e.title,description:e.description||"",startTime:e.startTime||"09:00",endTime:e.endTime||"10:00",type:e.type,color:e.color||"#17a2b8",isAllDay:e.isAllDay||!1,location:e.location||""},this.emit("db-event-click",{event:e}),this.showEventModal=!0,this.render()}openAddModal(e){this.selectedDate=e,this.selectedEvent=null,this.isEditing=!1,this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""},this.showEventModal=!0,this.render()}closeModal(){this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.render()}saveEvent(){if(!this.eventForm.title.trim())return void window.alert("제목을 입력해주세요.");const e={title:this.eventForm.title.trim(),description:this.eventForm.description,date:i(this.selectedDate),startTime:this.eventForm.startTime,endTime:this.eventForm.endTime,type:this.eventForm.type,color:this.eventForm.color,isAllDay:this.eventForm.isAllDay,location:this.eventForm.location};if(this.isEditing&&this.selectedEvent){const t={...this.selectedEvent,...e};this.emit("db-event-edit",{event:t})}else this.emit("db-event-add",{event:e});this.closeModal()}deleteEvent(){this.selectedEvent&&window.confirm("정말로 이 일정을 삭제하시겠습니까?")&&(this.emit("db-event-delete",{eventId:this.selectedEvent.id}),this.closeModal())}renderHeader(){if(!this.headerEl)return;this.headerEl.replaceChildren();const t=document.createElement("div");t.className=`${d}__navigation`;const s=n("m"),i=document.createElement("button");i.type="button",i.className=`${d}__nav-button`,i.setAttribute("aria-label",e("이전")),i.appendChild(a("chevron-left",s)),i.addEventListener("click",()=>{this.shiftMonth(-1)});const l=document.createElement("div");l.className=`${d}__title`,l.textContent=this.selectedDate.toLocaleDateString(this.locale,{year:"numeric",month:"long"});const r=document.createElement("button");r.type="button",r.className=`${d}__nav-button`,r.setAttribute("aria-label",e("다음")),r.appendChild(a("chevron-right",s)),r.addEventListener("click",()=>{this.shiftMonth(1)}),t.append(i,l,r),this.headerEl.appendChild(t)}renderMonthView(){const e=document.createElement("div");e.className=`${d}__month-view`;const t=document.createElement("div");t.className=`${d}__weekdays`,["일","월","화","수","목","금","토"].forEach(e=>{const a=document.createElement("div");a.className=`${d}__weekday`,a.textContent=e,t.appendChild(a)}),e.appendChild(t);const a=document.createElement("div");a.className=`${d}__days`;const n=this.selectedDate.getFullYear(),s=this.selectedDate.getMonth(),i=new Date(n,s,1),l=new Date(i);l.setDate(l.getDate()-i.getDay());const r=new Date;for(let e=0;e<42;e+=1){const t=new Date(l);t.setDate(l.getDate()+e);const n=t.getMonth()===s;if(!this.showOutsideDays&&!n)continue;const i=0===t.getDay()||6===t.getDay();if(!this.showWeekends&&i)continue;const o=document.createElement("div"),c=this.selectedDateRange.start&&this.selectedDateRange.end&&t>=this.selectedDateRange.start&&t<=this.selectedDateRange.end,h=this.selectedDateRange.start&&t.toDateString()===this.selectedDateRange.start.toDateString(),m=this.selectedDateRange.end&&t.toDateString()===this.selectedDateRange.end.toDateString(),u=Boolean(c&&!h&&!m);o.className=[`${d}__day`,n&&`${d}__day--current-month`,this.highlightToday&&t.toDateString()===r.toDateString()&&`${d}__day--today`,this.isSameDate(t,this.selectedDate)&&`${d}__day--selected`,h&&`${d}__day--selected--start`,m&&`${d}__day--selected--end`,u&&`${d}__day--selected--middle`,!this.showWeekends&&i&&`${d}__day--weekend`].filter(Boolean).join(" "),o.addEventListener("click",()=>this.handleDateClick(t));const v=document.createElement("span");v.className=`${d}__day-number`,v.textContent=String(t.getDate()),o.appendChild(v);const p=this.eventsForDate(t);if(p.length){const e=document.createElement("div");if(e.className=`${d}__day-events`,p.slice(0,2).forEach(t=>{const a=document.createElement("div");a.className=[`${d}__event-bar`,`${d}__event-bar--${t.type}`].filter(Boolean).join(" "),t.color&&(a.style.backgroundColor=t.color),this.draggedEvent?.id===t.id&&a.classList.add(`${d}__event-bar--dragging`),a.title=t.title,a.draggable=!0;const n=document.createElement("span");n.className=`${d}__event-title`,n.textContent=t.title,a.appendChild(n),a.addEventListener("click",e=>this.handleEventClick(t,e)),a.addEventListener("dragstart",e=>this.handleDragStart(t,e)),a.addEventListener("dragend",()=>this.handleDragEnd()),e.appendChild(a)}),p.length>2){const t=document.createElement("div");t.className=`${d}__more-events`,t.textContent=`+${p.length-2} more`,e.appendChild(t)}o.appendChild(e)}const g=document.createElement("div");g.className=[`${d}__drop-zone`,this.dragOverDate&&this.isSameDate(this.dragOverDate,t)&&`${d}__drop-zone--active`].filter(Boolean).join(" "),g.addEventListener("dragover",e=>this.handleDragOver(t,e)),g.addEventListener("dragleave",e=>this.handleDragLeave(e)),g.addEventListener("drop",e=>this.handleDrop(t,e)),o.appendChild(g),a.appendChild(o)}return e.appendChild(a),e}renderYearView(){const e=document.createElement("div");e.className=`${d}__year-view`;const t=this.selectedDate.getFullYear();for(let a=0;a<12;a+=1){const n=new Date(t,a,1),i=this._events.filter(e=>{const n=s(e.date);return n&&n.getFullYear()===t&&n.getMonth()===a}),l=document.createElement("div");l.className=`${d}__year-month`,l.addEventListener("click",()=>{this.selectedDate=n,this.handleViewChange("month")});const r=document.createElement("h3");if(r.className=`${d}__year-month-title`,r.textContent=n.toLocaleDateString(this.locale,{month:"long"}),l.appendChild(r),i.length){const e=document.createElement("div");if(e.className=`${d}__year-month-events`,i.slice(0,4).forEach(t=>{const a=document.createElement("span");a.className=[`${d}__year-event`,`${d}__year-event--${t.type}`].join(" "),t.color&&(a.style.backgroundColor=t.color),e.appendChild(a)}),i.length>4){const t=document.createElement("span");t.className=`${d}__year-more-events`,t.textContent=`+${i.length-4} more`,e.appendChild(t)}l.appendChild(e)}e.appendChild(l)}return e}renderWeekView(){const e=document.createElement("div");e.className=`${d}__week-view`;const t=new Date,a=new Date(this.selectedDate);a.setDate(this.selectedDate.getDate()-this.selectedDate.getDay());const n=document.createElement("div");n.className=`${d}__week-header`;const s=document.createElement("div");s.className=`${d}__time-column-header`,n.appendChild(s);for(let e=0;e<7;e+=1){const s=new Date(a);s.setDate(a.getDate()+e);const i=document.createElement("div");i.className=[`${d}__week-day-header`,s.toDateString()===t.toDateString()&&`${d}__week-day-header--today`].filter(Boolean).join(" ");const l=document.createElement("span");l.className=`${d}__week-day-name`,l.textContent=s.toLocaleDateString(this.locale,{weekday:"short"});const r=document.createElement("span");r.className=`${d}__week-day-number`,r.textContent=String(s.getDate()),i.append(l,r),n.appendChild(i)}e.appendChild(n);const i=document.createElement("div");i.className=`${d}__week-grid`;const l=document.createElement("div");l.className=`${d}__week-time-column`;for(let e=6;e<=22;e+=1){const t=document.createElement("div");t.className=`${d}__time-slot`;const a=document.createElement("span");a.className=`${d}__time-label`,a.textContent=`${String(e).padStart(2,"0")}:00`,t.appendChild(a),l.appendChild(t)}i.appendChild(l);const r=document.createElement("div");r.className=`${d}__week-columns`;for(let e=0;e<7;e+=1){const t=new Date(a);t.setDate(a.getDate()+e);const n=document.createElement("div");n.className=`${d}__week-column`;for(let e=6;e<=22;e+=1){const a=document.createElement("div");a.className=`${d}__week-cell`,a.title=`${t.toLocaleDateString()} ${String(e).padStart(2,"0")}:00`,a.addEventListener("click",()=>{this.selectedDate=new Date(t),this.eventForm.startTime=`${String(e).padStart(2,"0")}:00`,this.eventForm.endTime=`${String(e+1).padStart(2,"0")}:00`,this.openAddModal(this.selectedDate)}),n.appendChild(a)}this.eventsForDate(t).forEach(e=>{if(!e.startTime)return;const[t,a]=e.startTime.split(":").map(Number),s=.8*(60*(t-6)+(a||0)),i=(e.endTime||e.startTime).split(":").map(Number),l=60*(i[0]||t)+(i[1]||0),r=60*t+(a||0),o=Math.max(20,48*(l-r)/60),c=document.createElement("div");c.className=[`${d}__week-event`,`${d}__week-event--${e.type}`].filter(Boolean).join(" "),c.textContent=e.title,c.title=e.title,c.style.backgroundColor=e.color||"#17a2b8",c.style.top=`${s}px`,c.style.height=`${o}px`,c.addEventListener("click",t=>this.handleEventClick(e,t)),n.appendChild(c)}),r.appendChild(n)}return i.appendChild(r),e.appendChild(i),e}renderModal(){if(!this.modalEl)return;if(this.modalEl.replaceChildren(),!this.showEventModal)return void this.modalEl.removeAttribute("open");this.modalEl.setAttribute("open","true"),this.modalEl.setAttribute("title",this.isEditing?"일정 편집":"새 일정 추가");const t=document.createElement("div");t.className=`${d}__event-form`;const a=document.createElement("db-input");a.setAttribute("label","제목 *"),a.setAttribute("placeholder",e("일정 제목을 입력하세요")),a.setAttribute("full-width",""),a.setAttribute("value",this.eventForm.title),a.addEventListener("db-input",e=>{this.eventForm.title=e.detail.value});const n=document.createElement("db-input");n.setAttribute("label","설명"),n.setAttribute("placeholder",e("일정 설명을 입력하세요")),n.setAttribute("full-width",""),n.setAttribute("value",this.eventForm.description),n.addEventListener("db-input",e=>{this.eventForm.description=e.detail.value});const l=document.createElement("db-date-picker");l.setAttribute("label","날짜"),l.setAttribute("full-width",""),l.setAttribute("value",i(this.selectedDate)),l.addEventListener("db-change",e=>{const t=s(e.detail.value);t&&(this.selectedDate=t)});const r=document.createElement("db-select");r.setAttribute("label","일정 타입"),r.setAttribute("full-width",""),r.setAttribute("options",JSON.stringify([{value:"meeting",label:e("회의")},{value:"task",label:e("업무")},{value:"reminder",label:e("알림")},{value:"birthday",label:e("생일")},{value:"holiday",label:e("휴일")},{value:"custom",label:e("기타")}])),r.setAttribute("value",this.eventForm.type),r.addEventListener("db-change",e=>{this.eventForm.type=e.detail.value});const o=document.createElement("db-select");o.setAttribute("label","색상"),o.setAttribute("full-width",""),o.setAttribute("options",JSON.stringify([{value:"#17a2b8",label:e("청록")},{value:"#0d6efd",label:e("파랑")},{value:"#198754",label:e("초록")},{value:"#ffc107",label:e("노랑")},{value:"#dc3545",label:e("빨강")},{value:"#6f42c1",label:e("보라")}])),o.setAttribute("value",this.eventForm.color),o.addEventListener("db-change",e=>{this.eventForm.color=e.detail.value});const c=document.createElement("db-time-picker");c.setAttribute("label","시작 시간"),c.setAttribute("full-width",""),c.setAttribute("value",this.eventForm.startTime),c.addEventListener("db-change",e=>{this.eventForm.startTime=e.detail.value});const h=document.createElement("db-time-picker");h.setAttribute("label","종료 시간"),h.setAttribute("full-width",""),h.setAttribute("value",this.eventForm.endTime),h.addEventListener("db-change",e=>{this.eventForm.endTime=e.detail.value}),t.append(a,n,l,r,o,c,h);const m=document.createElement("div");m.className="designbase-wc-modal__body",m.setAttribute("data-modal-part","body"),m.appendChild(t);const u=document.createElement("div");u.className="designbase-wc-modal__footer",u.setAttribute("data-modal-part","footer");const v=document.createElement("div");if(v.className=`${d}__modal-actions`,this.isEditing){const t=document.createElement("db-button");t.setAttribute("variant","destructive"),t.textContent=e("삭제"),t.addEventListener("click",()=>this.deleteEvent()),v.appendChild(t)}const p=document.createElement("div");p.className=`${d}__modal-buttons`;const g=document.createElement("db-button");g.setAttribute("variant","secondary"),g.textContent=e("취소"),g.addEventListener("click",()=>this.closeModal());const b=document.createElement("db-button");b.setAttribute("variant","primary"),b.textContent=this.isEditing?"수정":"저장",b.addEventListener("click",()=>this.saveEvent()),p.append(g,b),v.appendChild(p),u.appendChild(v),this.modalEl.append(m,u)}render(){this.className=d,this.replaceChildren(),this.headerEl&&this.bodyEl&&(this.renderHeader(),this.bodyEl.replaceChildren(),this.bodyEl.appendChild(this.renderMonthView()),this.append(this.headerEl,this.bodyEl),this.renderModal(),this.showEventModal&&this.modalEl&&this.appendChild(this.modalEl))}}customElements.get("db-calendar")||customElements.define("db-calendar",DbCalendar);export{DbCalendar};
+import{dbText as e}from"../core/i18n.js";import{createDbIcon as t,getDbComponentIconSize as a}from"./db-icons.js";import{resolveDateLocale as n,parseISODate as s,toISODate as i}from"./date-picker-utils.js";import"./db-modal.js";import"./db-input.js";import"./db-select.js";import"./db-date-picker.js";import"./db-time-picker.js";import"./db-button.js";const d="designbase-wc-calendar";class DbCalendar extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.currentView="month",this.selectedDate=new Date,this._events=[],this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.draggedEvent=null,this.dragOverDate=null,this.selectedDateRange={start:null,end:null},this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""}}static get observedAttributes(){return["view","current-date","events","locale","show-weekends","highlight-today","show-outside-days"]}connectedCallback(){this.built||this.build(),this.readAttributes(),this.render()}attributeChangedCallback(){this.built&&(this.readAttributes(),this.render())}get locale(){return n(this.getAttribute("locale"))}set locale(e){this.setAttribute("locale",e||"")}get showWeekends(){return"false"!==this.getAttribute("show-weekends")}get highlightToday(){return"false"!==this.getAttribute("highlight-today")}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get events(){return this._events}set events(e){"string"!=typeof e?(this._events=Array.isArray(e)?e:[],this.setAttribute("events",JSON.stringify(this._events))):this.setAttribute("events",e)}build(){this.built=!0,this.headerEl=document.createElement("div"),this.headerEl.className=`${d}__header`,this.bodyEl=document.createElement("div"),this.bodyEl.className=`${d}__body`,this.modalEl=document.createElement("db-modal"),this.modalEl.setAttribute("size","m"),this.modalEl.addEventListener("db-close",()=>this.closeModal())}readAttributes(){this.currentView="month";const e=s(this.getAttribute("current-date"));e&&(this.selectedDate=e);const t=this.getAttribute("events");if(t)try{const e=JSON.parse(t);this._events=Array.isArray(e)?e:[]}catch{this._events=[]}else this._events=[]}isSameDate(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}eventsForDate(e){return this._events.filter(t=>{const a=s(t.date);return!!a&&this.isSameDate(a,e)})}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}handleViewChange(e){this.currentView="month",this.emit("db-view-change",{view:e}),this.render()}shiftMonth(e){const t=new Date(this.selectedDate);t.setMonth(t.getMonth()+e),this.selectedDate=t,this.emit("db-month-change",{date:i(t)}),this.render()}shiftYear(e){const t=new Date(this.selectedDate);t.setFullYear(t.getFullYear()+e),this.selectedDate=t,this.emit("db-month-change",{date:i(t)}),this.render()}handleDateClick(e){this.selectedDate=e,this.emit("db-date-click",{date:i(e)}),!this.selectedDateRange.start||this.selectedDateRange.start&&this.selectedDateRange.end?this.selectedDateRange={start:e,end:null}:this.selectedDateRange.start&&!this.selectedDateRange.end&&(e<this.selectedDateRange.start?this.selectedDateRange={start:e,end:this.selectedDateRange.start}:this.selectedDateRange={start:this.selectedDateRange.start,end:e}),this.openAddModal(e)}handleDragStart(e,t){this.draggedEvent=e,t.dataTransfer?.setData("text/plain",e.id),t.dataTransfer?.setData("application/json",JSON.stringify(e)),t.dataTransfer&&(t.dataTransfer.effectAllowed="move")}handleDragOver(e,t){t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.dragOverDate=e,this.render()}handleDragLeave(e){const t=e.relatedTarget,a=e.currentTarget;a&&t&&a.contains(t)||(this.dragOverDate=null,this.render())}handleDrop(e,t){if(t.preventDefault(),!this.draggedEvent)return;const a={...this.draggedEvent,date:i(e)};this.emit("db-event-edit",{event:a}),this.draggedEvent=null,this.dragOverDate=null,this.render()}handleDragEnd(){this.draggedEvent=null,this.dragOverDate=null,this.render()}handleEventClick(e,t){t.stopPropagation(),this.selectedEvent=e,this.isEditing=!0;const a=s(e.date);a&&(this.selectedDate=a),this.eventForm={title:e.title,description:e.description||"",startTime:e.startTime||"09:00",endTime:e.endTime||"10:00",type:e.type,color:e.color||"#17a2b8",isAllDay:e.isAllDay||!1,location:e.location||""},this.emit("db-event-click",{event:e}),this.showEventModal=!0,this.render()}openAddModal(e){this.selectedDate=e,this.selectedEvent=null,this.isEditing=!1,this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""},this.showEventModal=!0,this.render()}closeModal(){this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.render()}saveEvent(){if(!this.eventForm.title.trim())return void window.alert("제목을 입력해주세요.");const e={title:this.eventForm.title.trim(),description:this.eventForm.description,date:i(this.selectedDate),startTime:this.eventForm.startTime,endTime:this.eventForm.endTime,type:this.eventForm.type,color:this.eventForm.color,isAllDay:this.eventForm.isAllDay,location:this.eventForm.location};if(this.isEditing&&this.selectedEvent){const t={...this.selectedEvent,...e};this.emit("db-event-edit",{event:t})}else this.emit("db-event-add",{event:e});this.closeModal()}deleteEvent(){this.selectedEvent&&window.confirm("정말로 이 일정을 삭제하시겠습니까?")&&(this.emit("db-event-delete",{eventId:this.selectedEvent.id}),this.closeModal())}renderHeader(){if(!this.headerEl)return;this.headerEl.replaceChildren();const n=document.createElement("div");n.className=`${d}__navigation`;const s=a("m"),i=document.createElement("button");i.type="button",i.className=`${d}__nav-button`,i.setAttribute("aria-label",e("이전")),i.appendChild(t("chevron-left",s)),i.addEventListener("click",()=>{this.shiftMonth(-1)});const l=document.createElement("div");l.className=`${d}__title`,l.textContent=this.selectedDate.toLocaleDateString(this.locale,{year:"numeric",month:"long"});const r=document.createElement("button");r.type="button",r.className=`${d}__nav-button`,r.setAttribute("aria-label",e("다음")),r.appendChild(t("chevron-right",s)),r.addEventListener("click",()=>{this.shiftMonth(1)}),n.append(i,l,r),this.headerEl.appendChild(n)}renderMonthView(){const e=document.createElement("div");e.className=`${d}__month-view`;const t=document.createElement("div");t.className=`${d}__weekdays`,["일","월","화","수","목","금","토"].forEach(e=>{const a=document.createElement("div");a.className=`${d}__weekday`,a.textContent=e,t.appendChild(a)}),e.appendChild(t);const a=document.createElement("div");a.className=`${d}__days`;const n=this.selectedDate.getFullYear(),s=this.selectedDate.getMonth(),i=new Date(n,s,1),l=new Date(i);l.setDate(l.getDate()-i.getDay());const r=new Date;for(let e=0;e<42;e+=1){const t=new Date(l);t.setDate(l.getDate()+e);const n=t.getMonth()===s;if(!this.showOutsideDays&&!n)continue;const i=0===t.getDay()||6===t.getDay();if(!this.showWeekends&&i)continue;const o=document.createElement("div"),c=this.selectedDateRange.start&&this.selectedDateRange.end&&t>=this.selectedDateRange.start&&t<=this.selectedDateRange.end,h=this.selectedDateRange.start&&t.toDateString()===this.selectedDateRange.start.toDateString(),m=this.selectedDateRange.end&&t.toDateString()===this.selectedDateRange.end.toDateString(),u=Boolean(c&&!h&&!m);o.className=[`${d}__day`,n&&`${d}__day--current-month`,this.highlightToday&&t.toDateString()===r.toDateString()&&`${d}__day--today`,this.isSameDate(t,this.selectedDate)&&`${d}__day--selected`,h&&`${d}__day--selected--start`,m&&`${d}__day--selected--end`,u&&`${d}__day--selected--middle`,!this.showWeekends&&i&&`${d}__day--weekend`].filter(Boolean).join(" "),o.addEventListener("click",()=>this.handleDateClick(t));const v=document.createElement("span");v.className=`${d}__day-number`,v.textContent=String(t.getDate()),o.appendChild(v);const p=this.eventsForDate(t);if(p.length){const e=document.createElement("div");if(e.className=`${d}__day-events`,p.slice(0,2).forEach(t=>{const a=document.createElement("div");a.className=[`${d}__event-bar`,`${d}__event-bar--${t.type}`].filter(Boolean).join(" "),t.color&&(a.style.backgroundColor=t.color),this.draggedEvent?.id===t.id&&a.classList.add(`${d}__event-bar--dragging`),a.title=t.title,a.draggable=!0;const n=document.createElement("span");n.className=`${d}__event-title`,n.textContent=t.title,a.appendChild(n),a.addEventListener("click",e=>this.handleEventClick(t,e)),a.addEventListener("dragstart",e=>this.handleDragStart(t,e)),a.addEventListener("dragend",()=>this.handleDragEnd()),e.appendChild(a)}),p.length>2){const t=document.createElement("div");t.className=`${d}__more-events`,t.textContent=`+${p.length-2} more`,e.appendChild(t)}o.appendChild(e)}const g=document.createElement("div");g.className=[`${d}__drop-zone`,this.dragOverDate&&this.isSameDate(this.dragOverDate,t)&&`${d}__drop-zone--active`].filter(Boolean).join(" "),g.addEventListener("dragover",e=>this.handleDragOver(t,e)),g.addEventListener("dragleave",e=>this.handleDragLeave(e)),g.addEventListener("drop",e=>this.handleDrop(t,e)),o.appendChild(g),a.appendChild(o)}return e.appendChild(a),e}renderYearView(){const e=document.createElement("div");e.className=`${d}__year-view`;const t=this.selectedDate.getFullYear();for(let a=0;a<12;a+=1){const n=new Date(t,a,1),i=this._events.filter(e=>{const n=s(e.date);return n&&n.getFullYear()===t&&n.getMonth()===a}),l=document.createElement("div");l.className=`${d}__year-month`,l.addEventListener("click",()=>{this.selectedDate=n,this.handleViewChange("month")});const r=document.createElement("h3");if(r.className=`${d}__year-month-title`,r.textContent=n.toLocaleDateString(this.locale,{month:"long"}),l.appendChild(r),i.length){const e=document.createElement("div");if(e.className=`${d}__year-month-events`,i.slice(0,4).forEach(t=>{const a=document.createElement("span");a.className=[`${d}__year-event`,`${d}__year-event--${t.type}`].join(" "),t.color&&(a.style.backgroundColor=t.color),e.appendChild(a)}),i.length>4){const t=document.createElement("span");t.className=`${d}__year-more-events`,t.textContent=`+${i.length-4} more`,e.appendChild(t)}l.appendChild(e)}e.appendChild(l)}return e}renderWeekView(){const e=document.createElement("div");e.className=`${d}__week-view`;const t=new Date,a=new Date(this.selectedDate);a.setDate(this.selectedDate.getDate()-this.selectedDate.getDay());const n=document.createElement("div");n.className=`${d}__week-header`;const s=document.createElement("div");s.className=`${d}__time-column-header`,n.appendChild(s);for(let e=0;e<7;e+=1){const s=new Date(a);s.setDate(a.getDate()+e);const i=document.createElement("div");i.className=[`${d}__week-day-header`,s.toDateString()===t.toDateString()&&`${d}__week-day-header--today`].filter(Boolean).join(" ");const l=document.createElement("span");l.className=`${d}__week-day-name`,l.textContent=s.toLocaleDateString(this.locale,{weekday:"short"});const r=document.createElement("span");r.className=`${d}__week-day-number`,r.textContent=String(s.getDate()),i.append(l,r),n.appendChild(i)}e.appendChild(n);const i=document.createElement("div");i.className=`${d}__week-grid`;const l=document.createElement("div");l.className=`${d}__week-time-column`;for(let e=6;e<=22;e+=1){const t=document.createElement("div");t.className=`${d}__time-slot`;const a=document.createElement("span");a.className=`${d}__time-label`,a.textContent=`${String(e).padStart(2,"0")}:00`,t.appendChild(a),l.appendChild(t)}i.appendChild(l);const r=document.createElement("div");r.className=`${d}__week-columns`;for(let e=0;e<7;e+=1){const t=new Date(a);t.setDate(a.getDate()+e);const n=document.createElement("div");n.className=`${d}__week-column`;for(let e=6;e<=22;e+=1){const a=document.createElement("div");a.className=`${d}__week-cell`,a.title=`${t.toLocaleDateString()} ${String(e).padStart(2,"0")}:00`,a.addEventListener("click",()=>{this.selectedDate=new Date(t),this.eventForm.startTime=`${String(e).padStart(2,"0")}:00`,this.eventForm.endTime=`${String(e+1).padStart(2,"0")}:00`,this.openAddModal(this.selectedDate)}),n.appendChild(a)}this.eventsForDate(t).forEach(e=>{if(!e.startTime)return;const[t,a]=e.startTime.split(":").map(Number),s=.8*(60*(t-6)+(a||0)),i=(e.endTime||e.startTime).split(":").map(Number),l=60*(i[0]||t)+(i[1]||0),r=60*t+(a||0),o=Math.max(20,48*(l-r)/60),c=document.createElement("div");c.className=[`${d}__week-event`,`${d}__week-event--${e.type}`].filter(Boolean).join(" "),c.textContent=e.title,c.title=e.title,c.style.backgroundColor=e.color||"#17a2b8",c.style.top=`${s}px`,c.style.height=`${o}px`,c.addEventListener("click",t=>this.handleEventClick(e,t)),n.appendChild(c)}),r.appendChild(n)}return i.appendChild(r),e.appendChild(i),e}renderModal(){if(!this.modalEl)return;if(this.modalEl.replaceChildren(),!this.showEventModal)return void this.modalEl.removeAttribute("open");this.modalEl.setAttribute("open","true"),this.modalEl.setAttribute("title",this.isEditing?"일정 편집":"새 일정 추가");const t=document.createElement("div");t.className=`${d}__event-form`;const a=document.createElement("db-input");a.setAttribute("label","제목 *"),a.setAttribute("placeholder",e("일정 제목을 입력하세요")),a.setAttribute("full-width",""),a.setAttribute("value",this.eventForm.title),a.addEventListener("db-input",e=>{this.eventForm.title=e.detail.value});const n=document.createElement("db-input");n.setAttribute("label","설명"),n.setAttribute("placeholder",e("일정 설명을 입력하세요")),n.setAttribute("full-width",""),n.setAttribute("value",this.eventForm.description),n.addEventListener("db-input",e=>{this.eventForm.description=e.detail.value});const l=document.createElement("db-date-picker");l.setAttribute("label","날짜"),l.setAttribute("full-width",""),l.setAttribute("value",i(this.selectedDate)),l.addEventListener("db-change",e=>{const t=s(e.detail.value);t&&(this.selectedDate=t)});const r=document.createElement("db-select");r.setAttribute("label","일정 타입"),r.setAttribute("full-width",""),r.setAttribute("options",JSON.stringify([{value:"meeting",label:e("회의")},{value:"task",label:e("업무")},{value:"reminder",label:e("알림")},{value:"birthday",label:e("생일")},{value:"holiday",label:e("휴일")},{value:"custom",label:e("기타")}])),r.setAttribute("value",this.eventForm.type),r.addEventListener("db-change",e=>{this.eventForm.type=e.detail.value});const o=document.createElement("db-select");o.setAttribute("label","색상"),o.setAttribute("full-width",""),o.setAttribute("options",JSON.stringify([{value:"#17a2b8",label:e("청록")},{value:"#0d6efd",label:e("파랑")},{value:"#198754",label:e("초록")},{value:"#ffc107",label:e("노랑")},{value:"#dc3545",label:e("빨강")},{value:"#6f42c1",label:e("보라")}])),o.setAttribute("value",this.eventForm.color),o.addEventListener("db-change",e=>{this.eventForm.color=e.detail.value});const c=document.createElement("db-time-picker");c.setAttribute("label","시작 시간"),c.setAttribute("full-width",""),c.setAttribute("value",this.eventForm.startTime),c.addEventListener("db-change",e=>{this.eventForm.startTime=e.detail.value});const h=document.createElement("db-time-picker");h.setAttribute("label","종료 시간"),h.setAttribute("full-width",""),h.setAttribute("value",this.eventForm.endTime),h.addEventListener("db-change",e=>{this.eventForm.endTime=e.detail.value}),t.append(a,n,l,r,o,c,h);const m=document.createElement("div");m.className="designbase-wc-modal__body",m.setAttribute("data-modal-part","body"),m.appendChild(t);const u=document.createElement("div");u.className="designbase-wc-modal__footer",u.setAttribute("data-modal-part","footer");const v=document.createElement("div");if(v.className=`${d}__modal-actions`,this.isEditing){const t=document.createElement("db-button");t.setAttribute("variant","destructive"),t.textContent=e("삭제"),t.addEventListener("click",()=>this.deleteEvent()),v.appendChild(t)}const p=document.createElement("div");p.className=`${d}__modal-buttons`;const g=document.createElement("db-button");g.setAttribute("variant","secondary"),g.textContent=e("취소"),g.addEventListener("click",()=>this.closeModal());const b=document.createElement("db-button");b.setAttribute("variant","primary"),b.textContent=this.isEditing?"수정":"저장",b.addEventListener("click",()=>this.saveEvent()),p.append(g,b),v.appendChild(p),u.appendChild(v),this.modalEl.append(m,u)}render(){this.className=d,this.replaceChildren(),this.headerEl&&this.bodyEl&&(this.renderHeader(),this.bodyEl.replaceChildren(),this.bodyEl.appendChild(this.renderMonthView()),this.append(this.headerEl,this.bodyEl),this.renderModal(),this.showEventModal&&this.modalEl&&this.appendChild(this.modalEl))}}customElements.get("db-calendar")||customElements.define("db-calendar",DbCalendar);export{DbCalendar};

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

@@ -13,6 +13,8 @@ declare class DbCarousel extends HTMLElement {
     static get observedAttributes(): string[];
     get items(): DbCarouselItem[];
     set items(value: DbCarouselItem[] | string);
+    private unsubscribeLocale?;
+    private syncLocale;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{t}from"../core/i18n.js";import{b as s}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{a as i}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-GM4TCAP5.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{CAROUSEL_SIZES as o,CAROUSEL_VARIANTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbCarousel extends HTMLElement{constructor(){super(...arguments),this.currentIndex=0,this.isAutoPlaying=!1}static get observedAttributes(){return["items","size","variant","theme","transition","auto-play","auto-play-interval","infinite","show-navigation","show-indicators","indicator-style","show-auto-play-control","show-title","show-description","disabled","readonly"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.style.display="block",this.clampCurrentIndex(),this.isAutoPlaying=this.getBool("auto-play"),this.render()}disconnectedCallback(){this.destroyEngine()}attributeChangedCallback(e){this.isConnected&&("items"===e&&this.clampCurrentIndex(),"auto-play"!==e&&"auto-play-interval"!==e||(this.isAutoPlaying=this.getBool("auto-play")),this.render())}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}clampCurrentIndex(){this.currentIndex>=this.items.length&&(this.currentIndex=0)}destroyEngine(){const e=this.isAutoPlaying;this.autoplay?.destroy(),this.autoplay=void 0,this.engine?.destroy(),this.engine=void 0,this.isAutoPlaying=e}getIndicatorType(){if(this.getBool("show-auto-play-control",!0)&&this.getBool("show-indicators",!0)&&this.items.length>1)return"combined";const e=this.getAttribute("indicator-style")||"dots";return"lines"===e?"line":"numbers"===e?"numbers":"dots"}getIndicatorSize(){const e=n(this.getAttribute("size"),o,"m");return"l"===e||"xl"===e?"m":"s"}goTo(e){this.getBool("disabled")||this.getBool("readonly")||e<0||e>=this.items.length||this.engine?.goTo(e)}goToPrev(){this.getBool("disabled")||this.getBool("readonly")||this.engine?.prev()}goToNext(){this.getBool("disabled")||this.getBool("readonly")||this.engine?.next()}render(){this.destroyEngine();const r=n(this.getAttribute("size"),o,"m"),l=n(this.getAttribute("variant"),a,"default"),c=this.getAttribute("theme")||"light",d=this.getAttribute("transition")||"slide",u=this.getBool("show-navigation",!0),h=this.getBool("show-indicators",!0),g=this.getBool("show-auto-play-control",!0),b=this.getBool("show-title",!0),m=this.getBool("show-description",!0),p=this.getBool("disabled"),y=this.getBool("readonly"),v=this.getAttribute("indicator-style")||"dots",A=g&&h&&this.items.length>1;this.className=["designbase-wc-carousel","db-slide",`designbase-wc-carousel--size-${r}`,`designbase-wc-carousel--variant-${l}`,`designbase-wc-carousel--theme-${c}`,`designbase-wc-carousel--transition-${d}`,`designbase-wc-carousel--indicator-${v}`,p&&"designbase-wc-carousel--disabled",y&&"designbase-wc-carousel--readonly"].filter(Boolean).join(" ");const w=document.createElement("div");w.className="designbase-wc-carousel__container";const _=document.createElement("div");if(_.className="designbase-wc-carousel__track db-slide__viewport",(p||y)&&(_.style.overflowX="hidden"),this.items.forEach((e,t)=>{const s=document.createElement("div");s.className="designbase-wc-carousel__slide"+(t===this.currentIndex?" designbase-wc-carousel__slide--active":""),s.style.flex="0 0 100%",s.style.width="100%",s.style.height="100%",s.style.minWidth="0";const i=e.image?"#ffffff":"";if(i&&(s.style.color=i),e.image){const i=document.createElement("div");i.className="designbase-wc-carousel__slide-image";const n=document.createElement("img");n.className="designbase-wc-carousel__slide-img",n.src=e.image,n.alt=e.alt||e.title||`Slide ${t+1}`,i.append(n),s.append(i)}if(b&&e.title||m&&e.description){const t=document.createElement("div");if(t.className="designbase-wc-carousel__slide-info",i&&(t.style.color=i),b&&e.title){const s=document.createElement("h3");s.className="designbase-wc-carousel__slide-title",s.textContent=e.title,i&&(s.style.color=i),t.append(s)}if(m&&e.description){const s=document.createElement("p");s.className="designbase-wc-carousel__slide-description",s.textContent=e.description,i&&(s.style.color=i),t.append(s)}s.append(t)}s.addEventListener("click",()=>{p||y||this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),_.append(s)}),w.append(_),u&&this.items.length>1){const s=document.createElement("button");s.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev",s.type="button",s.setAttribute("aria-label",t("carousel.previous")),s.append(e("chevron-left",20)),s.disabled=p||y,s.addEventListener("click",()=>this.goToPrev());const i=document.createElement("button");i.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next",i.type="button",i.setAttribute("aria-label",t("carousel.next")),i.append(e("chevron-right",20)),i.disabled=p||y,i.addEventListener("click",()=>this.goToNext()),w.append(s,i)}const f=[w];if(h&&this.items.length>1){const e=document.createElement("div");e.className="designbase-wc-carousel__controls";const t=document.createElement("div");t.className="designbase-wc-carousel__indicators";const s=document.createElement("db-indicator");s.setAttribute("current",String(this.currentIndex)),s.setAttribute("total",String(this.items.length)),s.setAttribute("type",this.getIndicatorType()),s.setAttribute("size",this.getIndicatorSize()),s.setAttribute("clickable",""),A&&(s.setAttribute("timer",""),s.setAttribute("progress","0"),s.setAttribute("timer-duration",String(Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)))),s.setAttribute("auto-roll","false"),this.isAutoPlaying?s.setAttribute("playing",""):s.removeAttribute("playing"),(p||y)&&s.setAttribute("playback-disabled","")),s.addEventListener("db-step-click",e=>{const t=e;this.goTo(t.detail.index)}),s.addEventListener("db-playing-change",e=>{const t=e;this.isAutoPlaying=t.detail.playing,p||y||(this.isAutoPlaying?this.autoplay?.play():this.autoplay?.pause())}),t.append(s),e.append(t),f.push(e)}this.replaceChildren(...f),this.engine=s(this,{startIndex:this.currentIndex,slidesPerView:1,gap:0,rewind:this.getBool("infinite",!0),drag:!p&&!y,keyboard:!p&&!y,label:this.getAttribute("aria-label")||"Carousel"});const sync=()=>{const e=this.engine.getState(),t=e.index!==this.currentIndex;this.currentIndex=e.index,_.querySelectorAll(".designbase-wc-carousel__slide").forEach((t,s)=>{t.classList.toggle("designbase-wc-carousel__slide--active",e.visible.includes(s))});const s=this.querySelector("db-indicator");s?.getAttribute("current")!==String(e.index)&&s?.setAttribute("current",String(e.index));const i=this.querySelector(".designbase-wc-carousel__nav-button--prev"),n=this.querySelector(".designbase-wc-carousel__nav-button--next");i&&(i.disabled=p||y||!e.canPrev),n&&(n.disabled=p||y||!e.canNext),t&&this.dispatchEvent(new CustomEvent("db-slide-change",{detail:{index:e.index},bubbles:!0,composed:!0}))};this.engine.on("change",sync),this.engine.on("refresh",sync),sync(),this.autoplay=i(this.engine,{delay:Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)),playOnInit:this.isAutoPlaying&&!p&&!y}),this.autoplay.onProgress(e=>{A&&this.querySelector("db-indicator")?.setAttribute("progress",String(e.progress))}),this.autoplay.onChange(e=>{p||y||(this.isAutoPlaying=e);const t=this.querySelector("db-indicator");A&&t?.toggleAttribute("playing",e)})}}customElements.get("db-carousel")||customElements.define("db-carousel",DbCarousel);export{DbCarousel};
+import{createDbIcon as e}from"./db-icons.js";import{t,subscribeDbLocale as s}from"../core/i18n.js";import{b as i}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{a as n}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-GM4TCAP5.js";import{coerceToContract as o}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{CAROUSEL_SIZES as a,CAROUSEL_VARIANTS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbCarousel extends HTMLElement{constructor(){super(...arguments),this.currentIndex=0,this.isAutoPlaying=!1,this.syncLocale=()=>{this.setAttribute("aria-roledescription",t("carousel.role")),this.querySelectorAll(".designbase-wc-carousel__slide").forEach(e=>e.setAttribute("aria-roledescription",t("carousel.slide"))),this.querySelector(".designbase-wc-carousel__nav-button--prev")?.setAttribute("aria-label",t("carousel.previous")),this.querySelector(".designbase-wc-carousel__nav-button--next")?.setAttribute("aria-label",t("carousel.next"))}}static get observedAttributes(){return["items","size","variant","theme","transition","auto-play","auto-play-interval","infinite","show-navigation","show-indicators","indicator-style","show-auto-play-control","show-title","show-description","disabled","readonly"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.unsubscribeLocale=s(this.syncLocale),this.style.display="block",this.clampCurrentIndex(),this.isAutoPlaying=this.getBool("auto-play"),this.render()}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.destroyEngine()}attributeChangedCallback(e){this.isConnected&&("items"===e&&this.clampCurrentIndex(),"auto-play"!==e&&"auto-play-interval"!==e||(this.isAutoPlaying=this.getBool("auto-play")),this.render())}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}clampCurrentIndex(){this.currentIndex>=this.items.length&&(this.currentIndex=0)}destroyEngine(){const e=this.isAutoPlaying;this.autoplay?.destroy(),this.autoplay=void 0,this.engine?.destroy(),this.engine=void 0,this.isAutoPlaying=e}getIndicatorType(){if(this.getBool("show-auto-play-control",!0)&&this.getBool("show-indicators",!0)&&this.items.length>1)return"combined";const e=this.getAttribute("indicator-style")||"dots";return"lines"===e?"line":"numbers"===e?"numbers":"dots"}getIndicatorSize(){const e=o(this.getAttribute("size"),a,"m");return"l"===e||"xl"===e?"m":"s"}goTo(e){this.getBool("disabled")||this.getBool("readonly")||e<0||e>=this.items.length||this.engine?.goTo(e)}goToPrev(){this.getBool("disabled")||this.getBool("readonly")||this.engine?.prev()}goToNext(){this.getBool("disabled")||this.getBool("readonly")||this.engine?.next()}render(){this.destroyEngine();const s=o(this.getAttribute("size"),a,"m"),l=o(this.getAttribute("variant"),r,"default"),c=this.getAttribute("theme")||"light",d=this.getAttribute("transition")||"slide",u=this.getBool("show-navigation",!0),h=this.getBool("show-indicators",!0),g=this.getBool("show-auto-play-control",!0),b=this.getBool("show-title",!0),m=this.getBool("show-description",!0),p=this.getBool("disabled"),y=this.getBool("readonly"),v=this.getAttribute("indicator-style")||"dots",A=g&&h&&this.items.length>1;this.className=["designbase-wc-carousel","db-slide",`designbase-wc-carousel--size-${s}`,`designbase-wc-carousel--variant-${l}`,`designbase-wc-carousel--theme-${c}`,`designbase-wc-carousel--transition-${d}`,`designbase-wc-carousel--indicator-${v}`,p&&"designbase-wc-carousel--disabled",y&&"designbase-wc-carousel--readonly"].filter(Boolean).join(" ");const _=document.createElement("div");_.className="designbase-wc-carousel__container";const w=document.createElement("div");if(w.className="designbase-wc-carousel__track db-slide__viewport",(p||y)&&(w.style.overflowX="hidden"),this.items.forEach((e,t)=>{const s=document.createElement("div");s.className="designbase-wc-carousel__slide"+(t===this.currentIndex?" designbase-wc-carousel__slide--active":""),s.style.flex="0 0 100%",s.style.width="100%",s.style.height="100%",s.style.minWidth="0";const i=e.image?"#ffffff":"";if(i&&(s.style.color=i),e.image){const i=document.createElement("div");i.className="designbase-wc-carousel__slide-image";const n=document.createElement("img");n.className="designbase-wc-carousel__slide-img",n.src=e.image,n.alt=e.alt||e.title||`Slide ${t+1}`,i.append(n),s.append(i)}if(b&&e.title||m&&e.description){const t=document.createElement("div");if(t.className="designbase-wc-carousel__slide-info",i&&(t.style.color=i),b&&e.title){const s=document.createElement("h3");s.className="designbase-wc-carousel__slide-title",s.textContent=e.title,i&&(s.style.color=i),t.append(s)}if(m&&e.description){const s=document.createElement("p");s.className="designbase-wc-carousel__slide-description",s.textContent=e.description,i&&(s.style.color=i),t.append(s)}s.append(t)}s.addEventListener("click",()=>{p||y||this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),w.append(s)}),_.append(w),u&&this.items.length>1){const s=document.createElement("button");s.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev",s.type="button",s.setAttribute("aria-label",t("carousel.previous")),s.append(e("chevron-left",20)),s.disabled=p||y,s.addEventListener("click",()=>this.goToPrev());const i=document.createElement("button");i.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next",i.type="button",i.setAttribute("aria-label",t("carousel.next")),i.append(e("chevron-right",20)),i.disabled=p||y,i.addEventListener("click",()=>this.goToNext()),_.append(s,i)}const x=[_];if(h&&this.items.length>1){const e=document.createElement("div");e.className="designbase-wc-carousel__controls";const t=document.createElement("div");t.className="designbase-wc-carousel__indicators";const s=document.createElement("db-indicator");s.setAttribute("current",String(this.currentIndex)),s.setAttribute("total",String(this.items.length)),s.setAttribute("type",this.getIndicatorType()),s.setAttribute("size",this.getIndicatorSize()),s.setAttribute("clickable",""),A&&(s.setAttribute("timer",""),s.setAttribute("progress","0"),s.setAttribute("timer-duration",String(Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)))),s.setAttribute("auto-roll","false"),this.isAutoPlaying?s.setAttribute("playing",""):s.removeAttribute("playing"),(p||y)&&s.setAttribute("playback-disabled","")),s.addEventListener("db-step-click",e=>{const t=e;this.goTo(t.detail.index)}),s.addEventListener("db-playing-change",e=>{const t=e;this.isAutoPlaying=t.detail.playing,p||y||(this.isAutoPlaying?this.autoplay?.play():this.autoplay?.pause())}),t.append(s),e.append(t),x.push(e)}this.replaceChildren(...x),this.engine=i(this,{startIndex:this.currentIndex,slidesPerView:1,gap:0,rewind:this.getBool("infinite",!0),drag:!p&&!y,keyboard:!p&&!y,label:this.getAttribute("aria-label")||"Carousel"});const sync=()=>{this.syncLocale();const e=this.engine.getState(),t=e.index!==this.currentIndex;this.currentIndex=e.index,w.querySelectorAll(".designbase-wc-carousel__slide").forEach((t,s)=>{t.classList.toggle("designbase-wc-carousel__slide--active",e.visible.includes(s))});const s=this.querySelector("db-indicator");s?.getAttribute("current")!==String(e.index)&&s?.setAttribute("current",String(e.index));const i=this.querySelector(".designbase-wc-carousel__nav-button--prev"),n=this.querySelector(".designbase-wc-carousel__nav-button--next");i&&(i.disabled=p||y||!e.canPrev),n&&(n.disabled=p||y||!e.canNext),t&&this.dispatchEvent(new CustomEvent("db-slide-change",{detail:{index:e.index},bubbles:!0,composed:!0}))};this.engine.on("change",sync),this.engine.on("refresh",sync),sync(),this.autoplay=n(this.engine,{delay:Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)),playOnInit:this.isAutoPlaying&&!p&&!y}),this.autoplay.onProgress(e=>{A&&this.querySelector("db-indicator")?.setAttribute("progress",String(e.progress))}),this.autoplay.onChange(e=>{p||y||(this.isAutoPlaying=e);const t=this.querySelector("db-indicator");A&&t?.toggleAttribute("playing",e)})}}customElements.get("db-carousel")||customElements.define("db-carousel",DbCarousel);export{DbCarousel};

package/dist/esm/components/db-chat-orb.d.ts

@@ -40,6 +40,10 @@ declare class DbChatOrb extends HTMLElement {
     private lastVoiceRipple;
     private previousVoiceLevel;
     private displayedVoiceLevel;
+    private dotsMix;
+    private layer;
+    private customShapes;
+    private shapeBuffer;
     private inputStream;
     private audioContext;
     private audioSource;
@@ -53,6 +57,15 @@ declare class DbChatOrb extends HTMLElement {
     set state(v: OrbState);
     get theme(): OrbTheme;
     set theme(v: OrbTheme);
+    /** thinking 상태의 표현. `dots` 는 구체가 작아지며 점 3개가 순서대로 튀는 로딩 모션으로 바뀝니다. */
+    get thinkingStyle(): 'orb' | 'dots';
+    set thinkingStyle(v: 'orb' | 'dots');
+    /**
+     * morph 로 순환할 모양 목록. 프리셋 이름(circle · squircle · flower · star · triangle · blob)
+     * 또는 SVG path 의 d 값을 섞어서 넣을 수 있습니다. 속성 `shape="circle,flower,star"` 로도 지정합니다.
+     */
+    get shapes(): string[];
+    set shapes(v: string[] | null);
     /** 외부 오디오 분석기가 전달하는 정규화 음성 레벨(0–1). */
     get voiceLevel(): number;
     set voiceLevel(v: number);