@designbasekorea/ui-wc 0.8.13 → 0.9.2

package/dist/esm/components/db-ai-model-select.d.ts

@@ -0,0 +1,36 @@
+import { DbElement } from '../core/base-element.js';
+import './db-select.js';
+
+interface DbAiModelOption {
+    id: string;
+    label: string;
+    description: string;
+    capabilities: string[];
+    usageLabel: string;
+    disabled?: boolean;
+    disabledReason?: string;
+}
+interface DbAiModelSelection {
+    modelId: string;
+}
+/** Product-supplied catalog, not an authorization or provider registry. */
+declare class DbAiModelSelect extends DbElement {
+    private modelData;
+    private select?;
+    private details?;
+    static get observedAttributes(): string[];
+    get models(): DbAiModelOption[];
+    set models(value: DbAiModelOption[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private blocked;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-model-select': DbAiModelSelect;
+    }
+}
+
+export { DbAiModelSelect };
+export type { DbAiModelOption, DbAiModelSelection };

package/dist/esm/components/db-ai-model-select.js

@@ -0,0 +1 @@
+import{DbElement as e}from"../core/base-element.js";import{textNode as t}from"../core/credit-ui.js";import{t as i}from"../core/i18n.js";import"./db-select.js";class DbAiModelSelect extends e{constructor(){super(...arguments),this.modelData=[]}static get observedAttributes(){return["selected-id","label","loading","disabled","error"]}get models(){return this.modelData.map(e=>({...e,capabilities:[...e.capabilities]}))}set models(e){const t=new Set;this.modelData=Array.isArray(e)?e.filter(e=>!(!(e&&"string"==typeof e.id&&e.id&&!t.has(e.id)&&"string"==typeof e.label&&"string"==typeof e.description&&"string"==typeof e.usageLabel&&Array.isArray(e.capabilities)&&e.capabilities.every(e=>"string"==typeof e))||void 0!==e.disabled&&"boolean"!=typeof e.disabled||void 0!==e.disabledReason&&"string"!=typeof e.disabledReason)&&(t.add(e.id),!0)).map(e=>({...e,capabilities:[...e.capabilities]})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["models"]),this.select||(this.classList.add("designbase-wc-ai-model-select"),this.select=document.createElement("db-select"),this.select.setAttribute("full-width",""),this.select.setAttribute("show-clear-button","false"),this.details=t("div","designbase-wc-ai-model-select__details",""),this.append(this.select,this.details)),this.cleanups.listen(this.select,"db-change",e=>{if(e.target!==this.select)return;e.stopPropagation();const t=e.detail,i=t&&"object"==typeof t&&"value"in t?t.value:null,s=this.modelData.find(e=>e.id===i&&!e.disabled);s&&!this.blocked()&&this.dbEmit("model-change",{modelId:s.id}),this.render()}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return this.hasAttribute("disabled")||this.hasAttribute("loading")||this.hasAttribute("error")}render(){if(!this.select||!this.details)return;this.setAttribute("aria-busy",String(this.hasAttribute("loading")));const e=this.modelData.find(e=>e.id===this.getAttribute("selected-id")&&!e.disabled),s={label:this.getAttribute("label")||i("aiModel.label"),placeholder:this.hasAttribute("loading")?i("loading"):i("aiModel.choose"),options:JSON.stringify(this.modelData.map(e=>({value:e.id,label:e.disabledReason?`${e.label} · ${e.disabledReason}`:e.label,disabled:e.disabled}))),value:e?.id||""};for(const[e,t]of Object.entries(s))this.select.getAttribute(e)!==t&&this.select.setAttribute(e,t);this.select.toggleAttribute("disabled",this.blocked()||!this.modelData.length),this.details.replaceChildren();const a=this.getAttribute("error");if(a){const e=t("p","",a);e.setAttribute("role","alert"),this.details.append(e)}else if(!this.hasAttribute("loading"))if(this.modelData.length){if(e){this.details.append(t("p","",e.description));const s=t("div","designbase-wc-ai-model-select__meta","");s.append(t("span","",`${i("aiModel.capabilities")} ${e.capabilities.join(" · ")}`)),s.append(t("span","",`${i("aiModel.usage")} ${e.usageLabel}`)),this.details.append(s)}}else this.details.append(t("p","",i("aiModel.empty")))}}customElements.get("db-ai-model-select")||customElements.define("db-ai-model-select",DbAiModelSelect);export{DbAiModelSelect};

package/dist/esm/components/db-ai-plan.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: plan. App-owned data and actions; no provider calls. */
+declare class DbAiPlan extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-plan': DbAiPlan;
+    }
+}
+
+export { DbAiPlan };

package/dist/esm/components/db-ai-plan.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiPlan extends t{static get observedAttributes(){return["items","label","status","open","disabled","action-label"]}view(){const t=this.rows.filter(t=>"complete"===t.status).length,s=e("div","designbase-wc-ai__timeline","");s.append(...this.rows.map(t=>this.itemLine(t)));const a=this.disclosure("root",this.attr("label","plan"),this.state,[s],this.hasAttribute("open"),"documentation");return a.querySelector("summary .designbase-wc-ai__label")?.append(e("span","designbase-wc-ai__meta",` ${t}/${this.rows.length}`)),this.hasAttribute("action-label")&&a.append(this.button("execute",this.attr("action-label"),"play")),[a]}}customElements.get("db-ai-plan")||customElements.define("db-ai-plan",DbAiPlan);export{DbAiPlan};

package/dist/esm/components/db-ai-queue.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: queue. App-owned data and actions; no provider calls. */
+declare class DbAiQueue extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-queue': DbAiQueue;
+    }
+}
+
+export { DbAiQueue };

package/dist/esm/components/db-ai-queue.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";class DbAiQueue extends e{static get observedAttributes(){return["items","label","open","disabled"]}view(){const e=t("div","designbase-wc-ai__queue","");for(const s of this.rows){const o=t("div","designbase-wc-ai__queue-row","");o.append(this.itemLine(s),this.button("remove",i("aiElement.remove"),"close",s.id)),e.append(o)}return this.rows.length||e.append(t("p","designbase-wc-ai__description",i("aiElement.queueEmpty"))),[this.disclosure("root",`${this.attr("label","queue")} · ${this.rows.length}`,this.state,[e],this.hasAttribute("open"))]}}customElements.get("db-ai-queue")||customElements.define("db-ai-queue",DbAiQueue);export{DbAiQueue};

package/dist/esm/components/db-ai-reasoning.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: reasoning. App-owned data and actions; no provider calls. */
+declare class DbAiReasoning extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-reasoning': DbAiReasoning;
+    }
+}
+
+export { DbAiReasoning };

package/dist/esm/components/db-ai-reasoning.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiReasoning extends t{static get observedAttributes(){return["label","description","status","open"]}view(){const t=e("p","designbase-wc-ai__reasoning-text",this.attr("description"));return[this.disclosure("root",this.attr("label","running"===this.state?"thinking":"reasoning"),this.state,[t],this.hasAttribute("open")||"running"===this.state,"bulb")]}}customElements.get("db-ai-reasoning")||customElements.define("db-ai-reasoning",DbAiReasoning);export{DbAiReasoning};

package/dist/esm/components/db-ai-sources.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: sources. App-owned data and actions; no provider calls. */
+declare class DbAiSources extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-sources': DbAiSources;
+    }
+}
+
+export { DbAiSources };

package/dist/esm/components/db-ai-sources.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as s,aiIcon as t,aiLink as o}from"../core/ai-element.js";class DbAiSources extends e{static get observedAttributes(){return["items","label","open"]}view(){const e=s("div","designbase-wc-ai__source-list","");for(const i of this.rows){const r=s("div","designbase-wc-ai__source-row","");r.append(t("globe"),o(i)),i.description&&r.append(s("span","designbase-wc-ai__meta",i.description)),e.append(r)}return[this.disclosure("root",`${this.attr("label","sources")} · ${this.rows.length}`,"complete",[e],this.hasAttribute("open"),"globe")]}}customElements.get("db-ai-sources")||customElements.define("db-ai-sources",DbAiSources);export{DbAiSources};

package/dist/esm/components/db-ai-stack-trace.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: stack-trace. App-owned data and actions; no provider calls. */
+declare class DbAiStackTrace extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-stack-trace': DbAiStackTrace;
+    }
+}
+
+export { DbAiStackTrace };

package/dist/esm/components/db-ai-stack-trace.js

@@ -0,0 +1 @@
+import{DbAiDataElement as e,aiNode as t,aiCode as s}from"../core/ai-element.js";class DbAiStackTrace extends e{static get observedAttributes(){return["items","label","description","open","disabled"]}view(){const e=[];this.attr("description")&&e.push(t("p","designbase-wc-ai__error",this.attr("description")));for(const a of this.rows){const i=t("div","designbase-wc-ai__stack-frame","");i.append(this.button("file-open",a.label,"code",a.id)),a.meta&&i.append(t("span","designbase-wc-ai__meta",a.meta)),a.code&&i.append(s(a.code,a.language)),e.push(i)}return[this.disclosure("root",this.attr("label","stackTrace"),"error",e,this.hasAttribute("open"),"error-filled")]}}customElements.get("db-ai-stack-trace")||customElements.define("db-ai-stack-trace",DbAiStackTrace);export{DbAiStackTrace};

package/dist/esm/components/db-ai-subagent.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: subagent. App-owned data and actions; no provider calls. */
+declare class DbAiSubagent extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-subagent': DbAiSubagent;
+    }
+}
+
+export { DbAiSubagent };

package/dist/esm/components/db-ai-subagent.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiSubagent extends t{static get observedAttributes(){return["items","label","description","status","open","action-label","disabled"]}view(){const t=[];this.attr("description")&&t.push(e("p","designbase-wc-ai__description",this.attr("description")));const s=e("div","designbase-wc-ai__timeline","");s.append(...this.rows.map(t=>this.itemLine(t))),t.push(s);const i=this.disclosure("root",this.attr("label","subagent"),this.state,t,this.hasAttribute("open"),"bulb");return this.hasAttribute("action-label")&&i.append(this.button("cancel",this.attr("action-label"),"close")),[i]}}customElements.get("db-ai-subagent")||customElements.define("db-ai-subagent",DbAiSubagent);export{DbAiSubagent};

