@elenajs/elements 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ariel Salminen https://arielsalminen.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/button.css

@@ -0,0 +1,77 @@
+/* ---------------------------------------------
+/ ELENA BUTTON
+/ --------------------------------------------- */
+
+elena-button {
+  /* Public CSS Custom Properties */
+  --elena-button-bg: transparent;
+  --elena-button-text: #333;
+  --elena-button-border: #f19c77;
+  --elena-button-radius: 10rem;
+  --elena-button-font: sans-serif;
+
+  all: unset;
+  display: inline-flex;
+}
+
+/**
+ * For overall visual styles, we want to target both 
+ * non-hydrated element and the internal button element 
+ * with the same styles. This way the element will look 
+ * the same before & after client side hydration.
+ */
+:is(elena-button:not(.elena-hydrated), .elena-button) {
+  all: unset;
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  -webkit-user-select: none;
+  user-select: none;
+  background: var(--elena-button-bg);
+  color: var(--elena-button-text);
+  border-radius: var(--elena-button-radius);
+  border: 2px solid var(--elena-button-border);
+  font-family: var(--elena-button-font);
+  font-weight: 700;
+  padding: 0.75rem 1.25rem;
+  cursor: pointer;
+}
+
+/* ---------------------------------------------
+/ EXAMPLE STATES
+/ --------------------------------------------- */
+
+elena-button:hover {
+  opacity: 0.8;
+}
+
+elena-button:active {
+  opacity: 0.6;
+}
+
+elena-button:focus-within {
+  box-shadow: 0 0 0 3px red;
+}
+
+elena-button[disabled] {
+  --elena-button-bg: #2b1c15;
+  --elena-button-text: #fff;
+  --elena-button-border: #2b1c15;
+
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------
+/ EXAMPLE VARIANTS
+/ --------------------------------------------- */
+
+elena-button[variant="primary"] {
+  --elena-button-bg: #f19c77;
+  --elena-button-text: #2b1c15;
+}
+
+elena-button[variant="danger"] {
+  --elena-button-text: red;
+  --elena-button-border: red;
+}

package/dist/button.js

@@ -0,0 +1,11 @@
+import{l as t,n as e}from"./elena-f59Xc5oc.js";const s={props:["variant","size","disabled","name","value","type"],events:["click","focus","blur"],element:".elena-button"};class a extends(t(HTMLElement,s)){constructor(){super(),this.variant="default",this.size="md",this.disabled=!1,this.name="",this.value="",this.type="button"}render(){const t=this.textContent.trim();this.template`
+      <button
+        class="elena-button"
+        type="${this.type||"button"}"
+        ${this.name?`name="${this.name}"`:""}
+        ${this.value?`value="${this.value}"`:""}
+        ${this.disabled?"disabled":""}>
+          ${t}
+      </button>
+    `}}e("elena-button",a);export{a as default};
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../src/button/button.js"],"sourcesContent":["import { Elena, defineElement } from \"@elenajs/core\";\n\nconst options = {\n  props: [\"variant\", \"size\", \"disabled\", \"name\", \"value\", \"type\"],\n  events: [\"click\", \"focus\", \"blur\"],\n  element: \".elena-button\",\n};\n\n/**\n * The description of the component goes here.\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-color-text] - Controls the color of the text.\n * @cssprop [--elena-button-color-bg] - Controls the color of the background.\n * @cssprop [--elena-button-color-border] - Controls the color of the border.\n * @cssprop [--elena-button-radius] - Controls the radius of the component.\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\")}\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 component disabled.\n     *\n     * @attribute\n     * @type {Boolean}\n     */\n    this.disabled = 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  /**\n   * Renders the custom element template.\n   *\n   * @internal\n   */\n  render() {\n    const slottedContent = this.textContent.trim();\n\n    this.template`\n      <button\n        class=\"elena-button\"\n        type=\"${this.type || \"button\"}\"\n        ${this.name ? `name=\"${this.name}\"` : \"\"}\n        ${this.value ? `value=\"${this.value}\"` : \"\"}\n        ${this.disabled ? \"disabled\" : \"\"}>\n          ${slottedContent}\n      </button>\n    `;\n  }\n}\n\n/**\n * Register the custom element\n */\ndefineElement(\"elena-button\", Button);\n"],"names":["options","props","events","element","Button","Elena","HTMLElement","constructor","super","this","variant","size","disabled","name","value","type","render","slottedContent","textContent","trim","template","defineElement"],"mappings":"+CAEA,MAAMA,EAAU,CACdC,MAAO,CAAC,UAAW,OAAQ,WAAY,OAAQ,QAAS,QACxDC,OAAQ,CAAC,QAAS,QAAS,QAC3BC,QAAS,iBAkBI,MAAMC,UAAeC,EAAMC,YAAaN,IACrD,WAAAO,GACEC,QAQAC,KAAKC,QAAU,UAQfD,KAAKE,KAAO,KAQZF,KAAKG,UAAW,EAQhBH,KAAKI,KAAO,GAQZJ,KAAKK,MAAQ,GAQbL,KAAKM,KAAO,QACd,CAOA,MAAAC,GACE,MAAMC,EAAiBR,KAAKS,YAAYC,OAExCV,KAAKW,QAAQ;;;gBAGDX,KAAKM,MAAQ;UACnBN,KAAKI,KAAO,SAASJ,KAAKI,QAAU;UACpCJ,KAAKK,MAAQ,UAAUL,KAAKK,SAAW;UACvCL,KAAKG,SAAW,WAAa;YAC3BK;;KAGV,EAMFI,EAAc,eAAgBjB"}

