@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,188 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["xs","s","m","l","xl","2xl"],a=["default","primary","success","warning","danger","info"],s=["online","offline","away","busy"],i=["#E3F2FD","#F3E5F5","#E8F5E8","#FFF3E0","#FCE4EC","#E0F2F1","#FFF8E1","#F1F8E9","#E8EAF6","#FFEBEE"],n=["#1976D2","#7B1FA2","#388E3C","#F57C00","#C2185B","#00796B","#F9A825","#689F38","#3F51B5","#D32F2F"];class DbAvatar extends HTMLElement{constructor(){super(...arguments),this.imageFailed=!1,this.imageLoaded=!1,this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","initials","size","variant","status","disabled","clickable","badge","badge-max-count","badge-variant","badge-style","badge-text"]}connectedCallback(){this.render(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"src"===t&&(this.imageFailed=!1,this.imageLoaded=!1),this.render()}render(){const r=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",d=a.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",l=this.hasAttribute("disabled"),c=this.hasAttribute("clickable"),o=this.getAttribute("src"),b=this.getAttribute("initials")||"",h=Boolean(o&&!this.imageFailed),u=h&&!this.imageLoaded;if(this.className=["designbase-wc-avatar",`designbase-wc-avatar--${r}`,`designbase-wc-avatar--${d}`,c&&"designbase-wc-avatar--clickable",l&&"designbase-wc-avatar--disabled",u&&"designbase-wc-avatar--loading"].filter(Boolean).join(" "),c&&!l?(this.setAttribute("role","button"),this.tabIndex=0):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.toggleAttribute("aria-disabled",l),this.replaceChildren(),u){const t=document.createElement("div");t.className="designbase-wc-avatar__loading";const e=document.createElement("div");e.className="designbase-wc-avatar__skeleton",t.append(e),this.append(t)}if(h){const t=document.createElement("img");t.className="designbase-wc-avatar__image",t.src=o,t.alt=this.getAttribute("alt")||"아바타 이미지",t.loading="lazy",t.addEventListener("load",()=>{this.imageLoaded=!0,this.classList.remove("designbase-wc-avatar--loading"),this.querySelector(".designbase-wc-avatar__loading")?.remove()}),t.addEventListener("error",()=>{this.imageFailed=!0,this.imageLoaded=!1,this.render()}),this.append(t)}else if(b){const t=document.createElement("div");if(t.className="designbase-wc-avatar__initials","default"===d){const e=function initialsColor(t){let e=0;for(let a=0;a<t.length;a++)e=t.charCodeAt(a)+((e<<5)-e);const a=Math.abs(e)%i.length;return{backgroundColor:i[a],color:n[a]}}(b);t.style.backgroundColor=e.backgroundColor,t.style.color=e.color}t.textContent=b.charAt(0).toUpperCase(),this.append(t)}else{const e=document.createElement("div");e.className="designbase-wc-avatar__icon",e.append(t("user",function iconSize(t){return"xs"===t?12:"s"===t?16:"m"===t?20:"l"===t?24:"xl"===t?32:40}(r))),this.append(e)}const g=this.getAttribute("status")||"";if(s.includes(g)){const t=document.createElement("span");t.className=`designbase-wc-avatar__status designbase-wc-avatar__status--${g}`,this.append(t)}if(this.hasAttribute("badge")){const t=document.createElement("div");t.className="designbase-wc-avatar__badge";const e=document.createElement("db-badge");e.setAttribute("count",this.getAttribute("badge")||"0");const a=this.getAttribute("badge-style")||"number";e.setAttribute("badge-style",a),this.hasAttribute("badge-max-count")&&e.setAttribute("max-count",this.getAttribute("badge-max-count")),e.setAttribute("variant",this.getAttribute("badge-variant")||"danger"),this.hasAttribute("badge-text")&&(e.textContent=this.getAttribute("badge-text"));const s="xl"===r||"2xl"===r?"m":"s";e.setAttribute("size",s),t.append(e),this.append(t)}}}customElements.get("db-avatar")||customElements.define("db-avatar",DbAvatar);export{DbAvatar};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['xs', 's', 'm', 'l', 'xl', '2xl'];
+const VARIANTS = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+const STATUSES = ['online', 'offline', 'away', 'busy'];
+const LIGHT_COLORS = ['#E3F2FD', '#F3E5F5', '#E8F5E8', '#FFF3E0', '#FCE4EC', '#E0F2F1', '#FFF8E1', '#F1F8E9', '#E8EAF6', '#FFEBEE'];
+const DARK_COLORS = ['#1976D2', '#7B1FA2', '#388E3C', '#F57C00', '#C2185B', '#00796B', '#F9A825', '#689F38', '#3F51B5', '#D32F2F'];
+function initialsColor(text) {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+        hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const index = Math.abs(hash) % LIGHT_COLORS.length;
+    return { backgroundColor: LIGHT_COLORS[index], color: DARK_COLORS[index] };
+}
+function iconSize(size) {
+    if (size === 'xs')
+        return 12;
+    if (size === 's')
+        return 16;
+    if (size === 'm')
+        return 20;
+    if (size === 'l')
+        return 24;
+    if (size === 'xl')
+        return 32;
+    return 40;
+}
+class DbAvatar extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.imageFailed = false;
+        this.imageLoaded = false;
+        this.handleClick = () => {
+            if (this.hasAttribute('disabled') || !this.hasAttribute('clickable'))
+                return;
+            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.hasAttribute('clickable') || this.hasAttribute('disabled'))
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'src',
+            'alt',
+            'initials',
+            'size',
+            'variant',
+            'status',
+            'disabled',
+            'clickable',
+            'badge',
+            'badge-max-count',
+            'badge-variant',
+            'badge-style',
+            'badge-text',
+        ];
+    }
+    connectedCallback() {
+        this.render();
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    attributeChangedCallback(name) {
+        if (name === 'src') {
+            this.imageFailed = false;
+            this.imageLoaded = false;
+        }
+        this.render();
+    }
+    render() {
+        const size = SIZES.includes((this.getAttribute('size') || 'm'))
+            ? this.getAttribute('size') || 'm'
+            : 'm';
+        const variant = VARIANTS.includes((this.getAttribute('variant') || 'default'))
+            ? this.getAttribute('variant') || 'default'
+            : 'default';
+        const disabled = this.hasAttribute('disabled');
+        const clickable = this.hasAttribute('clickable');
+        const src = this.getAttribute('src');
+        const initials = this.getAttribute('initials') || '';
+        const showImage = Boolean(src && !this.imageFailed);
+        const showLoading = showImage && !this.imageLoaded;
+        this.className = [
+            'designbase-wc-avatar',
+            `designbase-wc-avatar--${size}`,
+            `designbase-wc-avatar--${variant}`,
+            clickable && 'designbase-wc-avatar--clickable',
+            disabled && 'designbase-wc-avatar--disabled',
+            showLoading && 'designbase-wc-avatar--loading',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (clickable && !disabled) {
+            this.setAttribute('role', 'button');
+            this.tabIndex = 0;
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('tabindex');
+        }
+        this.toggleAttribute('aria-disabled', disabled);
+        this.replaceChildren();
+        if (showLoading) {
+            const loading = document.createElement('div');
+            loading.className = 'designbase-wc-avatar__loading';
+            const skeleton = document.createElement('div');
+            skeleton.className = 'designbase-wc-avatar__skeleton';
+            loading.append(skeleton);
+            this.append(loading);
+        }
+        if (showImage) {
+            const image = document.createElement('img');
+            image.className = 'designbase-wc-avatar__image';
+            image.src = src;
+            image.alt = this.getAttribute('alt') || '아바타 이미지';
+            image.loading = 'lazy';
+            image.addEventListener('load', () => {
+                this.imageLoaded = true;
+                this.classList.remove('designbase-wc-avatar--loading');
+                this.querySelector('.designbase-wc-avatar__loading')?.remove();
+            });
+            image.addEventListener('error', () => {
+                this.imageFailed = true;
+                this.imageLoaded = false;
+                this.render();
+            });
+            this.append(image);
+        }
+        else if (initials) {
+            const initialsEl = document.createElement('div');
+            initialsEl.className = 'designbase-wc-avatar__initials';
+            if (variant === 'default') {
+                const colors = initialsColor(initials);
+                initialsEl.style.backgroundColor = colors.backgroundColor;
+                initialsEl.style.color = colors.color;
+            }
+            initialsEl.textContent = initials.charAt(0).toUpperCase();
+            this.append(initialsEl);
+        }
+        else {
+            const iconWrap = document.createElement('div');
+            iconWrap.className = 'designbase-wc-avatar__icon';
+            iconWrap.append(createDbIcon('user', iconSize(size)));
+            this.append(iconWrap);
+        }
+        const status = this.getAttribute('status') || '';
+        if (STATUSES.includes(status)) {
+            const statusElement = document.createElement('span');
+            statusElement.className = `designbase-wc-avatar__status designbase-wc-avatar__status--${status}`;
+            this.append(statusElement);
+        }
+        if (this.hasAttribute('badge')) {
+            const badgeWrap = document.createElement('div');
+            badgeWrap.className = 'designbase-wc-avatar__badge';
+            const badge = document.createElement('db-badge');
+            badge.setAttribute('count', this.getAttribute('badge') || '0');
+            const badgeStyle = this.getAttribute('badge-style') || 'number';
+            badge.setAttribute('badge-style', badgeStyle);
+            if (this.hasAttribute('badge-max-count')) {
+                badge.setAttribute('max-count', this.getAttribute('badge-max-count'));
+            }
+            badge.setAttribute('variant', this.getAttribute('badge-variant') || 'danger');
+            if (this.hasAttribute('badge-text')) {
+                badge.textContent = this.getAttribute('badge-text');
+            }
+            const badgeSize = size === 'xl' || size === '2xl' ? 'm' : 's';
+            badge.setAttribute('size', badgeSize);
+            badgeWrap.append(badge);
+            this.append(badgeWrap);
+        }
+    }
+}
+if (!customElements.get('db-avatar')) {
+    customElements.define('db-avatar', DbAvatar);
+}
+
+export { DbAvatar };

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

@@ -1 +1,139 @@
-const t=["fade","slide","zoom","none"];class DbBackdrop extends HTMLElement{constructor(){super(...arguments),this.keyHandler=null,this.handlePortalClick=t=>{t.target===this.portal&&"true"!==this.getAttribute("disable-backdrop-click")&&(this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}}static get observedAttributes(){return["open","blur","opacity","blur-amount","animation","animation-duration","z-index","background-color","disable-backdrop-click","disable-escape-key-down"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.style.display="contents",this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.portal?.remove(),this.portal=void 0,document.body.style.overflow=""}attributeChangedCallback(){this.isConnected&&this.syncOpenState()}isOpen(){return this.open}syncOpenState(){this.isOpen()?this.render():(document.body.style.overflow="",this.detachListeners(),this.portal?.remove())}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"true"!==this.getAttribute("disable-escape-key-down")&&(this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))},document.addEventListener("keydown",this.keyHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){if(!this.isOpen())return void this.syncOpenState();const e=this.hasAttribute("blur"),s=this.getAttribute("opacity")||"0.5",i=this.getAttribute("blur-amount")||"4",r=t.includes(this.getAttribute("animation")||"fade")&&this.getAttribute("animation")||"fade",o=this.getAttribute("animation-duration")||"300",n=this.getAttribute("z-index")||"1000",a=this.getAttribute("background-color"),d=this.collectChildren();document.body.style.overflow="hidden",this.attachListeners(),this.portal||(this.portal=document.createElement("div"),this.portal.setAttribute("data-wc-internal",""),this.portal.addEventListener("click",this.handlePortalClick)),this.portal.className=["designbase-wc-backdrop",`designbase-wc-backdrop--${r}`,"designbase-wc-backdrop--open",e?"designbase-wc-backdrop--blur":""].filter(Boolean).join(" "),this.portal.setAttribute("role","presentation"),this.portal.setAttribute("aria-hidden","false"),this.portal.style.setProperty("--backdrop-opacity",s),this.portal.style.setProperty("--backdrop-blur-amount",`${i}px`),this.portal.style.setProperty("--backdrop-animation-duration",`${o}ms`),this.portal.style.setProperty("--backdrop-z-index",n),a?this.portal.style.backgroundColor=a:this.portal.style.removeProperty("background-color"),this.portal.replaceChildren(...d),this.portal.isConnected||document.body.append(this.portal)}}customElements.get("db-backdrop")||customElements.define("db-backdrop",DbBackdrop);export{DbBackdrop};
+const ANIMATIONS = ['fade', 'slide', 'zoom', 'none'];
+class DbBackdrop extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.keyHandler = null;
+        this.handlePortalClick = (event) => {
+            if (event.target !== this.portal)
+                return;
+            if (this.getAttribute('disable-backdrop-click') === 'true')
+                return;
+            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'open',
+            'blur',
+            'opacity',
+            'blur-amount',
+            'animation',
+            'animation-duration',
+            'z-index',
+            'background-color',
+            'disable-backdrop-click',
+            'disable-escape-key-down',
+        ];
+    }
+    get open() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', '');
+        else
+            this.removeAttribute('open');
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        this.syncOpenState();
+    }
+    disconnectedCallback() {
+        this.detachListeners();
+        this.portal?.remove();
+        this.portal = undefined;
+        document.body.style.overflow = '';
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.syncOpenState();
+    }
+    isOpen() {
+        return this.open;
+    }
+    syncOpenState() {
+        if (this.isOpen()) {
+            this.render();
+            return;
+        }
+        document.body.style.overflow = '';
+        this.detachListeners();
+        this.portal?.remove();
+    }
+    collectChildren() {
+        return Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal'));
+    }
+    attachListeners() {
+        if (this.keyHandler)
+            return;
+        this.keyHandler = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (this.getAttribute('disable-escape-key-down') === 'true')
+                return;
+            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    detachListeners() {
+        if (!this.keyHandler)
+            return;
+        document.removeEventListener('keydown', this.keyHandler);
+        this.keyHandler = null;
+    }
+    render() {
+        if (!this.isOpen()) {
+            this.syncOpenState();
+            return;
+        }
+        const blur = this.hasAttribute('blur');
+        const opacity = this.getAttribute('opacity') || '0.5';
+        const blurAmount = this.getAttribute('blur-amount') || '4';
+        const animation = ANIMATIONS.includes((this.getAttribute('animation') || 'fade'))
+            ? this.getAttribute('animation') || 'fade'
+            : 'fade';
+        const animationDuration = this.getAttribute('animation-duration') || '300';
+        const zIndex = this.getAttribute('z-index') || '1000';
+        const backgroundColor = this.getAttribute('background-color');
+        const userChildren = this.collectChildren();
+        document.body.style.overflow = 'hidden';
+        this.attachListeners();
+        if (!this.portal) {
+            this.portal = document.createElement('div');
+            this.portal.setAttribute('data-wc-internal', '');
+            this.portal.addEventListener('click', this.handlePortalClick);
+        }
+        this.portal.className = [
+            'designbase-wc-backdrop',
+            `designbase-wc-backdrop--${animation}`,
+            'designbase-wc-backdrop--open',
+            blur ? 'designbase-wc-backdrop--blur' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.portal.setAttribute('role', 'presentation');
+        this.portal.setAttribute('aria-hidden', 'false');
+        this.portal.style.setProperty('--backdrop-opacity', opacity);
+        this.portal.style.setProperty('--backdrop-blur-amount', `${blurAmount}px`);
+        this.portal.style.setProperty('--backdrop-animation-duration', `${animationDuration}ms`);
+        this.portal.style.setProperty('--backdrop-z-index', zIndex);
+        if (backgroundColor) {
+            this.portal.style.backgroundColor = backgroundColor;
+        }
+        else {
+            this.portal.style.removeProperty('background-color');
+        }
+        this.portal.replaceChildren(...userChildren);
+        if (!this.portal.isConnected) {
+            document.body.append(this.portal);
+        }
+    }
+}
+if (!customElements.get('db-backdrop')) {
+    customElements.define('db-backdrop', DbBackdrop);
+}
+
+export { DbBackdrop };

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

@@ -1 +1,91 @@
-const t="designbase-wc-badge",e=["primary","secondary","info","success","warning","danger"],s=["s","m","l"],i=["dot","number","text","outlined"];class DbBadge extends HTMLElement{static get observedAttributes(){return["variant","size","badge-style","count","max-count","disabled"]}get variant(){return this.getAttribute("variant")||"primary"}set variant(t){this.setAttribute("variant",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get badgeStyle(){return this.getAttribute("badge-style")||"text"}set badgeStyle(t){this.setAttribute("badge-style",t)}get count(){const t=this.getAttribute("count");return null===t?void 0:Number(t)}set count(t){void 0===t?this.removeAttribute("count"):this.setAttribute("count",String(t))}get maxCount(){return Number(this.getAttribute("max-count")||99)}set maxCount(t){this.setAttribute("max-count",String(t))}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}connectedCallback(){this.syncAttributes()}attributeChangedCallback(t,e,s){"count"!==t&&"max-count"!==t&&"badge-style"!==t||this.syncContent(),this.syncAttributes()}syncAttributes(){this.classList.add(t),this.setAttribute("aria-disabled",String(this.disabled)),this.syncEnum("variant",this.variant,e),this.syncEnum("size",this.size,s),this.syncEnum("style",this.badgeStyle,i),this.classList.toggle(`${t}--disabled`,this.disabled),this.syncContent()}syncContent(){"number"!==this.badgeStyle||void 0===this.count?"dot"===this.badgeStyle&&(this.textContent=""):this.textContent=this.count>this.maxCount?`${this.maxCount}+`:String(this.count)}syncEnum(e,s,i){i.forEach(e=>this.classList.remove(`${t}--${e}`)),i.includes(s)?this.classList.add(`${t}--${s}`):"style"===e&&this.classList.add(`${t}--text`)}}customElements.get("db-badge")||customElements.define("db-badge",DbBadge);export{DbBadge};
+const CLASS = 'designbase-wc-badge';
+const VARIANTS = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
+const SIZES = ['s', 'm', 'l'];
+const STYLES = ['dot', 'number', 'text', 'outlined'];
+class DbBadge extends HTMLElement {
+    static get observedAttributes() {
+        return ['variant', 'size', 'badge-style', 'count', 'max-count', 'disabled'];
+    }
+    get variant() {
+        return this.getAttribute('variant') || 'primary';
+    }
+    set variant(value) {
+        this.setAttribute('variant', value);
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get badgeStyle() {
+        return this.getAttribute('badge-style') || 'text';
+    }
+    set badgeStyle(value) {
+        this.setAttribute('badge-style', value);
+    }
+    get count() {
+        const value = this.getAttribute('count');
+        return value === null ? undefined : Number(value);
+    }
+    set count(value) {
+        if (value === undefined)
+            this.removeAttribute('count');
+        else
+            this.setAttribute('count', String(value));
+    }
+    get maxCount() {
+        return Number(this.getAttribute('max-count') || 99);
+    }
+    set maxCount(value) {
+        this.setAttribute('max-count', String(value));
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+    }
+    connectedCallback() {
+        this.syncAttributes();
+    }
+    attributeChangedCallback(name, _oldValue, _newValue) {
+        if (name === 'count' || name === 'max-count' || name === 'badge-style') {
+            this.syncContent();
+        }
+        this.syncAttributes();
+    }
+    syncAttributes() {
+        this.classList.add(CLASS);
+        this.setAttribute('aria-disabled', String(this.disabled));
+        this.syncEnum('variant', this.variant, VARIANTS);
+        this.syncEnum('size', this.size, SIZES);
+        this.syncEnum('style', this.badgeStyle, STYLES);
+        this.classList.toggle(`${CLASS}--disabled`, this.disabled);
+        this.syncContent();
+    }
+    syncContent() {
+        if (this.badgeStyle === 'number' && this.count !== undefined) {
+            this.textContent =
+                this.count > this.maxCount ? `${this.maxCount}+` : String(this.count);
+            return;
+        }
+        if (this.badgeStyle === 'dot') {
+            this.textContent = '';
+        }
+    }
+    syncEnum(name, value, values) {
+        values.forEach((item) => this.classList.remove(`${CLASS}--${item}`));
+        if (values.includes(value)) {
+            this.classList.add(`${CLASS}--${value}`);
+        }
+        else if (name === 'style') {
+            this.classList.add(`${CLASS}--text`);
+        }
+    }
+}
+if (!customElements.get('db-badge')) {
+    customElements.define('db-badge', DbBadge);
+}
+
+export { DbBadge };

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

@@ -1 +1,188 @@
-import{createDbIcon as e}from"./db-icons.js";const t={primary:"primary",secondary:"secondary",outline:"tertiary",ghost:"ghost"},n={s:"s",sm:"s",m:"m",md:"m",l:"l",lg:"l"};class DbBanner extends HTMLElement{static get observedAttributes(){return["title","description","icon","image","image-alt","actions","size","variant","background-image"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}parseActions(){const e=this.getAttribute("actions");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getIconSize(e){return"s"===e?16:"l"===e?24:20}getActionIconSize(e){return"s"===e?16:"l"===e?20:18}resolveIconName(e){if(e)return e in{close:1,"info-filled":1}?e:void 0}createActionControl(t,n,a,s){const i=this.resolveIconName(t.icon),r=Boolean(t.iconOnly&&i);if(t.href){const n=document.createElement("a");return n.className=`designbase-wc-button designbase-wc-button--${a} designbase-wc-button--${s}`,r&&n.classList.add("designbase-wc-button--icon-only"),n.href=t.href,n.setAttribute("aria-label",t.text),r&&i?n.append(e(i,this.getActionIconSize(s))):n.textContent=t.text,t.external&&(n.target="_blank",n.rel="noopener noreferrer"),n}const c=document.createElement("db-button");return c.setAttribute("variant",a),c.setAttribute("size",s),r?(c.setAttribute("icon-only",""),c.setAttribute("aria-label",t.text),i&&c.append(e(i,this.getActionIconSize(s)))):c.textContent=t.text,(e=>{e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-action",{bubbles:!0,composed:!0,detail:{index:n,action:t}}))})})(c),c}render(){const a=this.getAttribute("title")||"",s=this.getAttribute("description")||"",i=this.getAttribute("icon"),r=this.getAttribute("image"),c=this.getAttribute("image-alt")||a||"Banner image",o=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"primary",b=this.getAttribute("background-image"),l=this.parseActions();if(this.className=`designbase-wc-banner designbase-wc-banner--${o} designbase-wc-banner--${d}`,this.replaceChildren(),"image"===d&&b){const e=document.createElement("div");e.className="designbase-wc-banner__background",e.style.backgroundImage=`url(${b})`,e.style.backgroundSize="cover",e.style.backgroundPosition="center",e.style.backgroundRepeat="no-repeat",this.append(e);const t=document.createElement("div");t.className="designbase-wc-banner__overlay",this.append(t)}const m=document.createElement("div");if(m.className="designbase-wc-banner__container",i){const t=document.createElement("div");t.className="designbase-wc-banner__icon",t.append(e(i,this.getIconSize(o))),m.append(t)}if(r){const e=document.createElement("div");e.className="designbase-wc-banner__image";const t=document.createElement("img");t.src=r,t.alt=c,e.append(t),m.append(e)}const g=document.createElement("div");if(g.className="designbase-wc-banner__content",a){const e=document.createElement("h3");e.className="designbase-wc-banner__title",e.textContent=a,g.append(e)}if(s){const e=document.createElement("p");e.className="designbase-wc-banner__description",e.textContent=s,g.append(e)}if(m.append(g),l.length>0){const e=document.createElement("div");e.className="designbase-wc-banner__actions",l.forEach((a,s)=>{const i=t[a.variant||"primary"]||"primary",r=n[a.size||"sm"]||"s";e.append(this.createActionControl(a,s,i,r))}),m.append(e)}this.append(m)}}customElements.get("db-banner")||customElements.define("db-banner",DbBanner);export{DbBanner};
+import { createDbIcon } from './db-icons.js';
+
+const BUTTON_VARIANT_MAP = {
+    primary: 'primary',
+    secondary: 'secondary',
+    outline: 'tertiary',
+    ghost: 'ghost',
+};
+const BUTTON_SIZE_MAP = {
+    s: 's',
+    sm: 's',
+    m: 'm',
+    md: 'm',
+    l: 'l',
+    lg: 'l',
+};
+class DbBanner extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'title',
+            'description',
+            'icon',
+            'image',
+            'image-alt',
+            'actions',
+            'size',
+            'variant',
+            'background-image',
+        ];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    parseActions() {
+        const raw = this.getAttribute('actions');
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getIconSize(size) {
+        if (size === 's')
+            return 16;
+        if (size === 'l')
+            return 24;
+        return 20;
+    }
+    getActionIconSize(size) {
+        if (size === 's')
+            return 16;
+        if (size === 'l')
+            return 20;
+        return 18;
+    }
+    resolveIconName(icon) {
+        if (!icon)
+            return undefined;
+        if (icon in { close: 1, 'info-filled': 1 })
+            return icon;
+        return undefined;
+    }
+    createActionControl(action, index, actionVariant, actionSize) {
+        const iconName = this.resolveIconName(action.icon);
+        const iconOnly = Boolean(action.iconOnly && iconName);
+        const bindClick = (element) => {
+            element.addEventListener('db-click', () => {
+                this.dispatchEvent(new CustomEvent('db-action', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { index, action },
+                }));
+            });
+        };
+        if (action.href) {
+            const link = document.createElement('a');
+            link.className = `designbase-wc-button designbase-wc-button--${actionVariant} designbase-wc-button--${actionSize}`;
+            if (iconOnly)
+                link.classList.add('designbase-wc-button--icon-only');
+            link.href = action.href;
+            link.setAttribute('aria-label', action.text);
+            if (iconOnly && iconName) {
+                link.append(createDbIcon(iconName, this.getActionIconSize(actionSize)));
+            }
+            else {
+                link.textContent = action.text;
+            }
+            if (action.external) {
+                link.target = '_blank';
+                link.rel = 'noopener noreferrer';
+            }
+            return link;
+        }
+        const button = document.createElement('db-button');
+        button.setAttribute('variant', actionVariant);
+        button.setAttribute('size', actionSize);
+        if (iconOnly) {
+            button.setAttribute('icon-only', '');
+            button.setAttribute('aria-label', action.text);
+            if (iconName)
+                button.append(createDbIcon(iconName, this.getActionIconSize(actionSize)));
+        }
+        else {
+            button.textContent = action.text;
+        }
+        bindClick(button);
+        return button;
+    }
+    render() {
+        const title = this.getAttribute('title') || '';
+        const description = this.getAttribute('description') || '';
+        const iconName = this.getAttribute('icon');
+        const image = this.getAttribute('image');
+        const imageAlt = this.getAttribute('image-alt') || title || 'Banner image';
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'primary';
+        const backgroundImage = this.getAttribute('background-image');
+        const actions = this.parseActions();
+        this.className = `designbase-wc-banner designbase-wc-banner--${size} designbase-wc-banner--${variant}`;
+        this.replaceChildren();
+        if (variant === 'image' && backgroundImage) {
+            const background = document.createElement('div');
+            background.className = 'designbase-wc-banner__background';
+            background.style.backgroundImage = `url(${backgroundImage})`;
+            background.style.backgroundSize = 'cover';
+            background.style.backgroundPosition = 'center';
+            background.style.backgroundRepeat = 'no-repeat';
+            this.append(background);
+            const overlay = document.createElement('div');
+            overlay.className = 'designbase-wc-banner__overlay';
+            this.append(overlay);
+        }
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-banner__container';
+        if (iconName) {
+            const iconWrap = document.createElement('div');
+            iconWrap.className = 'designbase-wc-banner__icon';
+            iconWrap.append(createDbIcon(iconName, this.getIconSize(size)));
+            container.append(iconWrap);
+        }
+        if (image) {
+            const imageWrap = document.createElement('div');
+            imageWrap.className = 'designbase-wc-banner__image';
+            const imageElement = document.createElement('img');
+            imageElement.src = image;
+            imageElement.alt = imageAlt;
+            imageWrap.append(imageElement);
+            container.append(imageWrap);
+        }
+        const content = document.createElement('div');
+        content.className = 'designbase-wc-banner__content';
+        if (title) {
+            const heading = document.createElement('h3');
+            heading.className = 'designbase-wc-banner__title';
+            heading.textContent = title;
+            content.append(heading);
+        }
+        if (description) {
+            const body = document.createElement('p');
+            body.className = 'designbase-wc-banner__description';
+            body.textContent = description;
+            content.append(body);
+        }
+        container.append(content);
+        if (actions.length > 0) {
+            const actionsWrap = document.createElement('div');
+            actionsWrap.className = 'designbase-wc-banner__actions';
+            actions.forEach((action, index) => {
+                const actionVariant = BUTTON_VARIANT_MAP[action.variant || 'primary'] || 'primary';
+                const actionSize = BUTTON_SIZE_MAP[action.size || 'sm'] || 's';
+                actionsWrap.append(this.createActionControl(action, index, actionVariant, actionSize));
+            });
+            container.append(actionsWrap);
+        }
+        this.append(container);
+    }
+}
+if (!customElements.get('db-banner'))
+    customElements.define('db-banner', DbBanner);
+
+export { DbBanner };