@designbasekorea/ui-wc 0.2.2 → 0.4.0

package/dist/esm/components/db-grid-background.js

@@ -0,0 +1 @@
+const t="designbase-wc-grid-background";class DbGridBackground extends HTMLElement{constructor(){super(...arguments),this.lastTime=0,this.lastPointerMove=0,this.bandAngle=Math.random()*Math.PI*2,this.pointer={x:0,y:0,strength:0,inside:!1},this.cssW=0,this.cssH=0,this.tracePulses=[],this.traceSpawnAccumulator=0,this.onThemeMediaChange=()=>this.scheduleDraw(),this.onPointerMove=t=>this.handlePointerMove(t)}static get observedAttributes(){return["type","size","thickness","color","theme","opacity","fade","fade-size","background","overlay","interactive","interaction","interaction-color","interaction-radius","cross-size","cross-style","lines-layout","guide-inset","guide-edges","guide-x","guide-y","guide-span-x","guide-span-y","animated","animation-style","animation-speed","trace-length","trace-direction","width","height","border-radius"]}connectedCallback(){this.ensureCanvas(),this.applyHostStyles(),this.startObserving(),this.observeDocumentTheme(),this.bindPointer(),this.measure(),this.scheduleDraw()}disconnectedCallback(){this.ro?.disconnect(),this.ro=void 0,this.themeObserver?.disconnect(),this.themeObserver=void 0,window.removeEventListener("pointermove",this.onPointerMove),this.themeMedia?.removeEventListener("change",this.onThemeMediaChange),this.themeMedia=void 0,null!=this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=void 0}attributeChangedCallback(){this.isConnected&&(this.applyHostStyles(),this.bindPointer(),this.measure(),this.scheduleDraw())}getBool(t){return this.hasAttribute(t)&&"false"!==this.getAttribute(t)}getNumber(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getColorProbe(){if(!this.colorProbe){const t=document.createElement("span");t.setAttribute("aria-hidden","true"),Object.assign(t.style,{position:"absolute",width:"0",height:"0",overflow:"hidden",visibility:"hidden",pointerEvents:"none"}),this.appendChild(t),this.colorProbe=t}return this.colorProbe}resolveCssColor(t){if(!t.includes("var(")&&!t.startsWith("color-mix"))return t;const e=this.getColorProbe();e.style.color=t;const i=getComputedStyle(e).color;return i&&"rgba(0, 0, 0, 0)"!==i?i:t}isDarkContext(){const t=this.getAttribute("theme");if("dark"===t)return!0;if("light"===t)return!1;const e=document.documentElement,i=e.getAttribute("data-color-mode");if("dark"===i)return!0;if("light"===i)return!1;const s=e.getAttribute("data-theme");return"dark"===s||"light"!==s&&window.matchMedia("(prefers-color-scheme: dark)").matches}resolveThemeColor(t,e,i,s){if(t)return this.resolveCssColor(t);const r=this.getColorProbe(),a=this.isDarkContext();r.style.color=`var(${e}, ${a?s:i})`;const o=getComputedStyle(r).color;return o&&"rgba(0, 0, 0, 0)"!==o?o:a?s:i}effectiveOpacity(){const t=this.getAttribute("opacity");return null!==t&&""!==t?this.getNumber("opacity",.05):this.isDarkContext()?.1:.05}effectiveColor(){const t=this.getAttribute("color");return t?this.resolveCssColor(t):this.isDarkContext()?"#ffffff":"#000000"}effectiveInterColor(){const t=this.getAttribute("interaction-color");return t?this.resolveCssColor(t):this.effectiveColor()}traceDrawColor(t){return this.hasAttribute("interaction-color")?t.interColor:t.color}traceDrawOpacity(t){const e=t.opacity;return this.hasAttribute("interaction-color")?Math.min(1,e+.2):Math.min(1,3*e)}parseColorRgb(t){const e=this.resolveCssColor(t).match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);return e?[Number(e[1]),Number(e[2]),Number(e[3])]:this.isDarkContext()?[255,255,255]:[0,0,0]}crossArm(t,e,i){return i>0?i<=1?t*i:i:Math.min(.32*t,8+1.5*e)}interactionMode(){const t=this.getAttribute("interaction");if("glow"===t||"magnet"===t||"rotate"===t||"none"===t)return t;if(!this.getBool("interactive"))return"none";const e=this.getAttribute("type")||"lines";return"dots"===e?"magnet":"cross"===e?"rotate":"glow"}animationStyle(){const t=this.getAttribute("animation-style")||"band";return"trace"===t||"both"===t?t:"band"}traceDirection(){const t=this.getAttribute("trace-direction")||"both";return"vertical"===t||"horizontal"===t?t:"both"}linesLayout(){const t=this.getAttribute("lines-layout")||"grid";return"frame"===t||"center"===t?t:"grid"}crossStyle(){return"line"===(this.getAttribute("cross-style")||"plus")?"line":"plus"}parseGuideEdges(t){const e=(t||"top,right,bottom,left").split(",").map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e)}guideFraction(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?Math.min(1,Math.max(0,s)):e}isGridLines(t){return"lines"===t.type&&"grid"===t.linesLayout}isTraceableLines(t){return"lines"===t.type&&("grid"===t.linesLayout||"frame"===t.linesLayout)}get cfg(){return{type:this.getAttribute("type")||"lines",linesLayout:this.linesLayout(),crossStyle:this.crossStyle(),size:Math.max(4,this.getNumber("size",32)),thickness:Math.max(.5,this.getNumber("thickness",1)),color:this.effectiveColor(),opacity:this.effectiveOpacity(),fade:this.getAttribute("fade")||"none",fadeSize:this.getNumber("fade-size",.22),interaction:this.interactionMode(),interColor:this.effectiveInterColor(),interRadius:Math.max(20,this.getNumber("interaction-radius",130)),crossSize:this.getNumber("cross-size",0),guideInset:Math.max(0,this.getNumber("guide-inset",16)),guideEdges:this.parseGuideEdges(this.getAttribute("guide-edges")),guideX:this.guideFraction("guide-x",.5),guideY:this.guideFraction("guide-y",.5),guideSpanX:Math.max(0,this.getNumber("guide-span-x",0)),guideSpanY:Math.max(0,this.getNumber("guide-span-y",0)),animate:this.getBool("animated"),animSpeed:this.getNumber("animation-speed",1),animationStyle:this.animationStyle(),traceLength:this.getNumber("trace-length",0),traceDirection:this.traceDirection()}}ensureCanvas(){if(this.canvas)return;const t=document.createElement("canvas");Object.assign(t.style,{display:"block",width:"100%",height:"100%",pointerEvents:"none"}),this.appendChild(t),this.canvas=t,this.ctx=t.getContext("2d")??void 0,this.hlCanvas=document.createElement("canvas"),this.maskCanvas=document.createElement("canvas")}applyHostStyles(){const e=this.getBool("overlay");this.className=[t,`${t}--${this.getAttribute("type")||"lines"}`,e&&`${t}--overlay`].filter(Boolean).join(" "),this.style.display="block",this.style.boxSizing="border-box",this.style.pointerEvents="none";const i=this.getAttribute("background");if(this.style.backgroundColor=i?this.resolveCssColor(i):"transparent",e)this.style.position="absolute",this.style.inset="0",this.style.width="100%",this.style.height="100%",this.style.zIndex||(this.style.zIndex="1");else{"absolute"!==this.style.position&&this.style.position||(this.style.position="relative");const t=this.getSizeStyle(this.getAttribute("width")),e=this.getSizeStyle(this.getAttribute("height"));t&&(this.style.width=t),e&&(this.style.height=e)}const s=this.getSizeStyle(this.getAttribute("border-radius"));this.style.borderRadius=s||"",this.canvas&&(this.canvas.style.borderRadius=s||"")}startObserving(){this.ro||(this.ro=new ResizeObserver(()=>{this.measure(),this.scheduleDraw()}),this.ro.observe(this))}observeDocumentTheme(){this.themeObserver||"undefined"!=typeof MutationObserver&&(this.themeObserver=new MutationObserver(()=>this.scheduleDraw()),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme","data-color-mode","class"]}))}bindPointer(){window.removeEventListener("pointermove",this.onPointerMove),this.themeMedia?.removeEventListener("change",this.onThemeMediaChange),this.themeMedia||(this.themeMedia=window.matchMedia("(prefers-color-scheme: dark)")),this.themeMedia.addEventListener("change",this.onThemeMediaChange),"none"!==this.interactionMode()?window.addEventListener("pointermove",this.onPointerMove,{passive:!0}):(this.pointer.strength=0,this.pointer.inside=!1)}handlePointerMove(t){if(!this.canvas)return;const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top,r=this.cfg.interRadius,a=i>=-r&&i<=e.width+r&&s>=-r&&s<=e.height+r;this.pointer.x=i,this.pointer.y=s,this.pointer.inside=a,a&&(this.pointer.strength=1,this.lastPointerMove=performance.now(),this.ensureLoop())}measure(){if(!this.canvas||!this.ctx)return;const t=this.getBoundingClientRect(),e=Math.max(1,Math.round(t.width)),i=Math.max(1,Math.round(t.height));this.cssW=e,this.cssH=i,this.tracePulses=[],this.traceSpawnAccumulator=0;const s=Math.min(2,window.devicePixelRatio||1);[this.canvas,this.hlCanvas,this.maskCanvas].forEach(t=>{t&&(t.width=Math.round(e*s),t.height=Math.round(i*s))})}axis(t,e){const i=t/2,s=[],r=Math.ceil((0-i)/e),a=Math.floor((t-i)/e);for(let o=r;o<=a;o++){const r=i+o*e;r>.75&&r<t-.75&&s.push(r)}return s}scheduleDraw(){const t=this.cfg;this.drawFrame(performance.now(),0),t.animate||this.pointer.strength>.001?this.ensureLoop():null!=this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0)}ensureLoop(){if(null!=this.rafId)return;this.lastTime=performance.now();const tick=t=>{const e=Math.min(.05,(t-this.lastTime)/1e3);this.lastTime=t,"none"!==this.interactionMode()?t-this.lastPointerMove>90&&(this.pointer.strength=Math.max(0,this.pointer.strength-2.2*e)):this.pointer.strength=0,this.drawFrame(t,e);this.cfg.animate||this.pointer.strength>.001?this.rafId=requestAnimationFrame(tick):(this.rafId=void 0,this.drawFrame(t,e))};this.rafId=requestAnimationFrame(tick)}drawFrame(t,e){const i=this.ctx;if(!i||!this.canvas)return;const{cssW:s,cssH:r}=this;if(s<=0||r<=0)return;const a=this.cfg,o=Math.min(2,window.devicePixelRatio||1),n=t/1e3;i.setTransform(o,0,0,o,0,0),i.clearRect(0,0,s,r),this.drawPattern(i,s,r,a,a.color,a.opacity,n),a.animate&&this.isTraceableLines(a)&&("trace"===a.animationStyle||"both"===a.animationStyle)&&this.drawTraceHighlight(i,s,r,a,e);if(("glow"===a.interaction&&this.pointer.strength>.001||a.animate&&"trace"!==a.animationStyle&&(this.isGridLines(a)||"diagonal"===a.type))&&this.hlCanvas&&this.maskCanvas){const t=this.hlCanvas.getContext("2d"),e=this.maskCanvas.getContext("2d");t&&e&&(t.setTransform(o,0,0,o,0,0),t.clearRect(0,0,s,r),this.drawPattern(t,s,r,a,a.interColor,Math.min(1,a.opacity+.4),n),this.buildEnergyMask(e,s,r,o,a,n),t.setTransform(1,0,0,1,0,0),t.globalCompositeOperation="destination-in",t.drawImage(this.maskCanvas,0,0),t.globalCompositeOperation="source-over",i.setTransform(1,0,0,1,0,0),i.globalCompositeOperation="lighter",i.drawImage(this.hlCanvas,0,0),i.globalCompositeOperation="source-over",i.setTransform(o,0,0,o,0,0))}this.applyFade(i,s,r,a)}easeInOutCubic(t){const e=Math.min(1,Math.max(0,t));return e<.5?4*e*e*e:1-(-2*e+2)**3/2}traceSegmentLength(t){return t.traceLength>0?t.traceLength:28}pulseHead(t,e){const i=this.easeInOutCubic(t.progress);return-t.length+i*(e+2*t.length)}updateTracePulses(t,e,i,s){const r=this.traceSegmentLength(i),a=Math.min(6,Math.max(2,Math.floor(t*e/(i.size*i.size*180)))),o=(.38+.52*Math.random())/Math.max(.25,i.animSpeed);for(this.traceSpawnAccumulator+=s;this.traceSpawnAccumulator>=o&&this.tracePulses.length<a&&(this.traceSpawnAccumulator-=o,this.spawnTracePulse(t,e,i,r),!(Math.random()>.45)););this.tracePulses=this.tracePulses.filter(t=>(t.progress+=s/t.duration,t.progress<.1?t.alpha=t.progress/.1:t.progress>.9?t.alpha=(1-t.progress)/.1:t.alpha=1,t.progress<1&&t.alpha>.02))}traceLinePositions(t,e,i){if("frame"===i.linesLayout){const s=Math.min(i.guideInset,t/2-1,e/2-1),r=i.guideEdges,a=[],o=[];return r.has("left")&&a.push(s),r.has("right")&&a.push(t-s),r.has("top")&&o.push(s),r.has("bottom")&&o.push(e-s),{xs:a,ys:o}}return{xs:this.axis(t,i.size),ys:this.axis(e,i.size)}}spawnTracePulse(t,e,i,s){const{xs:r,ys:a}=this.traceLinePositions(t,e,i),o="horizontal"!==i.traceDirection&&r.length>0,n="vertical"!==i.traceDirection&&a.length>0;if(!o&&!n)return;let h;h=o&&n?Math.random()<.5?"v":"h":o?"v":"h";const l=s,c=(("v"===h?e:t)+2*l)/(88*Math.max(.25,i.animSpeed)),d={axis:h,linePos:"v"===h?r[Math.floor(Math.random()*r.length)]:a[Math.floor(Math.random()*a.length)],progress:0,length:l,duration:c,alpha:0};this.tracePulses.push(d)}drawTracePulseSegment(t,e,i,s,r){const[a,o,n]=this.parseColorRgb(this.traceDrawColor(r)),h=Math.min(1,this.traceDrawOpacity(r)*e.alpha),l="v"===e.axis?s:i,c=this.pulseHead(e,l);let d,u,g,m;if("v"===e.axis?(d=g=e.linePos,m=Math.min(s,c),u=Math.max(0,c-e.length)):(u=m=e.linePos,g=Math.min(i,c),d=Math.max(0,c-e.length)),Math.abs(g-d)<.5&&Math.abs(m-u)<.5)return;const p=t.createLinearGradient(d,u,g,m);p.addColorStop(0,`rgba(${a},${o},${n},0)`),p.addColorStop(.18,`rgba(${a},${o},${n},${.2*h})`),p.addColorStop(.5,`rgba(${a},${o},${n},${h})`),p.addColorStop(.82,`rgba(${a},${o},${n},${.2*h})`),p.addColorStop(1,`rgba(${a},${o},${n},0)`),t.save(),t.strokeStyle=p,t.lineCap="round",t.globalAlpha=e.alpha,t.shadowColor=`rgba(${a},${o},${n},${.9*h})`,t.shadowBlur=12+5*r.thickness,t.lineWidth=Math.max(1.1,r.thickness+.6),t.beginPath(),t.moveTo(d,u),t.lineTo(g,m),t.stroke(),t.shadowBlur=0,t.lineWidth=Math.max(.6,.35*r.thickness),t.globalAlpha=Math.min(1,1.1*e.alpha),t.stroke(),t.restore()}drawTraceHighlight(t,e,i,s,r){this.updateTracePulses(e,i,s,r),t.save(),t.globalCompositeOperation="lighter",this.tracePulses.forEach(r=>this.drawTracePulseSegment(t,r,e,i,s)),t.restore()}drawPattern(t,e,i,s,r,a,o){const{type:n,size:h,thickness:l}=s;if(t.save(),t.globalAlpha=a,t.strokeStyle=r,t.fillStyle=r,t.lineWidth=l,t.lineCap="round","lines"===n)"frame"===s.linesLayout?this.drawFrameGuides(t,e,i,s):"center"===s.linesLayout?this.drawCenterGuides(t,e,i,s):this.drawGridLines(t,e,i,s.size);else if("dots"===n){const r=this.axis(e,h),a=this.axis(i,h),n=Math.max(.75,l),c="magnet"===s.interaction&&this.pointer.strength>.001,d=this.pointer,u=s.interRadius;r.forEach((e,i)=>{a.forEach((r,a)=>{let l=e,g=r,m=n;if(c&&d.inside){const t=d.x-e,i=d.y-r,s=Math.hypot(t,i);if(s<u){const e=(1-s/u)*d.strength;m=n*(1+1.6*e),l+=t/(s||1)*e*h*.28,g+=i/(s||1)*e*h*.28}}if(s.animate){m*=.75+.25*Math.sin(2*o*s.animSpeed+.9*(i+a))}t.beginPath(),t.arc(l,g,m,0,2*Math.PI),t.fill()})})}else if("cross"===n){const r=this.axis(e,h),a=this.axis(i,h),o=this.crossArm(h,l,s.crossSize),n="rotate"===s.interaction&&this.pointer.strength>.001,c=this.pointer;r.forEach(e=>{a.forEach(i=>{if(t.save(),t.translate(e,i),n&&c.inside&&c.strength>.01){const s=c.x-e,r=c.y-i;t.rotate(Math.atan2(r,s))}t.beginPath(),"line"===s.crossStyle?(t.moveTo(-o,0),t.lineTo(o,0)):(t.moveTo(-o,0),t.lineTo(o,0),t.moveTo(0,-o),t.lineTo(0,o)),t.stroke(),t.restore()})})}else{t.save(),t.beginPath(),t.rect(0,0,e,i),t.clip(),t.translate(e/2,i/2),t.rotate(Math.PI/4);const s=Math.hypot(e,i);t.beginPath();for(let e=-s;e<=s;e+=h)t.moveTo(e,-s),t.lineTo(e,s),t.moveTo(-s,e),t.lineTo(s,e);t.stroke(),t.restore()}t.restore()}drawGridLines(t,e,i,s){const r=this.axis(e,s),a=this.axis(i,s);t.beginPath(),r.forEach(e=>{t.moveTo(e,0),t.lineTo(e,i)}),a.forEach(i=>{t.moveTo(0,i),t.lineTo(e,i)}),t.stroke()}drawFrameGuides(t,e,i,s){const r=Math.min(s.guideInset,e/2-1,i/2-1),a=s.guideEdges;t.beginPath(),a.has("top")&&(t.moveTo(0,r),t.lineTo(e,r)),a.has("bottom")&&(t.moveTo(0,i-r),t.lineTo(e,i-r)),a.has("left")&&(t.moveTo(r,0),t.lineTo(r,i)),a.has("right")&&(t.moveTo(e-r,0),t.lineTo(e-r,i)),t.stroke()}drawCenterGuides(t,e,i,s){const r=e*s.guideX,a=i*s.guideY,o=s.guideSpanX>0?s.guideSpanX:e,n=s.guideSpanY>0?s.guideSpanY:i;t.beginPath(),t.moveTo(r-o/2,a),t.lineTo(r+o/2,a),t.moveTo(r,a-n/2),t.lineTo(r,a+n/2),t.stroke()}buildEnergyMask(t,e,i,s,r,a){if(t.setTransform(s,0,0,s,0,0),t.clearRect(0,0,e,i),t.globalCompositeOperation="lighter","glow"===r.interaction&&this.pointer.strength>.001&&this.pointer.inside){const s=r.interRadius,a=t.createRadialGradient(this.pointer.x,this.pointer.y,0,this.pointer.x,this.pointer.y,s);a.addColorStop(0,`rgba(255,255,255,${.9*this.pointer.strength})`),a.addColorStop(1,"rgba(255,255,255,0)"),t.fillStyle=a,t.fillRect(0,0,e,i)}if(r.animate&&"trace"!==r.animationStyle){t.save(),t.translate(e/2,i/2),t.rotate(this.bandAngle);const s=Math.hypot(e,i),o=Math.max(60,.18*s),n=s+o,h=90*a*r.animSpeed%(2*n)-n,l=t.createLinearGradient(h-o,0,h+o,0);l.addColorStop(0,"rgba(255,255,255,0)"),l.addColorStop(.5,"rgba(255,255,255,0.55)"),l.addColorStop(1,"rgba(255,255,255,0)"),t.fillStyle=l,t.fillRect(-s,-s,2*s,2*s),t.restore()}t.globalCompositeOperation="source-over"}applyFade(t,e,i,s){const r=s.fade;if("none"===r)return;const a=s.fadeSize,o=a>1?a:Math.max(8,e*a),n=a>1?a:Math.max(8,i*a);t.save(),t.globalCompositeOperation="destination-in";const edge=s=>{let r;"top"===s?(r=t.createLinearGradient(0,0,0,n),r.addColorStop(0,"rgba(0,0,0,0)"),r.addColorStop(1,"rgba(0,0,0,1)")):"bottom"===s?(r=t.createLinearGradient(0,i-n,0,i),r.addColorStop(0,"rgba(0,0,0,1)"),r.addColorStop(1,"rgba(0,0,0,0)")):"left"===s?(r=t.createLinearGradient(0,0,o,0),r.addColorStop(0,"rgba(0,0,0,0)"),r.addColorStop(1,"rgba(0,0,0,1)")):(r=t.createLinearGradient(e-o,0,e,0),r.addColorStop(0,"rgba(0,0,0,1)"),r.addColorStop(1,"rgba(0,0,0,0)")),t.fillStyle=r,t.fillRect(0,0,e,i)};if("vignette"===r){const s=t.createRadialGradient(e/2,i/2,.2*Math.min(e,i),e/2,i/2,Math.hypot(e,i)/2);s.addColorStop(0,"rgba(0,0,0,1)"),s.addColorStop(1,"rgba(0,0,0,0)"),t.fillStyle=s,t.fillRect(0,0,e,i)}else{("top"===r?["top"]:"bottom"===r?["bottom"]:"left"===r?["left"]:"right"===r?["right"]:"vertical"===r?["top","bottom"]:"horizontal"===r?["left","right"]:["top","bottom","left","right"]).forEach(edge)}t.restore()}}customElements.get("db-grid-background")||customElements.define("db-grid-background",DbGridBackground);export{DbGridBackground};

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

@@ -1 +1 @@
-const l={"arrow-bar-left":'<path fill="currentColor" d="M20.75 20h-1.5V4h1.5zM11.03 6.53l-4.72 4.72H16v1.5H6.31l4.72 4.72-1.06 1.06L3.44 12l6.53-6.53z"/>',"arrow-bar-right":'<path fill="currentColor" d="M4.75 20h-1.5V4h1.5zm15.81-8-6.53 6.53-1.06-1.06 4.72-4.72H8v-1.5h9.69l-4.72-4.72 1.06-1.06z"/>',award:'<path fill="currentColor" d="M11.753 15.5c-1.8 0-3.5-.7-4.77-1.98a6.74 6.74 0 0 1-1.98-4.77c0-1.8.7-3.5 1.98-4.77A6.74 6.74 0 0 1 11.753 2c1.8 0 3.5.7 4.77 1.98a6.74 6.74 0 0 1 1.98 4.77c0 1.8-.7 3.5-1.98 4.77a6.74 6.74 0 0 1-4.77 1.98m0-12c-1.4 0-2.72.55-3.71 1.54a5.22 5.22 0 0 0-1.54 3.71c0 1.4.55 2.72 1.54 3.71a5.22 5.22 0 0 0 3.71 1.54c1.4 0 2.72-.55 3.71-1.54a5.22 5.22 0 0 0 1.54-3.71c0-1.4-.55-2.72-1.54-3.71a5.22 5.22 0 0 0-3.71-1.54"/><path fill="currentColor" d="M15.313 21.5a.74.74 0 0 1-.64-.37l-3.56-5.96a.751.751 0 1 1 1.29-.77l2.86 4.8 1.06-2.07a.76.76 0 0 1 .72-.41l2.33.17-2.95-4.99a.76.76 0 0 1 .26-1.03c.36-.21.82-.09 1.03.26l3.68 6.22c.14.24.14.54 0 .78s-.4.37-.69.35l-3.27-.23-1.45 2.83c-.12.24-.37.4-.64.41h-.02z"/><path fill="currentColor" d="M8.193 21.5h-.02c-.27 0-.52-.17-.64-.41l-1.45-2.83-3.28.23a.75.75 0 0 1-.69-.35.73.73 0 0 1 0-.78l3.69-6.18c.21-.36.67-.47 1.03-.26s.47.67.26 1.03l-2.95 4.95 2.34-.17c.31-.01.58.14.72.41l1.06 2.07 2.86-4.8c.21-.36.67-.47 1.03-.26s.47.67.26 1.03l-3.56 5.96c-.14.23-.38.37-.64.37z"/>',apple:'<path fill="currentColor" fill-rule="evenodd" d="M18.644 18.648q-.807 1.15-1.316 1.592-.787.723-1.692.744-.649.001-1.562-.373-.914-.372-1.683-.371-.805-.001-1.73.371-.924.375-1.495.393-.866.038-1.729-.764-.55-.48-1.377-1.648-.885-1.245-1.455-2.891-.61-1.78-.611-3.447 0-1.91.826-3.292a4.86 4.86 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662q.69.001 1.81.422t1.436.422q.237 0 1.593-.498 1.279-.46 2.163-.384 2.4.192 3.6 1.895-2.145 1.301-2.123 3.637.02 1.82 1.317 3.023a4.3 4.3 0 0 0 1.315.863q-.159.46-.336.882a10.3 10.3 0 0 1-1.021 1.837M14.959 5.039c-.836.976-1.846 1.541-2.941 1.452a3 3 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688q.528-.607 1.343-1.009.813-.397 1.536-.435.02.192.019.381-.001 1.426-1.039 2.659" clip-rule="evenodd"/>',"play-store":'<path fill="currentColor" fill-rule="evenodd" d="M15.911 8.659 6.36 3.29c-.633-.342-1.226-.39-1.746-.016l8.34 8.34zm3.578 4.69c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4 4.659v14.706c0 .38.084.709.236.97l8.097-8.098L4.1 4.002c-.064.197-.1.417-.1.658m.902 16.25q.232.09.495.09.47 0 .968-.275l9.255-5.197-2.666-2.67z" clip-rule="evenodd"/>',"arrow-right":'<path fill="currentColor" d="m20.06 12-7.53 7.53-1.06-1.06 5.72-5.72H4v-1.5h13.19l-5.72-5.72 1.06-1.06z"/>',star:'<path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .673.419l2.926 5.945 6.509.944a.75.75 0 0 1 .417 1.278l-4.718 4.624 1.132 6.511a.75.75 0 0 1-1.083.796L12 18.744l-5.856 3.023a.75.75 0 0 1-1.083-.796l1.133-6.511-4.719-4.624a.75.75 0 0 1 .417-1.278l6.51-.944 2.925-5.945A.75.75 0 0 1 12 1.25m0 2.449L9.573 8.63a.75.75 0 0 1-.565.411l-5.4.783 3.917 3.84a.75.75 0 0 1 .214.664l-.941 5.412 4.858-2.508a.75.75 0 0 1 .688 0l4.858 2.508-.94-5.412a.75.75 0 0 1 .213-.665l3.918-3.84-5.4-.782a.75.75 0 0 1-.566-.41z" clip-rule="evenodd"/>',"star-filled":'<path fill="currentColor" d="M23 9c-.1-.4-.4-.6-.8-.7l-6.4-.9-2.9-5.8c-.3-.7-1.5-.7-1.8 0L8.2 7.4l-6.4.9c-.4 0-.7.3-.8.7s0 .8.3 1l4.6 4.5-1.1 6.4c0 .4 0 .8.4 1 .3.2.7.3 1.1 0l5.7-3 5.7 3c.1 0 .3.1.5.1s.4 0 .6-.2c.3-.2.5-.6.4-1l-1.1-6.4 4.6-4.5c.3-.3.4-.7.3-1z"/>',"star-half":'<path fill="currentColor" d="M8.9 8.3 2 9.3l5 4.8L5.8 21l6.2-3.2V2z"/><path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .673.419l2.926 5.945 6.509.944a.75.75 0 0 1 .417 1.278l-4.718 4.624 1.132 6.511a.75.75 0 0 1-1.083.796L12 18.744l-5.856 3.023a.75.75 0 0 1-1.083-.796l1.133-6.511-4.719-4.624a.75.75 0 0 1 .417-1.278l6.51-.944 2.925-5.945A.75.75 0 0 1 12 1.25m0 2.449L9.573 8.63a.75.75 0 0 1-.565.411l-5.4.783 3.917 3.84a.75.75 0 0 1 .214.664l-.941 5.412 4.858-2.508a.75.75 0 0 1 .688 0l4.858 2.508-.94-5.412a.75.75 0 0 1 .213-.665l3.918-3.84-5.4-.782a.75.75 0 0 1-.566-.41z" clip-rule="evenodd"/>',"trending-up":'<path fill="currentColor" d="M22 11V5h-6"/><path fill="currentColor" fill-rule="evenodd" d="M21.53 6.53 13 15.06l-3-3-6.47 6.47-1.06-1.06L10 9.94l3 3 7.47-7.47z" clip-rule="evenodd"/>',cart:'<path fill="currentColor" d="M3 2.25c.945 0 1.714.75 1.747 1.688L4.94 6.25h16.899l-1.167 10.5h-2.093a2.75 2.75 0 1 1-3.156 0H9.578a2.75 2.75 0 1 1-3.156 0H4.31L3.253 4.063 3.25 4.03V4A.25.25 0 0 0 3 3.75H1v-1.5zm5 15.5a1.25 1.25 0 1 0-.001 2.499A1.25 1.25 0 0 0 8 17.75m9 0a1.25 1.25 0 1 0-.001 2.499A1.25 1.25 0 0 0 17 17.75m-11.31-2.5h13.64l.832-7.5H5.064z"/>',"bell-active":'<path fill="currentColor" fill-rule="evenodd" d="M6.75 10.015V13c0 1.445-.466 2.453-1.06 3.25h12.62c-.594-.797-1.06-1.805-1.06-3.25v-2.985c-.047-1.117-.55-2.449-1.465-3.497C14.879 5.479 13.6 4.75 12 4.75s-2.879.73-3.785 1.768c-.914 1.048-1.418 2.38-1.465 3.497m.335-4.483C8.229 4.221 9.9 3.25 12 3.25s3.771.97 4.915 2.282c1.132 1.298 1.777 2.96 1.834 4.44l.001.028v3c0 1.67.788 2.477 1.78 3.47a.75.75 0 0 1-.53 1.28H4a.75.75 0 0 1-.53-1.28c.992-.992 1.78-1.8 1.78-3.47V9.971c.057-1.48.703-3.141 1.835-4.439" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M9 16.25a.75.75 0 0 1 .75.75v1c0 1.286.964 2.25 2.25 2.25s2.25-.964 2.25-2.25v-1a.75.75 0 0 1 1.5 0v1c0 2.114-1.636 3.75-3.75 3.75S8.25 20.114 8.25 18v-1a.75.75 0 0 1 .75-.75M17.424 2.52a.75.75 0 0 1 1.056-.096c1.307 1.089 2.463 2.786 3.19 4.24a.75.75 0 1 1-1.34.671c-.673-1.345-1.717-2.848-2.81-3.759a.75.75 0 0 1-.096-1.056M6.576 2.52a.75.75 0 0 1-.096 1.056c-1.093.911-2.137 2.414-2.81 3.76a.75.75 0 0 1-1.34-.671c.727-1.455 1.883-3.152 3.19-4.241a.75.75 0 0 1 1.056.096M12 1.25a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75" clip-rule="evenodd"/>',"caret-down-filled":'<path fill="currentColor" d="m12 14.5 5-5H7z"/>',"caret-updown-filled":'<path fill="currentColor" fill-rule="evenodd" d="m7 10 5-5 5 5zM17 14l-5 5-5-5z" clip-rule="evenodd"/>',"chevron-down":'<path fill="currentColor" fill-rule="evenodd" d="m5.47 9.53 1.06-1.06L12 13.94l5.47-5.47 1.06 1.06L12 16.06z" clip-rule="evenodd"/>',"chevron-up":'<path fill="currentColor" fill-rule="evenodd" d="m12 7.94 6.53 6.53-1.06 1.06L12 10.06l-5.47 5.47-1.06-1.06z" clip-rule="evenodd"/>',"chevron-left":'<path fill="currentColor" fill-rule="evenodd" d="m10.06 12 5.47-5.47-1.06-1.06L7.94 12l6.53 6.53 1.06-1.06z" clip-rule="evenodd"/>',"chevron-right":'<path fill="currentColor" fill-rule="evenodd" d="M9.53 5.47 16.06 12l-6.53 6.53-1.06-1.06L13.94 12 8.47 6.53z" clip-rule="evenodd"/>',calendar:'<path fill="currentColor" fill-rule="evenodd" d="M16.25 8V2h1.5v6zM6.25 8V2h1.5v6zM21 11.75H3v-1.5h18z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75a.25.25 0 0 0-.25.25v14c0 .138.112.25.25.25h16a.25.25 0 0 0 .25-.25V6a.25.25 0 0 0-.25-.25zM2.25 6c0-.966.784-1.75 1.75-1.75h16c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 20 21.75H4A1.75 1.75 0 0 1 2.25 20z" clip-rule="evenodd"/>',clock:'<path fill="currentColor" fill-rule="evenodd" d="M12.75 11.25V6h-1.5v6.75H16v-1.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12" clip-rule="evenodd"/>',bulb:'<path fill="currentColor" d="M15.5 17.5H8v-.75s-.02-1.79-1.06-3.21l-.29-.39C5.88 12.12 5 10.95 5 8.93 5 5.11 8.03 2 11.75 2s6.75 3.11 6.75 6.93c0 2-.87 3.17-1.65 4.2l-.29.39c-1.05 1.45-1.06 3.21-1.06 3.23zM9.44 16h4.62c.11-.81.42-2.16 1.29-3.36l.31-.41c.69-.93 1.35-1.8 1.35-3.31 0-2.99-2.36-5.43-5.25-5.43S6.5 5.93 6.5 8.93c0 1.52.66 2.4 1.35 3.32l.31.41c.86 1.19 1.17 2.53 1.28 3.34M15.75 20h-8v1.5h8z"/>',"circle-checked":'<path fill="currentColor" fill-rule="evenodd" d="m10.32 14.27 6.15-6.134 1.06 1.062-7.22 7.2L6.467 12.5l1.068-1.054z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1.25 12C1.25 6.086 6.086 1.25 12 1.25S22.75 6.086 22.75 12 17.914 22.75 12 22.75 1.25 17.914 1.25 12M12 2.75c-5.086 0-9.25 4.164-9.25 9.25s4.164 9.25 9.25 9.25 9.25-4.164 9.25-9.25S17.086 2.75 12 2.75" clip-rule="evenodd"/>',"cloud-close":'<path fill="currentColor" fill-rule="evenodd" d="M5.23 9.323A7.75 7.75 0 0 1 12.5 4.25c3.782 0 6.923 2.71 7.606 6.291A4.74 4.74 0 0 1 23.25 15a4.75 4.75 0 0 1-4.75 4.75H6A5.25 5.25 0 0 1 .75 14.5c0-2.64 1.95-4.805 4.48-5.177M12.5 5.75a6.25 6.25 0 0 0-5.993 4.483l-.15.512-.534.025A3.74 3.74 0 0 0 2.25 14.5 3.75 3.75 0 0 0 6 18.25h12.5a3.243 3.243 0 0 0 .763-6.398l-.504-.122-.064-.514A6.25 6.25 0 0 0 12.5 5.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m14.47 15.53-5-5 1.06-1.06 5 5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m9.47 14.47 5-5 1.06 1.06-5 5z" clip-rule="evenodd"/>',close:'<path fill="currentColor" fill-rule="evenodd" d="m5.47 17.47 12-12 1.06 1.06-12 12z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m6.53 5.47 12 12-1.06 1.06-12-12z" clip-rule="evenodd"/>',done:'<path fill="currentColor" fill-rule="evenodd" d="M9.476 15.936 18.97 6.47l1.06 1.062L9.468 18.064l-5.502-5.58 1.068-1.053z" clip-rule="evenodd"/>',"error-filled":'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5M8.47 9.53l1.06-1.06L12 10.94l2.47-2.47 1.06 1.06L13.06 12l2.47 2.47-1.06 1.06L12 13.06l-2.47 2.47-1.06-1.06L10.94 12z" clip-rule="evenodd"/>',edit:'<path fill="currentColor" fill-rule="evenodd" d="M15.506 3.322a3.655 3.655 0 0 1 5.172 0 3.655 3.655 0 0 1 0 5.172L7.466 21.75H2.25v-5.215zm2.586.428c-.572 0-1.121.227-1.525.632l-.002.001L3.75 17.157v3.093h3.093L19.618 7.434a2.16 2.16 0 0 0-1.526-3.684" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M17.7 10.453 13.548 6.3l1.06-1.06 4.154 4.154z" clip-rule="evenodd"/>',eyedropper:'<path fill="currentColor" d="M17.889 11.615a.25.25 0 0 0 0-.353l-5.657-5.657a.25.25 0 0 0-.354 0l-1.414 1.414a.25.25 0 0 0 0 .354l5.657 5.656a.25.25 0 0 0 .354 0zm-.354 2.475a1.75 1.75 0 0 1-2.475 0L9.404 8.433a1.75 1.75 0 0 1 0-2.475l1.414-1.414a1.75 1.75 0 0 1 2.475 0l5.657 5.657a1.75 1.75 0 0 1 0 2.475z"/><path fill="currentColor" d="m15.951 12.86-7.077 7.076-.262.03-1.009.11-.453.454a2.85 2.85 0 0 1-4.03-4.03l.42-.42v-1.41l7.11-7.11zM5.04 15.291v1.41l-.86.86a1.35 1.35 0 0 0 1.91 1.909l.826-.826.262-.03 1.007-.111 5.644-5.644-3.18-3.178zM15.36 2.84a2.754 2.754 0 0 1 3.89 0l1.41 1.41a2.754 2.754 0 0 1 0 3.89l-2.94 2.941-5.3-5.3zm2.83 1.06a1.254 1.254 0 0 0-1.77 0l-1.88 1.88 3.18 3.18 1.88-1.88a1.255 1.255 0 0 0 0-1.77z"/><path fill="currentColor" d="m12.743 14.25-.006 1.5-8.46-.03.006-1.5z"/>',gallery:'<path fill="currentColor" d="M7.5 11c.8 0 1.5-.7 1.5-1.5S8.3 8 7.5 8 6 8.7 6 9.5 6.7 11 7.5 11"/><path fill="currentColor" fill-rule="evenodd" d="m16.698 9.015 5.787 4.913-.97 1.144-4.813-4.087L5.487 20.57l-.974-1.14z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 4.75c-.69 0-1.25.56-1.25 1.25v12c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V6c0-.69-.56-1.25-1.25-1.25zM1.25 6A2.75 2.75 0 0 1 4 3.25h16A2.75 2.75 0 0 1 22.75 6v12A2.75 2.75 0 0 1 20 20.75H4A2.75 2.75 0 0 1 1.25 18z" clip-rule="evenodd"/>',hide:'<path fill="currentColor" fill-rule="evenodd" d="M8.343 11.2c.056-.27.147-.581.284-.842l1.328.696c-.047.09-.102.252-.145.454-.041.199-.06.381-.06.492A2.27 2.27 0 0 0 12 14.25c.284 0 .685-.056.983-.2l.65 1.352c-.57.274-1.217.348-1.633.348-2.056 0-3.75-1.694-3.75-3.75 0-.238.035-.527.093-.8" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.833 12c.477-.936 1.58-2.68 3.626-3.843l-.742-1.304c-2.695 1.534-3.975 3.906-4.4 4.835L1.176 12l.143.312c.685 1.5 3.5 6.438 10.682 6.438 1.62 0 3.026-.253 4.242-.667l-.484-1.42c-1.054.36-2.297.587-3.758.587-5.874 0-8.377-3.707-9.167-5.25M12 6.75c-.673 0-1.6.084-2.202.227l-.346-1.46c.746-.177 1.797-.267 2.548-.267 7.182 0 9.997 4.939 10.682 6.438l.143.312-.143.312a11.1 11.1 0 0 1-3.22 4.037l-.923-1.184A9.7 9.7 0 0 0 21.166 12c-.79-1.544-3.292-5.25-9.166-5.25" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m19.763 22.237-18-18 1.06-1.06 18 18z" clip-rule="evenodd"/>',"info-filled":'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5m-.75 5h1.5v1.5h-1.5zm0 3h1.5v6.5h-1.5z" clip-rule="evenodd"/>',lock:'<path fill="currentColor" fill-rule="evenodd" d="M5 11.75a.25.25 0 0 0-.25.25v8c0 .138.112.25.25.25h14a.25.25 0 0 0 .25-.25v-8a.25.25 0 0 0-.25-.25zM3.25 12c0-.966.784-1.75 1.75-1.75h14c.966 0 1.75.784 1.75 1.75v8A1.75 1.75 0 0 1 19 21.75H5A1.75 1.75 0 0 1 3.25 20z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75A3.26 3.26 0 0 0 8.75 7v4h-1.5V7A4.76 4.76 0 0 1 12 2.25 4.76 4.76 0 0 1 16.75 7v4h-1.5V7A3.26 3.26 0 0 0 12 3.75" clip-rule="evenodd"/>',mail:'<path fill="currentColor" fill-rule="evenodd" d="m1.665 8.67.67-1.34L12 12.161l9.665-4.833.67 1.342L12 13.839z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25zM1.25 7A2.75 2.75 0 0 1 4 4.25h16A2.75 2.75 0 0 1 22.75 7v10A2.75 2.75 0 0 1 20 19.75H4A2.75 2.75 0 0 1 1.25 17z" clip-rule="evenodd"/>',minus:'<path fill="currentColor" fill-rule="evenodd" d="M6 10.75h12v1.5H6z" clip-rule="evenodd"/>',"more-vertical":'<path fill="currentColor" d="M11.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M11.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M11.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>',pause:'<path fill="currentColor" fill-rule="evenodd" d="M8 6.75h2.5v10.5H8zm5.5 0H16v10.5h-2.5z" clip-rule="evenodd"/>',play:'<path fill="currentColor" fill-rule="evenodd" d="M9.5 7.21v9.58l7.5-4.79z" clip-rule="evenodd"/>',plus:'<path fill="currentColor" fill-rule="evenodd" d="M11.25 11.25v-7h1.5v7h7v1.5h-7v7h-1.5v-7h-7v-1.5z" clip-rule="evenodd"/>',copy:'<path fill="currentColor" fill-rule="evenodd" d="M8 3.75a.25.25 0 0 0-.25.25v12c0 .138.112.25.25.25h12a.25.25 0 0 0 .25-.25V4a.25.25 0 0 0-.25-.25zM6.25 4c0-.966.784-1.75 1.75-1.75h12c.966 0 1.75.784 1.75 1.75v12A1.75 1.75 0 0 1 20 17.75H8A1.75 1.75 0 0 1 6.25 16z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3.75 9v9A2.25 2.25 0 0 0 6 20.25h9v1.5H6A3.75 3.75 0 0 1 2.25 18V9z" clip-rule="evenodd"/>',code:'<path fill="currentColor" fill-rule="evenodd" d="m6.47 7.47 1.06 1.06L4.06 12l3.47 3.47-1.06 1.06L1.94 12zM19.94 12l-3.47-3.47 1.06-1.06L22.06 12l-4.53 4.53-1.06-1.06zM8.31 18.705l6-14 1.38.59-6 14z" clip-rule="evenodd"/>',write:'<path fill="currentColor" fill-rule="evenodd" d="M3.056 6.056A2.75 2.75 0 0 1 5 5.25h3v1.5H5A1.25 1.25 0 0 0 3.75 8v11A1.25 1.25 0 0 0 5 20.25h11A1.25 1.25 0 0 0 17.25 19v-3h1.5v3A2.75 2.75 0 0 1 16 21.75H5A2.75 2.75 0 0 1 2.25 19V8c0-.73.29-1.429.806-1.944" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M16.885 3.084a2.85 2.85 0 0 1 4.03 4.03l-9.604 9.636H7.25v-4.061zm2.015.666a1.35 1.35 0 0 0-.955.395L8.75 13.311v1.939h1.939l9.166-9.195A1.35 1.35 0 0 0 18.9 3.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m18.47 8.53-3-3 1.06-1.06 3 3z" clip-rule="evenodd"/>',upload:'<path fill="currentColor" d="m12 2.94 5.53 5.53-1.06 1.06-3.72-3.72V17h-1.5V5.81L7.53 9.53 6.47 8.47z"/><path fill="currentColor" d="M2.25 15h1.5v4.25h16.5V15h1.5v5.75H2.25z"/>',video:'<path fill="currentColor" fill-rule="evenodd" d="M21.37 6.347a.75.75 0 0 1 .38.653v10a.75.75 0 0 1-1.136.643l-5-3a.75.75 0 1 1 .772-1.286l3.864 2.318v-7.35l-3.864 2.318a.75.75 0 1 1-.772-1.286l5-3a.75.75 0 0 1 .755-.01" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h13a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75zm1.5.75v10.5h11.5V6.75z" clip-rule="evenodd"/>',"volume-up":'<path fill="currentColor" fill-rule="evenodd" d="M12.325 4.324A.75.75 0 0 1 12.75 5v14a.75.75 0 0 1-1.219.586L6.738 15.75H3a.75.75 0 0 1-.75-.75V9A.75.75 0 0 1 3 8.25h3.737l4.794-3.836a.75.75 0 0 1 .794-.09M11.25 6.56 7.469 9.586A.75.75 0 0 1 7 9.75H3.75v4.5H7a.75.75 0 0 1 .469.164l3.781 3.025zM17.57 4.37a.75.75 0 0 1 1.06 0c2.046 2.046 3.12 4.739 3.12 7.63 0 2.908-1.185 5.589-3.105 7.616a.75.75 0 1 1-1.09-1.032c1.68-1.773 2.695-4.092 2.695-6.584 0-2.508-.926-4.815-2.68-6.57a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M14.97 7.97a.75.75 0 0 1 1.06 0c1.025 1.025 1.72 2.51 1.72 4.03 0 1.485-.571 2.998-1.748 4.058a.75.75 0 1 1-1.004-1.115c.823-.741 1.252-1.828 1.252-2.943 0-1.08-.505-2.195-1.28-2.97a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>',"mute-filled":'<path fill="currentColor" d="M12.3 4.1h.1c-.3-.2-.8 0-1.1.1L6.6 8H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h3.6l4.7 3.8c.2.1.4.2.6.2h.4c.3-.2.6-.5.6-.9V5q0-.6-.6-.9M21.9 9.7l-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3z"/>',package:'<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 1.14 21.65 6.56v9.78L12 21.76 2.35 16.44V6.56zm-8.15 6.3v8.12L12 20.04l7.8-4.48V7.44L12 2.86z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21.27 7.75 12.37 12.75l-.74-1.31 8.9-5z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M11.25 21v-8.9h1.5V21z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M3.47 6.35 12.37 11.45l-.75 1.3-8.9-5.1z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M7.23 8.85 16.13 3.85l.74 1.3-8.9 5z"/>',"delivery-filled":'<path fill="currentColor" d="M22.68 11.13 21.45 8.66A2.25 2.25 0 0 0 18.76 7H18a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v9c0 .87.39 1.67 1.02 2.23.14 1.54 1.43 2.77 3 2.77 1.3 0 2.4-.84 2.82-2h6.37c.42 1.16 1.52 2 2.82 2 1.65 0 3-1.35 3-3h1c1.1 0 2-.9 2-2v-3.53c0-.46-.11-.92-.32-1.34M5 19c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m12 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m4-3h-1.78c-.33-.37-.75-.65-1.22-.82V9h.76c.38 0 .73.21.9.55l1.24 2.47c.07.14.1.3.1.47z"/>',repeat:'<path fill="currentColor" fill-rule="evenodd" d="m18.94 6-3.47-3.47 1.06-1.06L21.06 6l-4.53 4.53-1.06-1.06z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M5.532 7.433c.587-.488 1.3-.783 1.968-.783h12.4v-1.5H7.5c-1.116 0-2.183.49-2.988 1.18l-.044.038-.037.044C3.757 7.197 3.25 8.164 3.25 9.3V11h1.5V9.3c0-.648.279-1.267.782-1.867M5.06 18l3.47-3.47-1.06-1.06L2.94 18l4.53 4.53 1.06-1.06z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M19.25 14.7V13h1.5v1.7c0 1.136-.508 2.103-1.18 2.888l-.038.044-.044.037c-.805.69-1.872 1.181-2.988 1.181H4v-1.5h12.5c.668 0 1.381-.295 1.968-.783.503-.6.782-1.22.782-1.867" clip-rule="evenodd"/>',settings:'<path fill="currentColor" fill-rule="evenodd" d="M8.25 12a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 9.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M9.757 1.888a.75.75 0 0 1 .742-.639h3a.75.75 0 0 1 .742.639l.425 2.836q.303.11.594.244l2.304-1.703a.75.75 0 0 1 .976.073l2.121 2.12a.75.75 0 0 1 .073.977l-1.702 2.304q.134.291.244.594l2.835.425a.75.75 0 0 1 .639.742v3a.75.75 0 0 1-.639.742l-2.836.425q-.11.303-.243.594l1.702 2.304a.75.75 0 0 1-.073.976l-2.12 2.121a.75.75 0 0 1-.977.073l-2.304-1.702q-.291.134-.594.244l-.425 2.835a.75.75 0 0 1-.742.639h-3a.75.75 0 0 1-.742-.639l-.425-2.836a8 8 0 0 1-.594-.244l-2.304 1.703a.75.75 0 0 1-.976-.073l-2.121-2.12a.75.75 0 0 1-.073-.977l1.702-2.304a8 8 0 0 1-.244-.594l-2.835-.425a.75.75 0 0 1-.639-.742v-3a.75.75 0 0 1 .639-.742l2.836-.425q.11-.303.244-.594L3.264 6.435a.75.75 0 0 1 .073-.976l2.12-2.121a.75.75 0 0 1 .977-.073l2.304 1.702q.291-.134.594-.244zm1.388.861-.398 2.653a.75.75 0 0 1-.53.608 6 6 0 0 0-1.197.493.75.75 0 0 1-.804-.056L6.062 4.855 4.854 6.063l1.592 2.154a.75.75 0 0 1 .056.804 6.2 6.2 0 0 0-.493 1.2.75.75 0 0 1-.608.527l-2.653.398v1.708l2.653.398a.75.75 0 0 1 .608.53q.188.634.493 1.197a.75.75 0 0 1-.056.804l-1.592 2.154 1.208 1.208 2.154-1.592a.75.75 0 0 1 .804-.056q.562.304 1.2.493a.75.75 0 0 1 .527.608l.398 2.653h1.708l.398-2.653a.75.75 0 0 1 .53-.608q.634-.188 1.197-.493a.75.75 0 0 1 .804.056l2.154 1.592 1.208-1.208-1.592-2.154a.75.75 0 0 1-.056-.804q.304-.562.493-1.2a.75.75 0 0 1 .608-.527l2.653-.398v-1.708l-2.653-.398a.75.75 0 0 1-.608-.53 6 6 0 0 0-.493-1.197.75.75 0 0 1 .056-.804l1.592-2.154-1.208-1.208-2.154 1.592a.75.75 0 0 1-.804.056 6.2 6.2 0 0 0-1.2-.493.75.75 0 0 1-.527-.608l-.398-2.653z" clip-rule="evenodd"/>',refresh:'<path fill="currentColor" fill-rule="evenodd" d="M20.25 8.25V3h1.5v6.75H16v-1.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75A8.25 8.25 0 0 0 3.75 12 8.25 8.25 0 0 0 12 20.25 8.25 8.25 0 0 0 20.25 12h1.5A9.75 9.75 0 0 1 12 21.75 9.75 9.75 0 0 1 2.25 12 9.75 9.75 0 0 1 12 2.25a9.75 9.75 0 0 1 8.628 5.205l.094.106.324.361.011.012.462.517a3 3 0 0 1 .098.123c.007.01.03.044.054.09l-1.342.671a.586.586 0 0 0 .068.11l.009.012-.021-.025q-.037-.043-.107-.12l-.335-.373-.013-.015-.494-.554-.05-.065a1 1 0 0 1-.05-.084l-.002-.004A8.25 8.25 0 0 0 12 3.75" clip-rule="evenodd"/>',expand:'<path fill="currentColor" fill-rule="evenodd" d="M17.25 6.75H12v-1.5h6.75V12h-1.5zM6.75 17.25V12h-1.5v6.75H12v-1.5z" clip-rule="evenodd"/>',shrink:'<path fill="currentColor" fill-rule="evenodd" d="M9.25 14.75H4v-1.5h6.75V20h-1.5zM13.75 10.25V5h-1.5v6.75H19v-1.5z" clip-rule="evenodd"/>',"grip-vertical":'<path fill="currentColor" d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>',"grip-horizontal":'<path fill="currentColor" d="M8 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M13.5 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M19 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M8 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M13.5 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M19 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>',search:'<path fill="currentColor" fill-rule="evenodd" d="M2.25 11c0-4.814 3.936-8.75 8.75-8.75s8.75 3.936 8.75 8.75-3.936 8.75-8.75 8.75S2.25 15.814 2.25 11M11 3.75c-3.986 0-7.25 3.264-7.25 7.25s3.264 7.25 7.25 7.25 7.25-3.264 7.25-7.25S14.986 3.75 11 3.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m17.13 16.07 4.4 4.4-1.06 1.06-4.4-4.4z" clip-rule="evenodd"/>',"share-alt":'<path fill="currentColor" fill-rule="evenodd" d="M13.69 3.317a.75.75 0 0 1 .804.119l8 7a.75.75 0 0 1 0 1.128l-8 7A.75.75 0 0 1 13.25 18v-3.24c-1.925.051-3.579.315-5.062.932-1.659.692-3.157 1.85-4.588 3.758A.75.75 0 0 1 2.25 19c0-4.145 1.147-6.888 3.291-8.698 1.96-1.655 4.655-2.437 7.709-2.943V4a.75.75 0 0 1 .44-.683m1.06 2.336V8a.75.75 0 0 1-.638.742c-3.283.497-5.85 1.225-7.603 2.706-1.359 1.147-2.303 2.812-2.631 5.39 1.153-1.15 2.386-1.969 3.734-2.53 1.928-.804 4.04-1.058 6.388-1.058a.75.75 0 0 1 .75.75v2.347L20.861 11z" clip-rule="evenodd"/>',show:'<path fill="currentColor" fill-rule="evenodd" d="M8.25 12c0-2.055 1.695-3.75 3.75-3.75s3.75 1.694 3.75 3.75-1.694 3.75-3.75 3.75S8.25 14.056 8.25 12M12 9.75A2.27 2.27 0 0 0 9.75 12 2.27 2.27 0 0 0 12 14.25 2.27 2.27 0 0 0 14.25 12 2.27 2.27 0 0 0 12 9.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.833 12c.791 1.543 3.297 5.25 9.167 5.25 5.872 0 8.374-3.704 9.167-5.25-.791-1.543-3.297-5.25-9.167-5.25-5.871 0-8.374 3.704-9.167 5.25m-1.515-.312C2.006 10.183 4.823 5.25 12 5.25s9.997 4.938 10.682 6.438l.143.312-.143.312C21.994 13.817 19.177 18.75 12 18.75s-9.997-4.938-10.682-6.438L1.175 12z" clip-rule="evenodd"/>',sparkle:'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25 14.08 8 19.75 10l-5.67 2L12 17.75 9.92 12 4.25 10l5.67-2zm0 4.4-.9 2.49-2.45.86 2.45.86.9 2.49.9-2.49 2.45-.86-2.45-.86zM18.5 15.25l.88 2.37 2.37.88-2.37.88-.88 2.37-.88-2.37-2.37-.88 2.37-.88z" clip-rule="evenodd"/>',trash:'<path fill="currentColor" fill-rule="evenodd" d="M6.75 6v13c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V6h1.5v13A2.75 2.75 0 0 1 16 21.75H8A2.75 2.75 0 0 1 5.25 19V6z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M21 6.75H3v-1.5h18z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M7.25 4c0-.966.784-1.75 1.75-1.75h6c.966 0 1.75.784 1.75 1.75v2h-1.5V4a.25.25 0 0 0-.25-.25H9a.25.25 0 0 0-.25.25v2h-1.5zM9.25 16V9h1.5v7zM13.25 16V9h1.5v7z" clip-rule="evenodd"/>',user:'<path fill="currentColor" fill-rule="evenodd" d="M8.652 3.687C9.52 2.708 10.833 2.25 12 2.25c1.198 0 2.38.478 3.313 1.402.979.868 1.437 2.181 1.437 3.348 0 1.198-.477 2.38-1.402 3.313-.868.979-2.181 1.437-3.348 1.437-1.198 0-2.38-.477-3.313-1.402C7.715 9.488 7.25 8.277 7.25 7c0-1.198.478-2.38 1.402-3.313M12 3.75c-.826 0-1.703.336-2.236.944l-.016.019-.018.017c-.664.664-.98 1.475-.98 2.27 0 .915.329 1.697.944 2.236l.019.016.017.018c.664.664 1.475.98 2.27.98.826 0 1.703-.336 2.236-.944l.016-.019.018-.017c.664-.664.98-1.475.98-2.27 0-.826-.336-1.703-.944-2.236l-.019-.016-.017-.018c-.664-.664-1.475-.98-2.27-.98M8 15.75c-.795 0-1.606.317-2.27.98l-.017.018-.02.016c-.614.539-.943 1.321-.943 2.236v3h-1.5v-3c0-1.277.465-2.487 1.437-3.348.934-.925 2.115-1.402 3.313-1.402h8c1.277 0 2.487.465 3.348 1.437.925.934 1.402 2.115 1.402 3.313v3h-1.5v-3c0-.795-.317-1.606-.98-2.27l-.018-.017-.016-.02c-.539-.614-1.321-.943-2.236-.943z" clip-rule="evenodd"/>',"warning-filled":'<path fill="currentColor" fill-rule="evenodd" d="M10.34 3.78a1.9 1.9 0 0 1 3.32 0l8.06 14.5A1.9 1.9 0 0 1 20.06 21H3.94a1.9 1.9 0 0 1-1.66-2.72zm.91 5.47h1.5v5.5h-1.5zm0 7h1.5v1.5h-1.5z" clip-rule="evenodd"/>'};function isDbIconName(e){return Object.prototype.hasOwnProperty.call(l,e)}function getDbComponentIconSize(l){return"s"===l?12:"l"===l?20:16}function createDbIcon(e,r=16){const d=document.createElement("template");return d.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true" focusable="false" data-designbase-icon="${e}">${l[e]}</svg>`,d.content.firstElementChild}export{createDbIcon,getDbComponentIconSize,isDbIconName};
+const l={"arrow-bar-left":'<path fill="currentColor" d="M20.75 20h-1.5V4h1.5zM11.03 6.53l-4.72 4.72H16v1.5H6.31l4.72 4.72-1.06 1.06L3.44 12l6.53-6.53z"/>',"arrow-bar-right":'<path fill="currentColor" d="M4.75 20h-1.5V4h1.5zm15.81-8-6.53 6.53-1.06-1.06 4.72-4.72H8v-1.5h9.69l-4.72-4.72 1.06-1.06z"/>',award:'<path fill="currentColor" d="M11.753 15.5c-1.8 0-3.5-.7-4.77-1.98a6.74 6.74 0 0 1-1.98-4.77c0-1.8.7-3.5 1.98-4.77A6.74 6.74 0 0 1 11.753 2c1.8 0 3.5.7 4.77 1.98a6.74 6.74 0 0 1 1.98 4.77c0 1.8-.7 3.5-1.98 4.77a6.74 6.74 0 0 1-4.77 1.98m0-12c-1.4 0-2.72.55-3.71 1.54a5.22 5.22 0 0 0-1.54 3.71c0 1.4.55 2.72 1.54 3.71a5.22 5.22 0 0 0 3.71 1.54c1.4 0 2.72-.55 3.71-1.54a5.22 5.22 0 0 0 1.54-3.71c0-1.4-.55-2.72-1.54-3.71a5.22 5.22 0 0 0-3.71-1.54"/><path fill="currentColor" d="M15.313 21.5a.74.74 0 0 1-.64-.37l-3.56-5.96a.751.751 0 1 1 1.29-.77l2.86 4.8 1.06-2.07a.76.76 0 0 1 .72-.41l2.33.17-2.95-4.99a.76.76 0 0 1 .26-1.03c.36-.21.82-.09 1.03.26l3.68 6.22c.14.24.14.54 0 .78s-.4.37-.69.35l-3.27-.23-1.45 2.83c-.12.24-.37.4-.64.41h-.02z"/><path fill="currentColor" d="M8.193 21.5h-.02c-.27 0-.52-.17-.64-.41l-1.45-2.83-3.28.23a.75.75 0 0 1-.69-.35.73.73 0 0 1 0-.78l3.69-6.18c.21-.36.67-.47 1.03-.26s.47.67.26 1.03l-2.95 4.95 2.34-.17c.31-.01.58.14.72.41l1.06 2.07 2.86-4.8c.21-.36.67-.47 1.03-.26s.47.67.26 1.03l-3.56 5.96c-.14.23-.38.37-.64.37z"/>',apple:'<path fill="currentColor" fill-rule="evenodd" d="M18.644 18.648q-.807 1.15-1.316 1.592-.787.723-1.692.744-.649.001-1.562-.373-.914-.372-1.683-.371-.805-.001-1.73.371-.924.375-1.495.393-.866.038-1.729-.764-.55-.48-1.377-1.648-.885-1.245-1.455-2.891-.61-1.78-.611-3.447 0-1.91.826-3.292a4.86 4.86 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662q.69.001 1.81.422t1.436.422q.237 0 1.593-.498 1.279-.46 2.163-.384 2.4.192 3.6 1.895-2.145 1.301-2.123 3.637.02 1.82 1.317 3.023a4.3 4.3 0 0 0 1.315.863q-.159.46-.336.882a10.3 10.3 0 0 1-1.021 1.837M14.959 5.039c-.836.976-1.846 1.541-2.941 1.452a3 3 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688q.528-.607 1.343-1.009.813-.397 1.536-.435.02.192.019.381-.001 1.426-1.039 2.659" clip-rule="evenodd"/>',"play-store":'<path fill="currentColor" fill-rule="evenodd" d="M15.911 8.659 6.36 3.29c-.633-.342-1.226-.39-1.746-.016l8.34 8.34zm3.578 4.69c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4 4.659v14.706c0 .38.084.709.236.97l8.097-8.098L4.1 4.002c-.064.197-.1.417-.1.658m.902 16.25q.232.09.495.09.47 0 .968-.275l9.255-5.197-2.666-2.67z" clip-rule="evenodd"/>',"arrow-right":'<path fill="currentColor" d="m20.06 12-7.53 7.53-1.06-1.06 5.72-5.72H4v-1.5h13.19l-5.72-5.72 1.06-1.06z"/>',star:'<path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .673.419l2.926 5.945 6.509.944a.75.75 0 0 1 .417 1.278l-4.718 4.624 1.132 6.511a.75.75 0 0 1-1.083.796L12 18.744l-5.856 3.023a.75.75 0 0 1-1.083-.796l1.133-6.511-4.719-4.624a.75.75 0 0 1 .417-1.278l6.51-.944 2.925-5.945A.75.75 0 0 1 12 1.25m0 2.449L9.573 8.63a.75.75 0 0 1-.565.411l-5.4.783 3.917 3.84a.75.75 0 0 1 .214.664l-.941 5.412 4.858-2.508a.75.75 0 0 1 .688 0l4.858 2.508-.94-5.412a.75.75 0 0 1 .213-.665l3.918-3.84-5.4-.782a.75.75 0 0 1-.566-.41z" clip-rule="evenodd"/>',"star-filled":'<path fill="currentColor" d="M23 9c-.1-.4-.4-.6-.8-.7l-6.4-.9-2.9-5.8c-.3-.7-1.5-.7-1.8 0L8.2 7.4l-6.4.9c-.4 0-.7.3-.8.7s0 .8.3 1l4.6 4.5-1.1 6.4c0 .4 0 .8.4 1 .3.2.7.3 1.1 0l5.7-3 5.7 3c.1 0 .3.1.5.1s.4 0 .6-.2c.3-.2.5-.6.4-1l-1.1-6.4 4.6-4.5c.3-.3.4-.7.3-1z"/>',"star-half":'<path fill="currentColor" d="M8.9 8.3 2 9.3l5 4.8L5.8 21l6.2-3.2V2z"/><path fill="currentColor" fill-rule="evenodd" d="M12 1.25a.75.75 0 0 1 .673.419l2.926 5.945 6.509.944a.75.75 0 0 1 .417 1.278l-4.718 4.624 1.132 6.511a.75.75 0 0 1-1.083.796L12 18.744l-5.856 3.023a.75.75 0 0 1-1.083-.796l1.133-6.511-4.719-4.624a.75.75 0 0 1 .417-1.278l6.51-.944 2.925-5.945A.75.75 0 0 1 12 1.25m0 2.449L9.573 8.63a.75.75 0 0 1-.565.411l-5.4.783 3.917 3.84a.75.75 0 0 1 .214.664l-.941 5.412 4.858-2.508a.75.75 0 0 1 .688 0l4.858 2.508-.94-5.412a.75.75 0 0 1 .213-.665l3.918-3.84-5.4-.782a.75.75 0 0 1-.566-.41z" clip-rule="evenodd"/>',"trending-up":'<path fill="currentColor" d="M22 11V5h-6"/><path fill="currentColor" fill-rule="evenodd" d="M21.53 6.53 13 15.06l-3-3-6.47 6.47-1.06-1.06L10 9.94l3 3 7.47-7.47z" clip-rule="evenodd"/>',cart:'<path fill="currentColor" d="M3 2.25c.945 0 1.714.75 1.747 1.688L4.94 6.25h16.899l-1.167 10.5h-2.093a2.75 2.75 0 1 1-3.156 0H9.578a2.75 2.75 0 1 1-3.156 0H4.31L3.253 4.063 3.25 4.03V4A.25.25 0 0 0 3 3.75H1v-1.5zm5 15.5a1.25 1.25 0 1 0-.001 2.499A1.25 1.25 0 0 0 8 17.75m9 0a1.25 1.25 0 1 0-.001 2.499A1.25 1.25 0 0 0 17 17.75m-11.31-2.5h13.64l.832-7.5H5.064z"/>',"bell-active":'<path fill="currentColor" fill-rule="evenodd" d="M6.75 10.015V13c0 1.445-.466 2.453-1.06 3.25h12.62c-.594-.797-1.06-1.805-1.06-3.25v-2.985c-.047-1.117-.55-2.449-1.465-3.497C14.879 5.479 13.6 4.75 12 4.75s-2.879.73-3.785 1.768c-.914 1.048-1.418 2.38-1.465 3.497m.335-4.483C8.229 4.221 9.9 3.25 12 3.25s3.771.97 4.915 2.282c1.132 1.298 1.777 2.96 1.834 4.44l.001.028v3c0 1.67.788 2.477 1.78 3.47a.75.75 0 0 1-.53 1.28H4a.75.75 0 0 1-.53-1.28c.992-.992 1.78-1.8 1.78-3.47V9.971c.057-1.48.703-3.141 1.835-4.439" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M9 16.25a.75.75 0 0 1 .75.75v1c0 1.286.964 2.25 2.25 2.25s2.25-.964 2.25-2.25v-1a.75.75 0 0 1 1.5 0v1c0 2.114-1.636 3.75-3.75 3.75S8.25 20.114 8.25 18v-1a.75.75 0 0 1 .75-.75M17.424 2.52a.75.75 0 0 1 1.056-.096c1.307 1.089 2.463 2.786 3.19 4.24a.75.75 0 1 1-1.34.671c-.673-1.345-1.717-2.848-2.81-3.759a.75.75 0 0 1-.096-1.056M6.576 2.52a.75.75 0 0 1-.096 1.056c-1.093.911-2.137 2.414-2.81 3.76a.75.75 0 0 1-1.34-.671c.727-1.455 1.883-3.152 3.19-4.241a.75.75 0 0 1 1.056.096M12 1.25a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75" clip-rule="evenodd"/>',"caret-down-filled":'<path fill="currentColor" d="m12 14.5 5-5H7z"/>',"caret-updown-filled":'<path fill="currentColor" fill-rule="evenodd" d="m7 10 5-5 5 5zM17 14l-5 5-5-5z" clip-rule="evenodd"/>',"chevron-down":'<path fill="currentColor" fill-rule="evenodd" d="m5.47 9.53 1.06-1.06L12 13.94l5.47-5.47 1.06 1.06L12 16.06z" clip-rule="evenodd"/>',"chevron-up":'<path fill="currentColor" fill-rule="evenodd" d="m12 7.94 6.53 6.53-1.06 1.06L12 10.06l-5.47 5.47-1.06-1.06z" clip-rule="evenodd"/>',"chevron-left":'<path fill="currentColor" fill-rule="evenodd" d="m10.06 12 5.47-5.47-1.06-1.06L7.94 12l6.53 6.53 1.06-1.06z" clip-rule="evenodd"/>',"chevron-right":'<path fill="currentColor" fill-rule="evenodd" d="M9.53 5.47 16.06 12l-6.53 6.53-1.06-1.06L13.94 12 8.47 6.53z" clip-rule="evenodd"/>',calendar:'<path fill="currentColor" fill-rule="evenodd" d="M16.25 8V2h1.5v6zM6.25 8V2h1.5v6zM21 11.75H3v-1.5h18z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75a.25.25 0 0 0-.25.25v14c0 .138.112.25.25.25h16a.25.25 0 0 0 .25-.25V6a.25.25 0 0 0-.25-.25zM2.25 6c0-.966.784-1.75 1.75-1.75h16c.966 0 1.75.784 1.75 1.75v14A1.75 1.75 0 0 1 20 21.75H4A1.75 1.75 0 0 1 2.25 20z" clip-rule="evenodd"/>',clock:'<path fill="currentColor" fill-rule="evenodd" d="M12.75 11.25V6h-1.5v6.75H16v-1.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12" clip-rule="evenodd"/>',bulb:'<path fill="currentColor" d="M15.5 17.5H8v-.75s-.02-1.79-1.06-3.21l-.29-.39C5.88 12.12 5 10.95 5 8.93 5 5.11 8.03 2 11.75 2s6.75 3.11 6.75 6.93c0 2-.87 3.17-1.65 4.2l-.29.39c-1.05 1.45-1.06 3.21-1.06 3.23zM9.44 16h4.62c.11-.81.42-2.16 1.29-3.36l.31-.41c.69-.93 1.35-1.8 1.35-3.31 0-2.99-2.36-5.43-5.25-5.43S6.5 5.93 6.5 8.93c0 1.52.66 2.4 1.35 3.32l.31.41c.86 1.19 1.17 2.53 1.28 3.34M15.75 20h-8v1.5h8z"/>',"circle-checked":'<path fill="currentColor" fill-rule="evenodd" d="m10.32 14.27 6.15-6.134 1.06 1.062-7.22 7.2L6.467 12.5l1.068-1.054z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1.25 12C1.25 6.086 6.086 1.25 12 1.25S22.75 6.086 22.75 12 17.914 22.75 12 22.75 1.25 17.914 1.25 12M12 2.75c-5.086 0-9.25 4.164-9.25 9.25s4.164 9.25 9.25 9.25 9.25-4.164 9.25-9.25S17.086 2.75 12 2.75" clip-rule="evenodd"/>',"cloud-close":'<path fill="currentColor" fill-rule="evenodd" d="M5.23 9.323A7.75 7.75 0 0 1 12.5 4.25c3.782 0 6.923 2.71 7.606 6.291A4.74 4.74 0 0 1 23.25 15a4.75 4.75 0 0 1-4.75 4.75H6A5.25 5.25 0 0 1 .75 14.5c0-2.64 1.95-4.805 4.48-5.177M12.5 5.75a6.25 6.25 0 0 0-5.993 4.483l-.15.512-.534.025A3.74 3.74 0 0 0 2.25 14.5 3.75 3.75 0 0 0 6 18.25h12.5a3.243 3.243 0 0 0 .763-6.398l-.504-.122-.064-.514A6.25 6.25 0 0 0 12.5 5.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m14.47 15.53-5-5 1.06-1.06 5 5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m9.47 14.47 5-5 1.06 1.06-5 5z" clip-rule="evenodd"/>',close:'<path fill="currentColor" fill-rule="evenodd" d="m5.47 17.47 12-12 1.06 1.06-12 12z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m6.53 5.47 12 12-1.06 1.06-12-12z" clip-rule="evenodd"/>',done:'<path fill="currentColor" fill-rule="evenodd" d="M9.476 15.936 18.97 6.47l1.06 1.062L9.468 18.064l-5.502-5.58 1.068-1.053z" clip-rule="evenodd"/>',"error-filled":'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5M8.47 9.53l1.06-1.06L12 10.94l2.47-2.47 1.06 1.06L13.06 12l2.47 2.47-1.06 1.06L12 13.06l-2.47 2.47-1.06-1.06L10.94 12z" clip-rule="evenodd"/>',edit:'<path fill="currentColor" fill-rule="evenodd" d="M15.506 3.322a3.655 3.655 0 0 1 5.172 0 3.655 3.655 0 0 1 0 5.172L7.466 21.75H2.25v-5.215zm2.586.428c-.572 0-1.121.227-1.525.632l-.002.001L3.75 17.157v3.093h3.093L19.618 7.434a2.16 2.16 0 0 0-1.526-3.684" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M17.7 10.453 13.548 6.3l1.06-1.06 4.154 4.154z" clip-rule="evenodd"/>',eyedropper:'<path fill="currentColor" d="M17.889 11.615a.25.25 0 0 0 0-.353l-5.657-5.657a.25.25 0 0 0-.354 0l-1.414 1.414a.25.25 0 0 0 0 .354l5.657 5.656a.25.25 0 0 0 .354 0zm-.354 2.475a1.75 1.75 0 0 1-2.475 0L9.404 8.433a1.75 1.75 0 0 1 0-2.475l1.414-1.414a1.75 1.75 0 0 1 2.475 0l5.657 5.657a1.75 1.75 0 0 1 0 2.475z"/><path fill="currentColor" d="m15.951 12.86-7.077 7.076-.262.03-1.009.11-.453.454a2.85 2.85 0 0 1-4.03-4.03l.42-.42v-1.41l7.11-7.11zM5.04 15.291v1.41l-.86.86a1.35 1.35 0 0 0 1.91 1.909l.826-.826.262-.03 1.007-.111 5.644-5.644-3.18-3.178zM15.36 2.84a2.754 2.754 0 0 1 3.89 0l1.41 1.41a2.754 2.754 0 0 1 0 3.89l-2.94 2.941-5.3-5.3zm2.83 1.06a1.254 1.254 0 0 0-1.77 0l-1.88 1.88 3.18 3.18 1.88-1.88a1.255 1.255 0 0 0 0-1.77z"/><path fill="currentColor" d="m12.743 14.25-.006 1.5-8.46-.03.006-1.5z"/>',gallery:'<path fill="currentColor" d="M7.5 11c.8 0 1.5-.7 1.5-1.5S8.3 8 7.5 8 6 8.7 6 9.5 6.7 11 7.5 11"/><path fill="currentColor" fill-rule="evenodd" d="m16.698 9.015 5.787 4.913-.97 1.144-4.813-4.087L5.487 20.57l-.974-1.14z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 4.75c-.69 0-1.25.56-1.25 1.25v12c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V6c0-.69-.56-1.25-1.25-1.25zM1.25 6A2.75 2.75 0 0 1 4 3.25h16A2.75 2.75 0 0 1 22.75 6v12A2.75 2.75 0 0 1 20 20.75H4A2.75 2.75 0 0 1 1.25 18z" clip-rule="evenodd"/>',hide:'<path fill="currentColor" fill-rule="evenodd" d="M8.343 11.2c.056-.27.147-.581.284-.842l1.328.696c-.047.09-.102.252-.145.454-.041.199-.06.381-.06.492A2.27 2.27 0 0 0 12 14.25c.284 0 .685-.056.983-.2l.65 1.352c-.57.274-1.217.348-1.633.348-2.056 0-3.75-1.694-3.75-3.75 0-.238.035-.527.093-.8" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.833 12c.477-.936 1.58-2.68 3.626-3.843l-.742-1.304c-2.695 1.534-3.975 3.906-4.4 4.835L1.176 12l.143.312c.685 1.5 3.5 6.438 10.682 6.438 1.62 0 3.026-.253 4.242-.667l-.484-1.42c-1.054.36-2.297.587-3.758.587-5.874 0-8.377-3.707-9.167-5.25M12 6.75c-.673 0-1.6.084-2.202.227l-.346-1.46c.746-.177 1.797-.267 2.548-.267 7.182 0 9.997 4.939 10.682 6.438l.143.312-.143.312a11.1 11.1 0 0 1-3.22 4.037l-.923-1.184A9.7 9.7 0 0 0 21.166 12c-.79-1.544-3.292-5.25-9.166-5.25" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m19.763 22.237-18-18 1.06-1.06 18 18z" clip-rule="evenodd"/>',"info-filled":'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5m-.75 5h1.5v1.5h-1.5zm0 3h1.5v6.5h-1.5z" clip-rule="evenodd"/>',lock:'<path fill="currentColor" fill-rule="evenodd" d="M5 11.75a.25.25 0 0 0-.25.25v8c0 .138.112.25.25.25h14a.25.25 0 0 0 .25-.25v-8a.25.25 0 0 0-.25-.25zM3.25 12c0-.966.784-1.75 1.75-1.75h14c.966 0 1.75.784 1.75 1.75v8A1.75 1.75 0 0 1 19 21.75H5A1.75 1.75 0 0 1 3.25 20z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75A3.26 3.26 0 0 0 8.75 7v4h-1.5V7A4.76 4.76 0 0 1 12 2.25 4.76 4.76 0 0 1 16.75 7v4h-1.5V7A3.26 3.26 0 0 0 12 3.75" clip-rule="evenodd"/>',mail:'<path fill="currentColor" fill-rule="evenodd" d="m1.665 8.67.67-1.34L12 12.161l9.665-4.833.67 1.342L12 13.839z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M4 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h16c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25zM1.25 7A2.75 2.75 0 0 1 4 4.25h16A2.75 2.75 0 0 1 22.75 7v10A2.75 2.75 0 0 1 20 19.75H4A2.75 2.75 0 0 1 1.25 17z" clip-rule="evenodd"/>',minus:'<path fill="currentColor" fill-rule="evenodd" d="M6 10.75h12v1.5H6z" clip-rule="evenodd"/>',moon:'<path fill="currentColor" fill-rule="evenodd" d="M11.67 2.763a.75.75 0 0 1-.11.835c-.191.216-.414.406-.59.555l-.126.108a2.6 2.6 0 0 0-.512.568C10.043 5.28 9.75 6.113 9.75 8A6.207 6.207 0 0 0 16 14.25c1.706 0 3.214-.624 4.37-1.78a.75.75 0 0 1 1.277.596c-.433 4.878-4.25 8.684-9.647 8.684-5.435 0-9.75-4.757-9.75-9.75 0-4.976 3.784-9.211 8.684-9.647a.75.75 0 0 1 .736.41m-2.8 1.61C5.872 5.57 3.75 8.568 3.75 12c0 4.208 3.685 8.25 8.25 8.25 3.885 0 6.76-2.276 7.782-5.466-1.128.634-2.412.966-3.782.966A7.707 7.707 0 0 1 8.25 8c0-1.736.228-2.843.62-3.627" clip-rule="evenodd"/>',"more-vertical":'<path fill="currentColor" d="M11.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M11.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M11.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>',pause:'<path fill="currentColor" fill-rule="evenodd" d="M8 6.75h2.5v10.5H8zm5.5 0H16v10.5h-2.5z" clip-rule="evenodd"/>',play:'<path fill="currentColor" fill-rule="evenodd" d="M9.5 7.21v9.58l7.5-4.79z" clip-rule="evenodd"/>',plus:'<path fill="currentColor" fill-rule="evenodd" d="M11.25 11.25v-7h1.5v7h7v1.5h-7v7h-1.5v-7h-7v-1.5z" clip-rule="evenodd"/>',copy:'<path fill="currentColor" fill-rule="evenodd" d="M8 3.75a.25.25 0 0 0-.25.25v12c0 .138.112.25.25.25h12a.25.25 0 0 0 .25-.25V4a.25.25 0 0 0-.25-.25zM6.25 4c0-.966.784-1.75 1.75-1.75h12c.966 0 1.75.784 1.75 1.75v12A1.75 1.75 0 0 1 20 17.75H8A1.75 1.75 0 0 1 6.25 16z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3.75 9v9A2.25 2.25 0 0 0 6 20.25h9v1.5H6A3.75 3.75 0 0 1 2.25 18V9z" clip-rule="evenodd"/>',code:'<path fill="currentColor" fill-rule="evenodd" d="m6.47 7.47 1.06 1.06L4.06 12l3.47 3.47-1.06 1.06L1.94 12zM19.94 12l-3.47-3.47 1.06-1.06L22.06 12l-4.53 4.53-1.06-1.06zM8.31 18.705l6-14 1.38.59-6 14z" clip-rule="evenodd"/>',write:'<path fill="currentColor" fill-rule="evenodd" d="M3.056 6.056A2.75 2.75 0 0 1 5 5.25h3v1.5H5A1.25 1.25 0 0 0 3.75 8v11A1.25 1.25 0 0 0 5 20.25h11A1.25 1.25 0 0 0 17.25 19v-3h1.5v3A2.75 2.75 0 0 1 16 21.75H5A2.75 2.75 0 0 1 2.25 19V8c0-.73.29-1.429.806-1.944" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M16.885 3.084a2.85 2.85 0 0 1 4.03 4.03l-9.604 9.636H7.25v-4.061zm2.015.666a1.35 1.35 0 0 0-.955.395L8.75 13.311v1.939h1.939l9.166-9.195A1.35 1.35 0 0 0 18.9 3.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m18.47 8.53-3-3 1.06-1.06 3 3z" clip-rule="evenodd"/>',upload:'<path fill="currentColor" d="m12 2.94 5.53 5.53-1.06 1.06-3.72-3.72V17h-1.5V5.81L7.53 9.53 6.47 8.47z"/><path fill="currentColor" d="M2.25 15h1.5v4.25h16.5V15h1.5v5.75H2.25z"/>',video:'<path fill="currentColor" fill-rule="evenodd" d="M21.37 6.347a.75.75 0 0 1 .38.653v10a.75.75 0 0 1-1.136.643l-5-3a.75.75 0 1 1 .772-1.286l3.864 2.318v-7.35l-3.864 2.318a.75.75 0 1 1-.772-1.286l5-3a.75.75 0 0 1 .755-.01" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h13a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75zm1.5.75v10.5h11.5V6.75z" clip-rule="evenodd"/>',"volume-up":'<path fill="currentColor" fill-rule="evenodd" d="M12.325 4.324A.75.75 0 0 1 12.75 5v14a.75.75 0 0 1-1.219.586L6.738 15.75H3a.75.75 0 0 1-.75-.75V9A.75.75 0 0 1 3 8.25h3.737l4.794-3.836a.75.75 0 0 1 .794-.09M11.25 6.56 7.469 9.586A.75.75 0 0 1 7 9.75H3.75v4.5H7a.75.75 0 0 1 .469.164l3.781 3.025zM17.57 4.37a.75.75 0 0 1 1.06 0c2.046 2.046 3.12 4.739 3.12 7.63 0 2.908-1.185 5.589-3.105 7.616a.75.75 0 1 1-1.09-1.032c1.68-1.773 2.695-4.092 2.695-6.584 0-2.508-.926-4.815-2.68-6.57a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M14.97 7.97a.75.75 0 0 1 1.06 0c1.025 1.025 1.72 2.51 1.72 4.03 0 1.485-.571 2.998-1.748 4.058a.75.75 0 1 1-1.004-1.115c.823-.741 1.252-1.828 1.252-2.943 0-1.08-.505-2.195-1.28-2.97a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>',"mute-filled":'<path fill="currentColor" d="M12.3 4.1h.1c-.3-.2-.8 0-1.1.1L6.6 8H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h3.6l4.7 3.8c.2.1.4.2.6.2h.4c.3-.2.6-.5.6-.9V5q0-.6-.6-.9M21.9 9.7l-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3z"/>',package:'<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 1.14 21.65 6.56v9.78L12 21.76 2.35 16.44V6.56zm-8.15 6.3v8.12L12 20.04l7.8-4.48V7.44L12 2.86z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21.27 7.75 12.37 12.75l-.74-1.31 8.9-5z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M11.25 21v-8.9h1.5V21z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M3.47 6.35 12.37 11.45l-.75 1.3-8.9-5.1z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M7.23 8.85 16.13 3.85l.74 1.3-8.9 5z"/>',"delivery-filled":'<path fill="currentColor" d="M22.68 11.13 21.45 8.66A2.25 2.25 0 0 0 18.76 7H18a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v9c0 .87.39 1.67 1.02 2.23.14 1.54 1.43 2.77 3 2.77 1.3 0 2.4-.84 2.82-2h6.37c.42 1.16 1.52 2 2.82 2 1.65 0 3-1.35 3-3h1c1.1 0 2-.9 2-2v-3.53c0-.46-.11-.92-.32-1.34M5 19c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m12 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m4-3h-1.78c-.33-.37-.75-.65-1.22-.82V9h.76c.38 0 .73.21.9.55l1.24 2.47c.07.14.1.3.1.47z"/>',repeat:'<path fill="currentColor" fill-rule="evenodd" d="m18.94 6-3.47-3.47 1.06-1.06L21.06 6l-4.53 4.53-1.06-1.06z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M5.532 7.433c.587-.488 1.3-.783 1.968-.783h12.4v-1.5H7.5c-1.116 0-2.183.49-2.988 1.18l-.044.038-.037.044C3.757 7.197 3.25 8.164 3.25 9.3V11h1.5V9.3c0-.648.279-1.267.782-1.867M5.06 18l3.47-3.47-1.06-1.06L2.94 18l4.53 4.53 1.06-1.06z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M19.25 14.7V13h1.5v1.7c0 1.136-.508 2.103-1.18 2.888l-.038.044-.044.037c-.805.69-1.872 1.181-2.988 1.181H4v-1.5h12.5c.668 0 1.381-.295 1.968-.783.503-.6.782-1.22.782-1.867" clip-rule="evenodd"/>',settings:'<path fill="currentColor" fill-rule="evenodd" d="M8.25 12a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 9.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M9.757 1.888a.75.75 0 0 1 .742-.639h3a.75.75 0 0 1 .742.639l.425 2.836q.303.11.594.244l2.304-1.703a.75.75 0 0 1 .976.073l2.121 2.12a.75.75 0 0 1 .073.977l-1.702 2.304q.134.291.244.594l2.835.425a.75.75 0 0 1 .639.742v3a.75.75 0 0 1-.639.742l-2.836.425q-.11.303-.243.594l1.702 2.304a.75.75 0 0 1-.073.976l-2.12 2.121a.75.75 0 0 1-.977.073l-2.304-1.702q-.291.134-.594.244l-.425 2.835a.75.75 0 0 1-.742.639h-3a.75.75 0 0 1-.742-.639l-.425-2.836a8 8 0 0 1-.594-.244l-2.304 1.703a.75.75 0 0 1-.976-.073l-2.121-2.12a.75.75 0 0 1-.073-.977l1.702-2.304a8 8 0 0 1-.244-.594l-2.835-.425a.75.75 0 0 1-.639-.742v-3a.75.75 0 0 1 .639-.742l2.836-.425q.11-.303.244-.594L3.264 6.435a.75.75 0 0 1 .073-.976l2.12-2.121a.75.75 0 0 1 .977-.073l2.304 1.702q.291-.134.594-.244zm1.388.861-.398 2.653a.75.75 0 0 1-.53.608 6 6 0 0 0-1.197.493.75.75 0 0 1-.804-.056L6.062 4.855 4.854 6.063l1.592 2.154a.75.75 0 0 1 .056.804 6.2 6.2 0 0 0-.493 1.2.75.75 0 0 1-.608.527l-2.653.398v1.708l2.653.398a.75.75 0 0 1 .608.53q.188.634.493 1.197a.75.75 0 0 1-.056.804l-1.592 2.154 1.208 1.208 2.154-1.592a.75.75 0 0 1 .804-.056q.562.304 1.2.493a.75.75 0 0 1 .527.608l.398 2.653h1.708l.398-2.653a.75.75 0 0 1 .53-.608q.634-.188 1.197-.493a.75.75 0 0 1 .804.056l2.154 1.592 1.208-1.208-1.592-2.154a.75.75 0 0 1-.056-.804q.304-.562.493-1.2a.75.75 0 0 1 .608-.527l2.653-.398v-1.708l-2.653-.398a.75.75 0 0 1-.608-.53 6 6 0 0 0-.493-1.197.75.75 0 0 1 .056-.804l1.592-2.154-1.208-1.208-2.154 1.592a.75.75 0 0 1-.804.056 6.2 6.2 0 0 0-1.2-.493.75.75 0 0 1-.527-.608l-.398-2.653z" clip-rule="evenodd"/>',refresh:'<path fill="currentColor" fill-rule="evenodd" d="M20.25 8.25V3h1.5v6.75H16v-1.5z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M12 3.75A8.25 8.25 0 0 0 3.75 12 8.25 8.25 0 0 0 12 20.25 8.25 8.25 0 0 0 20.25 12h1.5A9.75 9.75 0 0 1 12 21.75 9.75 9.75 0 0 1 2.25 12 9.75 9.75 0 0 1 12 2.25a9.75 9.75 0 0 1 8.628 5.205l.094.106.324.361.011.012.462.517a3 3 0 0 1 .098.123c.007.01.03.044.054.09l-1.342.671a.586.586 0 0 0 .068.11l.009.012-.021-.025q-.037-.043-.107-.12l-.335-.373-.013-.015-.494-.554-.05-.065a1 1 0 0 1-.05-.084l-.002-.004A8.25 8.25 0 0 0 12 3.75" clip-rule="evenodd"/>',expand:'<path fill="currentColor" fill-rule="evenodd" d="M17.25 6.75H12v-1.5h6.75V12h-1.5zM6.75 17.25V12h-1.5v6.75H12v-1.5z" clip-rule="evenodd"/>',shrink:'<path fill="currentColor" fill-rule="evenodd" d="M9.25 14.75H4v-1.5h6.75V20h-1.5zM13.75 10.25V5h-1.5v6.75H19v-1.5z" clip-rule="evenodd"/>',"grip-vertical":'<path fill="currentColor" d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>',"grip-horizontal":'<path fill="currentColor" d="M8 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M13.5 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M19 9.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M8 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M13.5 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0M19 14.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>',search:'<path fill="currentColor" fill-rule="evenodd" d="M2.25 11c0-4.814 3.936-8.75 8.75-8.75s8.75 3.936 8.75 8.75-3.936 8.75-8.75 8.75S2.25 15.814 2.25 11M11 3.75c-3.986 0-7.25 3.264-7.25 7.25s3.264 7.25 7.25 7.25 7.25-3.264 7.25-7.25S14.986 3.75 11 3.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="m17.13 16.07 4.4 4.4-1.06 1.06-4.4-4.4z" clip-rule="evenodd"/>',"share-alt":'<path fill="currentColor" fill-rule="evenodd" d="M13.69 3.317a.75.75 0 0 1 .804.119l8 7a.75.75 0 0 1 0 1.128l-8 7A.75.75 0 0 1 13.25 18v-3.24c-1.925.051-3.579.315-5.062.932-1.659.692-3.157 1.85-4.588 3.758A.75.75 0 0 1 2.25 19c0-4.145 1.147-6.888 3.291-8.698 1.96-1.655 4.655-2.437 7.709-2.943V4a.75.75 0 0 1 .44-.683m1.06 2.336V8a.75.75 0 0 1-.638.742c-3.283.497-5.85 1.225-7.603 2.706-1.359 1.147-2.303 2.812-2.631 5.39 1.153-1.15 2.386-1.969 3.734-2.53 1.928-.804 4.04-1.058 6.388-1.058a.75.75 0 0 1 .75.75v2.347L20.861 11z" clip-rule="evenodd"/>',show:'<path fill="currentColor" fill-rule="evenodd" d="M8.25 12c0-2.055 1.695-3.75 3.75-3.75s3.75 1.694 3.75 3.75-1.694 3.75-3.75 3.75S8.25 14.056 8.25 12M12 9.75A2.27 2.27 0 0 0 9.75 12 2.27 2.27 0 0 0 12 14.25 2.27 2.27 0 0 0 14.25 12 2.27 2.27 0 0 0 12 9.75" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.833 12c.791 1.543 3.297 5.25 9.167 5.25 5.872 0 8.374-3.704 9.167-5.25-.791-1.543-3.297-5.25-9.167-5.25-5.871 0-8.374 3.704-9.167 5.25m-1.515-.312C2.006 10.183 4.823 5.25 12 5.25s9.997 4.938 10.682 6.438l.143.312-.143.312C21.994 13.817 19.177 18.75 12 18.75s-9.997-4.938-10.682-6.438L1.175 12z" clip-rule="evenodd"/>',sparkle:'<path fill="currentColor" fill-rule="evenodd" d="M12 2.25 14.08 8 19.75 10l-5.67 2L12 17.75 9.92 12 4.25 10l5.67-2zm0 4.4-.9 2.49-2.45.86 2.45.86.9 2.49.9-2.49 2.45-.86-2.45-.86zM18.5 15.25l.88 2.37 2.37.88-2.37.88-.88 2.37-.88-2.37-2.37-.88 2.37-.88z" clip-rule="evenodd"/>',sun:'<path fill="currentColor" fill-rule="evenodd" d="M12 7.75a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5M6.25 12a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M11.25 5V2h1.5v3zm0 17v-3h1.5v3zm5.12-15.43 2.2-2.2 1.06 1.06-2.2 2.2zm-12.48 12.48 2.2-2.2 1.06 1.06-2.2 2.2zM19 11.25h3v1.5h-3zM2 11.25h3v1.5H2zm14.43 5.12 2.2 2.2-1.06 1.06-2.2-2.2zM4.37 6.57 6.57 4.37l1.06 1.06-2.2 2.2z" clip-rule="evenodd"/>',trash:'<path fill="currentColor" fill-rule="evenodd" d="M6.75 6v13c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V6h1.5v13A2.75 2.75 0 0 1 16 21.75H8A2.75 2.75 0 0 1 5.25 19V6z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M21 6.75H3v-1.5h18z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M7.25 4c0-.966.784-1.75 1.75-1.75h6c.966 0 1.75.784 1.75 1.75v2h-1.5V4a.25.25 0 0 0-.25-.25H9a.25.25 0 0 0-.25.25v2h-1.5zM9.25 16V9h1.5v7zM13.25 16V9h1.5v7z" clip-rule="evenodd"/>',user:'<path fill="currentColor" fill-rule="evenodd" d="M8.652 3.687C9.52 2.708 10.833 2.25 12 2.25c1.198 0 2.38.478 3.313 1.402.979.868 1.437 2.181 1.437 3.348 0 1.198-.477 2.38-1.402 3.313-.868.979-2.181 1.437-3.348 1.437-1.198 0-2.38-.477-3.313-1.402C7.715 9.488 7.25 8.277 7.25 7c0-1.198.478-2.38 1.402-3.313M12 3.75c-.826 0-1.703.336-2.236.944l-.016.019-.018.017c-.664.664-.98 1.475-.98 2.27 0 .915.329 1.697.944 2.236l.019.016.017.018c.664.664 1.475.98 2.27.98.826 0 1.703-.336 2.236-.944l.016-.019.018-.017c.664-.664.98-1.475.98-2.27 0-.826-.336-1.703-.944-2.236l-.019-.016-.017-.018c-.664-.664-1.475-.98-2.27-.98M8 15.75c-.795 0-1.606.317-2.27.98l-.017.018-.02.016c-.614.539-.943 1.321-.943 2.236v3h-1.5v-3c0-1.277.465-2.487 1.437-3.348.934-.925 2.115-1.402 3.313-1.402h8c1.277 0 2.487.465 3.348 1.437.925.934 1.402 2.115 1.402 3.313v3h-1.5v-3c0-.795-.317-1.606-.98-2.27l-.018-.017-.016-.02c-.539-.614-1.321-.943-2.236-.943z" clip-rule="evenodd"/>',"warning-filled":'<path fill="currentColor" fill-rule="evenodd" d="M10.34 3.78a1.9 1.9 0 0 1 3.32 0l8.06 14.5A1.9 1.9 0 0 1 20.06 21H3.94a1.9 1.9 0 0 1-1.66-2.72zm.91 5.47h1.5v5.5h-1.5zm0 7h1.5v1.5h-1.5z" clip-rule="evenodd"/>'};function isDbIconName(e){return Object.prototype.hasOwnProperty.call(l,e)}function getDbComponentIconSize(l){return"s"===l?12:"l"===l?20:16}function createDbIcon(e,r=16){const d=document.createElement("template");return d.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true" focusable="false" data-designbase-icon="${e}">${l[e]}</svg>`,d.content.firstElementChild}export{createDbIcon,getDbComponentIconSize,isDbIconName};

package/dist/esm/components/db-indicator.d.ts

@@ -17,6 +17,10 @@ declare class DbIndicator extends HTMLElement {
     set size(value: string);
     get direction(): string;
     set direction(value: string);
+    get numberBackground(): boolean;
+    set numberBackground(value: boolean);
+    get playback(): boolean;
+    set playback(value: boolean);
     get clickable(): boolean;
     set clickable(value: boolean);
     get timer(): boolean;
@@ -35,6 +39,14 @@ declare class DbIndicator extends HTMLElement {
     private renderStep;
     private renderDots;
     private renderPlaybackButton;
+    private renderNumbers;
+    private renderSlide;
+    private renderScaleFill;
+    private renderLine;
+    private renderDotLine;
+    private fillRatio;
+    private renderFill;
+    private renderContent;
     private render;
 }
 declare global {

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["dots","numbers","line","dot-line","slide","combined"],i=["s","m","l"],s=["horizontal","vertical"];class DbIndicator extends HTMLElement{constructor(){super(...arguments),this.timerFrame=0,this.progress=0,this.pausedProgress=0,this.activeStep=0,this.isPlayingInternal=!1}static get observedAttributes(){return["total","current","default-current","indicator-type","type","size","direction","clickable","timer","timer-duration","auto-roll","playing","default-playing","playback-disabled"]}get total(){return Math.max(1,Number(this.getAttribute("total")||1))}set total(t){this.setAttribute("total",String(t))}normalizeStep(t){const e=this.total;return(t%e+e)%e}get isCurrentControlled(){return this.hasAttribute("current")}get isPlayingControlled(){return this.hasAttribute("playing")}get resolvedCurrent(){return this.isCurrentControlled?this.normalizeStep(Number(this.getAttribute("current")||0)):this.activeStep}get resolvedPlaying(){return!!this.isPlayingControlled||this.isPlayingInternal}get indicatorType(){const t=this.getAttribute("indicator-type")||this.getAttribute("type")||"dots";return e.includes(t)?t:"dots"}get size(){const t=this.getAttribute("size")||"m";return i.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get direction(){const t=this.getAttribute("direction")||"horizontal";return s.includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t)}get clickable(){return this.hasAttribute("clickable")}set clickable(t){this.toggleAttribute("clickable",Boolean(t))}get timer(){return this.hasAttribute("timer")}set timer(t){this.toggleAttribute("timer",Boolean(t))}connectedCallback(){this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.isPlayingInternal=this.hasAttribute("default-playing"),this.render(),this.startTimer()}disconnectedCallback(){cancelAnimationFrame(this.timerFrame)}attributeChangedCallback(t){if(this.isConnected){if("current"===t&&this.isCurrentControlled)return this.resetProgress(),this.render(),void this.startTimer();if("playing"===t)return this.resolvedPlaying||(this.pausedProgress=this.progress),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("default-current"===t&&!this.isCurrentControlled)return this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.resetProgress(),this.render(),void this.startTimer();if("default-playing"===t&&!this.isPlayingControlled)return this.isPlayingInternal=this.hasAttribute("default-playing"),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("timer"===t||"timer-duration"===t||"auto-roll"===t)return this.resetProgress(),this.render(),void this.startTimer();this.render(),this.startTimer()}}resetProgress(){this.pausedProgress=0,this.progress=0}emitChange(t){const e={current:t,index:t};this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-current-change",{detail:e,bubbles:!0,composed:!0}))}goToStep(t){const e=this.normalizeStep(t);this.isCurrentControlled||(this.activeStep=e,this.resetProgress(),this.render(),this.startTimer()),this.emitChange(e)}startTimer(){if(cancelAnimationFrame(this.timerFrame),!this.timer||!this.resolvedPlaying||!this.isConnected)return;const t=Number(this.getAttribute("timer-duration")||3e3),e=Date.now()-this.pausedProgress*t,tick=()=>{const i=Date.now()-e,s=Math.min(i/t,1);this.progress=s,this.pausedProgress=s,this.updateTimerVisuals(),s<1?this.timerFrame=requestAnimationFrame(tick):(this.dispatchEvent(new CustomEvent("db-timer-complete",{detail:{step:this.resolvedCurrent},bubbles:!0,composed:!0})),this.resetProgress(),"false"===this.getAttribute("auto-roll")?this.render():this.goToStep(this.resolvedCurrent+1))};this.timerFrame=requestAnimationFrame(tick)}updateTimerVisuals(){this.querySelectorAll(".designbase-wc-indicator__line-fill, .designbase-wc-indicator__track-fill").forEach(t=>{t.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`});const t=this.querySelector(".designbase-wc-indicator__dot-ring-progress");if(t){const e=15.9155,i=2*Math.PI*e;t.setAttribute("stroke-dashoffset",String(i*(1-this.progress)))}}syncRootClasses(){const t=this.indicatorType;this.className=["designbase-wc-indicator",`designbase-wc-indicator--${t}`,"combined"===t&&"designbase-wc-indicator--dots",`designbase-wc-indicator--${this.size}`,`designbase-wc-indicator--${this.direction}`,this.clickable&&"designbase-wc-indicator--clickable",this.timer&&!this.resolvedPlaying&&"designbase-wc-indicator--paused"].filter(Boolean).join(" ")}syncPlaybackButton(){const e=this.querySelector(".designbase-wc-indicator__playback-button");e&&(e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.replaceChildren(t(this.resolvedPlaying?"pause":"play")))}renderDotRing(){const t=15.9155,e=2*Math.PI*t,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("class","designbase-wc-indicator__dot-ring"),i.setAttribute("viewBox","0 0 36 36"),i.setAttribute("aria-hidden","true");const s=document.createElementNS("http://www.w3.org/2000/svg","circle");s.setAttribute("class","designbase-wc-indicator__dot-ring-bg"),s.setAttribute("cx","18"),s.setAttribute("cy","18"),s.setAttribute("r",String(t)),s.setAttribute("fill","none");const r=document.createElementNS("http://www.w3.org/2000/svg","circle");return r.setAttribute("class","designbase-wc-indicator__dot-ring-progress"),r.setAttribute("cx","18"),r.setAttribute("cy","18"),r.setAttribute("r",String(t)),r.setAttribute("fill","none"),r.setAttribute("stroke-dasharray",String(e)),r.setAttribute("stroke-dashoffset",String(e*(1-this.progress))),r.setAttribute("stroke-linecap","round"),i.append(s,r),i}renderStep(t,e,i){const s=t===this.resolvedCurrent,r=this.clickable?document.createElement("button"):document.createElement("span");return r.className=e,this.clickable&&r instanceof HTMLButtonElement?(r.type="button",r.setAttribute("aria-label",`${t+1}단계`),s&&r.setAttribute("aria-current","step"),r.addEventListener("click",()=>{this.goToStep(t),this.dispatchEvent(new CustomEvent("db-step-click",{detail:{current:t,index:t},bubbles:!0,composed:!0}))})):s||r.setAttribute("aria-hidden","true"),i&&r.append(i),r}renderDots(){const t=document.createDocumentFragment(),e=this.indicatorType,i="combined"===e?"dots":e,s=this.timer,r=this.resolvedPlaying,n=this.resolvedCurrent;this.direction;const a=this.total;if("dots"!==i)return t;for(let e=0;e<a;e+=1){const i=e===n,a=s&&i&&r,o=a||s&&i&&!r&&this.progress>0,c=document.createElement("span");c.className="designbase-wc-indicator__dot-core";const d=document.createDocumentFragment();d.append(c),s&&i&&(a||this.progress>0)&&d.append(this.renderDotRing()),t.append(this.renderStep(e,["designbase-wc-indicator__dot",i&&"designbase-wc-indicator__dot--active",o&&"designbase-wc-indicator__dot--with-ring"].filter(Boolean).join(" "),d))}return t}renderPlaybackButton(){const e=document.createElement("button");return e.type="button",e.className="designbase-wc-indicator__playback-button",e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.append(t(this.resolvedPlaying?"pause":"play")),e.addEventListener("click",()=>{if(this.hasAttribute("playback-disabled"))return;const t=!this.resolvedPlaying;this.isPlayingControlled?t?this.setAttribute("playing",""):(this.removeAttribute("playing"),this.pausedProgress=this.progress):(this.isPlayingInternal=t,t||(this.pausedProgress=this.progress)),this.syncRootClasses(),this.syncPlaybackButton(),this.startTimer(),this.dispatchEvent(new CustomEvent("db-playing-change",{detail:{playing:t},bubbles:!0,composed:!0}))}),e}render(){const t=this.indicatorType,e="combined"===t?"dots":t,i=this.direction,s=this.resolvedCurrent,r=this.total,n=this.timer,a=this.resolvedPlaying;if(this.syncRootClasses(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","1"),this.setAttribute("aria-valuemax",String(r)),this.setAttribute("aria-valuenow",String(s+1)),this.replaceChildren(),"numbers"===e){const t=document.createElement("span");t.className="designbase-wc-indicator__current",t.textContent=String(s+1);const e=document.createElement("span");e.className="designbase-wc-indicator__separator",e.textContent="/";const i=document.createElement("span");return i.className="designbase-wc-indicator__total",i.textContent=String(r),void this.append(t,e,i)}if("slide"===e){const t=document.createElement("div");t.className="designbase-wc-indicator__track";const e=document.createElement("div");e.className="designbase-wc-indicator__track-thumb";const o=100/r;if("vertical"===i?(e.style.height=`${o}%`,e.style.transform=`translateY(${100*s}%)`):(e.style.width=`${o}%`,e.style.transform=`translateX(${100*s}%)`),n&&a){const t=document.createElement("div");t.className="designbase-wc-indicator__track-fill",t.style.transform="vertical"===i?`scaleY(${this.progress})`:`scaleX(${this.progress})`,e.append(t)}return t.append(e),void this.append(t)}if("line"===e){const t=document.createDocumentFragment();for(let e=0;e<r;e+=1){const r=e===s,o=n&&r&&a?(()=>{const t=document.createElement("span");return t.className="designbase-wc-indicator__line-fill",t.style.transform="vertical"===i?`scaleY(${this.progress})`:`scaleX(${this.progress})`,t})():void 0;t.append(this.renderStep(e,["designbase-wc-indicator__line-segment",r&&!n&&"designbase-wc-indicator__line-segment--active",r&&n&&"designbase-wc-indicator__line-segment--current"].filter(Boolean).join(" "),o))}return void this.append(t)}if("dot-line"===e){const t=document.createDocumentFragment();for(let e=0;e<r;e+=1){const i=e===s;t.append(this.renderStep(e,["designbase-wc-indicator__dot-line-item",i&&"designbase-wc-indicator__dot-line-item--active"].filter(Boolean).join(" ")))}return void this.append(t)}if("combined"===t){const t=document.createElement("div");return t.className="designbase-wc-indicator__steps",t.append(this.renderDots()),void this.append(t,this.renderPlaybackButton())}this.append(this.renderDots())}}customElements.get("db-indicator")||customElements.define("db-indicator",DbIndicator);export{DbIndicator};
+import{createDbIcon as t}from"./db-icons.js";const e=["dots","numbers","line","dot-line","slide","fill","combined"],i=["s","m","l"],s=["horizontal","vertical"];class DbIndicator extends HTMLElement{constructor(){super(...arguments),this.timerFrame=0,this.progress=0,this.pausedProgress=0,this.activeStep=0,this.isPlayingInternal=!1}static get observedAttributes(){return["total","current","default-current","indicator-type","type","size","direction","number-background","playback","clickable","timer","timer-duration","auto-roll","playing","default-playing","playback-disabled"]}get total(){return Math.max(1,Number(this.getAttribute("total")||1))}set total(t){this.setAttribute("total",String(t))}normalizeStep(t){const e=this.total;return(t%e+e)%e}get isCurrentControlled(){return this.hasAttribute("current")}get isPlayingControlled(){return this.hasAttribute("playing")}get resolvedCurrent(){return this.isCurrentControlled?this.normalizeStep(Number(this.getAttribute("current")||0)):this.activeStep}get resolvedPlaying(){return!!this.isPlayingControlled||this.isPlayingInternal}get indicatorType(){const t=this.getAttribute("indicator-type")||this.getAttribute("type")||"dots";return e.includes(t)?t:"dots"}get size(){const t=this.getAttribute("size")||"m";return i.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get direction(){const t=this.getAttribute("direction")||"horizontal";return s.includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t)}get numberBackground(){return this.hasAttribute("number-background")}set numberBackground(t){this.toggleAttribute("number-background",Boolean(t))}get playback(){return this.hasAttribute("playback")}set playback(t){this.toggleAttribute("playback",Boolean(t))}get clickable(){return this.hasAttribute("clickable")}set clickable(t){this.toggleAttribute("clickable",Boolean(t))}get timer(){return this.hasAttribute("timer")}set timer(t){this.toggleAttribute("timer",Boolean(t))}connectedCallback(){this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.isPlayingInternal=this.hasAttribute("default-playing"),this.render(),this.startTimer()}disconnectedCallback(){cancelAnimationFrame(this.timerFrame)}attributeChangedCallback(t){if(this.isConnected){if("current"===t&&this.isCurrentControlled)return this.resetProgress(),this.render(),void this.startTimer();if("playing"===t)return this.resolvedPlaying||(this.pausedProgress=this.progress),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("default-current"===t&&!this.isCurrentControlled)return this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.resetProgress(),this.render(),void this.startTimer();if("default-playing"===t&&!this.isPlayingControlled)return this.isPlayingInternal=this.hasAttribute("default-playing"),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("timer"===t||"timer-duration"===t||"auto-roll"===t)return this.resetProgress(),this.render(),void this.startTimer();this.render(),this.startTimer()}}resetProgress(){this.pausedProgress=0,this.progress=0}emitChange(t){const e={current:t,index:t};this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-current-change",{detail:e,bubbles:!0,composed:!0}))}goToStep(t){const e=this.normalizeStep(t);this.isCurrentControlled||(this.activeStep=e,this.resetProgress(),this.render(),this.startTimer()),this.emitChange(e)}startTimer(){if(cancelAnimationFrame(this.timerFrame),!this.timer||!this.resolvedPlaying||!this.isConnected)return;const t=Number(this.getAttribute("timer-duration")||3e3),e=Date.now()-this.pausedProgress*t,tick=()=>{const i=Date.now()-e,s=Math.min(i/t,1);this.progress=s,this.pausedProgress=s,this.updateTimerVisuals(),s<1?this.timerFrame=requestAnimationFrame(tick):(this.dispatchEvent(new CustomEvent("db-timer-complete",{detail:{step:this.resolvedCurrent},bubbles:!0,composed:!0})),this.resetProgress(),"false"===this.getAttribute("auto-roll")?this.render():this.goToStep(this.resolvedCurrent+1))};this.timerFrame=requestAnimationFrame(tick)}updateTimerVisuals(){this.querySelectorAll(".designbase-wc-indicator__line-fill, .designbase-wc-indicator__track-fill, .designbase-wc-indicator__dot-line-fill").forEach(t=>{t.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`});const t=this.querySelector(".designbase-wc-indicator__track-progress");if(t){const e=100*this.fillRatio()+"%";"vertical"===this.direction?t.style.height=e:t.style.width=e}const e=this.querySelector(".designbase-wc-indicator__dot-ring-progress");if(e){const t=15.9155,i=2*Math.PI*t;e.setAttribute("stroke-dashoffset",String(i*(1-this.progress)))}}syncRootClasses(){const t=this.indicatorType;this.className=["designbase-wc-indicator",`designbase-wc-indicator--${t}`,"combined"===t&&"designbase-wc-indicator--dots",`designbase-wc-indicator--${this.size}`,`designbase-wc-indicator--${this.direction}`,this.clickable&&"designbase-wc-indicator--clickable",this.timer&&!this.resolvedPlaying&&"designbase-wc-indicator--paused"].filter(Boolean).join(" ")}syncPlaybackButton(){const e=this.querySelector(".designbase-wc-indicator__playback-button");e&&(e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.replaceChildren(t(this.resolvedPlaying?"pause":"play")))}renderDotRing(){const t=15.9155,e=2*Math.PI*t,i=document.createElement("span");i.className="designbase-wc-indicator__dot-ring",i.setAttribute("aria-hidden","true");const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("class","designbase-wc-indicator__dot-ring-svg"),s.setAttribute("viewBox","0 0 36 36");const r=document.createElementNS("http://www.w3.org/2000/svg","circle");r.setAttribute("class","designbase-wc-indicator__dot-ring-bg"),r.setAttribute("cx","18"),r.setAttribute("cy","18"),r.setAttribute("r",String(t)),r.setAttribute("fill","none");const n=document.createElementNS("http://www.w3.org/2000/svg","circle");return n.setAttribute("class","designbase-wc-indicator__dot-ring-progress"),n.setAttribute("cx","18"),n.setAttribute("cy","18"),n.setAttribute("r",String(t)),n.setAttribute("fill","none"),n.setAttribute("stroke-dasharray",String(e)),n.setAttribute("stroke-dashoffset",String(e*(1-this.progress))),n.setAttribute("stroke-linecap","round"),s.append(r,n),i.append(s),i}renderStep(t,e,i){const s=t===this.resolvedCurrent,r=this.clickable?document.createElement("button"):document.createElement("span");return r.className=e,this.clickable&&r instanceof HTMLButtonElement?(r.type="button",r.setAttribute("aria-label",`${t+1}단계`),s&&r.setAttribute("aria-current","step"),r.addEventListener("click",()=>{this.goToStep(t),this.dispatchEvent(new CustomEvent("db-step-click",{detail:{current:t,index:t},bubbles:!0,composed:!0}))})):s||r.setAttribute("aria-hidden","true"),i&&r.append(i),r}renderDots(){const t=document.createDocumentFragment(),e=this.indicatorType,i="combined"===e?"dots":e,s=this.timer,r=this.resolvedPlaying,n=this.resolvedCurrent;this.direction;const a=this.total;if("dots"!==i)return t;for(let e=0;e<a;e+=1){const i=e===n,a=s&&i&&r,o=document.createElement("span");o.className="designbase-wc-indicator__dot-core";const c=document.createDocumentFragment();c.append(o),s&&i&&(a||this.progress>0)&&c.append(this.renderDotRing()),t.append(this.renderStep(e,["designbase-wc-indicator__dot",i&&"designbase-wc-indicator__dot--active"].filter(Boolean).join(" "),c))}return t}renderPlaybackButton(){const e=document.createElement("button");return e.type="button",e.className="designbase-wc-indicator__playback-button",e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.append(t(this.resolvedPlaying?"pause":"play")),e.addEventListener("click",()=>{if(this.hasAttribute("playback-disabled"))return;const t=!this.resolvedPlaying;this.isPlayingControlled?t?this.setAttribute("playing",""):(this.removeAttribute("playing"),this.pausedProgress=this.progress):(this.isPlayingInternal=t,t||(this.pausedProgress=this.progress)),this.syncRootClasses(),this.syncPlaybackButton(),this.startTimer(),this.dispatchEvent(new CustomEvent("db-playing-change",{detail:{playing:t},bubbles:!0,composed:!0}))}),e}renderNumbers(){const t=document.createElement("div");t.className=["designbase-wc-indicator__numbers",this.numberBackground&&"designbase-wc-indicator__numbers--bg"].filter(Boolean).join(" ");const e=document.createElement("span");e.className="designbase-wc-indicator__current",e.textContent=String(this.resolvedCurrent+1);const i=document.createElement("span");i.className="designbase-wc-indicator__separator",i.textContent="/";const s=document.createElement("span");return s.className="designbase-wc-indicator__total",s.textContent=String(this.total),t.append(e,i,s),t}renderSlide(){const t=this.direction,e=this.resolvedCurrent,i=document.createElement("div");i.className="designbase-wc-indicator__track";const s=document.createElement("div");s.className="designbase-wc-indicator__track-thumb";const r=100/this.total;if("vertical"===t?(s.style.height=`${r}%`,s.style.transform=`translateY(${100*e}%)`):(s.style.width=`${r}%`,s.style.transform=`translateX(${100*e}%)`),this.timer&&this.resolvedPlaying){const e=document.createElement("div");e.className="designbase-wc-indicator__track-fill",e.style.transform="vertical"===t?`scaleY(${this.progress})`:`scaleX(${this.progress})`,s.append(e)}return i.append(s),i}renderScaleFill(t){const e=document.createElement("span");return e.className=t,e.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`,e}renderLine(){const t=document.createDocumentFragment(),e=this.timer,i=this.resolvedPlaying,s=this.resolvedCurrent;for(let r=0;r<this.total;r+=1){const n=r===s,a=e&&n&&i?this.renderScaleFill("designbase-wc-indicator__line-fill"):void 0;t.append(this.renderStep(r,["designbase-wc-indicator__line-segment",n&&!e&&"designbase-wc-indicator__line-segment--active",n&&e&&"designbase-wc-indicator__line-segment--current"].filter(Boolean).join(" "),a))}return t}renderDotLine(){const t=document.createDocumentFragment(),e=this.timer,i=this.resolvedPlaying,s=this.resolvedCurrent;for(let r=0;r<this.total;r+=1){const n=r===s,a=e&&n&&i?this.renderScaleFill("designbase-wc-indicator__dot-line-fill"):void 0;t.append(this.renderStep(r,["designbase-wc-indicator__dot-line-item",n&&!e&&"designbase-wc-indicator__dot-line-item--active",n&&e&&"designbase-wc-indicator__dot-line-item--current"].filter(Boolean).join(" "),a))}return t}fillRatio(){const t=this.resolvedCurrent,e=t/this.total,i=1/this.total;return this.timer&&this.resolvedPlaying?Math.min(e+i*this.progress,1):(t+1)/this.total}renderFill(){const t=document.createElement("div");t.className="designbase-wc-indicator__track";const e=document.createElement("div");e.className="designbase-wc-indicator__track-progress";const i=100*this.fillRatio()+"%";return"vertical"===this.direction?e.style.height=i:e.style.width=i,t.append(e),t}renderContent(){const t="combined"===this.indicatorType?"dots":this.indicatorType;return"numbers"===t?this.renderNumbers():"slide"===t?this.renderSlide():"fill"===t?this.renderFill():"line"===t?this.renderLine():"dot-line"===t?this.renderDotLine():this.renderDots()}render(){const t=this.indicatorType,e=this.resolvedCurrent,i=this.total;this.syncRootClasses(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","1"),this.setAttribute("aria-valuemax",String(i)),this.setAttribute("aria-valuenow",String(e+1)),this.replaceChildren();if("combined"===t||this.playback){const t=document.createElement("div");return t.className="designbase-wc-indicator__steps",t.append(this.renderContent()),void this.append(t,this.renderPlaybackButton())}this.append(this.renderContent())}}customElements.get("db-indicator")||customElements.define("db-indicator",DbIndicator);export{DbIndicator};

package/dist/esm/components/db-kanban.d.ts

@@ -0,0 +1,70 @@
+type DbKanbanPriority = 'low' | 'medium' | 'high' | 'urgent';
+type DbKanbanTag = {
+    label: string;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+};
+type DbKanbanAssignee = {
+    name: string;
+    initials?: string;
+    avatar?: string;
+};
+type DbKanbanCard = {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: DbKanbanTag[];
+    assignee?: DbKanbanAssignee;
+    priority?: DbKanbanPriority;
+    dueDate?: string;
+    disabled?: boolean;
+};
+type DbKanbanColumn = {
+    id: string;
+    title: string;
+    cards: DbKanbanCard[];
+    limit?: number;
+    color?: string;
+};
+declare class DbKanban extends HTMLElement {
+    private dragState;
+    private dropTarget;
+    static get observedAttributes(): string[];
+    get columns(): DbKanbanColumn[];
+    set columns(value: DbKanbanColumn[] | string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getOption;
+    private emitChange;
+    private emitCardMove;
+    private findCardLocation;
+    private getAdjustedDropIndex;
+    private isValidDropTarget;
+    private moveCard;
+    private setDropTarget;
+    private resetDragState;
+    private updateDragClasses;
+    private getDropIndexFromPointer;
+    private getDropIndexFromColumnPointer;
+    private commitDrop;
+    private handleBoardDragOver;
+    private handleBoardDrop;
+    private formatDueDate;
+    private getInitials;
+    private createTag;
+    private createPriorityBadge;
+    private createAssignee;
+    private bindCardDrag;
+    private createCard;
+    private createColumn;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-kanban': DbKanban;
+    }
+}
+
+export { DbKanban };
+export type { DbKanbanAssignee, DbKanbanCard, DbKanbanColumn, DbKanbanPriority, DbKanbanTag };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],a=["low","medium","high","urgent"],n={low:"낮음",medium:"보통",high:"높음",urgent:"긴급"};class DbKanban extends HTMLElement{constructor(){super(...arguments),this.dragState=null,this.dropTarget=null,this.handleBoardDragOver=e=>{if(!this.dragState)return;const t=e.target;t instanceof Element&&(t.closest(".designbase-wc-kanban__card")||t.closest(".designbase-wc-kanban__column-body"))||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"))},this.handleBoardDrop=e=>{if(!this.dragState)return;const t=e.target;t instanceof Element&&(t.closest(".designbase-wc-kanban__card")||t.closest(".designbase-wc-kanban__column-body"))||(e.preventDefault(),this.commitDrop())}}static get observedAttributes(){return["columns","size","disabled","draggable","show-column-count","show-add-card","allow-cross-column","full-width","empty-column-text"]}get columns(){try{const e=JSON.parse(this.getAttribute("columns")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label","칸반 보드"),this.addEventListener("dragover",this.handleBoardDragOver),this.addEventListener("drop",this.handleBoardDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleBoardDragOver),this.removeEventListener("drop",this.handleBoardDrop)}attributeChangedCallback(){this.isConnected&&this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getOption(e,t,a){const n=this.getAttribute(e);return n&&t.includes(n)?n:a}emitChange(e){this.columns=e,this.dispatchEvent(new CustomEvent("db-change",{detail:{columns:e},bubbles:!0,composed:!0}))}emitCardMove(e,t){this.columns=e,this.dispatchEvent(new CustomEvent("db-card-move",{detail:{...t,columns:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{columns:e},bubbles:!0,composed:!0}))}findCardLocation(e){for(const t of this.columns){const a=t.cards.findIndex(t=>t.id===e);if(a>=0)return{columnId:t.id,index:a}}return null}getAdjustedDropIndex(e,t){if(!this.dragState)return-1;const{columnId:a,cardIndex:n}=this.dragState;return a===e&&t>n?t-1:t}isValidDropTarget(e=this.dropTarget){if(!this.dragState||!e)return!1;const t=this.getAdjustedDropIndex(e.columnId,e.index);return!(t<0)&&(this.dragState.columnId!==e.columnId||t!==this.dragState.cardIndex)}moveCard(e,t,a){const n=this.findCardLocation(e);if(!n)return;const s=this.columns.map(e=>({...e,cards:[...e.cards]})),d=s.find(e=>e.id===n.columnId),r=s.find(e=>e.id===t);if(!d||!r)return;const[i]=d.cards.splice(n.index,1);if(!i)return;const o=this.getAdjustedDropIndex(t,a);r.cards.splice(Math.max(0,o),0,i),this.emitCardMove(s,{cardId:e,fromColumnId:n.columnId,toColumnId:t,fromIndex:n.index,toIndex:Math.max(0,o)})}setDropTarget(e){const t=e&&this.isValidDropTarget(e)?e:null;(this.dropTarget?`${this.dropTarget.columnId}:${this.dropTarget.index}`:"")!==(t?`${t.columnId}:${t.index}`:"")&&(this.dropTarget=t,this.updateDragClasses())}resetDragState(){this.dragState=null,this.dropTarget=null,this.classList.remove("designbase-wc-kanban--dragging"),this.updateDragClasses()}updateDragClasses(){const e=!!this.dragState;this.classList.toggle("designbase-wc-kanban--dragging",e),this.querySelectorAll(".designbase-wc-kanban__card").forEach(t=>{const a=t.dataset.cardId||"",n=e&&this.dragState?.cardId===a;t.classList.toggle("designbase-wc-kanban__card--dragged",n)}),this.querySelectorAll(".designbase-wc-kanban__column-body").forEach(e=>{const t=e.dataset.columnId||"",a=!!this.dropTarget&&this.dropTarget.columnId===t;e.classList.toggle("designbase-wc-kanban__column-body--drag-over",a)}),this.querySelectorAll(".designbase-wc-kanban__card").forEach(e=>{const t=e.dataset.columnId||"",a=Number(e.dataset.cardIndex||-1),n=!!this.dropTarget&&this.dropTarget.columnId===t&&this.dropTarget.index===a,s=this.columns.find(e=>e.id===t),d=!!this.dropTarget&&this.dropTarget.columnId===t&&s&&this.dropTarget.index===s.cards.length&&a===s.cards.length-1;e.classList.toggle("designbase-wc-kanban__card--drop-before",n),e.classList.toggle("designbase-wc-kanban__card--drop-after",d)})}getDropIndexFromPointer(e,t,a){const n=t.getBoundingClientRect();return e.clientY-n.top<n.height/2?a:a+1}getDropIndexFromColumnPointer(e,t){const a=Array.from(this.querySelectorAll(`.designbase-wc-kanban__column-body[data-column-id="${t}"] > .designbase-wc-kanban__card`));if(0===a.length)return 0;for(let t=0;t<a.length;t+=1){const n=a[t].getBoundingClientRect();if(e.clientY<n.top+n.height/2)return t}return a.length}commitDrop(){if(!this.dragState||!this.dropTarget||!this.isValidDropTarget())return void this.resetDragState();const{cardId:e}=this.dragState,{columnId:t,index:a}=this.dropTarget;this.resetDragState(),this.moveCard(e,t,a),this.render()}formatDueDate(e){const t=new Date(e);return Number.isNaN(t.getTime())?e:t.toLocaleDateString("ko-KR",{month:"short",day:"numeric"})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e.charAt(0)).join("").slice(0,2).toUpperCase()}createTag(e){const t=document.createElement("span");return t.className=["designbase-wc-kanban__tag",e.variant&&`designbase-wc-kanban__tag--${e.variant}`].filter(Boolean).join(" "),t.textContent=e.label,t}createPriorityBadge(e){const t=document.createElement("span");return t.className=`designbase-wc-kanban__priority designbase-wc-kanban__priority--${e}`,t.textContent=n[e],t.setAttribute("aria-label",`우선순위 ${n[e]}`),t}createAssignee(e){const t=document.createElement("div");if(t.className="designbase-wc-kanban__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.className="designbase-wc-kanban__assignee-avatar",a.src=e.avatar,a.alt=e.name,t.append(a)}else{const a=document.createElement("span");a.className="designbase-wc-kanban__assignee-initials",a.textContent=this.getInitials(e),t.append(a)}const a=document.createElement("span");return a.className="designbase-wc-kanban__assignee-name",a.textContent=e.name,t.append(a),t}bindCardDrag(e,t,a,n,s,d){e.draggable=s&&!d&&!t.disabled,e.addEventListener("dragstart",e=>{!s||d||t.disabled||(this.dragState={cardId:t.id,columnId:a,cardIndex:n},this.dropTarget=null,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.classList.add("designbase-wc-kanban--dragging"),this.updateDragClasses())}),e.addEventListener("dragover",t=>{if(!this.dragState)return;t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");if(!this.getBool("allow-cross-column",!0)&&this.dragState.columnId!==a)return;const s=this.getDropIndexFromPointer(t,e,n);this.setDropTarget({columnId:a,index:s})}),e.addEventListener("dragleave",t=>{const a=e.getBoundingClientRect(),n=t.clientX-a.left,s=t.clientY-a.top;(n<0||n>a.width||s<0||s>a.height)&&this.setDropTarget(null)}),e.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.commitDrop()}),e.addEventListener("dragend",()=>{this.resetDragState(),this.render()})}createCard(t,n,s,d){const r=document.createElement("article");r.className=["designbase-wc-kanban__card",t.disabled&&"designbase-wc-kanban__card--disabled",t.priority&&`designbase-wc-kanban__card--priority-${t.priority}`].filter(Boolean).join(" "),r.dataset.cardId=t.id,r.dataset.columnId=n,r.dataset.cardIndex=String(s),r.setAttribute("role","listitem"),r.tabIndex=t.disabled?-1:0;const i=document.createElement("div");i.className="designbase-wc-kanban__card-title-row";const o=document.createElement("h4");if(o.className="designbase-wc-kanban__card-title",o.textContent=t.title,i.append(o),t.priority&&a.includes(t.priority)&&i.append(this.createPriorityBadge(t.priority)),r.append(i),t.description){const e=document.createElement("p");e.className="designbase-wc-kanban__card-description",e.textContent=t.description,r.append(e)}if(t.tags?.length){const e=document.createElement("div");e.className="designbase-wc-kanban__card-tags",t.tags.forEach(t=>e.append(this.createTag(t))),r.append(e)}const c=document.createElement("div");if(c.className="designbase-wc-kanban__card-footer",t.assignee&&c.append(this.createAssignee(t.assignee)),t.dueDate){const a=document.createElement("span");a.className="designbase-wc-kanban__due-date",a.append(e("calendar","l"===d.size?12:"m"===d.size?11:10));const n=document.createElement("span");n.textContent=this.formatDueDate(t.dueDate),a.append(n),c.append(a)}return c.childNodes.length>0&&r.append(c),r.addEventListener("click",e=>{d.disabled||this.dispatchEvent(new CustomEvent("db-card-click",{detail:{card:t,columnId:n},bubbles:!0,composed:!0}))}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-card-click",{detail:{card:t,columnId:n},bubbles:!0,composed:!0})))}),this.bindCardDrag(r,t,n,s,d.draggable,d.disabled),r}createColumn(t,a){const n=document.createElement("section"),s=void 0!==t.limit&&t.cards.length>t.limit;n.className=["designbase-wc-kanban__column",s&&"designbase-wc-kanban__column--over-limit"].filter(Boolean).join(" "),n.dataset.columnId=t.id,n.setAttribute("role","group"),n.setAttribute("aria-label",t.title);const d=document.createElement("header");d.className="designbase-wc-kanban__column-header";const r=document.createElement("div");if(r.className="designbase-wc-kanban__column-title-wrap",t.color){const e=document.createElement("span");e.className="designbase-wc-kanban__column-color",e.style.backgroundColor=t.color,e.setAttribute("aria-hidden","true"),r.append(e)}const i=document.createElement("h3");if(i.className="designbase-wc-kanban__column-title",i.textContent=t.title,r.append(i),d.append(r),a.showColumnCount){const e=document.createElement("span");e.className="designbase-wc-kanban__column-count",e.textContent=void 0!==t.limit?`${t.cards.length}/${t.limit}`:String(t.cards.length),d.append(e)}n.append(d);const o=document.createElement("div");if(o.className="designbase-wc-kanban__column-body",o.dataset.columnId=t.id,o.setAttribute("role","list"),o.addEventListener("dragover",e=>{if(!this.dragState)return;e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");if(!this.getBool("allow-cross-column",!0)&&this.dragState.columnId!==t.id)return;const a=this.getDropIndexFromColumnPointer(e,t.id);this.setDropTarget({columnId:t.id,index:a})}),o.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.commitDrop()}),0===t.cards.length){const e=document.createElement("div");e.className="designbase-wc-kanban__column-empty",e.textContent=a.emptyColumnText,o.append(e)}else t.cards.forEach((e,n)=>{o.append(this.createCard(e,t.id,n,{size:a.size,draggable:a.draggable,disabled:a.disabled}))});if(n.append(o),a.showAddCard&&!a.disabled){const s=document.createElement("button");s.type="button",s.className="designbase-wc-kanban__add-card",s.append(e("plus","l"===a.size?14:"m"===a.size?12:10));const d=document.createElement("span");d.textContent="카드 추가",s.append(d),s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-add-card",{detail:{columnId:t.id},bubbles:!0,composed:!0}))}),n.append(s)}return n}render(){const e=this.getOption("size",t,"s"),a=this.getBool("disabled"),n=this.getBool("draggable",!0),s=this.getBool("show-column-count",!0),d=this.getBool("show-add-card"),r=this.getAttribute("empty-column-text")||"카드가 없습니다";this.className=["designbase-wc-kanban",`designbase-wc-kanban--${e}`,this.getBool("full-width")&&"designbase-wc-kanban--full-width",a&&"designbase-wc-kanban--disabled",this.classList.contains("designbase-wc-kanban--dragging")&&"designbase-wc-kanban--dragging"].filter(Boolean).join(" ");const i=document.createElement("div");i.className="designbase-wc-kanban__board";const o=document.createDocumentFragment();this.columns.forEach(t=>{o.append(this.createColumn(t,{size:e,draggable:n,showColumnCount:s,showAddCard:d,emptyColumnText:r,disabled:a}))}),i.append(o),this.replaceChildren(i),this.updateDragClasses()}}customElements.get("db-kanban")||customElements.define("db-kanban",DbKanban);export{DbKanban};

package/dist/esm/components/db-lightbox.d.ts

@@ -19,6 +19,7 @@ declare class DbLightbox extends HTMLElement {
     private imageError;
     private keydownHandler;
     private boundSrc;
+    private thumbnailSignature;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l","xl"];class DbLightbox extends HTMLElement{constructor(){super(...arguments),this.portalEl=null,this.imageEl=null,this.loadingEl=null,this.errorEl=null,this.counterBadge=null,this.prevNav=null,this.nextNav=null,this.currentIndex=0,this.imageLoaded=!1,this.imageError=!1,this.keydownHandler=null,this.boundSrc="",this.handleImageLoad=()=>{this.imageLoaded=!0,this.imageError=!1,this.syncImageLayers()},this.handleImageError=()=>{this.imageLoaded=!1,this.imageError=!0,this.syncImageLayers()}}static get observedAttributes(){return["images","current-index","size","open","enable-keyboard","show-thumbnails","show-counter","show-close-button","show-navigation-buttons","show-toolbar","close-on-backdrop-click","close-on-escape"]}connectedCallback(){this.classList.add("designbase-wc-lightbox-host"),this.syncOpenState()}disconnectedCallback(){this.unmount()}attributeChangedCallback(e,t,s){if("current-index"===e)return this.currentIndex=Number(s||0),this.resetImageState(),void(this.open&&this.refreshView());"open"!==e?"images"===e&&this.open&&this.refreshView():this.syncOpenState()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getCurrentImage(){return this.parseImages()[this.currentIndex]||null}resetImageState(){this.imageLoaded=!1,this.imageError=!1,this.boundSrc=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}goTo(e){const t=this.parseImages();if(!t.length)return;const s=(e%t.length+t.length)%t.length;s!==this.currentIndex&&(this.currentIndex=s,this.setAttribute("current-index",String(s)),this.resetImageState(),this.refreshView(),this.dispatchEvent(new CustomEvent("db-image-change",{bubbles:!0,composed:!0,detail:{index:s}})))}createIconButton(t,s,i,n,a,r={}){const o=document.createElement("db-button");o.className=t,o.setAttribute("variant",r.variant||"ghost"),o.setAttribute("size","m"),o.setAttribute("icon-only",""),o.setAttribute("aria-label",n),r.radius&&o.setAttribute("radius",r.radius);const l=document.createElement("span");return l.className="designbase-wc-button__start-icon",l.append(e(s,i)),o.append(l),o.addEventListener("db-click",a),o}buildPortal(){const s=this.getAttribute("size")||"l",i=t.includes(s)?s:"l",n=document.createElement("div");n.className=`designbase-wc-lightbox designbase-wc-lightbox--size-${i}`,n.setAttribute("data-wc-internal","");const a=document.createElement("div");a.className="designbase-wc-lightbox__overlay";const r=document.createElement("div");r.className="designbase-wc-lightbox__modal";const o=document.createElement("div");o.className="designbase-wc-lightbox__header";const l=document.createElement("div");l.className="designbase-wc-lightbox__title";const c=document.createElement("h3");c.className="designbase-wc-lightbox__title-text";const h=document.createElement("db-badge");h.className="designbase-wc-lightbox__counter",h.setAttribute("size","s"),h.setAttribute("variant","secondary"),h.setAttribute("badge-style","text"),l.append(c,h);const d=document.createElement("div");d.className="designbase-wc-lightbox__header-actions","false"!==this.getAttribute("show-close-button")&&d.append(this.createIconButton("designbase-wc-lightbox__close-button","close",20,"닫기",()=>this.close())),o.append(l,d);const g=document.createElement("div");g.className="designbase-wc-lightbox__content",this.prevNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev","chevron-left",24,"이전 이미지",()=>this.goTo(this.currentIndex-1),{radius:"pill"}),this.nextNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next","chevron-right",24,"다음 이미지",()=>this.goTo(this.currentIndex+1),{radius:"pill"});const u=document.createElement("div");u.className="designbase-wc-lightbox__image-container",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-lightbox__error",this.errorEl.hidden=!0;const b=e("gallery",24);b.classList.add("designbase-wc-lightbox__error-icon"),this.errorEl.append(b);const m=document.createElement("p");m.className="designbase-wc-lightbox__error-text",m.textContent="이미지를 불러올 수 없습니다",this.errorEl.append(m),this.loadingEl=document.createElement("div"),this.loadingEl.className="designbase-wc-lightbox__loading";const p=document.createElement("db-spinner");p.setAttribute("type","circular"),p.setAttribute("size","m"),p.setAttribute("show-label",""),p.setAttribute("label","이미지 로딩 중..."),this.loadingEl.append(p),this.imageEl=document.createElement("img"),this.imageEl.className="designbase-wc-lightbox__image",this.imageEl.draggable=!1,this.imageEl.addEventListener("load",this.handleImageLoad),this.imageEl.addEventListener("error",this.handleImageError),u.append(this.errorEl,this.loadingEl,this.imageEl);const E=document.createElement("div");E.className="designbase-wc-lightbox__description";const x=document.createElement("p");x.className="designbase-wc-lightbox__description-text",E.append(x),"false"!==this.getAttribute("show-navigation-buttons")&&g.append(this.prevNav,this.nextNav),g.append(u,E);const w=document.createElement("div");w.className="designbase-wc-lightbox__thumbnails";const _=document.createElement("div");return _.className="designbase-wc-lightbox__thumbnails-container",w.append(_),r.append(o,g,w),a.append(r),n.append(a),a.addEventListener("click",e=>{e.target===a&&"false"!==this.getAttribute("close-on-backdrop-click")&&this.close()}),this.portalEl=n,this.counterBadge=h,n}syncImageLayers(){this.imageEl&&this.loadingEl&&this.errorEl&&(this.imageEl.classList.toggle("designbase-wc-lightbox__image--loaded",this.imageLoaded),this.loadingEl.hidden=this.imageLoaded||this.imageError,this.errorEl.hidden=!this.imageError,this.imageEl.hidden=this.imageError)}updateThumbnails(){if(!this.portalEl)return;const e=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails-container"),t=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails");if(!e||!t)return;const s=this.parseImages(),i="false"!==this.getAttribute("show-thumbnails")&&s.length>1;t.hidden=!i,e.replaceChildren(),i&&s.forEach((t,s)=>{const i=document.createElement("button");i.type="button",i.className=["designbase-wc-lightbox__thumbnail",s===this.currentIndex&&"designbase-wc-lightbox__thumbnail--active"].filter(Boolean).join(" "),i.title=t.title||`이미지 ${s+1}`,i.setAttribute("aria-label",t.alt||t.title||`이미지 ${s+1}`),i.setAttribute("aria-current",s===this.currentIndex?"true":"false");const n=document.createElement("img");n.className="designbase-wc-lightbox__thumbnail-image",n.src=t.thumbnail||t.src,n.alt="",n.draggable=!1,n.loading="lazy",n.decoding="async",i.append(n),i.addEventListener("click",()=>this.goTo(s)),e.append(i)})}loadCurrentImage(){if(!this.imageEl)return;const e=this.getCurrentImage();if(!e?.src)return this.imageEl.removeAttribute("src"),this.resetImageState(),void this.syncImageLayers();this.boundSrc!==e.src&&(this.boundSrc=e.src,this.resetImageState(),this.imageEl.src=e.src,this.imageEl.alt=e.alt||e.title||`이미지 ${this.currentIndex+1}`,this.syncImageLayers(),this.imageEl.complete&&this.imageEl.naturalWidth>0&&this.handleImageLoad())}refreshView(){if(!this.portalEl)return;const e=this.getCurrentImage(),t=this.parseImages(),s=this.portalEl.querySelector(".designbase-wc-lightbox__title-text"),i=this.portalEl.querySelector(".designbase-wc-lightbox__description-text"),n=this.portalEl.querySelector(".designbase-wc-lightbox__description");if(s&&(s.textContent=e?.title||"",s.hidden=!e?.title),this.counterBadge){const e="false"!==this.getAttribute("show-counter")&&t.length>1?`${this.currentIndex+1} / ${t.length}`:"";this.counterBadge.textContent=e,this.counterBadge.hidden=!e}n&&i&&(i.textContent=e?.description||"",n.hidden=!e?.description);const a="false"!==this.getAttribute("show-navigation-buttons")&&t.length>1;this.prevNav&&(this.prevNav.hidden=!a),this.nextNav&&(this.nextNav.hidden=!a),this.loadCurrentImage(),this.updateThumbnails()}mount(){this.portalEl||(this.portalEl=this.buildPortal()),this.portalEl.isConnected||document.body.append(this.portalEl),document.body.style.overflow="hidden",this.keydownHandler||(this.keydownHandler=e=>{this.open&&"false"!==this.getAttribute("enable-keyboard")&&("Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&(e.preventDefault(),this.close()),"ArrowLeft"===e.key&&this.goTo(this.currentIndex-1),"ArrowRight"===e.key&&this.goTo(this.currentIndex+1))},document.addEventListener("keydown",this.keydownHandler)),this.currentIndex=Number(this.getAttribute("current-index")||0),this.refreshView()}unmount(){this.portalEl?.remove(),document.body.style.overflow="",this.keydownHandler&&(document.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=null)}syncOpenState(){this.open?this.mount():this.unmount()}}customElements.get("db-lightbox")||customElements.define("db-lightbox",DbLightbox);export{DbLightbox};
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l","xl"];class DbLightbox extends HTMLElement{constructor(){super(...arguments),this.portalEl=null,this.imageEl=null,this.loadingEl=null,this.errorEl=null,this.counterBadge=null,this.prevNav=null,this.nextNav=null,this.currentIndex=0,this.imageLoaded=!1,this.imageError=!1,this.keydownHandler=null,this.boundSrc="",this.thumbnailSignature="",this.handleImageLoad=()=>{this.imageLoaded=!0,this.imageError=!1,this.syncImageLayers()},this.handleImageError=()=>{this.imageLoaded=!1,this.imageError=!0,this.syncImageLayers()}}static get observedAttributes(){return["images","current-index","size","open","enable-keyboard","show-thumbnails","show-counter","show-close-button","show-navigation-buttons","show-toolbar","close-on-backdrop-click","close-on-escape"]}connectedCallback(){this.classList.add("designbase-wc-lightbox-host"),this.syncOpenState()}disconnectedCallback(){this.unmount()}attributeChangedCallback(e,t,s){if("current-index"===e)return this.currentIndex=Number(s||0),this.resetImageState(),void(this.open&&this.refreshView());"open"!==e?"images"===e&&this.open&&this.refreshView():this.syncOpenState()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}parseImages(){const e=this.getAttribute("images");if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}getCurrentImage(){return this.parseImages()[this.currentIndex]||null}resetImageState(){this.imageLoaded=!1,this.imageError=!1,this.boundSrc=""}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}goTo(e){const t=this.parseImages();if(!t.length)return;const s=(e%t.length+t.length)%t.length;s!==this.currentIndex&&(this.currentIndex=s,this.setAttribute("current-index",String(s)),this.resetImageState(),this.refreshView(),this.dispatchEvent(new CustomEvent("db-image-change",{bubbles:!0,composed:!0,detail:{index:s}})))}createIconButton(e,t,s,i,n={}){const a=document.createElement("db-button");return a.className=e,a.setAttribute("variant",n.variant||"ghost"),a.setAttribute("size",n.size||"m"),a.setAttribute("icon-only",""),a.setAttribute("start-icon",t),a.setAttribute("aria-label",s),n.radius&&a.setAttribute("radius",n.radius),a.addEventListener("db-click",i),a}buildPortal(){const s=this.getAttribute("size")||"l",i=t.includes(s)?s:"l",n=document.createElement("div");n.className=`designbase-wc-lightbox designbase-wc-lightbox--size-${i}`,n.setAttribute("data-wc-internal","");const a=document.createElement("div");a.className="designbase-wc-lightbox__overlay";const r=document.createElement("div");r.className="designbase-wc-lightbox__modal";const o=document.createElement("div");o.className="designbase-wc-lightbox__header";const l=document.createElement("div");l.className="designbase-wc-lightbox__title";const h=document.createElement("h3");h.className="designbase-wc-lightbox__title-text";const c=document.createElement("db-badge");c.className="designbase-wc-lightbox__counter",c.setAttribute("size","s"),c.setAttribute("variant","secondary"),c.setAttribute("badge-style","text"),l.append(h,c);const d=document.createElement("div");d.className="designbase-wc-lightbox__header-actions","false"!==this.getAttribute("show-close-button")&&d.append(this.createIconButton("designbase-wc-lightbox__close-button","close","닫기",()=>this.close())),o.append(l,d);const g=document.createElement("div");g.className="designbase-wc-lightbox__content",this.prevNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--prev","chevron-left","이전 이미지",()=>this.goTo(this.currentIndex-1),{radius:"pill",size:"l"}),this.nextNav=this.createIconButton("designbase-wc-lightbox__nav-button designbase-wc-lightbox__nav-button--next","chevron-right","다음 이미지",()=>this.goTo(this.currentIndex+1),{radius:"pill",size:"l"});const u=document.createElement("div");u.className="designbase-wc-lightbox__image-container",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-lightbox__error",this.errorEl.hidden=!0;const b=e("gallery",24);b.classList.add("designbase-wc-lightbox__error-icon"),this.errorEl.append(b);const m=document.createElement("p");m.className="designbase-wc-lightbox__error-text",m.textContent="이미지를 불러올 수 없습니다",this.errorEl.append(m),this.loadingEl=document.createElement("div"),this.loadingEl.className="designbase-wc-lightbox__loading";const p=document.createElement("db-spinner");p.setAttribute("type","circular"),p.setAttribute("size","m"),p.setAttribute("show-label",""),p.setAttribute("label","이미지 로딩 중..."),this.loadingEl.append(p),this.imageEl=document.createElement("img"),this.imageEl.className="designbase-wc-lightbox__image",this.imageEl.draggable=!1,this.imageEl.addEventListener("load",this.handleImageLoad),this.imageEl.addEventListener("error",this.handleImageError),u.append(this.errorEl,this.loadingEl,this.imageEl);const E=document.createElement("div");E.className="designbase-wc-lightbox__description";const x=document.createElement("p");x.className="designbase-wc-lightbox__description-text",E.append(x),"false"!==this.getAttribute("show-navigation-buttons")&&g.append(this.prevNav,this.nextNav),g.append(u,E);const w=document.createElement("div");w.className="designbase-wc-lightbox__thumbnails";const v=document.createElement("div");return v.className="designbase-wc-lightbox__thumbnails-container",w.append(v),r.append(o,g,w),a.append(r),n.append(a),a.addEventListener("click",e=>{e.target===a&&"false"!==this.getAttribute("close-on-backdrop-click")&&this.close()}),this.portalEl=n,this.counterBadge=c,n}syncImageLayers(){this.imageEl&&this.loadingEl&&this.errorEl&&(this.imageEl.classList.toggle("designbase-wc-lightbox__image--loaded",this.imageLoaded),this.loadingEl.hidden=this.imageLoaded||this.imageError,this.errorEl.hidden=!this.imageError,this.imageEl.hidden=this.imageError)}updateThumbnails(){if(!this.portalEl)return;const e=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails-container"),t=this.portalEl.querySelector(".designbase-wc-lightbox__thumbnails");if(!e||!t)return;const s=this.parseImages(),i="false"!==this.getAttribute("show-thumbnails")&&s.length>1;if(t.hidden=!i,!i)return e.replaceChildren(),void(this.thumbnailSignature="");const n=s.map(e=>e.thumbnail||e.src).join("|");n!==this.thumbnailSignature||e.childElementCount!==s.length?(this.thumbnailSignature=n,e.replaceChildren(),s.forEach((t,s)=>{const i=document.createElement("button");i.type="button",i.className=["designbase-wc-lightbox__thumbnail",s===this.currentIndex&&"designbase-wc-lightbox__thumbnail--active"].filter(Boolean).join(" "),i.title=t.title||`이미지 ${s+1}`,i.setAttribute("aria-label",t.alt||t.title||`이미지 ${s+1}`),i.setAttribute("aria-current",s===this.currentIndex?"true":"false");const n=document.createElement("img");n.className="designbase-wc-lightbox__thumbnail-image",n.src=t.thumbnail||t.src,n.alt="",n.draggable=!1,n.loading="lazy",n.decoding="async",i.append(n),i.addEventListener("click",()=>this.goTo(s)),e.append(i)})):Array.from(e.children).forEach((e,t)=>{const s=e,i=t===this.currentIndex;s.classList.toggle("designbase-wc-lightbox__thumbnail--active",i),s.setAttribute("aria-current",i?"true":"false")})}loadCurrentImage(){if(!this.imageEl)return;const e=this.getCurrentImage();if(!e?.src)return this.imageEl.removeAttribute("src"),this.resetImageState(),void this.syncImageLayers();this.boundSrc!==e.src&&(this.boundSrc=e.src,this.resetImageState(),this.imageEl.src=e.src,this.imageEl.alt=e.alt||e.title||`이미지 ${this.currentIndex+1}`,this.syncImageLayers(),this.imageEl.complete&&this.imageEl.naturalWidth>0&&this.handleImageLoad())}refreshView(){if(!this.portalEl)return;const e=this.getCurrentImage(),t=this.parseImages(),s=this.portalEl.querySelector(".designbase-wc-lightbox__title-text"),i=this.portalEl.querySelector(".designbase-wc-lightbox__description-text"),n=this.portalEl.querySelector(".designbase-wc-lightbox__description");if(s&&(s.textContent=e?.title||"",s.hidden=!e?.title),this.counterBadge){const e="false"!==this.getAttribute("show-counter")&&t.length>1?`${this.currentIndex+1} / ${t.length}`:"";this.counterBadge.textContent=e,this.counterBadge.hidden=!e}n&&i&&(i.textContent=e?.description||"",n.hidden=!e?.description);const a="false"!==this.getAttribute("show-navigation-buttons")&&t.length>1;this.prevNav&&(this.prevNav.hidden=!a),this.nextNav&&(this.nextNav.hidden=!a),this.loadCurrentImage(),this.updateThumbnails()}mount(){this.portalEl||(this.portalEl=this.buildPortal()),this.portalEl.isConnected||document.body.append(this.portalEl),document.body.style.overflow="hidden",this.keydownHandler||(this.keydownHandler=e=>{this.open&&"false"!==this.getAttribute("enable-keyboard")&&("Escape"===e.key&&"false"!==this.getAttribute("close-on-escape")&&(e.preventDefault(),this.close()),"ArrowLeft"===e.key&&this.goTo(this.currentIndex-1),"ArrowRight"===e.key&&this.goTo(this.currentIndex+1))},document.addEventListener("keydown",this.keydownHandler)),this.currentIndex=Number(this.getAttribute("current-index")||0),this.refreshView()}unmount(){this.portalEl?.remove(),document.body.style.overflow="",this.keydownHandler&&(document.removeEventListener("keydown",this.keydownHandler),this.keydownHandler=null)}syncOpenState(){this.open?this.mount():this.unmount()}}customElements.get("db-lightbox")||customElements.define("db-lightbox",DbLightbox);export{DbLightbox};

package/dist/esm/components/db-marquee.d.ts

@@ -2,27 +2,49 @@ declare class DbMarquee extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
     private containerEl?;
-    private trackEl?;
-    private baseGroupEl?;
+    private rowsEl?;
     private srOnlyEl?;
+    private rows;
+    private rowCount;
     private resizeObserver?;
     private containerWidth;
-    private baseGroupWidth;
+    private gap;
+    private scrollVelocityEnabled;
+    private rafId;
+    private lastFrameTime;
+    private lastScrollY;
+    private smoothedScrollV;
+    private baseDurationSec;
+    private reduceMotion;
     private boundMeasure;
+    private boundFrame;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getBool;
     private parseItems;
+    private itemToText;
     private build;
     private bindResize;
+    /** rows 개수에 맞춰 행 DOM을 만들거나 제거한다. */
+    private reconcileRows;
     private measure;
     private unbindImageListeners;
     private bindImageListeners;
     private renderItem;
     private renderGroup;
-    private renderDuplicates;
+    /**
+     * 각 행의 base 그룹을 items로 다시 만든다 — items/attributes 변경 시에만 실행.
+     * 이미지 노드 재생성으로 인한 재로딩을 막기 위해 measure() 중에는 건드리지 않는다.
+     */
+    private buildBase;
+    private baseImagesReady;
+    /** 트랙을 채울 만큼의 복제 그룹 개수를 델타만 조정한다. */
+    private reconcileDuplicates;
     private syncReadyState;
+    private startScrollEngine;
+    private stopScrollEngine;
+    private frame;
     private updateUI;
 }
 declare global {

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

@@ -1 +1 @@
-const e="designbase-wc-marquee";class DbMarquee extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.containerWidth=0,this.baseGroupWidth=0,this.boundMeasure=()=>this.measure()}static get observedAttributes(){return["items","direction","duration","speed","size","variant","bordered","pause-on-hover","fade-edges","fade-width","edge-padding","gap","align-y","aria-label"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build(),this.bindResize()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.unbindImageListeners()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}parseItems(){try{const e=this.getAttribute("items"),t=e?JSON.parse(e):[];if(Array.isArray(t)&&t.length>0)return t}catch{}const e=Array.from(this.children).filter(e=>!e.hasAttribute("data-wc-internal"));return e.length>0?e.map(e=>e.textContent?.trim()||""):[]}build(){this.containerEl=document.createElement("div"),this.srOnlyEl=document.createElement("span"),this.srOnlyEl.className=`${e}__sr-only`,this.trackEl=document.createElement("div"),this.trackEl.className=`${e}__track`,this.baseGroupEl=document.createElement("div"),this.baseGroupEl.className=`${e}__group`,this.baseGroupEl.setAttribute("aria-hidden","true"),this.trackEl.append(this.baseGroupEl),this.containerEl.append(this.srOnlyEl,this.trackEl),this.append(this.containerEl)}bindResize(){this.resizeObserver=new ResizeObserver(()=>this.measure()),this.containerEl&&this.resizeObserver.observe(this.containerEl),this.baseGroupEl&&this.resizeObserver.observe(this.baseGroupEl)}measure(){this.containerWidth=Math.ceil(this.containerEl?.clientWidth??0),this.baseGroupWidth=Math.ceil(this.baseGroupEl?.scrollWidth??0),this.renderDuplicates(),this.bindImageListeners(),this.syncReadyState()}unbindImageListeners(){this.baseGroupEl&&this.baseGroupEl.querySelectorAll("img").forEach(e=>{e.removeEventListener("load",this.boundMeasure),e.removeEventListener("error",this.boundMeasure)})}bindImageListeners(){this.baseGroupEl&&(this.unbindImageListeners(),this.baseGroupEl.querySelectorAll("img").forEach(e=>{e.complete||(e.addEventListener("load",this.boundMeasure),e.addEventListener("error",this.boundMeasure))}))}renderItem(t){const i=document.createElement("div");return i.className=`${e}__item`,i.textContent=t,i}renderGroup(t,i){const s=i??document.createElement("div");return s.className=`${e}__group`,s.setAttribute("aria-hidden","true"),s.replaceChildren(...t.map(e=>this.renderItem(e))),s}renderDuplicates(){if(!this.trackEl||!this.baseGroupEl)return;const e=this.parseItems();this.renderGroup(e,this.baseGroupEl);const t=this.baseGroupWidth>0?Math.max(1,Math.ceil(this.containerWidth/this.baseGroupWidth)):1,i=[];for(let s=0;s<t;s+=1)i.push(this.renderGroup(e));this.trackEl.replaceChildren(this.baseGroupEl,...i)}syncReadyState(){this.containerEl&&this.containerEl.classList.toggle(`${e}--ready`,this.baseGroupWidth>0)}updateUI(){const t=this.parseItems();if(0===t.length)return void(this.hidden=!0);this.hidden=!1;const i=this.getAttribute("direction")||"left",s=Math.max(Number(this.getAttribute("duration")||20),1),r=Number(this.getAttribute("speed")||1),a=s/(Number.isFinite(r)&&r>0?r:1),n=this.getAttribute("size")||"m",h=this.getAttribute("variant")||"default",l=this.getAttribute("align-y")||"center",o=this.getBool("fade-edges"),d=Math.max(Number(this.getAttribute("fade-width")||48),0),u=this.getAttribute("edge-padding"),c=null!==u&&""!==u?Math.max(Number(u),0):o?d:0,b=Math.max(Number(this.getAttribute("gap")||24),0),p=this.getBool("pause-on-hover",!0),m=this.hasAttribute("bordered")?this.getBool("bordered"):"outlined"===h,E=this.getAttribute("aria-label")||"Scrolling content";this.containerEl&&(this.containerEl.className=[e,`${e}--size-${n}`,`${e}--variant-${h}`,`${e}--align-${l}`,p&&`${e}--pause-on-hover`,o&&`${e}--fade-edges`,"right"===i&&`${e}--right`,m&&`${e}--bordered`].filter(Boolean).join(" "),this.containerEl.style.setProperty("--db-marquee-duration",`${a}s`),this.containerEl.style.setProperty("--db-marquee-shift",`${this.baseGroupWidth+b}px`),this.containerEl.style.setProperty("--db-marquee-gap",`${b}px`),this.containerEl.style.setProperty("--db-marquee-fade-width",`${d}px`),this.containerEl.style.setProperty("--db-marquee-edge-padding",`${c}px`),this.containerEl.setAttribute("role","region"),this.containerEl.setAttribute("aria-label",E)),this.srOnlyEl&&(this.srOnlyEl.textContent=t.join(" • ")||E),this.renderDuplicates(),this.measure()}}customElements.get("db-marquee")||customElements.define("db-marquee",DbMarquee);export{DbMarquee};
+const t="designbase-wc-marquee";function isImageItem(t){return"object"==typeof t&&null!==t&&"string"==typeof t.src}class DbMarquee extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.rows=[],this.rowCount=0,this.containerWidth=0,this.gap=24,this.scrollVelocityEnabled=!1,this.rafId=0,this.lastFrameTime=0,this.lastScrollY=0,this.smoothedScrollV=0,this.baseDurationSec=12,this.reduceMotion=!1,this.boundMeasure=()=>this.measure(),this.boundFrame=t=>this.frame(t)}static get observedAttributes(){return["items","direction","duration","speed","size","variant","bordered","pause-on-hover","fade-edges","fade-width","edge-padding","gap","align-y","row-count","row-gap","scroll-velocity","scroll-boost","aria-label"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.reduceMotion="undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.build(),this.bindResize()),this.updateUI()}disconnectedCallback(){this.resizeObserver?.disconnect(),this.stopScrollEngine(),this.unbindImageListeners()}attributeChangedCallback(){this.built&&this.updateUI()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const r=this.getAttribute(t);return""===r||"true"===r}parseItems(){try{const t=this.getAttribute("items"),e=t?JSON.parse(t):[];if(Array.isArray(e)&&e.length>0)return e.filter(t=>"string"==typeof t||isImageItem(t))}catch{}const t=Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"));return t.length>0?t.map(t=>t.textContent?.trim()||""):[]}itemToText(t){return isImageItem(t)?t.alt||"":t}build(){this.containerEl=document.createElement("div"),this.srOnlyEl=document.createElement("span"),this.srOnlyEl.className=`${t}__sr-only`,this.rowsEl=document.createElement("div"),this.rowsEl.className=`${t}__rows`,this.containerEl.append(this.srOnlyEl,this.rowsEl),this.append(this.containerEl)}bindResize(){this.resizeObserver=new ResizeObserver(()=>this.measure()),this.containerEl&&this.resizeObserver.observe(this.containerEl)}reconcileRows(e,r){if(this.rowsEl){for(this.rowCount=e;this.rows.length<e;){const e=document.createElement("div");e.className=`${t}__row`;const r=document.createElement("div");r.className=`${t}__track`;const s=document.createElement("div");s.className=`${t}__group`,s.setAttribute("aria-hidden","true"),r.append(s),e.append(r),this.rowsEl.append(e),this.rows.push({rowEl:e,trackEl:r,baseGroupEl:s,baseGroupWidth:0,duplicateCount:0,baseDir:1,x:0,dirState:1})}for(;this.rows.length>e;){const t=this.rows.pop();t?.rowEl.remove()}this.rows.forEach((e,s)=>{e.baseDir=s%2==0?r:-r;const i=e.baseDir<0;e.rowEl.classList.toggle(`${t}__row--right`,i),e.rowEl.style.setProperty("--db-marquee-row-index",String(s))}),this.resizeObserver&&this.rows.forEach(t=>this.resizeObserver?.observe(t.baseGroupEl))}}measure(){this.containerWidth=Math.ceil(this.containerEl?.clientWidth??0),this.rows.forEach(t=>{t.baseGroupWidth=Math.ceil(t.baseGroupEl.scrollWidth??0),t.rowEl.style.setProperty("--db-marquee-shift",`${t.baseGroupWidth+this.gap}px`),this.reconcileDuplicates(t)}),this.syncReadyState()}unbindImageListeners(){this.rows.forEach(t=>{t.baseGroupEl.querySelectorAll("img").forEach(t=>{t.removeEventListener("load",this.boundMeasure),t.removeEventListener("error",this.boundMeasure)})})}bindImageListeners(){this.rows.forEach(t=>{t.baseGroupEl.querySelectorAll("img").forEach(t=>{t.complete||(t.addEventListener("load",this.boundMeasure),t.addEventListener("error",this.boundMeasure))})})}renderItem(e){const r=document.createElement("div");if(r.className=`${t}__item`,isImageItem(e)){r.classList.add(`${t}__item--image`);const s=document.createElement("img");if(s.className=`${t}__image`,s.src=e.src,s.alt=e.alt||"",s.loading="lazy",s.decoding="async",e.height&&(s.style.height=`${e.height}px`),e.href){const i=document.createElement("a");i.className=`${t}__link`,i.href=e.href,i.setAttribute("tabindex","-1"),i.append(s),r.append(i)}else r.append(s);return r}return r.textContent=e,r}renderGroup(e,r){const s=r??document.createElement("div");return s.className=`${t}__group`,s.setAttribute("aria-hidden","true"),s.replaceChildren(...e.map(t=>this.renderItem(t))),s}buildBase(t){this.rows.forEach(e=>{for(this.renderGroup(t,e.baseGroupEl);e.trackEl.children.length>1;)e.trackEl.lastElementChild?.remove();e.duplicateCount=0})}baseImagesReady(t){return Array.from(t.baseGroupEl.querySelectorAll("img")).every(t=>t.complete)}reconcileDuplicates(t){const e=t.baseGroupWidth>0&&this.baseImagesReady(t)?Math.max(1,Math.ceil(2*this.containerWidth/t.baseGroupWidth)):1;let r=t.trackEl.children.length-1;if(r===e)return void(t.duplicateCount=e);const s=this.parseItems();for(;r<e;)t.trackEl.append(this.renderGroup(s)),r+=1;for(;r>e;)t.trackEl.lastElementChild?.remove(),r-=1;t.duplicateCount=e}syncReadyState(){if(!this.containerEl)return;const e=this.rows.length>0&&this.rows.every(t=>t.baseGroupWidth>0);this.containerEl.classList.toggle(`${t}--ready`,e)}startScrollEngine(){this.rafId||this.reduceMotion||(this.lastScrollY="undefined"!=typeof window?window.scrollY:0,this.lastFrameTime=0,this.smoothedScrollV=0,this.rows.forEach(t=>{t.x=0,t.dirState=1}),this.rafId=requestAnimationFrame(this.boundFrame))}stopScrollEngine(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0),this.rows.forEach(t=>{t.trackEl.style.transform=""})}frame(t){if(!this.scrollVelocityEnabled)return void(this.rafId=0);this.lastFrameTime||(this.lastFrameTime=t);const e=Math.min((t-this.lastFrameTime)/1e3,.05);this.lastFrameTime=t;const r="undefined"!=typeof window?window.scrollY:0,s=e>0?(r-this.lastScrollY)/e:0;this.lastScrollY=r;const i=1-Math.exp(-e/.12);this.smoothedScrollV+=(s-this.smoothedScrollV)*i;const a=Math.max(Number(this.getAttribute("scroll-boost")||6),0),o=this.smoothedScrollV/800*(a/6);this.rows.forEach(t=>{const r=t.baseGroupWidth+this.gap;if(r<=0)return;const s=r/this.baseDurationSec;let i=-t.baseDir*s*e;o<0?t.dirState=-1:o>0&&(t.dirState=1),i*=t.dirState,i+=i*Math.abs(o);let a=(t.x+i)%r;a>0&&(a-=r),t.x=a,t.trackEl.style.transform=`translate3d(${a}px, 0, 0)`}),this.rafId=requestAnimationFrame(this.boundFrame)}updateUI(){const e=this.parseItems();if(0===e.length)return this.stopScrollEngine(),void(this.hidden=!0);this.hidden=!1;const r=this.getAttribute("direction")||"left",s="right"===r?-1:1,i=Math.max(Number(this.getAttribute("duration")||12),1),a=Number(this.getAttribute("speed")||1),o=i/(Number.isFinite(a)&&a>0?a:1);this.baseDurationSec=o;const n=this.getAttribute("size")||"m",l=this.getAttribute("variant")||"default",h=this.getAttribute("align-y")||"center",c=this.getBool("fade-edges"),d=Math.max(Number(this.getAttribute("fade-width")||48),0),u=this.getAttribute("edge-padding"),m=null!==u&&""!==u?Math.max(Number(u),0):c?d:0,b=Math.max(Number(this.getAttribute("gap")||24),0);this.gap=b;const p=Math.round(Number(this.getAttribute("row-count")||1)),g=Number.isFinite(p)?Math.min(Math.max(p,1),8):1,E=Math.max(Number(this.getAttribute("row-gap")||12),0),f=this.getBool("scroll-velocity");this.scrollVelocityEnabled=f;const w=this.getBool("pause-on-hover",!0),y=this.hasAttribute("bordered")?this.getBool("bordered"):"outlined"===l,v=this.getAttribute("aria-label")||"Scrolling content";if(this.containerEl&&(this.containerEl.className=[t,`${t}--size-${n}`,`${t}--variant-${l}`,`${t}--align-${h}`,w&&!f&&`${t}--pause-on-hover`,c&&`${t}--fade-edges`,"right"===r&&`${t}--right`,g>1&&`${t}--multi-row`,f&&`${t}--scroll-velocity`,y&&`${t}--bordered`].filter(Boolean).join(" "),this.containerEl.style.setProperty("--db-marquee-duration",`${o}s`),this.containerEl.style.setProperty("--db-marquee-gap",`${b}px`),this.containerEl.style.setProperty("--db-marquee-row-gap",`${E}px`),this.containerEl.style.setProperty("--db-marquee-fade-width",`${d}px`),this.containerEl.style.setProperty("--db-marquee-edge-padding",`${m}px`),this.containerEl.setAttribute("role","region"),this.containerEl.setAttribute("aria-label",v)),this.srOnlyEl){const t=e.map(t=>this.itemToText(t)).filter(Boolean).join(" • ");this.srOnlyEl.textContent=t||v}this.reconcileRows(g,s),this.buildBase(e),this.bindImageListeners(),this.measure(),f?this.startScrollEngine():this.stopScrollEngine()}}customElements.get("db-marquee")||customElements.define("db-marquee",DbMarquee);export{DbMarquee};

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

