@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-dropdown-menu.d.ts

@@ -1,4 +1,6 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+import './sio-button.js';
 export interface IDropdownMenuItem {
     id: string;
     label: string;
@@ -17,16 +19,14 @@ export declare class SioDropdownMenu extends DeesElement {
     accessor items: IDropdownMenuItem[];
     accessor align: 'left' | 'right';
     private accessor isOpen;
-    private documentClickHandler;
-    private scrollHandler;
-    private resizeHandler;
+    private documentClickHandler?;
+    private resizeHandler?;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     private toggleDropdown;
-    private updateDropdownPosition;
     private handleItemClick;
-    private addDocumentListener;
-    private removeDocumentListener;
+    private addDocumentListeners;
+    private removeDocumentListeners;
     disconnectedCallback(): Promise<void>;
     close(): void;
 }

package/dist_ts_web/elements/sio-dropdown-menu.js

@@ -1,41 +1,113 @@
-import { DeesElement, property, html, customElement, cssManager, css, unsafeCSS, state, } from '@design.estate/dees-element';
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions } from './00tokens.js';
-import { fontFamilies } from './00fonts.js';
-@customElement('sio-dropdown-menu')
-export class SioDropdownMenu extends DeesElement {
-    static demo = () => html `
-    <div style="position: relative; height: 200px; display: flex; justify-content: center; padding-top: 50px;">
-      <sio-dropdown-menu .items=${[
-        { id: 'mute', label: 'Mute notifications', icon: 'bell-off' },
-        { id: 'pin', label: 'Pin conversation', icon: 'pin' },
-        { id: 'divider1', label: '', divider: true },
-        { id: 'export', label: 'Export chat', icon: 'download' },
-        { id: 'clear', label: 'Clear history', icon: 'trash-2', destructive: true }
-    ]}>
-        <sio-button type="ghost" size="sm">
-          <sio-icon icon="more-vertical" size="16"></sio-icon>
+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, property, html, customElement, css, state, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+import './sio-button.js';
+let SioDropdownMenu = (() => {
+    let _classDecorators = [customElement('sio-dropdown-menu')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _items_decorators;
+    let _items_initializers = [];
+    let _items_extraInitializers = [];
+    let _align_decorators;
+    let _align_initializers = [];
+    let _align_extraInitializers = [];
+    let _isOpen_decorators;
+    let _isOpen_initializers = [];
+    let _isOpen_extraInitializers = [];
+    var SioDropdownMenu = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _items_decorators = [property({ type: Array })];
+            _align_decorators = [property({ type: String })];
+            _isOpen_decorators = [state()];
+            __esDecorate(this, null, _items_decorators, { kind: "accessor", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
+            __esDecorate(this, null, _align_decorators, { kind: "accessor", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+            __esDecorate(this, null, _isOpen_decorators, { kind: "accessor", name: "isOpen", static: false, private: false, access: { has: obj => "isOpen" in obj, get: obj => obj.isOpen, set: (obj, value) => { obj.isOpen = value; } }, metadata: _metadata }, _isOpen_initializers, _isOpen_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioDropdownMenu = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div
+      style="position: relative; height: 320px; display: flex; justify-content: center; padding-top: 40px; background: var(--sio-bg); border-radius: 14px;"
+    >
+      <sio-dropdown-menu
+        .items=${[
+            { id: 'reply', label: 'Reply', icon: 'reply' },
+            { id: 'forward', label: 'Forward', icon: 'forward' },
+            { id: 'divider1', label: '', divider: true },
+            { id: 'later', label: 'Move to Later', icon: 'clock' },
+            { id: 'done', label: 'Mark as Done', icon: 'check' },
+            { id: 'pin', label: 'Pin conversation', icon: 'pin' },
+            { id: 'mute', label: 'Mute notifications', icon: 'bell-off', disabled: true },
+            { id: 'divider2', label: '', divider: true },
+            { id: 'block', label: 'Block sender', icon: 'user-x', destructive: true },
+            { id: 'delete', label: 'Delete thread', icon: 'trash-2', destructive: true },
+        ]}
+      >
+        <sio-button type="outline" size="sm">
+          <sio-icon icon="ellipsis" size="15"></sio-icon>
+          Thread actions
         </sio-button>
       </sio-dropdown-menu>
     </div>
   `;
-    @property({ type: Array })
-    accessor items = [];
-    @property({ type: String })
-    accessor align = 'right';
-    @state()
-    accessor isOpen = false;
-    documentClickHandler;
-    scrollHandler;
-    resizeHandler;
-    static styles = [
-        cssManager.defaultStyles,
-        css `
+        #items_accessor_storage = __runInitializers(this, _items_initializers, []);
+        get items() { return this.#items_accessor_storage; }
+        set items(value) { this.#items_accessor_storage = value; }
+        #align_accessor_storage = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _align_initializers, 'right'));
+        get align() { return this.#align_accessor_storage; }
+        set align(value) { this.#align_accessor_storage = value; }
+        #isOpen_accessor_storage = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _isOpen_initializers, false));
+        get isOpen() { return this.#isOpen_accessor_storage; }
+        set isOpen(value) { this.#isOpen_accessor_storage = value; }
+        documentClickHandler = __runInitializers(this, _isOpen_extraInitializers);
+        resizeHandler;
+        static styles = [
+            ...sioElementStyles,
+            css `
       :host {
         position: relative;
         display: inline-block;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
+        font-family: var(--sio-font-sf);
       }
 
       .trigger {
@@ -44,19 +116,23 @@ export class SioDropdownMenu extends DeesElement {
 
       .dropdown {
         position: absolute;
-        top: calc(100% + 10px);
+        top: calc(100% + 8px);
         right: 0;
-        min-width: 200px;
-        background: ${bdTheme('background')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.lg)};
-        box-shadow: ${unsafeCSS(shadows.lg)};
-        overflow: hidden;
+        min-width: 210px;
+        padding: 5px;
+        background: var(--sio-surface);
+        border-radius: var(--sio-radius-md);
+        /* hairline ring + soft depth, per the v7 floating-surface recipe */
+        box-shadow:
+          0 18px 50px rgba(0, 0, 0, 0.22),
+          0 0 0 var(--sio-hairline) var(--sio-separator);
         z-index: 100000;
         opacity: 0;
-        transform: translateY(-10px) scale(0.95);
+        transform: translateY(-8px) scale(0.96);
         pointer-events: none;
-        transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        transition:
+          opacity 160ms ease,
+          transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
         transform-origin: top right;
       }
 
@@ -75,48 +151,52 @@ export class SioDropdownMenu extends DeesElement {
       .menu-item {
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["3"])};
-        padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3"])};
-        font-size: 0.875rem;
-        line-height: 1.5;
-        color: ${bdTheme('foreground')};
-        cursor: pointer;
-        transition: ${unsafeCSS(transitions.all)};
-        user-select: none;
+        gap: 10px;
+        width: 100%;
+        padding: 8px 10px;
         border: none;
+        border-radius: var(--sio-radius-sm);
         background: none;
-        width: 100%;
+        font-family: var(--sio-font-sf);
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: -0.08px;
+        line-height: 18px;
         text-align: left;
+        color: var(--sio-label);
+        cursor: pointer;
+        transition: background 80ms ease;
+        user-select: none;
       }
 
       .menu-item:hover:not(.disabled) {
-        background: ${bdTheme('accent')};
+        background: var(--sio-surface-2);
       }
 
       .menu-item:active:not(.disabled) {
-        transform: scale(0.98);
+        background: color-mix(in oklab, var(--sio-label) 10%, transparent);
       }
 
       .menu-item.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+        opacity: 0.4;
+        cursor: default;
       }
 
       .menu-item.destructive {
-        color: ${bdTheme('destructive')};
+        color: var(--sio-red);
       }
 
       .menu-item.destructive:hover:not(.disabled) {
-        background: ${bdTheme('destructive')}10;
+        background: color-mix(in oklab, var(--sio-red) 10%, transparent);
       }
 
       .menu-icon {
         flex-shrink: 0;
-        color: ${bdTheme('mutedForeground')};
+        color: var(--sio-label-3);
       }
 
       .menu-item.destructive .menu-icon {
-        color: ${bdTheme('destructive')};
+        color: var(--sio-red);
       }
 
       .menu-label {
@@ -124,130 +204,104 @@ export class SioDropdownMenu extends DeesElement {
       }
 
       .divider {
-        height: 1px;
-        background: ${bdTheme('border')};
-        margin: ${unsafeCSS(spacing["1"])} 0;
-      }
-
-      /* Mobile adjustments */
-      @media (max-width: 600px) {
-        .dropdown {
-          position: fixed;
-          top: auto !important;
-          left: ${unsafeCSS(spacing["4"])} !important;
-          right: ${unsafeCSS(spacing["4"])};
-          bottom: ${unsafeCSS(spacing["4"])};
-          width: auto;
-          transform-origin: bottom center;
-        }
-
-        .dropdown.open {
-          transform: translateY(0) scale(1);
-        }
-
-        .dropdown:not(.open) {
-          transform: translateY(10px) scale(0.95);
-        }
+        height: var(--sio-hairline);
+        background: var(--sio-separator);
+        margin: 4px 6px;
       }
     `,
-    ];
-    render() {
-        return html `
+        ];
+        render() {
+            return html `
       <div class="trigger" @click=${this.toggleDropdown}>
         <slot></slot>
       </div>
       <div class="dropdown ${this.isOpen ? 'open' : ''} align-${this.align}">
-        ${this.items.map(item => item.divider ? html `
-            <div class="divider"></div>
-          ` : html `
-            <button
-              class="menu-item ${item.destructive ? 'destructive' : ''} ${item.disabled ? 'disabled' : ''}"
-              @click=${() => this.handleItemClick(item)}
-              ?disabled=${item.disabled}
-            >
-              ${item.icon ? html `
-                <sio-icon class="menu-icon" icon="${item.icon}" size="16"></sio-icon>
-              ` : ''}
-              <span class="menu-label">${item.label}</span>
-            </button>
-          `)}
+        ${this.items.map((item) => item.divider
+                ? html `<div class="divider"></div>`
+                : html `
+                <button
+                  class="menu-item ${item.destructive ? 'destructive' : ''} ${item.disabled
+                    ? 'disabled'
+                    : ''}"
+                  @click=${() => this.handleItemClick(item)}
+                  ?disabled=${item.disabled}
+                >
+                  ${item.icon
+                    ? html `<sio-icon class="menu-icon" icon="${item.icon}" size="15"></sio-icon>`
+                    : ''}
+                  <span class="menu-label">${item.label}</span>
+                </button>
+              `)}
       </div>
     `;
-    }
-    toggleDropdown = (e) => {
-        console.log('[Dropdown] Toggle called, current state:', this.isOpen);
-        e.preventDefault();
-        e.stopPropagation();
-        this.isOpen = !this.isOpen;
-        console.log('[Dropdown] New state:', this.isOpen);
-        if (this.isOpen) {
-            this.addDocumentListener();
-        }
-        else {
-            this.removeDocumentListener();
         }
-    };
-    updateDropdownPosition() {
-        // For absolute positioning, we don't need to calculate position dynamically
-        // The CSS handles it with top: calc(100% + 10px) and right: 0
-        console.log('[Dropdown] Position is handled by CSS (absolute positioning)');
-    }
-    handleItemClick(item) {
-        if (item.disabled || item.divider)
-            return;
-        this.isOpen = false;
-        this.removeDocumentListener();
-        // Dispatch custom event with the selected item
-        this.dispatchEvent(new CustomEvent('item-selected', {
-            detail: { item },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    addDocumentListener() {
-        // Close dropdown when clicking outside
-        this.documentClickHandler = (e) => {
-            const path = e.composedPath();
-            if (!path.includes(this)) {
-                this.isOpen = false;
-                this.removeDocumentListener();
+        toggleDropdown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.addDocumentListeners();
             }
-        };
-        // Update position on scroll/resize
-        this.scrollHandler = () => this.updateDropdownPosition();
-        this.resizeHandler = () => {
-            this.updateDropdownPosition();
-            if (window.innerWidth <= 600) {
-                // Close on mobile resize to prevent positioning issues
-                this.isOpen = false;
-                this.removeDocumentListener();
+            else {
+                this.removeDocumentListeners();
             }
         };
-        // Delay to avoid immediate closing
-        setTimeout(() => {
-            document.addEventListener('click', this.documentClickHandler);
-            window.addEventListener('scroll', this.scrollHandler, true);
-            window.addEventListener('resize', this.resizeHandler);
-        }, 0);
-    }
-    removeDocumentListener() {
-        if (this.documentClickHandler) {
-            document.removeEventListener('click', this.documentClickHandler);
+        handleItemClick(item) {
+            if (item.disabled || item.divider)
+                return;
+            this.isOpen = false;
+            this.removeDocumentListeners();
+            this.dispatchEvent(new CustomEvent('item-selected', {
+                detail: { item },
+                bubbles: true,
+                composed: true,
+            }));
         }
-        if (this.scrollHandler) {
-            window.removeEventListener('scroll', this.scrollHandler, true);
+        addDocumentListeners() {
+            // Close when clicking outside the component.
+            this.documentClickHandler = (e) => {
+                const path = e.composedPath();
+                if (!path.includes(this)) {
+                    this.close();
+                }
+            };
+            // Close on small viewports to avoid stale absolute positioning.
+            this.resizeHandler = () => {
+                if (window.innerWidth <= 600) {
+                    this.close();
+                }
+            };
+            // Delay to avoid the opening click closing the menu again.
+            setTimeout(() => {
+                if (!this.documentClickHandler || !this.resizeHandler)
+                    return;
+                document.addEventListener('click', this.documentClickHandler);
+                window.addEventListener('resize', this.resizeHandler);
+            }, 0);
         }
-        if (this.resizeHandler) {
-            window.removeEventListener('resize', this.resizeHandler);
+        removeDocumentListeners() {
+            if (this.documentClickHandler) {
+                document.removeEventListener('click', this.documentClickHandler);
+                this.documentClickHandler = undefined;
+            }
+            if (this.resizeHandler) {
+                window.removeEventListener('resize', this.resizeHandler);
+                this.resizeHandler = undefined;
+            }
         }
-    }
-    async disconnectedCallback() {
-        await super.disconnectedCallback();
-        this.removeDocumentListener();
-    }
-    close() {
-        this.isOpen = false;
-        this.removeDocumentListener();
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWRyb3Bkb3duLW1lbnUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWRyb3Bkb3duLW1lbnUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixVQUFVLEVBQ1YsR0FBRyxFQUNILFNBQVMsRUFDVCxLQUFLLEdBQ04sTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyx1QkFBdUI7QUFDdkIsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBaUI1QyxDQUFDLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQztBQUNuQyxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxXQUFXO0lBQ3ZDLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOztrQ0FFQztRQUMxQixFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLG9CQUFvQixFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7UUFDN0QsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxrQkFBa0IsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFO1FBQ3JELEVBQUUsRUFBRSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUU7UUFDNUMsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxhQUFhLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtRQUN4RCxFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLGVBQWUsRUFBRSxJQUFJLEVBQUUs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
+        async disconnectedCallback() {
+            await super.disconnectedCallback();
+            this.removeDocumentListeners();
+        }
+        close() {
+            this.isOpen = false;
+            this.removeDocumentListeners();
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioDropdownMenu = _classThis;
+})();
+export { SioDropdownMenu };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWRyb3Bkb3duLW1lbnUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWRyb3Bkb3duLW1lbnUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsUUFBUSxFQUNSLElBQUksRUFDSixhQUFhLEVBQ2IsR0FBRyxFQUNILEtBQUssR0FFTixNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztBQUN2QixPQUFPLGlCQUFpQixDQUFDO0lBa0JaLGVBQWU7NEJBRDNCLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7OytCQUFuQixTQUFRLFdBQVc7Ozs7aUNBMkI3QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7aUNBR3pCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztrQ0FHMUIsS0FBSyxFQUFFO1lBTFIsb0tBQWdCLEtBQUssNkJBQUwsS0FBSyxxRkFBMkI7WUFHaEQsb0tBQWdCLEtBQUssNkJBQUwsS0FBSyxxRkFBNkI7WUFHbEQsdUtBQWlCLE1BQU0sNkJBQU4sTUFBTSx1RkFBa0I7WUFsQzNDLDZLQXlQQzs7OztRQXhQUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7aUJBS2hCO1lBQ1AsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRTtZQUM5QyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFO1lBQ3BELEVBQUUsRUFBRSxFQUFFLFVBQVUs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

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

@@ -1,20 +1,38 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+import './sio-unread-badge.js';
 declare global {
     interface HTMLElementTagNameMap {
         'sio-fab': SioFab;
     }
 }
+/**
+ * sio-fab — the widget launcher bubble (v7 SocialIOWidget.jsx SIOWidgetLauncher).
+ *
+ * 56px circle on solid system tint with the white social.io chat glyph,
+ * tinted ambient shadow (40% tint) plus a soft contact shadow. Unread
+ * count sits top-right as a red pill with a 2px page-surface ring.
+ * While the combox is open the glyph swaps to a chevron-down.
+ *
+ * Owns the SioCombox singleton: creates it on <body>, toggles it on
+ * click and on Ctrl+S, and mirrors its open state.
+ */
 export declare class SioFab extends DeesElement {
-    accessor showCombox: boolean;
-    private accessor hasShownOnce;
-    private accessor shouldPulse;
     static demo: () => TemplateResult<1>;
+    /** mirrors the combox open state (chevron glyph while open) */
+    accessor showCombox: boolean;
+    /** unread conversation count — red pill on the launcher while closed */
+    accessor unread: number;
     constructor();
+    static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     /**
      * toggles the combox
      */
     toggleCombox(): Promise<void>;
-    firstUpdated(args: any): Promise<void>;
-    updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
+    private comboxCloseHandler;
+    private comboxRef;
+    firstUpdated(args: Map<PropertyKey, unknown>): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    updated(changedProperties: Map<PropertyKey, unknown>): Promise<void>;
 }