package/dist/esm/components/db-ai-task-status.d.ts

@@ -0,0 +1,26 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+import './db-progressbar.js';
+import './db-spinner.js';
+
+type DbAiTaskState = 'idle' | 'queued' | 'running' | 'succeeded' | 'failed' | 'cancelled' | 'needs_attention';
+interface DbAiTaskAction {
+    taskId: string;
+}
+/** Display state comes from the app. No fake percentages, automatic retries or refunds. */
+declare class DbAiTaskStatus extends DbElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private state;
+    private actions;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-task-status': DbAiTaskStatus;
+    }
+}
+
+export { DbAiTaskStatus };
+export type { DbAiTaskAction, DbAiTaskState };

package/dist/esm/components/db-ai-task-status.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditText as s,creditNumber as i,creditAction as a,replaceView as r}from"../core/credit-ui.js";import{aiStatus as n}from"../core/ai-element.js";import{t as d}from"../core/i18n.js";import"./db-button.js";import"./db-progressbar.js";import"./db-spinner.js";const u=["idle","queued","running","succeeded","failed","cancelled","needs_attention"];class DbAiTaskStatus extends t{static get observedAttributes(){return["state","task-id","label","status-label","description","progress","reserved","charged","unit","cancel-label","retry-label","refresh-label","disabled","loading"]}connectedCallback(){this.cleanups.listen(this,"db-click",t=>{if(this.hasAttribute("disabled")||this.hasAttribute("loading"))return;const e=t.target,s=e instanceof HTMLElement?e.dataset.action:void 0;s&&this.actions().includes(s)&&this.dbEmit(s,{taskId:this.getAttribute("task-id")||""})}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}state(){const t=this.getAttribute("state");return u.includes(t)?t:"idle"}actions(){const t=this.state();return[...["queued","running"].includes(t)&&this.getAttribute("cancel-label")?["cancel"]:[],..."failed"===t&&this.getAttribute("retry-label")?["retry"]:[],...this.getAttribute("refresh-label")?["refresh"]:[]]}render(){const t="designbase-wc-ai-task-status";this.classList.add(t);const u=this.state();this.dataset.state=u;const l=e("div",`${t}__header`,""),c=e("div",`${t}__status`,this.getAttribute("status-label")||d(`aiTask.${u}`));c.setAttribute("role","status"),c.setAttribute("aria-atomic","true"),l.append(n("running"===u||"queued"===u?"running":"succeeded"===u?"complete":"failed"===u?"error":"pending"),e("strong",`${t}__title`,this.getAttribute("label")||d("aiTask.title")),c);const o=e("div",`${t}__body`,""),b=["queued","running"].includes(u);o.setAttribute("aria-busy",String(b));const h=this.getAttribute("description")||("needs_attention"===u?d("aiTask.attentionDescription"):"");h&&o.append(e("p",`${t}__description`,h));const g=this.getAttribute("progress"),p=null===g||""===g.trim()?NaN:Number(g);if("running"===u&&Number.isFinite(p)){const t=document.createElement("db-progressbar");t.setAttribute("value",String(Math.max(0,Math.min(100,p)))),t.setAttribute("label",this.getAttribute("label")||d("aiTask.title")),t.setAttribute("show-label",""),t.setAttribute("full-width",""),t.setAttribute("variant","primary"),o.append(t)}const m=e("div",`${t}__meta`,"");for(const[t,a]of[["reserved","credits.held"],["charged","credits.charged"]])this.hasAttribute(t)&&m.append(e("span","",`${d(a)} ${s(i(this.getAttribute(t)))} ${this.getAttribute("unit")||d("credits.unit")}`));o.append(m);const A=e("div",`${t}__actions`,"");for(const t of this.actions())A.append(a(t,this.getAttribute(`${t}-label`)||"",this.hasAttribute("disabled")||this.hasAttribute("loading")));r(this,l,o,A)}}customElements.get("db-ai-task-status")||customElements.define("db-ai-task-status",DbAiTaskStatus);export{DbAiTaskStatus};

package/dist/esm/components/db-ai-task.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: task. App-owned data and actions; no provider calls. */
+declare class DbAiTask extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-task': DbAiTask;
+    }
+}
+
+export { DbAiTask };

package/dist/esm/components/db-ai-task.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as s}from"../core/ai-element.js";class DbAiTask extends t{static get observedAttributes(){return["items","label","description","status","open"]}view(){const t=s("div","designbase-wc-ai__timeline","");t.append(...this.rows.map(t=>this.itemLine(t)));const e=[];return this.attr("description")&&e.push(s("p","designbase-wc-ai__description",this.attr("description"))),e.push(t),[this.disclosure("root",this.attr("label","task"),this.state,e,this.hasAttribute("open")||"running"===this.state)]}}customElements.get("db-ai-task")||customElements.define("db-ai-task",DbAiTask);export{DbAiTask};

package/dist/esm/components/db-ai-terminal.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: terminal. App-owned data and actions; no provider calls. */
+declare class DbAiTerminal extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-terminal': DbAiTerminal;
+    }
+}
+
+export { DbAiTerminal };

package/dist/esm/components/db-ai-terminal.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiCode as e}from"../core/ai-element.js";class DbAiTerminal extends t{static get observedAttributes(){return["label","status","input","output","open"]}view(){const t=[];return this.attr("input")&&t.push(e(`$ ${this.attr("input")}`,"bash")),t.push(e(this.attr("output"),"text")),[this.disclosure("root",this.attr("label","terminal"),this.state,t,this.hasAttribute("open"),"code")]}}customElements.get("db-ai-terminal")||customElements.define("db-ai-terminal",DbAiTerminal);export{DbAiTerminal};

package/dist/esm/components/db-ai-test-results.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: test-results. App-owned data and actions; no provider calls. */
+declare class DbAiTestResults extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-test-results': DbAiTestResults;
+    }
+}
+
+export { DbAiTestResults };

package/dist/esm/components/db-ai-test-results.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";import{t as s}from"../core/i18n.js";class DbAiTestResults extends t{static get observedAttributes(){return["items","label","status","open"]}view(){const t=this.rows.filter(t=>"complete"===t.status).length,i=this.rows.filter(t=>"error"===t.status).length,r=e("div","designbase-wc-ai__timeline","");r.append(...this.rows.map(t=>this.itemLine(t)));const l=`${this.attr("label","tests")} · ${t} ${s("aiElement.passed")}${i?` · ${i} ${s("aiElement.failed")}`:""}`;return[this.disclosure("root",l,i?"error":this.state,[r],this.hasAttribute("open"),"circle-checked")]}}customElements.get("db-ai-test-results")||customElements.define("db-ai-test-results",DbAiTestResults);export{DbAiTestResults};

package/dist/esm/components/db-ai-tool.d.ts

@@ -0,0 +1,14 @@
+import { DbAiDataElement } from '../core/ai-element.js';
+
+/** AI Elements: tool. App-owned data and actions; no provider calls. */
+declare class DbAiTool extends DbAiDataElement {
+    static get observedAttributes(): string[];
+    protected view(): Node[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-tool': DbAiTool;
+    }
+}
+
+export { DbAiTool };

package/dist/esm/components/db-ai-tool.js

@@ -0,0 +1 @@
+import{DbAiDataElement as t,aiNode as e,aiCode as s}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";class DbAiTool extends t{static get observedAttributes(){return["label","description","status","input","output","language","open"]}view(){const t=[];for(const o of["input","output"])this.hasAttribute(o)&&t.push(e("span","designbase-wc-ai__meta",i(`aiElement.${o}`)),s(this.attr(o),this.attr("language")||"json"));return this.attr("description")&&t.push(e("p","designbase-wc-ai__description",this.attr("description"))),[this.disclosure("root",this.attr("label","tool"),this.state,t,this.hasAttribute("open"),"code")]}}customElements.get("db-ai-tool")||customElements.define("db-ai-tool",DbAiTool);export{DbAiTool};

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

