@ahriknow/lux 0.0.1

package/src/components/lux-example/index.js

@@ -0,0 +1,117 @@
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+const styles = css`
+    :host {
+        display: block;
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+        border-radius: var(--lux-radius, 6px);
+        background: rgb(var(--lux-card, 30 41 59));
+        margin-bottom: var(--lux-space-4, 1rem);
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        border-bottom: 1px solid rgb(var(--lux-border, 51 65 85));
+        cursor: pointer;
+        user-select: none;
+        transition: background var(--lux-transition, 150ms ease);
+    }
+    .header:hover {
+        background: rgba(0, 0, 0, 0.03);
+    }
+
+    .title {
+        font-size: var(--lux-font-sm, 0.875rem);
+        font-weight: 600;
+        color: rgb(var(--lux-text, 241 245 249));
+    }
+
+    .toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border: none;
+        border-radius: var(--lux-radius-sm, 4px);
+        background: transparent;
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        cursor: pointer;
+        transition: all var(--lux-transition, 150ms ease);
+        font-size: 14px;
+    }
+    .toggle-btn:hover {
+        background: rgba(0, 0, 0, 0.05);
+        color: rgb(var(--lux-text, 241 245 249));
+    }
+    .toggle-icon {
+        transition: transform var(--lux-transition, 150ms ease);
+        display: inline-block;
+    }
+    :host([expanded]) .toggle-icon {
+        transform: rotate(180deg);
+    }
+
+    .main {
+        padding: 16px;
+    }
+
+    .footer {
+        padding: 12px 16px;
+        border-top: 1px solid rgb(var(--lux-border, 51 65 85));
+        background: rgb(var(--lux-bg, 248 250 252));
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        font-size: var(--lux-font-sm, 0.875rem);
+        display: none;
+    }
+
+    :host([expanded]) .footer {
+        display: block;
+    }
+`;
+
+class LuxExample extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        expanded: { type: Boolean, reflect: true },
+    };
+
+    constructor() {
+        super();
+        this.expanded = false;
+    }
+
+    _toggle() {
+        this.expanded = !this.expanded;
+    }
+
+    render() {
+        return html`
+            <div class="header" @click=${() => this._toggle()}>
+                <span class="title"><slot name="heading"></slot></span>
+                <button
+                    class="toggle-btn"
+                    @click=${(e) => {
+              e.stopPropagation();
+              this._toggle();
+          }}
+                >
+                    <span class="toggle-icon">▼</span>
+                </button>
+            </div>
+            <div class="main">
+                <slot name="main"></slot>
+            </div>
+            <div class="footer">
+                <slot name="footer"></slot>
+            </div>
+        `;
+    }
+}
+
+registerComponent('lux-example', LuxExample);
+export default LuxExample;

package/src/components/lux-icon/index.js

