@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,340 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbList extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.groupName = `db-list-${Math.random().toString(36).slice(2, 9)}`;
-    }
-    static get observedAttributes() {
-        return [
-            'items',
-            'size',
-            'variant',
-            'layout',
-            'spacing',
-            'selectable',
-            'multiple',
-            'selected-items',
-            'empty-message',
-            'show-description',
-            'show-arrow',
-            'show-badge',
-            'loading',
-            'loading-count',
-        ];
-    }
-    get items() {
-        try {
-            return JSON.parse(this.getAttribute('items') || '[]');
-        }
-        catch {
-            return [];
-        }
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get selectedItems() {
-        const raw = this.getAttribute('selected-items') || '[]';
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed.map(String) : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    set selectedItems(value) {
-        this.setAttribute('selected-items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'selected-items') {
-            this.syncSelectionState();
-            return;
-        }
-        this.render();
-    }
-    flag(name, defaultValue = true) {
-        if (!this.hasAttribute(name))
-            return defaultValue;
-        return this.getAttribute(name) !== 'false';
-    }
-    controlSize() {
-        const size = this.getAttribute('size') || 'm';
-        return size === 'l' ? 'm' : 's';
-    }
-    parseBadge(badge) {
-        if (!badge)
-            return null;
-        if (typeof badge === 'string') {
-            return { text: badge, variant: 'primary', style: 'text' };
-        }
-        return {
-            text: badge.text,
-            variant: badge.variant || 'primary',
-            style: badge.style || 'text',
-        };
-    }
-    isSelected(item) {
-        return item.selected || this.selectedItems.includes(item.id);
-    }
-    setSelection(next) {
-        const serialized = JSON.stringify(next);
-        if (this.getAttribute('selected-items') === serialized) {
-            this.syncSelectionState();
-            return;
-        }
-        this.setAttribute('selected-items', serialized);
-        this.syncSelectionState();
-        this.dispatchEvent(new CustomEvent('db-select', {
-            detail: { selectedItems: next },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    toggleSelection(id) {
-        const multiple = this.hasAttribute('multiple');
-        const current = this.selectedItems;
-        let next;
-        if (multiple) {
-            next = current.includes(id) ? current.filter((itemId) => itemId !== id) : [...current, id];
-        }
-        else {
-            next = current.includes(id) ? [] : [id];
-        }
-        this.setSelection(next);
-    }
-    syncSelectionState() {
-        const selected = new Set(this.selectedItems);
-        this.querySelectorAll(':scope > .designbase-wc-list__item').forEach((row) => {
-            const id = row.dataset.itemId;
-            if (!id)
-                return;
-            const isSelected = selected.has(id);
-            row.classList.toggle('designbase-wc-list__item--selected', isSelected);
-            row.setAttribute('aria-selected', String(isSelected));
-            const control = row.querySelector('db-checkbox, db-radio');
-            if (!control)
-                return;
-            if (isSelected)
-                control.setAttribute('checked', '');
-            else
-                control.removeAttribute('checked');
-        });
-    }
-    createSelectControl(item, multiple) {
-        const wrap = document.createElement('div');
-        wrap.className = 'designbase-wc-list__item-select';
-        const control = document.createElement(multiple ? 'db-checkbox' : 'db-radio');
-        control.setAttribute('has-label', 'false');
-        control.setAttribute('size', this.controlSize());
-        control.setAttribute('value', item.id);
-        if (!multiple) {
-            control.setAttribute('name', this.groupName);
-        }
-        if (this.isSelected(item)) {
-            control.setAttribute('checked', '');
-        }
-        if (item.disabled) {
-            control.setAttribute('disabled', '');
-        }
-        control.addEventListener('click', (event) => event.stopPropagation());
-        control.addEventListener('db-change', (event) => {
-            event.stopPropagation();
-            if (item.disabled)
-                return;
-            this.toggleSelection(item.id);
-        });
-        wrap.append(control);
-        return wrap;
-    }
-    createBadge(badgeData) {
-        const badge = document.createElement('db-badge');
-        badge.setAttribute('size', 's');
-        badge.setAttribute('variant', badgeData.variant);
-        badge.setAttribute('badge-style', badgeData.style);
-        if (badgeData.style === 'number') {
-            badge.setAttribute('count', badgeData.text);
-        }
-        else {
-            badge.textContent = badgeData.text;
-        }
-        return badge;
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'navigation';
-        const layout = this.getAttribute('layout') || 'vertical';
-        const spacing = this.getAttribute('spacing') || 's';
-        const selectable = this.hasAttribute('selectable');
-        const multiple = this.hasAttribute('multiple');
-        const loading = this.hasAttribute('loading');
-        const loadingCount = Number(this.getAttribute('loading-count') || 3);
-        const showDescription = this.flag('show-description', false);
-        const showArrow = this.flag('show-arrow', true);
-        const showBadge = this.flag('show-badge', true);
-        const items = this.items;
-        const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
-        this.className = [
-            'designbase-wc-list',
-            `designbase-wc-list--size-${size}`,
-            `designbase-wc-list--variant-${variant}`,
-            `designbase-wc-list--layout-${layout}`,
-            `designbase-wc-list--spacing-${spacing}`,
-            selectable && 'designbase-wc-list--selectable',
-            multiple && 'designbase-wc-list--multiple',
-            loading && 'designbase-wc-list--loading',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        if (loading) {
-            for (let index = 0; index < loadingCount; index += 1) {
-                const row = document.createElement('div');
-                row.className = 'designbase-wc-list__item designbase-wc-list__item--loading';
-                row.innerHTML = `
-                    <div class="designbase-wc-list__item-skeleton">
-                        <div class="designbase-wc-list__item-skeleton-icon"></div>
-                        <div class="designbase-wc-list__item-skeleton-content">
-                            <div class="designbase-wc-list__item-skeleton-title"></div>
-                            <div class="designbase-wc-list__item-skeleton-description"></div>
-                        </div>
-                    </div>
-                `;
-                this.append(row);
-            }
-            return;
-        }
-        if (items.length === 0) {
-            const empty = document.createElement('div');
-            empty.className = 'designbase-wc-list__empty';
-            empty.textContent = this.getAttribute('empty-message') || '항목이 없습니다.';
-            this.append(empty);
-            return;
-        }
-        items.forEach((item, index) => {
-            const isSelected = this.isSelected(item);
-            const hasDescription = showDescription && Boolean(item.description);
-            const hasMeta = Boolean(item.meta?.length);
-            const badgeData = this.parseBadge(item.badge);
-            const hasTrailing = Boolean((showBadge && badgeData) || showArrow);
-            const row = document.createElement('div');
-            row.className = [
-                'designbase-wc-list__item',
-                `designbase-wc-list__item--size-${size}`,
-                `designbase-wc-list__item--variant-${variant}`,
-                `designbase-wc-list__item--layout-${layout}`,
-                `designbase-wc-list__item--spacing-${spacing}`,
-                isSelected && 'designbase-wc-list__item--selected',
-                item.disabled && 'designbase-wc-list__item--disabled',
-                (selectable || !item.disabled) && 'designbase-wc-list__item--clickable',
-                item.icon && 'designbase-wc-list__item--with-leading',
-                (hasDescription || hasMeta) && 'designbase-wc-list__item--with-secondary',
-                hasTrailing && 'designbase-wc-list__item--with-trailing',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            row.dataset.itemId = item.id;
-            row.tabIndex = item.disabled ? -1 : 0;
-            if (selectable) {
-                row.setAttribute('aria-selected', String(isSelected));
-            }
-            if (selectable) {
-                row.append(this.createSelectControl(item, multiple));
-            }
-            if (item.icon) {
-                const iconWrap = document.createElement('div');
-                iconWrap.className = 'designbase-wc-list__item-icon';
-                iconWrap.append(createDbIcon(item.icon, iconSize));
-                row.append(iconWrap);
-            }
-            else if (item.image) {
-                const imageWrap = document.createElement('div');
-                imageWrap.className = 'designbase-wc-list__item-image';
-                const image = document.createElement('img');
-                image.src = item.image;
-                image.alt = item.title;
-                imageWrap.append(image);
-                row.append(imageWrap);
-            }
-            const content = document.createElement('div');
-            content.className = 'designbase-wc-list__item-content';
-            const header = document.createElement('div');
-            header.className = 'designbase-wc-list__item-header';
-            const title = document.createElement('h4');
-            title.className = 'designbase-wc-list__item-title';
-            title.textContent = item.title;
-            header.append(title);
-            content.append(header);
-            if (hasDescription) {
-                const description = document.createElement('p');
-                description.className = 'designbase-wc-list__item-description';
-                description.textContent = item.description || '';
-                content.append(description);
-            }
-            if (hasMeta && item.meta) {
-                const meta = document.createElement('div');
-                meta.className = 'designbase-wc-list__item-meta';
-                item.meta.forEach((metaItem) => {
-                    const metaRow = document.createElement('div');
-                    metaRow.className = 'designbase-wc-list__item-meta-item';
-                    const label = document.createElement('span');
-                    label.className = 'designbase-wc-list__item-meta-label';
-                    label.textContent = `${metaItem.label}:`;
-                    const value = document.createElement('span');
-                    value.className = 'designbase-wc-list__item-meta-value';
-                    value.textContent = metaItem.value;
-                    metaRow.append(label, value);
-                    meta.append(metaRow);
-                });
-                content.append(meta);
-            }
-            row.append(content);
-            if (hasTrailing) {
-                const trailing = document.createElement('div');
-                trailing.className = 'designbase-wc-list__item-trailing';
-                if (showBadge && badgeData) {
-                    trailing.append(this.createBadge(badgeData));
-                }
-                if (showArrow) {
-                    const arrow = document.createElement('div');
-                    arrow.className = 'designbase-wc-list__item-arrow';
-                    arrow.setAttribute('aria-hidden', 'true');
-                    arrow.append(createDbIcon('chevron-right', 16));
-                    trailing.append(arrow);
-                }
-                row.append(trailing);
-            }
-            const handleActivate = () => {
-                if (item.disabled)
-                    return;
-                this.dispatchEvent(new CustomEvent('db-item-click', {
-                    detail: { item, index },
-                    bubbles: true,
-                    composed: true,
-                }));
-                if (selectable) {
-                    this.toggleSelection(item.id);
-                }
-            };
-            row.addEventListener('click', handleActivate);
-            row.addEventListener('keydown', (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    handleActivate();
-                }
-            });
-            this.append(row);
-        });
-    }
-}
-if (!customElements.get('db-list')) {
-    customElements.define('db-list', DbList);
-}
-
-export { DbList };
+import{createDbIcon as e}from"./db-icons.js";class DbList extends HTMLElement{constructor(){super(...arguments),this.groupName=`db-list-${Math.random().toString(36).slice(2,9)}`}static get observedAttributes(){return["items","size","variant","layout","spacing","selectable","multiple","selected-items","empty-message","show-description","show-arrow","show-badge","loading","loading-count"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get selectedItems(){const e=this.getAttribute("selected-items")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return[]}}set selectedItems(e){this.setAttribute("selected-items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){this.isConnected&&("selected-items"!==e?this.render():this.syncSelectionState())}flag(e,t=!0){return this.hasAttribute(e)?"false"!==this.getAttribute(e):t}controlSize(){return"l"===(this.getAttribute("size")||"m")?"m":"s"}parseBadge(e){return e?"string"==typeof e?{text:e,variant:"primary",style:"text"}:{text:e.text,variant:e.variant||"primary",style:e.style||"text"}:null}isSelected(e){return e.selected||this.selectedItems.includes(e.id)}setSelection(e){const t=JSON.stringify(e);this.getAttribute("selected-items")!==t?(this.setAttribute("selected-items",t),this.syncSelectionState(),this.dispatchEvent(new CustomEvent("db-select",{detail:{selectedItems:e},bubbles:!0,composed:!0}))):this.syncSelectionState()}toggleSelection(e){const t=this.hasAttribute("multiple"),s=this.selectedItems;let i;i=t?s.includes(e)?s.filter(t=>t!==e):[...s,e]:s.includes(e)?[]:[e],this.setSelection(i)}syncSelectionState(){const e=new Set(this.selectedItems);this.querySelectorAll(":scope > .designbase-wc-list__item").forEach(t=>{const s=t.dataset.itemId;if(!s)return;const i=e.has(s);t.classList.toggle("designbase-wc-list__item--selected",i),t.setAttribute("aria-selected",String(i));const n=t.querySelector("db-checkbox, db-radio");n&&(i?n.setAttribute("checked",""):n.removeAttribute("checked"))})}createSelectControl(e,t){const s=document.createElement("div");s.className="designbase-wc-list__item-select";const i=document.createElement(t?"db-checkbox":"db-radio");return i.setAttribute("has-label","false"),i.setAttribute("size",this.controlSize()),i.setAttribute("value",e.id),t||i.setAttribute("name",this.groupName),this.isSelected(e)&&i.setAttribute("checked",""),e.disabled&&i.setAttribute("disabled",""),i.addEventListener("click",e=>e.stopPropagation()),i.addEventListener("db-change",t=>{t.stopPropagation(),e.disabled||this.toggleSelection(e.id)}),s.append(i),s}createBadge(e){const t=document.createElement("db-badge");return t.setAttribute("size","s"),t.setAttribute("variant",e.variant),t.setAttribute("badge-style",e.style),"number"===e.style?t.setAttribute("count",e.text):t.textContent=e.text,t}render(){const t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"navigation",i=this.getAttribute("layout")||"vertical",n=this.getAttribute("spacing")||"s",a=this.hasAttribute("selectable"),c=this.hasAttribute("multiple"),l=this.hasAttribute("loading"),d=Number(this.getAttribute("loading-count")||3),r=this.flag("show-description",!1),o=this.flag("show-arrow",!0),m=this.flag("show-badge",!0),b=this.items,g="s"===t?16:"l"===t?24:20;if(this.className=["designbase-wc-list",`designbase-wc-list--size-${t}`,`designbase-wc-list--variant-${s}`,`designbase-wc-list--layout-${i}`,`designbase-wc-list--spacing-${n}`,a&&"designbase-wc-list--selectable",c&&"designbase-wc-list--multiple",l&&"designbase-wc-list--loading"].filter(Boolean).join(" "),this.replaceChildren(),l)for(let e=0;e<d;e+=1){const e=document.createElement("div");e.className="designbase-wc-list__item designbase-wc-list__item--loading",e.innerHTML='\n                    <div class="designbase-wc-list__item-skeleton">\n                        <div class="designbase-wc-list__item-skeleton-icon"></div>\n                        <div class="designbase-wc-list__item-skeleton-content">\n                            <div class="designbase-wc-list__item-skeleton-title"></div>\n                            <div class="designbase-wc-list__item-skeleton-description"></div>\n                        </div>\n                    </div>\n                ',this.append(e)}else{if(0===b.length){const e=document.createElement("div");return e.className="designbase-wc-list__empty",e.textContent=this.getAttribute("empty-message")||"항목이 없습니다.",void this.append(e)}b.forEach((l,d)=>{const b=this.isSelected(l),u=r&&Boolean(l.description),h=Boolean(l.meta?.length),p=this.parseBadge(l.badge),_=Boolean(m&&p||o),w=document.createElement("div");if(w.className=["designbase-wc-list__item",`designbase-wc-list__item--size-${t}`,`designbase-wc-list__item--variant-${s}`,`designbase-wc-list__item--layout-${i}`,`designbase-wc-list__item--spacing-${n}`,b&&"designbase-wc-list__item--selected",l.disabled&&"designbase-wc-list__item--disabled",(a||!l.disabled)&&"designbase-wc-list__item--clickable",l.icon&&"designbase-wc-list__item--with-leading",(u||h)&&"designbase-wc-list__item--with-secondary",_&&"designbase-wc-list__item--with-trailing"].filter(Boolean).join(" "),w.dataset.itemId=l.id,w.tabIndex=l.disabled?-1:0,a&&w.setAttribute("aria-selected",String(b)),a&&w.append(this.createSelectControl(l,c)),l.icon){const t=document.createElement("div");t.className="designbase-wc-list__item-icon",t.append(e(l.icon,g)),w.append(t)}else if(l.image){const e=document.createElement("div");e.className="designbase-wc-list__item-image";const t=document.createElement("img");t.src=l.image,t.alt=l.title,e.append(t),w.append(e)}const v=document.createElement("div");v.className="designbase-wc-list__item-content";const A=document.createElement("div");A.className="designbase-wc-list__item-header";const y=document.createElement("h4");if(y.className="designbase-wc-list__item-title",y.textContent=l.title,A.append(y),v.append(A),u){const e=document.createElement("p");e.className="designbase-wc-list__item-description",e.textContent=l.description||"",v.append(e)}if(h&&l.meta){const e=document.createElement("div");e.className="designbase-wc-list__item-meta",l.meta.forEach(t=>{const s=document.createElement("div");s.className="designbase-wc-list__item-meta-item";const i=document.createElement("span");i.className="designbase-wc-list__item-meta-label",i.textContent=`${t.label}:`;const n=document.createElement("span");n.className="designbase-wc-list__item-meta-value",n.textContent=t.value,s.append(i,n),e.append(s)}),v.append(e)}if(w.append(v),_){const t=document.createElement("div");if(t.className="designbase-wc-list__item-trailing",m&&p&&t.append(this.createBadge(p)),o){const s=document.createElement("div");s.className="designbase-wc-list__item-arrow",s.setAttribute("aria-hidden","true"),s.append(e("chevron-right",16)),t.append(s)}w.append(t)}const handleActivate=()=>{l.disabled||(this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:l,index:d},bubbles:!0,composed:!0})),a&&this.toggleSelection(l.id))};w.addEventListener("click",handleActivate),w.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),handleActivate())}),this.append(w)})}}}customElements.get("db-list")||customElements.define("db-list",DbList);export{DbList};

package/dist/esm/components/db-logo-svg.js

@@ -1,72 +1 @@
-const LOGO_PATHS = `
-<polygon points="58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3"/>
-<path d="M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z"/>
-<rect x="122.7" y="0.4" width="8.8" height="39.2"/>
-<path d="M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z"/>
-<polygon points="209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4"/>
-<path d="M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z"/>
-<path d="M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z"/>
-<path d="M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z"/>
-<polygon points="364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3"/>
-<path d="M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z"/>
-`;
-const MARK_PATH = 'M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z';
-const LOGO_DIMENSIONS = {
-    xs: { width: 96, height: 20, markSize: 19 },
-    s: { width: 125, height: 26, markSize: 25 },
-    m: { width: 193, height: 40, markSize: 38 },
-    l: { width: 256, height: 53, markSize: 50 },
-    xl: { width: 320, height: 66, markSize: 63 },
-};
-function getLogoDimensions(size) {
-    return LOGO_DIMENSIONS[size] || LOGO_DIMENSIONS.m;
-}
-function getLogoColor(variant) {
-    if (variant === 'original' || variant === 'dark')
-        return '#000000';
-    if (variant === 'light' || variant === 'white')
-        return '#ffffff';
-    if (variant === 'primary')
-        return 'var(--db-brand-primary)';
-    if (variant === 'secondary')
-        return 'var(--db-text-secondary)';
-    // default (및 미지정): 테마 텍스트 색 — 다크모드에서 밝게
-    return 'var(--db-text-primary)';
-}
-function createDesignBaseLogoSvg(width, height, color, className) {
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('width', String(width));
-    svg.setAttribute('height', String(height));
-    svg.setAttribute('viewBox', '0 0 386 40');
-    svg.setAttribute('fill', 'none');
-    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svg.setAttribute('aria-label', 'DesignBase Logo');
-    if (className)
-        svg.setAttribute('class', className);
-    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-    group.setAttribute('fill', color || 'currentColor');
-    group.innerHTML = LOGO_PATHS;
-    svg.append(group);
-    return svg;
-}
-function createDesignBaseLogoMarkSvg(markSize, color, className) {
-    const aspectRatio = 95 / 100;
-    const width = markSize * aspectRatio;
-    const height = markSize;
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('width', String(width));
-    svg.setAttribute('height', String(height));
-    svg.setAttribute('viewBox', '0 0 95 100');
-    svg.setAttribute('fill', 'none');
-    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svg.setAttribute('aria-label', 'DesignBase Mark');
-    if (className)
-        svg.setAttribute('class', className);
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttribute('fill', color || 'currentColor');
-    path.setAttribute('d', MARK_PATH);
-    svg.append(path);
-    return svg;
-}
-
-export { createDesignBaseLogoMarkSvg, createDesignBaseLogoSvg, getLogoColor, getLogoDimensions };
+const t={xs:{width:96,height:20,markSize:19},s:{width:125,height:26,markSize:25},m:{width:193,height:40,markSize:38},l:{width:256,height:53,markSize:50},xl:{width:320,height:66,markSize:63}};function getLogoDimensions(e){return t[e]||t.m}function getLogoColor(t){return"original"===t||"dark"===t?"#000000":"light"===t||"white"===t?"#ffffff":"primary"===t?"var(--db-brand-primary)":"secondary"===t?"var(--db-text-secondary)":"var(--db-text-primary)"}function createDesignBaseLogoSvg(t,e,r,i){const n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",String(t)),n.setAttribute("height",String(e)),n.setAttribute("viewBox","0 0 386 40"),n.setAttribute("fill","none"),n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.setAttribute("aria-label","DesignBase Logo"),i&&n.setAttribute("class",i);const o=document.createElementNS("http://www.w3.org/2000/svg","g");return o.setAttribute("fill",r||"currentColor"),o.innerHTML='\n<polygon points="58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3"/>\n<path d="M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z"/>\n<rect x="122.7" y="0.4" width="8.8" height="39.2"/>\n<path d="M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z"/>\n<polygon points="209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4"/>\n<path d="M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z"/>\n<path d="M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z"/>\n<path d="M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z"/>\n<polygon points="364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3"/>\n<path d="M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z"/>\n',n.append(o),n}function createDesignBaseLogoMarkSvg(t,e,r){const i=.95*t,n=t,o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttribute("width",String(i)),o.setAttribute("height",String(n)),o.setAttribute("viewBox","0 0 95 100"),o.setAttribute("fill","none"),o.setAttribute("xmlns","http://www.w3.org/2000/svg"),o.setAttribute("aria-label","DesignBase Mark"),r&&o.setAttribute("class",r);const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("fill",e||"currentColor"),s.setAttribute("d","M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z"),o.append(s),o}export{createDesignBaseLogoMarkSvg,createDesignBaseLogoSvg,getLogoColor,getLogoDimensions};

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

@@ -1,106 +1 @@
-import { createDesignBaseLogoSvg, createDesignBaseLogoMarkSvg, getLogoDimensions, getLogoColor } from './db-logo-svg.js';
-
-class DbLogo extends HTMLElement {
-    static get observedAttributes() {
-        return ['type', 'text', 'src', 'alt', 'size', 'variant', 'clickable', 'href', 'target', 'full-width'];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    handleClick(event) {
-        if (!this.hasAttribute('clickable') && !this.getAttribute('href'))
-            return;
-        event.preventDefault();
-        this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-    }
-    renderLogoContent(host) {
-        const type = this.getAttribute('type') || 'designbase';
-        const text = this.getAttribute('text') || 'Logo';
-        const src = this.getAttribute('src');
-        const alt = this.getAttribute('alt') || text;
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const { width, height, markSize } = getLogoDimensions(size);
-        const color = getLogoColor(variant);
-        if (type === 'designbase') {
-            const svgWrap = document.createElement('div');
-            svgWrap.className = 'designbase-wc-logo__svg';
-            svgWrap.append(createDesignBaseLogoSvg(width, height, color));
-            host.append(svgWrap);
-            return;
-        }
-        if (type === 'designbase-mark') {
-            const svgWrap = document.createElement('div');
-            svgWrap.className = 'designbase-wc-logo__svg';
-            svgWrap.append(createDesignBaseLogoMarkSvg(markSize, color));
-            host.append(svgWrap);
-            return;
-        }
-        if (src) {
-            const image = document.createElement('img');
-            image.className = 'designbase-wc-logo__image';
-            image.src = src;
-            image.alt = alt;
-            host.append(image);
-            return;
-        }
-        const textEl = document.createElement('span');
-        textEl.className = 'designbase-wc-logo__text';
-        textEl.textContent = text;
-        host.append(textEl);
-    }
-    render() {
-        const type = this.getAttribute('type') || 'designbase';
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const clickable = this.hasAttribute('clickable') || Boolean(this.getAttribute('href'));
-        const fullWidth = this.hasAttribute('full-width');
-        const href = this.getAttribute('href');
-        const target = this.getAttribute('target') || '_self';
-        this.className = '';
-        this.replaceChildren();
-        const logo = document.createElement('div');
-        logo.className = [
-            'designbase-wc-logo',
-            `designbase-wc-logo--${size}`,
-            variant ? `designbase-wc-logo--${variant}` : '',
-            clickable ? 'designbase-wc-logo--clickable' : '',
-            fullWidth ? 'designbase-wc-logo--full-width' : '',
-            type !== 'custom' ? 'designbase-wc-logo--svg' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (clickable) {
-            logo.addEventListener('click', (event) => this.handleClick(event));
-            if (!href)
-                logo.setAttribute('role', 'button');
-            logo.setAttribute('tabindex', '0');
-            logo.addEventListener('keydown', (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    this.handleClick(event);
-                }
-            });
-        }
-        this.renderLogoContent(logo);
-        if (href) {
-            const link = document.createElement('a');
-            link.className = 'designbase-wc-logo__link';
-            link.href = href;
-            link.target = target;
-            if (target === '_blank')
-                link.rel = 'noopener noreferrer';
-            link.append(logo);
-            this.append(link);
-            return;
-        }
-        this.append(logo);
-    }
-}
-if (!customElements.get('db-logo'))
-    customElements.define('db-logo', DbLogo);
-
-export { DbLogo };
+import{createDesignBaseLogoSvg as e,createDesignBaseLogoMarkSvg as t,getLogoDimensions as s,getLogoColor as i}from"./db-logo-svg.js";class DbLogo extends HTMLElement{static get observedAttributes(){return["type","text","src","alt","size","variant","clickable","href","target","full-width"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}handleClick(e){(this.hasAttribute("clickable")||this.getAttribute("href"))&&(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})))}renderLogoContent(n){const a=this.getAttribute("type")||"designbase",o=this.getAttribute("text")||"Logo",r=this.getAttribute("src"),l=this.getAttribute("alt")||o,d=this.getAttribute("size")||"m",c=this.getAttribute("variant")||"default",{width:g,height:b,markSize:h}=s(d),u=i(c);if("designbase"===a){const t=document.createElement("div");return t.className="designbase-wc-logo__svg",t.append(e(g,b,u)),void n.append(t)}if("designbase-mark"===a){const e=document.createElement("div");return e.className="designbase-wc-logo__svg",e.append(t(h,u)),void n.append(e)}if(r){const e=document.createElement("img");return e.className="designbase-wc-logo__image",e.src=r,e.alt=l,void n.append(e)}const m=document.createElement("span");m.className="designbase-wc-logo__text",m.textContent=o,n.append(m)}render(){const e=this.getAttribute("type")||"designbase",t=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.hasAttribute("clickable")||Boolean(this.getAttribute("href")),n=this.hasAttribute("full-width"),a=this.getAttribute("href"),o=this.getAttribute("target")||"_self";this.className="",this.replaceChildren();const r=document.createElement("div");if(r.className=["designbase-wc-logo",`designbase-wc-logo--${t}`,s?`designbase-wc-logo--${s}`:"",i?"designbase-wc-logo--clickable":"",n?"designbase-wc-logo--full-width":"","custom"!==e?"designbase-wc-logo--svg":""].filter(Boolean).join(" "),i&&(r.addEventListener("click",e=>this.handleClick(e)),a||r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick(e))})),this.renderLogoContent(r),a){const e=document.createElement("a");return e.className="designbase-wc-logo__link",e.href=a,e.target=o,"_blank"===o&&(e.rel="noopener noreferrer"),e.append(r),void this.append(e)}this.append(r)}}customElements.get("db-logo")||customElements.define("db-logo",DbLogo);export{DbLogo};

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

@@ -1,109 +1 @@
-const CLASS = 'designbase-wc-lottie';
-class DbLottie extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.loadToken = 0;
-    }
-    static get observedAttributes() {
-        return [
-            'src',
-            'animation-data',
-            'loop',
-            'autoplay',
-            'speed',
-            'width',
-            'height',
-            'renderer',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'inline-block';
-        void this.renderAnimation();
-    }
-    disconnectedCallback() {
-        this.destroyAnimation();
-        this.container?.remove();
-        this.container = undefined;
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            void this.renderAnimation();
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getSizeStyle(value) {
-        if (!value)
-            return undefined;
-        const num = Number(value);
-        return Number.isFinite(num) ? `${num}px` : value;
-    }
-    destroyAnimation() {
-        this.animation?.destroy();
-        this.animation = undefined;
-    }
-    async renderAnimation() {
-        const token = ++this.loadToken;
-        this.destroyAnimation();
-        if (!this.container) {
-            this.container = document.createElement('div');
-            this.container.className = `${CLASS}__container`;
-            this.appendChild(this.container);
-        }
-        else {
-            this.container.replaceChildren();
-        }
-        const width = this.getSizeStyle(this.getAttribute('width'));
-        const height = this.getSizeStyle(this.getAttribute('height'));
-        if (width)
-            this.style.width = width;
-        if (height)
-            this.style.height = height;
-        if (token !== this.loadToken || !this.container)
-            return;
-        const loop = this.getBool('loop', true);
-        const autoplay = !this.hasAttribute('autoplay') || this.getBool('autoplay', true);
-        const speed = Number(this.getAttribute('speed') || 1);
-        const renderer = (this.getAttribute('renderer') || 'svg');
-        let animationData;
-        const rawData = this.getAttribute('animation-data');
-        if (rawData) {
-            try {
-                animationData = JSON.parse(rawData);
-            }
-            catch {
-                animationData = undefined;
-            }
-        }
-        const src = this.getAttribute('src');
-        if (!animationData && !src) {
-            const message = document.createElement('div');
-            message.className = `${CLASS}__fallback`;
-            message.textContent = 'src 또는 animation-data 속성이 필요합니다.';
-            this.container.appendChild(message);
-            return;
-        }
-        const lottieImport = await import('lottie-web');
-        const lottie = (lottieImport.default ?? lottieImport);
-        if (token !== this.loadToken || !this.container)
-            return;
-        this.animation = lottie.loadAnimation({
-            container: this.container,
-            renderer,
-            loop,
-            autoplay,
-            ...(animationData ? { animationData } : { path: src }),
-        });
-        if (Number.isFinite(speed) && speed > 0) {
-            this.animation.setSpeed(speed);
-        }
-    }
-}
-if (!customElements.get('db-lottie')) {
-    customElements.define('db-lottie', DbLottie);
-}
-
-export { DbLottie };
+const t="designbase-wc-lottie";class DbLottie extends HTMLElement{constructor(){super(...arguments),this.loadToken=0}static get observedAttributes(){return["src","animation-data","loop","autoplay","speed","width","height","renderer"]}connectedCallback(){this.style.display="inline-block",this.renderAnimation()}disconnectedCallback(){this.destroyAnimation(),this.container?.remove(),this.container=void 0}attributeChangedCallback(){this.isConnected&&this.renderAnimation()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}destroyAnimation(){this.animation?.destroy(),this.animation=void 0}async renderAnimation(){const e=++this.loadToken;this.destroyAnimation(),this.container?this.container.replaceChildren():(this.container=document.createElement("div"),this.container.className=`${t}__container`,this.appendChild(this.container));const i=this.getSizeStyle(this.getAttribute("width")),n=this.getSizeStyle(this.getAttribute("height"));if(i&&(this.style.width=i),n&&(this.style.height=n),e!==this.loadToken||!this.container)return;const o=this.getBool("loop",!0),s=!this.hasAttribute("autoplay")||this.getBool("autoplay",!0),a=Number(this.getAttribute("speed")||1),r=this.getAttribute("renderer")||"svg";let h;const c=this.getAttribute("animation-data");if(c)try{h=JSON.parse(c)}catch{h=void 0}const d=this.getAttribute("src");if(!h&&!d){const e=document.createElement("div");return e.className=`${t}__fallback`,e.textContent="src 또는 animation-data 속성이 필요합니다.",void this.container.appendChild(e)}const l=await import("lottie-web"),u=l.default??l;e===this.loadToken&&this.container&&(this.animation=u.loadAnimation({container:this.container,renderer:r,loop:o,autoplay:s,...h?{animationData:h}:{path:d}}),Number.isFinite(a)&&a>0&&this.animation.setSpeed(a))}}customElements.get("db-lottie")||customElements.define("db-lottie",DbLottie);export{DbLottie};