@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,134 @@
-const clamp=(t,r,a)=>Math.max(r,Math.min(a,t)),normalizeHex=t=>{const r=(t||"").trim().toUpperCase();return r?r.startsWith("#")?r:`#${r}`:""},isHex=t=>/^#?[0-9A-Fa-f]{6}$/.test(t||""),hexToRgb=t=>{const r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t.trim());return r?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:null},toHex=(t,r,a)=>{const h=t=>clamp(Math.round(t),0,255).toString(16).padStart(2,"0");return`#${h(t)}${h(r)}${h(a)}`.toUpperCase()},rgbToHsv=(t,r,a)=>{t/=255,r/=255,a/=255;const e=Math.max(t,r,a),s=e-Math.min(t,r,a);let n=0;if(0!==s){switch(e){case t:n=(r-a)/s+(r<a?6:0);break;case r:n=(a-t)/s+2;break;case a:n=(t-r)/s+4}n*=60}return{h:n,s:100*(0===e?0:s/e),v:100*e}},hsvToRgb=(t,r,a)=>{const e=(a/=100)*(r/=100),s=e*(1-Math.abs(t/60%2-1)),n=a-e;let o=0,c=0,u=0;return t>=0&&t<60?(o=e,c=s,u=0):t<120?(o=s,c=e,u=0):t<180?(o=0,c=e,u=s):t<240?(o=0,c=s,u=e):t<300?(o=s,c=0,u=e):(o=e,c=0,u=s),{r:Math.round(255*(o+n)),g:Math.round(255*(c+n)),b:Math.round(255*(u+n))}},rgbToHsl=(t,r,a)=>{t/=255,r/=255,a/=255;const e=Math.max(t,r,a),s=Math.min(t,r,a);let n=0,o=0;const c=(e+s)/2;if(e!==s){const u=e-s;switch(o=c>.5?u/(2-e-s):u/(e+s),e){case t:n=(r-a)/u+(r<a?6:0);break;case r:n=(a-t)/u+2;break;case a:n=(t-r)/u+4}n*=60}return{h:n,s:100*o,l:100*c}},formatColor=(t,r,a,e,s)=>{const n=s/100;switch(t){case"hex":default:return a;case"rgb":return`rgb(${r.r}, ${r.g}, ${r.b})`;case"rgba":return`rgba(${r.r}, ${r.g}, ${r.b}, ${n.toFixed(2)})`;case"hsl":return`hsl(${Math.round(e.h)}, ${Math.round(e.s)}%, ${Math.round(e.l)}%)`;case"hsla":return`hsla(${Math.round(e.h)}, ${Math.round(e.s)}%, ${Math.round(e.l)}%, ${n.toFixed(2)})`}};export{clamp,formatColor,hexToRgb,hsvToRgb,isHex,normalizeHex,rgbToHsl,rgbToHsv,toHex};
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const normalizeHex = (s) => {
+    const trimmed = (s || '').trim().toUpperCase();
+    if (!trimmed)
+        return '';
+    return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+};
+const isHex = (s) => /^#?[0-9A-Fa-f]{6}$/.test(s || '');
+const hexToRgb = (hex) => {
+    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+    if (!m)
+        return null;
+    return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+};
+const toHex = (r, g, b) => {
+    const h = (x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`.toUpperCase();
+};
+const rgbToHsv = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h *= 60;
+    }
+    const s = max === 0 ? 0 : d / max;
+    return { h, s: s * 100, v: max * 100 };
+};
+const hsvToRgb = (h, s, v) => {
+    s /= 100;
+    v /= 100;
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+    let rp = 0;
+    let gp = 0;
+    let bp = 0;
+    if (h >= 0 && h < 60) {
+        rp = c;
+        gp = x;
+        bp = 0;
+    }
+    else if (h < 120) {
+        rp = x;
+        gp = c;
+        bp = 0;
+    }
+    else if (h < 180) {
+        rp = 0;
+        gp = c;
+        bp = x;
+    }
+    else if (h < 240) {
+        rp = 0;
+        gp = x;
+        bp = c;
+    }
+    else if (h < 300) {
+        rp = x;
+        gp = 0;
+        bp = c;
+    }
+    else {
+        rp = c;
+        gp = 0;
+        bp = x;
+    }
+    return {
+        r: Math.round((rp + m) * 255),
+        g: Math.round((gp + m) * 255),
+        b: Math.round((bp + m) * 255),
+    };
+};
+const rgbToHsl = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h *= 60;
+    }
+    return { h, s: s * 100, l: l * 100 };
+};
+const formatColor = (format, rgb, hex, hsl, alphaPercent) => {
+    const alpha = alphaPercent / 100;
+    switch (format) {
+        case 'hex':
+            return hex;
+        case 'rgb':
+            return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+        case 'rgba':
+            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
+        case 'hsl':
+            return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
+        case 'hsla':
+            return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${alpha.toFixed(2)})`;
+        default:
+            return hex;
+    }
+};
+
+export { clamp, formatColor, hexToRgb, hsvToRgb, isHex, normalizeHex, rgbToHsl, rgbToHsv, toHex };

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