@@ -0,0 +1,180 @@
+/**
+ * lux-icon — SVG icon component.
+ *
+ * Three modes:
+ *   1. Named icon: <lux-icon name="check"></lux-icon>
+ *   2. Custom SVG: <lux-icon><svg>...</svg></lux-icon>
+ *   3. Text fallback: <lux-icon name="?"</lux-icon>
+ *
+ * Props:
+ *   name   — icon name from registry
+ *   size   — icon size (default 1em)
+ *   color  — icon color (default 'currentColor')
+ */
+
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+// ─── Built-in icon registry ───
+const icons = {
+    check: '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>',
+    content_copy:
+        '<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>',
+    close: '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>',
+    search: '<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>',
+    menu: '<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>',
+    arrow_back: '<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>',
+    arrow_forward: '<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>',
+    add: '<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>',
+    remove: '<path d="M19 13H5v-2h14v2z"/>',
+    edit: '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>',
+    delete: '<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>',
+    home: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
+    settings:
+        '<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>',
+    star: '<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>',
+    heart: '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>',
+    share: '<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>',
+    link: '<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.1 0-2-.9-2-2s.9-2 2-2h4v-1.9H7c-2.76 0-5 2.24-5 5zm7-3h4v1.9h-4V9zm3.9 6h-4v1.9h4c1.1 0 2-.9 2-2s-.9-2-2-2h-4v-1.9h4c2.76 0 5 2.24 5 5s-2.24 5-5 5z"/>',
+    download: '<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>',
+    upload: '<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>',
+    refresh:
+        '<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.73 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>',
+    more_vert:
+        '<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>',
+    more_horiz:
+        '<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>',
+    expand_more: '<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>',
+    expand_less: '<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/>',
+    visibility:
+        '<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>',
+    visibility_off:
+        '<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.12 2.12C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.21.53-2.76 0-5-2.24-5-5 0-.8.2-1.54.53-2.21zm4.21-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>',
+    info: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>',
+    warning: '<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>',
+    error_outline:
+        '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>',
+    help_outline:
+        '<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 1-2.5 3-5V8c-1.1 0-2-.9-2-2zm0 10c-.59 0-1-.51-1-1s.41-1 1-1 1 .51 1 1-.41 1-1 1z"/>',
+    light_mode:
+        '<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>',
+    dark_mode:
+        '<path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>',
+    // Layout & navigation
+    view_quilt:
+        '<path d="M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"/>',
+    code: '<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>',
+    toggle_on:
+        '<path d="M6 7h12a5 5 0 010 10H6a5 5 0 010-10z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="18" cy="12" r="3"/>',
+    swap_vert: '<path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/>',
+    arrow_down: '<path d="M3 8l9 9 9-9H3z"/>',
+    language:
+        '<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>',
+    smart_button:
+        '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>',
+    table_chart:
+        '<path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/>',
+    // Switch page
+    check_circle:
+        '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>',
+    cancel: '<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>',
+    pause: '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>',
+    play: '<path d="M8 5v14l11-7z"/>',
+    stop: '<path d="M6 6h12v12H6z"/>',
+    save: '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>',
+    folder: '<path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>',
+    file: '<path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/>',
+    email: '<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>',
+    person: '<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>',
+    lock: '<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>',
+    filter: '<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>',
+    sort: '<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>',
+    calendar:
+        '<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>',
+    map: '<path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/>',
+    camera: '<path d="M12 12m-3.2 0a3.2 3.2 0 1 0 6.4 0a3.2 3.2 0 1 0-6.4 0M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>',
+    bookmark: '<path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>',
+    clock: '<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>',
+    chat: '<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>',
+    phone: '<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>',
+    notification:
+        '<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>',
+    cloud: '<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/>',
+    download_done: '<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>',
+    github: '<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>',
+    npm: '<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/>',
+};
+
+function registerIcons(map) {
+    Object.assign(icons, map);
+}
+
+const styles = css`
+    :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        fill: currentColor;
+        flex-shrink: 0;
+    }
+
+    :host([size]) {
+        width: var(--icon-size);
+        height: var(--icon-size);
+    }
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+`;
+
+class LuxIcon extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        name: { type: String, reflect: true },
+        size: { type: String, reflect: true },
+        color: { type: String, reflect: true },
+    };
+
+    constructor() {
+        super();
+    }
+
+    updated() {
+        if (this.size) {
+            this.style.setProperty('--icon-size', this._parseSize(this.size));
+        }
+        if (this.color) {
+            this.style.color = this.color;
+        }
+        const svg = this.renderRoot.querySelector('.icon-svg');
+        if (svg && this.name && icons[this.name]) {
+            svg.innerHTML = icons[this.name];
+        }
+    }
+
+    _parseSize(val) {
+        if (val == null) return '';
+        if (typeof val === 'number') return val + 'px';
+        if (/^\d+(\.\d+)?$/.test(val)) return val + 'px';
+        return val;
+    }
+
+    render() {
+        if (this.childNodes.length > 0) {
+            return html`<slot></slot>`;
+        }
+        if (this.name && icons[this.name]) {
+            return html`<svg class="icon-svg" viewBox="0 0 24 24"></svg>`;
+        }
+        return html`<span style="font-size:0.75em;font-weight:600">${this.name || '?'}</span>`;
+    }
+}
+
+registerComponent('lux-icon', LuxIcon);
+export { LuxIcon, registerIcons, icons };
+export default LuxIcon;

package/src/components/lux-input/index.js

