@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

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

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

@@ -1 +1,72 @@
-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){if("original"===t)return;const e={light:"#ffffff",dark:"#000000",default:"var(--db-text-primary)",primary:"var(--db-brand-primary)",secondary:"var(--db-text-secondary)",white:"#ffffff"};return e[t]??e.default}function createDesignBaseLogoSvg(t,e,i,r){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"),r&&n.setAttribute("class",r);const s=document.createElementNS("http://www.w3.org/2000/svg","g");return s.setAttribute("fill",i||"#000000"),s.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(s),n}function createDesignBaseLogoMarkSvg(t,e,i){const r=.95*t,n=t,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",String(r)),s.setAttribute("height",String(n)),s.setAttribute("viewBox","0 0 95 100"),s.setAttribute("fill","none"),s.setAttribute("xmlns","http://www.w3.org/2000/svg"),s.setAttribute("aria-label","DesignBase Mark"),i&&s.setAttribute("class",i);const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("fill",e||"#000000"),o.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"),s.append(o),s}export{createDesignBaseLogoMarkSvg,createDesignBaseLogoSvg,getLogoColor,getLogoDimensions};
+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 };

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

@@ -1 +1,106 @@
-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,c=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"original",{width:g,height:b,markSize:h}=s(c),u=i(d);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")||"original",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};
+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 };

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

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