@@ -1 +1,140 @@
-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}},t=[{id:"today",label:"오늘",getRange:({today:t})=>clampRange({start:startOfDay(t),end:endOfDay(t)})},{id:"yesterday",label:"어제",getRange:({today:t})=>{const e=addDays(t,-1);return clampRange({start:e,end:endOfDay(e)})}},{id:"this-week",label:"이번 주",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:"이번 달",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:"올해",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:"사용자 지정",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,e="ko-KR")=>t.toLocaleDateString(e),generateWeekdays=t=>{const e=["일","월","화","수","목","금","토"];return"monday"===t&&e.push(e.shift()),e},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{t as DEFAULT_DATE_PICKER_PRESETS,addMonths,detectActivePresetId,endOfDay,formatDisplayDate,formatPanelInputDate,generateCalendarGrid,generateWeekdays,parseISODate,startOfDay,toISODate};
+const startOfDay = (date) => {
+    const next = new Date(date);
+    next.setHours(0, 0, 0, 0);
+    return next;
+};
+const endOfDay = (date) => {
+    const next = new Date(date);
+    next.setHours(23, 59, 59, 999);
+    return next;
+};
+const addDays = (date, days) => {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return startOfDay(next);
+};
+const getWeekStart = (date, startOfWeek) => {
+    const day = date.getDay();
+    const offset = startOfWeek === 'monday' ? (day + 6) % 7 : day;
+    return addDays(date, -offset);
+};
+const getWeekEnd = (weekStart) => endOfDay(addDays(weekStart, 6));
+const getMonthStart = (date) => startOfDay(new Date(date.getFullYear(), date.getMonth(), 1));
+const getMonthEnd = (date) => endOfDay(new Date(date.getFullYear(), date.getMonth() + 1, 0));
+const getYearStart = (date) => startOfDay(new Date(date.getFullYear(), 0, 1));
+const getYearEnd = (date) => endOfDay(new Date(date.getFullYear(), 11, 31));
+const clampRange = (range, minDate, maxDate) => {
+    let { start, end } = range;
+    if (minDate && start < minDate)
+        start = startOfDay(minDate);
+    if (maxDate && end > maxDate)
+        end = endOfDay(maxDate);
+    if (start > end)
+        return { start: end, end: start };
+    return { start, end };
+};
+const DEFAULT_DATE_PICKER_PRESETS = [
+    { id: 'today', label: '오늘', getRange: ({ today }) => clampRange({ start: startOfDay(today), end: endOfDay(today) }) },
+    {
+        id: 'yesterday',
+        label: '어제',
+        getRange: ({ today }) => {
+            const day = addDays(today, -1);
+            return clampRange({ start: day, end: endOfDay(day) });
+        },
+    },
+    {
+        id: 'this-week',
+        label: '이번 주',
+        getRange: ({ today, startOfWeek, minDate, maxDate }) => {
+            const start = getWeekStart(today, startOfWeek);
+            return clampRange({ start, end: getWeekEnd(start) }, minDate, maxDate);
+        },
+    },
+    {
+        id: 'this-month',
+        label: '이번 달',
+        getRange: ({ today, minDate, maxDate }) => clampRange({ start: getMonthStart(today), end: getMonthEnd(today) }, minDate, maxDate),
+    },
+    {
+        id: 'this-year',
+        label: '올해',
+        getRange: ({ today, minDate, maxDate }) => clampRange({ start: getYearStart(today), end: getYearEnd(today) }, minDate, maxDate),
+    },
+    { id: 'custom', label: '사용자 지정', getRange: () => null },
+];
+const addMonths = (date, months) => {
+    const next = new Date(date);
+    next.setDate(1);
+    next.setMonth(next.getMonth() + months);
+    return next;
+};
+const toISODate = (date) => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+};
+const parseISODate = (value) => {
+    if (!value)
+        return null;
+    const match = value.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match)
+        return null;
+    const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    return Number.isNaN(date.getTime()) ? null : startOfDay(date);
+};
+const formatDisplayDate = (date, locale = 'ko-KR') => date.toLocaleDateString(locale);
+const generateWeekdays = (startOfWeek) => {
+    const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
+    if (startOfWeek === 'monday')
+        weekdays.push(weekdays.shift());
+    return weekdays;
+};
+const generateCalendarGrid = (baseDate, startOfWeek, monthOnly = false) => {
+    const year = baseDate.getFullYear();
+    const month = baseDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const leadingBlankCount = startOfWeek === 'monday' ? (firstDay.getDay() + 6) % 7 : firstDay.getDay();
+    if (monthOnly) {
+        const grid = [];
+        for (let i = 0; i < leadingBlankCount; i += 1) {
+            grid.push(null);
+        }
+        const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
+        for (let day = 1; day <= lastDayOfMonth; day += 1) {
+            grid.push(new Date(year, month, day));
+        }
+        return grid;
+    }
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - leadingBlankCount);
+    return Array.from({ length: 42 }, (_, index) => {
+        const date = new Date(startDate);
+        date.setDate(startDate.getDate() + index);
+        return date;
+    });
+};
+const detectActivePresetId = (value, presets, context) => {
+    if (!value)
+        return 'custom';
+    const valueStart = value.start.toDateString();
+    const valueEnd = value.end.toDateString();
+    for (const preset of presets) {
+        if (preset.id === 'custom')
+            continue;
+        const range = preset.getRange(context);
+        if (!range)
+            continue;
+        if (range.start.toDateString() === valueStart && range.end.toDateString() === valueEnd)
+            return preset.id;
+    }
+    return 'custom';
+};
+const formatPanelInputDate = (date, locale) => {
+    if (!date)
+        return '';
+    return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+};
+
+export { DEFAULT_DATE_PICKER_PRESETS, addMonths, detectActivePresetId, endOfDay, formatDisplayDate, formatPanelInputDate, generateCalendarGrid, generateWeekdays, parseISODate, startOfDay, toISODate };

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