package/dist/custom-elements.d.ts

@@ -0,0 +1,156 @@
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ */
+export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+};
+
+type BaseEvents = {};
+
+export type ButtonProps = {
+  /** The style variant of the button. */
+  variant?: "default" | "primary" | "danger";
+  /** The size of the button. */
+  size?: "sm" | "md" | "lg";
+  /** Makes the component disabled. */
+  disabled?: Boolean;
+  /** The name used to identify the button in forms. */
+  name?: string;
+  /** The value used to identify the button in forms. */
+  value?: string;
+  /** The type of the button. */
+  type?: "submit" | "reset" | "button";
+
+  /** Programmatically fire click on the component. */
+  onclick?: (e: CustomEvent<never>) => void;
+  /** Programmatically move focus to the component. */
+  onfocus?: (e: CustomEvent<never>) => void;
+  /** Programmatically remove focus from the component. */
+  onblur?: (e: CustomEvent<never>) => void;
+};
+
+export type InputProps = {
+  /** The size of the input. */
+  size?: "sm" | "md" | "lg";
+  /** Makes the component disabled. */
+  disabled?: Boolean;
+  /** The name used to identify the input in forms. */
+  name?: string;
+  /** The label for the input */
+  label?: string;
+  /** The value used to identify the input in forms. */
+  value?: string;
+  /** The placeholder text for the input. */
+  placeholder?: string;
+  /** The type of the input */
+  type?: "text" | "email" | "password" | "tel" | "url" | "search" | "number" | "unit" | "button";
+  /** The error to display */
+  error?: string;
+
+  /** Programmatically fire click on the component. */
+  onclick?: (e: CustomEvent<never>) => void;
+  /** Programmatically move focus to the component. */
+  onfocus?: (e: CustomEvent<never>) => void;
+  /** Programmatically remove focus from the component. */
+  onblur?: (e: CustomEvent<never>) => void;
+};
+
+export type StackProps = {};
+
+export type CustomElements = {
+  /**
+   * The description of the component goes here.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Programmatically fire click on the component.
+   * - **focus** - Programmatically move focus to the component.
+   * - **blur** - Programmatically remove focus from the component.
+   *
+   * ### **CSS Properties:**
+   *  - **--elena-button-color-text** - Controls the color of the text. _(default: undefined)_
+   * - **--elena-button-color-bg** - Controls the color of the background. _(default: undefined)_
+   * - **--elena-button-color-border** - Controls the color of the border. _(default: undefined)_
+   * - **--elena-button-radius** - Controls the radius of the component. _(default: undefined)_
+   */
+  "elena-button": Partial<ButtonProps & BaseProps & BaseEvents>;
+
+  /**
+   * The description of the component goes here.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Programmatically fire click on the component.
+   * - **focus** - Programmatically move focus to the component.
+   * - **blur** - Programmatically remove focus from the component.
+   *
+   * ### **CSS Properties:**
+   *  - **--elena-input-color-text** - Controls the color of the text. _(default: undefined)_
+   * - **--elena-input-color-bg** - Controls the color of the background. _(default: undefined)_
+   * - **--elena-input-color-border** - Controls the color of the border. _(default: undefined)_
+   * - **--elena-input-radius** - Controls the radius of the component. _(default: undefined)_
+   */
+  "elena-input": Partial<InputProps & BaseProps & BaseEvents>;
+
+  /**
+   * The description of the component goes here.
+   * ---
+   *
+   */
+  "elena-stack": Partial<StackProps & BaseProps & BaseEvents>;
+};

