@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-fab.js

@@ -1,259 +1,283 @@
-import { DeesElement, property, html, 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, cssManager, } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { sioElementStyles } from './tokens.js';
 import { SioCombox } from './sio-combox.js';
-import { SioIcon } from './sio-icon.js';
-import { state } from '@design.estate/dees-element';
+import './sio-icon.js';
+import './sio-unread-badge.js';
 SioCombox;
-SioIcon;
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions, sizes } from './00tokens.js';
-import { fontFamilies, typography } from './00fonts.js';
-@customElement('sio-fab')
-export class SioFab extends DeesElement {
-    @property({ type: Boolean })
-    accessor showCombox = false;
-    @state()
-    accessor hasShownOnce = false;
-    @state()
-    accessor shouldPulse = false;
-    static demo = () => html ` <sio-fab .showCombox=${true}></sio-fab> `;
-    constructor() {
-        super();
-        domtools.DomTools.setupDomTools();
-    }
-    render() {
-        return html `
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          will-change: transform;
-          position: absolute;
-          display: block;
-          bottom: 20px;
-          right: 20px;
-          z-index: 10000;
-          color: #fff;
-          --fab-gradient-start: #6366f1;
-          --fab-gradient-mid: #8b5cf6;
-          --fab-gradient-end: #a855f7;
-          --fab-gradient-hover-end: #c026d3;
-          --fab-shadow-color: rgba(139, 92, 246, 0.25);
-        }
-
-        #mainbox {
-          transition: ${transitions.all};
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          height: 60px;
-          width: 60px;
-          box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
-          line-height: 60px;
-          text-align: center;
-          cursor: pointer;
-          background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
-          color: white;
-          border-radius: ${radius.full};
-          user-select: none;
-          border: none;
-          animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
-          overflow: hidden;
-          position: relative;
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-        }
-        
-        #mainbox::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
-          opacity: 0;
-          transition: opacity 200ms ease;
+/**
+ * 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.
+ */
+let SioFab = (() => {
+    let _classDecorators = [customElement('sio-fab')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _showCombox_decorators;
+    let _showCombox_initializers = [];
+    let _showCombox_extraInitializers = [];
+    let _unread_decorators;
+    let _unread_initializers = [];
+    let _unread_extraInitializers = [];
+    var SioFab = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _showCombox_decorators = [property({ type: Boolean })];
+            _unread_decorators = [property({ type: Number })];
+            __esDecorate(this, null, _showCombox_decorators, { kind: "accessor", name: "showCombox", static: false, private: false, access: { has: obj => "showCombox" in obj, get: obj => obj.showCombox, set: (obj, value) => { obj.showCombox = value; } }, metadata: _metadata }, _showCombox_initializers, _showCombox_extraInitializers);
+            __esDecorate(this, null, _unread_decorators, { kind: "accessor", name: "unread", static: false, private: false, access: { has: obj => "unread" in obj, get: obj => obj.unread, set: (obj, value) => { obj.unread = value; } }, metadata: _metadata }, _unread_initializers, _unread_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioFab = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        
-        #mainbox::after {
-          content: '';
-          position: absolute;
-          top: -4px;
-          left: -4px;
-          right: -4px;
-          bottom: -4px;
-          background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
-          border-radius: inherit;
-          z-index: -1;
-          opacity: 0;
-          filter: blur(12px);
-          transition: opacity 300ms ease;
-        }
-        
-        #mainbox:hover::before {
-          opacity: 1;
-        }
-        
-        #mainbox:hover::after {
-          opacity: 0.3;
-        }
-        
-        @keyframes fabEntrance {
-          from {
-            transform: scale(0.8);
-            opacity: 0;
-          }
-          to {
-            transform: scale(1);
-            opacity: 1;
-          }
+        static demo = () => html ` <sio-fab .unread=${1}></sio-fab> `;
+        #showCombox_accessor_storage = __runInitializers(this, _showCombox_initializers, false);
+        /** mirrors the combox open state (chevron glyph while open) */
+        get showCombox() { return this.#showCombox_accessor_storage; }
+        set showCombox(value) { this.#showCombox_accessor_storage = value; }
+        #unread_accessor_storage = (__runInitializers(this, _showCombox_extraInitializers), __runInitializers(this, _unread_initializers, 0));
+        /** unread conversation count — red pill on the launcher while closed */
+        get unread() { return this.#unread_accessor_storage; }
+        set unread(value) { this.#unread_accessor_storage = value; }
+        constructor() {
+            super();
+            domtools.DomTools.setupDomTools();
         }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        position: absolute;
+        bottom: 24px;
+        right: 24px;
+        z-index: 10000;
+        display: block;
+        width: 56px;
+        height: 56px;
+      }
 
-        #mainbox:hover {
-          transform: scale(1.02);
-          background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
-        }
-        
-        #mainbox:hover {
-          box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
-        }
+      .fab {
+        position: relative;
+        width: 56px;
+        height: 56px;
+        border-radius: 28px;
+        border: none;
+        padding: 0;
+        background: var(--sio-tint);
+        color: #fff; /* on-tint constant across themes (v7 launcher glyph) */
+        cursor: pointer;
+        user-select: none;
+        box-shadow:
+          0 8px 24px color-mix(in oklab, var(--sio-tint) 40%, transparent),
+          0 2px 6px rgba(0, 0, 0, 0.12);
+        transition:
+          background 120ms ease,
+          transform 120ms ease,
+          box-shadow 120ms ease;
+        animation: fabEntrance 240ms cubic-bezier(0.4, 0, 0.2, 1);
+      }
 
-        #mainbox:active {
-          transform: scale(0.98);
-          box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
-        }
-        
-        #mainbox.pulse::after {
-          animation: fabPulse 0.6s ease-out forwards;
-        }
-        
-        @keyframes fabPulse {
-          0% {
-            box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
-            opacity: 1;
-          }
-          100% {
-            box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
-            opacity: 0;
-          }
-        }
+      .fab:hover {
+        background: var(--sio-tint-hover);
+        transform: scale(1.03);
+      }
 
-        #mainbox .icon {
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          will-change: transform, opacity;
-          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-          height: 100%;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
+      .fab:active {
+        transform: scale(0.96);
+      }
 
+      .fab:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 55%, transparent);
+        outline-offset: 2px;
+      }
 
-        #mainbox .icon.open {
-          opacity: ${this.showCombox ? '0' : '1'};
-          transform: ${this.showCombox ? 'rotate(45deg) scale(0.9)' : 'rotate(0deg) scale(1)'};
+      @keyframes fabEntrance {
+        from {
+          transform: scale(0.8);
+          opacity: 0;
         }
-
-        #mainbox .icon.close {
-          opacity: ${this.showCombox ? '1' : '0'};
-          transform: ${this.showCombox ? 'rotate(0deg) scale(1)' : 'rotate(-45deg) scale(0.9)'};
+        to {
+          transform: scale(1);
+          opacity: 1;
         }
+      }
 
-        #mainbox .icon sio-icon {
-          color: white;
-          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-        }
+      .glyph {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition:
+          opacity 160ms ease,
+          transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
+      }
 
-        #mainbox .icon.close sio-icon {
-          transform: scale(1);
-        }
+      .glyph svg {
+        display: block;
+      }
 
-        #comboxContainer {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          pointer-events: none;
-        }
+      .glyph.chat {
+        opacity: 1;
+        transform: rotate(0deg) scale(1);
+      }
 
-        #comboxContainer sio-combox {
-          position: absolute;
-          bottom: calc(60px + ${spacing["4"]});
-          right: 0;
-          transition: ${transitions.all};
-          will-change: transform;
-          transform: translateY(${spacing["5"]});
-          opacity: 0;
-          pointer-events: none;
-        }
+      .glyph.chevron {
+        opacity: 0;
+        transform: rotate(-45deg) scale(0.8);
+      }
 
-        #comboxContainer.show {
-          pointer-events: all;
-        }
+      :host(.combox-open) .glyph.chat {
+        opacity: 0;
+        transform: rotate(45deg) scale(0.8);
+      }
 
-        #comboxContainer.show sio-combox {
-          transform: translateY(0px);
-          opacity: 1;
-          pointer-events: all;
-        }
-      </style>
-      <div id="mainbox" 
-        class="${this.shouldPulse ? 'pulse' : ''}"
-        @click=${this.toggleCombox}
-        @animationend=${() => { this.shouldPulse = false; }}
-      >
-        <div class="icon open">
-          <sio-icon icon="message-square" size="28"></sio-icon>
-        </div>
-        <div class="icon close">
-          <sio-icon icon="x" size="22"></sio-icon>
-        </div>
-      </div>
-      <div id="comboxContainer" class="${this.showCombox ? 'show' : ''}">
-        ${this.showCombox || this.hasShownOnce ? html `
-          <sio-combox @close=${() => this.showCombox = false}></sio-combox>
-        ` : ''}
-      </div>
+      :host(.combox-open) .glyph.chevron {
+        opacity: 1;
+        transform: rotate(0deg) scale(1);
+      }
+
+      .unread {
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        pointer-events: none;
+        transition: opacity 120ms ease;
+      }
+
+      :host(.combox-open) .unread {
+        opacity: 0;
+      }
+    `,
+            cssManager.cssForPhablet(css `
+      :host {
+        bottom: 16px;
+        right: 16px;
+      }
+    `),
+        ];
+        render() {
+            return html `
+      <button class="fab" aria-label="Open messenger" @click=${this.toggleCombox}>
+        <span class="glyph chat">
+          <!-- social.io chat glyph (v7 brand mark) -->
+          <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path
+              d="M12 3C7 3 3 6.6 3 11c0 2.5 1.3 4.7 3.3 6.2-.1 1-.5 2.1-1.3 2.9 1.6-.1 3-.7 4-1.4.9.2 1.9.3 3 .3 5 0 9-3.6 9-8S17 3 12 3z"
+            />
+          </svg>
+        </span>
+        <span class="glyph chevron">
+          <sio-icon icon="chevron-down" size="22" .strokeWidth=${2.4}></sio-icon>
+        </span>
+        ${this.unread > 0
+                ? html `
+              <sio-unread-badge
+                class="unread"
+                count=${this.unread}
+                channel="alert"
+                ring
+              ></sio-unread-badge>
+            `
+                : ''}
+      </button>
     `;
-    }
-    /**
-     * toggles the combox
-     */
-    async toggleCombox() {
-        console.log('toggle combox');
-        const wasOpen = this.showCombox;
-        this.showCombox = !this.showCombox;
-        if (this.showCombox) {
-            this.hasShownOnce = true;
-            if (!wasOpen) {
-                this.shouldPulse = true;
+        }
+        /**
+         * toggles the combox
+         */
+        async toggleCombox() {
+            const combox = SioCombox.getInstance();
+            if (combox) {
+                combox.toggle();
+                this.showCombox = combox.getIsOpen();
             }
         }
-    }
-    async firstUpdated(args) {
-        super.firstUpdated(args);
-        const domtools = await this.domtoolsPromise;
-        // Set up keyboard shortcut
-        domtools.keyboard
-            .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
-            .subscribe(() => {
-            this.toggleCombox();
+        comboxCloseHandler = (__runInitializers(this, _unread_extraInitializers), () => {
+            this.showCombox = false;
         });
-    }
-    async updated(changedProperties) {
-        super.updated(changedProperties);
-        // Set reference object when combox is rendered
-        if ((changedProperties.has('showCombox') || changedProperties.has('hasShownOnce')) &&
-            (this.showCombox || this.hasShownOnce)) {
-            const sioCombox = this.shadowRoot.querySelector('sio-combox');
-            const mainBox = this.shadowRoot.querySelector('#mainbox');
-            if (sioCombox && mainBox && !sioCombox.referenceObject) {
-                sioCombox.referenceObject = mainBox;
+        comboxRef = null;
+        async firstUpdated(args) {
+            super.firstUpdated(args);
+            const domtoolsInstance = await this.domtoolsPromise;
+            // Create the singleton combox on body
+            const combox = SioCombox.createOnBody();
+            // Listen for close events (removed on disconnect — the singleton outlives us)
+            this.comboxRef = combox;
+            combox.addEventListener('close', this.comboxCloseHandler);
+            // Set up keyboard shortcut; the subscription is auto-unsubscribed by
+            // DeesElement on disconnect, otherwise the global keyboard singleton
+            // would retain this element (and fire once per ever-mounted fab)
+            const keyboard = domtoolsInstance.keyboard;
+            if (keyboard) {
+                this.rxSubscriptions.push(keyboard.on([keyboard.keyEnum.Ctrl, keyboard.keyEnum.S]).subscribe(() => {
+                    this.toggleCombox();
+                }));
             }
         }
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWZhYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tZmFiLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsUUFBUSxFQUNSLElBQUksRUFDSixhQUFhLEVBRWIsVUFBVSxFQUNWLEdBQUcsR0FDSixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7QUFFekQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3BELFNBQVMsQ0FBQztBQUNWLE9BQU8sQ0FBQztBQUVSLHVCQUF1QjtBQUN2QixPQUFPLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQVF4RCxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUM7QUFDekIsTUFBTSxPQUFPLE1BQU8sU0FBUSxXQUFXO0lBQ3JDLENBQUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO0lBQ3JCLFFBQVEsQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBRW5DLENBQUMsS0FBSyxFQUFFO0lBQ0EsUUFBUSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFFdEMsQ0FBQyxLQUFLLEVBQUU7SUFDQSxRQUFRLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUU5QixNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxD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
+        async disconnectedCallback() {
+            await super.disconnectedCallback();
+            if (this.comboxRef) {
+                this.comboxRef.removeEventListener('close', this.comboxCloseHandler);
+                this.comboxRef = null;
+            }
+        }
+        async updated(changedProperties) {
+            super.updated(changedProperties);
+            // Mirror combox state onto the host for the glyph crossfade
+            if (changedProperties.has('showCombox')) {
+                this.classList.toggle('combox-open', this.showCombox);
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioFab = _classThis;
+})();
+export { SioFab };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWZhYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tZmFiLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsRUFDSCxVQUFVLEdBRVgsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBRXpELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDNUMsT0FBTyxlQUFlLENBQUM7QUFDdkIsT0FBTyx1QkFBdUIsQ0FBQztBQUMvQixTQUFTLENBQUM7QUFRVjs7Ozs7Ozs7OztHQVVHO0lBRVUsTUFBTTs0QkFEbEIsYUFBYSxDQUFDLFNBQVMsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7O3NCQUFuQixTQUFRLFdBQVc7Ozs7c0NBSXBDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztrQ0FJM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBSDNCLG1MQUFnQixVQUFVLDZCQUFWLFVBQVUsK0ZBQVM7WUFJbkMsdUtBQWdCLE1BQU0sNkJBQU4sTUFBTSx1RkFBSztZQVQ3Qiw2S0FzTkM7Ozs7UUFyTlEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEscUJBQXFCLENBQUMsY0FBYyxDQUFDO1FBSXBFLGlGQUE2QixLQUFLLEVBQUM7UUFGbkMsK0RBQStEO1FBRS9ELElBQWdCLFVBQVUsZ0RBQVM7UUFBbkMsSUFBZ0IsVUFBVSxzREFBUztRQUluQyxrSUFBeUIsQ0FBQyxHQUFDO1FBRjNCLHdFQUF3RTtRQUV4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

package/dist_ts_web/elements/sio-glass-toolbar.d.ts

@@ -0,0 +1,22 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-glass-toolbar': SioGlassToolbar;
+    }
+}
+/**
+ * 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.
+ */
+export declare class SioGlassToolbar extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}