@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,202 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"];class DbCheckbox extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleChange=()=>{if(!this.input)return;const t=this.input.checked;this.toggleAttribute("checked",t),this.indeterminate&&(this.removeAttribute("indeterminate"),this.input.indeterminate=!1),this.syncVisual(),this.syncClasses(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","indeterminate","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(t){this.toggleAttribute("indeterminate",t),this.input&&(this.input.indeterminate=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-checkbox",this.input=document.createElement("input"),this.input.type="checkbox",this.input.className="designbase-wc-checkbox__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-checkbox__visual",this.visual.setAttribute("aria-hidden","true"),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-checkbox__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.hasAttribute("checked")&&!this.hasAttribute("selected")&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected")),e=this.hasAttribute("indeterminate");this.input.checked=t,this.input.indeterminate=e,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){if(this.visual&&this.input){if(this.visual.replaceChildren(),this.input.indeterminate){const e=document.createElement("span");return e.className="designbase-wc-checkbox__indeterminate-icon",e.appendChild(t("minus",16)),void this.visual.appendChild(e)}if(this.input.checked){const e=document.createElement("span");e.className="designbase-wc-checkbox__check-icon",e.appendChild(t("done",16)),this.visual.appendChild(e)}}}syncClasses(){if(!this.root||!this.input)return;const t=e.includes(this.size)?this.size:"m",i=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-checkbox",`designbase-wc-checkbox--${t}`,this.input.checked&&"designbase-wc-checkbox--selected",this.input.indeterminate&&"designbase-wc-checkbox--indeterminate",this.disabled&&"designbase-wc-checkbox--disabled",this.readOnly&&"designbase-wc-checkbox--readonly",!i&&"designbase-wc-checkbox--no-label"].filter(Boolean).join(" ")}}customElements.get("db-checkbox")||customElements.define("db-checkbox",DbCheckbox);export{DbCheckbox};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const CHECK_ICON_SIZE = 16;
+class DbCheckbox extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.handleChange = () => {
+            if (!this.input)
+                return;
+            const checked = this.input.checked;
+            this.toggleAttribute('checked', checked);
+            if (this.indeterminate) {
+                this.removeAttribute('indeterminate');
+                this.input.indeterminate = false;
+            }
+            this.syncVisual();
+            this.syncClasses();
+            this.dispatchEvent(new CustomEvent('db-change', {
+                detail: { checked, selected: checked },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'checked',
+            'selected',
+            'default-checked',
+            'default-selected',
+            'indeterminate',
+            'size',
+            'disabled',
+            'readonly',
+            'required',
+            'name',
+            'value',
+            'has-label',
+        ];
+    }
+    get checked() {
+        return this.input?.checked ?? (this.hasAttribute('checked') || this.hasAttribute('selected'));
+    }
+    set checked(value) {
+        this.toggleAttribute('checked', value);
+        if (this.input) {
+            this.input.checked = value;
+            this.syncVisual();
+            this.syncClasses();
+        }
+    }
+    get indeterminate() {
+        return this.hasAttribute('indeterminate');
+    }
+    set indeterminate(value) {
+        this.toggleAttribute('indeterminate', value);
+        if (this.input) {
+            this.input.indeterminate = value;
+            this.syncVisual();
+            this.syncClasses();
+        }
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+        if (this.input)
+            this.input.disabled = value;
+        this.syncClasses();
+    }
+    get readOnly() {
+        return this.hasAttribute('readonly');
+    }
+    set readOnly(value) {
+        this.toggleAttribute('readonly', value);
+        if (this.input)
+            this.input.readOnly = value;
+        this.syncClasses();
+    }
+    get required() {
+        return this.hasAttribute('required');
+    }
+    set required(value) {
+        this.toggleAttribute('required', value);
+        if (this.input)
+            this.input.required = value;
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        if (!this.built) {
+            this.build();
+        }
+        this.syncState();
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'checked' || name === 'selected') {
+            if (this.input) {
+                this.input.checked = this.hasAttribute('checked') || this.hasAttribute('selected');
+            }
+            this.syncVisual();
+            this.syncClasses();
+            return;
+        }
+        this.syncState();
+    }
+    get hasLabel() {
+        return !this.hasAttribute('has-label') || this.getAttribute('has-label') !== 'false';
+    }
+    build() {
+        this.root = document.createElement('label');
+        this.root.className = 'designbase-wc-checkbox';
+        this.input = document.createElement('input');
+        this.input.type = 'checkbox';
+        this.input.className = 'designbase-wc-checkbox__input';
+        this.visual = document.createElement('span');
+        this.visual.className = 'designbase-wc-checkbox__visual';
+        this.visual.setAttribute('aria-hidden', 'true');
+        this.labelEl = document.createElement('span');
+        this.labelEl.className = 'designbase-wc-checkbox__label';
+        while (this.firstChild) {
+            this.labelEl.appendChild(this.firstChild);
+        }
+        this.root.append(this.input, this.visual, this.labelEl);
+        this.appendChild(this.root);
+        this.input.addEventListener('change', this.handleChange);
+        this.built = true;
+    }
+    syncState() {
+        if (!this.root || !this.input || !this.visual)
+            return;
+        const checked = this.hasAttribute('checked')
+            || this.hasAttribute('selected')
+            || (!this.hasAttribute('checked')
+                && !this.hasAttribute('selected')
+                && (this.hasAttribute('default-checked') || this.hasAttribute('default-selected')));
+        const indeterminate = this.hasAttribute('indeterminate');
+        this.input.checked = checked;
+        this.input.indeterminate = indeterminate;
+        this.input.disabled = this.disabled;
+        this.input.readOnly = this.readOnly;
+        this.input.required = this.required;
+        this.input.name = this.getAttribute('name') || '';
+        this.input.value = this.getAttribute('value') || '';
+        if (this.hasLabel) {
+            this.labelEl?.removeAttribute('hidden');
+        }
+        else {
+            this.labelEl?.setAttribute('hidden', '');
+        }
+        this.syncVisual();
+        this.syncClasses();
+    }
+    syncVisual() {
+        if (!this.visual || !this.input)
+            return;
+        this.visual.replaceChildren();
+        if (this.input.indeterminate) {
+            const iconHost = document.createElement('span');
+            iconHost.className = 'designbase-wc-checkbox__indeterminate-icon';
+            iconHost.appendChild(createDbIcon('minus', CHECK_ICON_SIZE));
+            this.visual.appendChild(iconHost);
+            return;
+        }
+        if (this.input.checked) {
+            const iconHost = document.createElement('span');
+            iconHost.className = 'designbase-wc-checkbox__check-icon';
+            iconHost.appendChild(createDbIcon('done', CHECK_ICON_SIZE));
+            this.visual.appendChild(iconHost);
+        }
+    }
+    syncClasses() {
+        if (!this.root || !this.input)
+            return;
+        const size = SIZES.includes(this.size) ? this.size : 'm';
+        const hasLabelText = this.hasLabel && Boolean(this.labelEl?.textContent?.trim());
+        this.root.className = [
+            'designbase-wc-checkbox',
+            `designbase-wc-checkbox--${size}`,
+            this.input.checked && 'designbase-wc-checkbox--selected',
+            this.input.indeterminate && 'designbase-wc-checkbox--indeterminate',
+            this.disabled && 'designbase-wc-checkbox--disabled',
+            this.readOnly && 'designbase-wc-checkbox--readonly',
+            !hasLabelText && 'designbase-wc-checkbox--no-label',
+        ].filter(Boolean).join(' ');
+    }
+}
+if (!customElements.get('db-checkbox')) {
+    customElements.define('db-checkbox', DbCheckbox);
+}
+
+export { DbCheckbox };

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

