@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,265 @@
-const e=["default","flat"],t=["s","m","l"];class DbCard extends HTMLElement{constructor(){super(...arguments),this.selectCheckbox=null,this.imageNode=null,this.handleClick=e=>{if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation();this.clickable&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{!this.clickable||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.click())},this.handleSelect=e=>{if(e?.stopPropagation(),this.disabled||this.loading||!this.selectable)return;const t=!this.selected;this.toggleAttribute("selected",t),this.selectCheckbox&&(t?this.selectCheckbox.setAttribute("checked",""):this.selectCheckbox.removeAttribute("checked")),this.dispatchEvent(new CustomEvent("db-select",{bubbles:!0,composed:!0,detail:{selected:t}}))}}static get observedAttributes(){return["variant","size","full-width","clickable","hoverable","selectable","selected","disabled","loading","image","image-alt"]}get variant(){return this.getAttribute("variant")||"default"}set variant(e){this.setAttribute("variant",e)}get size(){return this.getAttribute("size")||"m"}set size(e){this.setAttribute("size",e)}get clickable(){return this.hasAttribute("clickable")}set clickable(e){this.toggleAttribute("clickable",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}get loading(){return this.hasAttribute("loading")}set loading(e){this.toggleAttribute("loading",e)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(e){this.toggleAttribute("full-width",e)}get hoverable(){return this.hasAttribute("hoverable")}set hoverable(e){this.toggleAttribute("hoverable",e)}get selectable(){return this.hasAttribute("selectable")}set selectable(e){this.toggleAttribute("selectable",e)}get selected(){return this.hasAttribute("selected")}set selected(e){this.toggleAttribute("selected",e)}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.sync()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e){this.isConnected&&(this.sync(),"selected"===e&&this.selectCheckbox&&(this.selected?this.selectCheckbox.setAttribute("checked",""):this.selectCheckbox.removeAttribute("checked")))}hasMediaSection(){return!!this.getAttribute("image")||null!==this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]')}hasFooterSection(){return null!==this.querySelector(':scope > .designbase-wc-card__footer, :scope > [slot="footer"]')}syncImageMedia(){const e=this.getAttribute("image"),t=this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]');if(!e)return void(this.imageNode&&(this.imageNode.remove(),this.imageNode=null));if(t&&t!==this.imageNode)return void(this.imageNode&&(this.imageNode.remove(),this.imageNode=null));if(!this.imageNode){this.imageNode=document.createElement("div"),this.imageNode.className="designbase-wc-card__media designbase-wc-card__thumbnail",this.imageNode.setAttribute("slot","media");const e=document.createElement("img");e.className="designbase-wc-card__thumbnail-image",this.imageNode.append(e);const t=this.querySelector(':scope > .designbase-wc-card__body, :scope > [slot="body"], :scope > .designbase-wc-card__footer, :scope > [slot="footer"]');t?this.insertBefore(this.imageNode,t):this.insertBefore(this.imageNode,this.firstChild)}const s=this.imageNode.querySelector("img");s&&(s.src=e,s.alt=this.getAttribute("image-alt")||"")}sync(){this.syncImageMedia(),this.syncAttributes(),this.syncOverlays()}syncOverlays(){const e=this.querySelector(":scope > .designbase-wc-card__loading-overlay"),t=this.querySelector(":scope > .designbase-wc-card__select-overlay");if(this.loading){if(!e){const e=document.createElement("div");e.className="designbase-wc-card__loading-overlay",e.setAttribute("aria-live","polite"),e.setAttribute("aria-busy","true");const t=document.createElement("div");t.className="designbase-wc-card__loading-spinner",e.append(t),this.append(e)}}else e?.remove();if(this.selectable)if(t)this.selectCheckbox&&(this.selected?this.selectCheckbox.setAttribute("checked",""):this.selectCheckbox.removeAttribute("checked"));else{const e=document.createElement("div");e.className="designbase-wc-card__select-overlay",e.addEventListener("click",e=>this.handleSelect(e));const t=document.createElement("db-checkbox");t.className="designbase-wc-card__select-checkbox",t.setAttribute("size","s"),t.setAttribute("has-label","false"),t.setAttribute("aria-label","카드 선택"),this.selected&&t.setAttribute("checked",""),t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",e=>{e.stopPropagation(),this.handleSelect()}),e.append(t),this.append(e),this.selectCheckbox=t}else t?.remove(),this.selectCheckbox=null}syncAttributes(){this.classList.add("designbase-wc-card"),this.setAttribute("aria-disabled",String(this.disabled||this.loading)),!this.clickable||this.disabled||this.loading?(this.removeAttribute("role"),this.removeAttribute("tabindex")):(this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")),e.forEach(e=>this.classList.remove(`designbase-wc-card--${e}`)),t.forEach(e=>this.classList.remove(`designbase-wc-card--${e}`)),this.classList.add(`designbase-wc-card--${e.includes(this.variant)?this.variant:"default"}`),this.classList.add(`designbase-wc-card--${t.includes(this.size)?this.size:"m"}`),this.classList.toggle("designbase-wc-card--full-width",this.hasAttribute("full-width")),this.classList.toggle("designbase-wc-card--clickable",this.clickable),this.classList.toggle("designbase-wc-card--hoverable",this.hasAttribute("hoverable")),this.classList.toggle("designbase-wc-card--selectable",this.hasAttribute("selectable")),this.classList.toggle("designbase-wc-card--selected",this.hasAttribute("selected")),this.classList.toggle("designbase-wc-card--disabled",this.disabled),this.classList.toggle("designbase-wc-card--loading",this.loading),this.classList.toggle("designbase-wc-card--with-media",this.hasMediaSection()),this.classList.toggle("designbase-wc-card--with-thumbnail",this.hasMediaSection()),this.classList.toggle("designbase-wc-card--with-footer",this.hasFooterSection())}}customElements.get("db-card")||customElements.define("db-card",DbCard);export{DbCard};
+const VARIANTS = ['default', 'flat'];
+const SIZES = ['s', 'm', 'l'];
+class DbCard extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.selectCheckbox = null;
+        this.imageNode = null;
+        this.handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (this.clickable) {
+                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.clickable || (event.key !== 'Enter' && event.key !== ' '))
+                return;
+            event.preventDefault();
+            this.click();
+        };
+        this.handleSelect = (event) => {
+            event?.stopPropagation();
+            if (this.disabled || this.loading || !this.selectable)
+                return;
+            const next = !this.selected;
+            this.toggleAttribute('selected', next);
+            if (this.selectCheckbox) {
+                if (next)
+                    this.selectCheckbox.setAttribute('checked', '');
+                else
+                    this.selectCheckbox.removeAttribute('checked');
+            }
+            this.dispatchEvent(new CustomEvent('db-select', {
+                bubbles: true,
+                composed: true,
+                detail: { selected: next },
+            }));
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'variant',
+            'size',
+            'full-width',
+            'clickable',
+            'hoverable',
+            'selectable',
+            'selected',
+            'disabled',
+            'loading',
+            'image',
+            'image-alt',
+        ];
+    }
+    get variant() {
+        return this.getAttribute('variant') || 'default';
+    }
+    set variant(value) {
+        this.setAttribute('variant', value);
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get clickable() {
+        return this.hasAttribute('clickable');
+    }
+    set clickable(value) {
+        this.toggleAttribute('clickable', value);
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+    }
+    get loading() {
+        return this.hasAttribute('loading');
+    }
+    set loading(value) {
+        this.toggleAttribute('loading', value);
+    }
+    get fullWidth() {
+        return this.hasAttribute('full-width');
+    }
+    set fullWidth(value) {
+        this.toggleAttribute('full-width', value);
+    }
+    get hoverable() {
+        return this.hasAttribute('hoverable');
+    }
+    set hoverable(value) {
+        this.toggleAttribute('hoverable', value);
+    }
+    get selectable() {
+        return this.hasAttribute('selectable');
+    }
+    set selectable(value) {
+        this.toggleAttribute('selectable', value);
+    }
+    get selected() {
+        return this.hasAttribute('selected');
+    }
+    set selected(value) {
+        this.toggleAttribute('selected', value);
+    }
+    connectedCallback() {
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeyDown);
+        this.sync();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        this.sync();
+        if (name === 'selected' && this.selectCheckbox) {
+            if (this.selected)
+                this.selectCheckbox.setAttribute('checked', '');
+            else
+                this.selectCheckbox.removeAttribute('checked');
+        }
+    }
+    hasMediaSection() {
+        const imageSrc = this.getAttribute('image');
+        if (imageSrc)
+            return true;
+        return (this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]') !== null);
+    }
+    hasFooterSection() {
+        return this.querySelector(':scope > .designbase-wc-card__footer, :scope > [slot="footer"]') !== null;
+    }
+    syncImageMedia() {
+        const imageSrc = this.getAttribute('image');
+        const userMedia = this.querySelector(':scope > .designbase-wc-card__thumbnail, :scope > .designbase-wc-card__media, :scope > [slot="media"], :scope > [slot="thumbnail"]');
+        if (!imageSrc) {
+            if (this.imageNode) {
+                this.imageNode.remove();
+                this.imageNode = null;
+            }
+            return;
+        }
+        if (userMedia && userMedia !== this.imageNode) {
+            if (this.imageNode) {
+                this.imageNode.remove();
+                this.imageNode = null;
+            }
+            return;
+        }
+        if (!this.imageNode) {
+            this.imageNode = document.createElement('div');
+            this.imageNode.className = 'designbase-wc-card__media designbase-wc-card__thumbnail';
+            this.imageNode.setAttribute('slot', 'media');
+            const img = document.createElement('img');
+            img.className = 'designbase-wc-card__thumbnail-image';
+            this.imageNode.append(img);
+            const first = this.querySelector(':scope > .designbase-wc-card__body, :scope > [slot="body"], :scope > .designbase-wc-card__footer, :scope > [slot="footer"]');
+            if (first)
+                this.insertBefore(this.imageNode, first);
+            else
+                this.insertBefore(this.imageNode, this.firstChild);
+        }
+        const img = this.imageNode.querySelector('img');
+        if (img) {
+            img.src = imageSrc;
+            img.alt = this.getAttribute('image-alt') || '';
+        }
+    }
+    sync() {
+        this.syncImageMedia();
+        this.syncAttributes();
+        this.syncOverlays();
+    }
+    syncOverlays() {
+        const existingLoading = this.querySelector(':scope > .designbase-wc-card__loading-overlay');
+        const existingSelect = this.querySelector(':scope > .designbase-wc-card__select-overlay');
+        if (this.loading) {
+            if (!existingLoading) {
+                const overlay = document.createElement('div');
+                overlay.className = 'designbase-wc-card__loading-overlay';
+                overlay.setAttribute('aria-live', 'polite');
+                overlay.setAttribute('aria-busy', 'true');
+                const spinner = document.createElement('div');
+                spinner.className = 'designbase-wc-card__loading-spinner';
+                overlay.append(spinner);
+                this.append(overlay);
+            }
+        }
+        else {
+            existingLoading?.remove();
+        }
+        if (this.selectable) {
+            if (!existingSelect) {
+                const overlay = document.createElement('div');
+                overlay.className = 'designbase-wc-card__select-overlay';
+                overlay.addEventListener('click', (event) => this.handleSelect(event));
+                const checkbox = document.createElement('db-checkbox');
+                checkbox.className = 'designbase-wc-card__select-checkbox';
+                checkbox.setAttribute('size', 's');
+                checkbox.setAttribute('has-label', 'false');
+                checkbox.setAttribute('aria-label', '카드 선택');
+                if (this.selected)
+                    checkbox.setAttribute('checked', '');
+                checkbox.addEventListener('click', (event) => event.stopPropagation());
+                checkbox.addEventListener('db-change', (event) => {
+                    event.stopPropagation();
+                    this.handleSelect();
+                });
+                overlay.append(checkbox);
+                this.append(overlay);
+                this.selectCheckbox = checkbox;
+            }
+            else if (this.selectCheckbox) {
+                if (this.selected)
+                    this.selectCheckbox.setAttribute('checked', '');
+                else
+                    this.selectCheckbox.removeAttribute('checked');
+            }
+        }
+        else {
+            existingSelect?.remove();
+            this.selectCheckbox = null;
+        }
+    }
+    syncAttributes() {
+        this.classList.add('designbase-wc-card');
+        this.setAttribute('aria-disabled', String(this.disabled || this.loading));
+        if (this.clickable && !this.disabled && !this.loading) {
+            this.setAttribute('role', 'button');
+            if (!this.hasAttribute('tabindex'))
+                this.setAttribute('tabindex', '0');
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('tabindex');
+        }
+        VARIANTS.forEach((variant) => this.classList.remove(`designbase-wc-card--${variant}`));
+        SIZES.forEach((size) => this.classList.remove(`designbase-wc-card--${size}`));
+        this.classList.add(`designbase-wc-card--${VARIANTS.includes(this.variant) ? this.variant : 'default'}`);
+        this.classList.add(`designbase-wc-card--${SIZES.includes(this.size) ? this.size : 'm'}`);
+        this.classList.toggle('designbase-wc-card--full-width', this.hasAttribute('full-width'));
+        this.classList.toggle('designbase-wc-card--clickable', this.clickable);
+        this.classList.toggle('designbase-wc-card--hoverable', this.hasAttribute('hoverable'));
+        this.classList.toggle('designbase-wc-card--selectable', this.hasAttribute('selectable'));
+        this.classList.toggle('designbase-wc-card--selected', this.hasAttribute('selected'));
+        this.classList.toggle('designbase-wc-card--disabled', this.disabled);
+        this.classList.toggle('designbase-wc-card--loading', this.loading);
+        this.classList.toggle('designbase-wc-card--with-media', this.hasMediaSection());
+        this.classList.toggle('designbase-wc-card--with-thumbnail', this.hasMediaSection());
+        this.classList.toggle('designbase-wc-card--with-footer', this.hasFooterSection());
+    }
+}
+if (!customElements.get('db-card')) {
+    customElements.define('db-card', DbCard);
+}
+
+export { DbCard };

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