@@ -1 +1,304 @@
-import{createDbIcon as e}from"./db-icons.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,n=this.getExpandMode();t.length>0?this.expanded=new Set(t.filter(t=>e.includes(t))):this.expanded="all"!==n?new Set:new Set(e)}iconSize(e){return"s"===e?16:"l"===e?24:20}collectPanelContent(){const e=new Map,register=(t,n)=>{if(!(t instanceof HTMLElement)||"SLOT"===t.tagName)return;e.has(n)||e.set(n,[]);const s=e.get(n);s.includes(t)||s.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 n=e.querySelector(":scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner");n&&Array.from(n.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,n)=>{const s=e[n];if(!s)return;const i=this.isItemExpanded(s,n);t.classList.toggle("designbase-wc-accordion__item--expanded",i),t.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(s.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 t=this.collectPanelContent(),n=this.getAttribute("variant")||"default",s=this.getAttribute("size")||"m",i=this.getExpandMode(),a=this.getAttribute("default-item-type")||"none",d=this.items,c=this.iconSize(s);this.className=["designbase-wc-accordion",`designbase-wc-accordion--${n}`,`designbase-wc-accordion--${s}`,"multiple"===i&&"designbase-wc-accordion--multiple","single"===i&&"designbase-wc-accordion--single","all"===i&&"designbase-wc-accordion--all"].filter(Boolean).join(" "),this.setAttribute("role","region"),this.setAttribute("aria-label","아코디언"),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach(e=>e.remove()),d.forEach((s,i)=>{const d=this.resolveItemKey(s,i),r=this.isItemExpanded(s,i),o=document.createElement("div");o.className=["designbase-wc-accordion__item",`designbase-wc-accordion__item--${n}`,r&&"designbase-wc-accordion__item--expanded",s.disabled&&"designbase-wc-accordion__item--disabled"].filter(Boolean).join(" "),o.dataset.itemKey=d;const l=document.createElement("button");l.type="button",l.className="designbase-wc-accordion__trigger",l.disabled=Boolean(s.disabled),l.setAttribute("aria-expanded",String(r)),l.setAttribute("aria-controls",`accordion-content-${d}`),l.addEventListener("click",()=>{s.disabled||this.toggle(d)});const m=s.itemType||a;if("number"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__number",e.textContent=`${i+1}.`,l.append(e)}else if("question"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__question",e.textContent="Q.",l.append(e)}else if("icon"===m&&s.icon){const t=document.createElement("div");t.className="designbase-wc-accordion__icon",t.append(e(s.icon,c)),l.append(t)}const p=document.createElement("span");p.className="designbase-wc-accordion__title",p.textContent=s.title;const h=document.createElement("div");h.className="designbase-wc-accordion__chevron",h.append(e("chevron-down",c)),l.append(p,h);const u=document.createElement("div");u.id=`accordion-content-${d}`,u.className="designbase-wc-accordion__content",u.setAttribute("aria-hidden",String(!r));const b=document.createElement("div");b.className="designbase-wc-accordion__content-inner";const g=t.get(i)||[];if(g.length>0)g.forEach(e=>{e.removeAttribute("slot"),b.append(e)});else if(s.content){const e=document.createElement("p");e.className="designbase-wc-accordion__content-text",e.textContent=s.content,b.append(e)}u.append(b),o.append(l,u),this.append(o)}),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 n=Array.from(this.expanded);this.syncExpandedState(),this.suppressExpandedAttrCallback=!0,this.expandedItems=n,this.suppressExpandedAttrCallback=!1,this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:n},bubbles:!0,composed:!0}))}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};
+import { createDbIcon } from './db-icons.js';
+
+class DbAccordion extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.expanded = new Set();
+        this.isRendering = false;
+        this.suppressExpandedAttrCallback = false;
+    }
+    static get observedAttributes() {
+        return [
+            'items',
+            'variant',
+            'size',
+            'allow-multiple',
+            'expand-mode',
+            'expanded-items',
+            'default-item-type',
+        ];
+    }
+    get items() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get allowMultiple() {
+        return this.hasAttribute('allow-multiple');
+    }
+    set allowMultiple(value) {
+        this.toggleAttribute('allow-multiple', value);
+    }
+    get expandedItems() {
+        const raw = (this.getAttribute('expanded-items') || '').trim();
+        if (!raw)
+            return [];
+        if (raw === 'all') {
+            return this.items.map((item, index) => this.resolveItemKey(item, index));
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed)) {
+                return parsed.map((item) => String(item).trim()).filter(Boolean);
+            }
+        }
+        catch {
+            // comma-separated fallback
+        }
+        return raw
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean);
+    }
+    set expandedItems(value) {
+        if (Array.isArray(value)) {
+            this.setAttribute('expanded-items', value.join(','));
+            return;
+        }
+        this.setAttribute('expanded-items', value);
+    }
+    connectedCallback() {
+        this.syncExpandedFromAttributes();
+        this.render();
+        this.childObserver = new MutationObserver((mutations) => {
+            if (this.isRendering)
+                return;
+            const hasSlottedChange = mutations.some((mutation) => Array.from(mutation.addedNodes).some((node) => node instanceof HTMLElement && node.hasAttribute('slot')));
+            if (hasSlottedChange)
+                this.render();
+        });
+        this.childObserver.observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        this.childObserver?.disconnect();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'expanded-items') {
+            if (this.suppressExpandedAttrCallback)
+                return;
+            this.syncExpandedFromAttributes();
+            this.syncExpandedState();
+            return;
+        }
+        if (name === 'expand-mode' || name === 'allow-multiple') {
+            this.syncExpandedFromAttributes();
+            this.syncExpandedState();
+            return;
+        }
+        if (name === 'items') {
+            this.syncExpandedFromAttributes();
+            this.render();
+            return;
+        }
+        this.render();
+    }
+    /** id와 index 문자열 충돌 방지 — 항목당 단일 키만 사용 */
+    resolveItemKey(item, index) {
+        return item.id ?? String(index);
+    }
+    getExpandMode() {
+        const mode = this.getAttribute('expand-mode');
+        if (mode === 'single' || mode === 'multiple' || mode === 'all') {
+            return mode;
+        }
+        if (this.hasAttribute('allow-multiple')) {
+            return 'multiple';
+        }
+        return 'multiple';
+    }
+    syncExpandedFromAttributes() {
+        const keys = this.items.map((item, index) => this.resolveItemKey(item, index));
+        const fromAttr = this.expandedItems;
+        const mode = this.getExpandMode();
+        if (fromAttr.length > 0) {
+            this.expanded = new Set(fromAttr.filter((key) => keys.includes(key)));
+            return;
+        }
+        if (mode === 'all') {
+            this.expanded = new Set(keys);
+            return;
+        }
+        this.expanded = new Set();
+    }
+    iconSize(size) {
+        if (size === 's')
+            return 16;
+        if (size === 'l')
+            return 24;
+        return 20;
+    }
+    collectPanelContent() {
+        const map = new Map();
+        const register = (node, index) => {
+            if (!(node instanceof HTMLElement) || node.tagName === 'SLOT')
+                return;
+            if (!map.has(index))
+                map.set(index, []);
+            const list = map.get(index);
+            if (!list.includes(node))
+                list.push(node);
+        };
+        Array.from(this.children).forEach((child) => {
+            const match = child.getAttribute('slot')?.match(/^content-(\d+)$/);
+            if (match)
+                register(child, Number(match[1]));
+        });
+        this.querySelectorAll(':scope > .designbase-wc-accordion__item').forEach((item, index) => {
+            const inner = item.querySelector(':scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner');
+            if (!inner)
+                return;
+            Array.from(inner.children).forEach((child) => register(child, index));
+        });
+        return map;
+    }
+    isItemExpanded(item, index) {
+        return this.expanded.has(this.resolveItemKey(item, index));
+    }
+    syncExpandedState() {
+        const items = this.items;
+        this.querySelectorAll(':scope > .designbase-wc-accordion__item').forEach((wrapper, index) => {
+            const item = items[index];
+            if (!item)
+                return;
+            const expanded = this.isItemExpanded(item, index);
+            wrapper.classList.toggle('designbase-wc-accordion__item--expanded', expanded);
+            wrapper.classList.toggle('designbase-wc-accordion__item--disabled', Boolean(item.disabled));
+            const trigger = wrapper.querySelector('.designbase-wc-accordion__trigger');
+            const content = wrapper.querySelector('.designbase-wc-accordion__content');
+            trigger?.setAttribute('aria-expanded', String(expanded));
+            content?.setAttribute('aria-hidden', String(!expanded));
+        });
+    }
+    render() {
+        this.isRendering = true;
+        const panelContent = this.collectPanelContent();
+        const variant = this.getAttribute('variant') || 'default';
+        const size = this.getAttribute('size') || 'm';
+        const expandMode = this.getExpandMode();
+        const defaultItemType = this.getAttribute('default-item-type') || 'none';
+        const items = this.items;
+        const iconPx = this.iconSize(size);
+        this.className = [
+            'designbase-wc-accordion',
+            `designbase-wc-accordion--${variant}`,
+            `designbase-wc-accordion--${size}`,
+            expandMode === 'multiple' && 'designbase-wc-accordion--multiple',
+            expandMode === 'single' && 'designbase-wc-accordion--single',
+            expandMode === 'all' && 'designbase-wc-accordion--all',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'region');
+        this.setAttribute('aria-label', '아코디언');
+        this.querySelectorAll(':scope > .designbase-wc-accordion__item').forEach((node) => node.remove());
+        items.forEach((item, index) => {
+            const key = this.resolveItemKey(item, index);
+            const expanded = this.isItemExpanded(item, index);
+            const wrapper = document.createElement('div');
+            wrapper.className = [
+                'designbase-wc-accordion__item',
+                `designbase-wc-accordion__item--${variant}`,
+                expanded && 'designbase-wc-accordion__item--expanded',
+                item.disabled && 'designbase-wc-accordion__item--disabled',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            wrapper.dataset.itemKey = key;
+            const trigger = document.createElement('button');
+            trigger.type = 'button';
+            trigger.className = 'designbase-wc-accordion__trigger';
+            trigger.disabled = Boolean(item.disabled);
+            trigger.setAttribute('aria-expanded', String(expanded));
+            trigger.setAttribute('aria-controls', `accordion-content-${key}`);
+            trigger.addEventListener('click', () => {
+                if (!item.disabled)
+                    this.toggle(key);
+            });
+            const itemType = item.itemType || defaultItemType;
+            if (itemType === 'number') {
+                const prefix = document.createElement('div');
+                prefix.className = 'designbase-wc-accordion__number';
+                prefix.textContent = `${index + 1}.`;
+                trigger.append(prefix);
+            }
+            else if (itemType === 'question') {
+                const prefix = document.createElement('div');
+                prefix.className = 'designbase-wc-accordion__question';
+                prefix.textContent = 'Q.';
+                trigger.append(prefix);
+            }
+            else if (itemType === 'icon' && item.icon) {
+                const prefix = document.createElement('div');
+                prefix.className = 'designbase-wc-accordion__icon';
+                prefix.append(createDbIcon(item.icon, iconPx));
+                trigger.append(prefix);
+            }
+            const title = document.createElement('span');
+            title.className = 'designbase-wc-accordion__title';
+            title.textContent = item.title;
+            const chevron = document.createElement('div');
+            chevron.className = 'designbase-wc-accordion__chevron';
+            chevron.append(createDbIcon('chevron-down', iconPx));
+            trigger.append(title, chevron);
+            const content = document.createElement('div');
+            content.id = `accordion-content-${key}`;
+            content.className = 'designbase-wc-accordion__content';
+            content.setAttribute('aria-hidden', String(!expanded));
+            const inner = document.createElement('div');
+            inner.className = 'designbase-wc-accordion__content-inner';
+            const slottedNodes = panelContent.get(index) || [];
+            if (slottedNodes.length > 0) {
+                slottedNodes.forEach((node) => {
+                    node.removeAttribute('slot');
+                    inner.append(node);
+                });
+            }
+            else if (item.content) {
+                const answer = document.createElement('p');
+                answer.className = 'designbase-wc-accordion__content-text';
+                answer.textContent = item.content;
+                inner.append(answer);
+            }
+            content.append(inner);
+            wrapper.append(trigger, content);
+            this.append(wrapper);
+        });
+        this.isRendering = false;
+    }
+    toggle(key) {
+        const mode = this.getExpandMode();
+        if (this.expanded.has(key)) {
+            this.expanded.delete(key);
+        }
+        else if (mode === 'single') {
+            this.expanded = new Set([key]);
+        }
+        else {
+            this.expanded.add(key);
+        }
+        const expandedItems = Array.from(this.expanded);
+        this.syncExpandedState();
+        this.suppressExpandedAttrCallback = true;
+        this.expandedItems = expandedItems;
+        this.suppressExpandedAttrCallback = false;
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { expandedItems },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+if (!customElements.get('db-accordion')) {
+    customElements.define('db-accordion', DbAccordion);
+}
+
+export { DbAccordion };