package/dist/custom-elements.json

@@ -0,0 +1,485 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Button",
+          "declaration": {
+            "name": "default",
+            "module": "./button/button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button/button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The description of the component goes here.",
+          "name": "Button",
+          "cssProperties": [
+            {
+              "description": "Controls the color of the text.",
+              "name": "--elena-button-color-text"
+            },
+            {
+              "description": "Controls the color of the background.",
+              "name": "--elena-button-color-bg"
+            },
+            {
+              "description": "Controls the color of the border.",
+              "name": "--elena-button-color-border"
+            },
+            {
+              "description": "Controls the radius of the component.",
+              "name": "--elena-button-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "(\"default\" | \"primary\" | \"danger\")"
+              },
+              "description": "The style variant of the button.",
+              "default": "\"default\"",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "(\"sm\" | \"md\" | \"lg\")"
+              },
+              "description": "The size of the button.",
+              "default": "\"md\"",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Makes the component disabled.",
+              "default": "false",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name used to identify the button in forms.",
+              "default": "\"\"",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The value used to identify the button in forms.",
+              "default": "\"\"",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "(\"submit\" | \"reset\" | \"button\")"
+              },
+              "description": "The type of the button.",
+              "default": "\"button\"",
+              "attribute": "type"
+            }
+          ],
+          "events": [
+            {
+              "description": "Programmatically fire click on the component.",
+              "name": "click"
+            },
+            {
+              "description": "Programmatically move focus to the component.",
+              "name": "focus"
+            },
+            {
+              "description": "Programmatically remove focus from the component.",
+              "name": "blur"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "(\"default\" | \"primary\" | \"danger\")"
+              },
+              "description": "The style variant of the button.",
+              "default": "\"default\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "(\"sm\" | \"md\" | \"lg\")"
+              },
+              "description": "The size of the button.",
+              "default": "\"md\"",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Makes the component disabled.",
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name used to identify the button in forms.",
+              "default": "\"\"",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The value used to identify the button in forms.",
+              "default": "\"\"",
+              "fieldName": "value"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "(\"submit\" | \"reset\" | \"button\")"
+              },
+              "description": "The type of the button.",
+              "default": "\"button\"",
+              "fieldName": "type"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Elena",
+              "package": "@elenajs/core"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "status": "alpha",
+          "displayName": "Button",
+          "tagName": "elena-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Button",
+            "module": "src/button/button.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "elena-button",
+          "declaration": {
+            "name": "Button",
+            "module": "src/button/button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/input/input.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The description of the component goes here.",
+          "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Controls the color of the text.",
+              "name": "--elena-input-color-text"
+            },
+            {
+              "description": "Controls the color of the background.",
+              "name": "--elena-input-color-bg"
+            },
+            {
+              "description": "Controls the color of the border.",
+              "name": "--elena-input-color-border"
+            },
+            {
+              "description": "Controls the radius of the component.",
+              "name": "--elena-input-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "(\"sm\" | \"md\" | \"lg\")"
+              },
+              "description": "The size of the input.",
+              "default": "\"md\"",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Makes the component disabled.",
+              "default": "false",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name used to identify the input in forms.",
+              "default": "\"\"",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "The label for the input",
+              "default": "\"\"",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The value used to identify the input in forms.",
+              "default": "\"\"",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "description": "The placeholder text for the input.",
+              "default": "\"\"",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "(\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" | \"button\")"
+              },
+              "description": "The type of the input",
+              "default": "\"text\"",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "description": "The error to display",
+              "default": "\"\"",
+              "attribute": "error"
+            }
+          ],
+          "events": [
+            {
+              "description": "Programmatically fire click on the component.",
+              "name": "click"
+            },
+            {
+              "description": "Programmatically move focus to the component.",
+              "name": "focus"
+            },
+            {
+              "description": "Programmatically remove focus from the component.",
+              "name": "blur"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "(\"sm\" | \"md\" | \"lg\")"
+              },
+              "description": "The size of the input.",
+              "default": "\"md\"",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Makes the component disabled.",
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name used to identify the input in forms.",
+              "default": "\"\"",
+              "fieldName": "name"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "The label for the input",
+              "default": "\"\"",
+              "fieldName": "label"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The value used to identify the input in forms.",
+              "default": "\"\"",
+              "fieldName": "value"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "description": "The placeholder text for the input.",
+              "default": "\"\"",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "(\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" | \"button\")"
+              },
+              "description": "The type of the input",
+              "default": "\"text\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "description": "The error to display",
+              "default": "\"\"",
+              "fieldName": "error"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Elena",
+              "package": "@elenajs/core"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "status": "alpha",
+          "displayName": "Input",
+          "tagName": "elena-input",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/input.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "elena-input",
+          "declaration": {
+            "name": "Input",
+            "module": "src/input/input.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/stack/stack.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The description of the component goes here.",
+          "name": "Stack",
+          "mixins": [
+            {
+              "name": "Elena",
+              "package": "@elenajs/core"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "status": "alpha",
+          "displayName": "Stack",
+          "tagName": "elena-stack",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Stack",
+            "module": "src/stack/stack.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "elena-stack",
+          "declaration": {
+            "name": "Stack",
+            "module": "src/stack/stack.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/elena-f59Xc5oc.js

@@ -0,0 +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}else switch(e){case"object":case"array":return t&&JSON.parse(t);case"boolean":default:return t;case"number":return null!==t?+t: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,s=class extends Event{constructor(e,t){super(e,{bubbles:!0,composed:!0,...t})}};function r(e,t){"undefined"!=typeof window&&"customElements"in window&&(window.customElements.get(e)||window.customElements.define(e,t))}function i(e){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};return String(e).replace(/[&<>"']/g,e=>t[e])}function o(e,...t){const n=e.reduce((e,n,s)=>e+n+i(String(t[s]??"")),"");return{__raw:!0,toString:()=>n}}function l(e,t,n){(function(e,t,n){if(e._tplStrings!==t||!e._tplParts)return!1;let s=!1;for(let t=0;t<n.length;t++){const r=n[t],o=r&&r.__raw,l=o?String(r):i(String(r??""));if(l!==e._tplValues[t])if(e._tplValues[t]=l,o)s=!0;else{const n=e._tplParts[t];n?n.textContent=String(r??""):s=!0}}return!s})(e,t,n)||function(e,t,n){const s=n.map(e=>e&&e.__raw?String(e):i(String(e??""))),r=t.reduce((e,t,n)=>e+t.replace(/\n\s*/g," ")+(s[n]??""),"").replace(/>\s+</g,"><").replace(/>\s+/g,">").replace(/\s+</g,"<").trim();a(e,r),e._tplStrings=t,e._tplValues=s,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,s)}(e,t,n)}function a(e,t){e?e.replaceChildren((n??=document.createRange()).createContextualFragment(t)):console.warn("░█ [ELENA]: Cannot render to a null element.")}function c(n,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;class o extends n{element=null;attributeChangedCallback(t,n,s){(function(t,n,s,r){if(s!==r){const s=e(typeof t[n],r,"toProp");t[n]=s}})(this,t,n,s),this.element&&n!==s&&this.render()}static get observedAttributes(){return r&&r.props?r.props:[]}render(){}template(e,...t){l(this,e,t)}connectedCallback(){if(this.render(),this.element||(this.element=i(this),this.element||(console.warn("░█ [ELENA]: No element found, using firstElementChild as fallback."),this.element=this.firstElementChild)),this._props)for(const[n,s]of this._props){const r=e(typeof s,s,"toAttribute");"string"==typeof s&&""===s?(this.removeAttribute(n),this.element.removeAttribute(n)):(t(this,n,r),t(this.element,n,r))}!this._events&&r&&r.events&&(this._events=!0,r.events?.forEach(e=>{this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)})),this.updated()}updated(){this._hydrated||(this._hydrated=!0,this.classList.add("elena-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 s(e.type,{cancelable:!0})))}}return r&&r.props?.length&&function(n,s){for(const r of s)Object.defineProperty(n,r,{configurable:!0,enumerable:!0,get(){return this._props?this._props.get(r):void 0},set(n){if(this._props||(this._props=new Map),n===this._props.get(r))return;if(this._props.set(r,n),!this.isConnected)return;const s=e(typeof n,n,"toAttribute");t(this,r,s),this.element&&t(this.element,r,s)}})}(o.prototype,r.props),o}export{o as e,c as l,r as n};
+//# sourceMappingURL=elena-f59Xc5oc.js.map

package/dist/elena-f59Xc5oc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elena-f59Xc5oc.js","sources":["../../core/dist/props.js","../../core/dist/events.js","../../core/dist/render.js","../../core/dist/utils.js","../../core/dist/elena.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}else switch(t){case\"object\":case\"array\":return e&&JSON.parse(e);case\"boolean\":default:return e;case\"number\":return null!==e?+e:e}}function e(t,e,n){t?null===n?t.removeAttribute(e):t.setAttribute(e,n):console.warn(\"░█ [ELENA]: Cannot sync attributes to a null element.\")}function n(n,r){for(const o of r)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))return;if(this._props.set(o,n),!this.isConnected)return;const r=t(typeof n,n,\"toAttribute\");e(this,o,r),this.element&&e(this.element,o,r)}})}function r(e,n,r,o){if(r!==o){const r=t(typeof e[n],o,\"toProp\");e[n]=r}}export{t as getPropValue,r as getProps,n as setProps,e 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","import{escapeHtml as t}from\"./utils.js\";function e(e,n,l){(function(e,n,r){if(e._tplStrings!==n||!e._tplParts)return!1;let l=!1;for(let n=0;n<r.length;n++){const a=r[n],o=a&&a.__raw,c=o?String(a):t(String(a??\"\"));if(c!==e._tplValues[n])if(e._tplValues[n]=c,o)l=!0;else{const t=e._tplParts[n];t?t.textContent=String(a??\"\"):l=!0}}return!l})(e,n,l)||function(e,n,l){const a=l.map(e=>e&&e.__raw?String(e):t(String(e??\"\"))),o=n.reduce((t,e,n)=>t+e.replace(/\\n\\s*/g,\" \")+(a[n]??\"\"),\"\").replace(/>\\s+</g,\"><\").replace(/>\\s+/g,\">\").replace(/\\s+</g,\"<\").trim();r(e,o),e._tplStrings=n,e._tplValues=a,e._tplParts=function(t,e){const n=new Array(e.length),r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);let l,a=0;for(;(l=r.nextNode())&&a<e.length;)l.textContent===e[a]&&(n[a]=l,a++);return n}(e,a)}(e,n,l)}let n;function r(t,e){t?t.replaceChildren((n??=document.createRange()).createContextualFragment(e)):console.warn(\"░█ [ELENA]: Cannot render to a null element.\")}export{r as renderHtml,e as renderTemplate};\n//# sourceMappingURL=render.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 o=n.reduce((n,o,i)=>n+o+t(String(e[i]??\"\")),\"\");return{__raw:!0,toString:()=>o}}export{n as defineElement,t as escapeHtml,e as html};\n//# sourceMappingURL=utils.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\";export{defineElement,html}from\"./utils.js\";import{renderTemplate as r}from\"./render.js\";function l(l,h){const o=h&&h.element?/^[a-z][a-z0-9-]*$/i.test(h.element)?e=>e.getElementsByClassName(h.element)[0]:e=>e.querySelector(h.element):e=>e.firstElementChild;class a extends l{element=null;attributeChangedCallback(e,s,n){t(this,e,s,n),this.element&&s!==n&&this.render()}static get observedAttributes(){return h&&h.props?h.props:[]}render(){}template(e,...t){r(this,e,t)}connectedCallback(){if(this.render(),this.element||(this.element=o(this),this.element||(console.warn(\"░█ [ELENA]: No element found, using firstElementChild as fallback.\"),this.element=this.firstElementChild)),this._props)for(const[e,t]of this._props){const i=s(typeof t,t,\"toAttribute\");\"string\"==typeof t&&\"\"===t?(this.removeAttribute(e),this.element.removeAttribute(e)):(n(this,e,i),n(this.element,e,i))}!this._events&&h&&h.events&&(this._events=!0,h.events?.forEach(e=>{this.element.addEventListener(e,this),this[e]=(...t)=>this.element[e](...t)})),this.updated()}updated(){this._hydrated||(this._hydrated=!0,this.classList.add(\"elena-hydrated\"))}disconnectedCallback(){this._events&&(this._events=!1,h.events?.forEach(e=>{this.element?.removeEventListener(e,this)}))}handleEvent(e){h.events?.includes(e.type)&&(e.stopPropagation(),this.dispatchEvent(new i(e.type,{cancelable:!0})))}}return h&&h.props?.length&&e(a.prototype,h.props),a}export{l as Elena};\n//# sourceMappingURL=elena.js.map\n"],"names":["t","e","n","JSON","stringify","parse","removeAttribute","setAttribute","console","warn","e$2","Event","constructor","s","super","bubbles","composed","window","customElements","get","define","String","replace","o","reduce","i","__raw","toString","l","r","_tplStrings","_tplParts","length","a","c","_tplValues","textContent","map","trim","Array","document","createTreeWalker","NodeFilter","SHOW_TEXT","nextNode","replaceChildren","createRange","createContextualFragment","h","element","test","getElementsByClassName","querySelector","firstElementChild","attributeChangedCallback","this","render","observedAttributes","props","template","connectedCallback","_props","_events","events","forEach","addEventListener","updated","_hydrated","classList","add","disconnectedCallback","removeEventListener","handleEvent","includes","type","stopPropagation","dispatchEvent","cancelable","Object","defineProperty","configurable","enumerable","set","Map","isConnected","prototype"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export{default as Button}from"./button.js";import"./elena-f59Xc5oc.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/input.css

@@ -0,0 +1,101 @@
+/* ---------------------------------------------
+/ ELENA input
+/ --------------------------------------------- */
+
+elena-input {
+  /* Public CSS Custom Properties */
+  --elena-input-bg: transparent;
+  --elena-input-text: #333;
+  --elena-input-border: #333;
+  --elena-input-radius: 4px;
+  --elena-input-font: sans-serif;
+
+  all: unset;
+  min-inline-size: 300px;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+/**
+ * For overall visual styles, we want to target both 
+ * non-hydrated element and the internal input element 
+ * with the same styles. This way the element will look 
+ * the same before & after client side hydration.
+ */
+:is(elena-input:not(.elena-hydrated), .elena-input) {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  -webkit-user-select: none;
+  user-select: none;
+  line-height: 1;
+  block-size: 3rem;
+  background: var(--elena-input-bg);
+  color: var(--elena-input-text);
+  border-radius: var(--elena-input-radius);
+  border: 1px solid var(--elena-input-border);
+  font-family: var(--elena-input-font);
+  font-weight: 700;
+  padding: 0.75rem 1.25rem;
+  cursor: text;
+  position: relative;
+}
+
+elena-input:not(.elena-hydrated) {
+  margin-block-start: 1.82rem;
+}
+
+elena-input:not(.elena-hydrated)::before {
+  content: attr(label);
+  position: absolute;
+  font-weight: 700;
+  top: -1.78rem;
+  left: -1px;
+  display: block;
+  inline-size: 100%;
+}
+
+elena-input:not(.elena-hydrated)::after {
+  content: attr(placeholder);
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+  color: #aaa;
+}
+
+elena-input .elena-input {
+  font-size: 100%;
+  box-sizing: border-box;
+  inline-size: 100%;
+}
+
+elena-input label {
+  font-weight: 700;
+  display: block;
+  block-size: 1.5rem;
+  margin: 0;
+  inline-size: 100%;
+}
+
+.elena-input-container {
+  inline-size: 100%;
+}
+
+elena-input input:focus {
+  box-shadow: 0 0 0 1px red;
+}
+
+elena-input input::placeholder {
+  opacity: 1;
+  color: #aaa;
+}
+
+elena-input[error] {
+  --elena-input-border: red;
+}
+
+elena-input .elena-error {
+  color: red;
+}

package/dist/input.js

@@ -0,0 +1,19 @@
+import{l as e,e as s,n as l}from"./elena-f59Xc5oc.js";const t={props:["size","disabled","name","value","type","label","error","placeholder"],events:["click","focus","blur"],element:".elena-input"};class a extends(e(HTMLElement,t)){constructor(){super(),this.size="md",this.disabled=!1,this.name="",this.label="",this.value="",this.placeholder="",this.type="text",this.error=""}render(){this.template`
+        <label for="input">${this.label}</label>
+        <div class="elena-input-container">
+            <span class="elena-input-start"></span>
+            <input
+                id="input"
+                class="elena-input"
+                type="${this.type}"
+                value="${this.value}"
+                placeholder="${this.placeholder}"
+                ${this.name?`name="${this.name}"`:""}
+                ${this.value?`value="${this.value}"`:""}
+                ${this.disabled?"disabled":""}
+                />
+            <span class="elena-input-end"></span>
+        </div>
+        ${this.error?s`<div class="elena-error" role="alert">${this.error}</div>`:""}
+    `}}l("elena-input",a);export{a as default};
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../src/input/input.js"],"sourcesContent":["import { Elena, defineElement, html } from \"@elenajs/core\";\n\nconst options = {\n  props: [\"size\", \"disabled\", \"name\", \"value\", \"type\", \"label\", \"error\", \"placeholder\"],\n  events: [\"click\", \"focus\", \"blur\"],\n  element: \".elena-input\",\n};\n\n/**\n * The description of the component goes here.\n *\n * @displayName Input\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-input-color-text] - Controls the color of the text.\n * @cssprop [--elena-input-color-bg] - Controls the color of the background.\n * @cssprop [--elena-input-color-border] - Controls the color of the border.\n * @cssprop [--elena-input-radius] - Controls the radius of the component.\n */\nexport default class Input extends Elena(HTMLElement, options) {\n  constructor() {\n    super();\n\n    /**\n     * The size of the input.\n     *\n     * @attribute\n     * @type {(\"sm\" | \"md\" | \"lg\")}\n     */\n    this.size = \"md\";\n\n    /**\n     * Makes the component disabled.\n     *\n     * @attribute\n     * @type {Boolean}\n     */\n    this.disabled = false;\n\n    /**\n     * The name used to identify the input in forms.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.name = \"\";\n\n    /**\n     * The label for the input\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.label = \"\";\n\n    /**\n     * The value used to identify the input in forms.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.value = \"\";\n\n    /**\n     * The placeholder text for the input.\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.placeholder = \"\";\n\n    /**\n     * The type of the input\n     *\n     * @attribute\n     * @type {(\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" | \"button\")}\n     */\n    this.type = \"text\";\n\n    /**\n     * The error to display\n     *\n     * @attribute\n     * @type {string}\n     */\n    this.error = \"\";\n  }\n\n  /**\n   * Renders the custom element template.\n   *\n   * @internal\n   */\n  render() {\n    this.template`\n        <label for=\"input\">${this.label}</label>\n        <div class=\"elena-input-container\">\n            <span class=\"elena-input-start\"></span>\n            <input\n                id=\"input\"\n                class=\"elena-input\"\n                type=\"${this.type}\"\n                value=\"${this.value}\"\n                placeholder=\"${this.placeholder}\"\n                ${this.name ? `name=\"${this.name}\"` : \"\"}\n                ${this.value ? `value=\"${this.value}\"` : \"\"}\n                ${this.disabled ? \"disabled\" : \"\"}\n                />\n            <span class=\"elena-input-end\"></span>\n        </div>\n        ${this.error ? html`<div class=\"elena-error\" role=\"alert\">${this.error}</div>` : \"\"}\n    `;\n  }\n}\n\n/**\n * Register the custom element\n */\ndefineElement(\"elena-input\", Input);\n"],"names":["options","props","events","element","Input","Elena","HTMLElement","constructor","super","this","size","disabled","name","label","value","placeholder","type","error","render","template","html","defineElement"],"mappings":"sDAEA,MAAMA,EAAU,CACdC,MAAO,CAAC,OAAQ,WAAY,OAAQ,QAAS,OAAQ,QAAS,QAAS,eACvEC,OAAQ,CAAC,QAAS,QAAS,QAC3BC,QAAS,gBAkBI,MAAMC,UAAcC,EAAMC,YAAaN,IACpD,WAAAO,GACEC,QAQAC,KAAKC,KAAO,KAQZD,KAAKE,UAAW,EAQhBF,KAAKG,KAAO,GAQZH,KAAKI,MAAQ,GAQbJ,KAAKK,MAAQ,GAQbL,KAAKM,YAAc,GAQnBN,KAAKO,KAAO,OAQZP,KAAKQ,MAAQ,EACf,CAOA,MAAAC,GACET,KAAKU,QAAQ;6BACYV,KAAKI;;;;;;wBAMVJ,KAAKO;yBACJP,KAAKK;+BACCL,KAAKM;kBAClBN,KAAKG,KAAO,SAASH,KAAKG,QAAU;kBACpCH,KAAKK,MAAQ,UAAUL,KAAKK,SAAW;kBACvCL,KAAKE,SAAW,WAAa;;;;UAIrCF,KAAKQ,MAAQG,CAAI,yCAAyCX,KAAKQ,cAAgB;KAEvF,EAMFI,EAAc,cAAejB"}

