@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

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

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

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