@@ -1 +1 @@
-import"./db-button.js";import{createDbIcon as t}from"./db-icons.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ALERT_VARIANTS as n,ALERT_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-alert";class DbAlert extends HTMLElement{static get observedAttributes(){return["title","message","variant","size","show-icon","closable","action-label","action-variant","action-buttons"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}parseActionButtons(){const t=this.getAttribute("action-buttons");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}render(){const a=e(this.getAttribute("variant"),n,"default"),o=e(this.getAttribute("size"),s,"m"),r="false"!==this.getAttribute("show-icon"),c="false"!==this.getAttribute("closable"),l=this.getAttribute("title")?.trim()||"",d=this.getAttribute("message")?.trim()||"",b=this.getAttribute("action-label"),m=this.getAttribute("action-variant")||"tertiary",u=this.parseActionButtons(),h=Boolean(d),p=Boolean(l),g=p&&!h||!p&&h,v=u.length>0?u:b?[{label:b,variant:m}]:[];this.className=[i,`${i}--${a}`,`${i}--${o}`,r&&`${i}--with-icon`,c&&`${i}--closable`,g&&`${i}--text-single`,v.length>0&&`${i}--has-actions`].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.querySelector(`.${i}__content`)?.remove(),this.querySelector(`.${i}__actions`)?.remove(),Array.from(this.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove()});const A=document.createElement("div");if(A.className=`${i}__content`,r){const e=document.createElement("div");e.className=`${i}__icon`,e.append(t(this.getIconName(a),"s"===o?16:"l"===o?24:20)),A.append(e)}const _=document.createElement("div");if(_.className=`${i}__body`,p){const t=document.createElement("div");t.className=`${i}__title`,t.textContent=l,_.append(t)}if(h){const t=document.createElement("div");t.className=`${i}__message`,t.textContent=d,_.append(t)}if(A.append(_),v.length>0){const t=document.createElement("div");t.className=`${i}__actions`;const e=document.createElement("div");e.className=`${i}__action-buttons`,v.forEach((t,n)=>{const s=document.createElement("db-button");s.setAttribute("variant",t.variant||"tertiary"),s.setAttribute("size",t.size||o),s.textContent=t.label,t.disabled&&s.setAttribute("disabled",""),s.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,label:t.label}}))}),e.append(s)}),t.append(e),A.append(t)}if(c){const e=document.createElement("button");e.type="button",e.className=`${i}__close`,e.setAttribute("aria-label","알림 닫기"),e.append(t("close",20)),e.addEventListener("click",()=>{this.hidden=!0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),A.append(e)}this.replaceChildren(A)}}customElements.get("db-alert")||customElements.define("db-alert",DbAlert);export{DbAlert};
+import{dbText as t}from"../core/i18n.js";import"./db-button.js";import{createDbIcon as e}from"./db-icons.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{ALERT_VARIANTS as s,ALERT_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-alert";class DbAlert extends HTMLElement{static get observedAttributes(){return["title","message","variant","size","show-icon","closable","action-label","action-variant","action-buttons"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}getIconName(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}parseActionButtons(){const t=this.getAttribute("action-buttons");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}render(){const o=n(this.getAttribute("variant"),s,"default"),r=n(this.getAttribute("size"),i,"m"),c="false"!==this.getAttribute("show-icon"),l="false"!==this.getAttribute("closable"),d=this.getAttribute("title")?.trim()||"",m=this.getAttribute("message")?.trim()||"",b=this.getAttribute("action-label"),u=this.getAttribute("action-variant")||"tertiary",h=this.parseActionButtons(),p=Boolean(m),g=Boolean(d),v=g&&!p||!g&&p,A=h.length>0?h:b?[{label:b,variant:u}]:[];this.className=[a,`${a}--${o}`,`${a}--${r}`,c&&`${a}--with-icon`,l&&`${a}--closable`,v&&`${a}--text-single`,A.length>0&&`${a}--has-actions`].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.querySelector(`.${a}__content`)?.remove(),this.querySelector(`.${a}__actions`)?.remove(),Array.from(this.childNodes).forEach(t=>{t.nodeType===Node.TEXT_NODE&&t.remove()});const _=document.createElement("div");if(_.className=`${a}__content`,c){const t=document.createElement("div");t.className=`${a}__icon`,t.append(e(this.getIconName(o),"s"===r?16:"l"===r?24:20)),_.append(t)}const f=document.createElement("div");if(f.className=`${a}__body`,g){const t=document.createElement("div");t.className=`${a}__title`,t.textContent=d,f.append(t)}if(p){const t=document.createElement("div");t.className=`${a}__message`,t.textContent=m,f.append(t)}if(_.append(f),A.length>0){const t=document.createElement("div");t.className=`${a}__actions`;const e=document.createElement("div");e.className=`${a}__action-buttons`,A.forEach((t,n)=>{const s=document.createElement("db-button");s.setAttribute("variant",t.variant||"tertiary"),s.setAttribute("size",t.size||r),s.textContent=t.label,t.disabled&&s.setAttribute("disabled",""),s.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,label:t.label}}))}),e.append(s)}),t.append(e),_.append(t)}if(l){const n=document.createElement("button");n.type="button",n.className=`${a}__close`,n.setAttribute("aria-label",t("알림 닫기")),n.append(e("close",20)),n.addEventListener("click",()=>{this.hidden=!0,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}),_.append(n)}this.replaceChildren(_)}}customElements.get("db-alert")||customElements.define("db-alert",DbAlert);export{DbAlert};

package/dist/esm/components/db-app-badge.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{activateOnKey as e}from"../core/a11y.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{APP_BADGE_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-app-badge",l={"app-store":{label:"다운로드",storeName:"App Store"},"google-play":{label:"다운로드",storeName:"Google Play"}};class DbAppBadge extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["store","href","label","store-name","size","theme"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}getStore(){return"google-play"===(this.getAttribute("store")||"app-store")?"google-play":"app-store"}getIconSize(){const t=i(this.getAttribute("size"),a,"m");return"s"===t?18:"l"===t?24:20}build(){this.iconWrapEl=document.createElement("span"),this.iconWrapEl.className=`${o}__icon`,this.iconWrapEl.setAttribute("aria-hidden","true");const t=document.createElement("span");t.className=`${o}__text`,this.labelEl=document.createElement("span"),this.labelEl.className=`${o}__label`,this.storeEl=document.createElement("span"),this.storeEl.className=`${o}__store`,t.append(this.labelEl,this.storeEl),this.append(this.iconWrapEl,t),this.addEventListener("click",t=>{this.getAttribute("href")||this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:t}}))}),this.detachKeyActivation=e(this)}disconnectedCallback(){this.detachKeyActivation?.(),this.detachKeyActivation=void 0}updateUI(){const e=this.getStore(),r=l[e],n=i(this.getAttribute("size"),a,"m"),c=this.getAttribute("theme")||"dark",h=this.getAttribute("label")||r.label,p=this.getAttribute("store-name")||r.storeName,b=s(this.getAttribute("href"),"");this.className=[o,`${o}--${n}`,`${o}--${c}`,`${o}--${e}`].join(" "),b?(this.setAttribute("role","link"),this.tabIndex=0,this.onclick=()=>window.open(b,"_blank","noopener,noreferrer")):(this.onclick=null,this.setAttribute("role","button"),this.tabIndex=0),this.iconWrapEl&&this.iconWrapEl.replaceChildren(t("app-store"===e?"apple":"play-store",this.getIconSize())),this.labelEl&&(this.labelEl.textContent=h),this.storeEl&&(this.storeEl.textContent=p)}}customElements.get("db-app-badge")||customElements.define("db-app-badge",DbAppBadge);export{DbAppBadge};
+import{dbText as t}from"../core/i18n.js";import{createDbIcon as e}from"./db-icons.js";import{activateOnKey as s}from"../core/a11y.js";import{sanitizeHref as i}from"../core/safe-url.js";import{coerceToContract as o}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{APP_BADGE_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const r="designbase-wc-app-badge";class DbAppBadge extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["store","href","label","store-name","size","theme"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}getStore(){return"google-play"===(this.getAttribute("store")||"app-store")?"google-play":"app-store"}getIconSize(){const t=o(this.getAttribute("size"),a,"m");return"s"===t?18:"l"===t?24:20}build(){this.iconWrapEl=document.createElement("span"),this.iconWrapEl.className=`${r}__icon`,this.iconWrapEl.setAttribute("aria-hidden","true");const t=document.createElement("span");t.className=`${r}__text`,this.labelEl=document.createElement("span"),this.labelEl.className=`${r}__label`,this.storeEl=document.createElement("span"),this.storeEl.className=`${r}__store`,t.append(this.labelEl,this.storeEl),this.append(this.iconWrapEl,t),this.addEventListener("click",t=>{this.getAttribute("href")||this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{event:t}}))}),this.detachKeyActivation=s(this)}disconnectedCallback(){this.detachKeyActivation?.(),this.detachKeyActivation=void 0}updateUI(){const s=this.getStore(),l={"app-store":{label:t("다운로드"),storeName:"App Store"},"google-play":{label:t("다운로드"),storeName:"Google Play"}}[s],n=o(this.getAttribute("size"),a,"m"),c=this.getAttribute("theme")||"dark",p=this.getAttribute("label")||l.label,h=this.getAttribute("store-name")||l.storeName,b=i(this.getAttribute("href"),"");this.className=[r,`${r}--${n}`,`${r}--${c}`,`${r}--${s}`].join(" "),b?(this.setAttribute("role","link"),this.tabIndex=0,this.onclick=()=>window.open(b,"_blank","noopener,noreferrer")):(this.onclick=null,this.setAttribute("role","button"),this.tabIndex=0),this.iconWrapEl&&this.iconWrapEl.replaceChildren(e("app-store"===s?"apple":"play-store",this.getIconSize())),this.labelEl&&(this.labelEl.textContent=p),this.storeEl&&(this.storeEl.textContent=h)}}customElements.get("db-app-badge")||customElements.define("db-app-badge",DbAppBadge);export{DbAppBadge};

package/dist/esm/components/db-attachment-list.d.ts

