@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-glass-toolbar.js

@@ -0,0 +1,178 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, customElement, css, } from '@design.estate/dees-element';
+import { sioElementStyles, sioToolbarGlass } from './tokens.js';
+import './sio-icon.js';
+/**
+ * sio-glass-toolbar — the 44px liquid-glass command bar that tops every
+ * social.io pane (v7 prototype: SocialIODesktop.jsx thread/list toolbars,
+ * styles/socialio.css `.sio-toolbar-glass`).
+ *
+ * The bar is deliberately chromeless: it only provides the toolbar glass
+ * recipe (blur 28px, saturate 180%) with the 0.5px bottom hairline and a
+ * three-region layout. Content flows into the `start` (leading actions),
+ * `center` (title / context) and `end` (trailing actions, search) slots.
+ */
+let SioGlassToolbar = (() => {
+    let _classDecorators = [customElement('sio-glass-toolbar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    var SioGlassToolbar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioGlassToolbar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div
+      style="display: flex; flex-direction: column; gap: 24px; max-width: 720px; font-family: var(--sio-font-sf); color: var(--sio-label);"
+    >
+      <!-- desktop thread pane: leading actions · trailing search -->
+      <div
+        style="position: relative; height: 176px; border-radius: 14px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator); background: var(--sio-surface);"
+      >
+        <div style="padding: 60px 28px 0;">
+          <div style="font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.18;">
+            Contract draft — comments by Friday?
+          </div>
+          <div style="margin-top: 8px; font-size: 12px; color: var(--sio-label-3);">
+            Dr. Sabine Vogel · 3 participants · 4 messages
+          </div>
+        </div>
+        <sio-glass-toolbar style="position: absolute; top: 0; left: 0; right: 0;">
+          <sio-icon slot="start" icon="archive" size="15" style="padding: 5px 8px; color: var(--sio-label-3);"></sio-icon>
+          <sio-icon slot="start" icon="clock" size="15" style="padding: 5px 8px; color: var(--sio-label-3);"></sio-icon>
+          <sio-icon slot="start" icon="trash" size="15" style="padding: 5px 8px; color: var(--sio-label-3);"></sio-icon>
+          <sio-icon slot="start" icon="reply" size="15" style="padding: 5px 8px; color: var(--sio-label-3);"></sio-icon>
+          <sio-icon slot="start" icon="forward" size="15" style="padding: 5px 8px; color: var(--sio-label-3);"></sio-icon>
+          <span
+            slot="end"
+            style="display: inline-flex; align-items: center; gap: 6px; width: 170px; padding: 4px 10px; border-radius: 8px; background: var(--sio-surface-2); color: var(--sio-label-3); font-size: 12px;"
+          >
+            <sio-icon icon="search" size="12"></sio-icon>
+            <span style="flex: 1;">Search</span>
+            <span
+              style="padding: 1px 5px; border-radius: 4px; background: var(--sio-surface-2); border: var(--sio-hairline) solid var(--sio-separator); font-family: var(--sio-font-mono); font-size: 11px;"
+              >⌘F</span
+            >
+          </span>
+        </sio-glass-toolbar>
+      </div>
+
+      <!-- centered-title variant (mobile detail header) -->
+      <div
+        style="position: relative; height: 132px; border-radius: 14px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator); background: var(--sio-bg);"
+      >
+        <div style="padding: 58px 20px 0; font-size: 15px; line-height: 1.45; color: var(--sio-label-2);">
+          Deploy is queued behind the cert renewal — ETA 15:40. I'll ping this thread the second staging is green.
+        </div>
+        <sio-glass-toolbar style="position: absolute; top: 0; left: 0; right: 0;">
+          <span
+            slot="start"
+            style="display: inline-flex; align-items: center; gap: 2px; color: var(--sio-tint); font-size: 15px;"
+          >
+            <sio-icon icon="chevron-left" size="18"></sio-icon>
+            Chats
+          </span>
+          <span slot="center" style="font-size: 15px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap;">
+            Orbit · launch week
+          </span>
+          <sio-icon slot="end" icon="phone" size="18" style="color: var(--sio-ch-chats);"></sio-icon>
+          <sio-icon slot="end" icon="video" size="18" style="color: var(--sio-ch-chats);"></sio-icon>
+        </sio-glass-toolbar>
+      </div>
+    </div>
+  `;
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+
+      .toolbar {
+        ${sioToolbarGlass}
+        height: 44px;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        align-items: center;
+        column-gap: 8px;
+        padding: 0 14px;
+      }
+
+      .region {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+
+      .start {
+        justify-content: flex-start;
+        gap: 2px;
+      }
+
+      .center {
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      .end {
+        justify-content: flex-end;
+        gap: 8px;
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div class="toolbar" part="toolbar">
+        <div class="region start"><slot name="start"></slot></div>
+        <div class="region center"><slot name="center"></slot></div>
+        <div class="region end"><slot name="end"></slot></div>
+      </div>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioGlassToolbar = _classThis;
+})();
+export { SioGlassToolbar };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWdsYXNzLXRvb2xiYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWdsYXNzLXRvb2xiYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLGFBQWEsRUFDYixHQUFHLEdBRUosTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ2hFLE9BQU8sZUFBZSxDQUFDO0FBUXZCOzs7Ozs7Ozs7R0FTRztJQUVVLGVBQWU7NEJBRDNCLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQzs7OztzQkFDRSxXQUFXOytCQUFuQixTQUFRLFdBQVc7Ozs7WUFBaEQsNktBZ0hDOzs7O1FBL0dRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTJEOUIsQ0FBQztRQUVLLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7VUFNRyxlQUFlOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0E4QnBCO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7Ozs7O0tBTVYsQ0FBQztRQUNKLENBQUM7O1lBL0dVLHVEQUFlOzs7OztTQUFmLGVBQWUifQ==

package/dist_ts_web/elements/sio-icon.d.ts

@@ -18,6 +18,7 @@ export declare class SioIcon extends DeesElement {
     private lastStrokeWidth;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    private resolveIconNode;
     updated(): void;
     disconnectedCallback(): Promise<void>;
 }

package/dist_ts_web/elements/sio-icon.js

@@ -1,127 +1,287 @@
-import { DeesElement, html, property, customElement, cssManager, css, } from '@design.estate/dees-element';
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css, } from '@design.estate/dees-element';
 import * as lucideIcons from 'lucide';
-import { createElement } from 'lucide';
-@customElement('sio-icon')
-export class SioIcon extends DeesElement {
-    static demo = () => html `
-    <div style="display: flex; gap: 16px; align-items: center;">
-      <sio-icon icon="search"></sio-icon>
-      <sio-icon icon="message-square" color="#3b82f6"></sio-icon>
-      <sio-icon icon="x" size="32"></sio-icon>
-      <sio-icon icon="send" strokeWidth="3"></sio-icon>
+import { Archive, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Download, FileText, Forward, Grid2x2, Mail, MessageCircle, Mic, MicOff, MonitorUp, Paperclip, Pencil, Phone, PhoneOff, Plus, Reply, Search, Send, Sparkles, Star, Trash2, Users, Video, X, createElement, } from 'lucide';
+import { sioElementStyles } from './tokens.js';
+/**
+ * v7 icon aliases — the design's SF-symbol-flavored names mapped onto lucide.
+ * Anything not listed here falls through to the PascalCase lucide lookup,
+ * so every lucide icon stays addressable by its kebab-case name.
+ */
+const sioIconAliases = {
+    // channels
+    envelope: Mail,
+    mail: Mail,
+    'message-circle': MessageCircle,
+    phone: Phone,
+    'file-text': FileText,
+    // unified feed / triage
+    'grid-2x2': Grid2x2,
+    grid: Grid2x2,
+    sparkles: Sparkles,
+    star: Star,
+    paperclip: Paperclip,
+    archive: Archive,
+    clock: Clock,
+    trash: Trash2,
+    reply: Reply,
+    forward: Forward,
+    // composer / navigation
+    search: Search,
+    send: Send,
+    plus: Plus,
+    chevron: ChevronRight,
+    'chevron-left': ChevronLeft,
+    'chevron-right': ChevronRight,
+    'chevron-up': ChevronUp,
+    'chevron-down': ChevronDown,
+    // calls / meetings
+    mic: Mic,
+    'mic-off': MicOff,
+    video: Video,
+    'monitor-up': MonitorUp,
+    users: Users,
+    'phone-off': PhoneOff,
+    // generic
+    check: Check,
+    x: X,
+    download: Download,
+    pencil: Pencil,
+};
+let SioIcon = (() => {
+    let _classDecorators = [customElement('sio-icon')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _strokeWidth_decorators;
+    let _strokeWidth_initializers = [];
+    let _strokeWidth_extraInitializers = [];
+    var SioIcon = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _icon_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: Number })];
+            _color_decorators = [property({ type: String })];
+            _strokeWidth_decorators = [property({ type: Number })];
+            __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(this, null, _strokeWidth_decorators, { kind: "accessor", name: "strokeWidth", static: false, private: false, access: { has: obj => "strokeWidth" in obj, get: obj => obj.strokeWidth, set: (obj, value) => { obj.strokeWidth = value; } }, metadata: _metadata }, _strokeWidth_initializers, _strokeWidth_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioIcon = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px; font-family: var(--sio-font-sf); color: var(--sio-label);">
+      <div style="display: flex; gap: 16px; align-items: center;">
+        <sio-icon icon="envelope" style="color: var(--sio-ch-mail);"></sio-icon>
+        <sio-icon icon="message-circle" style="color: var(--sio-ch-chats);"></sio-icon>
+        <sio-icon icon="phone" style="color: var(--sio-ch-calls);"></sio-icon>
+        <sio-icon icon="file-text" style="color: var(--sio-ch-letters);"></sio-icon>
+        <sio-icon icon="grid-2x2" style="color: var(--sio-tint);"></sio-icon>
+        <sio-icon icon="sparkles" style="color: var(--sio-tint);"></sio-icon>
+      </div>
+      <div style="display: flex; gap: 16px; align-items: center; color: var(--sio-label-3);">
+        <sio-icon icon="star" size="18"></sio-icon>
+        <sio-icon icon="paperclip" size="18"></sio-icon>
+        <sio-icon icon="archive" size="18"></sio-icon>
+        <sio-icon icon="clock" size="18"></sio-icon>
+        <sio-icon icon="reply" size="18"></sio-icon>
+        <sio-icon icon="forward" size="18"></sio-icon>
+        <sio-icon icon="trash" size="18" style="color: var(--sio-red);"></sio-icon>
+      </div>
+      <div style="display: flex; gap: 16px; align-items: center; color: var(--sio-label-2);">
+        <sio-icon icon="mic" size="20"></sio-icon>
+        <sio-icon icon="video" size="20"></sio-icon>
+        <sio-icon icon="monitor-up" size="20"></sio-icon>
+        <sio-icon icon="users" size="20"></sio-icon>
+        <sio-icon icon="phone-off" size="20" style="color: var(--sio-red);"></sio-icon>
+        <sio-icon icon="send" size="20" style="color: var(--sio-tint);"></sio-icon>
+      </div>
     </div>
   `;
-    @property({ type: String })
-    accessor icon;
-    @property({ type: Number })
-    accessor size = 24;
-    @property({ type: String })
-    accessor color = 'currentColor';
-    @property({ type: Number })
-    accessor strokeWidth = 2;
-    // Cache for rendered icons
-    static iconCache = new Map();
-    static MAX_CACHE_SIZE = 100;
-    // Track last rendered properties to avoid unnecessary updates
-    lastIcon = null;
-    lastSize = null;
-    lastColor = null;
-    lastStrokeWidth = null;
-    static styles = [
-        cssManager.defaultStyles,
-        css `
+        #icon_accessor_storage = __runInitializers(this, _icon_initializers, '');
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _size_initializers, 24));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #color_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _color_initializers, 'currentColor'));
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #strokeWidth_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _strokeWidth_initializers, 1.75));
+        get strokeWidth() { return this.#strokeWidth_accessor_storage; }
+        set strokeWidth(value) { this.#strokeWidth_accessor_storage = value; }
+        // Cache for rendered icons
+        static iconCache = new Map();
+        static MAX_CACHE_SIZE = 100;
+        // Track last rendered properties to avoid unnecessary updates
+        lastIcon = (__runInitializers(this, _strokeWidth_extraInitializers), null);
+        lastSize = null;
+        lastColor = null;
+        lastStrokeWidth = null;
+        static styles = [
+            ...sioElementStyles,
+            css `
       :host {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         line-height: 1;
         vertical-align: middle;
+        color: currentColor;
       }
-      
+
       #iconContainer {
         display: flex;
         align-items: center;
         justify-content: center;
       }
-      
+
       #iconContainer svg {
         display: block;
         width: 100%;
         height: 100%;
       }
     `,
-    ];
-    render() {
-        return html `
+        ];
+        render() {
+            return html `
       <div id="iconContainer" style="width: ${this.size}px; height: ${this.size}px;"></div>
     `;
-    }
-    updated() {
-        // Check if we need to update
-        if (this.lastIcon === this.icon &&
-            this.lastSize === this.size &&
-            this.lastColor === this.color &&
-            this.lastStrokeWidth === this.strokeWidth) {
-            return;
-        }
-        // Update tracking properties
-        this.lastIcon = this.icon;
-        this.lastSize = this.size;
-        this.lastColor = this.color;
-        this.lastStrokeWidth = this.strokeWidth;
-        const container = this.shadowRoot?.querySelector('#iconContainer');
-        if (!container || !this.icon)
-            return;
-        // Clear container
-        container.innerHTML = '';
-        // Create cache key
-        const cacheKey = `${this.icon}:${this.size}:${this.color}:${this.strokeWidth}`;
-        // Check cache
-        if (SioIcon.iconCache.has(cacheKey)) {
-            container.innerHTML = SioIcon.iconCache.get(cacheKey);
-            return;
         }
-        try {
+        resolveIconNode() {
+            const iconName = this.icon
+                .replace(/^lucide:/, '')
+                .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+                .toLowerCase();
+            const aliasNode = sioIconAliases[iconName];
+            if (aliasNode) {
+                return aliasNode;
+            }
             // Convert icon name to PascalCase (e.g., 'message-square' -> 'MessageSquare')
-            const pascalCaseName = this.icon
+            const pascalCaseName = iconName
                 .split('-')
-                .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
                 .join('');
-            const iconComponent = lucideIcons[pascalCaseName];
-            if (!iconComponent) {
-                console.warn(`Lucide icon '${pascalCaseName}' not found`);
+            const lucideNode = lucideIcons[pascalCaseName];
+            if (Array.isArray(lucideNode)) {
+                return lucideNode;
+            }
+            return undefined;
+        }
+        updated() {
+            // Check if we need to update
+            if (this.lastIcon === this.icon &&
+                this.lastSize === this.size &&
+                this.lastColor === this.color &&
+                this.lastStrokeWidth === this.strokeWidth) {
                 return;
             }
-            // Create the icon element
-            const svgElement = createElement(iconComponent, {
-                size: this.size,
-                color: this.color,
-                strokeWidth: this.strokeWidth,
-            });
-            if (svgElement) {
-                // Cache the result
-                const svgString = svgElement.outerHTML;
-                SioIcon.iconCache.set(cacheKey, svgString);
-                // Limit cache size
-                if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) {
-                    const firstKey = SioIcon.iconCache.keys().next().value;
-                    SioIcon.iconCache.delete(firstKey);
+            // Update tracking properties
+            this.lastIcon = this.icon;
+            this.lastSize = this.size;
+            this.lastColor = this.color;
+            this.lastStrokeWidth = this.strokeWidth;
+            const container = this.shadowRoot?.querySelector('#iconContainer');
+            if (!container || !this.icon)
+                return;
+            // Clear container
+            container.innerHTML = '';
+            // Create cache key
+            const cacheKey = `${this.icon}:${this.size}:${this.color}:${this.strokeWidth}`;
+            // Check cache
+            if (SioIcon.iconCache.has(cacheKey)) {
+                container.innerHTML = SioIcon.iconCache.get(cacheKey);
+                return;
+            }
+            try {
+                const iconNode = this.resolveIconNode();
+                if (!iconNode) {
+                    console.warn(`sio-icon: lucide icon '${this.icon}' not found`);
+                    return;
+                }
+                // Create the icon element
+                const svgElement = createElement(iconNode, {
+                    size: this.size,
+                    color: this.color,
+                    strokeWidth: this.strokeWidth,
+                });
+                if (svgElement) {
+                    svgElement.setAttribute('aria-hidden', 'true');
+                    // Cache the result
+                    const svgString = svgElement.outerHTML;
+                    SioIcon.iconCache.set(cacheKey, svgString);
+                    // Limit cache size
+                    if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) {
+                        const firstKey = SioIcon.iconCache.keys().next().value;
+                        SioIcon.iconCache.delete(firstKey);
+                    }
+                    // Append to container
+                    container.appendChild(svgElement);
                 }
-                // Append to container
-                container.appendChild(svgElement);
+            }
+            catch (error) {
+                console.error(`Error rendering icon ${this.icon}:`, error);
             }
         }
-        catch (error) {
-            console.error(`Error rendering icon ${this.icon}:`, error);
+        async disconnectedCallback() {
+            await super.disconnectedCallback();
+            // Clear references
+            this.lastIcon = null;
+            this.lastSize = null;
+            this.lastColor = null;
+            this.lastStrokeWidth = null;
         }
-    }
-    async disconnectedCallback() {
-        await super.disconnectedCallback();
-        // Clear references
-        this.lastIcon = null;
-        this.lastSize = null;
-        this.lastColor = null;
-        this.lastStrokeWidth = null;
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWljb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWljb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxJQUFJLEVBQ0osUUFBUSxFQUNSLGFBQWEsRUFDYixVQUFVLEVBQ1YsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFdBQVcsTUFBTSxRQUFRLENBQUM7QUFDdEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFFBQVEsQ0FBQztBQVF2QyxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUM7QUFDMUIsTUFBTSxPQUFPLE9BQVEsU0FBUSxXQUFXO0lBQy9CLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7O0dBTzlCLENBQUM7SUFFRixDQUFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztJQUNwQixRQUFRLENBQUMsSUFBSSxDQUFTO0lBRTdCLENBQUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO0lBQ3BCLFFBQVEsQ0FBQyxJQUFJLEdBQVcsRUFBRSxDQUFDO0lBRWxDLENBQUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO0lBQ3BCLFFBQVEsQ0FBQyxLQUFLLEdBQVcsY0FBYyxDQUFDO0lBRS9DLENBQUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO0lBQ3BCLFFBQVEsQ0FBQyxXQUFXLEdBQVcsQ0FBQyxDQUFDO0lBRXhDLDJCQUEyQjtJQUNuQixNQUFNLENBQUMsU0FBUyxHQUFHLElBQUksR0FBRyxFQUFrQixDQUFDO0lBQzdDLE1BQU0sQ0FBVSxjQUFjLEdBQUcsR0FBRyxDQUFDO0lBRTdDLDhEQUE4RDtJQUN0RCxRQUFRLEdBQWtCLElBQUksQ0FBQztJQUMvQixR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
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioIcon = _classThis;
+})();
+export { SioIcon };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWljb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWljb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFdBQVcsTUFBTSxRQUFRLENBQUM7QUFDdEMsT0FBTyxFQUNMLE9BQU8sRUFDUCxLQUFLLEVBQ0wsV0FBVyxFQUNYLFdBQVcsRUFDWCxZQUFZLEVBQ1osU0FBUyxFQUNULEtBQUssRUFDTCxRQUFRLEVBQ1IsUUFBUSxFQUNSLE9BQU8sRUFDUCxPQUFPLEVBQ1AsSUFBSSxFQUNKLGFBQWEsRUFDYixHQUFHLEVBQ0gsTUFBTSxFQUNOLFNBQVMsRUFDVCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxNQUFNLEVBQ04sSUFBSSxFQUNKLFFBQVEsRUFDUixJQUFJLEVBQ0osTUFBTSxFQUNOLEtBQUssRUFDTCxLQUFLLEVBQ0wsQ0FBQyxFQUNELGFBQWEsR0FFZCxNQUFNLFFBQVEsQ0FBQztBQUNoQixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFRL0M7Ozs7R0FJRztBQUNILE1BQU0sY0FBYyxHQUE2QjtJQUMvQyxXQUFXO0lBQ1gsUUFBUSxFQUFFLElBQUk7SUFDZCxJQUFJLEVBQUUsSUFBSTtJQUNWLGdCQUFnQixFQUFFLGFBQWE7SUFDL0IsS0FBSyxFQUFFLEtBQUs7SUFDWixXQUFXLEVBQUUsUUFBUTtJQUNyQix3QkFBd0I7SUFDeEIsVUFBVSxFQUFFLE9BQU87SUFDbkIsSUFBSSxFQUFFLE9BQU87SUFDYixRQUFRLEVBQUUsUUFBUTtJQUNsQixJQUFJLEVBQUUsSUFB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

package/dist_ts_web/elements/sio-image-lightbox.d.ts

@@ -1,11 +1,11 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
 export interface ILightboxFile {
     url: string;
     name: string;
     size?: number;
     type?: string;
 }
-export type ILightboxImage = ILightboxFile;
 declare global {
     interface HTMLElementTagNameMap {
         'sio-image-lightbox': SioImageLightbox;
@@ -15,8 +15,7 @@ export declare class SioImageLightbox extends DeesElement {
     static demo: () => TemplateResult<1>;
     accessor isOpen: boolean;
     accessor file: ILightboxFile | null;
-    get image(): ILightboxFile | null;
-    set image(value: ILightboxFile | null);
+    private closeCleanupTimeout;
     private accessor fileLoaded;
     private accessor scale;
     private accessor translateX;
@@ -27,7 +26,7 @@ export declare class SioImageLightbox extends DeesElement {
     static styles: import("@design.estate/dees-element").CSSResult[];
     private isPDF;
     render(): TemplateResult;
-    open(file: ILightboxFile | ILightboxImage): Promise<void>;
+    open(file: ILightboxFile): Promise<void>;
     private close;
     private handleKeyDown;
     private zoomIn;