@ahriknow/lux 0.0.1

package/dist/components/lux-code/index.min.js

@@ -0,0 +1,290 @@
+const e=Symbol.for("lux-nothing");function t(e,...t){return{_$luxType$:1,strings:e,values:t}}function r(e){return e&&void 0!==e._$luxType$}const o=/(?:([@.?][\w-]+)|(ref)|(class))=\s*$/;function s(t,o,s){if(o!==e&&null!=o)if(function(e){return e&&"repeat"===e._type}(o))!function(e,t){const{items:o,keyFn:s,renderFn:i}=t,n=e._repeatState;if(n)for(const e of n.entries)e.span&&e.span.parentNode&&e.span.parentNode.removeChild(e.span);const l=document.createDocumentFragment(),c=[];for(const e of o){const t=s(e),o=i(e),n=document.createElement("span");n.style.display="contents",r(o)?a(o,n):null!=o&&!1!==o&&n.appendChild(document.createTextNode(String(o))),l.appendChild(n),c.push({key:t,result:o,span:n})}e.appendChild(l),e._repeatState={entries:c}}(t,o);else if(r(o))a(o,t);else if(Array.isArray(o)){i(t);for(const e of o)if(r(e)){const r=document.createElement("span");r.style.display="contents",a(e,r),t.appendChild(r)}else e instanceof Node?t.appendChild(e):null!=e&&!1!==e&&t.appendChild(document.createTextNode(String(e)))}else{if(o instanceof Node)return i(t),void t.appendChild(o);1===t.childNodes.length&&t.firstChild.nodeType===Node.TEXT_NODE?t.firstChild.textContent=String(o):(i(t),t.appendChild(document.createTextNode(String(o))))}else i(t)}function i(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function n(t,r){const{element:o,name:s,prefix:i}=t;switch(i){case"@":{const i=t.committedValue,n=null==r||r===e,a=n&&null!=i||r?.capture!==i?.capture||r?.once!==i?.once||r?.passive!==i?.passive,l=!n&&(null==i||a);if(a&&o.removeEventListener(s,t._handler||i,i),l)if("function"==typeof r){const e=t._host||(t._host={handleEvent(e){const r=t.committedValue;if("function"==typeof r){const t=o.getRootNode().host||o;r.call(t,e)}}});t._handler=e,o.addEventListener(s,e)}else if("object"==typeof r&&r?.handleEvent){const e={handleEvent:e=>r.handleEvent.call(r,e)};t._handler=e,o.addEventListener(s,e,{capture:r.capture,once:r.once,passive:r.passive})}t.committedValue=r;break}case".":o[s]=r===e?void 0:r;break;case"?":o.toggleAttribute(s,!!r);break;case"ref":"function"==typeof r&&r(o);break;case"class":if("string"==typeof r)o.className=r;else if("object"==typeof r&&null!=r){const e=o.className||"",t=e?e.split(/\s+/):[];for(const[e,o]of Object.entries(r))if(o)t.includes(e)||t.push(e);else{const r=t.indexOf(e);-1!==r&&t.splice(r,1)}o.className=t.filter(Boolean).join(" ")}break;default:null==r||!1===r?o.removeAttribute(s):o.setAttribute(s,!0===r?"":String(r))}}function a(e,t,i){if(!r(e))return void(t.textContent=e??"");const{strings:a,values:l}=e;if(t._luxActiveParts&&t._luxStrings===a){for(const e of t._luxActiveParts)e.index<l.length&&("child"===e.type?s(e.span,l[e.index]):n(e,l[e.index]));return}const c=document.createElement("template"),d=function(e){const t=[];let r="";for(let s=0;s<e.length;s++)if(r+=e[s],s<e.length-1){const e=r.match(o);if(e){const o=e[1],i=!!e[2],n=!!e[3];let a="",l="";o?(a=o[0],l=o.slice(1)):i?(a="ref",l="ref"):n&&(a="class",l="class");const c=`lux-attr-${s}`;r=r.slice(0,-e[0].length)+`${c}="${l}" `,t.push({type:"attr",name:l,prefix:a,marker:c,index:s})}else{const e=`lux-${s}`;r+=`\x3c!--${e}--\x3e`,t.push({type:"child",marker:e,index:s})}}return{html:r,parts:t}}(a);c.innerHTML=d.html;const h=c.content.cloneNode(!0),p=[];for(const e of d.parts)if("child"===e.type){const t=document.createTreeWalker(h,NodeFilter.SHOW_COMMENT);let r;for(;r=t.nextNode();)if(r.data===e.marker){const t=document.createElement("span");t.style.display="contents",r.parentNode.replaceChild(t,r),s(t,l[e.index]),p.push({type:"child",span:t,index:e.index});break}}else{const t=h.querySelector(`[${e.marker}]`);if(t){t.removeAttribute(e.marker);const r={type:"attr",element:t,name:e.name,prefix:e.prefix,index:e.index,committedValue:void 0};n(r,l[e.index]),p.push(r)}}t.textContent="",t.appendChild(h),t._luxActiveParts=p,t._luxStrings=a}const l=new Set;let c=!1;function d(e){var t;l.add(e),c||(c=!0,t=()=>{c=!1;const e=[...l];l.clear();for(const t of e)t._$performUpdate()},Promise.resolve().then(t))}const h={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?null:JSON.stringify(e);default:return e}},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return Number(e);case Object:case Array:try{return JSON.parse(e)}catch{return null}default:return e}}};class p extends HTMLElement{static properties={};static styles=void 0;static finalized=!1;static elementProperties=new Map;static __prepare(){if(this.hasOwnProperty("elementProperties"))return;const e=Object.getPrototypeOf(this);e.finalize&&e.finalize(),this.elementProperties=new Map(e.elementProperties)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap?[...this.__attributeToPropertyMap.keys()]:[]}static finalize(){if(!this.hasOwnProperty("finalized")){if(this.finalized=!0,this.__prepare(),this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const r of t)this.createProperty(r,e[r])}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const r=this.__attributeNameForProperty(e,t);void 0!==r&&this.__attributeToPropertyMap.set(r,e)}this.elementStyles=this.styles}}static __attributeNameForProperty(e,t){const r=t.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof e?e.replace(/([A-Z])/g,"-$1").toLowerCase():void 0}static createProperty(e,t={}){if(this.__prepare(),!this.elementProperties.has(e)&&(t.state&&(t={...t,attribute:!1}),this.elementProperties.set(e,t),!t.noAccessor)){const r=Symbol(),o=this.getPropertyDescriptor(e,r,t);void 0!==o&&Object.defineProperty(this.prototype,e,o)}}static getPropertyDescriptor(e,t,r){const{type:o,reflect:s,converter:i}=r;return{get(){return this[t]},set(o){const s=this[t];this[t]=o,this.requestUpdate(e,s,r)},configurable:!0,enumerable:!0}}static _initializers=[];static addInitializer(e){this._initializers=[...this._initializers||[],e]}static shadowRootOptions={mode:"open"};constructor(){super(),this.__updatePending=!1,this.__hasUpdated=!1,this.__controllers=new Set,this.__reflectingProperty=null,this.constructor.hasOwnProperty("finalized")||this.constructor.finalize(),this.__saveInstanceProperties(),this.requestUpdate();for(const e of this.constructor._initializers||[])e(this)}__saveInstanceProperties(){const e=this.constructor.elementProperties;if(e)for(const[t,r]of e)if(!r.noAccessor&&this.hasOwnProperty(t)){const e=this[t];delete this[t],this.__instancePropertyValues=this.__instancePropertyValues||new Map,this.__instancePropertyValues.set(t,e)}}connectedCallback(){this.__controllers.forEach(e=>e.hostConnected?.()),this.constructor.hasOwnProperty("finalized")||this.constructor.finalize();const e=this.constructor.__attributeToPropertyMap;if(e)for(const[t,r]of e){const e=this.getAttribute(t);if(null!==e){const t=this.constructor.elementProperties.get(r);if(t){const o=t.converter?.fromAttribute??h.fromAttribute;this[r]=o(e,t.type)}}}if(this.__instancePropertyValues){for(const[e,t]of this.__instancePropertyValues)this[e]=t;this.__instancePropertyValues=void 0}this.renderRoot,this.__hasUpdated||this.requestUpdate()}disconnectedCallback(){this.__controllers.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,r){const o=this.constructor.__attributeToPropertyMap?.get(e);if(void 0!==o&&this.__reflectingProperty!==o){const e=this.constructor.elementProperties.get(o);if(e){const t="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:h;this.__reflectingProperty=o;const s=t.fromAttribute(r,e.type);this[o]=s,this.__reflectingProperty=null}}}get renderRoot(){return this._renderRoot||(this._renderRoot=this.createRenderRoot(),this.__adoptStyles()),this._renderRoot}createRenderRoot(){return this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions)}__adoptStyles(){const e=this.constructor.elementStyles;if(!e)return;const t=Array.isArray(e)?e:[e],o=[];for(const e of t)"string"==typeof e?o.push(e):r(e)&&o.push(e.strings.join(""));if(0!==o.length)if(void 0!==this._renderRoot.adoptedStyleSheets){const e=new CSSStyleSheet;e.replaceSync(o.join("\n")),this._renderRoot.adoptedStyleSheets=[...this._renderRoot.adoptedStyleSheets,e]}else{const e=document.createElement("style");e.textContent=o.join("\n"),this._renderRoot.appendChild(e)}}enableUpdating(e){}get updateComplete(){return this.__updateCompletePromise??Promise.resolve()}get hasUpdated(){return this.__hasUpdated}get isUpdatePending(){return this.__updatePending}requestUpdate(e,t,r){if(void 0!==e){if(!(r?.hasChanged??((e,t)=>!Object.is(e,t)))(this[e],t))return}this.__updatePending||(this.__updatePending=!0,d(this))}async performUpdate(){if(this.isUpdatePending){this.__updatePending=!1,this.willUpdate(new Map),this.__controllers.forEach(e=>e.hostUpdate?.()),this.update(new Map),this.__hasUpdated=!0;for(const[e,t]of this.constructor.elementProperties)if(t.reflect){const r=this[e],o=t.converter?.toAttribute??h.toAttribute,s=this.constructor.__attributeNameForProperty(e,t);if(void 0!==s){this.__reflectingProperty=e;const i=o(r,t.type);null==i?this.removeAttribute(s):this.setAttribute(s,String(i)),this.__reflectingProperty=null}}this.__controllers.forEach(e=>e.hostUpdated?.()),this.firstUpdated(new Map),this.updated(new Map)}}_$performUpdate(){this.performUpdate()}shouldUpdate(e){return!0}willUpdate(e){}update(e){const t=this.render();t&&a(t,this.renderRoot)}render(){return t``}firstUpdated(e){}updated(e){}propertyChangedCallback(e,t,r){}addController(e){this.__controllers.add(e),this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers.delete(e)}emit(e,t,r={}){return this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,...r}))}$(e){return this.renderRoot.querySelector(e)}$$(e){return this.renderRoot.querySelectorAll(e)}}const u=(function(e,...t){return{_$luxType$:3,strings:e,values:t}})`
+    :host {
+        display: block;
+        position: relative;
+        margin: 12px 0;
+        border-radius: var(--lux-radius, 6px);
+        border: 1px solid rgb(var(--lux-code-border, 226 232 240));
+    }
+
+    :host(.has-fixed-height) {
+        display: flex;
+        flex-direction: column;
+    }
+
+    :host(.has-fixed-height) .code-body {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+    }
+
+    :host(.has-fixed-height) pre {
+        flex: 1;
+        min-height: 0;
+    }
+
+    /* ── Header ── */
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 14px;
+        background: rgb(var(--lux-code-header, 241 245 249));
+        border-bottom: 1px solid rgb(var(--lux-code-border, 226 232 240));
+        font-size: 12px;
+        color: rgb(var(--lux-text-muted, 100 116 139));
+    }
+    .header.hidden {
+        display: none;
+    }
+
+    .dots {
+        display: flex;
+        gap: 8px;
+    }
+    .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+    }
+    .dot-red {
+        background: #ff5f57;
+    }
+    .dot-yellow {
+        background: #ffbd2e;
+    }
+    .dot-green {
+        background: #28c840;
+    }
+
+    .header-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .lang-label {
+        font-size: 11px;
+        color: rgb(var(--lux-text-muted, 100 116 139));
+        opacity: 0.7;
+    }
+
+    .copy-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+    .copy-btn:hover {
+        background: rgb(var(--lux-hover, 0 0 0 / 5%));
+        color: rgb(var(--lux-text, 15 23 42));
+    }
+
+    /* ── Floating copy (no header) ── */
+    .copy-float {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        background: rgb(var(--lux-code-header, 241 245 249));
+        border: 1px solid rgb(var(--lux-code-border, 226 232 240));
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        cursor: pointer;
+        transition: all 0.15s;
+        z-index: 1;
+    }
+    .copy-float:hover {
+        background: rgb(var(--lux-hover, 0 0 0 / 5%));
+        color: rgb(var(--lux-text, 15 23 42));
+    }
+    :host(:not([show-header]):hover) .copy-float {
+        display: flex;
+    }
+
+    /* ── Code block ── */
+    .code-body {
+        padding: 14px 18px;
+        position: relative;
+        background: rgb(var(--lux-code-bg, 248 250 252));
+        border-radius: 0 0 var(--lux-radius, 6px) var(--lux-radius, 6px);
+        overflow: auto;
+    }
+    :host([show-header]) .code-body {
+        border-radius: 0;
+    }
+
+    pre {
+        margin: 0;
+        padding: 0;
+        font-size: 13px;
+        line-height: 1.7;
+        font-family: var(--lux-font-mono, 'SF Mono', Consolas, monospace);
+        color: rgb(var(--lux-code-text, 51 65 85));
+    }
+
+    pre code {
+        display: block;
+        padding: 0;
+    }
+
+    .code-body::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    .code-body::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .code-body::-webkit-scrollbar-thumb {
+        background: rgb(var(--lux-scrollbar, 180 196 214));
+        border-radius: 4px;
+    }
+    .code-body::-webkit-scrollbar-thumb:hover {
+        background: rgb(var(--lux-text-muted, 100 116 139));
+    }
+    .code-body {
+        scrollbar-width: thin;
+        scrollbar-color: rgb(var(--lux-scrollbar, 180 196 214)) transparent;
+    }
+
+    pre code {
+        display: block;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        background: transparent;
+        padding: 0;
+        white-space: pre;
+    }
+
+    /* ── highlight.js token styles via CSS variables ── */
+    .hljs-keyword,
+    .hljs-doctag,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable.language_ {
+        color: rgb(var(--lux-code-keyword));
+    }
+    .hljs-string,
+    .hljs-meta .hljs-string,
+    .hljs-regexp {
+        color: rgb(var(--lux-code-string));
+    }
+    .hljs-number,
+    .hljs-literal,
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-id,
+    .hljs-variable {
+        color: rgb(var(--lux-code-number));
+    }
+    .hljs-comment,
+    .hljs-quote,
+    .hljs-formula,
+    .hljs-code {
+        color: rgb(var(--lux-code-comment));
+        font-style: italic;
+    }
+    .hljs-title.class_,
+    .hljs-title.class_.inherited__ {
+        color: rgb(var(--lux-code-class));
+    }
+    .hljs-title.function_ {
+        color: rgb(var(--lux-code-function));
+    }
+    .hljs-variable {
+        color: rgb(var(--lux-code-variable));
+    }
+    .hljs-tag,
+    .hljs-name,
+    .hljs-selector-pseudo,
+    .hljs-selector-tag {
+        color: rgb(var(--lux-code-tag));
+    }
+    .hljs-attr {
+        color: rgb(var(--lux-code-attr));
+    }
+    .hljs-selector-class {
+        color: rgb(var(--lux-code-selector));
+    }
+    .hljs-literal {
+        color: rgb(var(--lux-code-literal));
+    }
+    .hljs-symbol {
+        color: rgb(var(--lux-code-symbol));
+    }
+    .hljs-built_in {
+        color: rgb(var(--lux-code-built-in));
+    }
+    .hljs-meta {
+        color: rgb(var(--lux-code-meta));
+    }
+    .hljs-section {
+        color: rgb(var(--lux-code-section));
+        font-weight: 700;
+    }
+    .hljs-bullet {
+        color: rgb(var(--lux-code-bullet));
+    }
+    .hljs-operator {
+        color: rgb(var(--lux-code-operator));
+    }
+    .hljs-punctuation {
+        color: rgb(var(--lux-code-punctuation));
+    }
+    .hljs-subst {
+        color: rgb(var(--lux-code-text));
+    }
+    .hljs-addition {
+        color: rgb(var(--lux-code-addition));
+    }
+    .hljs-deletion {
+        color: rgb(var(--lux-code-deletion));
+    }
+    .hljs-emphasis {
+        font-style: italic;
+    }
+    .hljs-strong {
+        font-weight: 700;
+    }
+
+    .copied {
+        color: rgb(var(--lux-success, 34 197 94)) !important;
+    }
+`,f=t`<span class="icon-svg" style="width:14px;height:14px;fill:currentColor"
+    ><svg viewBox="0 0 24 24">
+        <path
+            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+        /></svg
+></span>`;class g extends p{static styles=u;static properties={code:{type:String},language:{type:String,reflect:!0},showHeader:{type:Boolean,attribute:"show-header",reflect:!0},showLanguage:{type:Boolean,attribute:"show-language",reflect:!0},showCopy:{type:Boolean,attribute:"show-copy",reflect:!0}};constructor(){super(),this.code=this.code||"",this.language=this.language||"",this.showHeader=this.showHeader??!1,this.showLanguage=this.showLanguage??!0,this.showCopy=this.showCopy??!0}updated(){this._highlight(),this._checkHeight()}_checkHeight(){const e=this.shadowRoot.host,t=e.getAttribute("style")||"",r=/height\s*:/i.test(t);e.classList.toggle("has-fixed-height",r)}_highlight(){const e=this.renderRoot.querySelector("code");if(!e||!this.code)return;e.textContent=this.code;const t=window.hljs;if(t){const r=String(this.language||"");r&&(e.className=`language-${r}`);try{t.highlightElement(e)}catch(e){}}}async _copy(){try{await navigator.clipboard.writeText(this.code);this.renderRoot.querySelectorAll(".copy-btn, .copy-float").forEach(e=>{e.classList.add("copied"),setTimeout(()=>e.classList.remove("copied"),2e3)}),this.emit("copy",{code:this.code})}catch{}}render(){return t`
+            <div class=${{header:!0,hidden:!this.showHeader}}>
+                <div class="dots">
+                    <span class="dot dot-red"></span>
+                    <span class="dot dot-yellow"></span>
+                    <span class="dot dot-green"></span>
+                </div>
+                <div class="header-right">
+                    ${this.showLanguage?t`<span class="lang-label">${this.language||"text"}</span>`:""}
+                    ${this.showCopy?t`<button class="copy-btn" @click=${()=>this._copy()}>${f}</button>`:""}
+                </div>
+            </div>
+            ${!this.showHeader&&this.showCopy?t`<button class="copy-float" @click=${()=>this._copy()}>${f}</button>`:""}
+            <div class="code-body">
+                <pre><code></code></pre>
+            </div>
+        `}}!function(e,t){if(!e.includes("-"))throw new Error(`Component name must contain a hyphen: ${e}`);customElements.get(e)||customElements.define(e,t)}("lux-code",g);export{g as default};

package/dist/components/lux-dropdown/index.iife.min.js

@@ -0,0 +1,162 @@
+var LuxDropdown=function(){"use strict";const e=Symbol.for("lux-nothing");function t(e,...t){return{_$luxType$:1,strings:e,values:t}}function r(e){return e&&void 0!==e._$luxType$}const s=/(?:([@.?][\w-]+)|(ref)|(class))=\s*$/;function i(t,s,i){if(s!==e&&null!=s)if(function(e){return e&&"repeat"===e._type}(s))!function(e,t){const{items:s,keyFn:i,renderFn:n}=t,o=e._repeatState;if(o)for(const e of o.entries)e.span&&e.span.parentNode&&e.span.parentNode.removeChild(e.span);const l=document.createDocumentFragment(),c=[];for(const e of s){const t=i(e),s=n(e),o=document.createElement("span");o.style.display="contents",r(s)?a(s,o):null!=s&&!1!==s&&o.appendChild(document.createTextNode(String(s))),l.appendChild(o),c.push({key:t,result:s,span:o})}e.appendChild(l),e._repeatState={entries:c}}(t,s);else if(r(s))a(s,t);else if(Array.isArray(s)){n(t);for(const e of s)if(r(e)){const r=document.createElement("span");r.style.display="contents",a(e,r),t.appendChild(r)}else e instanceof Node?t.appendChild(e):null!=e&&!1!==e&&t.appendChild(document.createTextNode(String(e)))}else{if(s instanceof Node)return n(t),void t.appendChild(s);1===t.childNodes.length&&t.firstChild.nodeType===Node.TEXT_NODE?t.firstChild.textContent=String(s):(n(t),t.appendChild(document.createTextNode(String(s))))}else n(t)}function n(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function o(t,r){const{element:s,name:i,prefix:n}=t;switch(n){case"@":{const n=t.committedValue,o=null==r||r===e,a=o&&null!=n||r?.capture!==n?.capture||r?.once!==n?.once||r?.passive!==n?.passive,l=!o&&(null==n||a);if(a&&s.removeEventListener(i,t._handler||n,n),l)if("function"==typeof r){const e=t._host||(t._host={handleEvent(e){const r=t.committedValue;if("function"==typeof r){const t=s.getRootNode().host||s;r.call(t,e)}}});t._handler=e,s.addEventListener(i,e)}else if("object"==typeof r&&r?.handleEvent){const e={handleEvent:e=>r.handleEvent.call(r,e)};t._handler=e,s.addEventListener(i,e,{capture:r.capture,once:r.once,passive:r.passive})}t.committedValue=r;break}case".":s[i]=r===e?void 0:r;break;case"?":s.toggleAttribute(i,!!r);break;case"ref":"function"==typeof r&&r(s);break;case"class":if("string"==typeof r)s.className=r;else if("object"==typeof r&&null!=r){const e=s.className||"",t=e?e.split(/\s+/):[];for(const[e,s]of Object.entries(r))if(s)t.includes(e)||t.push(e);else{const r=t.indexOf(e);-1!==r&&t.splice(r,1)}s.className=t.filter(Boolean).join(" ")}break;default:null==r||!1===r?s.removeAttribute(i):s.setAttribute(i,!0===r?"":String(r))}}function a(e,t,n){if(!r(e))return void(t.textContent=e??"");const{strings:a,values:l}=e;if(t._luxActiveParts&&t._luxStrings===a){for(const e of t._luxActiveParts)e.index<l.length&&("child"===e.type?i(e.span,l[e.index]):o(e,l[e.index]));return}const c=document.createElement("template"),p=function(e){const t=[];let r="";for(let i=0;i<e.length;i++)if(r+=e[i],i<e.length-1){const e=r.match(s);if(e){const s=e[1],n=!!e[2],o=!!e[3];let a="",l="";s?(a=s[0],l=s.slice(1)):n?(a="ref",l="ref"):o&&(a="class",l="class");const c=`lux-attr-${i}`;r=r.slice(0,-e[0].length)+`${c}="${l}" `,t.push({type:"attr",name:l,prefix:a,marker:c,index:i})}else{const e=`lux-${i}`;r+=`\x3c!--${e}--\x3e`,t.push({type:"child",marker:e,index:i})}}return{html:r,parts:t}}(a);c.innerHTML=p.html;const d=c.content.cloneNode(!0),h=[];for(const e of p.parts)if("child"===e.type){const t=document.createTreeWalker(d,NodeFilter.SHOW_COMMENT);let r;for(;r=t.nextNode();)if(r.data===e.marker){const t=document.createElement("span");t.style.display="contents",r.parentNode.replaceChild(t,r),i(t,l[e.index]),h.push({type:"child",span:t,index:e.index});break}}else{const t=d.querySelector(`[${e.marker}]`);if(t){t.removeAttribute(e.marker);const r={type:"attr",element:t,name:e.name,prefix:e.prefix,index:e.index,committedValue:void 0};o(r,l[e.index]),h.push(r)}}t.textContent="",t.appendChild(d),t._luxActiveParts=h,t._luxStrings=a}const l=new Set;let c=!1;function p(e){var t;l.add(e),c||(c=!0,t=()=>{c=!1;const e=[...l];l.clear();for(const t of e)t._$performUpdate()},Promise.resolve().then(t))}const d={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?null:JSON.stringify(e);default:return e}},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return Number(e);case Object:case Array:try{return JSON.parse(e)}catch{return null}default:return e}}};class h extends HTMLElement{static properties={};static styles=void 0;static finalized=!1;static elementProperties=new Map;static __prepare(){if(this.hasOwnProperty("elementProperties"))return;const e=Object.getPrototypeOf(this);e.finalize&&e.finalize(),this.elementProperties=new Map(e.elementProperties)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap?[...this.__attributeToPropertyMap.keys()]:[]}static finalize(){if(!this.hasOwnProperty("finalized")){if(this.finalized=!0,this.__prepare(),this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const r of t)this.createProperty(r,e[r])}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const r=this.__attributeNameForProperty(e,t);void 0!==r&&this.__attributeToPropertyMap.set(r,e)}this.elementStyles=this.styles}}static __attributeNameForProperty(e,t){const r=t.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof e?e.replace(/([A-Z])/g,"-$1").toLowerCase():void 0}static createProperty(e,t={}){if(this.__prepare(),!this.elementProperties.has(e)&&(t.state&&(t={...t,attribute:!1}),this.elementProperties.set(e,t),!t.noAccessor)){const r=Symbol(),s=this.getPropertyDescriptor(e,r,t);void 0!==s&&Object.defineProperty(this.prototype,e,s)}}static getPropertyDescriptor(e,t,r){const{type:s,reflect:i,converter:n}=r;return{get(){return this[t]},set(s){const i=this[t];this[t]=s,this.requestUpdate(e,i,r)},configurable:!0,enumerable:!0}}static _initializers=[];static addInitializer(e){this._initializers=[...this._initializers||[],e]}static shadowRootOptions={mode:"open"};constructor(){super(),this.__updatePending=!1,this.__hasUpdated=!1,this.__controllers=new Set,this.__reflectingProperty=null,this.constructor.hasOwnProperty("finalized")||this.constructor.finalize(),this.__saveInstanceProperties(),this.requestUpdate();for(const e of this.constructor._initializers||[])e(this)}__saveInstanceProperties(){const e=this.constructor.elementProperties;if(e)for(const[t,r]of e)if(!r.noAccessor&&this.hasOwnProperty(t)){const e=this[t];delete this[t],this.__instancePropertyValues=this.__instancePropertyValues||new Map,this.__instancePropertyValues.set(t,e)}}connectedCallback(){this.__controllers.forEach(e=>e.hostConnected?.()),this.constructor.hasOwnProperty("finalized")||this.constructor.finalize();const e=this.constructor.__attributeToPropertyMap;if(e)for(const[t,r]of e){const e=this.getAttribute(t);if(null!==e){const t=this.constructor.elementProperties.get(r);if(t){const s=t.converter?.fromAttribute??d.fromAttribute;this[r]=s(e,t.type)}}}if(this.__instancePropertyValues){for(const[e,t]of this.__instancePropertyValues)this[e]=t;this.__instancePropertyValues=void 0}this.renderRoot,this.__hasUpdated||this.requestUpdate()}disconnectedCallback(){this.__controllers.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,r){const s=this.constructor.__attributeToPropertyMap?.get(e);if(void 0!==s&&this.__reflectingProperty!==s){const e=this.constructor.elementProperties.get(s);if(e){const t="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:d;this.__reflectingProperty=s;const i=t.fromAttribute(r,e.type);this[s]=i,this.__reflectingProperty=null}}}get renderRoot(){return this._renderRoot||(this._renderRoot=this.createRenderRoot(),this.__adoptStyles()),this._renderRoot}createRenderRoot(){return this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions)}__adoptStyles(){const e=this.constructor.elementStyles;if(!e)return;const t=Array.isArray(e)?e:[e],s=[];for(const e of t)"string"==typeof e?s.push(e):r(e)&&s.push(e.strings.join(""));if(0!==s.length)if(void 0!==this._renderRoot.adoptedStyleSheets){const e=new CSSStyleSheet;e.replaceSync(s.join("\n")),this._renderRoot.adoptedStyleSheets=[...this._renderRoot.adoptedStyleSheets,e]}else{const e=document.createElement("style");e.textContent=s.join("\n"),this._renderRoot.appendChild(e)}}enableUpdating(e){}get updateComplete(){return this.__updateCompletePromise??Promise.resolve()}get hasUpdated(){return this.__hasUpdated}get isUpdatePending(){return this.__updatePending}requestUpdate(e,t,r){if(void 0!==e){if(!(r?.hasChanged??((e,t)=>!Object.is(e,t)))(this[e],t))return}this.__updatePending||(this.__updatePending=!0,p(this))}async performUpdate(){if(this.isUpdatePending){this.__updatePending=!1,this.willUpdate(new Map),this.__controllers.forEach(e=>e.hostUpdate?.()),this.update(new Map),this.__hasUpdated=!0;for(const[e,t]of this.constructor.elementProperties)if(t.reflect){const r=this[e],s=t.converter?.toAttribute??d.toAttribute,i=this.constructor.__attributeNameForProperty(e,t);if(void 0!==i){this.__reflectingProperty=e;const n=s(r,t.type);null==n?this.removeAttribute(i):this.setAttribute(i,String(n)),this.__reflectingProperty=null}}this.__controllers.forEach(e=>e.hostUpdated?.()),this.firstUpdated(new Map),this.updated(new Map)}}_$performUpdate(){this.performUpdate()}shouldUpdate(e){return!0}willUpdate(e){}update(e){const t=this.render();t&&a(t,this.renderRoot)}render(){return t``}firstUpdated(e){}updated(e){}propertyChangedCallback(e,t,r){}addController(e){this.__controllers.add(e),this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers.delete(e)}emit(e,t,r={}){return this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,...r}))}$(e){return this.renderRoot.querySelector(e)}$$(e){return this.renderRoot.querySelectorAll(e)}}const u=t`<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+</svg>`,f=t`<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+    />
+</svg>`,m=(function(e,...t){return{_$luxType$:3,strings:e,values:t}})`
+    :host {
+        display: inline-block;
+        position: relative;
+    }
+    .trigger {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        padding: 6px 12px;
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+        border-radius: var(--lux-radius, 6px);
+        background: rgb(var(--lux-card, 30 41 59));
+        color: rgb(var(--lux-text, 241 245 249));
+        font-size: 13px;
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+    .trigger:hover {
+        border-color: rgb(var(--lux-primary-500, 99 91 218));
+        background: rgb(var(--lux-hover, 255 255 255 / 5%));
+    }
+    .placeholder {
+        color: rgb(var(--lux-text-muted, 100 116 139));
+    }
+    .end-icons {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .arrow,
+    .clear {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 18px;
+        height: 18px;
+        transition: opacity 150ms ease;
+    }
+    .arrow {
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        transition:
+            transform 150ms ease,
+            opacity 150ms ease;
+    }
+    :host([open]) .arrow {
+        transform: rotate(180deg);
+    }
+    .clear {
+        display: none;
+        cursor: pointer;
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        z-index: 1;
+    }
+    .clear:hover {
+        color: rgb(var(--lux-text, 241 245 249));
+    }
+    :host([clearable][has-value]:hover) .clear {
+        display: inline-flex;
+    }
+    :host([clearable][has-value]:hover) .arrow {
+        opacity: 0;
+        pointer-events: none;
+    }
+    .menu {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        min-width: 100%;
+        max-height: 200px;
+        overflow-y: auto;
+        background: rgb(var(--lux-card, 30 41 59));
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+        border-radius: var(--lux-radius, 6px);
+        box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
+        z-index: 1000;
+        padding: 4px 0;
+        display: none;
+    }
+    :host([open]) .menu {
+        display: block;
+    }
+    .item {
+        display: block;
+        padding: 7px 12px;
+        font-size: 13px;
+        color: rgb(var(--lux-text, 241 245 249));
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+    }
+    .item:hover {
+        background: rgb(var(--lux-hover, 255 255 255 / 5%));
+    }
+    .item.active {
+        color: rgb(var(--lux-primary-400, 129 113 234));
+    }
+
+    /* Size: sm */
+    :host([size='sm']) .trigger {
+        padding: 4px 8px;
+        font-size: 12px;
+        gap: 4px;
+    }
+    :host([size='sm']) .item {
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+    :host([size='sm']) .end-icons {
+        width: 14px;
+        height: 14px;
+    }
+
+    /* Size: lg */
+    :host([size='lg']) .trigger {
+        padding: 10px 16px;
+        font-size: 15px;
+        gap: 8px;
+    }
+    :host([size='lg']) .item {
+        padding: 10px 16px;
+        font-size: 15px;
+    }
+    :host([size='lg']) .end-icons {
+        width: 22px;
+        height: 22px;
+    }
+`;class _ extends h{static styles=m;static properties={options:{type:Array,attribute:!1},value:{type:String,reflect:!0},placeholder:{type:String,reflect:!0},open:{type:Boolean,reflect:!0},clearable:{type:Boolean,reflect:!0},size:{type:String,reflect:!0}};constructor(){super(),this.placeholder="",this.value="",this.clearable=!1,this._onDocClickBound=!1}connectedCallback(){super.connectedCallback(),this._bindDocClick()}_bindDocClick(){this._onDocClickBound||(this._onDocClick=this._onDocClick.bind(this),document.addEventListener("click",this._onDocClick,!0),this._onDocClickBound=!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._onDocClick,!0),this._onDocClickBound=!1}updated(){this.value?this.setAttribute("has-value",""):this.removeAttribute("has-value")}_onDocClick(e){this.contains(e.target)||(this.open=!1)}_toggle(){this.open=!this.open}_clear(){this.value="",this.emit("clear")}_select(e){this.value=String(e.value),this.open=!1,this.emit("change",{value:e.value,label:e.label??e.value})}render(){const e=Array.isArray(this.options)?this.options:[],r=e.find(e=>String(e.value)===String(this.value)),s=r?r.label??r.value:"",i=this.placeholder;return t`
+            <div class="trigger" @click=${()=>this._toggle()}>
+                <span class=${{placeholder:!s&&!!i}}>${s||i}</span>
+                <span class="end-icons">
+                    <span
+                        class=${{clear:!0}}
+                        @click=${e=>{e.stopPropagation(),this._clear()}}
+                        >${f}</span
+                    >
+                    <span class="arrow">${u}</span>
+                </span>
+            </div>
+            <div class="menu">
+                ${n=e,o=e=>e.value,a=e=>t`
+                <div class="item" @click=${()=>this._select(e)}>${e.label??e.value}</div>
+            `,{_type:"repeat",items:n,keyFn:o,renderFn:a}}
+            </div>
+        `;var n,o,a}}return function(e,t){if(!e.includes("-"))throw new Error(`Component name must contain a hyphen: ${e}`);customElements.get(e)||customElements.define(e,t)}("lux-dropdown",_),_}();

package/dist/components/lux-dropdown/index.min.js

@@ -0,0 +1,162 @@
+const e=Symbol.for("lux-nothing");function t(e,...t){return{_$luxType$:1,strings:e,values:t}}function r(e){return e&&void 0!==e._$luxType$}const s=/(?:([@.?][\w-]+)|(ref)|(class))=\s*$/;function i(t,s,i){if(s!==e&&null!=s)if(function(e){return e&&"repeat"===e._type}(s))!function(e,t){const{items:s,keyFn:i,renderFn:o}=t,n=e._repeatState;if(n)for(const e of n.entries)e.span&&e.span.parentNode&&e.span.parentNode.removeChild(e.span);const l=document.createDocumentFragment(),c=[];for(const e of s){const t=i(e),s=o(e),n=document.createElement("span");n.style.display="contents",r(s)?a(s,n):null!=s&&!1!==s&&n.appendChild(document.createTextNode(String(s))),l.appendChild(n),c.push({key:t,result:s,span:n})}e.appendChild(l),e._repeatState={entries:c}}(t,s);else if(r(s))a(s,t);else if(Array.isArray(s)){o(t);for(const e of s)if(r(e)){const r=document.createElement("span");r.style.display="contents",a(e,r),t.appendChild(r)}else e instanceof Node?t.appendChild(e):null!=e&&!1!==e&&t.appendChild(document.createTextNode(String(e)))}else{if(s instanceof Node)return o(t),void t.appendChild(s);1===t.childNodes.length&&t.firstChild.nodeType===Node.TEXT_NODE?t.firstChild.textContent=String(s):(o(t),t.appendChild(document.createTextNode(String(s))))}else o(t)}function o(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function n(t,r){const{element:s,name:i,prefix:o}=t;switch(o){case"@":{const o=t.committedValue,n=null==r||r===e,a=n&&null!=o||r?.capture!==o?.capture||r?.once!==o?.once||r?.passive!==o?.passive,l=!n&&(null==o||a);if(a&&s.removeEventListener(i,t._handler||o,o),l)if("function"==typeof r){const e=t._host||(t._host={handleEvent(e){const r=t.committedValue;if("function"==typeof r){const t=s.getRootNode().host||s;r.call(t,e)}}});t._handler=e,s.addEventListener(i,e)}else if("object"==typeof r&&r?.handleEvent){const e={handleEvent:e=>r.handleEvent.call(r,e)};t._handler=e,s.addEventListener(i,e,{capture:r.capture,once:r.once,passive:r.passive})}t.committedValue=r;break}case".":s[i]=r===e?void 0:r;break;case"?":s.toggleAttribute(i,!!r);break;case"ref":"function"==typeof r&&r(s);break;case"class":if("string"==typeof r)s.className=r;else if("object"==typeof r&&null!=r){const e=s.className||"",t=e?e.split(/\s+/):[];for(const[e,s]of Object.entries(r))if(s)t.includes(e)||t.push(e);else{const r=t.indexOf(e);-1!==r&&t.splice(r,1)}s.className=t.filter(Boolean).join(" ")}break;default:null==r||!1===r?s.removeAttribute(i):s.setAttribute(i,!0===r?"":String(r))}}function a(e,t,o){if(!r(e))return void(t.textContent=e??"");const{strings:a,values:l}=e;if(t._luxActiveParts&&t._luxStrings===a){for(const e of t._luxActiveParts)e.index<l.length&&("child"===e.type?i(e.span,l[e.index]):n(e,l[e.index]));return}const c=document.createElement("template"),p=function(e){const t=[];let r="";for(let i=0;i<e.length;i++)if(r+=e[i],i<e.length-1){const e=r.match(s);if(e){const s=e[1],o=!!e[2],n=!!e[3];let a="",l="";s?(a=s[0],l=s.slice(1)):o?(a="ref",l="ref"):n&&(a="class",l="class");const c=`lux-attr-${i}`;r=r.slice(0,-e[0].length)+`${c}="${l}" `,t.push({type:"attr",name:l,prefix:a,marker:c,index:i})}else{const e=`lux-${i}`;r+=`\x3c!--${e}--\x3e`,t.push({type:"child",marker:e,index:i})}}return{html:r,parts:t}}(a);c.innerHTML=p.html;const d=c.content.cloneNode(!0),h=[];for(const e of p.parts)if("child"===e.type){const t=document.createTreeWalker(d,NodeFilter.SHOW_COMMENT);let r;for(;r=t.nextNode();)if(r.data===e.marker){const t=document.createElement("span");t.style.display="contents",r.parentNode.replaceChild(t,r),i(t,l[e.index]),h.push({type:"child",span:t,index:e.index});break}}else{const t=d.querySelector(`[${e.marker}]`);if(t){t.removeAttribute(e.marker);const r={type:"attr",element:t,name:e.name,prefix:e.prefix,index:e.index,committedValue:void 0};n(r,l[e.index]),h.push(r)}}t.textContent="",t.appendChild(d),t._luxActiveParts=h,t._luxStrings=a}const l=new Set;let c=!1;function p(e){var t;l.add(e),c||(c=!0,t=()=>{c=!1;const e=[...l];l.clear();for(const t of e)t._$performUpdate()},Promise.resolve().then(t))}const d={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?null:JSON.stringify(e);default:return e}},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return Number(e);case Object:case Array:try{return JSON.parse(e)}catch{return null}default:return e}}};class h extends HTMLElement{static properties={};static styles=void 0;static finalized=!1;static elementProperties=new Map;static __prepare(){if(this.hasOwnProperty("elementProperties"))return;const e=Object.getPrototypeOf(this);e.finalize&&e.finalize(),this.elementProperties=new Map(e.elementProperties)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap?[...this.__attributeToPropertyMap.keys()]:[]}static finalize(){if(!this.hasOwnProperty("finalized")){if(this.finalized=!0,this.__prepare(),this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const r of t)this.createProperty(r,e[r])}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const r=this.__attributeNameForProperty(e,t);void 0!==r&&this.__attributeToPropertyMap.set(r,e)}this.elementStyles=this.styles}}static __attributeNameForProperty(e,t){const r=t.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof e?e.replace(/([A-Z])/g,"-$1").toLowerCase():void 0}static createProperty(e,t={}){if(this.__prepare(),!this.elementProperties.has(e)&&(t.state&&(t={...t,attribute:!1}),this.elementProperties.set(e,t),!t.noAccessor)){const r=Symbol(),s=this.getPropertyDescriptor(e,r,t);void 0!==s&&Object.defineProperty(this.prototype,e,s)}}static getPropertyDescriptor(e,t,r){const{type:s,reflect:i,converter:o}=r;return{get(){return this[t]},set(s){const i=this[t];this[t]=s,this.requestUpdate(e,i,r)},configurable:!0,enumerable:!0}}static _initializers=[];static addInitializer(e){this._initializers=[...this._initializers||[],e]}static shadowRootOptions={mode:"open"};constructor(){super(),this.__updatePending=!1,this.__hasUpdated=!1,this.__controllers=new Set,this.__reflectingProperty=null,this.constructor.hasOwnProperty("finalized")||this.constructor.finalize(),this.__saveInstanceProperties(),this.requestUpdate();for(const e of this.constructor._initializers||[])e(this)}__saveInstanceProperties(){const e=this.constructor.elementProperties;if(e)for(const[t,r]of e)if(!r.noAccessor&&this.hasOwnProperty(t)){const e=this[t];delete this[t],this.__instancePropertyValues=this.__instancePropertyValues||new Map,this.__instancePropertyValues.set(t,e)}}connectedCallback(){this.__controllers.forEach(e=>e.hostConnected?.()),this.constructor.hasOwnProperty("finalized")||this.constructor.finalize();const e=this.constructor.__attributeToPropertyMap;if(e)for(const[t,r]of e){const e=this.getAttribute(t);if(null!==e){const t=this.constructor.elementProperties.get(r);if(t){const s=t.converter?.fromAttribute??d.fromAttribute;this[r]=s(e,t.type)}}}if(this.__instancePropertyValues){for(const[e,t]of this.__instancePropertyValues)this[e]=t;this.__instancePropertyValues=void 0}this.renderRoot,this.__hasUpdated||this.requestUpdate()}disconnectedCallback(){this.__controllers.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,r){const s=this.constructor.__attributeToPropertyMap?.get(e);if(void 0!==s&&this.__reflectingProperty!==s){const e=this.constructor.elementProperties.get(s);if(e){const t="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:d;this.__reflectingProperty=s;const i=t.fromAttribute(r,e.type);this[s]=i,this.__reflectingProperty=null}}}get renderRoot(){return this._renderRoot||(this._renderRoot=this.createRenderRoot(),this.__adoptStyles()),this._renderRoot}createRenderRoot(){return this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions)}__adoptStyles(){const e=this.constructor.elementStyles;if(!e)return;const t=Array.isArray(e)?e:[e],s=[];for(const e of t)"string"==typeof e?s.push(e):r(e)&&s.push(e.strings.join(""));if(0!==s.length)if(void 0!==this._renderRoot.adoptedStyleSheets){const e=new CSSStyleSheet;e.replaceSync(s.join("\n")),this._renderRoot.adoptedStyleSheets=[...this._renderRoot.adoptedStyleSheets,e]}else{const e=document.createElement("style");e.textContent=s.join("\n"),this._renderRoot.appendChild(e)}}enableUpdating(e){}get updateComplete(){return this.__updateCompletePromise??Promise.resolve()}get hasUpdated(){return this.__hasUpdated}get isUpdatePending(){return this.__updatePending}requestUpdate(e,t,r){if(void 0!==e){if(!(r?.hasChanged??((e,t)=>!Object.is(e,t)))(this[e],t))return}this.__updatePending||(this.__updatePending=!0,p(this))}async performUpdate(){if(this.isUpdatePending){this.__updatePending=!1,this.willUpdate(new Map),this.__controllers.forEach(e=>e.hostUpdate?.()),this.update(new Map),this.__hasUpdated=!0;for(const[e,t]of this.constructor.elementProperties)if(t.reflect){const r=this[e],s=t.converter?.toAttribute??d.toAttribute,i=this.constructor.__attributeNameForProperty(e,t);if(void 0!==i){this.__reflectingProperty=e;const o=s(r,t.type);null==o?this.removeAttribute(i):this.setAttribute(i,String(o)),this.__reflectingProperty=null}}this.__controllers.forEach(e=>e.hostUpdated?.()),this.firstUpdated(new Map),this.updated(new Map)}}_$performUpdate(){this.performUpdate()}shouldUpdate(e){return!0}willUpdate(e){}update(e){const t=this.render();t&&a(t,this.renderRoot)}render(){return t``}firstUpdated(e){}updated(e){}propertyChangedCallback(e,t,r){}addController(e){this.__controllers.add(e),this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers.delete(e)}emit(e,t,r={}){return this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,...r}))}$(e){return this.renderRoot.querySelector(e)}$$(e){return this.renderRoot.querySelectorAll(e)}}const u=t`<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+</svg>`,f=t`<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+    />
+</svg>`,m=(function(e,...t){return{_$luxType$:3,strings:e,values:t}})`
+    :host {
+        display: inline-block;
+        position: relative;
+    }
+    .trigger {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        padding: 6px 12px;
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+        border-radius: var(--lux-radius, 6px);
+        background: rgb(var(--lux-card, 30 41 59));
+        color: rgb(var(--lux-text, 241 245 249));
+        font-size: 13px;
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+    .trigger:hover {
+        border-color: rgb(var(--lux-primary-500, 99 91 218));
+        background: rgb(var(--lux-hover, 255 255 255 / 5%));
+    }
+    .placeholder {
+        color: rgb(var(--lux-text-muted, 100 116 139));
+    }
+    .end-icons {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .arrow,
+    .clear {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 18px;
+        height: 18px;
+        transition: opacity 150ms ease;
+    }
+    .arrow {
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        transition:
+            transform 150ms ease,
+            opacity 150ms ease;
+    }
+    :host([open]) .arrow {
+        transform: rotate(180deg);
+    }
+    .clear {
+        display: none;
+        cursor: pointer;
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        z-index: 1;
+    }
+    .clear:hover {
+        color: rgb(var(--lux-text, 241 245 249));
+    }
+    :host([clearable][has-value]:hover) .clear {
+        display: inline-flex;
+    }
+    :host([clearable][has-value]:hover) .arrow {
+        opacity: 0;
+        pointer-events: none;
+    }
+    .menu {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        min-width: 100%;
+        max-height: 200px;
+        overflow-y: auto;
+        background: rgb(var(--lux-card, 30 41 59));
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+        border-radius: var(--lux-radius, 6px);
+        box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
+        z-index: 1000;
+        padding: 4px 0;
+        display: none;
+    }
+    :host([open]) .menu {
+        display: block;
+    }
+    .item {
+        display: block;
+        padding: 7px 12px;
+        font-size: 13px;
+        color: rgb(var(--lux-text, 241 245 249));
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+    }
+    .item:hover {
+        background: rgb(var(--lux-hover, 255 255 255 / 5%));
+    }
+    .item.active {
+        color: rgb(var(--lux-primary-400, 129 113 234));
+    }
+
+    /* Size: sm */
+    :host([size='sm']) .trigger {
+        padding: 4px 8px;
+        font-size: 12px;
+        gap: 4px;
+    }
+    :host([size='sm']) .item {
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+    :host([size='sm']) .end-icons {
+        width: 14px;
+        height: 14px;
+    }
+
+    /* Size: lg */
+    :host([size='lg']) .trigger {
+        padding: 10px 16px;
+        font-size: 15px;
+        gap: 8px;
+    }
+    :host([size='lg']) .item {
+        padding: 10px 16px;
+        font-size: 15px;
+    }
+    :host([size='lg']) .end-icons {
+        width: 22px;
+        height: 22px;
+    }
+`;class _ extends h{static styles=m;static properties={options:{type:Array,attribute:!1},value:{type:String,reflect:!0},placeholder:{type:String,reflect:!0},open:{type:Boolean,reflect:!0},clearable:{type:Boolean,reflect:!0},size:{type:String,reflect:!0}};constructor(){super(),this.placeholder="",this.value="",this.clearable=!1,this._onDocClickBound=!1}connectedCallback(){super.connectedCallback(),this._bindDocClick()}_bindDocClick(){this._onDocClickBound||(this._onDocClick=this._onDocClick.bind(this),document.addEventListener("click",this._onDocClick,!0),this._onDocClickBound=!0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._onDocClick,!0),this._onDocClickBound=!1}updated(){this.value?this.setAttribute("has-value",""):this.removeAttribute("has-value")}_onDocClick(e){this.contains(e.target)||(this.open=!1)}_toggle(){this.open=!this.open}_clear(){this.value="",this.emit("clear")}_select(e){this.value=String(e.value),this.open=!1,this.emit("change",{value:e.value,label:e.label??e.value})}render(){const e=Array.isArray(this.options)?this.options:[],r=e.find(e=>String(e.value)===String(this.value)),s=r?r.label??r.value:"",i=this.placeholder;return t`
+            <div class="trigger" @click=${()=>this._toggle()}>
+                <span class=${{placeholder:!s&&!!i}}>${s||i}</span>
+                <span class="end-icons">
+                    <span
+                        class=${{clear:!0}}
+                        @click=${e=>{e.stopPropagation(),this._clear()}}
+                        >${f}</span
+                    >
+                    <span class="arrow">${u}</span>
+                </span>
+            </div>
+            <div class="menu">
+                ${o=e,n=e=>e.value,a=e=>t`
+                <div class="item" @click=${()=>this._select(e)}>${e.label??e.value}</div>
+            `,{_type:"repeat",items:o,keyFn:n,renderFn:a}}
+            </div>
+        `;var o,n,a}}!function(e,t){if(!e.includes("-"))throw new Error(`Component name must contain a hyphen: ${e}`);customElements.get(e)||customElements.define(e,t)}("lux-dropdown",_);export{_ as default};