@@ -0,0 +1,38 @@
+import './db-button.js';
+import { DbElement } from '../core/base-element.js';
+import './db-badge.js';
+import './db-progressbar.js';
+
+type DbAttachmentState = 'queued' | 'uploading' | 'processing' | 'ready' | 'error' | 'cancelled';
+interface DbAttachment {
+    id: string;
+    name: string;
+    bytes: number;
+    state: DbAttachmentState;
+    progress?: number | null;
+    error?: string;
+    canOpen?: boolean;
+    canRetry?: boolean;
+}
+interface DbAttachmentAction {
+    id: string;
+}
+/** Controlled presentation. No timer, upload request, public URL or storage credential. */
+declare class DbAttachmentList extends DbElement {
+    private data;
+    static get observedAttributes(): string[];
+    get attachments(): DbAttachment[];
+    set attachments(value: DbAttachment[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private blocked;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-attachment-list': DbAttachmentList;
+    }
+}
+
+export { DbAttachmentList };
+export type { DbAttachment, DbAttachmentAction, DbAttachmentState };

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

@@ -0,0 +1 @@
+import"./db-button.js";import{createDbIcon as t}from"./db-icons.js";import{DbElement as e}from"../core/base-element.js";import{textNode as a,creditAction as s,replaceView as r}from"../core/credit-ui.js";import{t as n}from"../core/i18n.js";import"./db-badge.js";import"./db-progressbar.js";const i=["queued","uploading","processing","ready","error","cancelled"];class DbAttachmentList extends e{constructor(){super(...arguments),this.data=[]}static get observedAttributes(){return["label","loading","disabled","error"]}get attachments(){return this.data.map(t=>({...t}))}set attachments(t){const e=new Set;this.data=Array.isArray(t)?t.filter(t=>!(!t||"string"!=typeof t.id||!t.id||e.has(t.id)||"string"!=typeof t.name||!Number.isSafeInteger(t.bytes)||t.bytes<0||!i.includes(t.state)||null!=t.progress&&(!Number.isFinite(t.progress)||t.progress<0||t.progress>100)||void 0!==t.error&&"string"!=typeof t.error||void 0!==t.canOpen&&"boolean"!=typeof t.canOpen||void 0!==t.canRetry&&"boolean"!=typeof t.canRetry)&&(e.add(t.id),!0)).map(t=>({...t})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["attachments"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement)||this.blocked())return;const e=t.target;if("attachment-reload"===e.dataset.action)return void this.dbEmit("reload");if(this.hasAttribute("error"))return;const a=this.data.find(t=>t.id===e.dataset.attachmentId);if(!a)return;const s=e.dataset.intent,r="queued"===a.state||"uploading"===a.state;("cancel"===s&&r||"retry"===s&&a.canRetry&&["error","cancelled"].includes(a.state)||"remove"===s&&["ready","error","cancelled"].includes(a.state)||"open"===s&&"ready"===a.state&&a.canOpen)&&this.dbEmit(s,{id:a.id})}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return this.hasAttribute("loading")||this.hasAttribute("disabled")}render(){const e=document.activeElement,i=e instanceof HTMLElement&&this.contains(e),d=i?e.closest("[data-id]")?.dataset.id:void 0,o=d?Array.from(this.querySelectorAll("[data-id]")).findIndex(t=>t.dataset.id===d):-1,c="designbase-wc-attachment-list";this.classList.add(c),this.setAttribute("aria-busy",String(this.hasAttribute("loading")));const l=a("div",`${c}__header`,""),u=a("h3","",this.getAttribute("label")||n("attachment.title"));u.tabIndex=-1,l.append(u,a("span","",String(this.data.length)));const h=[l],p=this.getAttribute("error");if(p){const t=a("p",`${c}__error`,p);t.setAttribute("role","alert"),h.push(t,s("attachment-reload",n("attachment.reload"),this.blocked()))}if(this.hasAttribute("loading")||!this.data.length){const t=a("p",`${c}__message`,n(this.hasAttribute("loading")?"loading":"attachment.empty"));t.setAttribute("role","status"),h.push(t)}else{const e=a("ul",`${c}__list`,"");for(const r of this.data){const i=a("li",`${c}__row`,"");i.dataset.state=r.state,i.dataset.id=r.id;const d=a("div",`${c}__content`,""),o=a("div",`${c}__identity`,""),l=r.bytes<1024?`${r.bytes} B`:r.bytes<1048576?`${(r.bytes/1024).toFixed(1)} KB`:`${(r.bytes/1048576).toFixed(1)} MB`;o.append(a("strong","",r.name),a("span","",l));const u=document.createElement("db-badge");u.setAttribute("type","text"),u.setAttribute("variant","secondary"),u.textContent=n(`attachment.${r.state}`);const h={queued:"clock",uploading:"upload",processing:"clock",ready:"circle-checked",error:"error-filled",cancelled:"close"};if(u.prepend(t(h[r.state],14)),d.append(o,u),i.append(d),"uploading"===r.state&&null!=r.progress){const t=document.createElement("db-progressbar");t.setAttribute("value",String(r.progress)),t.setAttribute("size","s"),t.setAttribute("variant","primary"),t.setAttribute("full-width",""),t.setAttribute("label",`${r.name} · ${Math.round(r.progress)}%`),i.append(t)}else"uploading"===r.state&&i.append(a("p",`${c}__message`,n("attachment.unknown")));"error"===r.state&&r.error&&i.append(a("p",`${c}__error`,r.error));const b=a("div",`${c}__actions`,""),add=t=>{const e=s(`attachment-${t}:${r.id}`,n(`attachment.${t}`),this.blocked()||!!p);e.dataset.attachmentId=r.id,e.dataset.intent=t,e.setAttribute("aria-label",`${r.name} · ${n(`attachment.${t}`)}`),b.append(e)};"queued"!==r.state&&"uploading"!==r.state||add("cancel"),r.canRetry&&["error","cancelled"].includes(r.state)&&add("retry"),"ready"===r.state&&r.canOpen&&add("open"),["ready","error","cancelled"].includes(r.state)&&add("remove"),i.append(b),e.append(i)}h.push(e)}if(r(this,...h),i&&!this.contains(document.activeElement)){const t=Array.from(this.querySelectorAll("[data-id]")),e=t[Math.min(Math.max(o,0),t.length-1)],a=e?.querySelector("db-button:not([disabled])");(a||u).focus()}}}customElements.get("db-attachment-list")||customElements.define("db-attachment-list",DbAttachmentList);export{DbAttachmentList};

