@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,134 +1 @@
-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 };
+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};

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

@@ -1,140 +1 @@
-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 };
+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};

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

@@ -1,304 +1 @@
-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 };
+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};