@@ -1 +1 @@
-const e=[1,2,3,4,5,6],t=["xs","s","m","l","xl"];class DbMasonry extends HTMLElement{static get observedAttributes(){return["images","columns","spacing","hover","clickable"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}get images(){try{const e=JSON.parse(this.getAttribute("images")||"[]");return Array.isArray(e)?e.filter(e=>e&&"string"==typeof e.src):[]}catch{return[]}}set images(e){this.setAttribute("images","string"==typeof e?e:JSON.stringify(e))}boolAttr(e,t=!0){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}render(){const s=Number(this.getAttribute("columns")||3),n=e.includes(s)?s:3,a=this.getAttribute("spacing")||"m",i=t.includes(a)?a:"m",r=this.boolAttr("hover",!0),c=this.boolAttr("clickable",!0);this.className=["designbase-wc-masonry",`designbase-wc-masonry--columns-${n}`,`designbase-wc-masonry--spacing-${i}`,r&&"designbase-wc-masonry--hover",c&&"designbase-wc-masonry--clickable"].filter(Boolean).join(" ");const o=Array.from({length:n},()=>[]),m=new Array(n).fill(0);this.images.forEach(e=>{const t=m.indexOf(Math.min(...m));o[t].push(e),m[t]+=1});const d=document.createDocumentFragment();o.forEach(e=>{const t=document.createElement("div");t.className="designbase-wc-masonry__column",e.forEach(e=>{const s=this.images.indexOf(e),n=document.createElement("figure");n.className="designbase-wc-masonry__item";const a=document.createElement("img");if(a.className="designbase-wc-masonry__image",a.src=e.thumbnail||e.src,a.alt=e.alt||e.title||`image-${s+1}`,a.loading="lazy",a.addEventListener("load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{detail:{image:e,index:s},bubbles:!0,composed:!0}))}),a.addEventListener("error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{detail:{image:e,index:s},bubbles:!0,composed:!0}))}),n.append(a),e.title||e.description){const t=document.createElement("figcaption");if(t.className="designbase-wc-masonry__overlay",e.title){const s=document.createElement("h3");s.className="designbase-wc-masonry__title",s.textContent=e.title,t.append(s)}if(e.description){const s=document.createElement("p");s.className="designbase-wc-masonry__description",s.textContent=e.description,t.append(s)}n.append(t)}c&&(n.tabIndex=0,n.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{detail:{image:e,index:s},bubbles:!0,composed:!0}))})),t.append(n)}),d.append(t)}),this.replaceChildren(d)}}customElements.get("db-masonry")||customElements.define("db-masonry",DbMasonry);export{DbMasonry};
+const e=[1,2,3,4,5,6],t=["xs","s","m","l","xl"];class DbMasonry extends HTMLElement{static get observedAttributes(){return["images","columns","spacing","hover","clickable"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}get images(){try{const e=JSON.parse(this.getAttribute("images")||"[]");return Array.isArray(e)?e.filter(e=>e&&"string"==typeof e.src):[]}catch{return[]}}set images(e){this.setAttribute("images","string"==typeof e?e:JSON.stringify(e))}boolAttr(e,t=!0){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}render(){const s=Number(this.getAttribute("columns")||3),n=e.includes(s)?s:3,i=this.getAttribute("spacing")||"m",a=t.includes(i)?i:"m",r=this.boolAttr("hover",!0),c=this.boolAttr("clickable",!0);this.className=["designbase-wc-masonry",`designbase-wc-masonry--columns-${n}`,`designbase-wc-masonry--spacing-${a}`,r&&"designbase-wc-masonry--hover",c&&"designbase-wc-masonry--clickable"].filter(Boolean).join(" ");const o=document.createDocumentFragment();this.images.forEach((e,t)=>{const s=document.createElement("figure");s.className="designbase-wc-masonry__item";const n=document.createElement("img");if(n.className="designbase-wc-masonry__image",n.src=e.thumbnail||e.src,n.alt=e.alt||e.title||`image-${t+1}`,n.loading="lazy",n.addEventListener("load",()=>{this.dispatchEvent(new CustomEvent("db-image-load",{detail:{image:e,index:t},bubbles:!0,composed:!0}))}),n.addEventListener("error",()=>{this.dispatchEvent(new CustomEvent("db-image-error",{detail:{image:e,index:t},bubbles:!0,composed:!0}))}),s.append(n),e.title||e.description){const t=document.createElement("figcaption");if(t.className="designbase-wc-masonry__overlay",e.title){const s=document.createElement("h3");s.className="designbase-wc-masonry__title",s.textContent=e.title,t.append(s)}if(e.description){const s=document.createElement("p");s.className="designbase-wc-masonry__description",s.textContent=e.description,t.append(s)}s.append(t)}c&&(s.tabIndex=0,s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-image-click",{detail:{image:e,index:t},bubbles:!0,composed:!0}))})),o.append(s)}),this.replaceChildren(o)}}customElements.get("db-masonry")||customElements.define("db-masonry",DbMasonry);export{DbMasonry};