@ahriknow/lux 0.0.1

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

@@ -0,0 +1,238 @@
+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"),u=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=u.html;const d=c.content.cloneNode(!0),p=[];for(const e of u.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]),p.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]),p.push(r)}}t.textContent="",t.appendChild(d),t._luxActiveParts=p,t._luxStrings=a}const l=new Set;let c=!1;function u(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 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(),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,u(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 h=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>`,f=(function(e,...t){return{_$luxType$:3,strings:e,values:t}})`
+    :host {
+        display: inline-block;
+        width: 100%;
+        font-size: 13px;
+        vertical-align: middle;
+    }
+
+    .wrap {
+        display: flex;
+        align-items: center;
+        gap: 0;
+        border: 1px solid rgb(var(--lux-border, 226 232 240));
+        border-radius: var(--lux-radius, 6px);
+        background: rgb(var(--lux-card, 255 255 255));
+        transition:
+            border-color 0.2s,
+            box-shadow 0.2s;
+        overflow: hidden;
+    }
+
+    .wrap:hover {
+        border-color: rgb(var(--lux-primary-400, 108 92 231) / 40%);
+    }
+
+    :host([focused]) .wrap {
+        border-color: rgb(var(--lux-primary-400, 108 92 231));
+        box-shadow: 0 0 0 2px rgb(var(--lux-primary-400, 108 92 231) / 15%);
+    }
+
+    :host([has-error]) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+
+    :host([has-error][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-error, 239 68 68) / 15%);
+    }
+
+    /* Status colors */
+    :host([status='success']) .wrap {
+        border-color: rgb(var(--lux-success, 34 197 94));
+    }
+    :host([status='success'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-success, 34 197 94) / 15%);
+    }
+
+    :host([status='info']) .wrap {
+        border-color: rgb(var(--lux-info, 59 130 246));
+    }
+    :host([status='info'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-info, 59 130 246) / 15%);
+    }
+
+    :host([status='warning']) .wrap {
+        border-color: rgb(var(--lux-warning, 234 179 8));
+    }
+    :host([status='warning'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-warning, 234 179 8) / 15%);
+    }
+
+    :host([status='error']) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+    :host([status='error'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-error, 239 68 68) / 15%);
+    }
+
+    /* Regex invalid (when no explicit status) */
+    :host([regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+    :host([regex-invalid][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-error, 239 68 68) / 15%);
+    }
+    :host([data-regex-status='success'][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-success, 34 197 94));
+    }
+    :host([data-regex-status='info'][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-info, 59 130 246));
+    }
+    :host([data-regex-status='warning'][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-warning, 234 179 8));
+    }
+    :host([data-regex-status='error'][regex-invalid]) .wrap,
+    :host([data-regex-status=''][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+
+    :host([disabled]) .wrap {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    .prefix,
+    .suffix {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        color: rgb(var(--lux-text, 15 23 42));
+        padding: 0;
+        font-size: inherit;
+        line-height: 1;
+        user-select: none;
+    }
+
+    .prefix {
+        padding-left: 6px;
+    }
+    .suffix {
+        padding-right: 6px;
+    }
+
+    input {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: rgb(var(--lux-text, 15 23 42));
+        font-size: inherit;
+        font-family: inherit;
+        padding: 6px 8px;
+        line-height: 1.5;
+        width: 100%;
+    }
+
+    input[type='number'] {
+        -moz-appearance: textfield;
+    }
+
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        opacity: 1;
+        height: auto;
+    }
+
+    input::placeholder {
+        color: rgb(var(--lux-text-muted, 148 163 184));
+    }
+
+    input:disabled {
+        cursor: not-allowed;
+    }
+
+    .clear-btn {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: rgb(var(--lux-text-muted, 148 163 184));
+        cursor: pointer;
+        padding: 0;
+        transition:
+            color 0.15s,
+            background 0.15s;
+    }
+
+    .clear-btn:hover {
+        color: rgb(var(--lux-text, 15 23 42));
+        background: rgb(var(--lux-hover, 0 0 0 / 5%));
+    }
+
+    :host([clearable][has-value]:hover) .clear-btn,
+    :host([clearable][focused]) .clear-btn {
+        display: inline-flex;
+    }
+
+    .error-msg {
+        display: none;
+        margin-top: 4px;
+        font-size: 12px;
+        color: rgb(var(--lux-error, 239 68 68));
+        line-height: 1.4;
+    }
+
+    :host([has-error]) .error-msg {
+        display: block;
+    }
+
+    /* Size: sm */
+    :host([size='sm']) .wrap {
+        border-radius: var(--lux-radius-sm, 4px);
+    }
+    :host([size='sm']) input {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+    :host([size='sm']) .prefix {
+        padding-left: 4px;
+    }
+    :host([size='sm']) .suffix {
+        padding-right: 4px;
+    }
+
+    /* Size: lg */
+    :host([size='lg']) .wrap {
+        border-radius: var(--lux-radius, 6px);
+    }
+    :host([size='lg']) input {
+        padding: 10px 12px;
+        font-size: 15px;
+    }
+    :host([size='lg']) .prefix {
+        padding-left: 10px;
+    }
+    :host([size='lg']) .suffix {
+        padding-right: 10px;
+    }
+`;class g extends p{static styles=f;static properties={value:{type:String,reflect:!0},placeholder:{type:String,reflect:!0},type:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},clearable:{type:Boolean,reflect:!0},error:{type:String,reflect:!0},size:{type:String,reflect:!0},status:{type:String,reflect:!0},regex:{type:String,reflect:!0},regexStatus:{type:String,attribute:"regex-status",reflect:!0}};constructor(){super(),this.value="",this.placeholder="",this.type="text",this.disabled=!1,this.clearable=!1,this.error="",this.status="",this.regex="",this.regexStatus="",this._onDocClickBound=!1}connectedCallback(){super.connectedCallback(),this._updateHasValue()}updated(e){e.has("value")&&(this._updateHasValue(),this._validateRegex()),e.has("error")&&(this.error?this.setAttribute("has-error",""):this.removeAttribute("has-error")),(e.has("status")||e.has("regex")||e.has("regexStatus"))&&this._validateRegex()}_updateHasValue(){this.value?this.setAttribute("has-value",""):this.removeAttribute("has-value")}_onInput(e){e.stopPropagation(),this.value=e.target.value,this._validateRegex(),this.emit("input",{value:this.value})}_onChange(e){this.value=e.target.value,this._validateRegex(),this.emit("change",{value:this.value})}_validateRegex(){if(!this.regex||this.status)return this.removeAttribute("regex-invalid"),void this.removeAttribute("data-regex-status");if(!this.value)return this.removeAttribute("regex-invalid"),void this.removeAttribute("data-regex-status");new RegExp(this.regex).test(String(this.value))?(this.removeAttribute("regex-invalid"),this.removeAttribute("data-regex-status")):(this.setAttribute("regex-invalid",""),this.setAttribute("data-regex-status",this.regexStatus||"error"))}_onFocus(){this.setAttribute("focused",""),this.emit("focus")}_onBlur(){this.removeAttribute("focused"),this.emit("blur")}_clear(){this.value="",this.removeAttribute("regex-invalid"),this.emit("input",{value:""}),this.emit("clear");const e=this.renderRoot.querySelector("input");e&&e.focus()}render(){return t`
+            <div class="wrap">
+                <slot class="prefix" name="prefix"></slot>
+                <input
+                    .type=${this.type}
+                    .value=${this.value}
+                    .placeholder=${this.placeholder}
+                    .disabled=${this.disabled}
+                    @input=${e=>this._onInput(e)}
+                    @change=${e=>this._onChange(e)}
+                    @focus=${()=>this._onFocus()}
+                    @blur=${()=>this._onBlur()}
+                />
+                <span class="clear-btn" @click=${this._clear}>${h}</span>
+                <slot class="suffix" name="suffix"></slot>
+            </div>
+            ${this.error?t`<span class="error-msg">${this.error}</span>`:""}
+        `}}!function(e,t){if(!e.includes("-"))throw new Error(`Component name must contain a hyphen: ${e}`);customElements.get(e)||customElements.define(e,t)}("lux-input",g);export{g as default};

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

@@ -0,0 +1,90 @@
+var LuxLayout=function(){"use strict";const t=Symbol.for("lux-nothing");function e(t,...e){return{_$luxType$:1,strings:t,values:e}}function s(t){return t&&void 0!==t._$luxType$}const r=/(?:([@.?][\w-]+)|(ref)|(class))=\s*$/;function i(e,r,i){if(r!==t&&null!=r)if(function(t){return t&&"repeat"===t._type}(r))!function(t,e){const{items:r,keyFn:i,renderFn:n}=e,o=t._repeatState;if(o)for(const t of o.entries)t.span&&t.span.parentNode&&t.span.parentNode.removeChild(t.span);const d=document.createDocumentFragment(),l=[];for(const t of r){const e=i(t),r=n(t),o=document.createElement("span");o.style.display="contents",s(r)?a(r,o):null!=r&&!1!==r&&o.appendChild(document.createTextNode(String(r))),d.appendChild(o),l.push({key:e,result:r,span:o})}t.appendChild(d),t._repeatState={entries:l}}(e,r);else if(s(r))a(r,e);else if(Array.isArray(r)){n(e);for(const t of r)if(s(t)){const s=document.createElement("span");s.style.display="contents",a(t,s),e.appendChild(s)}else t instanceof Node?e.appendChild(t):null!=t&&!1!==t&&e.appendChild(document.createTextNode(String(t)))}else{if(r instanceof Node)return n(e),void e.appendChild(r);1===e.childNodes.length&&e.firstChild.nodeType===Node.TEXT_NODE?e.firstChild.textContent=String(r):(n(e),e.appendChild(document.createTextNode(String(r))))}else n(e)}function n(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function o(e,s){const{element:r,name:i,prefix:n}=e;switch(n){case"@":{const n=e.committedValue,o=null==s||s===t,a=o&&null!=n||s?.capture!==n?.capture||s?.once!==n?.once||s?.passive!==n?.passive,d=!o&&(null==n||a);if(a&&r.removeEventListener(i,e._handler||n,n),d)if("function"==typeof s){const t=e._host||(e._host={handleEvent(t){const s=e.committedValue;if("function"==typeof s){const e=r.getRootNode().host||r;s.call(e,t)}}});e._handler=t,r.addEventListener(i,t)}else if("object"==typeof s&&s?.handleEvent){const t={handleEvent:t=>s.handleEvent.call(s,t)};e._handler=t,r.addEventListener(i,t,{capture:s.capture,once:s.once,passive:s.passive})}e.committedValue=s;break}case".":r[i]=s===t?void 0:s;break;case"?":r.toggleAttribute(i,!!s);break;case"ref":"function"==typeof s&&s(r);break;case"class":if("string"==typeof s)r.className=s;else if("object"==typeof s&&null!=s){const t=r.className||"",e=t?t.split(/\s+/):[];for(const[t,r]of Object.entries(s))if(r)e.includes(t)||e.push(t);else{const s=e.indexOf(t);-1!==s&&e.splice(s,1)}r.className=e.filter(Boolean).join(" ")}break;default:null==s||!1===s?r.removeAttribute(i):r.setAttribute(i,!0===s?"":String(s))}}function a(t,e,n){if(!s(t))return void(e.textContent=t??"");const{strings:a,values:d}=t;if(e._luxActiveParts&&e._luxStrings===a){for(const t of e._luxActiveParts)t.index<d.length&&("child"===t.type?i(t.span,d[t.index]):o(t,d[t.index]));return}const l=document.createElement("template"),c=function(t){const e=[];let s="";for(let i=0;i<t.length;i++)if(s+=t[i],i<t.length-1){const t=s.match(r);if(t){const r=t[1],n=!!t[2],o=!!t[3];let a="",d="";r?(a=r[0],d=r.slice(1)):n?(a="ref",d="ref"):o&&(a="class",d="class");const l=`lux-attr-${i}`;s=s.slice(0,-t[0].length)+`${l}="${d}" `,e.push({type:"attr",name:d,prefix:a,marker:l,index:i})}else{const t=`lux-${i}`;s+=`\x3c!--${t}--\x3e`,e.push({type:"child",marker:t,index:i})}}return{html:s,parts:e}}(a);l.innerHTML=c.html;const h=l.content.cloneNode(!0),p=[];for(const t of c.parts)if("child"===t.type){const e=document.createTreeWalker(h,NodeFilter.SHOW_COMMENT);let s;for(;s=e.nextNode();)if(s.data===t.marker){const e=document.createElement("span");e.style.display="contents",s.parentNode.replaceChild(e,s),i(e,d[t.index]),p.push({type:"child",span:e,index:t.index});break}}else{const e=h.querySelector(`[${t.marker}]`);if(e){e.removeAttribute(t.marker);const s={type:"attr",element:e,name:t.name,prefix:t.prefix,index:t.index,committedValue:void 0};o(s,d[t.index]),p.push(s)}}e.textContent="",e.appendChild(h),e._luxActiveParts=p,e._luxStrings=a}const d=new Set;let l=!1;function c(t){var e;d.add(t),l||(l=!0,e=()=>{l=!1;const t=[...d];d.clear();for(const e of t)e._$performUpdate()},Promise.resolve().then(e))}const h={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?null:JSON.stringify(t);default:return t}},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return Number(t);case Object:case Array:try{return JSON.parse(t)}catch{return null}default:return t}}};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 t=Object.getPrototypeOf(this);t.finalize&&t.finalize(),this.elementProperties=new Map(t.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 t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}this.__attributeToPropertyMap=new Map;for(const[t,e]of this.elementProperties){const s=this.__attributeNameForProperty(t,e);void 0!==s&&this.__attributeToPropertyMap.set(s,t)}this.elementStyles=this.styles}}static __attributeNameForProperty(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.replace(/([A-Z])/g,"-$1").toLowerCase():void 0}static createProperty(t,e={}){if(this.__prepare(),!this.elementProperties.has(t)&&(e.state&&(e={...e,attribute:!1}),this.elementProperties.set(t,e),!e.noAccessor)){const s=Symbol(),r=this.getPropertyDescriptor(t,s,e);void 0!==r&&Object.defineProperty(this.prototype,t,r)}}static getPropertyDescriptor(t,e,s){const{type:r,reflect:i,converter:n}=s;return{get(){return this[e]},set(r){const i=this[e];this[e]=r,this.requestUpdate(t,i,s)},configurable:!0,enumerable:!0}}static _initializers=[];static addInitializer(t){this._initializers=[...this._initializers||[],t]}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 t of this.constructor._initializers||[])t(this)}__saveInstanceProperties(){const t=this.constructor.elementProperties;if(t)for(const[e,s]of t)if(!s.noAccessor&&this.hasOwnProperty(e)){const t=this[e];delete this[e],this.__instancePropertyValues=this.__instancePropertyValues||new Map,this.__instancePropertyValues.set(e,t)}}connectedCallback(){this.__controllers.forEach(t=>t.hostConnected?.()),this.constructor.hasOwnProperty("finalized")||this.constructor.finalize();const t=this.constructor.__attributeToPropertyMap;if(t)for(const[e,s]of t){const t=this.getAttribute(e);if(null!==t){const e=this.constructor.elementProperties.get(s);if(e){const r=e.converter?.fromAttribute??h.fromAttribute;this[s]=r(t,e.type)}}}if(this.__instancePropertyValues){for(const[t,e]of this.__instancePropertyValues)this[t]=e;this.__instancePropertyValues=void 0}this.renderRoot,this.__hasUpdated||this.requestUpdate()}disconnectedCallback(){this.__controllers.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const r=this.constructor.__attributeToPropertyMap?.get(t);if(void 0!==r&&this.__reflectingProperty!==r){const t=this.constructor.elementProperties.get(r);if(t){const e="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:h;this.__reflectingProperty=r;const i=e.fromAttribute(s,t.type);this[r]=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 t=this.constructor.elementStyles;if(!t)return;const e=Array.isArray(t)?t:[t],r=[];for(const t of e)"string"==typeof t?r.push(t):s(t)&&r.push(t.strings.join(""));if(0!==r.length)if(void 0!==this._renderRoot.adoptedStyleSheets){const t=new CSSStyleSheet;t.replaceSync(r.join("\n")),this._renderRoot.adoptedStyleSheets=[...this._renderRoot.adoptedStyleSheets,t]}else{const t=document.createElement("style");t.textContent=r.join("\n"),this._renderRoot.appendChild(t)}}enableUpdating(t){}get updateComplete(){return this.__updateCompletePromise??Promise.resolve()}get hasUpdated(){return this.__hasUpdated}get isUpdatePending(){return this.__updatePending}requestUpdate(t,e,s){if(void 0!==t){if(!(s?.hasChanged??((t,e)=>!Object.is(t,e)))(this[t],e))return}this.__updatePending||(this.__updatePending=!0,c(this))}async performUpdate(){if(this.isUpdatePending){this.__updatePending=!1,this.willUpdate(new Map),this.__controllers.forEach(t=>t.hostUpdate?.()),this.update(new Map),this.__hasUpdated=!0;for(const[t,e]of this.constructor.elementProperties)if(e.reflect){const s=this[t],r=e.converter?.toAttribute??h.toAttribute,i=this.constructor.__attributeNameForProperty(t,e);if(void 0!==i){this.__reflectingProperty=t;const n=r(s,e.type);null==n?this.removeAttribute(i):this.setAttribute(i,String(n)),this.__reflectingProperty=null}}this.__controllers.forEach(t=>t.hostUpdated?.()),this.firstUpdated(new Map),this.updated(new Map)}}_$performUpdate(){this.performUpdate()}shouldUpdate(t){return!0}willUpdate(t){}update(t){const e=this.render();e&&a(e,this.renderRoot)}render(){return e``}firstUpdated(t){}updated(t){}propertyChangedCallback(t,e,s){}addController(t){this.__controllers.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.__controllers.delete(t)}emit(t,e,s={}){return this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0,...s}))}$(t){return this.renderRoot.querySelector(t)}$$(t){return this.renderRoot.querySelectorAll(t)}}const u=(function(t,...e){return{_$luxType$:3,strings:t,values:e}})`
+    :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .root {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .slot-aside {
+        z-index: 3;
+        flex-shrink: 0;
+        width: var(--aside-w, 240px);
+        min-width: var(--aside-min, 120px);
+        max-width: var(--aside-max, 50vw);
+        overflow: hidden;
+        position: relative;
+        border-right: 1px solid rgb(var(--lux-border, 51 65 85));
+        background: rgb(var(--lux-card, 30 41 59));
+    }
+
+    :host([aside-scroll]) .slot-aside {
+        overflow-y: auto;
+    }
+
+    .slot-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .slot-header {
+        flex-shrink: 0;
+        z-index: 2;
+    }
+    .slot-footer {
+        flex-shrink: 0;
+        z-index: 2;
+    }
+    .slot-main {
+        flex: 1;
+        overflow: auto;
+        min-height: 0;
+        z-index: 1;
+    }
+
+    :host([no-header]) .slot-header {
+        display: none;
+    }
+    :host([no-footer]) .slot-footer {
+        display: none;
+    }
+    :host([no-aside]) .slot-aside {
+        display: none;
+    }
+
+    .resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 100%;
+        cursor: col-resize;
+        z-index: 10;
+        background: transparent;
+        transition: background var(--lux-transition, 150ms ease);
+    }
+    .resize-handle:hover {
+        background: rgb(var(--lux-primary-400, 129 120 247) / 0.3);
+    }
+`;class f extends p{static styles=u;static properties={asideWidth:{type:String,attribute:"aside-width",reflect:!0},asideMin:{type:String,attribute:"aside-min",reflect:!0},asideMax:{type:String,attribute:"aside-max",reflect:!0},asideScroll:{type:Boolean,attribute:"aside-scroll",reflect:!0},noHeader:{type:Boolean,attribute:"no-header",reflect:!0},noFooter:{type:Boolean,attribute:"no-footer",reflect:!0},noAside:{type:Boolean,attribute:"no-aside",reflect:!0}};constructor(){super(),this.asideWidth="240px",this.asideMin="120px",this.asideMax="50vw"}firstUpdated(){this._applyAside(),this._initDrag()}updated(){this._dragging||this._applyAside()}_parseWidth(t){return null==t?null:"number"==typeof t||/^\d+(\.\d+)?$/.test(t)?t+"px":t}_toPx(t){const e=this._parseWidth(t);return e?e.endsWith("vw")?parseFloat(e)/100*window.innerWidth:e.endsWith("em")||e.endsWith("rem")?16*parseFloat(e):parseFloat(e)||0:0}_applyAside(){const t=this._parseWidth(this.asideWidth)||"240px",e=this._parseWidth(this.asideMin)||"120px",s=this._parseWidth(this.asideMax)||"50vw";this.style.setProperty("--aside-w",t),this.style.setProperty("--aside-min",e),this.style.setProperty("--aside-max",s)}_initDrag(){const t=this.renderRoot.querySelector(".resize-handle");t&&t.addEventListener("mousedown",e=>{e.preventDefault();const s=this.renderRoot.querySelector(".slot-aside");if(!s)return;const r=this._toPx(this.asideMin)||120,i=this._toPx(this.asideMax)||9999,n=s.offsetWidth||240,o=e.clientX;this._dragging=!0,t.classList.add("dragging");const a=t=>{const e=Math.min(i,Math.max(r,n+t.clientX-o));s.style.width=e+"px"},d=()=>{this._dragging=!1,t.classList.remove("dragging"),document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",d),this.asideWidth=s.offsetWidth+"px",this.style.setProperty("--aside-w",this.asideWidth),this.dispatchEvent(new CustomEvent("aside-resize",{detail:{width:this.asideWidth},bubbles:!0,composed:!0}))};document.addEventListener("mousemove",a),document.addEventListener("mouseup",d)})}render(){return e`
+            <div class="root">
+                <div class="slot-aside">
+                    <slot name="aside"></slot>
+                    <div class="resize-handle"></div>
+                </div>
+                <div class="slot-right">
+                    <div class="slot-header"><slot name="header"></slot></div>
+                    <div class="slot-main"><slot name="main"></slot></div>
+                    <div class="slot-footer"><slot name="footer"></slot></div>
+                </div>
+            </div>
+        `}}return function(t,e){if(!t.includes("-"))throw new Error(`Component name must contain a hyphen: ${t}`);customElements.get(t)||customElements.define(t,e)}("lux-layout",f),f}();

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

@@ -0,0 +1,90 @@
+const t=Symbol.for("lux-nothing");function e(t,...e){return{_$luxType$:1,strings:t,values:e}}function s(t){return t&&void 0!==t._$luxType$}const r=/(?:([@.?][\w-]+)|(ref)|(class))=\s*$/;function i(e,r,i){if(r!==t&&null!=r)if(function(t){return t&&"repeat"===t._type}(r))!function(t,e){const{items:r,keyFn:i,renderFn:o}=e,n=t._repeatState;if(n)for(const t of n.entries)t.span&&t.span.parentNode&&t.span.parentNode.removeChild(t.span);const d=document.createDocumentFragment(),l=[];for(const t of r){const e=i(t),r=o(t),n=document.createElement("span");n.style.display="contents",s(r)?a(r,n):null!=r&&!1!==r&&n.appendChild(document.createTextNode(String(r))),d.appendChild(n),l.push({key:e,result:r,span:n})}t.appendChild(d),t._repeatState={entries:l}}(e,r);else if(s(r))a(r,e);else if(Array.isArray(r)){o(e);for(const t of r)if(s(t)){const s=document.createElement("span");s.style.display="contents",a(t,s),e.appendChild(s)}else t instanceof Node?e.appendChild(t):null!=t&&!1!==t&&e.appendChild(document.createTextNode(String(t)))}else{if(r instanceof Node)return o(e),void e.appendChild(r);1===e.childNodes.length&&e.firstChild.nodeType===Node.TEXT_NODE?e.firstChild.textContent=String(r):(o(e),e.appendChild(document.createTextNode(String(r))))}else o(e)}function o(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function n(e,s){const{element:r,name:i,prefix:o}=e;switch(o){case"@":{const o=e.committedValue,n=null==s||s===t,a=n&&null!=o||s?.capture!==o?.capture||s?.once!==o?.once||s?.passive!==o?.passive,d=!n&&(null==o||a);if(a&&r.removeEventListener(i,e._handler||o,o),d)if("function"==typeof s){const t=e._host||(e._host={handleEvent(t){const s=e.committedValue;if("function"==typeof s){const e=r.getRootNode().host||r;s.call(e,t)}}});e._handler=t,r.addEventListener(i,t)}else if("object"==typeof s&&s?.handleEvent){const t={handleEvent:t=>s.handleEvent.call(s,t)};e._handler=t,r.addEventListener(i,t,{capture:s.capture,once:s.once,passive:s.passive})}e.committedValue=s;break}case".":r[i]=s===t?void 0:s;break;case"?":r.toggleAttribute(i,!!s);break;case"ref":"function"==typeof s&&s(r);break;case"class":if("string"==typeof s)r.className=s;else if("object"==typeof s&&null!=s){const t=r.className||"",e=t?t.split(/\s+/):[];for(const[t,r]of Object.entries(s))if(r)e.includes(t)||e.push(t);else{const s=e.indexOf(t);-1!==s&&e.splice(s,1)}r.className=e.filter(Boolean).join(" ")}break;default:null==s||!1===s?r.removeAttribute(i):r.setAttribute(i,!0===s?"":String(s))}}function a(t,e,o){if(!s(t))return void(e.textContent=t??"");const{strings:a,values:d}=t;if(e._luxActiveParts&&e._luxStrings===a){for(const t of e._luxActiveParts)t.index<d.length&&("child"===t.type?i(t.span,d[t.index]):n(t,d[t.index]));return}const l=document.createElement("template"),c=function(t){const e=[];let s="";for(let i=0;i<t.length;i++)if(s+=t[i],i<t.length-1){const t=s.match(r);if(t){const r=t[1],o=!!t[2],n=!!t[3];let a="",d="";r?(a=r[0],d=r.slice(1)):o?(a="ref",d="ref"):n&&(a="class",d="class");const l=`lux-attr-${i}`;s=s.slice(0,-t[0].length)+`${l}="${d}" `,e.push({type:"attr",name:d,prefix:a,marker:l,index:i})}else{const t=`lux-${i}`;s+=`\x3c!--${t}--\x3e`,e.push({type:"child",marker:t,index:i})}}return{html:s,parts:e}}(a);l.innerHTML=c.html;const h=l.content.cloneNode(!0),p=[];for(const t of c.parts)if("child"===t.type){const e=document.createTreeWalker(h,NodeFilter.SHOW_COMMENT);let s;for(;s=e.nextNode();)if(s.data===t.marker){const e=document.createElement("span");e.style.display="contents",s.parentNode.replaceChild(e,s),i(e,d[t.index]),p.push({type:"child",span:e,index:t.index});break}}else{const e=h.querySelector(`[${t.marker}]`);if(e){e.removeAttribute(t.marker);const s={type:"attr",element:e,name:t.name,prefix:t.prefix,index:t.index,committedValue:void 0};n(s,d[t.index]),p.push(s)}}e.textContent="",e.appendChild(h),e._luxActiveParts=p,e._luxStrings=a}const d=new Set;let l=!1;function c(t){var e;d.add(t),l||(l=!0,e=()=>{l=!1;const t=[...d];d.clear();for(const e of t)e._$performUpdate()},Promise.resolve().then(e))}const h={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?null:JSON.stringify(t);default:return t}},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return Number(t);case Object:case Array:try{return JSON.parse(t)}catch{return null}default:return t}}};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 t=Object.getPrototypeOf(this);t.finalize&&t.finalize(),this.elementProperties=new Map(t.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 t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}this.__attributeToPropertyMap=new Map;for(const[t,e]of this.elementProperties){const s=this.__attributeNameForProperty(t,e);void 0!==s&&this.__attributeToPropertyMap.set(s,t)}this.elementStyles=this.styles}}static __attributeNameForProperty(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.replace(/([A-Z])/g,"-$1").toLowerCase():void 0}static createProperty(t,e={}){if(this.__prepare(),!this.elementProperties.has(t)&&(e.state&&(e={...e,attribute:!1}),this.elementProperties.set(t,e),!e.noAccessor)){const s=Symbol(),r=this.getPropertyDescriptor(t,s,e);void 0!==r&&Object.defineProperty(this.prototype,t,r)}}static getPropertyDescriptor(t,e,s){const{type:r,reflect:i,converter:o}=s;return{get(){return this[e]},set(r){const i=this[e];this[e]=r,this.requestUpdate(t,i,s)},configurable:!0,enumerable:!0}}static _initializers=[];static addInitializer(t){this._initializers=[...this._initializers||[],t]}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 t of this.constructor._initializers||[])t(this)}__saveInstanceProperties(){const t=this.constructor.elementProperties;if(t)for(const[e,s]of t)if(!s.noAccessor&&this.hasOwnProperty(e)){const t=this[e];delete this[e],this.__instancePropertyValues=this.__instancePropertyValues||new Map,this.__instancePropertyValues.set(e,t)}}connectedCallback(){this.__controllers.forEach(t=>t.hostConnected?.()),this.constructor.hasOwnProperty("finalized")||this.constructor.finalize();const t=this.constructor.__attributeToPropertyMap;if(t)for(const[e,s]of t){const t=this.getAttribute(e);if(null!==t){const e=this.constructor.elementProperties.get(s);if(e){const r=e.converter?.fromAttribute??h.fromAttribute;this[s]=r(t,e.type)}}}if(this.__instancePropertyValues){for(const[t,e]of this.__instancePropertyValues)this[t]=e;this.__instancePropertyValues=void 0}this.renderRoot,this.__hasUpdated||this.requestUpdate()}disconnectedCallback(){this.__controllers.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const r=this.constructor.__attributeToPropertyMap?.get(t);if(void 0!==r&&this.__reflectingProperty!==r){const t=this.constructor.elementProperties.get(r);if(t){const e="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:h;this.__reflectingProperty=r;const i=e.fromAttribute(s,t.type);this[r]=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 t=this.constructor.elementStyles;if(!t)return;const e=Array.isArray(t)?t:[t],r=[];for(const t of e)"string"==typeof t?r.push(t):s(t)&&r.push(t.strings.join(""));if(0!==r.length)if(void 0!==this._renderRoot.adoptedStyleSheets){const t=new CSSStyleSheet;t.replaceSync(r.join("\n")),this._renderRoot.adoptedStyleSheets=[...this._renderRoot.adoptedStyleSheets,t]}else{const t=document.createElement("style");t.textContent=r.join("\n"),this._renderRoot.appendChild(t)}}enableUpdating(t){}get updateComplete(){return this.__updateCompletePromise??Promise.resolve()}get hasUpdated(){return this.__hasUpdated}get isUpdatePending(){return this.__updatePending}requestUpdate(t,e,s){if(void 0!==t){if(!(s?.hasChanged??((t,e)=>!Object.is(t,e)))(this[t],e))return}this.__updatePending||(this.__updatePending=!0,c(this))}async performUpdate(){if(this.isUpdatePending){this.__updatePending=!1,this.willUpdate(new Map),this.__controllers.forEach(t=>t.hostUpdate?.()),this.update(new Map),this.__hasUpdated=!0;for(const[t,e]of this.constructor.elementProperties)if(e.reflect){const s=this[t],r=e.converter?.toAttribute??h.toAttribute,i=this.constructor.__attributeNameForProperty(t,e);if(void 0!==i){this.__reflectingProperty=t;const o=r(s,e.type);null==o?this.removeAttribute(i):this.setAttribute(i,String(o)),this.__reflectingProperty=null}}this.__controllers.forEach(t=>t.hostUpdated?.()),this.firstUpdated(new Map),this.updated(new Map)}}_$performUpdate(){this.performUpdate()}shouldUpdate(t){return!0}willUpdate(t){}update(t){const e=this.render();e&&a(e,this.renderRoot)}render(){return e``}firstUpdated(t){}updated(t){}propertyChangedCallback(t,e,s){}addController(t){this.__controllers.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.__controllers.delete(t)}emit(t,e,s={}){return this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0,...s}))}$(t){return this.renderRoot.querySelector(t)}$$(t){return this.renderRoot.querySelectorAll(t)}}const u=(function(t,...e){return{_$luxType$:3,strings:t,values:e}})`
+    :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .root {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .slot-aside {
+        z-index: 3;
+        flex-shrink: 0;
+        width: var(--aside-w, 240px);
+        min-width: var(--aside-min, 120px);
+        max-width: var(--aside-max, 50vw);
+        overflow: hidden;
+        position: relative;
+        border-right: 1px solid rgb(var(--lux-border, 51 65 85));
+        background: rgb(var(--lux-card, 30 41 59));
+    }
+
+    :host([aside-scroll]) .slot-aside {
+        overflow-y: auto;
+    }
+
+    .slot-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .slot-header {
+        flex-shrink: 0;
+        z-index: 2;
+    }
+    .slot-footer {
+        flex-shrink: 0;
+        z-index: 2;
+    }
+    .slot-main {
+        flex: 1;
+        overflow: auto;
+        min-height: 0;
+        z-index: 1;
+    }
+
+    :host([no-header]) .slot-header {
+        display: none;
+    }
+    :host([no-footer]) .slot-footer {
+        display: none;
+    }
+    :host([no-aside]) .slot-aside {
+        display: none;
+    }
+
+    .resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 100%;
+        cursor: col-resize;
+        z-index: 10;
+        background: transparent;
+        transition: background var(--lux-transition, 150ms ease);
+    }
+    .resize-handle:hover {
+        background: rgb(var(--lux-primary-400, 129 120 247) / 0.3);
+    }
+`;class f extends p{static styles=u;static properties={asideWidth:{type:String,attribute:"aside-width",reflect:!0},asideMin:{type:String,attribute:"aside-min",reflect:!0},asideMax:{type:String,attribute:"aside-max",reflect:!0},asideScroll:{type:Boolean,attribute:"aside-scroll",reflect:!0},noHeader:{type:Boolean,attribute:"no-header",reflect:!0},noFooter:{type:Boolean,attribute:"no-footer",reflect:!0},noAside:{type:Boolean,attribute:"no-aside",reflect:!0}};constructor(){super(),this.asideWidth="240px",this.asideMin="120px",this.asideMax="50vw"}firstUpdated(){this._applyAside(),this._initDrag()}updated(){this._dragging||this._applyAside()}_parseWidth(t){return null==t?null:"number"==typeof t||/^\d+(\.\d+)?$/.test(t)?t+"px":t}_toPx(t){const e=this._parseWidth(t);return e?e.endsWith("vw")?parseFloat(e)/100*window.innerWidth:e.endsWith("em")||e.endsWith("rem")?16*parseFloat(e):parseFloat(e)||0:0}_applyAside(){const t=this._parseWidth(this.asideWidth)||"240px",e=this._parseWidth(this.asideMin)||"120px",s=this._parseWidth(this.asideMax)||"50vw";this.style.setProperty("--aside-w",t),this.style.setProperty("--aside-min",e),this.style.setProperty("--aside-max",s)}_initDrag(){const t=this.renderRoot.querySelector(".resize-handle");t&&t.addEventListener("mousedown",e=>{e.preventDefault();const s=this.renderRoot.querySelector(".slot-aside");if(!s)return;const r=this._toPx(this.asideMin)||120,i=this._toPx(this.asideMax)||9999,o=s.offsetWidth||240,n=e.clientX;this._dragging=!0,t.classList.add("dragging");const a=t=>{const e=Math.min(i,Math.max(r,o+t.clientX-n));s.style.width=e+"px"},d=()=>{this._dragging=!1,t.classList.remove("dragging"),document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",d),this.asideWidth=s.offsetWidth+"px",this.style.setProperty("--aside-w",this.asideWidth),this.dispatchEvent(new CustomEvent("aside-resize",{detail:{width:this.asideWidth},bubbles:!0,composed:!0}))};document.addEventListener("mousemove",a),document.addEventListener("mouseup",d)})}render(){return e`
+            <div class="root">
+                <div class="slot-aside">
+                    <slot name="aside"></slot>
+                    <div class="resize-handle"></div>
+                </div>
+                <div class="slot-right">
+                    <div class="slot-header"><slot name="header"></slot></div>
+                    <div class="slot-main"><slot name="main"></slot></div>
+                    <div class="slot-footer"><slot name="footer"></slot></div>
+                </div>
+            </div>
+        `}}!function(t,e){if(!t.includes("-"))throw new Error(`Component name must contain a hyphen: ${t}`);customElements.get(t)||customElements.define(t,e)}("lux-layout",f);export{f as default};