@trycourier/courier-ui-core/dist/index.js

The core UI kit for Courier Web Components

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).CourierUICore={})}(this,(function(t){"use strict";var e,n=Object.defineProperty,o=t=>{throw TypeError(t)},i=(t,e,o)=>((t,e,o)=>e in t?n(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o)(t,"symbol"!=typeof e?e+"":e,o),r=(t,e,n)=>e.has(t)||o("Cannot "+n),s=(t,e,n,o)=>(r(t,e,"write to private field"),o?o.call(t,n):e.set(t,n),n);const a={black:{400:"#0A0A0A",500:"#171717",50010:"#1717171A",50020:"#17171733"},gray:{200:"#F5F5F5",400:"#3A3A3A",500:"#E5E5E5",600:"#737373"},white:{500:"#FFFFFF",50010:"#FFFFFF1A",50020:"#FFFFFF33"},blue:{400:"#60A5FA",500:"#2563EB"}},l={light:{colors:{primary:a.black[500],secondary:a.white[500],border:a.gray[500],link:a.blue[500],icon:a.black[500]},button:{cornerRadius:"4px"}},dark:{colors:{primary:a.white[500],secondary:a.black[500],border:a.gray[400],link:a.blue[400],icon:a.white[500]},button:{cornerRadius:"4px"}}},h=()=>"undefined"==typeof window?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",d=t=>{if("undefined"==typeof window)return()=>{};const e=window.matchMedia("(prefers-color-scheme: dark)"),n=e=>{t(e.matches?"dark":"light")};return e.addEventListener("change",n),()=>{e.removeEventListener("change",n)}},c=(()=>{try{return"undefined"==typeof HTMLElement?class{}:HTMLElement}catch{return class{}}})();class u extends c{constructor(){var t,n,i;super(...arguments),t=this,i=!1,(n=e).has(t)?o("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(t):n.set(t,i)}static get id(){return"courier-base-element"}connectedCallback(){var t,n,o,i;(r(n=this,o=e,"read from private field"),i?i.call(n):o.get(n))||(s(this,e,!0),null==(t=this.onComponentMounted)||t.call(this))}disconnectedCallback(){var t;s(this,e,!1),null==(t=this.onComponentUnmounted)||t.call(this)}onComponentMounted(){}onComponentUnmounted(){}}e=new WeakMap;class C extends u{constructor(){super(),i(this,"_currentSystemTheme"),i(this,"_systemThemeCleanup"),this._currentSystemTheme=h(),this._systemThemeCleanup=d((t=>{this._currentSystemTheme=t,this.onSystemThemeChange(t)}))}static get id(){return"courier-system-theme-element"}get currentSystemTheme(){return this._currentSystemTheme}onComponentUnmounted(){var t;null==(t=this._systemThemeCleanup)||t.call(this),super.onComponentUnmounted()}onSystemThemeChange(t){}}const p={borderRadius:"4px",fontSize:"14px"},g={primary:t=>({...p,backgroundColor:l[t].colors.primary,textColor:l[t].colors.secondary,fontWeight:"500",shadow:"none"}),secondary:t=>({...p,backgroundColor:l[t].colors.secondary,textColor:l[t].colors.primary,fontWeight:"500",border:`1px solid ${l[t].colors.border}`,shadow:"light"===t?"0px 1px 2px 0px rgba(0, 0, 0, 0.06)":"0px 1px 2px 0px rgba(255, 255, 255, 0.1)"}),tertiary:t=>({...p,backgroundColor:l[t].colors.border,textColor:l[t].colors.primary,fontWeight:"500",border:"none",shadow:"none"})};class m extends C{constructor(t){super(),i(this,"_button"),i(this,"_style");const e=this.attachShadow({mode:"open"});this._button=document.createElement("button"),this._button.setAttribute("part","button"),this._style=document.createElement("style"),this._style.textContent=this.getStyles(t),e.appendChild(this._style),e.appendChild(this._button),this.updateButton(t),this._button.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation(),t.onClick&&t.onClick()}))}static get id(){return"courier-button"}getStyles(t){const e="system"===t.mode?this.currentSystemTheme:t.mode;return`\n      :host {\n        display: inline-block;\n      }\n\n      button {\n        border: none;\n        border-radius: ${t.borderRadius??g.secondary(e).borderRadius};\n        font-weight: ${t.fontWeight??g.secondary(e).fontWeight};\n        font-family: ${t.fontFamily??"inherit"};\n        font-size: ${t.fontSize??g.secondary(e).fontSize};\n        padding: 6px 10px;\n        cursor: pointer;\n        width: 100%;\n        height: 100%;\n        background-color: ${t.backgroundColor??g.secondary(e).backgroundColor};\n        color: ${t.textColor??g.secondary(e).textColor};\n        border: ${t.border??g.secondary(e).border};\n        box-shadow: ${t.shadow??g.secondary(e).shadow};\n        touch-action: manipulation;\n      }\n\n      button:hover {\n        ${t.hoverBackgroundColor?`background-color: ${t.hoverBackgroundColor};`:"filter: brightness(0.9);"}\n      }\n\n      button:active {\n        ${t.activeBackgroundColor?`background-color: ${t.activeBackgroundColor};`:"filter: brightness(0.8);"}\n      }\n\n      button:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    `}updateButton(t){t.text&&(this._button.textContent=t.text),this._style.textContent=this.getStyles(t)}}const y={inbox:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>\n</svg>',archive:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5.5 6.5V8H18.5V6.5H5.5ZM5 5H19C19.5312 5 20 5.46875 20 6V8.5C20 9.0625 19.5312 9.5 19 9.5H5C4.4375 9.5 4 9.0625 4 8.5V6C4 5.46875 4.4375 5 5 5ZM9 11.75C9 11.3438 9.3125 11 9.75 11H14.25C14.6562 11 15 11.3438 15 11.75C15 12.1875 14.6562 12.5 14.25 12.5H9.75C9.3125 12.5 9 12.1875 9 11.75ZM5 17V10.5H6.5V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V10.5H19V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17Z" fill="currentColor"/>\n</svg>',check:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M18.793 7.33203C19.0742 7.64453 19.0742 8.11328 18.793 8.39453L10.543 16.6445C10.2305 16.957 9.76172 16.957 9.48047 16.6445L5.23047 12.3945C4.91797 12.1133 4.91797 11.6445 5.23047 11.3633C5.51172 11.0508 5.98047 11.0508 6.26172 11.3633L9.98047 15.082L17.7305 7.33203C18.0117 7.05078 18.4805 7.05078 18.7617 7.33203H18.793Z" fill="currentColor"/>\n</svg>',filter:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5 7C5 6.59375 5.3125 6.25 5.75 6.25H18.25C18.6562 6.25 19 6.59375 19 7C19 7.4375 18.6562 7.75 18.25 7.75H5.75C5.3125 7.75 5 7.4375 5 7ZM7 12C7 11.5938 7.3125 11.25 7.75 11.25H16.25C16.6562 11.25 17 11.5938 17 12C17 12.4375 16.6562 12.75 16.25 12.75H7.75C7.3125 12.75 7 12.4375 7 12ZM14 17C14 17.4375 13.6562 17.75 13.25 17.75H10.75C10.3125 17.75 10 17.4375 10 17C10 16.5938 10.3125 16.25 10.75 16.25H13.25C13.6562 16.25 14 16.5938 14 17Z" fill="currentColor"/>\n</svg>',right:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M18.75 12.547L13.25 17.797C12.9375 18.0783 12.4688 18.0783 12.1875 17.7658C11.9062 17.4533 11.9062 16.9845 12.2188 16.7033L16.375 12.7345H5.75C5.3125 12.7345 5 12.422 5 11.9845C5 11.5783 5.3125 11.2345 5.75 11.2345H16.375L12.2188 7.29703C11.9062 7.01578 11.9062 6.51578 12.1875 6.23453C12.4688 5.92203 12.9688 5.92203 13.25 6.20328L18.75 11.4533C18.9062 11.6095 19 11.797 19 11.9845C19 12.2033 18.9062 12.3908 18.75 12.547Z" fill="currentColor"/>\n</svg>',remove:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M16.7969 8.27344L13.0469 12.0234L16.7656 15.7422C17.0781 16.0234 17.0781 16.4922 16.7656 16.7734C16.4844 17.0859 16.0156 17.0859 15.7344 16.7734L11.9844 13.0547L8.26562 16.7734C7.98438 17.0859 7.51562 17.0859 7.23438 16.7734C6.92188 16.4922 6.92188 16.0234 7.23438 15.7109L10.9531 11.9922L7.23438 8.27344C6.92188 7.99219 6.92188 7.52344 7.23438 7.21094C7.51562 6.92969 7.98438 6.92969 8.29688 7.21094L12.0156 10.9609L15.7344 7.24219C16.0156 6.92969 16.4844 6.92969 16.7969 7.24219C17.0781 7.52344 17.0781 7.99219 16.7969 8.27344Z" fill="currentColor"/>\n</svg>',overflow:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M18.5117 11.9883C18.5117 12.5508 18.1992 13.0195 17.7617 13.3008C17.293 13.582 16.6992 13.582 16.2617 13.3008C15.793 13.0195 15.5117 12.5508 15.5117 11.9883C15.5117 11.457 15.793 10.9883 16.2617 10.707C16.6992 10.4258 17.293 10.4258 17.7617 10.707C18.1992 10.9883 18.5117 11.457 18.5117 11.9883ZM13.5117 11.9883C13.5117 12.5508 13.1992 13.0195 12.7617 13.3008C12.293 13.582 11.6992 13.582 11.2617 13.3008C10.793 13.0195 10.5117 12.5508 10.5117 11.9883C10.5117 11.457 10.793 10.9883 11.2617 10.707C11.6992 10.4258 12.293 10.4258 12.7617 10.707C13.1992 10.9883 13.5117 11.457 13.5117 11.9883ZM7.01172 13.4883C6.44922 13.4883 5.98047 13.207 5.69922 12.7383C5.41797 12.3008 5.41797 11.707 5.69922 11.2383C5.98047 10.8008 6.44922 10.4883 7.01172 10.4883C7.54297 10.4883 8.01172 10.8008 8.29297 11.2383C8.57422 11.707 8.57422 12.3008 8.29297 12.7383C8.01172 13.207 7.54297 13.4883 7.01172 13.4883Z" fill="currentColor"/>\n</svg>',read:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7 6.5C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5H7ZM5 7C5 5.90625 5.875 5 7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7ZM15.5312 10.5312L11.5312 14.5312C11.2188 14.8438 10.75 14.8438 10.4688 14.5312L8.46875 12.5312C8.15625 12.25 8.15625 11.7812 8.46875 11.5C8.75 11.1875 9.21875 11.1875 9.53125 11.5L11 12.9688L14.4688 9.46875C14.75 9.1875 15.2188 9.1875 15.5 9.46875C15.8125 9.78125 15.8125 10.25 15.5 10.5312H15.5312Z" fill="currentColor"/>\n</svg>',archiveRead:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.5 6.5V15.25H16.5V6.5H7.5ZM6 15.25V6.5C6 5.6875 6.65625 5 7.5 5H16.5C17.3125 5 18 5.6875 18 6.5V15.25C18.4062 15.25 18.75 15.5938 18.75 16C18.75 16.4375 18.4062 16.75 18 16.75H6C5.5625 16.75 5.25 16.4375 5.25 16C5.25 15.5938 5.5625 15.25 6 15.25ZM5 13V14.5H4.5V17.5H19.5V14.5H19V13H19.5C20.3125 13 21 13.6875 21 14.5V17.5C21 18.3438 20.3125 19 19.5 19H4.5C3.65625 19 3 18.3438 3 17.5V14.5C3 13.6875 3.65625 13 4.5 13H5ZM15.0312 9.625L11.6875 12.9688C11.5312 13.0938 11.3438 13.1875 11.1562 13.1875C10.9375 13.1875 10.75 13.0938 10.625 12.9688L8.96875 11.2812C8.65625 11 8.65625 10.5312 8.96875 10.25C9.25 9.9375 9.71875 9.9375 10 10.25L11.1562 11.375L13.9688 8.5625C14.25 8.28125 14.7188 8.28125 15 8.5625C15.3125 8.875 15.3125 9.34375 15 9.625H15.0312Z" fill="currentColor"/>\n</svg>',unread:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17 6.5H7C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5ZM7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7C5 5.90625 5.875 5 7 5Z" fill="currentColor"/>\n</svg>',unarchive:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>\n</svg>'};class b extends u{constructor(t,e){super(),i(this,"_color"),i(this,"_svg"),i(this,"_iconContainer"),i(this,"_style"),this._color=t??a.black[500],this._svg=e;const n=this.attachShadow({mode:"open"});this._iconContainer=document.createElement("div"),n.appendChild(this._iconContainer),this._style=document.createElement("style"),this._style.textContent=this.getStyles(this._color),n.appendChild(this._style),this.refresh()}static get id(){return"courier-icon"}getStyles(t){return`\n      :host {\n        display: inline-block;\n        line-height: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      svg {\n        width: 24px;\n        height: 24px;\n        color: ${t};\n      }\n    `}refresh(){this._svg&&(this._iconContainer.innerHTML=this._svg),this._color&&(this._style.textContent=this.getStyles(this._color))}updateColor(t){this._color=t,this.refresh()}updateSVG(t){this._svg=t,this.refresh()}}class f extends u{constructor(){super(),i(this,"link");const t=this.attachShadow({mode:"open"});this.link=document.createElement("a"),this.link.setAttribute("part","link");const e=document.createElement("style");e.textContent=`\n      :host {\n        display: inline-block;\n      }\n\n      a {\n        text-decoration: none;\n        border-radius: 4px;\n        cursor: pointer;\n        font-weight: 500;\n        transition: all 0.2s ease;\n        font-family: var(--courier-link-font-family, inherit);\n        font-size: var(--courier-link-font-size, inherit);\n      }\n\n      /* Variants */\n      a[data-variant="primary"][data-mode="light"] {\n        color: var(--courier-link-color, ${l.light.colors.link});\n      }\n\n      a[data-variant="primary"][data-mode="light"]:hover {\n        opacity: 0.8;\n      }\n\n      a[data-variant="primary"][data-mode="light"]:active {\n        opacity: 0.6;\n      }\n\n      a[data-variant="primary"][data-mode="dark"] {\n        color: var(--courier-link-color, ${l.dark.colors.link});\n      }\n\n      a[data-variant="primary"][data-mode="dark"]:hover {\n        opacity: 0.8;\n      }\n\n      a[data-variant="primary"][data-mode="dark"]:active {\n        opacity: 0.6;\n      }\n\n      a[data-underline="true"] {\n        text-decoration: underline;\n      }\n\n      a:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n    `,t.appendChild(e),t.appendChild(this.link),this.updateVariant(),this.updateUnderline(),this.updateMode()}static get id(){return"courier-link"}connectedCallback(){const t=document.createElement("slot");this.link.appendChild(t),this.updateHref()}attributeChangedCallback(t,e,n){if(e!==n)switch(t){case"href":this.updateHref();break;case"variant":case"mode":this.updateVariant();break;case"disabled":this.link.style.pointerEvents=this.hasAttribute("disabled")?"none":"auto",this.link.style.opacity=this.hasAttribute("disabled")?"0.6":"1";break;case"color":this.updateColor();break;case"underline":this.updateUnderline();break;case"target":this.updateTarget();break;case"font-family":this.updateFontFamily();break;case"font-size":this.updateFontSize()}}updateHref(){const t=this.getAttribute("href");t&&(this.link.href=t)}updateVariant(){const t=this.getAttribute("variant")||"primary",e=this.getAttribute("mode")||"light";this.link.setAttribute("data-variant",t),this.link.setAttribute("data-mode",e)}updateColor(){const t=this.getAttribute("color");t?this.link.style.setProperty("--courier-link-color",t):this.link.style.removeProperty("--courier-link-color")}updateUnderline(){const t="true"===this.getAttribute("underline");this.link.setAttribute("data-underline",t.toString())}updateMode(){const t=this.getAttribute("mode")||"light";this.link.setAttribute("data-mode",t)}updateTarget(){const t=this.getAttribute("target");t&&(this.link.target=t)}updateFontFamily(){const t=this.getAttribute("font-family");t?this.link.style.setProperty("--courier-link-font-family",t):this.link.style.removeProperty("--courier-link-font-family")}updateFontSize(){const t=this.getAttribute("font-size");t?this.link.style.setProperty("--courier-link-font-size",t):this.link.style.removeProperty("--courier-link-font-size")}}i(f,"observedAttributes",["href","variant","disabled","color","underline","mode","target","font-family","font-size"]);class v extends C{constructor(){super()}build(t){if(null===t)return void this.replaceChildren();const e=t??this.defaultElement();this.replaceChildren(e)}defaultElement(){const t=document.createElement("div");return t.textContent="Default Element Factory",t.style.cssText="\n      background-color: red;\n      text-align: center;\n      padding: 12px;\n    ",t}}class w extends v{constructor(t){super(),i(this,"_props"),i(this,"_title"),i(this,"_button"),i(this,"_style"),this._props=t}static get id(){return"courier-info-state"}defaultElement(){var t;const e=document.createElement("div");return this._title=document.createElement("h2"),(null==(t=this._props.title)?void 0:t.text)&&(this._title.textContent=this._props.title.text),this._button=new m(this._props.button??g.secondary(this.currentSystemTheme)),this._style=document.createElement("style"),this._style.textContent=this.getStyles(this._props),e.className="container",e.appendChild(this._style),e.appendChild(this._title),e.appendChild(this._button),this.appendChild(e),e}onSystemThemeChange(t){this.updateStyles(this._props)}getStyles(t){var e,n,o,i;return`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        width: 100%;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 16px;\n        text-align: center;\n        padding: 24px;\n        box-sizing: border-box;\n        height: 100%;\n      }\n\n      .container h2 {\n        margin: 0;\n        color: ${(null==(e=t.title)?void 0:e.textColor)??"red"};\n        font-size: ${(null==(n=t.title)?void 0:n.fontSize)??"16px"};\n        font-weight: ${(null==(o=t.title)?void 0:o.fontWeight)??"500"};\n        font-family: ${(null==(i=t.title)?void 0:i.fontFamily)??"inherit"};\n      }\n    `}updateStyles(t){this._props=t,this._style&&(this._style.textContent=this.getStyles(t)),this._button&&this._button.updateButton(t.button)}}class k extends u{constructor(t,e,n,o,r,s,a,l){super(),i(this,"_backgroundColor"),i(this,"_hoverBackgroundColor"),i(this,"_activeBackgroundColor"),i(this,"_borderRadius"),i(this,"_height"),i(this,"_width"),i(this,"_style"),i(this,"_button"),i(this,"_icon"),this._borderRadius=s,this._backgroundColor=n,this._hoverBackgroundColor=o,this._activeBackgroundColor=r,this._height=a,this._width=l;const h=this.attachShadow({mode:"open"});this._button=document.createElement("button"),this._button.setAttribute("part","button"),this._icon=new b(e,t),this._style=document.createElement("style"),this.refresh(),h.appendChild(this._style),this._button.appendChild(this._icon),h.appendChild(this._button)}static get id(){return"courier-icon-button"}refresh(){this._style.textContent=this.getStyles()}getStyles(){return`\n      :host {\n        display: inline-block;\n        border-radius: ${this._borderRadius??"50%"};\n      }\n\n      button {\n        border: none;\n        border-radius: ${this._borderRadius??"50%"};\n        cursor: pointer;\n        width: ${this._width??"36px"};\n        height: ${this._height??"36px"};\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: ${this._backgroundColor??"transparent"};\n        transition: background-color 0.2s ease;\n        touch-action: manipulation;\n      }\n\n      button:hover {\n        background-color: ${this._hoverBackgroundColor??"red"};\n      }\n\n      button:active {\n        background-color: ${this._activeBackgroundColor??"red"};\n      }\n\n      button:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      [part="icon"] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n      }\n    `}updateIconColor(t){this._icon.updateColor(t)}updateIconSVG(t){this._icon.updateSVG(t)}updateBackgroundColor(t){this._backgroundColor=t,this.refresh()}updateHoverBackgroundColor(t){this._hoverBackgroundColor=t,this.refresh()}updateActiveBackgroundColor(t){this._activeBackgroundColor=t,this.refresh()}}function _(t){"undefined"==typeof window||customElements.get(t.id)||customElements.define(t.id,t)}_(m),_(b),_(f),_(w),_(k),_(C),t.CourierBaseElement=u,t.CourierButton=m,t.CourierButtonVariants=g,t.CourierColors=a,t.CourierFactoryElement=v,t.CourierIcon=b,t.CourierIconButton=k,t.CourierIconSVGs=y,t.CourierInfoState=w,t.CourierLink=f,t.CourierSystemThemeElement=C,t.addSystemThemeModeListener=d,t.getSystemThemeMode=h,t.injectGlobalStyle=function(t,e){const n=`style[data-${t}]`,o=document.querySelector(n);if(!o){const n=document.createElement("style");return n.setAttribute(`data-${t}`,""),n.textContent=e,document.head.appendChild(n),n}return o},t.registerElement=_,t.theme=l,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=index.js.map