package/dist/esm/components/db-audio-player.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{t as e}from"../core/i18n.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{AUDIO_PLAYER_SIZES as i,AUDIO_PLAYER_VARIANTS as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-audio-player";class DbAudioPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.currentTime=0,this.duration=0,this.showSettingsMenu=!1,this.playbackRate=1,this.currentRepeatMode="none",this.isShuffle=!1,this.isLoading=!1,this.error=null,this.playlistIndex=0,this.shuffledPlaylist=[],this.boundKeyDown=t=>this.handleKeyDown(t)}static get observedAttributes(){return["src","title","artist","album","album-art","size","variant","theme","auto-play","loop","muted","show-controls","enable-keyboard","show-progress","show-time","show-volume","show-settings","playlist","current-index","playback-rates","default-playback-rate","repeat-mode","shuffle"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindAudioEvents()),this.syncFromAttributes(),this.updateUI(),this.getBool("enable-keyboard",!0)&&document.addEventListener("keydown",this.boundKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.boundKeyDown)}attributeChangedCallback(t){if(this.built){if("current-index"===t)return this.playlistIndex=Number(this.getAttribute("current-index")||0),void this.loadCurrentTrack();"repeat-mode"===t&&(this.currentRepeatMode=this.getAttribute("repeat-mode")||"none"),"shuffle"===t&&(this.isShuffle=this.getBool("shuffle"),this.refreshShuffledPlaylist()),"default-playback-rate"===t&&(this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.audioEl&&(this.audioEl.playbackRate=this.playbackRate)),this.updateUI()}}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getPlaybackRates(){try{const t=this.getAttribute("playback-rates"),e=t?JSON.parse(t):[.5,.75,1,1.25,1.5,2];return Array.isArray(e)&&e.length>0?e:[.5,.75,1,1.25,1.5,2]}catch{return[.5,.75,1,1.25,1.5,2]}}getIconSize(){const t=s(this.getAttribute("size"),i,"m");return"s"===t?16:"l"===t?24:"xl"===t?32:20}getCurrentTrack(){const t=this.getPlaylist();if(t.length>0){return t[this.isShuffle&&this.shuffledPlaylist.length>0?this.shuffledPlaylist[this.playlistIndex]??this.playlistIndex:this.playlistIndex]||t[0]}return{src:this.getAttribute("src")||"",title:this.getAttribute("title")||void 0,artist:this.getAttribute("artist")||void 0,album:this.getAttribute("album")||void 0,albumArt:this.getAttribute("album-art")||void 0}}refreshShuffledPlaylist(){const t=this.getPlaylist();if(t.length>0&&this.isShuffle){const e=Array.from({length:t.length},(t,e)=>e);this.shuffledPlaylist=[...e].sort(()=>Math.random()-.5)}else this.shuffledPlaylist=[]}formatTime(t){return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.currentRepeatMode=this.getAttribute("repeat-mode")||"none",this.isShuffle=this.getBool("shuffle"),this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.refreshShuffledPlaylist(),this.loadCurrentTrack()}loadCurrentTrack(){if(!this.audioEl)return;const t=this.getCurrentTrack(),e=t?.src||this.getAttribute("src")||"";this.audioEl.src!==e&&e&&(this.audioEl.src=e,this.audioEl.load()),this.updateTrackInfo(),this.updatePlaylistActive()}bindAudioEvents(){const t=this.audioEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=t.duration||0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted,this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>this.handleEnded()),t.addEventListener("error",()=>{this.error="오디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}))}handleEnded(){this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const t=this.getPlaylist();if(t.length>0){if("one"===this.currentRepeatMode)this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());else if("all"===this.currentRepeatMode||this.playlistIndex<t.length-1){const e=this.playlistIndex+1;e<t.length?this.setPlaylistIndex(e):"all"===this.currentRepeatMode&&this.setPlaylistIndex(0)}}else this.getBool("loop")&&this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());this.updateUI()}setPlaylistIndex(t){this.playlistIndex=t,this.dispatchEvent(new CustomEvent("db-playlist-change",{detail:{index:t},bubbles:!0,composed:!0})),this.loadCurrentTrack(),this.audioEl&&this.audioEl.play()}togglePlay(){this.audioEl&&(this.isPlaying?this.audioEl.pause():this.audioEl.play())}toggleMute(){this.audioEl&&(this.audioEl.muted=!this.isMuted)}toggleRepeatMode(){const t=["none","one","all"],e=t[(t.indexOf(this.currentRepeatMode)+1)%t.length];this.currentRepeatMode=e,this.dispatchEvent(new CustomEvent("db-repeat-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this.updateUI()}toggleShuffle(){this.isShuffle=!this.isShuffle,this.refreshShuffledPlaylist(),this.dispatchEvent(new CustomEvent("db-shuffle-change",{detail:{shuffle:this.isShuffle},bubbles:!0,composed:!0})),this.updateUI()}handlePlaybackRateChange(t){this.audioEl&&(this.audioEl.playbackRate=t,this.playbackRate=t,this.dispatchEvent(new CustomEvent("db-playback-rate-change",{detail:{rate:t},bubbles:!0,composed:!0})))}handleKeyDown(t){if(this.audioEl&&this.getBool("enable-keyboard",!0))switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"ArrowLeft":t.preventDefault(),this.audioEl.currentTime=Math.max(0,this.currentTime-10);break;case"ArrowRight":t.preventDefault(),this.audioEl.currentTime=Math.min(this.duration,this.currentTime+10);break;case"ArrowUp":t.preventDefault(),this.audioEl.volume=Math.min(1,this.volume+.1),this.audioEl.muted=!1;break;case"ArrowDown":t.preventDefault(),this.audioEl.volume=Math.max(0,this.volume-.1),this.audioEl.muted=0===this.audioEl.volume;break;case"KeyM":t.preventDefault(),this.toggleMute();break;case"KeyR":t.preventDefault(),this.toggleRepeatMode();break;case"KeyS":t.preventDefault(),this.toggleShuffle()}}iconButton(e,s,i,l){const n=document.createElement("button");return n.type="button",n.className=`${a}__control-button`,n.setAttribute("aria-label",s),n.append(t(e,this.getIconSize())),l?.disabled&&(n.disabled=!0),l?.data&&Object.entries(l.data).forEach(([t,e])=>n.setAttribute(`data-${t}`,e)),n.addEventListener("click",i),n}build(){const t=s(this.getAttribute("size"),i,"m"),n=s(this.getAttribute("variant"),l,"default"),o=this.getAttribute("theme")||"auto";this.className=[a,`${a}--size-${t}`,`${a}--variant-${n}`,`${a}--theme-${o}`].join(" "),this.audioEl=document.createElement("audio"),this.audioEl.preload="metadata",this.audioEl.hidden=!0;const r=document.createElement("div");r.className=`${a}__loading`;const h=document.createElement("div");h.className=`${a}__spinner`,r.append(h);const u=document.createElement("div");u.className=`${a}__error`;const d=document.createElement("p");d.textContent="오디오를 재생할 수 없습니다.";const c=document.createElement("button");c.type="button",c.textContent="다시 시도",c.addEventListener("click",()=>window.location.reload()),u.append(d,c);const m=document.createElement("div");m.className=`${a}__album-art`,this.albumImgEl=document.createElement("img"),this.albumImgEl.addEventListener("error",()=>{this.albumImgEl&&(this.albumImgEl.style.display="none"),this.albumPlaceholderEl?.classList.remove("album-placeholder")}),this.albumPlaceholderEl=document.createElement("div"),this.albumPlaceholderEl.className="album-placeholder",this.albumPlaceholderEl.textContent="🎵",m.append(this.albumImgEl,this.albumPlaceholderEl);const p=document.createElement("div");p.className=`${a}__main`;const E=document.createElement("div");E.className=`${a}__info`,this.titleEl=document.createElement("div"),this.titleEl.className=`${a}__title`,this.artistEl=document.createElement("div"),this.artistEl.className=`${a}__artist`,this.albumEl=document.createElement("div"),this.albumEl.className=`${a}__album`,E.append(this.titleEl,this.artistEl,this.albumEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${a}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${a}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${a}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.audioEl||!this.progressEl)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.audioEl.currentTime=s*(this.duration||0)});const g=document.createElement("div");g.className=`${a}__controls`;const b=document.createElement("div");b.className=`${a}__left-controls`;const y=document.createElement("div");y.className=`${a}__center-controls`;const v=document.createElement("div");v.className=`${a}__right-controls`,this.playButtonEl=document.createElement("button"),this.playButtonEl.type="button",this.playButtonEl.className=`${a}__play-button`,this.playButtonEl.addEventListener("click",()=>this.togglePlay()),y.append(this.playButtonEl),g.append(b,y,v);const f=document.createElement("div");f.className=`${a}__bottom-controls`;const _=document.createElement("div");_.className=`${a}__left-bottom`;const k=document.createElement("div");k.className=`${a}__right-bottom`;const C=document.createElement("div");C.className=`${a}__time`,this.timeCurrentEl=document.createElement("span");const I=document.createElement("span");I.textContent="/",this.timeDurationEl=document.createElement("span"),C.append(this.timeCurrentEl,I,this.timeDurationEl),_.append(C);const $=document.createElement("div");$.className=`${a}__volume`;const A=this.iconButton(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.isMuted||0===this.volume?e("media.unmute"):e("media.mute"),()=>this.toggleMute());A.title=this.isMuted||0===this.volume?"음소거 해제":"음소거";const P=document.createElement("div");P.className=`${a}__volume-slider`;const x=document.createElement("div");x.className="volume-label";const M=document.createElement("span");M.textContent="🔊";const w=document.createElement("span");x.append(M,w),this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.audioEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);this.audioEl.volume=t,this.audioEl.muted=0===t}),P.append(x,this.volumeInputEl),$.append(A,P);const B=document.createElement("div");B.className=`${a}__settings`;const N=this.iconButton("settings",e("media.settings"),()=>{this.showSettingsMenu=!this.showSettingsMenu,this.updateSettingsMenu()});this.settingsMenuEl=document.createElement("div"),this.settingsMenuEl.className=`${a}__settings-menu`,this.settingsMenuEl.hidden=!0;const T=document.createElement("div");T.className=`${a}__setting-group`;const S=document.createElement("label");S.textContent="재생 속도";const R=document.createElement("select");R.addEventListener("change",()=>this.handlePlaybackRateChange(parseFloat(R.value))),T.append(S,R),this.settingsMenuEl.append(T),B.append(N,this.settingsMenuEl),k.append($,B),f.append(_,k),p.append(E,this.progressEl,g,f);const L=document.createElement("div");L.className=`${a}__playlist`,L.hidden=!0;const D=document.createElement("h4");D.textContent="플레이리스트",this.playlistTracksEl=document.createElement("div"),this.playlistTracksEl.className=`${a}__playlist-tracks`,L.append(D,this.playlistTracksEl),this.append(this.audioEl,r,u,m,p,L),this._leftControls=b,this._rightControls=v,this._controls=g,this._time=C,this._volumeWrap=$,this._settings=B,this._playlist=L,this._rateSelect=R,this._volumePercent=w,this._muteButton=A}get leftControls(){return this._leftControls}get rightControls(){return this._rightControls}get controlsEl(){return this._controls}get timeEl(){return this._time}get volumeWrap(){return this._volumeWrap}get settingsEl(){return this._settings}get playlistEl(){return this._playlist}get rateSelect(){return this._rateSelect}get volumePercent(){return this._volumePercent}get muteButton(){return this._muteButton}updateTrackInfo(){const t=this.getCurrentTrack();this.titleEl&&(this.titleEl.textContent=t?.title||"Unknown Track"),this.artistEl&&(this.artistEl.textContent=t?.artist||"Unknown Artist"),this.albumEl&&(t?.album?(this.albumEl.textContent=t.album,this.albumEl.hidden=!1):this.albumEl.hidden=!0),this.albumImgEl&&this.albumPlaceholderEl&&(t?.albumArt?(this.albumImgEl.src=t.albumArt,this.albumImgEl.alt=t.title||"Album Art",this.albumImgEl.style.display=""):(this.albumImgEl.removeAttribute("src"),this.albumImgEl.style.display="none"),this.albumPlaceholderEl.className="album-placeholder")}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`,this.progressHandleEl.style.transform=t<=0?"translate(0, -50%)":t>=100?"translate(-100%, -50%)":"translate(-50%, -50%)")}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){this.volumeInputEl&&(this.volumeInputEl.value=String(this.volume)),this.volumePercent&&(this.volumePercent.textContent=`${Math.round(100*this.volume)}%`),this.muteButton&&(this.muteButton.replaceChildren(t(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.getIconSize())),this.muteButton.title=this.isMuted||0===this.volume?"음소거 해제":"음소거")}updateSettingsMenu(){this.settingsMenuEl&&(this.settingsMenuEl.hidden=!this.showSettingsMenu)}rebuildControlButtons(){const s=this.getPlaylist(),i=1.2*this.getIconSize();this.leftControls.replaceChildren(),this.rightControls.replaceChildren(),s.length>0&&this.leftControls.append(this.iconButton("refresh",e("media.shuffle"),()=>this.toggleShuffle(),{data:{shuffle:"true"}})),this.leftControls.append(this.iconButton("chevron-left",e("media.previous"),()=>{if(s.length>0){const t=this.playlistIndex-1;t>=0&&this.setPlaylistIndex(t)}else this.audioEl&&(this.audioEl.currentTime=0)},{disabled:s.length>0&&0===this.playlistIndex})),this.playButtonEl&&this.playButtonEl.replaceChildren(t(this.isPlaying?"pause":"play",i)),this.rightControls.append(this.iconButton("chevron-right",e("media.next"),()=>{if(s.length>0){const t=this.playlistIndex+1;t<s.length&&this.setPlaylistIndex(t)}},{disabled:s.length>0&&this.playlistIndex===s.length-1})),s.length>0&&this.rightControls.append(this.iconButton("repeat",e("media.repeat"),()=>this.toggleRepeatMode(),{data:{repeat:"true"}}))}rebuildPlaylist(){if(!this.playlistTracksEl)return;const t=this.getPlaylist(),e=s(this.getAttribute("variant"),l,"default");this.playlistEl.hidden=!("full"===e&&t.length>0),this.playlistTracksEl.replaceChildren(),t.forEach((t,e)=>{const s=document.createElement("div");if(s.className=`${a}__playlist-track${e===this.playlistIndex?` ${a}__playlist-track--active`:""}`,s.addEventListener("click",()=>this.setPlaylistIndex(e)),t.albumArt){const e=document.createElement("img");e.src=t.albumArt,e.alt=t.title||"Album Art",s.append(e)}const i=document.createElement("div");i.className=`${a}__playlist-track-info`;const l=document.createElement("div");l.className=`${a}__playlist-track-title`,l.textContent=t.title||"Unknown Track";const n=document.createElement("div");n.className=`${a}__playlist-track-artist`,n.textContent=t.artist||"Unknown Artist",i.append(l,n),s.append(i),this.playlistTracksEl?.append(s)})}updatePlaylistActive(){this.playlistTracksEl&&Array.from(this.playlistTracksEl.children).forEach((t,e)=>{t.classList.toggle(`${a}__playlist-track--active`,e===this.playlistIndex)})}updateUI(){const t=s(this.getAttribute("size"),i,"m"),e=s(this.getAttribute("variant"),l,"default"),n=this.getAttribute("theme")||"auto",o=this.getBool("show-controls",!0),r=this.getBool("show-progress",!0),h=this.getBool("show-time",!0),u=this.getBool("show-volume",!0),d=this.getBool("show-settings",!1);this.className=[a,`${a}--size-${t}`,`${a}--variant-${e}`,`${a}--theme-${n}`,this.isPlaying&&`${a}--playing`,!this.isPlaying&&`${a}--paused`,this.isMuted&&`${a}--muted`,this.isLoading&&`${a}--loading`,this.error&&`${a}--error`,this.isShuffle&&`${a}--shuffle`,`${a}--repeat-${this.currentRepeatMode}`].filter(Boolean).join(" "),this.audioEl&&(this.audioEl.autoplay=this.getBool("auto-play"),this.audioEl.loop=this.getBool("loop"),this.audioEl.muted=this.getBool("muted"),this.audioEl.playbackRate=this.playbackRate),this.progressEl&&(this.progressEl.hidden=!r),this.controlsEl&&(this.controlsEl.hidden=!o),this.timeEl&&(this.timeEl.hidden=!h),this.volumeWrap&&(this.volumeWrap.hidden=!u),this.settingsEl&&(this.settingsEl.hidden=!d),this.rateSelect.replaceChildren(...this.getPlaybackRates().map(t=>{const e=document.createElement("option");return e.value=String(t),e.textContent=`${t}x`,t===this.playbackRate&&(e.selected=!0),e})),this.rebuildControlButtons(),this.updateTrackInfo(),this.updateProgress(),this.updateTime(),this.updateVolumeUI(),this.updateSettingsMenu(),this.rebuildPlaylist()}}customElements.get("db-audio-player")||customElements.define("db-audio-player",DbAudioPlayer);export{DbAudioPlayer};
+import{dbText as t,t as e}from"../core/i18n.js";import{createDbIcon as s}from"./db-icons.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{AUDIO_PLAYER_SIZES as l,AUDIO_PLAYER_VARIANTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-audio-player";class DbAudioPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.currentTime=0,this.duration=0,this.showSettingsMenu=!1,this.playbackRate=1,this.currentRepeatMode="none",this.isShuffle=!1,this.isLoading=!1,this.error=null,this.playlistIndex=0,this.shuffledPlaylist=[],this.boundKeyDown=t=>this.handleKeyDown(t)}static get observedAttributes(){return["src","title","artist","album","album-art","size","variant","theme","auto-play","loop","muted","show-controls","enable-keyboard","show-progress","show-time","show-volume","show-settings","playlist","current-index","playback-rates","default-playback-rate","repeat-mode","shuffle"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindAudioEvents()),this.syncFromAttributes(),this.updateUI(),this.getBool("enable-keyboard",!0)&&document.addEventListener("keydown",this.boundKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this.boundKeyDown)}attributeChangedCallback(t){if(this.built){if("current-index"===t)return this.playlistIndex=Number(this.getAttribute("current-index")||0),void this.loadCurrentTrack();"repeat-mode"===t&&(this.currentRepeatMode=this.getAttribute("repeat-mode")||"none"),"shuffle"===t&&(this.isShuffle=this.getBool("shuffle"),this.refreshShuffledPlaylist()),"default-playback-rate"===t&&(this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.audioEl&&(this.audioEl.playbackRate=this.playbackRate)),this.updateUI()}}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getPlaybackRates(){try{const t=this.getAttribute("playback-rates"),e=t?JSON.parse(t):[.5,.75,1,1.25,1.5,2];return Array.isArray(e)&&e.length>0?e:[.5,.75,1,1.25,1.5,2]}catch{return[.5,.75,1,1.25,1.5,2]}}getIconSize(){const t=i(this.getAttribute("size"),l,"m");return"s"===t?16:"l"===t?24:"xl"===t?32:20}getCurrentTrack(){const t=this.getPlaylist();if(t.length>0){return t[this.isShuffle&&this.shuffledPlaylist.length>0?this.shuffledPlaylist[this.playlistIndex]??this.playlistIndex:this.playlistIndex]||t[0]}return{src:this.getAttribute("src")||"",title:this.getAttribute("title")||void 0,artist:this.getAttribute("artist")||void 0,album:this.getAttribute("album")||void 0,albumArt:this.getAttribute("album-art")||void 0}}refreshShuffledPlaylist(){const t=this.getPlaylist();if(t.length>0&&this.isShuffle){const e=Array.from({length:t.length},(t,e)=>e);this.shuffledPlaylist=[...e].sort(()=>Math.random()-.5)}else this.shuffledPlaylist=[]}formatTime(t){return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.currentRepeatMode=this.getAttribute("repeat-mode")||"none",this.isShuffle=this.getBool("shuffle"),this.playbackRate=Number(this.getAttribute("default-playback-rate")||1),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.refreshShuffledPlaylist(),this.loadCurrentTrack()}loadCurrentTrack(){if(!this.audioEl)return;const t=this.getCurrentTrack(),e=t?.src||this.getAttribute("src")||"";this.audioEl.src!==e&&e&&(this.audioEl.src=e,this.audioEl.load()),this.updateTrackInfo(),this.updatePlaylistActive()}bindAudioEvents(){const t=this.audioEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=t.duration||0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted,this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>this.handleEnded()),t.addEventListener("error",()=>{this.error="오디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}))}handleEnded(){this.isPlaying=!1,this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const t=this.getPlaylist();if(t.length>0){if("one"===this.currentRepeatMode)this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());else if("all"===this.currentRepeatMode||this.playlistIndex<t.length-1){const e=this.playlistIndex+1;e<t.length?this.setPlaylistIndex(e):"all"===this.currentRepeatMode&&this.setPlaylistIndex(0)}}else this.getBool("loop")&&this.audioEl&&(this.audioEl.currentTime=0,this.audioEl.play());this.updateUI()}setPlaylistIndex(t){this.playlistIndex=t,this.dispatchEvent(new CustomEvent("db-playlist-change",{detail:{index:t},bubbles:!0,composed:!0})),this.loadCurrentTrack(),this.audioEl&&this.audioEl.play()}togglePlay(){this.audioEl&&(this.isPlaying?this.audioEl.pause():this.audioEl.play())}toggleMute(){this.audioEl&&(this.audioEl.muted=!this.isMuted)}toggleRepeatMode(){const t=["none","one","all"],e=t[(t.indexOf(this.currentRepeatMode)+1)%t.length];this.currentRepeatMode=e,this.dispatchEvent(new CustomEvent("db-repeat-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this.updateUI()}toggleShuffle(){this.isShuffle=!this.isShuffle,this.refreshShuffledPlaylist(),this.dispatchEvent(new CustomEvent("db-shuffle-change",{detail:{shuffle:this.isShuffle},bubbles:!0,composed:!0})),this.updateUI()}handlePlaybackRateChange(t){this.audioEl&&(this.audioEl.playbackRate=t,this.playbackRate=t,this.dispatchEvent(new CustomEvent("db-playback-rate-change",{detail:{rate:t},bubbles:!0,composed:!0})))}handleKeyDown(t){if(this.audioEl&&this.getBool("enable-keyboard",!0))switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"ArrowLeft":t.preventDefault(),this.audioEl.currentTime=Math.max(0,this.currentTime-10);break;case"ArrowRight":t.preventDefault(),this.audioEl.currentTime=Math.min(this.duration,this.currentTime+10);break;case"ArrowUp":t.preventDefault(),this.audioEl.volume=Math.min(1,this.volume+.1),this.audioEl.muted=!1;break;case"ArrowDown":t.preventDefault(),this.audioEl.volume=Math.max(0,this.volume-.1),this.audioEl.muted=0===this.audioEl.volume;break;case"KeyM":t.preventDefault(),this.toggleMute();break;case"KeyR":t.preventDefault(),this.toggleRepeatMode();break;case"KeyS":t.preventDefault(),this.toggleShuffle()}}iconButton(t,e,i,l){const a=document.createElement("button");return a.type="button",a.className=`${n}__control-button`,a.setAttribute("aria-label",e),a.append(s(t,this.getIconSize())),l?.disabled&&(a.disabled=!0),l?.data&&Object.entries(l.data).forEach(([t,e])=>a.setAttribute(`data-${t}`,e)),a.addEventListener("click",i),a}build(){const s=i(this.getAttribute("size"),l,"m"),o=i(this.getAttribute("variant"),a,"default"),r=this.getAttribute("theme")||"auto";this.className=[n,`${n}--size-${s}`,`${n}--variant-${o}`,`${n}--theme-${r}`].join(" "),this.audioEl=document.createElement("audio"),this.audioEl.preload="metadata",this.audioEl.hidden=!0;const h=document.createElement("div");h.className=`${n}__loading`;const u=document.createElement("div");u.className=`${n}__spinner`,h.append(u);const d=document.createElement("div");d.className=`${n}__error`;const c=document.createElement("p");c.textContent=t("오디오를 재생할 수 없습니다.");const m=document.createElement("button");m.type="button",m.textContent=t("다시 시도"),m.addEventListener("click",()=>window.location.reload()),d.append(c,m);const p=document.createElement("div");p.className=`${n}__album-art`,this.albumImgEl=document.createElement("img"),this.albumImgEl.addEventListener("error",()=>{this.albumImgEl&&(this.albumImgEl.style.display="none"),this.albumPlaceholderEl?.classList.remove("album-placeholder")}),this.albumPlaceholderEl=document.createElement("div"),this.albumPlaceholderEl.className="album-placeholder",this.albumPlaceholderEl.textContent="🎵",p.append(this.albumImgEl,this.albumPlaceholderEl);const E=document.createElement("div");E.className=`${n}__main`;const g=document.createElement("div");g.className=`${n}__info`,this.titleEl=document.createElement("div"),this.titleEl.className=`${n}__title`,this.artistEl=document.createElement("div"),this.artistEl.className=`${n}__artist`,this.albumEl=document.createElement("div"),this.albumEl.className=`${n}__album`,g.append(this.titleEl,this.artistEl,this.albumEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${n}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${n}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${n}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.audioEl||!this.progressEl)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.audioEl.currentTime=s*(this.duration||0)});const b=document.createElement("div");b.className=`${n}__controls`;const y=document.createElement("div");y.className=`${n}__left-controls`;const v=document.createElement("div");v.className=`${n}__center-controls`;const f=document.createElement("div");f.className=`${n}__right-controls`,this.playButtonEl=document.createElement("button"),this.playButtonEl.type="button",this.playButtonEl.className=`${n}__play-button`,this.playButtonEl.addEventListener("click",()=>this.togglePlay()),v.append(this.playButtonEl),b.append(y,v,f);const _=document.createElement("div");_.className=`${n}__bottom-controls`;const k=document.createElement("div");k.className=`${n}__left-bottom`;const C=document.createElement("div");C.className=`${n}__right-bottom`;const I=document.createElement("div");I.className=`${n}__time`,this.timeCurrentEl=document.createElement("span");const $=document.createElement("span");$.textContent="/",this.timeDurationEl=document.createElement("span"),I.append(this.timeCurrentEl,$,this.timeDurationEl),k.append(I);const A=document.createElement("div");A.className=`${n}__volume`;const P=this.iconButton(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.isMuted||0===this.volume?e("media.unmute"):e("media.mute"),()=>this.toggleMute());P.title=this.isMuted||0===this.volume?"음소거 해제":"음소거";const x=document.createElement("div");x.className=`${n}__volume-slider`;const M=document.createElement("div");M.className="volume-label";const w=document.createElement("span");w.textContent="🔊";const B=document.createElement("span");M.append(w,B),this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.audioEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);this.audioEl.volume=t,this.audioEl.muted=0===t}),x.append(M,this.volumeInputEl),A.append(P,x);const N=document.createElement("div");N.className=`${n}__settings`;const T=this.iconButton("settings",e("media.settings"),()=>{this.showSettingsMenu=!this.showSettingsMenu,this.updateSettingsMenu()});this.settingsMenuEl=document.createElement("div"),this.settingsMenuEl.className=`${n}__settings-menu`,this.settingsMenuEl.hidden=!0;const S=document.createElement("div");S.className=`${n}__setting-group`;const R=document.createElement("label");R.textContent=t("재생 속도");const L=document.createElement("select");L.addEventListener("change",()=>this.handlePlaybackRateChange(parseFloat(L.value))),S.append(R,L),this.settingsMenuEl.append(S),N.append(T,this.settingsMenuEl),C.append(A,N),_.append(k,C),E.append(g,this.progressEl,b,_);const D=document.createElement("div");D.className=`${n}__playlist`,D.hidden=!0;const U=document.createElement("h4");U.textContent=t("플레이리스트"),this.playlistTracksEl=document.createElement("div"),this.playlistTracksEl.className=`${n}__playlist-tracks`,D.append(U,this.playlistTracksEl),this.append(this.audioEl,h,d,p,E,D),this._leftControls=y,this._rightControls=f,this._controls=b,this._time=I,this._volumeWrap=A,this._settings=N,this._playlist=D,this._rateSelect=L,this._volumePercent=B,this._muteButton=P}get leftControls(){return this._leftControls}get rightControls(){return this._rightControls}get controlsEl(){return this._controls}get timeEl(){return this._time}get volumeWrap(){return this._volumeWrap}get settingsEl(){return this._settings}get playlistEl(){return this._playlist}get rateSelect(){return this._rateSelect}get volumePercent(){return this._volumePercent}get muteButton(){return this._muteButton}updateTrackInfo(){const t=this.getCurrentTrack();this.titleEl&&(this.titleEl.textContent=t?.title||"Unknown Track"),this.artistEl&&(this.artistEl.textContent=t?.artist||"Unknown Artist"),this.albumEl&&(t?.album?(this.albumEl.textContent=t.album,this.albumEl.hidden=!1):this.albumEl.hidden=!0),this.albumImgEl&&this.albumPlaceholderEl&&(t?.albumArt?(this.albumImgEl.src=t.albumArt,this.albumImgEl.alt=t.title||"Album Art",this.albumImgEl.style.display=""):(this.albumImgEl.removeAttribute("src"),this.albumImgEl.style.display="none"),this.albumPlaceholderEl.className="album-placeholder")}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`,this.progressHandleEl.style.transform=t<=0?"translate(0, -50%)":t>=100?"translate(-100%, -50%)":"translate(-50%, -50%)")}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){this.volumeInputEl&&(this.volumeInputEl.value=String(this.volume)),this.volumePercent&&(this.volumePercent.textContent=`${Math.round(100*this.volume)}%`),this.muteButton&&(this.muteButton.replaceChildren(s(this.isMuted||0===this.volume?"mute-filled":"volume-up",this.getIconSize())),this.muteButton.title=this.isMuted||0===this.volume?"음소거 해제":"음소거")}updateSettingsMenu(){this.settingsMenuEl&&(this.settingsMenuEl.hidden=!this.showSettingsMenu)}rebuildControlButtons(){const t=this.getPlaylist(),i=1.2*this.getIconSize();this.leftControls.replaceChildren(),this.rightControls.replaceChildren(),t.length>0&&this.leftControls.append(this.iconButton("refresh",e("media.shuffle"),()=>this.toggleShuffle(),{data:{shuffle:"true"}})),this.leftControls.append(this.iconButton("chevron-left",e("media.previous"),()=>{if(t.length>0){const t=this.playlistIndex-1;t>=0&&this.setPlaylistIndex(t)}else this.audioEl&&(this.audioEl.currentTime=0)},{disabled:t.length>0&&0===this.playlistIndex})),this.playButtonEl&&this.playButtonEl.replaceChildren(s(this.isPlaying?"pause":"play",i)),this.rightControls.append(this.iconButton("chevron-right",e("media.next"),()=>{if(t.length>0){const e=this.playlistIndex+1;e<t.length&&this.setPlaylistIndex(e)}},{disabled:t.length>0&&this.playlistIndex===t.length-1})),t.length>0&&this.rightControls.append(this.iconButton("repeat",e("media.repeat"),()=>this.toggleRepeatMode(),{data:{repeat:"true"}}))}rebuildPlaylist(){if(!this.playlistTracksEl)return;const t=this.getPlaylist(),e=i(this.getAttribute("variant"),a,"default");this.playlistEl.hidden=!("full"===e&&t.length>0),this.playlistTracksEl.replaceChildren(),t.forEach((t,e)=>{const s=document.createElement("div");if(s.className=`${n}__playlist-track${e===this.playlistIndex?` ${n}__playlist-track--active`:""}`,s.addEventListener("click",()=>this.setPlaylistIndex(e)),t.albumArt){const e=document.createElement("img");e.src=t.albumArt,e.alt=t.title||"Album Art",s.append(e)}const i=document.createElement("div");i.className=`${n}__playlist-track-info`;const l=document.createElement("div");l.className=`${n}__playlist-track-title`,l.textContent=t.title||"Unknown Track";const a=document.createElement("div");a.className=`${n}__playlist-track-artist`,a.textContent=t.artist||"Unknown Artist",i.append(l,a),s.append(i),this.playlistTracksEl?.append(s)})}updatePlaylistActive(){this.playlistTracksEl&&Array.from(this.playlistTracksEl.children).forEach((t,e)=>{t.classList.toggle(`${n}__playlist-track--active`,e===this.playlistIndex)})}updateUI(){const t=i(this.getAttribute("size"),l,"m"),e=i(this.getAttribute("variant"),a,"default"),s=this.getAttribute("theme")||"auto",o=this.getBool("show-controls",!0),r=this.getBool("show-progress",!0),h=this.getBool("show-time",!0),u=this.getBool("show-volume",!0),d=this.getBool("show-settings",!1);this.className=[n,`${n}--size-${t}`,`${n}--variant-${e}`,`${n}--theme-${s}`,this.isPlaying&&`${n}--playing`,!this.isPlaying&&`${n}--paused`,this.isMuted&&`${n}--muted`,this.isLoading&&`${n}--loading`,this.error&&`${n}--error`,this.isShuffle&&`${n}--shuffle`,`${n}--repeat-${this.currentRepeatMode}`].filter(Boolean).join(" "),this.audioEl&&(this.audioEl.autoplay=this.getBool("auto-play"),this.audioEl.loop=this.getBool("loop"),this.audioEl.muted=this.getBool("muted"),this.audioEl.playbackRate=this.playbackRate),this.progressEl&&(this.progressEl.hidden=!r),this.controlsEl&&(this.controlsEl.hidden=!o),this.timeEl&&(this.timeEl.hidden=!h),this.volumeWrap&&(this.volumeWrap.hidden=!u),this.settingsEl&&(this.settingsEl.hidden=!d),this.rateSelect.replaceChildren(...this.getPlaybackRates().map(t=>{const e=document.createElement("option");return e.value=String(t),e.textContent=`${t}x`,t===this.playbackRate&&(e.selected=!0),e})),this.rebuildControlButtons(),this.updateTrackInfo(),this.updateProgress(),this.updateTime(),this.updateVolumeUI(),this.updateSettingsMenu(),this.rebuildPlaylist()}}customElements.get("db-audio-player")||customElements.define("db-audio-player",DbAudioPlayer);export{DbAudioPlayer};