@@ -1 +1,264 @@
-import{createDbIcon as t}from"./db-icons.js";class DbCarousel extends HTMLElement{constructor(){super(...arguments),this.currentIndex=0,this.timer=null,this.isAutoPlaying=!1}static get observedAttributes(){return["items","size","variant","theme","transition","auto-play","auto-play-interval","infinite","show-navigation","show-indicators","indicator-style","show-auto-play-control","show-title","show-description","disabled","readonly"]}get items(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.style.display="block",this.clampCurrentIndex(),this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay(),this.render()}disconnectedCallback(){this.stopAutoPlay()}attributeChangedCallback(t){"items"===t&&this.clampCurrentIndex(),"auto-play"!==t&&"auto-play-interval"!==t||(this.isAutoPlaying=this.getBool("auto-play"),this.startAutoPlay()),this.render()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}clampCurrentIndex(){this.currentIndex>=this.items.length&&(this.currentIndex=0)}stopAutoPlay(){this.timer&&(window.clearInterval(this.timer),this.timer=null)}startAutoPlay(){if(this.stopAutoPlay(),!this.isAutoPlaying||this.items.length<=1)return;const t=Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3));this.timer=window.setInterval(()=>this.goToNext(),t)}getIndicatorType(){if(this.getBool("show-auto-play-control",!0)&&this.getBool("show-indicators",!0)&&this.items.length>1)return"combined";const t=this.getAttribute("indicator-style")||"dots";return"lines"===t?"line":"numbers"===t?"numbers":"dots"}getIndicatorSize(){const t=this.getAttribute("size")||"m";return"l"===t||"xl"===t?"m":"s"}goTo(t){t<0||t>=this.items.length||(this.currentIndex=t,this.dispatchEvent(new CustomEvent("db-slide-change",{detail:{index:t},bubbles:!0,composed:!0})),this.render())}goToPrev(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex-1;e<0?this.goTo(t?this.items.length-1:0):this.goTo(e)}goToNext(){if(0===this.items.length)return;const t=this.getBool("infinite",!0),e=this.currentIndex+1;e>=this.items.length?this.goTo(t?0:this.items.length-1):this.goTo(e)}render(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("theme")||"light",n=this.getAttribute("transition")||"slide",a=this.getBool("show-navigation",!0),o=this.getBool("show-indicators",!0),r=this.getBool("show-auto-play-control",!0),l=this.getBool("show-title",!0),c=this.getBool("show-description",!0),d=this.getBool("disabled"),u=this.getBool("readonly"),h=this.getAttribute("indicator-style")||"dots",g=r&&o&&this.items.length>1;this.className=["designbase-wc-carousel",`designbase-wc-carousel--size-${e}`,`designbase-wc-carousel--variant-${s}`,`designbase-wc-carousel--theme-${i}`,`designbase-wc-carousel--transition-${n}`,`designbase-wc-carousel--indicator-${h}`,d&&"designbase-wc-carousel--disabled",u&&"designbase-wc-carousel--readonly"].filter(Boolean).join(" ");const m=document.createElement("div");m.className="designbase-wc-carousel__container";const b=document.createElement("div");if(b.className="designbase-wc-carousel__track",b.style.transform=`translateX(-${100*this.currentIndex}%)`,this.items.forEach((t,e)=>{const s=document.createElement("div");s.className="designbase-wc-carousel__slide"+(e===this.currentIndex?" designbase-wc-carousel__slide--active":""),s.style.flex="0 0 100%",s.style.width="100%",s.style.height="100%",s.style.minWidth="0";const i=t.image?"#ffffff":"";if(i&&(s.style.color=i),t.image){const i=document.createElement("div");i.className="designbase-wc-carousel__slide-image";const n=document.createElement("img");n.className="designbase-wc-carousel__slide-img",n.src=t.image,n.alt=t.alt||t.title||`Slide ${e+1}`,i.append(n),s.append(i)}if(l&&t.title||c&&t.description){const e=document.createElement("div");if(e.className="designbase-wc-carousel__slide-info",i&&(e.style.color=i),l&&t.title){const s=document.createElement("h3");s.className="designbase-wc-carousel__slide-title",s.textContent=t.title,i&&(s.style.color=i),e.append(s)}if(c&&t.description){const s=document.createElement("p");s.className="designbase-wc-carousel__slide-description",s.textContent=t.description,i&&(s.style.color=i),e.append(s)}s.append(e)}s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:t,index:e},bubbles:!0,composed:!0}))}),b.append(s)}),m.append(b),a&&this.items.length>1){const e=document.createElement("button");e.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev",e.type="button",e.append(t("chevron-left",20)),e.disabled=d||u,e.addEventListener("click",()=>this.goToPrev());const s=document.createElement("button");s.className="designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next",s.type="button",s.append(t("chevron-right",20)),s.disabled=d||u,s.addEventListener("click",()=>this.goToNext()),m.append(e,s)}const p=[m];if(o&&this.items.length>1){const t=document.createElement("div");t.className="designbase-wc-carousel__controls";const e=document.createElement("div");e.className="designbase-wc-carousel__indicators";const s=document.createElement("db-indicator");s.setAttribute("current",String(this.currentIndex)),s.setAttribute("total",String(this.items.length)),s.setAttribute("type",this.getIndicatorType()),s.setAttribute("size",this.getIndicatorSize()),s.setAttribute("clickable",""),g&&(s.setAttribute("timer",""),s.setAttribute("timer-duration",String(Math.max(1e3,Number(this.getAttribute("auto-play-interval")||5e3)))),s.setAttribute("auto-roll","false"),this.isAutoPlaying?s.setAttribute("playing",""):s.removeAttribute("playing"),(d||u)&&s.setAttribute("playback-disabled","")),s.addEventListener("db-step-click",t=>{const e=t;this.goTo(e.detail.index)}),s.addEventListener("db-playing-change",t=>{const e=t;this.isAutoPlaying=e.detail.playing,this.startAutoPlay(),this.render()}),e.append(s),t.append(e),p.push(t)}this.replaceChildren(...p)}}customElements.get("db-carousel")||customElements.define("db-carousel",DbCarousel);export{DbCarousel};
+import { createDbIcon } from './db-icons.js';
+
+class DbCarousel extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.currentIndex = 0;
+        this.timer = null;
+        this.isAutoPlaying = false;
+    }
+    static get observedAttributes() {
+        return [
+            'items',
+            'size',
+            'variant',
+            'theme',
+            'transition',
+            'auto-play',
+            'auto-play-interval',
+            'infinite',
+            'show-navigation',
+            'show-indicators',
+            'indicator-style',
+            'show-auto-play-control',
+            'show-title',
+            'show-description',
+            'disabled',
+            'readonly',
+        ];
+    }
+    get items() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        this.clampCurrentIndex();
+        this.isAutoPlaying = this.getBool('auto-play');
+        this.startAutoPlay();
+        this.render();
+    }
+    disconnectedCallback() {
+        this.stopAutoPlay();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'items')
+            this.clampCurrentIndex();
+        if (name === 'auto-play' || name === 'auto-play-interval') {
+            this.isAutoPlaying = this.getBool('auto-play');
+            this.startAutoPlay();
+        }
+        this.render();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    clampCurrentIndex() {
+        if (this.currentIndex >= this.items.length)
+            this.currentIndex = 0;
+    }
+    stopAutoPlay() {
+        if (this.timer) {
+            window.clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    startAutoPlay() {
+        this.stopAutoPlay();
+        if (!this.isAutoPlaying || this.items.length <= 1)
+            return;
+        const interval = Math.max(1000, Number(this.getAttribute('auto-play-interval') || 5000));
+        this.timer = window.setInterval(() => this.goToNext(), interval);
+    }
+    getIndicatorType() {
+        const useIndicatorAutoplay = this.getBool('show-auto-play-control', true) && this.getBool('show-indicators', true) && this.items.length > 1;
+        if (useIndicatorAutoplay)
+            return 'combined';
+        const style = this.getAttribute('indicator-style') || 'dots';
+        if (style === 'lines')
+            return 'line';
+        if (style === 'numbers')
+            return 'numbers';
+        return 'dots';
+    }
+    getIndicatorSize() {
+        const size = this.getAttribute('size') || 'm';
+        return size === 'l' || size === 'xl' ? 'm' : 's';
+    }
+    goTo(index) {
+        if (index < 0 || index >= this.items.length)
+            return;
+        this.currentIndex = index;
+        this.dispatchEvent(new CustomEvent('db-slide-change', { detail: { index }, bubbles: true, composed: true }));
+        this.render();
+    }
+    goToPrev() {
+        if (this.items.length === 0)
+            return;
+        const infinite = this.getBool('infinite', true);
+        const next = this.currentIndex - 1;
+        if (next < 0)
+            this.goTo(infinite ? this.items.length - 1 : 0);
+        else
+            this.goTo(next);
+    }
+    goToNext() {
+        if (this.items.length === 0)
+            return;
+        const infinite = this.getBool('infinite', true);
+        const next = this.currentIndex + 1;
+        if (next >= this.items.length)
+            this.goTo(infinite ? 0 : this.items.length - 1);
+        else
+            this.goTo(next);
+    }
+    render() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'light';
+        const transition = this.getAttribute('transition') || 'slide';
+        const showNavigation = this.getBool('show-navigation', true);
+        const showIndicators = this.getBool('show-indicators', true);
+        const showAutoPlayControl = this.getBool('show-auto-play-control', true);
+        const showTitle = this.getBool('show-title', true);
+        const showDescription = this.getBool('show-description', true);
+        const disabled = this.getBool('disabled');
+        const readonly = this.getBool('readonly');
+        const indicatorStyle = this.getAttribute('indicator-style') || 'dots';
+        const useIndicatorAutoplay = showAutoPlayControl && showIndicators && this.items.length > 1;
+        this.className = [
+            'designbase-wc-carousel',
+            `designbase-wc-carousel--size-${size}`,
+            `designbase-wc-carousel--variant-${variant}`,
+            `designbase-wc-carousel--theme-${theme}`,
+            `designbase-wc-carousel--transition-${transition}`,
+            `designbase-wc-carousel--indicator-${indicatorStyle}`,
+            disabled && 'designbase-wc-carousel--disabled',
+            readonly && 'designbase-wc-carousel--readonly',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-carousel__container';
+        const track = document.createElement('div');
+        track.className = 'designbase-wc-carousel__track';
+        track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
+        this.items.forEach((item, index) => {
+            const slide = document.createElement('div');
+            slide.className = `designbase-wc-carousel__slide${index === this.currentIndex ? ' designbase-wc-carousel__slide--active' : ''}`;
+            slide.style.flex = '0 0 100%';
+            slide.style.width = '100%';
+            slide.style.height = '100%';
+            slide.style.minWidth = '0';
+            const captionColor = item.image ? '#ffffff' : '';
+            if (captionColor)
+                slide.style.color = captionColor;
+            if (item.image) {
+                const imageWrap = document.createElement('div');
+                imageWrap.className = 'designbase-wc-carousel__slide-image';
+                const image = document.createElement('img');
+                image.className = 'designbase-wc-carousel__slide-img';
+                image.src = item.image;
+                image.alt = item.alt || item.title || `Slide ${index + 1}`;
+                imageWrap.append(image);
+                slide.append(imageWrap);
+            }
+            if ((showTitle && item.title) || (showDescription && item.description)) {
+                const info = document.createElement('div');
+                info.className = 'designbase-wc-carousel__slide-info';
+                if (captionColor)
+                    info.style.color = captionColor;
+                if (showTitle && item.title) {
+                    const title = document.createElement('h3');
+                    title.className = 'designbase-wc-carousel__slide-title';
+                    title.textContent = item.title;
+                    if (captionColor)
+                        title.style.color = captionColor;
+                    info.append(title);
+                }
+                if (showDescription && item.description) {
+                    const description = document.createElement('p');
+                    description.className = 'designbase-wc-carousel__slide-description';
+                    description.textContent = item.description;
+                    if (captionColor)
+                        description.style.color = captionColor;
+                    info.append(description);
+                }
+                slide.append(info);
+            }
+            slide.addEventListener('click', () => {
+                this.dispatchEvent(new CustomEvent('db-item-click', { detail: { item, index }, bubbles: true, composed: true }));
+            });
+            track.append(slide);
+        });
+        container.append(track);
+        if (showNavigation && this.items.length > 1) {
+            const prev = document.createElement('button');
+            prev.className = 'designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--prev';
+            prev.type = 'button';
+            prev.append(createDbIcon('chevron-left', 20));
+            prev.disabled = disabled || readonly;
+            prev.addEventListener('click', () => this.goToPrev());
+            const next = document.createElement('button');
+            next.className = 'designbase-wc-carousel__nav-button designbase-wc-carousel__nav-button--next';
+            next.type = 'button';
+            next.append(createDbIcon('chevron-right', 20));
+            next.disabled = disabled || readonly;
+            next.addEventListener('click', () => this.goToNext());
+            container.append(prev, next);
+        }
+        const children = [container];
+        if (showIndicators && this.items.length > 1) {
+            const controls = document.createElement('div');
+            controls.className = 'designbase-wc-carousel__controls';
+            const indicators = document.createElement('div');
+            indicators.className = 'designbase-wc-carousel__indicators';
+            const indicator = document.createElement('db-indicator');
+            indicator.setAttribute('current', String(this.currentIndex));
+            indicator.setAttribute('total', String(this.items.length));
+            indicator.setAttribute('type', this.getIndicatorType());
+            indicator.setAttribute('size', this.getIndicatorSize());
+            indicator.setAttribute('clickable', '');
+            if (useIndicatorAutoplay) {
+                indicator.setAttribute('timer', '');
+                indicator.setAttribute('timer-duration', String(Math.max(1000, Number(this.getAttribute('auto-play-interval') || 5000))));
+                indicator.setAttribute('auto-roll', 'false');
+                if (this.isAutoPlaying)
+                    indicator.setAttribute('playing', '');
+                else
+                    indicator.removeAttribute('playing');
+                if (disabled || readonly)
+                    indicator.setAttribute('playback-disabled', '');
+            }
+            indicator.addEventListener('db-step-click', ((event) => {
+                const customEvent = event;
+                this.goTo(customEvent.detail.index);
+            }));
+            indicator.addEventListener('db-playing-change', ((event) => {
+                const customEvent = event;
+                this.isAutoPlaying = customEvent.detail.playing;
+                this.startAutoPlay();
+                this.render();
+            }));
+            indicators.append(indicator);
+            controls.append(indicators);
+            children.push(controls);
+        }
+        this.replaceChildren(...children);
+    }
+}
+if (!customElements.get('db-carousel'))
+    customElements.define('db-carousel', DbCarousel);
+
+export { DbCarousel };