@@ -1 +1,104 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],i=["default","primary","success","warning","danger","info","neutral"];class DbChip extends HTMLElement{static get observedAttributes(){return["label","size","variant","deletable","disabled","selected","full-width","clickable","start-icon","end-icon"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}iconSize(e){return"s"===e?12:"l"===e?20:16}render(){const s=this.getAttribute("label")||this.textContent?.trim()||"",n=this.getAttribute("size")||"m",c=this.getAttribute("variant")||"default",a=this.hasAttribute("disabled"),d=this.hasAttribute("deletable"),l=this.hasAttribute("selected"),b=this.hasAttribute("full-width"),h=this.hasAttribute("clickable"),r=this.getAttribute("start-icon"),o=this.getAttribute("end-icon"),p=t.includes(n)?n:"m",u=i.includes(c)?c:"default",m=this.iconSize(p);if(this.className=["designbase-wc-chip",`designbase-wc-chip--${p}`,`designbase-wc-chip--${u}`,d&&"designbase-wc-chip--deletable",a&&"designbase-wc-chip--disabled",l&&"designbase-wc-chip--selected",h&&"designbase-wc-chip--clickable",b&&"designbase-wc-chip--full-width"].filter(Boolean).join(" "),this.replaceChildren(),h&&!a?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),r){const t=document.createElement("span");t.className="designbase-wc-chip__start-icon",t.append(e(r,m)),this.append(t)}const g=document.createElement("span");if(g.className="designbase-wc-chip__label",g.textContent=s,this.append(g),o&&!d){const t=document.createElement("span");t.className="designbase-wc-chip__end-icon",t.append(e(o,m)),this.append(t)}if(d){const t=document.createElement("button");t.type="button",t.className="designbase-wc-chip__delete-button",t.disabled=a,t.setAttribute("aria-label",`${s} 삭제`),t.append(e("close",m)),t.addEventListener("click",e=>{e.stopPropagation(),a||this.dispatchEvent(new CustomEvent("db-delete",{bubbles:!0,composed:!0}))}),this.append(t)}this.onclick=()=>{!a&&h&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.onkeydown=e=>{"Enter"!==e.key&&" "!==e.key||a||!h||(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})))}}}customElements.get("db-chip")||customElements.define("db-chip",DbChip);export{DbChip};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info', 'neutral'];
+class DbChip extends HTMLElement {
+    static get observedAttributes() {
+        return ['label', 'size', 'variant', 'deletable', 'disabled', 'selected', 'full-width', 'clickable', 'start-icon', 'end-icon'];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    iconSize(size) {
+        if (size === 's')
+            return 12;
+        if (size === 'l')
+            return 20;
+        return 16;
+    }
+    render() {
+        const label = this.getAttribute('label') || this.textContent?.trim() || '';
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const disabled = this.hasAttribute('disabled');
+        const deletable = this.hasAttribute('deletable');
+        const selected = this.hasAttribute('selected');
+        const fullWidth = this.hasAttribute('full-width');
+        const clickable = this.hasAttribute('clickable');
+        const startIcon = this.getAttribute('start-icon');
+        const endIcon = this.getAttribute('end-icon');
+        const resolvedSize = SIZES.includes(size) ? size : 'm';
+        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'default';
+        const iconPx = this.iconSize(resolvedSize);
+        this.className = [
+            'designbase-wc-chip',
+            `designbase-wc-chip--${resolvedSize}`,
+            `designbase-wc-chip--${resolvedVariant}`,
+            deletable && 'designbase-wc-chip--deletable',
+            disabled && 'designbase-wc-chip--disabled',
+            selected && 'designbase-wc-chip--selected',
+            clickable && 'designbase-wc-chip--clickable',
+            fullWidth && 'designbase-wc-chip--full-width',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.replaceChildren();
+        if (clickable && !disabled) {
+            this.setAttribute('role', 'button');
+            this.tabIndex = 0;
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('tabindex');
+        }
+        if (startIcon) {
+            const iconWrap = document.createElement('span');
+            iconWrap.className = 'designbase-wc-chip__start-icon';
+            iconWrap.append(createDbIcon(startIcon, iconPx));
+            this.append(iconWrap);
+        }
+        const text = document.createElement('span');
+        text.className = 'designbase-wc-chip__label';
+        text.textContent = label;
+        this.append(text);
+        if (endIcon && !deletable) {
+            const iconWrap = document.createElement('span');
+            iconWrap.className = 'designbase-wc-chip__end-icon';
+            iconWrap.append(createDbIcon(endIcon, iconPx));
+            this.append(iconWrap);
+        }
+        if (deletable) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'designbase-wc-chip__delete-button';
+            button.disabled = disabled;
+            button.setAttribute('aria-label', `${label} 삭제`);
+            button.append(createDbIcon('close', iconPx));
+            button.addEventListener('click', (event) => {
+                event.stopPropagation();
+                if (!disabled) {
+                    this.dispatchEvent(new CustomEvent('db-delete', { bubbles: true, composed: true }));
+                }
+            });
+            this.append(button);
+        }
+        this.onclick = () => {
+            if (!disabled && clickable) {
+                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            }
+        };
+        this.onkeydown = (event) => {
+            if ((event.key === 'Enter' || event.key === ' ') && !disabled && clickable) {
+                event.preventDefault();
+                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            }
+        };
+    }
+}
+if (!customElements.get('db-chip'))
+    customElements.define('db-chip', DbChip);
+
+export { DbChip };

package/dist/esm/components/db-code-block.js

@@ -1 +1,304 @@
-import{ensureHighlightReady as e,highlightCodeSync as t,formatLanguageLabel as i}from"./highlight-code.js";const s="designbase-wc-code-block";class DbCodeBlock extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.renderToken=0,this.internalActiveId="",this.copied=!1,this.editedCodes={},this.handleSegmentChange=e=>{const t=e,i=t.detail?.value;i&&(this.hasAttribute("active-id")||(this.internalActiveId=i),this.dispatchEvent(new CustomEvent("db-active-id-change",{detail:{activeId:i},bubbles:!0,composed:!0})),this.render())}}static get observedAttributes(){return["items","code","language","default-active-id","active-id","show-language","highlight","theme","show-copy","copied-label","copy-label","min-height","max-height","overflow","editable"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.internalActiveId=this.getAttribute("default-active-id")||this.getResolvedItems()[0]?.id||""),this.render(),e().then(()=>{this.isConnected&&this.built&&this.render()}),this.addEventListener("db-change",this.handleSegmentChange)}disconnectedCallback(){this.removeEventListener("db-change",this.handleSegmentChange),this.copyTimeout&&window.clearTimeout(this.copyTimeout)}attributeChangedCallback(e){if(this.built)if("active-id"!==e){if("items"===e||"code"===e||"language"===e){const e=this.getResolvedItems();e.find(e=>e.id===this.getActiveId())||(this.internalActiveId=e[0]?.id||"")}this.render()}else this.render()}getBool(e,t=!0){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getResolvedItems(){const e=this.getAttribute("items");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length>0)return t}catch{}const t=this.getAttribute("code");if(t){const e=this.getAttribute("language")||"tsx";return[{id:"default",label:e,code:t,language:e}]}return[]}getActiveId(){return this.getAttribute("active-id")||this.internalActiveId}getActiveItem(){const e=this.getResolvedItems();return e.find(e=>e.id===this.getActiveId())||e[0]}toCssSize(e){if(e)return/^\d+$/.test(e)?`${e}px`:e}async handleCopy(){const e=this.getActiveItem(),t=this.getBool("editable",!1),i=(t?this.editedCodes[e?.id??""]??e?.code:e?.code)?.trim();if(i){try{await navigator.clipboard.writeText(i)}catch{const e=document.createElement("textarea");e.value=i,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),e.remove()}this.copied=!0,this.render(),this.copyTimeout&&window.clearTimeout(this.copyTimeout),this.copyTimeout=window.setTimeout(()=>{this.copied=!1,this.render()},1600)}}render(){const e=++this.renderToken;this.renderNow(e)}renderNow(e){const o=this.getActiveItem();if(!o)return void this.replaceChildren();const n=this.getResolvedItems(),d=n.length>1,c=this.getAttribute("language")||"tsx",a=o.language??c,r=this.getBool("show-language",!0),l=this.getBool("highlight",!0),h=this.getAttribute("theme")||"auto",u=this.getBool("show-copy",!0),m=this.getAttribute("copied-label")||"복사됨",b=this.getAttribute("copy-label")||"복사",g=this.getAttribute("overflow")||"scroll-x",p=this.getBool("editable",!1),v=p?this.editedCodes[o.id]??o.code:o.code,A=v.trim();let y=null;if(l&&v)try{y=t(v,a)}catch{y=null}if(e!==this.renderToken)return;const f=this.toCssSize(this.getAttribute("min-height")),C=this.toCssSize(this.getAttribute("max-height"));f?this.style.setProperty("--db-code-block-min-height",f):this.style.removeProperty("--db-code-block-min-height"),C?this.style.setProperty("--db-code-block-max-height",C):this.style.removeProperty("--db-code-block-max-height"),this.className=[s,`${s}--overflow-${g}`,"auto"!==h&&`${s}--theme-${h}`,p&&`${s}--editable`].filter(Boolean).join(" ");const E=document.createElement("div");E.className=`${s}__toolbar`;const _=document.createElement("div");if(_.className=`${s}__toolbar-left`,d){const e=document.createElement("db-segment-control");e.setAttribute("size","s"),e.setAttribute("options",JSON.stringify(n.map(e=>({value:e.id,label:e.label})))),e.setAttribute("value",this.getActiveId()),_.append(e)}if(r){const e=document.createElement("span");e.className=`${s}__language`,e.textContent=i(a),_.append(e)}if(E.append(_),u){const e=document.createElement("db-button");e.setAttribute("type","button"),e.setAttribute("variant","tertiary"),e.setAttribute("size","s"),e.setAttribute("start-icon",this.copied?"done":"copy"),e.textContent=this.copied?m:b,e.addEventListener("db-click",()=>this.handleCopy()),E.append(e)}const x=document.createElement("div");if(x.className=`${s}__body`,d&&o.description){const e=document.createElement("p");e.className=`${s}__caption`,e.textContent=o.description,x.append(e)}if(p){void 0===this.editedCodes[o.id]&&(this.editedCodes[o.id]=o.code);const e=document.createElement("div");e.className=`${s}__editor`;const n=document.createElement("pre");n.className=`${s}__pre ${s}__pre--mirror`,n.setAttribute("aria-hidden","true");const d=document.createElement("code");d.className=`${s}__code language-${a}`,y?d.innerHTML=y:d.textContent=v,n.append(d);const c=document.createElement("textarea");c.className=`${s}__textarea`,c.value=v,c.spellcheck=!1,c.setAttribute("autocapitalize","off"),c.setAttribute("autocorrect","off"),c.setAttribute("aria-label",`${i(a)} 코드 편집`),c.addEventListener("input",()=>{this.editedCodes[o.id]=c.value;const e=l&&c.value?t(c.value,a):null;e?d.innerHTML=e:d.textContent=c.value,this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:c.value,itemId:o.id},bubbles:!0,composed:!0}))}),e.append(n,c),x.append(e)}else{const e=document.createElement("pre");e.className=`${s}__pre`;const t=document.createElement("code");t.className=`${s}__code language-${a}`,y?t.innerHTML=y:t.textContent=A,e.append(t),x.append(e)}this.replaceChildren(E,x)}}customElements.get("db-code-block")||customElements.define("db-code-block",DbCodeBlock);export{DbCodeBlock};
+import { ensureHighlightReady, highlightCodeSync, formatLanguageLabel } from './highlight-code.js';
+
+const CLASS = 'designbase-wc-code-block';
+class DbCodeBlock extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.renderToken = 0;
+        this.internalActiveId = '';
+        this.copied = false;
+        this.editedCodes = {};
+        this.handleSegmentChange = (event) => {
+            const custom = event;
+            const value = custom.detail?.value;
+            if (!value)
+                return;
+            if (!this.hasAttribute('active-id')) {
+                this.internalActiveId = value;
+            }
+            this.dispatchEvent(new CustomEvent('db-active-id-change', {
+                detail: { activeId: value },
+                bubbles: true,
+                composed: true,
+            }));
+            this.render();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'items',
+            'code',
+            'language',
+            'default-active-id',
+            'active-id',
+            'show-language',
+            'highlight',
+            'theme',
+            'show-copy',
+            'copied-label',
+            'copy-label',
+            'min-height',
+            'max-height',
+            'overflow',
+            'editable',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        if (!this.built) {
+            this.built = true;
+            this.internalActiveId =
+                this.getAttribute('default-active-id') || this.getResolvedItems()[0]?.id || '';
+        }
+        this.render();
+        void ensureHighlightReady().then(() => {
+            if (this.isConnected && this.built)
+                this.render();
+        });
+        this.addEventListener('db-change', this.handleSegmentChange);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('db-change', this.handleSegmentChange);
+        if (this.copyTimeout)
+            window.clearTimeout(this.copyTimeout);
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'active-id') {
+            this.render();
+            return;
+        }
+        if (name === 'items' || name === 'code' || name === 'language') {
+            const items = this.getResolvedItems();
+            if (!items.find((item) => item.id === this.getActiveId())) {
+                this.internalActiveId = items[0]?.id || '';
+            }
+        }
+        this.render();
+    }
+    getBool(name, fallback = true) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getResolvedItems() {
+        const rawItems = this.getAttribute('items');
+        if (rawItems) {
+            try {
+                const parsed = JSON.parse(rawItems);
+                if (Array.isArray(parsed) && parsed.length > 0)
+                    return parsed;
+            }
+            catch {
+                /* ignore */
+            }
+        }
+        const code = this.getAttribute('code');
+        if (code) {
+            const language = this.getAttribute('language') || 'tsx';
+            return [{ id: 'default', label: language, code, language }];
+        }
+        return [];
+    }
+    getActiveId() {
+        return this.getAttribute('active-id') || this.internalActiveId;
+    }
+    getActiveItem() {
+        const items = this.getResolvedItems();
+        return items.find((item) => item.id === this.getActiveId()) || items[0];
+    }
+    toCssSize(value) {
+        if (!value)
+            return undefined;
+        return /^\d+$/.test(value) ? `${value}px` : value;
+    }
+    async handleCopy() {
+        const activeItem = this.getActiveItem();
+        const editable = this.getBool('editable', false);
+        const text = (editable
+            ? (this.editedCodes[activeItem?.id ?? ''] ?? activeItem?.code)
+            : activeItem?.code)?.trim();
+        if (!text)
+            return;
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch {
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            textarea.remove();
+        }
+        this.copied = true;
+        this.render();
+        if (this.copyTimeout)
+            window.clearTimeout(this.copyTimeout);
+        this.copyTimeout = window.setTimeout(() => {
+            this.copied = false;
+            this.render();
+        }, 1600);
+    }
+    render() {
+        const token = ++this.renderToken;
+        this.renderNow(token);
+    }
+    renderNow(token) {
+        const activeItem = this.getActiveItem();
+        if (!activeItem) {
+            this.replaceChildren();
+            return;
+        }
+        const items = this.getResolvedItems();
+        const hasSegments = items.length > 1;
+        const language = this.getAttribute('language') || 'tsx';
+        const activeLanguage = activeItem.language ?? language;
+        const showLanguage = this.getBool('show-language', true);
+        const highlight = this.getBool('highlight', true);
+        const theme = this.getAttribute('theme') || 'auto';
+        const showCopy = this.getBool('show-copy', true);
+        const copiedLabel = this.getAttribute('copied-label') || '복사됨';
+        const copyLabel = this.getAttribute('copy-label') || '복사';
+        const overflow = this.getAttribute('overflow') || 'scroll-x';
+        const editable = this.getBool('editable', false);
+        const sourceCode = editable
+            ? (this.editedCodes[activeItem.id] ?? activeItem.code)
+            : activeItem.code;
+        const trimmedCode = sourceCode.trim();
+        let highlightedCode = null;
+        if (highlight && sourceCode) {
+            try {
+                highlightedCode = highlightCodeSync(sourceCode, activeLanguage);
+            }
+            catch {
+                highlightedCode = null;
+            }
+        }
+        if (token !== this.renderToken)
+            return;
+        const minHeight = this.toCssSize(this.getAttribute('min-height'));
+        const maxHeight = this.toCssSize(this.getAttribute('max-height'));
+        if (minHeight)
+            this.style.setProperty('--db-code-block-min-height', minHeight);
+        else
+            this.style.removeProperty('--db-code-block-min-height');
+        if (maxHeight)
+            this.style.setProperty('--db-code-block-max-height', maxHeight);
+        else
+            this.style.removeProperty('--db-code-block-max-height');
+        this.className = [
+            CLASS,
+            `${CLASS}--overflow-${overflow}`,
+            theme !== 'auto' && `${CLASS}--theme-${theme}`,
+            editable && `${CLASS}--editable`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const toolbar = document.createElement('div');
+        toolbar.className = `${CLASS}__toolbar`;
+        const toolbarLeft = document.createElement('div');
+        toolbarLeft.className = `${CLASS}__toolbar-left`;
+        if (hasSegments) {
+            const segment = document.createElement('db-segment-control');
+            segment.setAttribute('size', 's');
+            segment.setAttribute('options', JSON.stringify(items.map((item) => ({ value: item.id, label: item.label }))));
+            segment.setAttribute('value', this.getActiveId());
+            toolbarLeft.append(segment);
+        }
+        if (showLanguage) {
+            const languageEl = document.createElement('span');
+            languageEl.className = `${CLASS}__language`;
+            languageEl.textContent = formatLanguageLabel(activeLanguage);
+            toolbarLeft.append(languageEl);
+        }
+        toolbar.append(toolbarLeft);
+        if (showCopy) {
+            const copyButton = document.createElement('db-button');
+            copyButton.setAttribute('type', 'button');
+            copyButton.setAttribute('variant', 'tertiary');
+            copyButton.setAttribute('size', 's');
+            copyButton.setAttribute('start-icon', this.copied ? 'done' : 'copy');
+            copyButton.textContent = this.copied ? copiedLabel : copyLabel;
+            copyButton.addEventListener('db-click', () => this.handleCopy());
+            toolbar.append(copyButton);
+        }
+        const body = document.createElement('div');
+        body.className = `${CLASS}__body`;
+        if (hasSegments && activeItem.description) {
+            const caption = document.createElement('p');
+            caption.className = `${CLASS}__caption`;
+            caption.textContent = activeItem.description;
+            body.append(caption);
+        }
+        if (editable) {
+            if (this.editedCodes[activeItem.id] === undefined) {
+                this.editedCodes[activeItem.id] = activeItem.code;
+            }
+            const editor = document.createElement('div');
+            editor.className = `${CLASS}__editor`;
+            const mirrorPre = document.createElement('pre');
+            mirrorPre.className = `${CLASS}__pre ${CLASS}__pre--mirror`;
+            mirrorPre.setAttribute('aria-hidden', 'true');
+            const mirrorCode = document.createElement('code');
+            mirrorCode.className = `${CLASS}__code language-${activeLanguage}`;
+            if (highlightedCode) {
+                mirrorCode.innerHTML = highlightedCode;
+            }
+            else {
+                mirrorCode.textContent = sourceCode;
+            }
+            mirrorPre.append(mirrorCode);
+            const textarea = document.createElement('textarea');
+            textarea.className = `${CLASS}__textarea`;
+            textarea.value = sourceCode;
+            textarea.spellcheck = false;
+            textarea.setAttribute('autocapitalize', 'off');
+            textarea.setAttribute('autocorrect', 'off');
+            textarea.setAttribute('aria-label', `${formatLanguageLabel(activeLanguage)} 코드 편집`);
+            textarea.addEventListener('input', () => {
+                this.editedCodes[activeItem.id] = textarea.value;
+                const nextHighlight = highlight && textarea.value
+                    ? highlightCodeSync(textarea.value, activeLanguage)
+                    : null;
+                if (nextHighlight) {
+                    mirrorCode.innerHTML = nextHighlight;
+                }
+                else {
+                    mirrorCode.textContent = textarea.value;
+                }
+                this.dispatchEvent(new CustomEvent('db-code-change', {
+                    detail: { code: textarea.value, itemId: activeItem.id },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+            editor.append(mirrorPre, textarea);
+            body.append(editor);
+        }
+        else {
+            const pre = document.createElement('pre');
+            pre.className = `${CLASS}__pre`;
+            const code = document.createElement('code');
+            code.className = `${CLASS}__code language-${activeLanguage}`;
+            if (highlightedCode) {
+                code.innerHTML = highlightedCode;
+            }
+            else {
+                code.textContent = trimmedCode;
+            }
+            pre.append(code);
+            body.append(pre);
+        }
+        this.replaceChildren(toolbar, body);
+    }
+}
+if (!customElements.get('db-code-block'))
+    customElements.define('db-code-block', DbCodeBlock);
+
+export { DbCodeBlock };