package/dist/esm/components/db-bento-card.d.ts

@@ -0,0 +1,55 @@
+import { BentoCardVariant, BentoCardSize, BentoCardImagePosition } from '../ui-contracts/dist/components.d.js';
+
+declare class DbBentoCard extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private bgWrapper?;
+    private imgEl?;
+    private contentWrapper?;
+    private iconEl?;
+    private titleEl?;
+    private descEl?;
+    private ctaWrapper?;
+    private ctaBtn?;
+    private ctaTextSpan?;
+    private overlayEl?;
+    get name(): string;
+    set name(value: string);
+    get description(): string;
+    set description(value: string);
+    get icon(): string;
+    set icon(value: string);
+    get href(): string;
+    set href(value: string);
+    get cta(): string;
+    set cta(value: string);
+    get colSpan(): string;
+    set colSpan(value: string);
+    get rowSpan(): string;
+    set rowSpan(value: string);
+    get variant(): BentoCardVariant;
+    set variant(value: BentoCardVariant);
+    get size(): BentoCardSize;
+    set size(value: BentoCardSize);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get image(): string;
+    set image(value: string);
+    get imageAlt(): string;
+    set imageAlt(value: string);
+    get imagePosition(): BentoCardImagePosition;
+    set imagePosition(value: BentoCardImagePosition);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private handleCtaClick;
+    private build;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-bento-card': DbBentoCard;
+    }
+}
+
+export { DbBentoCard };

