@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-resizable-panels.js

@@ -1 +1,282 @@
-const e=["both","horizontal","vertical"],t=["bottom-right","bottom-left","top-right","top-left","right","bottom"];class DbResizablePanels extends HTMLElement{constructor(){super(...arguments),this.isResizing=!1,this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.onMouseDown=e=>{e.preventDefault(),this.startResize(e.clientX,e.clientY),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},this.onTouchStart=e=>{e.preventDefault();const t=e.touches[0];this.startResize(t.clientX,t.clientY),document.addEventListener("touchmove",this.onTouchMove,{passive:!1}),document.addEventListener("touchend",this.onTouchEnd)},this.onMouseMove=e=>{this.applyResize(e.clientX,e.clientY)},this.onTouchMove=e=>{e.preventDefault();const t=e.touches[0];this.applyResize(t.clientX,t.clientY)},this.onMouseUp=()=>{this.endResize(),document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp)},this.onTouchEnd=()=>{this.endResize(),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onTouchEnd)}}static get observedAttributes(){return["initial-width","initial-height","min-width","min-height","max-width","max-height","direction","handle-position","handle-size","handle-color","handle-hover-color","snap-to-grid","show-guides","show-size-indicator","show-constraints","show-border","shadow","background-color","border-radius"]}connectedCallback(){this.ensureStructure(),this.initializeSize(),this.render()}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getNumber(e,t){const i=Number(this.getAttribute(e)??t);return Number.isFinite(i)?i:t}getDirection(){const t=this.getAttribute("direction");return t&&e.includes(t)?t:"both"}getHandlePosition(){const e=this.getAttribute("handle-position");return e&&t.includes(e)?e:"bottom-right"}initializeSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return;const t=this.getAttribute("initial-width")||"100%",i=this.getAttribute("initial-height")||"100%";this.currentSize={width:"string"==typeof t&&t.endsWith("%")?e.width*Number(t.replace("%",""))/100:Number(t)||e.width,height:"string"==typeof i&&i.endsWith("%")?e.height*Number(i.replace("%",""))/100:Number(i)||e.height}}getMinSize(){return{width:this.getNumber("min-width",200),height:this.getNumber("min-height",150)}}getMaxSize(){const e=this.parentElement?.getBoundingClientRect();if(!e)return{width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};const t=this.getAttribute("max-width")||"100vw",i=this.getAttribute("max-height")||"100vh",toSize=(e,t,i)=>{if("100vw"===e||"100vh"===e)return t;if("100%"===e)return i;const s=Number(e);return Number.isFinite(s)?s:Number.POSITIVE_INFINITY};return{width:toSize(t,window.innerWidth,e.width),height:toSize(i,window.innerHeight,e.height)}}ensureStructure(){if(this.container)return;this.container=document.createElement("div"),this.container.className="designbase-wc-resizable-panels",this.guidesEl=document.createElement("div"),this.guidesEl.className="designbase-wc-resizable-panels__guides";const e=document.createElement("div");e.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--horizontal";const t=document.createElement("div");t.className="designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--vertical",this.guidesEl.append(e,t),this.sizeIndicatorEl=document.createElement("div"),this.sizeIndicatorEl.className="designbase-wc-resizable-panels__size-indicator",this.constraintsEl=document.createElement("div"),this.constraintsEl.className="designbase-wc-resizable-panels__constraints",this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-resizable-panels__content",this.handleEl=document.createElement("div"),this.handleEl.className="designbase-wc-resizable-panels__handle",this.handleEl.addEventListener("mousedown",this.onMouseDown),this.handleEl.addEventListener("touchstart",this.onTouchStart,{passive:!1}),this.container.append(this.guidesEl,this.sizeIndicatorEl,this.constraintsEl,this.contentEl,this.handleEl),this.replaceChildren(this.container)}startResize(e,t){this.isResizing=!0,this.startSize={...this.currentSize},this.startPos={x:e,y:t},this.dispatchEvent(new CustomEvent("db-resize-start",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}applyResize(e,t){if(!this.isResizing)return;const i=e-this.startPos.x,s=t-this.startPos.y,n=this.getDirection();let h=this.startSize.width,r=this.startSize.height;"both"!==n&&"horizontal"!==n||(h+=i),"both"!==n&&"vertical"!==n||(r+=s);const o=this.getNumber("snap-to-grid",0);o>0&&(h=Math.round(h/o)*o,r=Math.round(r/o)*o);const a=this.getMinSize(),l=this.getMaxSize();h=Math.max(a.width,Math.min(l.width,h)),r=Math.max(a.height,Math.min(l.height,r)),this.currentSize={width:h,height:r},this.dispatchEvent(new CustomEvent("db-resize",{detail:this.currentSize,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-size-change",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render()}endResize(){this.isResizing&&(this.isResizing=!1,this.dispatchEvent(new CustomEvent("db-resize-end",{detail:this.currentSize,bubbles:!0,composed:!0})),this.render())}renderHandleStyle(){if(!this.handleEl)return;const e=this.getDirection(),t=this.getHandlePosition(),i=this.getAttribute("handle-color"),s=this.getAttribute("handle-hover-color");i?this.handleEl.style.setProperty("--db-resize-handle-color",i):this.handleEl.style.removeProperty("--db-resize-handle-color"),s?this.handleEl.style.setProperty("--db-resize-handle-hover-color",s):this.handleEl.style.removeProperty("--db-resize-handle-hover-color"),this.handleEl.style.top="",this.handleEl.style.right="",this.handleEl.style.bottom="",this.handleEl.style.left="",this.handleEl.style.transform="",this.handleEl.style.width="",this.handleEl.style.height="",this.handleEl.style.backgroundColor="",this.handleEl.onmouseenter=null,this.handleEl.onmouseleave=null;let n=`corner-${t}`;"vertical"===e?n="edge-bottom":"horizontal"===e&&(n="edge-right"),this.handleEl.className=`designbase-wc-resizable-panels__handle designbase-wc-resizable-panels__handle--${n}`,this.handleEl.setAttribute("role","separator"),this.handleEl.setAttribute("aria-label","크기 조절"),this.handleEl.replaceChildren()}render(){if(this.ensureStructure(),!(this.container&&this.contentEl&&this.guidesEl&&this.sizeIndicatorEl&&this.constraintsEl))return;const e=["designbase-wc-resizable-panels",this.isResizing&&"designbase-wc-resizable-panels--resizing",this.getBool("show-border",!0)&&"designbase-wc-resizable-panels--border",this.getBool("shadow",!0)&&"designbase-wc-resizable-panels--shadow"].filter(Boolean).join(" ");this.container.className=e,this.container.style.width=`${this.currentSize.width}px`,this.container.style.height=`${this.currentSize.height}px`;const t=this.getAttribute("background-color");this.container.style.backgroundColor=t||"";const i=this.getAttribute("border-radius")||"8px";if(this.container.style.borderRadius=/^\d+$/.test(i)?`${i}px`:i,0===this.contentEl.children.length){const e=Array.from(this.childNodes).filter(e=>e!==this.container);this.contentEl.append(...e)}if(this.guidesEl.style.display=this.getBool("show-guides",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.style.display=this.getBool("show-size-indicator",!0)&&this.isResizing?"":"none",this.sizeIndicatorEl.textContent=`${Math.round(this.currentSize.width)} × ${Math.round(this.currentSize.height)}`,this.constraintsEl.style.display=this.getBool("show-constraints",!0)&&this.isResizing?"":"none",this.constraintsEl.replaceChildren(),"none"!==this.constraintsEl.style.display){const e=this.getMinSize(),t=this.getMaxSize();this.currentSize.width<=e.width&&this.constraintsEl.append(this.makeConstraint("최소 너비 도달","min")),this.currentSize.height<=e.height&&this.constraintsEl.append(this.makeConstraint("최소 높이 도달","min")),this.currentSize.width>=t.width&&this.constraintsEl.append(this.makeConstraint("최대 너비 도달","max")),this.currentSize.height>=t.height&&this.constraintsEl.append(this.makeConstraint("최대 높이 도달","max"))}this.renderHandleStyle()}makeConstraint(e,t){const i=document.createElement("div");return i.className=`designbase-wc-resizable-panels__constraint designbase-wc-resizable-panels__constraint--${t}`,i.textContent=e,i}}customElements.get("db-resizable-panels")||customElements.define("db-resizable-panels",DbResizablePanels);export{DbResizablePanels};
+const DIRECTIONS = ['both', 'horizontal', 'vertical'];
+const HANDLE_POSITIONS = ['bottom-right', 'bottom-left', 'top-right', 'top-left', 'right', 'bottom'];
+class DbResizablePanels extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.isResizing = false;
+        this.startSize = { width: 0, height: 0 };
+        this.startPos = { x: 0, y: 0 };
+        this.currentSize = { width: 0, height: 0 };
+        this.onMouseDown = (event) => {
+            event.preventDefault();
+            this.startResize(event.clientX, event.clientY);
+            document.addEventListener('mousemove', this.onMouseMove);
+            document.addEventListener('mouseup', this.onMouseUp);
+        };
+        this.onTouchStart = (event) => {
+            event.preventDefault();
+            const touch = event.touches[0];
+            this.startResize(touch.clientX, touch.clientY);
+            document.addEventListener('touchmove', this.onTouchMove, { passive: false });
+            document.addEventListener('touchend', this.onTouchEnd);
+        };
+        this.onMouseMove = (event) => {
+            this.applyResize(event.clientX, event.clientY);
+        };
+        this.onTouchMove = (event) => {
+            event.preventDefault();
+            const touch = event.touches[0];
+            this.applyResize(touch.clientX, touch.clientY);
+        };
+        this.onMouseUp = () => {
+            this.endResize();
+            document.removeEventListener('mousemove', this.onMouseMove);
+            document.removeEventListener('mouseup', this.onMouseUp);
+        };
+        this.onTouchEnd = () => {
+            this.endResize();
+            document.removeEventListener('touchmove', this.onTouchMove);
+            document.removeEventListener('touchend', this.onTouchEnd);
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'initial-width',
+            'initial-height',
+            'min-width',
+            'min-height',
+            'max-width',
+            'max-height',
+            'direction',
+            'handle-position',
+            'handle-size',
+            'handle-color',
+            'handle-hover-color',
+            'snap-to-grid',
+            'show-guides',
+            'show-size-indicator',
+            'show-constraints',
+            'show-border',
+            'shadow',
+            'background-color',
+            'border-radius',
+        ];
+    }
+    connectedCallback() {
+        this.ensureStructure();
+        this.initializeSize();
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    getNumber(name, fallback) {
+        const value = Number(this.getAttribute(name) ?? fallback);
+        return Number.isFinite(value) ? value : fallback;
+    }
+    getDirection() {
+        const value = this.getAttribute('direction');
+        return value && DIRECTIONS.includes(value) ? value : 'both';
+    }
+    getHandlePosition() {
+        const value = this.getAttribute('handle-position');
+        return value && HANDLE_POSITIONS.includes(value) ? value : 'bottom-right';
+    }
+    initializeSize() {
+        const parentRect = this.parentElement?.getBoundingClientRect();
+        if (!parentRect)
+            return;
+        const initialWidth = this.getAttribute('initial-width') || '100%';
+        const initialHeight = this.getAttribute('initial-height') || '100%';
+        this.currentSize = {
+            width: typeof initialWidth === 'string' && initialWidth.endsWith('%')
+                ? (parentRect.width * Number(initialWidth.replace('%', ''))) / 100
+                : Number(initialWidth) || parentRect.width,
+            height: typeof initialHeight === 'string' && initialHeight.endsWith('%')
+                ? (parentRect.height * Number(initialHeight.replace('%', ''))) / 100
+                : Number(initialHeight) || parentRect.height,
+        };
+    }
+    getMinSize() {
+        return { width: this.getNumber('min-width', 200), height: this.getNumber('min-height', 150) };
+    }
+    getMaxSize() {
+        const parentRect = this.parentElement?.getBoundingClientRect();
+        if (!parentRect)
+            return { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY };
+        const maxWidth = this.getAttribute('max-width') || '100vw';
+        const maxHeight = this.getAttribute('max-height') || '100vh';
+        const toSize = (value, viewport, parent) => {
+            if (value === '100vw' || value === '100vh')
+                return viewport;
+            if (value === '100%')
+                return parent;
+            const num = Number(value);
+            return Number.isFinite(num) ? num : Number.POSITIVE_INFINITY;
+        };
+        return {
+            width: toSize(maxWidth, window.innerWidth, parentRect.width),
+            height: toSize(maxHeight, window.innerHeight, parentRect.height),
+        };
+    }
+    ensureStructure() {
+        if (this.container)
+            return;
+        this.container = document.createElement('div');
+        this.container.className = 'designbase-wc-resizable-panels';
+        this.guidesEl = document.createElement('div');
+        this.guidesEl.className = 'designbase-wc-resizable-panels__guides';
+        const hGuide = document.createElement('div');
+        hGuide.className = 'designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--horizontal';
+        const vGuide = document.createElement('div');
+        vGuide.className = 'designbase-wc-resizable-panels__guide designbase-wc-resizable-panels__guide--vertical';
+        this.guidesEl.append(hGuide, vGuide);
+        this.sizeIndicatorEl = document.createElement('div');
+        this.sizeIndicatorEl.className = 'designbase-wc-resizable-panels__size-indicator';
+        this.constraintsEl = document.createElement('div');
+        this.constraintsEl.className = 'designbase-wc-resizable-panels__constraints';
+        this.contentEl = document.createElement('div');
+        this.contentEl.className = 'designbase-wc-resizable-panels__content';
+        this.handleEl = document.createElement('div');
+        this.handleEl.className = 'designbase-wc-resizable-panels__handle';
+        this.handleEl.addEventListener('mousedown', this.onMouseDown);
+        this.handleEl.addEventListener('touchstart', this.onTouchStart, { passive: false });
+        this.container.append(this.guidesEl, this.sizeIndicatorEl, this.constraintsEl, this.contentEl, this.handleEl);
+        this.replaceChildren(this.container);
+    }
+    startResize(x, y) {
+        this.isResizing = true;
+        this.startSize = { ...this.currentSize };
+        this.startPos = { x, y };
+        this.dispatchEvent(new CustomEvent('db-resize-start', { detail: this.currentSize, bubbles: true, composed: true }));
+        this.render();
+    }
+    applyResize(clientX, clientY) {
+        if (!this.isResizing)
+            return;
+        const deltaX = clientX - this.startPos.x;
+        const deltaY = clientY - this.startPos.y;
+        const direction = this.getDirection();
+        let width = this.startSize.width;
+        let height = this.startSize.height;
+        if (direction === 'both' || direction === 'horizontal')
+            width += deltaX;
+        if (direction === 'both' || direction === 'vertical')
+            height += deltaY;
+        const snap = this.getNumber('snap-to-grid', 0);
+        if (snap > 0) {
+            width = Math.round(width / snap) * snap;
+            height = Math.round(height / snap) * snap;
+        }
+        const min = this.getMinSize();
+        const max = this.getMaxSize();
+        width = Math.max(min.width, Math.min(max.width, width));
+        height = Math.max(min.height, Math.min(max.height, height));
+        this.currentSize = { width, height };
+        this.dispatchEvent(new CustomEvent('db-resize', { detail: this.currentSize, bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent('db-size-change', { detail: this.currentSize, bubbles: true, composed: true }));
+        this.render();
+    }
+    endResize() {
+        if (!this.isResizing)
+            return;
+        this.isResizing = false;
+        this.dispatchEvent(new CustomEvent('db-resize-end', { detail: this.currentSize, bubbles: true, composed: true }));
+        this.render();
+    }
+    renderHandleStyle() {
+        if (!this.handleEl)
+            return;
+        const direction = this.getDirection();
+        const position = this.getHandlePosition();
+        const color = this.getAttribute('handle-color');
+        const hoverColor = this.getAttribute('handle-hover-color');
+        if (color)
+            this.handleEl.style.setProperty('--db-resize-handle-color', color);
+        else
+            this.handleEl.style.removeProperty('--db-resize-handle-color');
+        if (hoverColor)
+            this.handleEl.style.setProperty('--db-resize-handle-hover-color', hoverColor);
+        else
+            this.handleEl.style.removeProperty('--db-resize-handle-hover-color');
+        this.handleEl.style.top = '';
+        this.handleEl.style.right = '';
+        this.handleEl.style.bottom = '';
+        this.handleEl.style.left = '';
+        this.handleEl.style.transform = '';
+        this.handleEl.style.width = '';
+        this.handleEl.style.height = '';
+        this.handleEl.style.backgroundColor = '';
+        this.handleEl.onmouseenter = null;
+        this.handleEl.onmouseleave = null;
+        let variant = `corner-${position}`;
+        if (direction === 'vertical') {
+            variant = 'edge-bottom';
+        }
+        else if (direction === 'horizontal') {
+            variant = 'edge-right';
+        }
+        this.handleEl.className = `designbase-wc-resizable-panels__handle designbase-wc-resizable-panels__handle--${variant}`;
+        this.handleEl.setAttribute('role', 'separator');
+        this.handleEl.setAttribute('aria-label', '크기 조절');
+        this.handleEl.replaceChildren();
+    }
+    render() {
+        this.ensureStructure();
+        if (!this.container || !this.contentEl || !this.guidesEl || !this.sizeIndicatorEl || !this.constraintsEl)
+            return;
+        const classes = [
+            'designbase-wc-resizable-panels',
+            this.isResizing && 'designbase-wc-resizable-panels--resizing',
+            this.getBool('show-border', true) && 'designbase-wc-resizable-panels--border',
+            this.getBool('shadow', true) && 'designbase-wc-resizable-panels--shadow',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.container.className = classes;
+        this.container.style.width = `${this.currentSize.width}px`;
+        this.container.style.height = `${this.currentSize.height}px`;
+        const bg = this.getAttribute('background-color');
+        this.container.style.backgroundColor = bg || '';
+        const radius = this.getAttribute('border-radius') || '8px';
+        this.container.style.borderRadius = /^\d+$/.test(radius) ? `${radius}px` : radius;
+        if (this.contentEl.children.length === 0) {
+            const childNodes = Array.from(this.childNodes).filter((node) => node !== this.container);
+            this.contentEl.append(...childNodes);
+        }
+        this.guidesEl.style.display = this.getBool('show-guides', true) && this.isResizing ? '' : 'none';
+        this.sizeIndicatorEl.style.display = this.getBool('show-size-indicator', true) && this.isResizing ? '' : 'none';
+        this.sizeIndicatorEl.textContent = `${Math.round(this.currentSize.width)} × ${Math.round(this.currentSize.height)}`;
+        this.constraintsEl.style.display = this.getBool('show-constraints', true) && this.isResizing ? '' : 'none';
+        this.constraintsEl.replaceChildren();
+        if (this.constraintsEl.style.display !== 'none') {
+            const min = this.getMinSize();
+            const max = this.getMaxSize();
+            if (this.currentSize.width <= min.width)
+                this.constraintsEl.append(this.makeConstraint('최소 너비 도달', 'min'));
+            if (this.currentSize.height <= min.height)
+                this.constraintsEl.append(this.makeConstraint('최소 높이 도달', 'min'));
+            if (this.currentSize.width >= max.width)
+                this.constraintsEl.append(this.makeConstraint('최대 너비 도달', 'max'));
+            if (this.currentSize.height >= max.height)
+                this.constraintsEl.append(this.makeConstraint('최대 높이 도달', 'max'));
+        }
+        this.renderHandleStyle();
+    }
+    makeConstraint(text, kind) {
+        const el = document.createElement('div');
+        el.className = `designbase-wc-resizable-panels__constraint designbase-wc-resizable-panels__constraint--${kind}`;
+        el.textContent = text;
+        return el;
+    }
+}
+if (!customElements.get('db-resizable-panels'))
+    customElements.define('db-resizable-panels', DbResizablePanels);
+
+export { DbResizablePanels };

package/dist/esm/components/db-scroll-area.js

@@ -1 +1,126 @@
-const t=["vertical","horizontal","both"],e=["auto","thin","none"];class DbScrollArea extends HTMLElement{static get observedAttributes(){return["direction","scrollbar-style","max-height","max-width","min-height","min-width","full-width","full-height","always-show-scrollbar","scrollbar-color","scrollbar-track-color"]}connectedCallback(){this.ensureStructure(),this.sync(),this.resizeObserver=new ResizeObserver(()=>{this.syncViewportSize(),this.syncScrollState()}),this.resizeObserver.observe(this),this.contentEl&&this.resizeObserver.observe(this.contentEl),this.observer=new MutationObserver(()=>this.syncChildren()),this.observer.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.resizeObserver?.disconnect(),this.observer?.disconnect()}attributeChangedCallback(){this.isConnected&&this.sync()}ensureStructure(){this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-scroll-area__content",this.contentEl.setAttribute("data-wc-internal","")),this.contentEl.isConnected||this.append(this.contentEl)}collectContentNodes(){return Array.from(this.children).filter(t=>t!==this.contentEl&&!t.hasAttribute("data-wc-internal"))}syncChildren(){const t=this.collectContentNodes();t.length&&this.contentEl?.append(...t),this.syncScrollState()}toCssSize(t){if(!t)return;if(t.includes("px")||t.includes("%")||t.includes("vh")||t.includes("rem"))return t;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}syncScrollState(){const t=this.contentEl;if(!t)return;const e=t.scrollHeight>t.clientHeight,s=t.scrollWidth>t.clientWidth;this.classList.toggle("designbase-wc-scroll-area--has-vertical",e),this.classList.toggle("designbase-wc-scroll-area--has-horizontal",s)}syncViewportSize(){if(!this.contentEl)return;const t=this.toCssSize(this.getAttribute("max-height"))||this.style.maxHeight||void 0,e=this.toCssSize(this.getAttribute("max-width"))||this.style.maxWidth||void 0,s=this.toCssSize(this.getAttribute("min-height"))||this.style.minHeight||void 0,i=this.toCssSize(this.getAttribute("min-width"))||this.style.minWidth||void 0;this.contentEl.style.maxHeight=t||"",this.contentEl.style.maxWidth=e||"",this.contentEl.style.minHeight=s||"",this.contentEl.style.minWidth=i||""}sync(){this.ensureStructure();const s=this.getAttribute("direction")||"vertical",i=this.getAttribute("scrollbar-style")||"auto",r=t.includes(s)?s:"vertical",l=e.includes(i)?i:"auto";this.className=["designbase-wc-scroll-area",`designbase-wc-scroll-area--direction-${r}`,`designbase-wc-scroll-area--scrollbar-${l}`,this.hasAttribute("full-width")&&"designbase-wc-scroll-area--full-width",this.hasAttribute("full-height")&&"designbase-wc-scroll-area--full-height",this.hasAttribute("always-show-scrollbar")&&"designbase-wc-scroll-area--always-show"].filter(Boolean).join(" ");const c=this.getAttribute("scrollbar-color"),n=this.getAttribute("scrollbar-track-color");c?this.style.setProperty("--scrollbar-color",c):this.style.removeProperty("--scrollbar-color"),n?this.style.setProperty("--scrollbar-track-color",n):this.style.removeProperty("--scrollbar-track-color"),this.syncViewportSize(),this.syncChildren()}}customElements.get("db-scroll-area")||customElements.define("db-scroll-area",DbScrollArea);export{DbScrollArea};
+const DIRECTIONS = ['vertical', 'horizontal', 'both'];
+const SCROLLBAR_STYLES = ['auto', 'thin', 'none'];
+class DbScrollArea extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'direction',
+            'scrollbar-style',
+            'max-height',
+            'max-width',
+            'min-height',
+            'min-width',
+            'full-width',
+            'full-height',
+            'always-show-scrollbar',
+            'scrollbar-color',
+            'scrollbar-track-color',
+        ];
+    }
+    connectedCallback() {
+        this.ensureStructure();
+        this.sync();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.syncViewportSize();
+            this.syncScrollState();
+        });
+        this.resizeObserver.observe(this);
+        if (this.contentEl)
+            this.resizeObserver.observe(this.contentEl);
+        this.observer = new MutationObserver(() => this.syncChildren());
+        this.observer.observe(this, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.observer?.disconnect();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.sync();
+    }
+    ensureStructure() {
+        if (!this.contentEl) {
+            this.contentEl = document.createElement('div');
+            this.contentEl.className = 'designbase-wc-scroll-area__content';
+            this.contentEl.setAttribute('data-wc-internal', '');
+        }
+        if (!this.contentEl.isConnected) {
+            this.append(this.contentEl);
+        }
+    }
+    collectContentNodes() {
+        return Array.from(this.children).filter((child) => child !== this.contentEl && !child.hasAttribute('data-wc-internal'));
+    }
+    syncChildren() {
+        const nodes = this.collectContentNodes();
+        if (nodes.length) {
+            this.contentEl?.append(...nodes);
+        }
+        this.syncScrollState();
+    }
+    toCssSize(value) {
+        if (!value)
+            return undefined;
+        if (value.includes('px') || value.includes('%') || value.includes('vh') || value.includes('rem')) {
+            return value;
+        }
+        const numeric = Number(value);
+        return Number.isFinite(numeric) ? `${numeric}px` : value;
+    }
+    syncScrollState() {
+        const viewport = this.contentEl;
+        if (!viewport)
+            return;
+        const hasVertical = viewport.scrollHeight > viewport.clientHeight;
+        const hasHorizontal = viewport.scrollWidth > viewport.clientWidth;
+        this.classList.toggle('designbase-wc-scroll-area--has-vertical', hasVertical);
+        this.classList.toggle('designbase-wc-scroll-area--has-horizontal', hasHorizontal);
+    }
+    syncViewportSize() {
+        if (!this.contentEl)
+            return;
+        const maxHeight = this.toCssSize(this.getAttribute('max-height')) || this.style.maxHeight || undefined;
+        const maxWidth = this.toCssSize(this.getAttribute('max-width')) || this.style.maxWidth || undefined;
+        const minHeight = this.toCssSize(this.getAttribute('min-height')) || this.style.minHeight || undefined;
+        const minWidth = this.toCssSize(this.getAttribute('min-width')) || this.style.minWidth || undefined;
+        this.contentEl.style.maxHeight = maxHeight || '';
+        this.contentEl.style.maxWidth = maxWidth || '';
+        this.contentEl.style.minHeight = minHeight || '';
+        this.contentEl.style.minWidth = minWidth || '';
+    }
+    sync() {
+        this.ensureStructure();
+        const direction = this.getAttribute('direction') || 'vertical';
+        const scrollbarStyle = this.getAttribute('scrollbar-style') || 'auto';
+        const safeDirection = DIRECTIONS.includes(direction) ? direction : 'vertical';
+        const safeScrollbar = SCROLLBAR_STYLES.includes(scrollbarStyle)
+            ? scrollbarStyle
+            : 'auto';
+        this.className = [
+            'designbase-wc-scroll-area',
+            `designbase-wc-scroll-area--direction-${safeDirection}`,
+            `designbase-wc-scroll-area--scrollbar-${safeScrollbar}`,
+            this.hasAttribute('full-width') && 'designbase-wc-scroll-area--full-width',
+            this.hasAttribute('full-height') && 'designbase-wc-scroll-area--full-height',
+            this.hasAttribute('always-show-scrollbar') && 'designbase-wc-scroll-area--always-show',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const scrollbarColor = this.getAttribute('scrollbar-color');
+        const scrollbarTrackColor = this.getAttribute('scrollbar-track-color');
+        if (scrollbarColor)
+            this.style.setProperty('--scrollbar-color', scrollbarColor);
+        else
+            this.style.removeProperty('--scrollbar-color');
+        if (scrollbarTrackColor)
+            this.style.setProperty('--scrollbar-track-color', scrollbarTrackColor);
+        else
+            this.style.removeProperty('--scrollbar-track-color');
+        this.syncViewportSize();
+        this.syncChildren();
+    }
+}
+if (!customElements.get('db-scroll-area')) {
+    customElements.define('db-scroll-area', DbScrollArea);
+}
+
+export { DbScrollArea };