@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,94 @@
-const e=["text","circular","rectangular","rounded"],t=["xs","s","m","l","xl"];function getDefaultSize(e,t){if("circular"===e)switch(t){case"xs":return"16px";case"s":return"24px";case"l":return"48px";case"xl":return"64px";default:return"32px"}switch(t){case"xs":return"12px";case"s":return"16px";case"l":return"24px";case"xl":return"32px";default:return"20px"}}function toCssSize(e){return/^\d+$/.test(e)?`${e}px`:e}class DbSkeleton extends HTMLElement{static get observedAttributes(){return["variant","size","width","height","animation","lines","line-spacing","last-line-width","aria-label"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){const s=this.getAttribute("variant")||"text",i=this.getAttribute("size")||"m",n=this.getAttribute("animation")||"pulse",r=Number(this.getAttribute("lines")||1),a=this.getAttribute("width"),l=this.getAttribute("height"),c=this.getAttribute("line-spacing")||"8px",u=this.getAttribute("last-line-width")||"60%",o=e.includes(s)?s:"text",h=t.includes(i)?i:"m",d=["designbase-wc-skeleton",`designbase-wc-skeleton--${o}`,`designbase-wc-skeleton--${h}`,`designbase-wc-skeleton--${n}`,(a||l)&&"designbase-wc-skeleton--custom-size"].filter(Boolean).join(" ");this.className!==d&&(this.className=d);const b=this.getAttribute("aria-label")??`${o} 스켈레톤 로딩 중`;if(this.getAttribute("aria-label")!==b&&this.setAttribute("aria-label",b),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.replaceChildren(),this.style.width=a?toCssSize(a):"circular"===o?getDefaultSize(o,h):"100%",this.style.height=l?toCssSize(l):"circular"===o?getDefaultSize(o,h):function getTextLineHeight(e){switch(e){case"xs":return"12px";case"s":return"16px";case"l":return"24px";case"xl":return"32px";default:return"20px"}}(h),"text"===o&&r>1)for(let e=1;e<r;e+=1){const t=document.createElement("div");t.className="designbase-wc-skeleton__line",t.style.marginTop=toCssSize(c),e===r-1&&(t.style.width=toCssSize(u)),this.append(t)}}}customElements.get("db-skeleton")||customElements.define("db-skeleton",DbSkeleton);export{DbSkeleton};
+const VARIANTS = ['text', 'circular', 'rectangular', 'rounded'];
+const SIZES = ['xs', 's', 'm', 'l', 'xl'];
+function getDefaultSize(variant, size) {
+    if (variant === 'circular') {
+        switch (size) {
+            case 'xs': return '16px';
+            case 's': return '24px';
+            case 'l': return '48px';
+            case 'xl': return '64px';
+            default: return '32px';
+        }
+    }
+    switch (size) {
+        case 'xs': return '12px';
+        case 's': return '16px';
+        case 'l': return '24px';
+        case 'xl': return '32px';
+        default: return '20px';
+    }
+}
+function getTextLineHeight(size) {
+    switch (size) {
+        case 'xs': return '12px';
+        case 's': return '16px';
+        case 'l': return '24px';
+        case 'xl': return '32px';
+        default: return '20px';
+    }
+}
+function toCssSize(value) {
+    return /^\d+$/.test(value) ? `${value}px` : value;
+}
+class DbSkeleton extends HTMLElement {
+    static get observedAttributes() {
+        return ['variant', 'size', 'width', 'height', 'animation', 'lines', 'line-spacing', 'last-line-width', 'aria-label'];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.render();
+    }
+    render() {
+        const variant = this.getAttribute('variant') || 'text';
+        const size = this.getAttribute('size') || 'm';
+        const animation = this.getAttribute('animation') || 'pulse';
+        const lines = Number(this.getAttribute('lines') || 1);
+        const width = this.getAttribute('width');
+        const height = this.getAttribute('height');
+        const lineSpacing = this.getAttribute('line-spacing') || '8px';
+        const lastLineWidth = this.getAttribute('last-line-width') || '60%';
+        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'text';
+        const resolvedSize = SIZES.includes(size) ? size : 'm';
+        const nextClassName = [
+            'designbase-wc-skeleton',
+            `designbase-wc-skeleton--${resolvedVariant}`,
+            `designbase-wc-skeleton--${resolvedSize}`,
+            `designbase-wc-skeleton--${animation}`,
+            (width || height) && 'designbase-wc-skeleton--custom-size',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (this.className !== nextClassName) {
+            this.className = nextClassName;
+        }
+        const nextAriaLabel = this.getAttribute('aria-label') ?? `${resolvedVariant} 스켈레톤 로딩 중`;
+        if (this.getAttribute('aria-label') !== nextAriaLabel) {
+            this.setAttribute('aria-label', nextAriaLabel);
+        }
+        this.setAttribute('role', 'status');
+        this.setAttribute('aria-live', 'polite');
+        this.replaceChildren();
+        this.style.width = width ? toCssSize(width) : (resolvedVariant === 'circular' ? getDefaultSize(resolvedVariant, resolvedSize) : '100%');
+        this.style.height = height
+            ? toCssSize(height)
+            : (resolvedVariant === 'circular' ? getDefaultSize(resolvedVariant, resolvedSize) : getTextLineHeight(resolvedSize));
+        if (resolvedVariant === 'text' && lines > 1) {
+            for (let index = 1; index < lines; index += 1) {
+                const line = document.createElement('div');
+                line.className = 'designbase-wc-skeleton__line';
+                line.style.marginTop = toCssSize(lineSpacing);
+                if (index === lines - 1)
+                    line.style.width = toCssSize(lastLineWidth);
+                this.append(line);
+            }
+        }
+    }
+}
+if (!customElements.get('db-skeleton'))
+    customElements.define('db-skeleton', DbSkeleton);
+
+export { DbSkeleton };

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

@@ -1 +1,102 @@
-const s=["circular","dots","bars","pulse","ripple"],e=["xs","s","m","l","xl"];class DbSpinner extends HTMLElement{static get observedAttributes(){return["type","size","color","speed","label","show-label"]}get type(){return this.getAttribute("type")||"circular"}set type(s){this.setAttribute("type",s)}get size(){return this.getAttribute("size")||"m"}set size(s){this.setAttribute("size",s)}get color(){return this.getAttribute("color")||""}set color(s){s?this.setAttribute("color",s):this.removeAttribute("color")}get speed(){return Number(this.getAttribute("speed")||1)}set speed(s){this.setAttribute("speed",String(s))}get label(){return this.getAttribute("label")||"로딩 중..."}set label(s){this.setAttribute("label",s)}get showLabel(){return this.hasAttribute("show-label")}set showLabel(s){this.toggleAttribute("show-label",s)}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){this.className=Array.from(this.classList).filter(s=>!s.startsWith("designbase-wc-spinner")).join(" "),this.classList.add("designbase-wc-spinner"),this.classList.add(`designbase-wc-spinner--${s.includes(this.type)?this.type:"circular"}`),this.classList.add(`designbase-wc-spinner--${e.includes(this.size)?this.size:"m"}`),this.setAttribute("role","status"),this.setAttribute("aria-live","polite"),this.setAttribute("aria-busy","true"),this.showLabel&&this.setAttribute("aria-label",this.label),this.style.setProperty("--spinner-speed",`${this.speed}s`),this.color?this.style.setProperty("--spinner-color",this.color):this.style.removeProperty("--spinner-color"),this.innerHTML=`${this.renderSpinner()}${this.showLabel&&this.label?`<span class="designbase-wc-spinner__label" aria-hidden="true">${this.escape(this.label)}</span>`:""}`}renderSpinner(){switch(this.type){case"dots":return'<span class="designbase-wc-spinner__dots" aria-hidden="true"><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span></span>';case"bars":return'<span class="designbase-wc-spinner__bars" aria-hidden="true"><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span></span>';case"pulse":return'<span class="designbase-wc-spinner__pulse" aria-hidden="true"></span>';case"ripple":return'<span class="designbase-wc-spinner__ripple" aria-hidden="true"><span class="designbase-wc-spinner__ripple-circle"></span><span class="designbase-wc-spinner__ripple-circle"></span></span>';default:return'<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>'}}escape(s){return s.replace(/[&<>"']/g,s=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[s]||s))}}customElements.get("db-spinner")||customElements.define("db-spinner",DbSpinner);export{DbSpinner};
+const TYPES = ['circular', 'dots', 'bars', 'pulse', 'ripple'];
+const SIZES = ['xs', 's', 'm', 'l', 'xl'];
+class DbSpinner extends HTMLElement {
+    static get observedAttributes() {
+        return ['type', 'size', 'color', 'speed', 'label', 'show-label'];
+    }
+    get type() {
+        return this.getAttribute('type') || 'circular';
+    }
+    set type(value) {
+        this.setAttribute('type', value);
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get color() {
+        return this.getAttribute('color') || '';
+    }
+    set color(value) {
+        if (value)
+            this.setAttribute('color', value);
+        else
+            this.removeAttribute('color');
+    }
+    get speed() {
+        return Number(this.getAttribute('speed') || 1);
+    }
+    set speed(value) {
+        this.setAttribute('speed', String(value));
+    }
+    get label() {
+        return this.getAttribute('label') || '로딩 중...';
+    }
+    set label(value) {
+        this.setAttribute('label', value);
+    }
+    get showLabel() {
+        return this.hasAttribute('show-label');
+    }
+    set showLabel(value) {
+        this.toggleAttribute('show-label', value);
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    render() {
+        this.className = Array.from(this.classList)
+            .filter((className) => !className.startsWith('designbase-wc-spinner'))
+            .join(' ');
+        this.classList.add('designbase-wc-spinner');
+        this.classList.add(`designbase-wc-spinner--${TYPES.includes(this.type) ? this.type : 'circular'}`);
+        this.classList.add(`designbase-wc-spinner--${SIZES.includes(this.size) ? this.size : 'm'}`);
+        this.setAttribute('role', 'status');
+        this.setAttribute('aria-live', 'polite');
+        this.setAttribute('aria-busy', 'true');
+        if (this.showLabel)
+            this.setAttribute('aria-label', this.label);
+        this.style.setProperty('--spinner-speed', `${this.speed}s`);
+        if (this.color)
+            this.style.setProperty('--spinner-color', this.color);
+        else
+            this.style.removeProperty('--spinner-color');
+        this.innerHTML = `${this.renderSpinner()}${this.showLabel && this.label
+            ? `<span class="designbase-wc-spinner__label" aria-hidden="true">${this.escape(this.label)}</span>`
+            : ''}`;
+    }
+    renderSpinner() {
+        switch (this.type) {
+            case 'dots':
+                return '<span class="designbase-wc-spinner__dots" aria-hidden="true"><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span><span class="designbase-wc-spinner__dot"></span></span>';
+            case 'bars':
+                return '<span class="designbase-wc-spinner__bars" aria-hidden="true"><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span><span class="designbase-wc-spinner__bar"></span></span>';
+            case 'pulse':
+                return '<span class="designbase-wc-spinner__pulse" aria-hidden="true"></span>';
+            case 'ripple':
+                return '<span class="designbase-wc-spinner__ripple" aria-hidden="true"><span class="designbase-wc-spinner__ripple-circle"></span><span class="designbase-wc-spinner__ripple-circle"></span></span>';
+            case 'circular':
+            default:
+                return '<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>';
+        }
+    }
+    escape(value) {
+        return value.replace(/[&<>"']/g, (char) => ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+        }[char] || char));
+    }
+}
+if (!customElements.get('db-spinner')) {
+    customElements.define('db-spinner', DbSpinner);
+}
+
+export { DbSpinner };

package/dist/esm/components/db-split-view.js

@@ -1 +1,297 @@
-class DbSplitView extends HTMLElement{constructor(){super(...arguments),this.panelSizes=[],this.draggingIndex=null,this.panelSources=[],this.isSyncing=!1,this.isObserving=!1,this.handleMouseDown=e=>t=>{t.preventDefault(),this.draggingIndex=e,document.body.style.cursor="horizontal"===this.getDirection()?"col-resize":"row-resize",document.body.style.userSelect="none"},this.handleMouseMove=e=>{if(null===this.draggingIndex)return;if(!this.panelSources.length)return;const t=this.getDirection(),i=this.getMode(),s=this.getSplitterSize(),n=this.getBoundingClientRect(),l=this.panelSources[this.draggingIndex];if(!l)return;const r=this.readPanelConfig(l,this.draggingIndex,this.panelSources.length);let o=this.panelSizes[this.draggingIndex];if("horizontal"===t){const t=n.width,l=e.clientX-n.left;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}else{const t=n.height,l=e.clientY-n.top;let a=0;for(let e=0;e<this.draggingIndex;e++){const n=this.panelSizes[e];a+="fixed"===i?n:n*t,a+=s}const h=l-a;if("fixed"===i)o=Math.max(r.minSize||0,Math.min(r.maxSize||t,h));else{o=h/t;const e=r.minSize?r.minSize/t:0,i=r.maxSize?r.maxSize/t:1;o=Math.max(e,Math.min(i,o))}}this.panelSizes[this.draggingIndex]=o,this.applyPanelSizes(),this.classList.toggle("designbase-wc-split-view--dragging",!0)},this.handleMouseUp=()=>{null!==this.draggingIndex&&(this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect="",this.classList.toggle("designbase-wc-split-view--dragging",!1))}}static get observedAttributes(){return["direction","mode","splitter-size","splitter-color","splitter-hover-color","gap","full-width","full-height"]}connectedCallback(){this.style.display="flex",this.style.boxSizing="border-box",this.collectPanelSources(),this.initPanelSizes(),this.sync(),this.observer=new MutationObserver(()=>{this.isSyncing||(this.collectPanelSources(),this.initPanelSizes(),this.sync())}),this.startObserving(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){this.stopObserving(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.draggingIndex=null,document.body.style.cursor="",document.body.style.userSelect=""}startObserving(){this.observer&&!this.isObserving&&(this.observer.observe(this,{childList:!0}),this.isObserving=!0)}stopObserving(){this.observer&&this.isObserving&&(this.observer.disconnect(),this.isObserving=!1)}attributeChangedCallback(){this.isConnected&&this.sync()}collectPanelSources(){this.panelSources=[];const e=Array.from(this.querySelectorAll('[slot="panel"]'));if(e.length)return void(this.panelSources=e);const t=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body"));t.length&&(this.panelSources=t.map(e=>e.firstElementChild).filter(e=>e instanceof HTMLElement))}readPanelConfig(e,t,i){const s=e.getAttribute("data-size"),n=e.getAttribute("data-min-size"),l=e.getAttribute("data-max-size"),r=this.getMode();let o;return null!=s&&""!==s&&(o=Number(s)),{size:void 0!==o&&Number.isFinite(o)?o:"ratio"===r?1/i:200,minSize:n?Number(n):void 0,maxSize:l?Number(l):void 0,resizable:"false"!==e.getAttribute("data-resizable"),flexible:e.hasAttribute("data-flexible")||"false"!==e.getAttribute("data-flexible")&&t===i-1}}initPanelSizes(){const e=this.panelSources.length;if(!e)return;if(this.panelSizes.length===e)return;const t=this.getMode();this.panelSizes=this.panelSources.map((i,s)=>this.readPanelConfig(i,s,e).size??("ratio"===t?1/e:200))}getDirection(){return"vertical"===(this.getAttribute("direction")||"horizontal")?"vertical":"horizontal"}getMode(){return"fixed"===(this.getAttribute("mode")||"ratio")?"fixed":"ratio"}getSplitterSize(){return Number(this.getAttribute("splitter-size")||4)}getGap(){return Number(this.getAttribute("gap")||0)}applyPanelSizes(){if(!this.panelSources.length)return;const e=this.getDirection(),t=this.getMode();Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")).forEach((i,s)=>{const n=this.panelSources[s];if(!n)return;const l=this.readPanelConfig(n,s,this.panelSources.length),r=this.panelSizes[s],o=l.flexible;if(i.style.width="",i.style.height="",i.style.flexBasis="",i.style.flexGrow="",i.style.flexShrink="",i.style.minHeight="",i.style.minWidth="",o)i.style.flex="1 1 0","vertical"===e?i.style.minHeight="0":i.style.minWidth="0";else{const e="fixed"===t?`${r}px`:100*r+"%";i.style.flex=`0 0 ${e}`}i.classList.toggle("designbase-wc-split-view__panel--flexible",Boolean(o)),i.classList.toggle("designbase-wc-split-view__panel--fixed",!o)})}sync(){if(this.isSyncing=!0,this.stopObserving(),this.collectPanelSources(),this.initPanelSizes(),!this.panelSources.length)return this.isSyncing=!1,void this.startObserving();const e=this.getDirection(),t=this.getMode(),i=this.getGap(),s=this.getSplitterSize(),n=this.getAttribute("splitter-color"),l=this.getAttribute("splitter-hover-color");this.className=["designbase-wc-split-view",`designbase-wc-split-view--direction-${e}`,`designbase-wc-split-view--mode-${t}`,this.hasAttribute("full-width")&&"designbase-wc-split-view--full-width",this.hasAttribute("full-height")&&"designbase-wc-split-view--full-height",null!==this.draggingIndex&&"designbase-wc-split-view--dragging"].filter(Boolean).join(" "),this.style.setProperty("--splitter-size",`${s}px`),n?this.style.setProperty("--splitter-color",n):this.style.removeProperty("--splitter-color"),l?this.style.setProperty("--splitter-hover-color",l):this.style.removeProperty("--splitter-hover-color"),this.style.gap=i>0?`${i}px`:"";const r=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__panel")),o=Array.from(this.querySelectorAll(":scope > .designbase-wc-split-view__splitter"));r.forEach(e=>e.remove()),o.forEach(e=>e.remove()),this.panelSources.forEach((t,s)=>{const n=this.readPanelConfig(t,s,this.panelSources.length),l=s===this.panelSources.length-1,r=!1!==n.resizable&&!l,o=document.createElement("div");o.className="designbase-wc-split-view__panel";const a=document.createElement("div");if(a.className="designbase-wc-split-view__panel-body",t.parentElement!==a&&a.append(t),o.append(a),this.append(o),!l&&r&&0===i){const t=document.createElement("div");t.className=`designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${e}`,t.style.cursor="horizontal"===e?"col-resize":"row-resize",t.addEventListener("mousedown",this.handleMouseDown(s)),this.append(t)}}),this.applyPanelSizes(),this.isSyncing=!1,this.startObserving()}}customElements.get("db-split-view")||customElements.define("db-split-view",DbSplitView);export{DbSplitView};
+class DbSplitView extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.panelSizes = [];
+        this.draggingIndex = null;
+        this.panelSources = [];
+        this.isSyncing = false;
+        this.isObserving = false;
+        this.handleMouseDown = (index) => (event) => {
+            event.preventDefault();
+            this.draggingIndex = index;
+            document.body.style.cursor = this.getDirection() === 'horizontal' ? 'col-resize' : 'row-resize';
+            document.body.style.userSelect = 'none';
+        };
+        this.handleMouseMove = (event) => {
+            if (this.draggingIndex === null)
+                return;
+            if (!this.panelSources.length)
+                return;
+            const direction = this.getDirection();
+            const mode = this.getMode();
+            const splitterSize = this.getSplitterSize();
+            const rect = this.getBoundingClientRect();
+            const panel = this.panelSources[this.draggingIndex];
+            if (!panel)
+                return;
+            const config = this.readPanelConfig(panel, this.draggingIndex, this.panelSources.length);
+            let newSize = this.panelSizes[this.draggingIndex];
+            if (direction === 'horizontal') {
+                const containerWidth = rect.width;
+                const mouseX = event.clientX - rect.left;
+                let offsetX = 0;
+                for (let i = 0; i < this.draggingIndex; i++) {
+                    const size = this.panelSizes[i];
+                    offsetX += mode === 'fixed' ? size : size * containerWidth;
+                    offsetX += splitterSize;
+                }
+                const rawSize = mouseX - offsetX;
+                if (mode === 'fixed') {
+                    newSize = Math.max(config.minSize || 0, Math.min(config.maxSize || containerWidth, rawSize));
+                }
+                else {
+                    newSize = rawSize / containerWidth;
+                    const minSplit = config.minSize ? config.minSize / containerWidth : 0;
+                    const maxSplit = config.maxSize ? config.maxSize / containerWidth : 1;
+                    newSize = Math.max(minSplit, Math.min(maxSplit, newSize));
+                }
+            }
+            else {
+                const containerHeight = rect.height;
+                const mouseY = event.clientY - rect.top;
+                let offsetY = 0;
+                for (let i = 0; i < this.draggingIndex; i++) {
+                    const size = this.panelSizes[i];
+                    offsetY += mode === 'fixed' ? size : size * containerHeight;
+                    offsetY += splitterSize;
+                }
+                const rawSize = mouseY - offsetY;
+                if (mode === 'fixed') {
+                    newSize = Math.max(config.minSize || 0, Math.min(config.maxSize || containerHeight, rawSize));
+                }
+                else {
+                    newSize = rawSize / containerHeight;
+                    const minSplit = config.minSize ? config.minSize / containerHeight : 0;
+                    const maxSplit = config.maxSize ? config.maxSize / containerHeight : 1;
+                    newSize = Math.max(minSplit, Math.min(maxSplit, newSize));
+                }
+            }
+            this.panelSizes[this.draggingIndex] = newSize;
+            this.applyPanelSizes();
+            this.classList.toggle('designbase-wc-split-view--dragging', true);
+        };
+        this.handleMouseUp = () => {
+            if (this.draggingIndex === null)
+                return;
+            this.draggingIndex = null;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            this.classList.toggle('designbase-wc-split-view--dragging', false);
+        };
+    }
+    static get observedAttributes() {
+        return ['direction', 'mode', 'splitter-size', 'splitter-color', 'splitter-hover-color', 'gap', 'full-width', 'full-height'];
+    }
+    connectedCallback() {
+        this.style.display = 'flex';
+        this.style.boxSizing = 'border-box';
+        this.collectPanelSources();
+        this.initPanelSizes();
+        this.sync();
+        this.observer = new MutationObserver(() => {
+            if (this.isSyncing)
+                return;
+            this.collectPanelSources();
+            this.initPanelSizes();
+            this.sync();
+        });
+        this.startObserving();
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    }
+    disconnectedCallback() {
+        this.stopObserving();
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        this.draggingIndex = null;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
+    startObserving() {
+        if (!this.observer || this.isObserving)
+            return;
+        this.observer.observe(this, { childList: true });
+        this.isObserving = true;
+    }
+    stopObserving() {
+        if (!this.observer || !this.isObserving)
+            return;
+        this.observer.disconnect();
+        this.isObserving = false;
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.sync();
+    }
+    collectPanelSources() {
+        this.panelSources = [];
+        // Keep tracking original panel nodes even after wrapping.
+        const slotted = Array.from(this.querySelectorAll('[slot="panel"]'));
+        if (slotted.length) {
+            this.panelSources = slotted;
+            return;
+        }
+        const wrapped = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__panel > .designbase-wc-split-view__panel-body'));
+        if (wrapped.length) {
+            this.panelSources = wrapped
+                .map((body) => body.firstElementChild)
+                .filter((node) => node instanceof HTMLElement);
+        }
+    }
+    readPanelConfig(element, index, total) {
+        const sizeAttr = element.getAttribute('data-size');
+        const minSizeAttr = element.getAttribute('data-min-size');
+        const maxSizeAttr = element.getAttribute('data-max-size');
+        const mode = this.getMode();
+        let size;
+        if (sizeAttr != null && sizeAttr !== '') {
+            size = Number(sizeAttr);
+        }
+        return {
+            size: size !== undefined && Number.isFinite(size)
+                ? size
+                : mode === 'ratio'
+                    ? 1 / total
+                    : 200,
+            minSize: minSizeAttr ? Number(minSizeAttr) : undefined,
+            maxSize: maxSizeAttr ? Number(maxSizeAttr) : undefined,
+            resizable: element.getAttribute('data-resizable') !== 'false',
+            flexible: element.hasAttribute('data-flexible') ||
+                (element.getAttribute('data-flexible') !== 'false' && index === total - 1),
+        };
+    }
+    initPanelSizes() {
+        const total = this.panelSources.length;
+        if (!total)
+            return;
+        if (this.panelSizes.length === total)
+            return;
+        const mode = this.getMode();
+        this.panelSizes = this.panelSources.map((panel, index) => {
+            const config = this.readPanelConfig(panel, index, total);
+            return config.size ?? (mode === 'ratio' ? 1 / total : 200);
+        });
+    }
+    getDirection() {
+        const value = this.getAttribute('direction') || 'horizontal';
+        return value === 'vertical' ? 'vertical' : 'horizontal';
+    }
+    getMode() {
+        const value = this.getAttribute('mode') || 'ratio';
+        return value === 'fixed' ? 'fixed' : 'ratio';
+    }
+    getSplitterSize() {
+        return Number(this.getAttribute('splitter-size') || 4);
+    }
+    getGap() {
+        return Number(this.getAttribute('gap') || 0);
+    }
+    applyPanelSizes() {
+        if (!this.panelSources.length)
+            return;
+        const direction = this.getDirection();
+        const mode = this.getMode();
+        const panels = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__panel'));
+        panels.forEach((panelEl, index) => {
+            const source = this.panelSources[index];
+            if (!source)
+                return;
+            const config = this.readPanelConfig(source, index, this.panelSources.length);
+            const size = this.panelSizes[index];
+            const isFlexible = config.flexible;
+            panelEl.style.width = '';
+            panelEl.style.height = '';
+            panelEl.style.flexBasis = '';
+            panelEl.style.flexGrow = '';
+            panelEl.style.flexShrink = '';
+            panelEl.style.minHeight = '';
+            panelEl.style.minWidth = '';
+            if (isFlexible) {
+                panelEl.style.flex = '1 1 0';
+                if (direction === 'vertical')
+                    panelEl.style.minHeight = '0';
+                else
+                    panelEl.style.minWidth = '0';
+            }
+            else {
+                const basis = mode === 'fixed' ? `${size}px` : `${size * 100}%`;
+                panelEl.style.flex = `0 0 ${basis}`;
+            }
+            panelEl.classList.toggle('designbase-wc-split-view__panel--flexible', Boolean(isFlexible));
+            panelEl.classList.toggle('designbase-wc-split-view__panel--fixed', !isFlexible);
+        });
+    }
+    sync() {
+        this.isSyncing = true;
+        this.stopObserving();
+        this.collectPanelSources();
+        this.initPanelSizes();
+        if (!this.panelSources.length) {
+            this.isSyncing = false;
+            this.startObserving();
+            return;
+        }
+        const direction = this.getDirection();
+        const mode = this.getMode();
+        const gap = this.getGap();
+        const splitterSize = this.getSplitterSize();
+        const splitterColor = this.getAttribute('splitter-color');
+        const splitterHoverColor = this.getAttribute('splitter-hover-color');
+        this.className = [
+            'designbase-wc-split-view',
+            `designbase-wc-split-view--direction-${direction}`,
+            `designbase-wc-split-view--mode-${mode}`,
+            this.hasAttribute('full-width') && 'designbase-wc-split-view--full-width',
+            this.hasAttribute('full-height') && 'designbase-wc-split-view--full-height',
+            this.draggingIndex !== null && 'designbase-wc-split-view--dragging',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.style.setProperty('--splitter-size', `${splitterSize}px`);
+        if (splitterColor)
+            this.style.setProperty('--splitter-color', splitterColor);
+        else
+            this.style.removeProperty('--splitter-color');
+        if (splitterHoverColor)
+            this.style.setProperty('--splitter-hover-color', splitterHoverColor);
+        else
+            this.style.removeProperty('--splitter-hover-color');
+        if (gap > 0)
+            this.style.gap = `${gap}px`;
+        else
+            this.style.gap = '';
+        const existingPanels = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__panel'));
+        const existingSplitters = Array.from(this.querySelectorAll(':scope > .designbase-wc-split-view__splitter'));
+        existingPanels.forEach((node) => node.remove());
+        existingSplitters.forEach((node) => node.remove());
+        this.panelSources.forEach((source, index) => {
+            const config = this.readPanelConfig(source, index, this.panelSources.length);
+            const isLast = index === this.panelSources.length - 1;
+            const isResizable = config.resizable !== false && !isLast;
+            const panelEl = document.createElement('div');
+            panelEl.className = 'designbase-wc-split-view__panel';
+            const body = document.createElement('div');
+            body.className = 'designbase-wc-split-view__panel-body';
+            if (source.parentElement !== body) {
+                body.append(source);
+            }
+            panelEl.append(body);
+            this.append(panelEl);
+            if (!isLast && isResizable && gap === 0) {
+                const splitter = document.createElement('div');
+                splitter.className = `designbase-wc-split-view__splitter designbase-wc-split-view__splitter--direction-${direction}`;
+                splitter.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+                splitter.addEventListener('mousedown', this.handleMouseDown(index));
+                this.append(splitter);
+            }
+        });
+        this.applyPanelSizes();
+        this.isSyncing = false;
+        this.startObserving();
+    }
+}
+if (!customElements.get('db-split-view')) {
+    customElements.define('db-split-view', DbSplitView);
+}
+
+export { DbSplitView };

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

@@ -1 +1,46 @@
-const t=["vertical","horizontal"],s=["start","center","end","stretch"],e=["start","center","end","space-between","space-around","space-evenly"],a=["none","xs","s","m","l","xl"];class DbStack extends HTMLElement{static get observedAttributes(){return["direction","alignment","justify","spacing","full-width","full-height","wrap"]}connectedCallback(){this.syncClasses()}attributeChangedCallback(){this.syncClasses()}syncClasses(){const i=this.getAttribute("direction")||"vertical",c=this.getAttribute("alignment")||"start",n=this.getAttribute("justify")||"start",l=this.getAttribute("spacing")||"m",r=a.includes(l)?l:"m";this.className=["designbase-wc-stack",`designbase-wc-stack--direction-${t.includes(i)?i:"vertical"}`,`designbase-wc-stack--alignment-${s.includes(c)?c:"start"}`,`designbase-wc-stack--justify-${e.includes(n)?n:"start"}`,`designbase-wc-stack--spacing-${{none:"none",xs:"xs",s:"sm",m:"md",l:"lg",xl:"xl"}[r]||"md"}`,this.hasAttribute("full-width")&&"designbase-wc-stack--full-width",this.hasAttribute("full-height")&&"designbase-wc-stack--full-height",this.hasAttribute("wrap")&&"designbase-wc-stack--wrap"].filter(Boolean).join(" ")}}customElements.get("db-stack")||customElements.define("db-stack",DbStack);export{DbStack};
+const DIRECTIONS = ['vertical', 'horizontal'];
+const ALIGNMENTS = ['start', 'center', 'end', 'stretch'];
+const JUSTIFY = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
+const SPACINGS = ['none', 'xs', 's', 'm', 'l', 'xl'];
+class DbStack extends HTMLElement {
+    static get observedAttributes() {
+        return ['direction', 'alignment', 'justify', 'spacing', 'full-width', 'full-height', 'wrap'];
+    }
+    connectedCallback() {
+        this.syncClasses();
+    }
+    attributeChangedCallback() {
+        this.syncClasses();
+    }
+    syncClasses() {
+        const direction = this.getAttribute('direction') || 'vertical';
+        const alignment = this.getAttribute('alignment') || 'start';
+        const justify = this.getAttribute('justify') || 'start';
+        const spacing = this.getAttribute('spacing') || 'm';
+        const spacingAlias = {
+            none: 'none',
+            xs: 'xs',
+            s: 'sm',
+            m: 'md',
+            l: 'lg',
+            xl: 'xl',
+        };
+        const safeSpacing = SPACINGS.includes(spacing) ? spacing : 'm';
+        this.className = [
+            'designbase-wc-stack',
+            `designbase-wc-stack--direction-${DIRECTIONS.includes(direction) ? direction : 'vertical'}`,
+            `designbase-wc-stack--alignment-${ALIGNMENTS.includes(alignment) ? alignment : 'start'}`,
+            `designbase-wc-stack--justify-${JUSTIFY.includes(justify) ? justify : 'start'}`,
+            `designbase-wc-stack--spacing-${spacingAlias[safeSpacing] || 'md'}`,
+            this.hasAttribute('full-width') && 'designbase-wc-stack--full-width',
+            this.hasAttribute('full-height') && 'designbase-wc-stack--full-height',
+            this.hasAttribute('wrap') && 'designbase-wc-stack--wrap',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+}
+if (!customElements.get('db-stack'))
+    customElements.define('db-stack', DbStack);
+
+export { DbStack };