package/dist/esm/components/db-bento-card.js

@@ -0,0 +1 @@
+import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import{sanitizeHref as i}from"../core/safe-url.js";import{t as s}from"../core/i18n.js";import{coerceToContract as a}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BENTO_CARD_VARIANTS as r,BENTO_CARD_SIZES as n,BENTO_CARD_IMAGE_POSITIONS as h}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const c="designbase-wc-bento-card";class DbBentoCard extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleCtaClick=t=>{this.disabled?t.preventDefault():this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0,detail:{name:this.name,href:this.href}}))}}static get observedAttributes(){return["name","title","description","icon","href","cta","col-span","row-span","variant","size","target","disabled","image","image-alt","image-position"]}get name(){return this.getAttribute("name")||this.getAttribute("title")||""}set name(t){this.setAttribute("name",t)}get description(){return this.getAttribute("description")||""}set description(t){this.setAttribute("description",t)}get icon(){return this.getAttribute("icon")||""}set icon(t){this.setAttribute("icon",t)}get href(){return this.getAttribute("href")||""}set href(t){this.setAttribute("href",t)}get cta(){return this.getAttribute("cta")||""}set cta(t){this.setAttribute("cta",t)}get colSpan(){const t=this.getAttribute("col-span");return t&&["1","2","3","4"].includes(t)?t:"1"}set colSpan(t){this.setAttribute("col-span",t)}get rowSpan(){const t=this.getAttribute("row-span");return t&&["1","2","3"].includes(t)?t:"1"}set rowSpan(t){this.setAttribute("row-span",t)}get variant(){return a(this.getAttribute("variant"),r,"default")}set variant(t){this.setAttribute("variant",t)}get size(){return a(this.getAttribute("size"),n,"m")}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get image(){return this.getAttribute("image")||""}set image(t){this.setAttribute("image",t)}get imageAlt(){return this.getAttribute("image-alt")||this.name}set imageAlt(t){this.setAttribute("image-alt",t)}get imagePosition(){return a(this.getAttribute("image-position"),h,"top")}set imagePosition(t){this.setAttribute("image-position",t)}connectedCallback(){this.built||(this.build(),this.built=!0),this.sync()}disconnectedCallback(){this.ctaBtn?.removeEventListener("click",this.handleCtaClick)}attributeChangedCallback(){this.built&&this.sync()}build(){const e=Array.from(this.childNodes);this.bgWrapper=document.createElement("div"),this.bgWrapper.className=`${c}__background`,this.bgWrapper.setAttribute("aria-hidden","true"),e.forEach(t=>{this.bgWrapper?.appendChild(t)}),this.contentWrapper=document.createElement("div"),this.contentWrapper.className=`${c}__content`,this.iconEl=document.createElement("div"),this.iconEl.className=`${c}__icon`,this.iconEl.setAttribute("aria-hidden","true"),this.titleEl=document.createElement("h3"),this.titleEl.className=`${c}__title`,this.descEl=document.createElement("p"),this.descEl.className=`${c}__description`,this.contentWrapper.append(this.iconEl,this.titleEl,this.descEl),this.ctaWrapper=document.createElement("div"),this.ctaWrapper.className=`${c}__cta`,this.ctaBtn=document.createElement("a"),this.ctaBtn.className=`${c}__cta-btn`,this.ctaBtn.addEventListener("click",this.handleCtaClick),this.ctaTextSpan=document.createElement("span"),this.ctaBtn.appendChild(this.ctaTextSpan);const i=t("arrow-right",16);i.setAttribute("aria-hidden","true"),this.ctaBtn.appendChild(i),this.ctaWrapper.appendChild(this.ctaBtn),this.overlayEl=document.createElement("div"),this.overlayEl.className=`${c}__overlay`,this.overlayEl.setAttribute("aria-hidden","true"),this.append(this.bgWrapper,this.contentWrapper,this.ctaWrapper,this.overlayEl)}sync(){if(this.classList.add(c),this.titleEl&&(this.titleEl.textContent=this.name,this.titleEl.hidden=!this.name),this.descEl&&(this.descEl.textContent=this.description,this.descEl.hidden=!this.description),this.iconEl){const i=this.icon;i&&e(i)?(this.iconEl.replaceChildren(t(i,24)),this.iconEl.hidden=!1):i?(this.iconEl.replaceChildren(t("sparkle",24)),this.iconEl.hidden=!1):(this.iconEl.replaceChildren(),this.iconEl.hidden=!0)}const a=this.href,h=this.cta||s("bentoCard.cta");if(this.ctaWrapper&&this.ctaBtn&&this.ctaTextSpan)if(a||this.cta){this.ctaWrapper.hidden=!1,this.ctaTextSpan.textContent=h,this.ctaBtn.href=i(a,"#");const t=this.getAttribute("target");t?(this.ctaBtn.target=t,"_blank"===t&&(this.ctaBtn.rel="noopener noreferrer")):a.startsWith("http://")||a.startsWith("https://")?(this.ctaBtn.target="_blank",this.ctaBtn.rel="noopener noreferrer"):(this.ctaBtn.removeAttribute("target"),this.ctaBtn.removeAttribute("rel"))}else this.ctaWrapper.hidden=!0;const l=this.image;l?(this.imgEl||(this.imgEl=document.createElement("img"),this.imgEl.className=`${c}__image`,this.bgWrapper?.prepend(this.imgEl)),this.imgEl.src=l,this.imgEl.alt=this.imageAlt,this.classList.add(`${c}--has-image`),this.classList.remove(`${c}--image-top`,`${c}--image-cover`),this.classList.add(`${c}--image-${this.imagePosition}`)):(this.imgEl&&(this.imgEl.remove(),this.imgEl=void 0),this.classList.remove(`${c}--has-image`,`${c}--image-top`,`${c}--image-cover`)),r.forEach(t=>{this.classList.remove(`${c}--${t}`)}),n.forEach(t=>{this.classList.remove(`${c}--${t}`)}),["1","2","3","4"].forEach(t=>{this.classList.remove(`${c}--col-${t}`)}),["1","2","3"].forEach(t=>{this.classList.remove(`${c}--row-${t}`)}),this.classList.add(`${c}--${this.variant}`),this.classList.add(`${c}--${this.size}`),this.classList.add(`${c}--col-${this.colSpan}`),this.classList.add(`${c}--row-${this.rowSpan}`),this.disabled?(this.setAttribute("aria-disabled","true"),this.classList.add(`${c}--disabled`),this.ctaBtn?.setAttribute("tabindex","-1"),this.ctaBtn?.setAttribute("aria-disabled","true")):(this.removeAttribute("aria-disabled"),this.classList.remove(`${c}--disabled`),this.ctaBtn?.removeAttribute("tabindex"),this.ctaBtn?.removeAttribute("aria-disabled"))}}customElements.get("db-bento-card")||customElements.define("db-bento-card",DbBentoCard);export{DbBentoCard};