@@ -0,0 +1,363 @@
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+const CLEAR_SVG = html`<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor">
+    <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+    />
+</svg>`;
+
+const styles = css`
+    :host {
+        display: inline-block;
+        width: 100%;
+        font-size: 13px;
+        vertical-align: middle;
+    }
+
+    .wrap {
+        display: flex;
+        align-items: center;
+        gap: 0;
+        border: 1px solid rgb(var(--lux-border, 226 232 240));
+        border-radius: var(--lux-radius, 6px);
+        background: rgb(var(--lux-card, 255 255 255));
+        transition:
+            border-color 0.2s,
+            box-shadow 0.2s;
+        overflow: hidden;
+    }
+
+    .wrap:hover {
+        border-color: rgb(var(--lux-primary-400, 108 92 231) / 40%);
+    }
+
+    :host([focused]) .wrap {
+        border-color: rgb(var(--lux-primary-400, 108 92 231));
+        box-shadow: 0 0 0 2px rgb(var(--lux-primary-400, 108 92 231) / 15%);
+    }
+
+    :host([has-error]) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+
+    :host([has-error][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-error, 239 68 68) / 15%);
+    }
+
+    /* Status colors */
+    :host([status='success']) .wrap {
+        border-color: rgb(var(--lux-success, 34 197 94));
+    }
+    :host([status='success'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-success, 34 197 94) / 15%);
+    }
+
+    :host([status='info']) .wrap {
+        border-color: rgb(var(--lux-info, 59 130 246));
+    }
+    :host([status='info'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-info, 59 130 246) / 15%);
+    }
+
+    :host([status='warning']) .wrap {
+        border-color: rgb(var(--lux-warning, 234 179 8));
+    }
+    :host([status='warning'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-warning, 234 179 8) / 15%);
+    }
+
+    :host([status='error']) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+    :host([status='error'][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-error, 239 68 68) / 15%);
+    }
+
+    /* Regex invalid (when no explicit status) */
+    :host([regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+    :host([regex-invalid][focused]) .wrap {
+        box-shadow: 0 0 0 2px rgb(var(--lux-error, 239 68 68) / 15%);
+    }
+    :host([data-regex-status='success'][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-success, 34 197 94));
+    }
+    :host([data-regex-status='info'][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-info, 59 130 246));
+    }
+    :host([data-regex-status='warning'][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-warning, 234 179 8));
+    }
+    :host([data-regex-status='error'][regex-invalid]) .wrap,
+    :host([data-regex-status=''][regex-invalid]) .wrap {
+        border-color: rgb(var(--lux-error, 239 68 68));
+    }
+
+    :host([disabled]) .wrap {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    .prefix,
+    .suffix {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        color: rgb(var(--lux-text, 15 23 42));
+        padding: 0;
+        font-size: inherit;
+        line-height: 1;
+        user-select: none;
+    }
+
+    .prefix {
+        padding-left: 6px;
+    }
+    .suffix {
+        padding-right: 6px;
+    }
+
+    input {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: rgb(var(--lux-text, 15 23 42));
+        font-size: inherit;
+        font-family: inherit;
+        padding: 6px 8px;
+        line-height: 1.5;
+        width: 100%;
+    }
+
+    input[type='number'] {
+        -moz-appearance: textfield;
+    }
+
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        opacity: 1;
+        height: auto;
+    }
+
+    input::placeholder {
+        color: rgb(var(--lux-text-muted, 148 163 184));
+    }
+
+    input:disabled {
+        cursor: not-allowed;
+    }
+
+    .clear-btn {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: rgb(var(--lux-text-muted, 148 163 184));
+        cursor: pointer;
+        padding: 0;
+        transition:
+            color 0.15s,
+            background 0.15s;
+    }
+
+    .clear-btn:hover {
+        color: rgb(var(--lux-text, 15 23 42));
+        background: rgb(var(--lux-hover, 0 0 0 / 5%));
+    }
+
+    :host([clearable][has-value]:hover) .clear-btn,
+    :host([clearable][focused]) .clear-btn {
+        display: inline-flex;
+    }
+
+    .error-msg {
+        display: none;
+        margin-top: 4px;
+        font-size: 12px;
+        color: rgb(var(--lux-error, 239 68 68));
+        line-height: 1.4;
+    }
+
+    :host([has-error]) .error-msg {
+        display: block;
+    }
+
+    /* Size: sm */
+    :host([size='sm']) .wrap {
+        border-radius: var(--lux-radius-sm, 4px);
+    }
+    :host([size='sm']) input {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+    :host([size='sm']) .prefix {
+        padding-left: 4px;
+    }
+    :host([size='sm']) .suffix {
+        padding-right: 4px;
+    }
+
+    /* Size: lg */
+    :host([size='lg']) .wrap {
+        border-radius: var(--lux-radius, 6px);
+    }
+    :host([size='lg']) input {
+        padding: 10px 12px;
+        font-size: 15px;
+    }
+    :host([size='lg']) .prefix {
+        padding-left: 10px;
+    }
+    :host([size='lg']) .suffix {
+        padding-right: 10px;
+    }
+`;
+
+class LuxInput extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        value: { type: String, reflect: true },
+        placeholder: { type: String, reflect: true },
+        type: { type: String, reflect: true },
+        disabled: { type: Boolean, reflect: true },
+        clearable: { type: Boolean, reflect: true },
+        error: { type: String, reflect: true },
+        size: { type: String, reflect: true },
+        status: { type: String, reflect: true },
+        regex: { type: String, reflect: true },
+        regexStatus: { type: String, attribute: 'regex-status', reflect: true },
+    };
+
+    constructor() {
+        super();
+        this.value = '';
+        this.placeholder = '';
+        this.type = 'text';
+        this.disabled = false;
+        this.clearable = false;
+        this.error = '';
+        this.status = '';
+        this.regex = '';
+        this.regexStatus = '';
+        this._onDocClickBound = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this._updateHasValue();
+    }
+
+    updated(changed) {
+        if (changed.has('value')) {
+            this._updateHasValue();
+            this._validateRegex();
+        }
+        if (changed.has('error')) {
+            if (this.error) {
+                this.setAttribute('has-error', '');
+            } else {
+                this.removeAttribute('has-error');
+            }
+        }
+        if (changed.has('status') || changed.has('regex') || changed.has('regexStatus')) {
+            this._validateRegex();
+        }
+    }
+
+    _updateHasValue() {
+        if (this.value) {
+            this.setAttribute('has-value', '');
+        } else {
+            this.removeAttribute('has-value');
+        }
+    }
+
+    _onInput(e) {
+        e.stopPropagation();
+        this.value = e.target.value;
+        this._validateRegex();
+        this.emit('input', { value: this.value });
+    }
+
+    _onChange(e) {
+        this.value = e.target.value;
+        this._validateRegex();
+        this.emit('change', { value: this.value });
+    }
+
+    _validateRegex() {
+        if (!this.regex || this.status) {
+            this.removeAttribute('regex-invalid');
+            this.removeAttribute('data-regex-status');
+            return;
+        }
+        if (!this.value) {
+            this.removeAttribute('regex-invalid');
+            this.removeAttribute('data-regex-status');
+            return;
+        }
+        const re = new RegExp(this.regex);
+        if (re.test(String(this.value))) {
+            this.removeAttribute('regex-invalid');
+            this.removeAttribute('data-regex-status');
+        } else {
+            this.setAttribute('regex-invalid', '');
+            this.setAttribute('data-regex-status', this.regexStatus || 'error');
+        }
+    }
+
+    _onFocus() {
+        this.setAttribute('focused', '');
+        this.emit('focus');
+    }
+
+    _onBlur() {
+        this.removeAttribute('focused');
+        this.emit('blur');
+    }
+
+    _clear() {
+        this.value = '';
+        this.removeAttribute('regex-invalid');
+        this.emit('input', { value: '' });
+        this.emit('clear');
+        const input = this.renderRoot.querySelector('input');
+        if (input) input.focus();
+    }
+
+    render() {
+        return html`
+            <div class="wrap">
+                <slot class="prefix" name="prefix"></slot>
+                <input
+                    .type=${this.type}
+                    .value=${this.value}
+                    .placeholder=${this.placeholder}
+                    .disabled=${this.disabled}
+                    @input=${(e) => this._onInput(e)}
+                    @change=${(e) => this._onChange(e)}
+                    @focus=${() => this._onFocus()}
+                    @blur=${() => this._onBlur()}
+                />
+                <span class="clear-btn" @click=${this._clear}>${CLEAR_SVG}</span>
+                <slot class="suffix" name="suffix"></slot>
+            </div>
+            ${this.error ? html`<span class="error-msg">${this.error}</span>` : ''}
+        `;
+    }
+}
+
+registerComponent('lux-input', LuxInput);
+export default LuxInput;