@elenajs/components 0.17.0 → 1.0.0-rc.1

package/README.md

@@ -0,0 +1,209 @@
+<div align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="558" height="220">
+  </source>
+  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
+  </source>
+  <img src="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
+</picture>
+
+### Elena component library demonstrating how to build Progressive Web Components.
+
+<br/>
+
+<a href="https://arielsalminen.com"><img src="https://img.shields.io/badge/creator-@arielle-F95B1F" alt="Creator @arielle"/></a>
+<a href="https://www.npmjs.com/package/@elenajs/components"><img src="https://img.shields.io/npm/v/@elenajs/components.svg" alt="Latest version on npm" /></a>
+<a href="https://github.com/getelena/elena/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="Elena is released under the MIT license." /></a>
+<a href="https://github.com/getelena/elena/actions/workflows/tests.yml"><img src="https://github.com/getelena/elena/actions/workflows/tests.yml/badge.svg" alt="Tests status" /></a>
+
+</div>
+
+<br/>
+
+<p align="center"><strong>@elenajs/components</strong> is an example Progressive Web Component library built with <a href="https://elenajs.com">Elena</a>. It demonstrates Elena’s component patterns and ships with a <a href="https://custom-elements-manifest.open-wc.org/">Custom Elements Manifest</a>, TypeScript declarations, and individual CSS files for each component.</p>
+
+<br/>
+
+## Table of contents
+
+- **[Install](#install)**
+- **[Usage](#usage)**
+  - **[Import all components](#import-all-components)**
+  - **[Import individual components](#import-individual-components)**
+  - **[Import styles](#import-styles)**
+- **[Available components](#available-components)**
+  - **[Button](#button)**
+  - **[Spinner](#spinner)**
+  - **[Stack](#stack)**
+  - **[Visually Hidden](#visually-hidden)**
+- **[TypeScript](#typescript)**
+- **[Development](#development)**
+
+## Install
+
+```bash
+npm install @elenajs/components
+```
+
+## Usage
+
+### Import all components
+
+Import the full bundle to register all components at once:
+
+```js
+import "@elenajs/components";
+```
+
+### Import individual components
+
+Import only the components you need for better tree-shaking:
+
+```js
+import "@elenajs/components/dist/button.js";
+import "@elenajs/components/dist/spinner.js";
+import "@elenajs/components/dist/stack.js";
+import "@elenajs/components/dist/visually-hidden.js";
+```
+
+### Import styles
+
+Each component ships with a matching CSS file. Import the full bundle or individual files:
+
+```css
+/* All component styles */
+@import "@elenajs/components/dist/bundle.css";
+
+/* Or individual styles */
+@import "@elenajs/components/dist/button.css";
+@import "@elenajs/components/dist/spinner.css";
+@import "@elenajs/components/dist/stack.css";
+@import "@elenajs/components/dist/visually-hidden.css";
+```
+
+## Available components
+
+### Button
+
+Renders a `<button>` element with built-in event delegation and variant styling.
+
+```html
+<elena-button>Click me</elena-button>
+<elena-button variant="primary">Save</elena-button>
+<elena-button variant="danger">Delete</elena-button>
+<elena-button disabled>Disabled</elena-button>
+```
+
+#### Props
+
+| Prop       | Type                                 | Default     | Description                                     |
+| ---------- | ------------------------------------ | ----------- | ----------------------------------------------- |
+| `variant`  | `"default" \| "primary" \| "danger"` | `"default"` | The style variant of the button.                |
+| `disabled` | `Boolean`                            | `false`     | Makes the component disabled.                   |
+| `name`     | `string`                             | `""`        | The name used to identify the button in forms.  |
+| `value`    | `string`                             | `""`        | The value used to identify the button in forms. |
+| `type`     | `"submit" \| "reset" \| "button"`    | `"button"`  | The type of the button.                         |
+
+#### Events
+
+| Event   | Description                           |
+| ------- | ------------------------------------- |
+| `click` | Fires when the button is clicked.     |
+| `focus` | Fires when the button receives focus. |
+| `blur`  | Fires when the button loses focus.    |
+
+#### CSS custom properties
+
+| Property                | Description                             |
+| ----------------------- | --------------------------------------- |
+| `--elena-button-text`   | Overrides the default text color.       |
+| `--elena-button-bg`     | Overrides the default background color. |
+| `--elena-button-font`   | Overrides the default font family.      |
+| `--elena-button-radius` | Overrides the default border radius.    |
+
+### Spinner
+
+Displays an animated loading indicator that inherits the current text color.
+
+```html
+<elena-spinner></elena-spinner>
+```
+
+#### CSS custom properties
+
+| Property                | Description                          |
+| ----------------------- | ------------------------------------ |
+| `--elena-spinner-size`  | Overrides the default size (20px).   |
+| `--elena-spinner-border`| Overrides the default border width (2px). |
+
+### Stack
+
+Manages flexbox layout of its children with optional spacing.
+
+```html
+<elena-stack>
+  <elena-button>First</elena-button>
+  <elena-button>Second</elena-button>
+</elena-stack>
+
+<elena-stack direction="row">
+  <elena-button>Left</elena-button>
+  <elena-button>Right</elena-button>
+</elena-stack>
+```
+
+#### Props
+
+| Prop        | Type                | Default    | Description                        |
+| ----------- | ------------------- | ---------- | ---------------------------------- |
+| `direction` | `"column" \| "row"` | `"column"` | The direction of the stack layout. |
+
+### Visually Hidden
+
+Hides content visually while keeping it accessible to assistive technologies such as screen readers.
+
+```html
+<elena-visually-hidden>Skip to main content</elena-visually-hidden>
+```
+
+No props. Content is passed as children.
+
+## TypeScript
+
+The package ships with TypeScript declarations for JSX integration. To get type checking in your framework:
+
+```ts
+// types.d.ts
+import type { CustomElements } from "@elenajs/components";
+
+type ElenaIntrinsicElements = {
+  [K in keyof CustomElements]: CustomElements[K] & {
+    onClick?: (e: MouseEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    children?: React.ReactNode;
+  };
+};
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends ElenaIntrinsicElements {}
+  }
+}
+```
+
+## Development
+
+```bash
+pnpm start    # Launch dev server with live reload
+pnpm build    # Build to dist/ (via elena build)
+pnpm clean    # Remove dist/
+```
+
+## License
+
+MIT
+
+## Copyright
+
+Copyright © 2026 [Ariel Salminen](https://arielsalminen.com)

package/dist/bundle.css

@@ -1 +1 @@
-@scope(elena-button){:scope,:not(svg,path),:before,:after{all:unset}:scope{--elena-button-bg:#eaecf0;--elena-button-text:#172b4d;--elena-button-border:#eaecf0;--elena-button-font:system-ui, sans-serif;--elena-button-font-size:15px;--elena-button-font-weight:500;--elena-button-radius:6px;--elena-button-focus:#5a44d4;all:unset;border-radius:var(--elena-button-radius);transition:background-color .2s,filter .2s;display:inline-block}:scope:not([hydrated]),.elena-button{-webkit-user-select:none;user-select:none;cursor:pointer;box-sizing:border-box;touch-action:manipulation;font-family:inherit;font-weight:var(--elena-button-font-weight);font-family:var(--elena-button-font);font-size:var(--elena-button-font-size);block-size:calc(var(--elena-button-font) * 4);min-block-size:calc(var(--elena-button-font) * 4);color:var(--elena-button-text);background:var(--elena-button-bg);border:2px solid var(--elena-button-border);border-radius:var(--elena-button-radius);text-align:center;justify-content:center;align-items:center;gap:.375rem;padding:.5em 1.1em .55em;line-height:1.3;display:inline-flex}.elena-icon{inline-size:var(--elena-button-font-size);block-size:var(--elena-button-font-size);fill:currentColor;margin-block:.15rem;margin-inline:-.3rem;display:inline-flex;transform:translateZ(0)}span+.elena-icon{margin-inline:0 -.3rem}svg{block-size:100%;inline-size:100%;display:block}:scope[icon]:not([hydrated]):after{content:"";background:var(--elena-button-text);border-radius:var(--elena-button-radius);opacity:.2;width:var(--elena-button-font-size);height:var(--elena-button-font-size);margin-block:.15rem;margin-inline:0 -.3rem;display:inline-block}:scope[icon]:not([hydrated]):empty:after{margin-inline:-.3rem}:scope:hover{filter:brightness(.9)}:scope:active{opacity:.9;transition:none;transform:translateY(1px)}:scope:focus-within{box-shadow:0 0 0 1px #fff, 0 0 0 3px var(--elena-button-focus);outline:none;transition:none}:scope[disabled]{--elena-button-text:#a8b0bd;--elena-button-bg:#f3f4f6;--elena-button-border:#f3f4f6;pointer-events:none}:scope[variant=primary]{--elena-button-bg:#5a44d4;--elena-button-border:#5a44d4;--elena-button-text:#fff}:scope[variant=danger]{--elena-button-bg:#d44444;--elena-button-border:#d44444;--elena-button-text:#fff}:scope[variant=danger]:focus-within{--elena-button-focus:#d44444}:scope[variant=outline]{--elena-button-bg:transparent;--elena-button-text:#172b4d;--elena-button-border:#172b4d}:scope[size=sm]{--elena-button-font-size:12px}:scope:not([hydrated])[size=sm],:scope[size=sm] .elena-button{padding-block:.3em .35em}:scope[size=lg]{--elena-button-font-size:18px}:scope:not([hydrated])[size=lg],:scope[size=lg] .elena-button{padding-block:.6em .65em}:scope[expand],:scope[expand] .elena-button{inline-size:100%}}@scope(elena-stack){:scope{flex-flow:column wrap;justify-content:flex-start;align-items:flex-start;gap:.5rem;display:flex}:scope[direction=row]{flex-direction:row}}
+@scope(elena-button){:scope,:where(:not(img,svg):not(svg *)),:before,:after{all:unset;display:revert;box-sizing:border-box}:scope{--_elena-button-bg:var(--elena-button-bg,#eaecf0);--_elena-button-text:var(--elena-button-text,#172b4d);--_elena-button-border:var(--elena-button-border,#eaecf0);--_elena-button-font:var(--elena-button-font,system-ui, sans-serif);--_elena-button-font-size:var(--elena-button-font-size,15px);--_elena-button-font-weight:var(--elena-button-font-weight,500);--_elena-button-radius:var(--elena-button-radius,6px);--_elena-button-focus:var(--elena-button-focus,#5a44d4);all:unset;border-radius:var(--_elena-button-radius);transition:background-color .2s,filter .2s;display:inline-block}:scope:not([hydrated]),.elena-button:is(button,a){-webkit-user-select:none;user-select:none;cursor:pointer;box-sizing:border-box;touch-action:manipulation;font-family:inherit;font-weight:var(--_elena-button-font-weight);font-family:var(--_elena-button-font);font-size:var(--_elena-button-font-size);block-size:calc(var(--_elena-button-font) * 4);min-block-size:calc(var(--_elena-button-font) * 4);color:var(--_elena-button-text);background:var(--_elena-button-bg);border:2px solid var(--_elena-button-border);border-radius:var(--_elena-button-radius);text-align:center;justify-content:center;align-items:center;gap:.375rem;padding:.5em 1.1em .55em;line-height:1.3;text-decoration:none;transition:none;display:inline-flex;position:relative}.elena-icon{inline-size:var(--_elena-button-font-size);block-size:var(--_elena-button-font-size);fill:currentColor;margin-block:.15rem;margin-inline:-.3rem;display:inline-flex;transform:translateZ(0)}span+.elena-icon{margin-inline:0 -.3rem}svg{block-size:100%;inline-size:100%;display:block}:scope[icon]:not([hydrated]):after{content:"";background:var(--_elena-button-text);border-radius:var(--_elena-button-radius);opacity:.2;width:var(--_elena-button-font-size);height:var(--_elena-button-font-size);margin-block:.15rem;margin-inline:0 -.3rem;display:inline-block}:scope[icon]:not([hydrated]):empty:after{margin-inline:-.3rem}:scope:hover{filter:brightness(.9)}.elena-button:is(button,a):hover{color:var(--_elena-button-text)}:scope:active{opacity:.9;transition:none;transform:translateY(1px)}:scope:focus-within{box-shadow:0 0 0 1px #fff, 0 0 0 3px var(--_elena-button-focus);outline:none;transition:none}.elena-button:focus{outline:none}:scope[disabled]{--elena-button-text:#a8b0bd;--elena-button-bg:#f3f4f6;--elena-button-border:#f3f4f6;pointer-events:none}:scope[variant=primary]{--elena-button-bg:#5a44d4;--elena-button-border:#5a44d4;--elena-button-text:#fff}:scope[variant=danger]{--elena-button-bg:#d44444;--elena-button-border:#d44444;--elena-button-text:#fff}:scope[variant=danger]:focus-within{--elena-button-focus:#d44444}:scope[variant=outline]{--elena-button-bg:transparent;--elena-button-text:#172b4d;--elena-button-border:#172b4d}:scope[size=sm]{--elena-button-font-size:12px}:scope:not([hydrated])[size=sm],:scope[size=sm] .elena-button{padding-block:.3em .35em}:scope[size=lg]{--elena-button-font-size:18px}:scope:not([hydrated])[size=lg],:scope[size=lg] .elena-button{padding-block:.6em .65em}:scope[expand],:scope[expand] .elena-button{inline-size:100%}:scope elena-spinner{margin:0;padding:0;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}:scope[loading]{pointer-events:none}:scope:not([hydrated])[loading]{color:#0000}:scope[loading] :is(span,.elena-icon){opacity:0}}@scope(elena-spinner){:scope,:where(:not(img,svg):not(svg *)),:before,:after{all:unset;display:revert;box-sizing:border-box}:scope{--_elena-spinner-size:var(--elena-spinner-size,20px);--_elena-spinner-border:var(--elena-spinner-border,2px);inline-size:var(--_elena-spinner-size);block-size:var(--_elena-spinner-size);color:inherit;animation:.5s linear infinite elenaRotate;display:inline-flex;position:relative;inset:0}:scope,:scope:after{border:var(--_elena-spinner-border) solid transparent;border-radius:50%}:scope{border-block-end-color:currentColor}:scope:after{content:"";inset:calc(var(--_elena-spinner-border) * -1);opacity:.2;border-color:currentColor;border-block-end-color:#0000;position:absolute}@keyframes elenaRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}@scope(elena-stack){:scope{flex-flow:column wrap;justify-content:flex-start;align-items:flex-start;gap:.5rem;display:flex}:scope[direction=row]{flex-direction:row}}@scope(elena-visually-hidden){:scope{clip:rect(1px, 1px, 1px, 1px)!important;border:0!important;block-size:1px!important;inline-size:1px!important;padding:0!important;position:absolute!important;top:0!important;overflow:hidden!important}}

package/dist/bundle.js

@@ -1,5 +1,2 @@
-function e(e,t,n){if(t="boolean"===e&&"boolean"!=typeof t?null!==t:t,!n)return t;if("toAttribute"===n)switch(e){case"object":case"array":return null===t?null:JSON.stringify(t);case"boolean":return t?"":null;case"number":return null===t?null:t;default:return""===t?null:t}else switch(e){case"object":case"array":if(!t)return t;try{return JSON.parse(t)}catch{return console.warn("░█ [ELENA]: Invalid JSON for prop, received: "+t),null}case"boolean":return t;case"number":return null!==t?+t:t;default:return t}}function t(e,t,n){e?null===n?e.removeAttribute(t):e.setAttribute(t,n):console.warn("░█ [ELENA]: Cannot sync attributes to a null element.")}let n=class extends Event{constructor(e,t){super(e,{bubbles:!0,composed:!0,...t})}};function s(e){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};return String(e).replace(/[&<>"']/g,e=>t[e])}function r(e,...t){const n=e.reduce((e,n,r)=>{const i=t[r];return e+n+(i&&i.__raw?String(i):s(String(i??"")))},"");return{__raw:!0,strings:e,values:t,toString:()=>n}}const i={__raw:!0,toString:()=>""},a=new WeakMap;function o(e,t,n){(function(e,t,n){if(e._tplStrings!==t||!e._tplParts)return!1;let r=!1;for(let t=0;t<n.length;t++){const i=n[t],a=i&&i.__raw,o=a?String(i):s(String(i??""));if(o!==e._tplValues[t])if(e._tplValues[t]=o,a)r=!0;else{const n=e._tplParts[t];n?n.textContent=String(i??""):r=!0}}return!r})(e,t,n)||function(e,t,n){const r=n.map(e=>e&&e.__raw?String(e):s(String(e??"")));let i=a.get(t);i||(i=Array.from(t,e=>e.replace(/\n\s*/g," ")),a.set(t,i));const o=i.reduce((e,t,n)=>e+t+(r[n]??""),"").replace(/>\s+</g,"><").replace(/>\s+/g,">").replace(/\s+</g,"<").trim();(function(e,t){e?e.replaceChildren(e.ownerDocument.createRange().createContextualFragment(t)):console.warn("░█ [ELENA]: Cannot render to a null element.")})(e,o),e._tplStrings=t,e._tplValues=r,e._tplParts=function(e,t){const n=new Array(t.length),s=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let r,i=0;for(;(r=s.nextNode())&&i<t.length;)r.textContent===t[i]&&(n[i]=r,i++);return n}(e,r)}(e,t,n)}function l(s,r){const i=r&&r.element?/^[a-z][a-z0-9-]*$/i.test(r.element)?e=>e.getElementsByClassName(r.element)[0]:e=>e.querySelector(r.element):e=>e.firstElementChild,a=r&&r.props?r.props:[],l=[],h=new Set;for(const e of a)"string"==typeof e?l.push(e):(l.push(e.name),!1===e.reflect&&h.add(e.name));class c extends s{element=null;attributeChangedCallback(t,n,s){"text"!==t?(function(t,n,s,r){if(s!==r){const s=typeof t[n];"undefined"===s&&console.warn(`░█ [ELENA]: Prop "${n}" has no default value. Set a default in the constructor so Elena can infer the correct type.`);const i=e(s,r,"toProp");t[n]=i}}(this,t,n,s),this._hydrated&&n!==s&&!this._isRendering&&(this._isRendering=!0,this._applyRender(),this._isRendering=!1)):this.text=s??""}static get observedAttributes(){return[...l,"text"]}render(){}_applyRender(){const e=this.render();e&&e.strings&&(o(this,e.strings,e.values),this._hydrated&&(this.element=i(this)))}connectedCallback(){this._captureText(),this._applyRender(),this._resolveInnerElement(),this._flushProps(),this._delegateEvents(),this.updated()}_captureText(){if(!this._hydrated&&!this._text){const e=this.textContent.trim();e?this.text=e:queueMicrotask(()=>{this._text||(this.text=this.textContent.trim())})}}_resolveInnerElement(){this.element||(this.element=i(this),this.element||(r&&r.element&&console.warn("░█ [ELENA]: No element found, using firstElementChild as fallback."),this.element=this.firstElementChild))}_flushProps(){if(this._props)for(const[n,s]of this._props){if(h.has(n))continue;t(this,n,e(typeof s,s,"toAttribute"))}}_delegateEvents(){!this._events&&r&&r.events&&(this.element?(this._events=!0,r.events?.forEach(e=>{this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)})):console.warn("░█ [ELENA]: Cannot delegate events, no inner element found. Ensure the component renders an element or check your element selector."))}updated(){this._hydrated||(this._hydrated=!0,this.setAttribute("hydrated",""))}disconnectedCallback(){this._events&&(this._events=!1,r.events?.forEach(e=>{this.element?.removeEventListener(e,this)}))}handleEvent(e){r.events?.includes(e.type)&&(e.stopPropagation(),this.dispatchEvent(new n(e.type,{cancelable:!0})))}get text(){return this._text??""}set text(e){const t=this._text;this._text=e,this._hydrated&&t!==e&&!this._isRendering&&(this._isRendering=!0,this._applyRender(),this._isRendering=!1)}}return l.length&&(l.includes("text")&&console.warn('░█ [ELENA]: "text" is a reserved property. Rename your prop to avoid overriding the built-in text content feature.'),function(n,s,r){for(const i of s){const s=!r||!r.has(i);Object.defineProperty(n,i,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(i):void 0},set(n){if(this._props||(this._props=new Map),n!==this._props.get(i)&&(this._props.set(i,n),this.isConnected))if(s){const s=e(typeof n,n,"toAttribute");t(this,i,s)}else this._hydrated&&!this._isRendering&&(this._isRendering=!0,this._applyRender(),this._isRendering=!1)}})}}(c.prototype,l,h)),r&&r.tagName&&(c._tagName=r.tagName),c.define=function(){this._tagName?function(e,t){"undefined"!=typeof window&&"customElements"in window&&(window.customElements.get(e)||window.customElements.define(e,t))}(this._tagName,this):console.warn("░█ [ELENA]: define() called without a tagName. Set tagName in your Elena options to register the element.")},c}const h={tagName:"elena-button",props:["variant","size","expand","disabled","label","href","target","download","name","value","type",{name:"icon",reflect:!1}],events:["click","focus","blur"]};class c extends(l(HTMLElement,h)){constructor(){super(),this.variant="default",this.size="md",this.expand=!1,this.disabled=!1,this.label="",this.href="",this.target="_self",this.download=!1,this.name="",this.value="",this.type="button",this.icon=""}renderButton(e){return r`<button class="elena-button" type="${this.type}" ${this.name?r`name="${this.name}"`:i} ${this.value?r`value="${this.value}"`:i} ${this.disabled?"disabled":i} ${this.label?r`aria-label="${this.label}"`:i}>${e}</button>`}renderLink(e){return r`<a class="elena-button" href="${this.href}" target="${this.target}" ${this.download?"download":i} ${this.label?r`aria-label="${this.label}"`:i}>${e}</a>`}render(){const e=this.icon?function(e){return{__raw:!0,toString:()=>e??""}}(`<span class="elena-icon">${this.icon}</span>`):i,t=r`
-      ${this.text?r`<span>${this.text}</span>`:i}
-      ${e}
-    `;return this.href?this.renderLink(t):this.renderButton(t)}}c.define();const u={tagName:"elena-stack",props:["direction"]};class d extends(l(HTMLElement,u)){constructor(){super(),this.direction="column"}}d.define();export{c as Button,d as Stack};
+function e(e,t,n){if(t="boolean"===e&&"boolean"!=typeof t?null!==t:t,!n)return t;if("toAttribute"===n)switch(e){case"object":case"array":return null===t?null:JSON.stringify(t);case"boolean":return t?"":null;case"number":return null===t?null:t;default:return""===t?null:t}else switch(e){case"object":case"array":if(!t)return t;try{return JSON.parse(t)}catch{return console.warn("░█ [ELENA]: Invalid JSON: "+t),null}case"boolean":return t;case"number":return null!==t?+t:t;default:return t??""}}function t(e,t,n){e?null===n?e.removeAttribute(t):e.setAttribute(t,n):console.warn("░█ [ELENA]: Cannot sync attrs.")}const n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function s(e){return Array.isArray(e)?e.map(e=>r(e)).join(""):r(e)}function r(e){return e?.__raw?String(e):function(e){return String(e).replace(/[&<>"']/g,e=>n[e])}(String(e??""))}function i(e,...t){let n;return{__raw:!0,strings:e,values:t,toString:()=>(void 0===n&&(n=e.reduce((e,n,r)=>e+n+s(t[r]),"")),n)}}const a=Object.freeze({__raw:!0,toString:()=>""}),o=e=>Array.isArray(e)?e.some(e=>e?.__raw):e?.__raw,l=e=>Array.isArray(e)?e.map(e=>String(e??"")).join(""):String(e??"");function d(e){return e.replace(/>\n\s*/g,">").replace(/\n\s*</g,"<").replace(/\n\s*/g," ")}const c=new WeakMap,h="e"+Math.random().toString(36).slice(2,6);function u(e,t,n){return!function(e,t,n){if(e._tplStrings!==t||!e._tplParts)return!1;for(let t=0;t<n.length;t++){const s=n[t],r=Array.isArray(s)?l(s):s;if(r!==e._tplValues[t]){if(o(s)||!e._tplParts[t])return!1;e._tplValues[t]=r,e._tplParts[t].textContent=l(s)}}return!0}(e,t,n)&&(function(e,t,n){let r=c.get(t);if(!r){const e=Array.from(t,d);r={processedStrings:e,template:n.length>0?p(e,n.length):null},c.set(t,r)}if(r.template)e._tplParts=function(e,t,n){const r=t.content.cloneNode(!0),i=document.createTreeWalker(r,NodeFilter.SHOW_COMMENT),a=new Array(n.length),d=[];let c;for(;c=i.nextNode();)c.data===h&&d.push(c);for(let e=0;e<d.length;e++){const t=n[e];if(o(t)){const n=document.createElement("template");n.innerHTML=s(t),d[e].parentNode.replaceChild(n.content,d[e])}else{const n=document.createTextNode(l(t));d[e].parentNode.replaceChild(n,d[e]),a[e]=n}}return e.replaceChildren(r),a}(e,r.template,n);else{const t=n.map(e=>s(e)),i=r.processedStrings.reduce((e,n,s)=>e+n+(t[s]??""),"").replace(/>\s+</g,"><").trim(),a=document.createElement("template");a.innerHTML=i,_(e,a.content.childNodes),e._tplParts=new Array(n.length)}e._tplStrings=t,e._tplValues=n.map(e=>Array.isArray(e)?l(e):e)}(e,t,n),!0)}function p(e,t){const n=`\x3c!--${h}--\x3e`,s=e.reduce((e,s,r)=>e+s.replace(/>\s+</g,"><")+(r<t?n:""),"").trim(),r=document.createElement("template");r.innerHTML=s;const i=document.createTreeWalker(r.content,NodeFilter.SHOW_COMMENT);let a=0;for(;i.nextNode();)i.currentNode.data===h&&a++;return a===t?r:null}function _(e,t){const n=Array.from(e.childNodes),s=Array.from(t),r=Math.max(n.length,s.length);for(let t=0;t<r;t++){const r=n[t],i=s[t];r?i?r.nodeType!==i.nodeType||r.nodeType===Node.ELEMENT_NODE&&r.tagName!==i.tagName?e.replaceChild(i,r):r.nodeType===Node.TEXT_NODE?r.textContent!==i.textContent&&(r.textContent=i.textContent):r.nodeType===Node.ELEMENT_NODE&&(f(r,i),_(r,i.childNodes)):e.removeChild(r):e.appendChild(i)}}function f(e,t){for(let n=e.attributes.length-1;n>=0;n--){const{name:s}=e.attributes[n];t.hasAttribute(s)||e.removeAttribute(s)}for(let n=0;n<t.attributes.length;n++){const{name:s,value:r}=t.attributes[n];e.getAttribute(s)!==r&&e.setAttribute(s,r)}}class m extends Event{constructor(e,t){super(e,{bubbles:!0,composed:!0,...t})}}const g=new WeakSet;function y(n){return class extends n{element=null;attributeChangedCallback(t,n,s){super.attributeChangedCallback?.(t,n,s),"text"!==t?(this._syncing=!0,function(t,n,s,r){if(s!==r){const s=typeof t[n];"undefined"===s&&console.warn(`░█ [ELENA]: Prop "${n}" has no default.`);const i=e(s,r,"toProp");t[n]=i}}(this,t,n,s),this._syncing=!1,this._hydrated&&n!==s&&!this._isRendering&&this._safeRender()):this.text=s??""}static get observedAttributes(){if(this._observedAttrs)return this._observedAttrs;const e=this._propNames||(this.props||[]).map(e=>"string"==typeof e?e:e.name);return this._observedAttrs=[...e,"text"],this._observedAttrs}connectedCallback(){super.connectedCallback?.(),this._setupStaticProps(),this._captureClassFieldDefaults(),this._captureText(),this._attachShadow(),this.willUpdate(),this._applyRender(),this._resolveInnerElement(),this._syncProps(),this._delegateEvents(),this._hydrated||(this._hydrated=!0,this.setAttribute("hydrated",""),this.firstUpdated()),this.updated()}_setupStaticProps(){const n=this.constructor;if(g.has(n))return;const s=new Set,r=[];if(n.props){for(const e of n.props)"string"==typeof e?r.push(e):(r.push(e.name),!1===e.reflect&&s.add(e.name));r.includes("text")&&console.warn('░█ [ELENA]: "text" is reserved.'),function(n,s,r){for(const i of s){const s=!r||!r.has(i);Object.defineProperty(n,i,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(i):void 0},set(n){if(this._props||(this._props=new Map),n!==this._props.get(i)&&(this._props.set(i,n),this.isConnected))if(s){if(!this._syncing){const s=e(typeof n,n,"toAttribute");t(this,i,s)}}else this._hydrated&&!this._isRendering&&this._safeRender()}})}}(n.prototype,r,s)}var i;n._propNames=r,n._noReflect=s,n._elenaEvents=n.events||null,n._resolver=(i=n.element)?e=>e.querySelector(i):e=>e.firstElementChild,g.add(n)}_captureClassFieldDefaults(){this._syncing=!0;for(const e of this.constructor._propNames)if(Object.prototype.hasOwnProperty.call(this,e)){const t=this[e];delete this[e],this[e]=t}this._syncing=!1}_captureText(){this._hydrated||void 0!==this._text||(this.text=this.textContent.trim())}get _renderRoot(){return this._shadow??this.shadowRoot??this}_attachShadow(){const e=this.constructor;if(!e.shadow)return;(this._shadow??this.shadowRoot)||(this._shadow=this.attachShadow({mode:e.shadow}));const t=this._shadow??this.shadowRoot;if(e.styles){if(!e._adoptedSheets){const t=Array.isArray(e.styles)?e.styles:[e.styles];e._adoptedSheets=t.map(e=>{if("string"==typeof e){const t=new CSSStyleSheet;return t.replaceSync(e),t}return e})}t.adoptedStyleSheets=e._adoptedSheets}}_applyRender(){const e=this.render();if(e&&e.strings){const t=this._renderRoot,n=u(t,e.strings,e.values);this._hydrated&&n&&(this.element=this.constructor._resolver(t))}}_resolveInnerElement(){if(!this.element){const e=this._renderRoot;this.element=this.constructor._resolver(e),this.element||(this.constructor.element&&console.warn("░█ [ELENA]: Element not found."),this.element=e.firstElementChild)}}_syncProps(){if(this._props){const n=this.constructor._noReflect;for(const[s,r]of this._props){if(n.has(s))continue;const i=e(typeof r,r,"toAttribute");(null!==i||this.hasAttribute(s))&&t(this,s,i)}}}_delegateEvents(){const e=this.constructor._elenaEvents;if(!this._events&&e?.length)if(this.element){this._events=!0;for(const t of e)this.element.addEventListener(t,this),this[t]=(...e)=>this.element[t](...e)}else console.warn("░█ [ELENA]: Cannot add events.")}render(){}willUpdate(){}firstUpdated(){}updated(){}adoptedCallback(){super.adoptedCallback?.()}disconnectedCallback(){if(super.disconnectedCallback?.(),this._events){this._events=!1;for(const e of this.constructor._elenaEvents)this.element?.removeEventListener(e,this)}}handleEvent(e){this.constructor._elenaEvents?.includes(e.type)&&(e.stopPropagation(),this.dispatchEvent(new m(e.type,{cancelable:!0})))}get text(){return this._text??""}set text(e){const t=this._text;this._text=e,this._hydrated&&t!==e&&!this._isRendering&&this._safeRender()}static define(){this.tagName?function(e,t){"undefined"!=typeof window&&"customElements"in window&&(window.customElements.get(e)||window.customElements.define(e,t))}(this.tagName,this):console.warn("░█ [ELENA]: define() without a tagName.")}_safeRender(){this._isRendering||this._renderPending||(this._renderPending=!0,this._updateComplete=new Promise(e=>{this._resolveUpdate=e}),queueMicrotask(()=>{try{this._performUpdate()}catch(e){console.error("░█ [ELENA]:",e)}}))}_performUpdate(){this._renderPending=!1;const e=this._resolveUpdate;this._resolveUpdate=null;try{try{this.willUpdate(),this._isRendering=!0,this._applyRender()}finally{this._isRendering=!1}this.updated()}finally{this._updateComplete=null,e()}}get updateComplete(){return this._updateComplete?this._updateComplete:Promise.resolve()}requestUpdate(){this._hydrated&&!this._isRendering&&this._safeRender()}}}class b extends(y(HTMLElement)){static tagName="elena-spinner";render(){}}b.define();class E extends(y(HTMLElement)){static tagName="elena-button";static events=["click","focus","blur"];static props=["variant","size","expand","disabled","loading","label","href","target","download","name","value","type",{name:"icon",reflect:!1}];variant="default";size="md";expand=!1;disabled=!1;label="";href="";target="_self";download=!1;loading=!1;name="";value="";type="button";icon="";renderButton(e){return i`<button class="elena-button" type="${this.type}" ${this.name?i`name="${this.name}"`:a} ${this.value?i`value="${this.value}"`:a} ${this.disabled?"disabled":a} ${this.loading?i`aria-disabled="true"`:a} ${this.label?i`aria-label="${this.label}"`:a}>${e}</button>`}renderLink(e){return i`<a class="elena-button" href="${this.href}" target="${this.target}" ${this.download?"download":a} ${this.label?i`aria-label="${this.label}"`:a}>${e}</a>`}render(){const e=this.icon?function(e){return{__raw:!0,toString:()=>e??""}}(`<span class="elena-icon">${this.icon}</span>`):a,t=i`${this.loading?i`<elena-spinner></elena-spinner>`:a} ${this.text?i`<span>${this.text}</span>`:a} ${e}`;return this.href?this.renderLink(t):this.renderButton(t)}}E.define();class v extends(y(HTMLElement)){static tagName="elena-stack";static props=["direction"];direction="column"}v.define();class w extends(y(HTMLElement)){static tagName="elena-visually-hidden"}w.define();export{E as Button,b as Spinner,v as Stack,w as VisuallyHidden};
 //# sourceMappingURL=bundle.js.map

package/dist/bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"bundle.js","sources":["../../core/dist/props.js","../../core/dist/events.js","../../core/dist/utils.js","../../core/dist/render.js","../../core/dist/elena.js","../src/button/button.js","../src/stack/stack.js"],"sourcesContent":["function e(e,t,n){if(t=\"boolean\"===e&&\"boolean\"!=typeof t?null!==t:t,!n)return t;if(\"toAttribute\"===n)switch(e){case\"object\":case\"array\":return null===t?null:JSON.stringify(t);case\"boolean\":return t?\"\":null;case\"number\":return null===t?null:t;default:return\"\"===t?null:t}else switch(e){case\"object\":case\"array\":if(!t)return t;try{return JSON.parse(t)}catch{return console.warn(\"░█ [ELENA]: Invalid JSON for prop, received: \"+t),null}case\"boolean\":return t;case\"number\":return null!==t?+t:t;default:return t}}function t(e,t,n){e?null===n?e.removeAttribute(t):e.setAttribute(t,n):console.warn(\"░█ [ELENA]: Cannot sync attributes to a null element.\")}function n(n,r,o){for(const s of r){const r=!o||!o.has(s);Object.defineProperty(n,s,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(s):void 0},set(n){if(this._props||(this._props=new Map),n!==this._props.get(s)&&(this._props.set(s,n),this.isConnected))if(r){const r=e(typeof n,n,\"toAttribute\");t(this,s,r)}else this._hydrated&&!this._isRendering&&(this._isRendering=!0,this._applyRender(),this._isRendering=!1)}})}}function r(t,n,r,o){if(r!==o){const r=typeof t[n];\"undefined\"===r&&console.warn(`░█ [ELENA]: Prop \"${n}\" has no default value. Set a default in the constructor so Elena can infer the correct type.`);const s=e(r,o,\"toProp\");t[n]=s}}export{e as getPropValue,r as getProps,n as setProps,t as syncAttribute};\n//# sourceMappingURL=props.js.map\n","class e extends Event{constructor(e,s){super(e,{bubbles:!0,composed:!0,...s})}}export{e as ElenaEvent};\n//# sourceMappingURL=events.js.map\n","function n(n,t){\"undefined\"!=typeof window&&\"customElements\"in window&&(window.customElements.get(n)||window.customElements.define(n,t))}function t(n){const t={\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#39;\"};return String(n).replace(/[&<>\"']/g,n=>t[n])}function e(n,...e){const r=n.reduce((n,r,o)=>{const i=e[o];return n+r+(i&&i.__raw?String(i):t(String(i??\"\")))},\"\");return{__raw:!0,strings:n,values:e,toString:()=>r}}function r(n){return{__raw:!0,toString:()=>n??\"\"}}const o={__raw:!0,toString:()=>\"\"};export{n as defineElement,t as escapeHtml,e as html,o as nothing,r as unsafeHTML};\n//# sourceMappingURL=utils.js.map\n","import{escapeHtml as t}from\"./utils.js\";const e=new WeakMap;function n(n,l,o){(function(e,n,r){if(e._tplStrings!==n||!e._tplParts)return!1;let l=!1;for(let n=0;n<r.length;n++){const o=r[n],a=o&&o.__raw,c=a?String(o):t(String(o??\"\"));if(c!==e._tplValues[n])if(e._tplValues[n]=c,a)l=!0;else{const t=e._tplParts[n];t?t.textContent=String(o??\"\"):l=!0}}return!l})(n,l,o)||function(n,l,o){const a=o.map(e=>e&&e.__raw?String(e):t(String(e??\"\")));let c=e.get(l);c||(c=Array.from(l,t=>t.replace(/\\n\\s*/g,\" \")),e.set(l,c));const s=c.reduce((t,e,n)=>t+e+(a[n]??\"\"),\"\").replace(/>\\s+</g,\"><\").replace(/>\\s+/g,\">\").replace(/\\s+</g,\"<\").trim();r(n,s),n._tplStrings=l,n._tplValues=a,n._tplParts=function(t,e){const n=new Array(e.length),r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);let l,o=0;for(;(l=r.nextNode())&&o<e.length;)l.textContent===e[o]&&(n[o]=l,o++);return n}(n,a)}(n,l,o)}function r(t,e){t?t.replaceChildren(t.ownerDocument.createRange().createContextualFragment(e)):console.warn(\"░█ [ELENA]: Cannot render to a null element.\")}export{r as renderHtml,n as renderTemplate};\n//# sourceMappingURL=render.js.map\n","import{setProps as e,getProps as t,getPropValue as s,syncAttribute as n}from\"./props.js\";import{ElenaEvent as i}from\"./events.js\";import{defineElement as r}from\"./utils.js\";export{html,nothing,unsafeHTML}from\"./utils.js\";import{renderTemplate as h}from\"./render.js\";function o(o,a){const l=a&&a.element?/^[a-z][a-z0-9-]*$/i.test(a.element)?e=>e.getElementsByClassName(a.element)[0]:e=>e.querySelector(a.element):e=>e.firstElementChild,d=a&&a.props?a.props:[],m=[],p=new Set;for(const e of d)\"string\"==typeof e?m.push(e):(m.push(e.name),!1===e.reflect&&p.add(e.name));class c extends o{element=null;attributeChangedCallback(e,s,n){\"text\"!==e?(t(this,e,s,n),this._hydrated&&s!==n&&!this._isRendering&&(this._isRendering=!0,this._applyRender(),this._isRendering=!1)):this.text=n??\"\"}static get observedAttributes(){return[...m,\"text\"]}render(){}_applyRender(){const e=this.render();e&&e.strings&&(h(this,e.strings,e.values),this._hydrated&&(this.element=l(this)))}connectedCallback(){this._captureText(),this._applyRender(),this._resolveInnerElement(),this._flushProps(),this._delegateEvents(),this.updated()}_captureText(){if(!this._hydrated&&!this._text){const e=this.textContent.trim();e?this.text=e:queueMicrotask(()=>{this._text||(this.text=this.textContent.trim())})}}_resolveInnerElement(){this.element||(this.element=l(this),this.element||(a&&a.element&&console.warn(\"░█ [ELENA]: No element found, using firstElementChild as fallback.\"),this.element=this.firstElementChild))}_flushProps(){if(this._props)for(const[e,t]of this._props){if(p.has(e))continue;const i=s(typeof t,t,\"toAttribute\");n(this,e,i)}}_delegateEvents(){!this._events&&a&&a.events&&(this.element?(this._events=!0,a.events?.forEach(e=>{this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)})):console.warn(\"░█ [ELENA]: Cannot delegate events, no inner element found. Ensure the component renders an element or check your element selector.\"))}updated(){this._hydrated||(this._hydrated=!0,this.setAttribute(\"hydrated\",\"\"))}disconnectedCallback(){this._events&&(this._events=!1,a.events?.forEach(e=>{this.element?.removeEventListener(e,this)}))}handleEvent(e){a.events?.includes(e.type)&&(e.stopPropagation(),this.dispatchEvent(new i(e.type,{cancelable:!0})))}get text(){return this._text??\"\"}set text(e){const t=this._text;this._text=e,this._hydrated&&t!==e&&!this._isRendering&&(this._isRendering=!0,this._applyRender(),this._isRendering=!1)}}return m.length&&(m.includes(\"text\")&&console.warn('░█ [ELENA]: \"text\" is a reserved property. Rename your prop to avoid overriding the built-in text content feature.'),e(c.prototype,m,p)),a&&a.tagName&&(c._tagName=a.tagName),c.define=function(){this._tagName?r(this._tagName,this):console.warn(\"░█ [ELENA]: define() called without a tagName. Set tagName in your Elena options to register the element.\")},c}export{o as Elena};\n//# sourceMappingURL=elena.js.map\n","import { Elena, html, unsafeHTML, nothing } from \"@elenajs/core\";\n\nconst options = {\n  tagName: \"elena-button\",\n  props: [\n    \"variant\",\n    \"size\",\n    \"expand\",\n    \"disabled\",\n    \"label\",\n    \"href\",\n    \"target\",\n    \"download\",\n    \"name\",\n    \"value\",\n    \"type\",\n    { name: \"icon\", reflect: false },\n  ],\n  events: [\"click\", \"focus\", \"blur\"],\n};\n\n/**\n * Button component is used for interface actions.\n *\n * @displayName Button\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-button-text] - Overrides the default text color.\n * @cssprop [--elena-button-bg] - Overrides the default background color.\n * @cssprop [--elena-button-font] - Overrides the default font family.\n * @cssprop [--elena-button-radius] - Overrides the default border radius.\n */\nexport default class Button extends Elena(HTMLElement, options) {\n  constructor() {\n    super();\n\n    /**\n     * The style variant of the button.\n     *\n     * @attribute\n     * @type {\"default\" | \"primary\" | \"danger\" | \"outline\"}\n     */\n    this.variant = \"default\";\n\n    /**\n     * The size of the button.\n     *\n     * @attribute\n     * @type {\"sm\" | \"md\" | \"lg\"}\n     */\n    this.size = \"md\";\n\n    /**\n     * Makes the button fit its container.\n     *\n     * @attribute\n     * @type {boolean}\n     */\n    this.expand = false;\n\n    /**\n     * Makes the component disabled.\n     *\n     * @attribute\n     * @type {boolean}\n     */\n    this.disabled = false;\n\n    /**\n     * Sets aria-label for the inner button.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.label = \"\";\n\n    /**\n     * Renders the button as a link and sets a href for it.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.href = \"\";\n\n    /**\n     * Defines where to open the linked URL.\n     *\n     * @attribute\n     * @type {\"_self\" | \"_blank\" | \"_parent\" | \"_top\"}\n     */\n    this.target = \"_self\";\n\n    /**\n     * Trigger a file download instead of a page visit.\n     *\n     * @attribute\n     * @type {boolean}\n     */\n    this.download = false;\n\n    /**\n     * The name used to identify the button in forms.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.name = \"\";\n\n    /**\n     * The value used to identify the button in forms.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.value = \"\";\n\n    /**\n     * The type of the button.\n     *\n     * @attribute\n     * @type {\"submit\" | \"reset\" | \"button\"}\n     */\n    this.type = \"button\";\n\n    /**\n     * An SVG icon to display inside the button.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.icon = \"\";\n  }\n\n  /**\n   * Renders a button: <button>.\n   *\n   * @internal\n   */\n  renderButton(template) {\n    return html`\n      <button\n        class=\"elena-button\"\n        type=\"${this.type}\"\n        ${this.name ? html`name=\"${this.name}\"` : nothing}\n        ${this.value ? html`value=\"${this.value}\"` : nothing}\n        ${this.disabled ? \"disabled\" : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </button>\n    `;\n  }\n\n  /**\n   * Renders a link: <a href=\"#\">.\n   *\n   * @internal\n   */\n  renderLink(template) {\n    return html`\n      <a\n        class=\"elena-button\"\n        href=\"${this.href}\"\n        target=\"${this.target}\"\n        ${this.download ? \"download\" : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </a>\n    `;\n  }\n\n  /**\n   * Renders the template.\n   *\n   * @internal\n   */\n  render() {\n    const icon = this.icon ? unsafeHTML(`<span class=\"elena-icon\">${this.icon}</span>`) : nothing;\n    const markup = html`\n      ${this.text ? html`<span>${this.text}</span>` : nothing}\n      ${icon}\n    `;\n\n    return this.href ? this.renderLink(markup) : this.renderButton(markup);\n  }\n}\n\n/**\n * Register the web component\n */\nButton.define();\n","import { Elena } from \"@elenajs/core\";\n\nconst options = {\n  tagName: \"elena-stack\",\n  props: [\"direction\"],\n};\n\n/**\n * Stack component manages layout of immediate children\n * with optional spacing between each child.\n *\n * @displayName Stack\n * @slot - The stacked content\n * @status alpha\n */\nexport default class Stack extends Elena(HTMLElement, options) {\n  constructor() {\n    super();\n\n    /**\n     * The direction of the stack.\n     *\n     * @attribute\n     * @type {\"column\" | \"row\"}\n     */\n    this.direction = \"column\";\n  }\n}\n\n/**\n * Register the web component\n */\nStack.define();\n"],"names":["e","t","n","JSON","stringify","parse","console","warn","removeAttribute","setAttribute","e$2","Event","constructor","s","super","bubbles","composed","String","replace","r","reduce","o","i","__raw","strings","values","toString","WeakMap","l","_tplStrings","_tplParts","length","a","c","_tplValues","textContent","map","get","Array","from","set","trim","replaceChildren","ownerDocument","createRange","createContextualFragment","document","createTreeWalker","NodeFilter","SHOW_TEXT","nextNode","element","test","getElementsByClassName","querySelector","firstElementChild","d","props","m","p","Set","push","name","reflect","add","attributeChangedCallback","this","_hydrated","_isRendering","_applyRender","text","observedAttributes","render","h","connectedCallback","_captureText","_resolveInnerElement","_flushProps","_delegateEvents","updated","_text","queueMicrotask","_props","has","_events","events","forEach","addEventListener","disconnectedCallback","removeEventListener","handleEvent","includes","type","stopPropagation","dispatchEvent","cancelable","Object","defineProperty","configurable","enumerable","Map","isConnected","prototype","tagName","_tagName","define","window","customElements","options","Button","Elena","HTMLElement","variant","size","expand","disabled","label","href","target","download","value","icon","renderButton","template","html","nothing","renderLink","unsafeHTML","markup","Stack","direction"],"mappings":"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"}
+{"version":3,"file":"bundle.js","sources":["../../core/dist/props.js","../../core/dist/utils.js","../../core/dist/render.js","../../core/dist/events.js","../../core/dist/elena.js","../src/spinner/spinner.js","../src/button/button.js","../src/stack/stack.js","../src/visually-hidden/visually-hidden.js"],"sourcesContent":["function t(t,e,n){if(e=\"boolean\"===t&&\"boolean\"!=typeof e?null!==e:e,!n)return e;if(\"toAttribute\"===n)switch(t){case\"object\":case\"array\":return null===e?null:JSON.stringify(e);case\"boolean\":return e?\"\":null;case\"number\":return null===e?null:e;default:return\"\"===e?null:e}else switch(t){case\"object\":case\"array\":if(!e)return e;try{return JSON.parse(e)}catch{return console.warn(\"░█ [ELENA]: Invalid JSON: \"+e),null}case\"boolean\":return e;case\"number\":return null!==e?+e:e;default:return e??\"\"}}function e(t,e,n){t?null===n?t.removeAttribute(e):t.setAttribute(e,n):console.warn(\"░█ [ELENA]: Cannot sync attrs.\")}function n(n,r,s){for(const o of r){const r=!s||!s.has(o);Object.defineProperty(n,o,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(o):void 0},set(n){if(this._props||(this._props=new Map),n!==this._props.get(o)&&(this._props.set(o,n),this.isConnected))if(r){if(!this._syncing){const r=t(typeof n,n,\"toAttribute\");e(this,o,r)}}else this._hydrated&&!this._isRendering&&this._safeRender()}})}}function r(e,n,r,s){if(r!==s){const r=typeof e[n];\"undefined\"===r&&console.warn(`░█ [ELENA]: Prop \"${n}\" has no default.`);const o=t(r,s,\"toProp\");e[n]=o}}export{t as getPropValue,r as getProps,n as setProps,e as syncAttribute};\n//# sourceMappingURL=props.js.map\n","function n(n,r){\"undefined\"!=typeof window&&\"customElements\"in window&&(window.customElements.get(n)||window.customElements.define(n,r))}const r={\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#39;\"};function t(n){return String(n).replace(/[&<>\"']/g,n=>r[n])}function e(n){return Array.isArray(n)?n.map(n=>i(n)).join(\"\"):i(n)}function i(n){return n?.__raw?String(n):t(String(n??\"\"))}function o(n,...r){let t;return{__raw:!0,strings:n,values:r,toString:()=>(void 0===t&&(t=n.reduce((n,t,i)=>n+t+e(r[i]),\"\")),t)}}function a(n){return{__raw:!0,toString:()=>n??\"\"}}const u=Object.freeze({__raw:!0,toString:()=>\"\"}),c=n=>Array.isArray(n)?n.some(n=>n?.__raw):n?.__raw,s=n=>Array.isArray(n)?n.map(n=>String(n??\"\")).join(\"\"):String(n??\"\");function g(n){return n.replace(/>\\n\\s*/g,\">\").replace(/\\n\\s*</g,\"<\").replace(/\\n\\s*/g,\" \")}export{g as collapseWhitespace,n as defineElement,t as escapeHtml,o as html,c as isRaw,u as nothing,e as resolveValue,s as toPlainText,a as unsafeHTML};\n//# sourceMappingURL=utils.js.map\n","import{toPlainText as e,isRaw as t,collapseWhitespace as n,resolveValue as r}from\"./utils.js\";const o=new WeakMap,l=\"e\"+Math.random().toString(36).slice(2,6);function a(a,i,d){return!function(n,r,o){if(n._tplStrings!==r||!n._tplParts)return!1;for(let r=0;r<o.length;r++){const l=o[r],a=Array.isArray(l)?e(l):l;if(a!==n._tplValues[r]){if(t(l)||!n._tplParts[r])return!1;n._tplValues[r]=a,n._tplParts[r].textContent=e(l)}}return!0}(a,i,d)&&(function(a,i,d){let p=o.get(i);if(!p){const e=Array.from(i,n);p={processedStrings:e,template:d.length>0?c(e,d.length):null},o.set(i,p)}if(p.template)a._tplParts=function(n,o,a){const c=o.content.cloneNode(!0),s=document.createTreeWalker(c,NodeFilter.SHOW_COMMENT),i=new Array(a.length),d=[];let p;for(;p=s.nextNode();)p.data===l&&d.push(p);for(let n=0;n<d.length;n++){const o=a[n];if(t(o)){const e=document.createElement(\"template\");e.innerHTML=r(o),d[n].parentNode.replaceChild(e.content,d[n])}else{const t=document.createTextNode(e(o));d[n].parentNode.replaceChild(t,d[n]),i[n]=t}}return n.replaceChildren(c),i}(a,p.template,d);else{const e=d.map(e=>r(e)),t=p.processedStrings.reduce((t,n,r)=>t+n+(e[r]??\"\"),\"\").replace(/>\\s+</g,\"><\").trim(),n=document.createElement(\"template\");n.innerHTML=t,s(a,n.content.childNodes),a._tplParts=new Array(d.length)}a._tplStrings=i,a._tplValues=d.map(t=>Array.isArray(t)?e(t):t)}(a,i,d),!0)}function c(e,t){const n=`\\x3c!--${l}--\\x3e`,r=e.reduce((e,r,o)=>e+r.replace(/>\\s+</g,\"><\")+(o<t?n:\"\"),\"\").trim(),o=document.createElement(\"template\");o.innerHTML=r;const a=document.createTreeWalker(o.content,NodeFilter.SHOW_COMMENT);let c=0;for(;a.nextNode();)a.currentNode.data===l&&c++;return c===t?o:null}function s(e,t){const n=Array.from(e.childNodes),r=Array.from(t),o=Math.max(n.length,r.length);for(let t=0;t<o;t++){const o=n[t],l=r[t];o?l?o.nodeType!==l.nodeType||o.nodeType===Node.ELEMENT_NODE&&o.tagName!==l.tagName?e.replaceChild(l,o):o.nodeType===Node.TEXT_NODE?o.textContent!==l.textContent&&(o.textContent=l.textContent):o.nodeType===Node.ELEMENT_NODE&&(i(o,l),s(o,l.childNodes)):e.removeChild(o):e.appendChild(l)}}function i(e,t){for(let n=e.attributes.length-1;n>=0;n--){const{name:r}=e.attributes[n];t.hasAttribute(r)||e.removeAttribute(r)}for(let n=0;n<t.attributes.length;n++){const{name:r,value:o}=t.attributes[n];e.getAttribute(r)!==o&&e.setAttribute(r,o)}}export{a as renderTemplate};\n//# sourceMappingURL=render.js.map\n","class e extends Event{constructor(e,s){super(e,{bubbles:!0,composed:!0,...s})}}export{e as ElenaEvent};\n//# sourceMappingURL=events.js.map\n","import{getProps as t,setProps as e,getPropValue as s,syncAttribute as i}from\"./props.js\";import{defineElement as n}from\"./utils.js\";export{html,nothing,unsafeHTML}from\"./utils.js\";import{renderTemplate as r}from\"./render.js\";import{ElenaEvent as o}from\"./events.js\";const h=new WeakSet;function a(a){return class extends a{element=null;attributeChangedCallback(e,s,i){super.attributeChangedCallback?.(e,s,i),\"text\"!==e?(this._syncing=!0,t(this,e,s,i),this._syncing=!1,this._hydrated&&s!==i&&!this._isRendering&&this._safeRender()):this.text=i??\"\"}static get observedAttributes(){if(this._observedAttrs)return this._observedAttrs;const t=this._propNames||(this.props||[]).map(t=>\"string\"==typeof t?t:t.name);return this._observedAttrs=[...t,\"text\"],this._observedAttrs}connectedCallback(){super.connectedCallback?.(),this._setupStaticProps(),this._captureClassFieldDefaults(),this._captureText(),this._attachShadow(),this.willUpdate(),this._applyRender(),this._resolveInnerElement(),this._syncProps(),this._delegateEvents(),this._hydrated||(this._hydrated=!0,this.setAttribute(\"hydrated\",\"\"),this.firstUpdated()),this.updated()}_setupStaticProps(){const t=this.constructor;if(h.has(t))return;const s=new Set,i=[];if(t.props){for(const e of t.props)\"string\"==typeof e?i.push(e):(i.push(e.name),!1===e.reflect&&s.add(e.name));i.includes(\"text\")&&console.warn('░█ [ELENA]: \"text\" is reserved.'),e(t.prototype,i,s)}var n;t._propNames=i,t._noReflect=s,t._elenaEvents=t.events||null,t._resolver=(n=t.element)?t=>t.querySelector(n):t=>t.firstElementChild,h.add(t)}_captureClassFieldDefaults(){this._syncing=!0;for(const t of this.constructor._propNames)if(Object.prototype.hasOwnProperty.call(this,t)){const e=this[t];delete this[t],this[t]=e}this._syncing=!1}_captureText(){this._hydrated||void 0!==this._text||(this.text=this.textContent.trim())}get _renderRoot(){return this._shadow??this.shadowRoot??this}_attachShadow(){const t=this.constructor;if(!t.shadow)return;(this._shadow??this.shadowRoot)||(this._shadow=this.attachShadow({mode:t.shadow}));const e=this._shadow??this.shadowRoot;if(t.styles){if(!t._adoptedSheets){const e=Array.isArray(t.styles)?t.styles:[t.styles];t._adoptedSheets=e.map(t=>{if(\"string\"==typeof t){const e=new CSSStyleSheet;return e.replaceSync(t),e}return t})}e.adoptedStyleSheets=t._adoptedSheets}}_applyRender(){const t=this.render();if(t&&t.strings){const e=this._renderRoot,s=r(e,t.strings,t.values);this._hydrated&&s&&(this.element=this.constructor._resolver(e))}}_resolveInnerElement(){if(!this.element){const t=this._renderRoot;this.element=this.constructor._resolver(t),this.element||(this.constructor.element&&console.warn(\"░█ [ELENA]: Element not found.\"),this.element=t.firstElementChild)}}_syncProps(){if(this._props){const t=this.constructor._noReflect;for(const[e,n]of this._props){if(t.has(e))continue;const r=s(typeof n,n,\"toAttribute\");(null!==r||this.hasAttribute(e))&&i(this,e,r)}}}_delegateEvents(){const t=this.constructor._elenaEvents;if(!this._events&&t?.length)if(this.element){this._events=!0;for(const e of t)this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)}else console.warn(\"░█ [ELENA]: Cannot add events.\")}render(){}willUpdate(){}firstUpdated(){}updated(){}adoptedCallback(){super.adoptedCallback?.()}disconnectedCallback(){if(super.disconnectedCallback?.(),this._events){this._events=!1;for(const t of this.constructor._elenaEvents)this.element?.removeEventListener(t,this)}}handleEvent(t){this.constructor._elenaEvents?.includes(t.type)&&(t.stopPropagation(),this.dispatchEvent(new o(t.type,{cancelable:!0})))}get text(){return this._text??\"\"}set text(t){const e=this._text;this._text=t,this._hydrated&&e!==t&&!this._isRendering&&this._safeRender()}static define(){this.tagName?n(this.tagName,this):console.warn(\"░█ [ELENA]: define() without a tagName.\")}_safeRender(){this._isRendering||this._renderPending||(this._renderPending=!0,this._updateComplete=new Promise(t=>{this._resolveUpdate=t}),queueMicrotask(()=>{try{this._performUpdate()}catch(t){console.error(\"░█ [ELENA]:\",t)}}))}_performUpdate(){this._renderPending=!1;const t=this._resolveUpdate;this._resolveUpdate=null;try{try{this.willUpdate(),this._isRendering=!0,this._applyRender()}finally{this._isRendering=!1}this.updated()}finally{this._updateComplete=null,t()}}get updateComplete(){return this._updateComplete?this._updateComplete:Promise.resolve()}requestUpdate(){this._hydrated&&!this._isRendering&&this._safeRender()}}}export{a as Elena,o as ElenaEvent};\n//# sourceMappingURL=elena.js.map\n","import { Elena } from \"@elenajs/core\";\n\n/**\n * Visually hidden hides the element visually while\n * keeping it available for assistive technologies.\n *\n * @displayName Spinner\n * @status alpha\n *\n * @cssprop [--elena-spinner-size] - Overrides the default spinner size.\n * @cssprop [--elena-spinner-border] - Overrides the default spinner border width.\n */\nexport default class Spinner extends Elena(HTMLElement) {\n  static tagName = \"elena-spinner\";\n\n  /**\n   * Spinner connects to the page without\n   * rendering anything.\n   *\n   * @internal\n   */\n  render() {}\n}\n\n/**\n * Register the web component\n */\nSpinner.define();\n","import { Elena, html, unsafeHTML, nothing } from \"@elenajs/core\";\nimport \"../spinner/spinner.js\";\n\n/**\n * Button component is used for interface actions.\n *\n * @displayName Button\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-button-text] - Overrides the default text color.\n * @cssprop [--elena-button-bg] - Overrides the default background color.\n * @cssprop [--elena-button-border] - Overrides the default border color.\n * @cssprop [--elena-button-font] - Overrides the default font family.\n * @cssprop [--elena-button-font-size] - Overrides the default font size.\n * @cssprop [--elena-button-font-weight] - Overrides the default font weight.\n * @cssprop [--elena-button-radius] - Overrides the default border radius.\n * @cssprop [--elena-button-focus] - Overrides the default focus ring color.\n */\nexport default class Button extends Elena(HTMLElement) {\n  static tagName = \"elena-button\";\n  static events = [\"click\", \"focus\", \"blur\"];\n  static props = [\n    \"variant\",\n    \"size\",\n    \"expand\",\n    \"disabled\",\n    \"loading\",\n    \"label\",\n    \"href\",\n    \"target\",\n    \"download\",\n    \"name\",\n    \"value\",\n    \"type\",\n    { name: \"icon\", reflect: false },\n  ];\n\n  /**\n   * The style variant of the button.\n   *\n   * @attribute\n   * @type {\"default\" | \"primary\" | \"danger\" | \"outline\"}\n   */\n  variant = \"default\";\n\n  /**\n   * The size of the button.\n   *\n   * @attribute\n   * @type {\"sm\" | \"md\" | \"lg\"}\n   */\n  size = \"md\";\n\n  /**\n   * Makes the button fit its container.\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  expand = false;\n\n  /**\n   * Makes the component disabled.\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  disabled = false;\n\n  /**\n   * Sets aria-label for the inner button.\n   *\n   * @attribute\n   * @type {string}\n   */\n  label = \"\";\n\n  /**\n   * Renders the button as a link and sets a href for it.\n   *\n   * @attribute\n   * @type {string}\n   */\n  href = \"\";\n\n  /**\n   * Defines where to open the linked URL.\n   *\n   * @attribute\n   * @type {\"_self\" | \"_blank\" | \"_parent\" | \"_top\"}\n   */\n  target = \"_self\";\n\n  /**\n   * Trigger a file download instead of a page visit.\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  download = false;\n\n  /**\n   * Show loading state\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  loading = false;\n\n  /**\n   * The name used to identify the button in forms.\n   *\n   * @attribute\n   * @type {string}\n   */\n  name = \"\";\n\n  /**\n   * The value used to identify the button in forms.\n   *\n   * @attribute\n   * @type {string}\n   */\n  value = \"\";\n\n  /**\n   * The type of the button.\n   *\n   * @attribute\n   * @type {\"submit\" | \"reset\" | \"button\"}\n   */\n  type = \"button\";\n\n  /**\n   * An SVG icon to display inside the button.\n   *\n   * @attribute\n   * @type {string}\n   */\n  icon = \"\";\n\n  /**\n   * Renders a button: <button>.\n   *\n   * @internal\n   */\n  renderButton(template) {\n    return html`\n      <button\n        class=\"elena-button\"\n        type=\"${this.type}\"\n        ${this.name ? html`name=\"${this.name}\"` : nothing}\n        ${this.value ? html`value=\"${this.value}\"` : nothing}\n        ${this.disabled ? \"disabled\" : nothing}\n        ${this.loading ? html`aria-disabled=\"true\"` : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </button>\n    `;\n  }\n\n  /**\n   * Renders a link: <a href=\"#\">.\n   *\n   * @internal\n   */\n  renderLink(template) {\n    return html`\n      <a\n        class=\"elena-button\"\n        href=\"${this.href}\"\n        target=\"${this.target}\"\n        ${this.download ? \"download\" : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </a>\n    `;\n  }\n\n  /**\n   * Renders the template.\n   *\n   * @internal\n   */\n  render() {\n    const icon = this.icon ? unsafeHTML(`<span class=\"elena-icon\">${this.icon}</span>`) : nothing;\n    const markup = html`\n      ${this.loading ? html`<elena-spinner></elena-spinner>` : nothing}\n      ${this.text ? html`<span>${this.text}</span>` : nothing}\n      ${icon}\n    `;\n\n    return this.href ? this.renderLink(markup) : this.renderButton(markup);\n  }\n}\n\n/**\n * Register the web component\n */\nButton.define();\n","import { Elena } from \"@elenajs/core\";\n\n/**\n * Stack component manages layout of immediate children\n * with optional spacing between each child.\n *\n * @displayName Stack\n * @slot - The stacked content\n * @status alpha\n */\nexport default class Stack extends Elena(HTMLElement) {\n  static tagName = \"elena-stack\";\n  static props = [\"direction\"];\n\n  /**\n   * The direction of the stack.\n   *\n   * @attribute\n   * @type {\"column\" | \"row\"}\n   */\n  direction = \"column\";\n}\n\n/**\n * Register the web component\n */\nStack.define();\n","import { Elena } from \"@elenajs/core\";\n\n/**\n * Visually hidden hides the element visually while\n * keeping it available for assistive technologies.\n *\n * @displayName Visually Hidden\n * @slot - The hidden content\n * @status alpha\n */\nexport default class VisuallyHidden extends Elena(HTMLElement) {\n  static tagName = \"elena-visually-hidden\";\n}\n\n/**\n * Register the web component\n */\nVisuallyHidden.define();\n"],"names":["t","e","n","JSON","stringify","parse","console","warn","removeAttribute","setAttribute","r","Array","isArray","map","i","join","__raw","String","replace","o","strings","values","toString","reduce","u","Object","freeze","c","some","s","g","WeakMap","l","Math","random","slice","a","d","_tplStrings","_tplParts","length","_tplValues","textContent","p","get","from","processedStrings","template","set","content","cloneNode","document","createTreeWalker","NodeFilter","SHOW_COMMENT","nextNode","data","push","createElement","innerHTML","parentNode","replaceChild","createTextNode","replaceChildren","trim","childNodes","currentNode","max","nodeType","Node","ELEMENT_NODE","tagName","TEXT_NODE","removeChild","appendChild","attributes","name","hasAttribute","value","getAttribute","Event","constructor","super","bubbles","composed","h","WeakSet","element","attributeChangedCallback","this","_syncing","_hydrated","_isRendering","_safeRender","text","observedAttributes","_observedAttrs","_propNames","props","connectedCallback","_setupStaticProps","_captureClassFieldDefaults","_captureText","_attachShadow","willUpdate","_applyRender","_resolveInnerElement","_syncProps","_delegateEvents","firstUpdated","updated","has","Set","reflect","add","includes","defineProperty","configurable","enumerable","_props","Map","isConnected","prototype","_noReflect","_elenaEvents","events","_resolver","querySelector","firstElementChild","hasOwnProperty","call","_text","_renderRoot","_shadow","shadowRoot","shadow","attachShadow","mode","styles","_adoptedSheets","CSSStyleSheet","replaceSync","adoptedStyleSheets","render","_events","addEventListener","adoptedCallback","disconnectedCallback","removeEventListener","handleEvent","type","stopPropagation","dispatchEvent","cancelable","define","window","customElements","_renderPending","_updateComplete","Promise","_resolveUpdate","queueMicrotask","_performUpdate","error","updateComplete","resolve","requestUpdate","Spinner","Elena","HTMLElement","static","Button","variant","size","expand","disabled","label","href","target","download","loading","icon","renderButton","html","nothing","renderLink","unsafeHTML","markup","Stack","direction","VisuallyHidden"],"mappings":"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"}

package/dist/button.css

@@ -1 +1 @@
-@scope(elena-button){:scope,:not(svg,path),:before,:after{all:unset}:scope{--elena-button-bg:#eaecf0;--elena-button-text:#172b4d;--elena-button-border:#eaecf0;--elena-button-font:system-ui, sans-serif;--elena-button-font-size:15px;--elena-button-font-weight:500;--elena-button-radius:6px;--elena-button-focus:#5a44d4;all:unset;border-radius:var(--elena-button-radius);transition:background-color .2s,filter .2s;display:inline-block}:scope:not([hydrated]),.elena-button{-webkit-user-select:none;user-select:none;cursor:pointer;box-sizing:border-box;touch-action:manipulation;font-family:inherit;font-weight:var(--elena-button-font-weight);font-family:var(--elena-button-font);font-size:var(--elena-button-font-size);block-size:calc(var(--elena-button-font) * 4);min-block-size:calc(var(--elena-button-font) * 4);color:var(--elena-button-text);background:var(--elena-button-bg);border:2px solid var(--elena-button-border);border-radius:var(--elena-button-radius);text-align:center;justify-content:center;align-items:center;gap:.375rem;padding:.5em 1.1em .55em;line-height:1.3;display:inline-flex}.elena-icon{inline-size:var(--elena-button-font-size);block-size:var(--elena-button-font-size);fill:currentColor;margin-block:.15rem;margin-inline:-.3rem;display:inline-flex;transform:translateZ(0)}span+.elena-icon{margin-inline:0 -.3rem}svg{block-size:100%;inline-size:100%;display:block}:scope[icon]:not([hydrated]):after{content:"";background:var(--elena-button-text);border-radius:var(--elena-button-radius);opacity:.2;width:var(--elena-button-font-size);height:var(--elena-button-font-size);margin-block:.15rem;margin-inline:0 -.3rem;display:inline-block}:scope[icon]:not([hydrated]):empty:after{margin-inline:-.3rem}:scope:hover{filter:brightness(.9)}:scope:active{opacity:.9;transition:none;transform:translateY(1px)}:scope:focus-within{box-shadow:0 0 0 1px #fff, 0 0 0 3px var(--elena-button-focus);outline:none;transition:none}:scope[disabled]{--elena-button-text:#a8b0bd;--elena-button-bg:#f3f4f6;--elena-button-border:#f3f4f6;pointer-events:none}:scope[variant=primary]{--elena-button-bg:#5a44d4;--elena-button-border:#5a44d4;--elena-button-text:#fff}:scope[variant=danger]{--elena-button-bg:#d44444;--elena-button-border:#d44444;--elena-button-text:#fff}:scope[variant=danger]:focus-within{--elena-button-focus:#d44444}:scope[variant=outline]{--elena-button-bg:transparent;--elena-button-text:#172b4d;--elena-button-border:#172b4d}:scope[size=sm]{--elena-button-font-size:12px}:scope:not([hydrated])[size=sm],:scope[size=sm] .elena-button{padding-block:.3em .35em}:scope[size=lg]{--elena-button-font-size:18px}:scope:not([hydrated])[size=lg],:scope[size=lg] .elena-button{padding-block:.6em .65em}:scope[expand],:scope[expand] .elena-button{inline-size:100%}}
+@scope(elena-button){:scope,:where(:not(img,svg):not(svg *)),:before,:after{all:unset;display:revert;box-sizing:border-box}:scope{--_elena-button-bg:var(--elena-button-bg,#eaecf0);--_elena-button-text:var(--elena-button-text,#172b4d);--_elena-button-border:var(--elena-button-border,#eaecf0);--_elena-button-font:var(--elena-button-font,system-ui, sans-serif);--_elena-button-font-size:var(--elena-button-font-size,15px);--_elena-button-font-weight:var(--elena-button-font-weight,500);--_elena-button-radius:var(--elena-button-radius,6px);--_elena-button-focus:var(--elena-button-focus,#5a44d4);all:unset;border-radius:var(--_elena-button-radius);transition:background-color .2s,filter .2s;display:inline-block}:scope:not([hydrated]),.elena-button:is(button,a){-webkit-user-select:none;user-select:none;cursor:pointer;box-sizing:border-box;touch-action:manipulation;font-family:inherit;font-weight:var(--_elena-button-font-weight);font-family:var(--_elena-button-font);font-size:var(--_elena-button-font-size);block-size:calc(var(--_elena-button-font) * 4);min-block-size:calc(var(--_elena-button-font) * 4);color:var(--_elena-button-text);background:var(--_elena-button-bg);border:2px solid var(--_elena-button-border);border-radius:var(--_elena-button-radius);text-align:center;justify-content:center;align-items:center;gap:.375rem;padding:.5em 1.1em .55em;line-height:1.3;text-decoration:none;transition:none;display:inline-flex;position:relative}.elena-icon{inline-size:var(--_elena-button-font-size);block-size:var(--_elena-button-font-size);fill:currentColor;margin-block:.15rem;margin-inline:-.3rem;display:inline-flex;transform:translateZ(0)}span+.elena-icon{margin-inline:0 -.3rem}svg{block-size:100%;inline-size:100%;display:block}:scope[icon]:not([hydrated]):after{content:"";background:var(--_elena-button-text);border-radius:var(--_elena-button-radius);opacity:.2;width:var(--_elena-button-font-size);height:var(--_elena-button-font-size);margin-block:.15rem;margin-inline:0 -.3rem;display:inline-block}:scope[icon]:not([hydrated]):empty:after{margin-inline:-.3rem}:scope:hover{filter:brightness(.9)}.elena-button:is(button,a):hover{color:var(--_elena-button-text)}:scope:active{opacity:.9;transition:none;transform:translateY(1px)}:scope:focus-within{box-shadow:0 0 0 1px #fff, 0 0 0 3px var(--_elena-button-focus);outline:none;transition:none}.elena-button:focus{outline:none}:scope[disabled]{--elena-button-text:#a8b0bd;--elena-button-bg:#f3f4f6;--elena-button-border:#f3f4f6;pointer-events:none}:scope[variant=primary]{--elena-button-bg:#5a44d4;--elena-button-border:#5a44d4;--elena-button-text:#fff}:scope[variant=danger]{--elena-button-bg:#d44444;--elena-button-border:#d44444;--elena-button-text:#fff}:scope[variant=danger]:focus-within{--elena-button-focus:#d44444}:scope[variant=outline]{--elena-button-bg:transparent;--elena-button-text:#172b4d;--elena-button-border:#172b4d}:scope[size=sm]{--elena-button-font-size:12px}:scope:not([hydrated])[size=sm],:scope[size=sm] .elena-button{padding-block:.3em .35em}:scope[size=lg]{--elena-button-font-size:18px}:scope:not([hydrated])[size=lg],:scope[size=lg] .elena-button{padding-block:.6em .65em}:scope[expand],:scope[expand] .elena-button{inline-size:100%}:scope elena-spinner{margin:0;padding:0;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}:scope[loading]{pointer-events:none}:scope:not([hydrated])[loading]{color:#0000}:scope[loading] :is(span,.elena-icon){opacity:0}}

package/dist/button.d.ts

@@ -17,6 +17,8 @@ declare class Button extends HTMLElement {
   target?: "_self" | "_blank" | "_parent" | "_top";
   /** Trigger a file download instead of a page visit. */
   download?: boolean;
+  /** Show loading state */
+  loading?: boolean;
   /** The name used to identify the button in forms. */
   name?: string;
   /** The value used to identify the button in forms. */

package/dist/button.js

@@ -1,5 +1,2 @@
-import{o as t,a as e,e as a,r as s}from"./elena-5JTA2VdO.js";const n={tagName:"elena-button",props:["variant","size","expand","disabled","label","href","target","download","name","value","type",{name:"icon",reflect:!1}],events:["click","focus","blur"]};class i extends(t(HTMLElement,n)){constructor(){super(),this.variant="default",this.size="md",this.expand=!1,this.disabled=!1,this.label="",this.href="",this.target="_self",this.download=!1,this.name="",this.value="",this.type="button",this.icon=""}renderButton(t){return a`<button class="elena-button" type="${this.type}" ${this.name?a`name="${this.name}"`:e} ${this.value?a`value="${this.value}"`:e} ${this.disabled?"disabled":e} ${this.label?a`aria-label="${this.label}"`:e}>${t}</button>`}renderLink(t){return a`<a class="elena-button" href="${this.href}" target="${this.target}" ${this.download?"download":e} ${this.label?a`aria-label="${this.label}"`:e}>${t}</a>`}render(){const t=this.icon?s(`<span class="elena-icon">${this.icon}</span>`):e,n=a`
-      ${this.text?a`<span>${this.text}</span>`:e}
-      ${t}
-    `;return this.href?this.renderLink(n):this.renderButton(n)}}i.define();export{i as default};
+import{a as e,u as t,o as a,b as n}from"./elena-DzEybqgS.js";class s extends(e(HTMLElement)){static tagName="elena-button";static events=["click","focus","blur"];static props=["variant","size","expand","disabled","loading","label","href","target","download","name","value","type",{name:"icon",reflect:!1}];variant="default";size="md";expand=!1;disabled=!1;label="";href="";target="_self";download=!1;loading=!1;name="";value="";type="button";icon="";renderButton(e){return a`<button class="elena-button" type="${this.type}" ${this.name?a`name="${this.name}"`:t} ${this.value?a`value="${this.value}"`:t} ${this.disabled?"disabled":t} ${this.loading?a`aria-disabled="true"`:t} ${this.label?a`aria-label="${this.label}"`:t}>${e}</button>`}renderLink(e){return a`<a class="elena-button" href="${this.href}" target="${this.target}" ${this.download?"download":t} ${this.label?a`aria-label="${this.label}"`:t}>${e}</a>`}render(){const e=this.icon?n(`<span class="elena-icon">${this.icon}</span>`):t,s=a`${this.loading?a`<elena-spinner></elena-spinner>`:t} ${this.text?a`<span>${this.text}</span>`:t} ${e}`;return this.href?this.renderLink(s):this.renderButton(s)}}s.define();export{s as default};
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../src/button/button.js"],"sourcesContent":["import { Elena, html, unsafeHTML, nothing } from \"@elenajs/core\";\n\nconst options = {\n  tagName: \"elena-button\",\n  props: [\n    \"variant\",\n    \"size\",\n    \"expand\",\n    \"disabled\",\n    \"label\",\n    \"href\",\n    \"target\",\n    \"download\",\n    \"name\",\n    \"value\",\n    \"type\",\n    { name: \"icon\", reflect: false },\n  ],\n  events: [\"click\", \"focus\", \"blur\"],\n};\n\n/**\n * Button component is used for interface actions.\n *\n * @displayName Button\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-button-text] - Overrides the default text color.\n * @cssprop [--elena-button-bg] - Overrides the default background color.\n * @cssprop [--elena-button-font] - Overrides the default font family.\n * @cssprop [--elena-button-radius] - Overrides the default border radius.\n */\nexport default class Button extends Elena(HTMLElement, options) {\n  constructor() {\n    super();\n\n    /**\n     * The style variant of the button.\n     *\n     * @attribute\n     * @type {\"default\" | \"primary\" | \"danger\" | \"outline\"}\n     */\n    this.variant = \"default\";\n\n    /**\n     * The size of the button.\n     *\n     * @attribute\n     * @type {\"sm\" | \"md\" | \"lg\"}\n     */\n    this.size = \"md\";\n\n    /**\n     * Makes the button fit its container.\n     *\n     * @attribute\n     * @type {boolean}\n     */\n    this.expand = false;\n\n    /**\n     * Makes the component disabled.\n     *\n     * @attribute\n     * @type {boolean}\n     */\n    this.disabled = false;\n\n    /**\n     * Sets aria-label for the inner button.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.label = \"\";\n\n    /**\n     * Renders the button as a link and sets a href for it.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.href = \"\";\n\n    /**\n     * Defines where to open the linked URL.\n     *\n     * @attribute\n     * @type {\"_self\" | \"_blank\" | \"_parent\" | \"_top\"}\n     */\n    this.target = \"_self\";\n\n    /**\n     * Trigger a file download instead of a page visit.\n     *\n     * @attribute\n     * @type {boolean}\n     */\n    this.download = false;\n\n    /**\n     * The name used to identify the button in forms.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.name = \"\";\n\n    /**\n     * The value used to identify the button in forms.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.value = \"\";\n\n    /**\n     * The type of the button.\n     *\n     * @attribute\n     * @type {\"submit\" | \"reset\" | \"button\"}\n     */\n    this.type = \"button\";\n\n    /**\n     * An SVG icon to display inside the button.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.icon = \"\";\n  }\n\n  /**\n   * Renders a button: <button>.\n   *\n   * @internal\n   */\n  renderButton(template) {\n    return html`\n      <button\n        class=\"elena-button\"\n        type=\"${this.type}\"\n        ${this.name ? html`name=\"${this.name}\"` : nothing}\n        ${this.value ? html`value=\"${this.value}\"` : nothing}\n        ${this.disabled ? \"disabled\" : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </button>\n    `;\n  }\n\n  /**\n   * Renders a link: <a href=\"#\">.\n   *\n   * @internal\n   */\n  renderLink(template) {\n    return html`\n      <a\n        class=\"elena-button\"\n        href=\"${this.href}\"\n        target=\"${this.target}\"\n        ${this.download ? \"download\" : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </a>\n    `;\n  }\n\n  /**\n   * Renders the template.\n   *\n   * @internal\n   */\n  render() {\n    const icon = this.icon ? unsafeHTML(`<span class=\"elena-icon\">${this.icon}</span>`) : nothing;\n    const markup = html`\n      ${this.text ? html`<span>${this.text}</span>` : nothing}\n      ${icon}\n    `;\n\n    return this.href ? this.renderLink(markup) : this.renderButton(markup);\n  }\n}\n\n/**\n * Register the web component\n */\nButton.define();\n"],"names":["options","tagName","props","name","reflect","events","Button","Elena","HTMLElement","constructor","super","this","variant","size","expand","disabled","label","href","target","download","value","type","icon","renderButton","template","html","nothing","renderLink","render","unsafeHTML","markup","text","define"],"mappings":"6DAEA,MAAMA,EAAU,CACdC,QAAS,eACTC,MAAO,CACL,UACA,OACA,SACA,WACA,QACA,OACA,SACA,WACA,OACA,QACA,OACA,CAAEC,KAAM,OAAQC,SAAS,IAE3BC,OAAQ,CAAC,QAAS,QAAS,SAkBd,MAAMC,UAAeC,EAAMC,YAAaR,IACrD,WAAAS,GACEC,QAQAC,KAAKC,QAAU,UAQfD,KAAKE,KAAO,KAQZF,KAAKG,QAAS,EAQdH,KAAKI,UAAW,EAQhBJ,KAAKK,MAAQ,GAQbL,KAAKM,KAAO,GAQZN,KAAKO,OAAS,QAQdP,KAAKQ,UAAW,EAQhBR,KAAKR,KAAO,GAQZQ,KAAKS,MAAQ,GAQbT,KAAKU,KAAO,SAQZV,KAAKW,KAAO,EACd,CAOA,YAAAC,CAAaC,GACX,OAAOC,CAAI,sCAGCd,KAAKU,SACXV,KAAKR,KAAOsB,CAAI,SAASd,KAAKR,QAAUuB,KACxCf,KAAKS,MAAQK,CAAI,UAAUd,KAAKS,SAAWM,KAC3Cf,KAAKI,SAAW,WAAaW,KAC7Bf,KAAKK,MAAQS,CAAI,eAAed,KAAKK,SAAWU,KAEhDF,YAGR,CAOA,UAAAG,CAAWH,GACT,OAAOC,CAAI,iCAGCd,KAAKM,iBACHN,KAAKO,WACbP,KAAKQ,SAAW,WAAaO,KAC7Bf,KAAKK,MAAQS,CAAI,eAAed,KAAKK,SAAWU,KAEhDF,OAGR,CAOA,MAAAI,GACE,MAAMN,EAAOX,KAAKW,KAAOO,EAAW,4BAA4BlB,KAAKW,eAAiBI,EAChFI,EAASL,CAAI;QACfd,KAAKoB,KAAON,CAAI,SAASd,KAAKoB,cAAgBL;QAC9CJ;MAGJ,OAAOX,KAAKM,KAAON,KAAKgB,WAAWG,GAAUnB,KAAKY,aAAaO,EACjE,EAMFxB,EAAO0B"}
+{"version":3,"file":"button.js","sources":["../src/button/button.js"],"sourcesContent":["import { Elena, html, unsafeHTML, nothing } from \"@elenajs/core\";\nimport \"../spinner/spinner.js\";\n\n/**\n * Button component is used for interface actions.\n *\n * @displayName Button\n * @status alpha\n *\n * @event click - Programmatically fire click on the component.\n * @event focus - Programmatically move focus to the component.\n * @event blur - Programmatically remove focus from the component.\n *\n * @cssprop [--elena-button-text] - Overrides the default text color.\n * @cssprop [--elena-button-bg] - Overrides the default background color.\n * @cssprop [--elena-button-border] - Overrides the default border color.\n * @cssprop [--elena-button-font] - Overrides the default font family.\n * @cssprop [--elena-button-font-size] - Overrides the default font size.\n * @cssprop [--elena-button-font-weight] - Overrides the default font weight.\n * @cssprop [--elena-button-radius] - Overrides the default border radius.\n * @cssprop [--elena-button-focus] - Overrides the default focus ring color.\n */\nexport default class Button extends Elena(HTMLElement) {\n  static tagName = \"elena-button\";\n  static events = [\"click\", \"focus\", \"blur\"];\n  static props = [\n    \"variant\",\n    \"size\",\n    \"expand\",\n    \"disabled\",\n    \"loading\",\n    \"label\",\n    \"href\",\n    \"target\",\n    \"download\",\n    \"name\",\n    \"value\",\n    \"type\",\n    { name: \"icon\", reflect: false },\n  ];\n\n  /**\n   * The style variant of the button.\n   *\n   * @attribute\n   * @type {\"default\" | \"primary\" | \"danger\" | \"outline\"}\n   */\n  variant = \"default\";\n\n  /**\n   * The size of the button.\n   *\n   * @attribute\n   * @type {\"sm\" | \"md\" | \"lg\"}\n   */\n  size = \"md\";\n\n  /**\n   * Makes the button fit its container.\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  expand = false;\n\n  /**\n   * Makes the component disabled.\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  disabled = false;\n\n  /**\n   * Sets aria-label for the inner button.\n   *\n   * @attribute\n   * @type {string}\n   */\n  label = \"\";\n\n  /**\n   * Renders the button as a link and sets a href for it.\n   *\n   * @attribute\n   * @type {string}\n   */\n  href = \"\";\n\n  /**\n   * Defines where to open the linked URL.\n   *\n   * @attribute\n   * @type {\"_self\" | \"_blank\" | \"_parent\" | \"_top\"}\n   */\n  target = \"_self\";\n\n  /**\n   * Trigger a file download instead of a page visit.\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  download = false;\n\n  /**\n   * Show loading state\n   *\n   * @attribute\n   * @type {boolean}\n   */\n  loading = false;\n\n  /**\n   * The name used to identify the button in forms.\n   *\n   * @attribute\n   * @type {string}\n   */\n  name = \"\";\n\n  /**\n   * The value used to identify the button in forms.\n   *\n   * @attribute\n   * @type {string}\n   */\n  value = \"\";\n\n  /**\n   * The type of the button.\n   *\n   * @attribute\n   * @type {\"submit\" | \"reset\" | \"button\"}\n   */\n  type = \"button\";\n\n  /**\n   * An SVG icon to display inside the button.\n   *\n   * @attribute\n   * @type {string}\n   */\n  icon = \"\";\n\n  /**\n   * Renders a button: <button>.\n   *\n   * @internal\n   */\n  renderButton(template) {\n    return html`\n      <button\n        class=\"elena-button\"\n        type=\"${this.type}\"\n        ${this.name ? html`name=\"${this.name}\"` : nothing}\n        ${this.value ? html`value=\"${this.value}\"` : nothing}\n        ${this.disabled ? \"disabled\" : nothing}\n        ${this.loading ? html`aria-disabled=\"true\"` : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </button>\n    `;\n  }\n\n  /**\n   * Renders a link: <a href=\"#\">.\n   *\n   * @internal\n   */\n  renderLink(template) {\n    return html`\n      <a\n        class=\"elena-button\"\n        href=\"${this.href}\"\n        target=\"${this.target}\"\n        ${this.download ? \"download\" : nothing}\n        ${this.label ? html`aria-label=\"${this.label}\"` : nothing}\n      >\n        ${template}\n      </a>\n    `;\n  }\n\n  /**\n   * Renders the template.\n   *\n   * @internal\n   */\n  render() {\n    const icon = this.icon ? unsafeHTML(`<span class=\"elena-icon\">${this.icon}</span>`) : nothing;\n    const markup = html`\n      ${this.loading ? html`<elena-spinner></elena-spinner>` : nothing}\n      ${this.text ? html`<span>${this.text}</span>` : nothing}\n      ${icon}\n    `;\n\n    return this.href ? this.renderLink(markup) : this.renderButton(markup);\n  }\n}\n\n/**\n * Register the web component\n */\nButton.define();\n"],"names":["Button","Elena","HTMLElement","static","name","reflect","variant","size","expand","disabled","label","href","target","download","loading","value","type","icon","renderButton","template","html","this","nothing","renderLink","render","unsafeHTML","markup","text","define"],"mappings":"6DAsBe,MAAMA,UAAeC,EAAMC,cACxCC,eAAiB,eACjBA,cAAgB,CAAC,QAAS,QAAS,QACnCA,aAAe,CACb,UACA,OACA,SACA,WACA,UACA,QACA,OACA,SACA,WACA,OACA,QACA,OACA,CAAEC,KAAM,OAAQC,SAAS,IAS3BC,QAAU,UAQVC,KAAO,KAQPC,QAAS,EAQTC,UAAW,EAQXC,MAAQ,GAQRC,KAAO,GAQPC,OAAS,QAQTC,UAAW,EAQXC,SAAU,EAQVV,KAAO,GAQPW,MAAQ,GAQRC,KAAO,SAQPC,KAAO,GAOP,YAAAC,CAAaC,GACX,OAAOC,CAAI,sCAGCC,KAAKL,SACXK,KAAKjB,KAAOgB,CAAI,SAASC,KAAKjB,QAAUkB,KACxCD,KAAKN,MAAQK,CAAI,UAAUC,KAAKN,SAAWO,KAC3CD,KAAKZ,SAAW,WAAaa,KAC7BD,KAAKP,QAAUM,CAAI,uBAAyBE,KAC5CD,KAAKX,MAAQU,CAAI,eAAeC,KAAKX,SAAWY,KAEhDH,YAGR,CAOA,UAAAI,CAAWJ,GACT,OAAOC,CAAI,iCAGCC,KAAKV,iBACHU,KAAKT,WACbS,KAAKR,SAAW,WAAaS,KAC7BD,KAAKX,MAAQU,CAAI,eAAeC,KAAKX,SAAWY,KAEhDH,OAGR,CAOA,MAAAK,GACE,MAAMP,EAAOI,KAAKJ,KAAOQ,EAAW,4BAA4BJ,KAAKJ,eAAiBK,EAChFI,EAASN,CAAI,GACfC,KAAKP,QAAUM,CAAI,kCAAoCE,KACvDD,KAAKM,KAAOP,CAAI,SAASC,KAAKM,cAAgBL,KAC9CL,IAGJ,OAAOI,KAAKV,KAAOU,KAAKE,WAAWG,GAAUL,KAAKH,aAAaQ,EACjE,EAMF1B,EAAO4B"}

package/dist/custom-elements.d.ts

@@ -77,6 +77,8 @@ export type ButtonProps = {
   target?: "_self" | "_blank" | "_parent" | "_top";
   /** Trigger a file download instead of a page visit. */
   download?: boolean;
+  /** Show loading state */
+  loading?: boolean;
   /** The name used to identify the button in forms. */
   name?: string;
   /** The value used to identify the button in forms. */
@@ -96,6 +98,11 @@ export type ButtonProps = {
   onblur?: (e: CustomEvent<never>) => void;
 };
 
+export type SpinnerProps = {
+  /** The text content of the element, captured from light DOM before the first render. */
+  text?: string;
+};
+
 export type StackProps = {
   /** The direction of the stack. */
   direction?: "column" | "row";
@@ -103,6 +110,11 @@ export type StackProps = {
   text?: string;
 };
 
+export type VisuallyHiddenProps = {
+  /** The text content of the element, captured from light DOM before the first render. */
+  text?: string;
+};
+
 export type CustomElements = {
   /**
    * Button component is used for interface actions.
@@ -117,11 +129,27 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--elena-button-text** - Overrides the default text color. _(default: undefined)_
    * - **--elena-button-bg** - Overrides the default background color. _(default: undefined)_
+   * - **--elena-button-border** - Overrides the default border color. _(default: undefined)_
    * - **--elena-button-font** - Overrides the default font family. _(default: undefined)_
+   * - **--elena-button-font-size** - Overrides the default font size. _(default: undefined)_
+   * - **--elena-button-font-weight** - Overrides the default font weight. _(default: undefined)_
    * - **--elena-button-radius** - Overrides the default border radius. _(default: undefined)_
+   * - **--elena-button-focus** - Overrides the default focus ring color. _(default: undefined)_
    */
   "elena-button": Partial<ButtonProps & BaseProps & BaseEvents>;
 
+  /**
+   * Visually hidden hides the element visually while
+   * keeping it available for assistive technologies.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--elena-spinner-size** - Overrides the default spinner size. _(default: undefined)_
+   * - **--elena-spinner-border** - Overrides the default spinner border width. _(default: undefined)_
+   */
+  "elena-spinner": Partial<SpinnerProps & BaseProps & BaseEvents>;
+
   /**
    * Stack component manages layout of immediate children
    * with optional spacing between each child.
@@ -132,4 +160,15 @@ export type CustomElements = {
    *  - _default_ - The stacked content
    */
   "elena-stack": Partial<StackProps & BaseProps & BaseEvents>;
+
+  /**
+   * Visually hidden hides the element visually while
+   * keeping it available for assistive technologies.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The hidden content
+   */
+  "elena-visually-hidden": Partial<VisuallyHiddenProps & BaseProps & BaseEvents>;
 };