package/dist/stack.css

@@ -0,0 +1,14 @@
+/* ---------------------------------------------
+/ ELENA STACK
+/ --------------------------------------------- */
+
+elena-stack {
+  display: flex;
+  justify-content: flex-start;
+  flex-flow: column wrap;
+  gap: 1rem;
+}
+
+elena-stack[dir="row"] {
+  flex-direction: row;
+}

package/dist/stack.js

@@ -0,0 +1,2 @@
+import{l as e,n as s}from"./elena-f59Xc5oc.js";class t extends(e(HTMLElement)){constructor(){super()}}s("elena-stack",t);export{t as default};
+//# sourceMappingURL=stack.js.map

package/dist/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../src/stack/stack.js"],"sourcesContent":["import { Elena, defineElement } from \"@elenajs/core\";\n\n/**\n * The description of the component goes here.\n *\n * @displayName Stack\n * @status alpha\n */\nexport default class Stack extends Elena(HTMLElement) {\n  constructor() {\n    super();\n  }\n}\n\n/**\n * Register the custom element\n */\ndefineElement(\"elena-stack\", Stack);\n"],"names":["Stack","Elena","HTMLElement","constructor","super","defineElement"],"mappings":"+CAQe,MAAMA,UAAcC,EAAMC,cACvC,WAAAC,GACEC,OACF,EAMFC,EAAc,cAAeL"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@elenajs/elements",
+  "version": "0.0.2",
+  "description": "An example Elena custom element library",
+  "author": "Ariel Salminen <info@arielsalminen.com>",
+  "main": "./dist/index.js",
+  "types": "./dist/custom-elements.d.ts",
+  "customElements": "dist/custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prebuild": "npm run -s clean",
+    "start": "web-dev-server --node-resolve --app-index src/index.html --open --watch",
+    "build": "NODE_OPTIONS='--no-warnings' rollup -c",
+    "postbuild": "npm run -s analyze",
+    "clean": "rm -rf dist/",
+    "analyze": "custom-elements-manifest analyze --config './custom-elements.config.js'"
+  },
+  "dependencies": {
+    "@elenajs/core": "0.0.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@rollup/plugin-terser": "0.4.4",
+    "@web/dev-server": "0.4.6",
+    "custom-element-jsx-integration": "1.6.0",
+    "rollup": "4.57.1",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-summary": "3.0.1"
+  },
+  "gitHead": "ff57490821d81e73f378b36ef28d25bfeebd9657"
+}