package/dist/esm/components/db-bento-grid.d.ts

@@ -0,0 +1,25 @@
+import { BentoGridColumns, BentoGridSize } from '../ui-contracts/dist/components.d.js';
+
+declare class DbBentoGrid extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    get cols(): BentoGridColumns;
+    set cols(value: BentoGridColumns);
+    get size(): BentoGridSize;
+    set size(value: BentoGridSize);
+    get gap(): string;
+    set gap(value: string);
+    get autoRows(): string;
+    set autoRows(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-bento-grid': DbBentoGrid;
+    }
+}
+
+export { DbBentoGrid };

package/dist/esm/components/db-bento-grid.js

@@ -0,0 +1 @@
+import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{BENTO_GRID_COLUMNS as s,BENTO_GRID_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-bento-grid";class DbBentoGrid extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["cols","columns","gap","auto-rows","size"]}get cols(){const e=this.getAttribute("cols")||this.getAttribute("columns");return t(e,s,"3")}set cols(t){this.setAttribute("cols",t)}get size(){return t(this.getAttribute("size"),e,"m")}set size(t){this.setAttribute("size",t)}get gap(){return this.getAttribute("gap")||"m"}set gap(t){this.setAttribute("gap",t)}get autoRows(){return this.getAttribute("auto-rows")||""}set autoRows(t){this.setAttribute("auto-rows",t)}connectedCallback(){this.built||(this.built=!0),this.sync()}disconnectedCallback(){}attributeChangedCallback(){this.built&&this.sync()}sync(){this.classList.add(i),s.forEach(t=>{this.classList.remove(`${i}--cols-${t}`)}),e.forEach(t=>{this.classList.remove(`${i}--${t}`)}),["s","m","l"].forEach(t=>{this.classList.remove(`${i}--gap-${t}`)});const t=this.cols;this.classList.add(`${i}--cols-${t}`),this.classList.add(`${i}--${this.size}`);const o=this.gap;["s","m","l"].includes(o)?(this.classList.add(`${i}--gap-${o}`),this.style.removeProperty("--bento-gap")):o&&this.style.setProperty("--bento-gap",o);const r=this.autoRows;r?this.style.setProperty("--bento-auto-rows",r):this.style.removeProperty("--bento-auto-rows")}}customElements.get("db-bento-grid")||customElements.define("db-bento-grid",DbBentoGrid);export{DbBentoGrid};