@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-avatar.js

@@ -0,0 +1,379 @@
+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, state, customElement, css, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+/**
+ * channel badge recipes — 18px glyph circle bottom-right of the avatar,
+ * solid channel color with a 2px surface ring (v7 SIOUniRow).
+ */
+const channelBadgeRecipes = {
+    mail: { icon: 'envelope', color: 'var(--sio-ch-mail)' },
+    chats: { icon: 'message-circle', color: 'var(--sio-ch-chats)' },
+    calls: { icon: 'phone', color: 'var(--sio-ch-calls)' },
+    letters: { icon: 'file-text', color: 'var(--sio-ch-letters)' },
+};
+/**
+ * sio-avatar — initials on a tinted circle (v7 `.sio-avatar`).
+ *
+ * The tint is data-driven (each person carries their own accent color),
+ * so it is passed in as a prop; it defaults to the system tint token.
+ * Optional presence dot (online) and channel badge, both ringed with
+ * 2px of surface color so they read on top of list rows.
+ */
+let SioAvatar = (() => {
+    let _classDecorators = [customElement('sio-avatar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _initials_decorators;
+    let _initials_initializers = [];
+    let _initials_extraInitializers = [];
+    let _tint_decorators;
+    let _tint_initializers = [];
+    let _tint_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _presence_decorators;
+    let _presence_initializers = [];
+    let _presence_extraInitializers = [];
+    let _channelBadge_decorators;
+    let _channelBadge_initializers = [];
+    let _channelBadge_extraInitializers = [];
+    var SioAvatar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _initials_decorators = [property({ type: String })];
+            _tint_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: Number })];
+            _presence_decorators = [property({ type: String })];
+            _channelBadge_decorators = [property({ type: String })];
+            __esDecorate(this, null, _initials_decorators, { kind: "accessor", name: "initials", static: false, private: false, access: { has: obj => "initials" in obj, get: obj => obj.initials, set: (obj, value) => { obj.initials = value; } }, metadata: _metadata }, _initials_initializers, _initials_extraInitializers);
+            __esDecorate(this, null, _tint_decorators, { kind: "accessor", name: "tint", static: false, private: false, access: { has: obj => "tint" in obj, get: obj => obj.tint, set: (obj, value) => { obj.tint = value; } }, metadata: _metadata }, _tint_initializers, _tint_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, _presence_decorators, { kind: "accessor", name: "presence", static: false, private: false, access: { has: obj => "presence" in obj, get: obj => obj.presence, set: (obj, value) => { obj.presence = value; } }, metadata: _metadata }, _presence_initializers, _presence_extraInitializers);
+            __esDecorate(this, null, _channelBadge_decorators, { kind: "accessor", name: "channelBadge", static: false, private: false, access: { has: obj => "channelBadge" in obj, get: obj => obj.channelBadge, set: (obj, value) => { obj.channelBadge = value; } }, metadata: _metadata }, _channelBadge_initializers, _channelBadge_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioAvatar = _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: 20px;">
+      <div style="display: flex; gap: 14px; align-items: center;">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="56"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="44"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158"></sio-avatar>
+        <sio-avatar initials="L" tint="#5E6AD2" size="34"></sio-avatar>
+        <sio-avatar initials="FA" tint="#A2845E" size="28"></sio-avatar>
+        <sio-avatar initials="JW" tint="#FF9F0A" size="20"></sio-avatar>
+      </div>
+      <div style="display: flex; gap: 14px; align-items: center;">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="44" presence="online"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="40" channelBadge="mail"></sio-avatar>
+        <sio-avatar initials="LP" tint="#FF6B8A" size="40" channelBadge="chats"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="40" channelBadge="calls"></sio-avatar>
+        <sio-avatar initials="FA" tint="#A2845E" size="40" channelBadge="letters"></sio-avatar>
+      </div>
+      <div style="display: flex; gap: 24px; align-items: center;">
+        <sio-avatar-stack size="32">
+          <sio-avatar initials="LP" tint="#FF6B8A" size="32"></sio-avatar>
+          <sio-avatar initials="MV" tint="#0A84FF" size="32"></sio-avatar>
+          <sio-avatar initials="PS" tint="#30D158" size="32"></sio-avatar>
+        </sio-avatar-stack>
+        <sio-avatar-stack max="3" size="24">
+          <sio-avatar initials="LP" tint="#FF6B8A" size="24"></sio-avatar>
+          <sio-avatar initials="MV" tint="#0A84FF" size="24"></sio-avatar>
+          <sio-avatar initials="PS" tint="#30D158" size="24"></sio-avatar>
+          <sio-avatar initials="JW" tint="#FF9F0A" size="24"></sio-avatar>
+          <sio-avatar initials="AK" tint="#5E6AD2" size="24"></sio-avatar>
+        </sio-avatar-stack>
+      </div>
+    </div>
+  `;
+        #initials_accessor_storage = __runInitializers(this, _initials_initializers, '');
+        get initials() { return this.#initials_accessor_storage; }
+        set initials(value) { this.#initials_accessor_storage = value; }
+        #tint_accessor_storage = (__runInitializers(this, _initials_extraInitializers), __runInitializers(this, _tint_initializers, 'var(--sio-tint)'));
+        /** person accent color (data-driven); any CSS color, tokens welcome */
+        get tint() { return this.#tint_accessor_storage; }
+        set tint(value) { this.#tint_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _tint_extraInitializers), __runInitializers(this, _size_initializers, 40));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #presence_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _presence_initializers, 'none'));
+        get presence() { return this.#presence_accessor_storage; }
+        set presence(value) { this.#presence_accessor_storage = value; }
+        #channelBadge_accessor_storage = (__runInitializers(this, _presence_extraInitializers), __runInitializers(this, _channelBadge_initializers, 'none'));
+        get channelBadge() { return this.#channelBadge_accessor_storage; }
+        set channelBadge(value) { this.#channelBadge_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+
+      .wrapper {
+        position: relative;
+        flex-shrink: 0;
+        display: inline-flex;
+      }
+
+      /* v7 .sio-avatar — initials on tinted circle, white per design */
+      .avatar {
+        border-radius: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: var(--sio-font-sf);
+        font-weight: 600;
+        letter-spacing: -0.2px;
+        color: #fff; /* on-tint constant across themes (v7 .sio-avatar) */
+        user-select: none;
+      }
+
+      .presence {
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        border-radius: 50%;
+        background: var(--sio-green);
+        border: 2px solid var(--sio-surface);
+      }
+
+      .channelBadge {
+        position: absolute;
+        right: -3px;
+        bottom: -3px;
+        width: 18px;
+        height: 18px;
+        border-radius: 9px;
+        color: #fff; /* glyph on solid channel color */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid var(--sio-surface);
+      }
+    `,
+        ];
+        render() {
+            const fontSize = Math.round(this.size * 0.4);
+            const presenceSize = Math.max(8, Math.round(this.size * 0.27));
+            const badge = this.channelBadge !== 'none' ? channelBadgeRecipes[this.channelBadge] : null;
+            return html `
+      <div class="wrapper">
+        <div
+          class="avatar"
+          style="width: ${this.size}px; height: ${this.size}px; font-size: ${fontSize}px; background: ${this.tint};"
+        >
+          ${this.initials}
+        </div>
+        ${this.presence === 'online'
+                ? html `<div class="presence" style="width: ${presenceSize}px; height: ${presenceSize}px;"></div>`
+                : ''}
+        ${badge
+                ? html `
+              <div class="channelBadge" style="background: ${badge.color};">
+                <sio-icon icon=${badge.icon} size="10"></sio-icon>
+              </div>
+            `
+                : ''}
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _channelBadge_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioAvatar = _classThis;
+})();
+export { SioAvatar };
+/**
+ * sio-avatar-stack — overlapping avatar row (thread participants).
+ * Slotted sio-avatar elements overlap by -8px, each ringed with 2px of
+ * surface color; avatars beyond `max` collapse into a "+N" bubble.
+ */
+let SioAvatarStack = (() => {
+    let _classDecorators = [customElement('sio-avatar-stack')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _overflowCount_decorators;
+    let _overflowCount_initializers = [];
+    let _overflowCount_extraInitializers = [];
+    var SioAvatarStack = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _max_decorators = [property({ type: Number })];
+            _size_decorators = [property({ type: Number })];
+            _overflowCount_decorators = [state()];
+            __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_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, _overflowCount_decorators, { kind: "accessor", name: "overflowCount", static: false, private: false, access: { has: obj => "overflowCount" in obj, get: obj => obj.overflowCount, set: (obj, value) => { obj.overflowCount = value; } }, metadata: _metadata }, _overflowCount_initializers, _overflowCount_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioAvatarStack = _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; gap: 24px; align-items: center;">
+      <sio-avatar-stack size="32">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="32"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="32"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="32"></sio-avatar>
+      </sio-avatar-stack>
+      <sio-avatar-stack max="3" size="28">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="28"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="28"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="28"></sio-avatar>
+        <sio-avatar initials="JW" tint="#FF9F0A" size="28"></sio-avatar>
+        <sio-avatar initials="AK" tint="#5E6AD2" size="28"></sio-avatar>
+        <sio-avatar initials="RB" tint="#A2845E" size="28"></sio-avatar>
+      </sio-avatar-stack>
+      <sio-avatar-stack max="2" size="24">
+        <sio-avatar initials="LP" tint="#FF6B8A" size="24"></sio-avatar>
+        <sio-avatar initials="MV" tint="#0A84FF" size="24"></sio-avatar>
+        <sio-avatar initials="PS" tint="#30D158" size="24"></sio-avatar>
+        <sio-avatar initials="JW" tint="#FF9F0A" size="24"></sio-avatar>
+      </sio-avatar-stack>
+    </div>
+  `;
+        #max_accessor_storage = __runInitializers(this, _max_initializers, 4);
+        /** visible avatars before collapsing into "+N" */
+        get max() { return this.#max_accessor_storage; }
+        set max(value) { this.#max_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _size_initializers, 28));
+        /** diameter of the "+N" overflow bubble — match the slotted avatar size */
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #overflowCount_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _overflowCount_initializers, 0));
+        get overflowCount() { return this.#overflowCount_accessor_storage; }
+        set overflowCount(value) { this.#overflowCount_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      ::slotted(sio-avatar) {
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px var(--sio-surface);
+      }
+
+      ::slotted(sio-avatar:not(:first-child)) {
+        margin-left: -8px;
+      }
+
+      ::slotted(sio-avatar[data-sio-stack-overflow]) {
+        display: none;
+      }
+
+      .overflow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-left: -8px;
+        border-radius: 50%;
+        background: var(--sio-surface-2);
+        color: var(--sio-label-2);
+        font-family: var(--sio-font-sf);
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        box-shadow: 0 0 0 2px var(--sio-surface);
+        user-select: none;
+      }
+    `,
+        ];
+        render() {
+            const overflowFontSize = Math.max(9, Math.round(this.size * 0.36));
+            return html `
+      <slot @slotchange=${this.recomputeStack}></slot>
+      ${this.overflowCount > 0
+                ? html `
+            <span
+              class="overflow"
+              style="width: ${this.size}px; height: ${this.size}px; font-size: ${overflowFontSize}px;"
+            >
+              +${this.overflowCount}
+            </span>
+          `
+                : ''}
+    `;
+        }
+        updated(changedProperties) {
+            if (changedProperties.has('max')) {
+                this.recomputeStack();
+            }
+        }
+        recomputeStack = (__runInitializers(this, _overflowCount_extraInitializers), () => {
+            const slot = this.shadowRoot?.querySelector('slot');
+            if (!slot) {
+                return;
+            }
+            const avatars = slot
+                .assignedElements()
+                .filter((element) => element.tagName.toLowerCase() === 'sio-avatar');
+            avatars.forEach((element, index) => {
+                element.toggleAttribute('data-sio-stack-overflow', index >= this.max);
+            });
+            this.overflowCount = Math.max(0, avatars.length - this.max);
+        });
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioAvatarStack = _classThis;
+})();
+export { SioAvatarStack };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWF2YXRhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tYXZhdGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsS0FBSyxFQUNMLGFBQWEsRUFDYixHQUFHLEdBRUosTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDL0MsT0FBTyxlQUFlLENBQUM7QUFZdkI7OztHQUdHO0FBQ0gsTUFBTSxtQkFBbUIsR0FHckI7SUFDRixJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxvQkFBb0IsRUFBRTtJQUN2RCxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLHFCQUFxQixFQUFFO0lBQy9ELEtBQUssRUFBRSxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLHFCQUFxQixFQUFFO0lBQ3RELE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLHVCQUF1QixFQUFFO0NBQy9ELENBQUM7QUFFRjs7Ozs7OztHQU9HO0lBRVUsU0FBUzs0QkFEckIsYUFBYSxDQUFDLFlBQVksQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7O3lCQUFuQixTQUFRLFdBQVc7Ozs7b0NBbUN2QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO29DQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7d0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQVozQiw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFNO1lBSTlCLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQXFCO1lBR3pDLGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQU07WUFHMUIsNktBQWdCLFFBQVEsNkJBQVIsUUFBUSwyRkFBOEI7WUFHdEQseUxBQWdCLFlBQVksNkJBQVosWUFBWSxtR0FBa0M7WUFqRGhFLDZLQWlJQzs7OztRQWhJUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQzlCLENBQUM7UUFHRiw2RUFBMkIsRUFBRSxFQUFDO1FBQTlCLElBQWdCLFFBQVEsOENBQU07UUFBOUIsSUFBZ0IsUUFBUSxvREFBTTtRQUk5Qiw0SEFBdUIsaUJBQWlCLEdBQUM7UUFGekMsdUVBQXVFO1FBRXZFLElBQWdCLElBQUksMENBQXFCO1FBQXpDLElBQWdCLElBQUksZ0RBQXFCO1FBR3pDLHdIQUF1QixFQUFFLEdBQUM7UUFBMUIsSUFBZ0IsSUFBSSwwQ0FBTTtRQUExQixJQUFnQixJQUFJLGdEQUFNO1FBRzFCLGdJQUErQyxNQUFNLEdBQUM7UUFBdEQsSUFBZ0IsUUFBUSw4Q0FBOEI7UUFBdEQsSUFBZ0IsUUFBUSxvREFBOEI7UUFHdEQsNElBQXVELE1BQU0sR0FBQztRQUE5RCxJQUFnQixZQUFZLGtEQUFrQztRQUE5RCxJQUFnQixZQUFZLHdEQUFrQztRQUV2RCxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBZ0RGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLEdBQUcsR0FBRyxDQUFDLENBQUM7WUFDN0MsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDL0QsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFlBQVksS0FBSyxNQUFNLENBQUMsQ0FBQyxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQzNGLE9BQU8sSUFBSSxDQUFBOzs7OzBCQUlXLElBQUksQ0FBQyxJQUFJLGVBQWUsSUFBSSxDQUFDLElBQUksa0JBQWtCLFFBQVEsbUJBQW1CLElBQUksQ0FBQyxJQUFJOztZQUVyRyxJQUFJLENBQUMsUUFBUTs7VUFFZixJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVE7Z0JBQzFCLENBQUMsQ0FBQyxJQUFJLENBQUEsdUNBQXVDLFlBQVksZUFBZSxZQUFZLGFBQWE7Z0JBQ2pHLENBQUMsQ0FBQyxFQUFFO1VBQ0osS0FBSztnQkFDTCxDQUFDLENBQUMsSUFBSSxDQUFBOzZEQUM2QyxLQUFLLENBQUMsS0FBSztpQ0FDdkMsS0FBSyxDQUFDLElBQUk7O2FBRTlCO2dCQUNILENBQUMsQ0FBQyxFQUFFOztLQUVULENBQUM7UUFDSixDQUFDOzs7Ozs7WUFoSVUsdURBQVM7Ozs7O1NBQVQsU0FBUztBQW1JdEI7Ozs7R0FJRztJQUVVLGNBQWM7NEJBRDFCLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7OzhCQUFuQixTQUFRLFdBQVc7Ozs7K0JBMEI1QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzt5Q0FHMUIsS0FBSyxFQUFFO1lBTlIsOEpBQWdCLEdBQUcsNkJBQUgsR0FBRyxpRkFBSztZQUl4QixpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUFNO1lBRzFCLDRMQUFpQixhQUFhLDZCQUFiLGFBQWEscUdBQUs7WUFsQ3JDLDZLQStHQzs7OztRQTlHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXNCOUIsQ0FBQztRQUlGLG1FQUFzQixDQUFDLEVBQUM7UUFGeEIsa0RBQWtEO1FBRWxELElBQWdCLEdBQUcseUNBQUs7UUFBeEIsSUFBZ0IsR0FBRywrQ0FBSztRQUl4Qix1SEFBdUIsRUFBRSxHQUFDO1FBRjFCLDJFQUEyRTtRQUUzRSxJQUFnQixJQUFJLDBDQUFNO1FBQTFCLElBQWdCLElBQUksZ0RBQU07UUFHMUIsMElBQWlDLENBQUMsR0FBQztRQUFuQyxJQUFpQixhQUFhLG1EQUFLO1FBQW5DLElBQWlCLGFBQWEseURBQUs7UUFFNUIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLGdCQUFnQjtZQUNuQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FrQ0Y7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDbkUsT0FBTyxJQUFJLENBQUE7MEJBQ1csSUFBSSxDQUFDLGNBQWM7UUFDckMsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDO2dCQUN0QixDQUFDLENBQUMsSUFBSSxDQUFBOzs7OEJBR2dCLElBQUksQ0FBQyxJQUFJLGVBQWUsSUFBSSxDQUFDLElBQUksa0JBQWtCLGdCQUFnQjs7aUJBRWhGLElBQUksQ0FBQyxhQUFhOztXQUV4QjtnQkFDSCxDQUFDLENBQUMsRUFBRTtLQUNQLENBQUM7UUFDSixDQUFDO1FBRU0sT0FBTyxDQUFDLGlCQUE0QztZQUN6RCxJQUFJLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO2dCQUNqQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDeEIsQ0FBQztRQUNILENBQUM7UUFFTyxjQUFjLCtEQUFHLEdBQUcsRUFBRTtZQUM1QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUNwRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7Z0JBQ1YsT0FBTztZQUNULENBQUM7WUFDRCxNQUFNLE9BQU8sR0FBRyxJQUFJO2lCQUNqQixnQkFBZ0IsRUFBRTtpQkFDbEIsTUFBTSxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxLQUFLLFlBQVksQ0FBQyxDQUFDO1lBQ3ZFLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLEVBQUU7Z0JBQ2pDLE9BQU8sQ0FBQyxlQUFlLENBQUMseUJBQXlCLEVBQUUsS0FBSyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUN4RSxDQUFDLENBQUMsQ0FBQztZQUNILElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsT0FBTyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDOUQsQ0FBQyxFQUFDOztZQTlHUyx1REFBYzs7Ozs7U0FBZCxjQUFjIn0=

package/dist_ts_web/elements/sio-bucket-header.d.ts

@@ -0,0 +1,36 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+/**
+ * Known tint keys resolve to v7 palette tokens; anything else is passed
+ * through verbatim so callers can hand in `var(--sio-…)` references.
+ */
+export type TSioBucketTint = 'now' | 'today' | 'later' | 'done' | 'feed' | 'paper' | 'people' | 'mail' | 'chats' | 'calls' | 'letters' | 'tint' | string;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-bucket-header': SioBucketHeader;
+    }
+}
+/**
+ * sio-bucket-header — triage bucket band of the unified feed
+ * (design source: SIOBucketHeader in SocialIOUnified.jsx).
+ *
+ * 6px color dot + uppercase 13/700 tinted label + tabular count,
+ * optional right-aligned subtitle, on a faint 2% label-tint band.
+ * A default slot after the subtitle takes custom trailing content.
+ */
+export declare class SioBucketHeader extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** Bucket label — rendered uppercase, 13px / 700, tinted. */
+    accessor label: string;
+    /** Item count — rendered as "· n" with tabular-nums. Omit to hide. */
+    accessor count: number | undefined;
+    /** Optional right-aligned subtitle on the band (e.g. "needs reply today"). */
+    accessor subtitle: string;
+    /**
+     * Bucket tint: now | today | later | done, lane keys (feed/paper/people),
+     * channel keys (mail/chats/calls/letters), 'tint', or any CSS color value.
+     */
+    accessor tint: TSioBucketTint;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private get resolvedTint();
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sio-bucket-header.js

@@ -0,0 +1,197 @@
+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 { sioElementStyles, sioTabularNums } from './tokens.js';
+const bucketTintVars = {
+    now: 'var(--sio-bucket-now)',
+    today: 'var(--sio-bucket-today)',
+    later: 'var(--sio-bucket-later)',
+    done: 'var(--sio-bucket-done)',
+    feed: 'var(--sio-lane-feed)',
+    paper: 'var(--sio-lane-paper)',
+    people: 'var(--sio-lane-people)',
+    mail: 'var(--sio-ch-mail)',
+    chats: 'var(--sio-ch-chats)',
+    calls: 'var(--sio-ch-calls)',
+    letters: 'var(--sio-ch-letters)',
+    tint: 'var(--sio-tint)',
+};
+/**
+ * sio-bucket-header — triage bucket band of the unified feed
+ * (design source: SIOBucketHeader in SocialIOUnified.jsx).
+ *
+ * 6px color dot + uppercase 13/700 tinted label + tabular count,
+ * optional right-aligned subtitle, on a faint 2% label-tint band.
+ * A default slot after the subtitle takes custom trailing content.
+ */
+let SioBucketHeader = (() => {
+    let _classDecorators = [customElement('sio-bucket-header')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _count_decorators;
+    let _count_initializers = [];
+    let _count_extraInitializers = [];
+    let _subtitle_decorators;
+    let _subtitle_initializers = [];
+    let _subtitle_extraInitializers = [];
+    let _tint_decorators;
+    let _tint_initializers = [];
+    let _tint_extraInitializers = [];
+    var SioBucketHeader = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property({ type: String })];
+            _count_decorators = [property({ type: Number })];
+            _subtitle_decorators = [property({ type: String })];
+            _tint_decorators = [property({ type: String })];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _count_decorators, { kind: "accessor", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_extraInitializers);
+            __esDecorate(this, null, _subtitle_decorators, { kind: "accessor", name: "subtitle", static: false, private: false, access: { has: obj => "subtitle" in obj, get: obj => obj.subtitle, set: (obj, value) => { obj.subtitle = value; } }, metadata: _metadata }, _subtitle_initializers, _subtitle_extraInitializers);
+            __esDecorate(this, null, _tint_decorators, { kind: "accessor", name: "tint", static: false, private: false, access: { has: obj => "tint" in obj, get: obj => obj.tint, set: (obj, value) => { obj.tint = value; } }, metadata: _metadata }, _tint_initializers, _tint_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioBucketHeader = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="max-width: 420px; font-family: var(--sio-font-sf); background: var(--sio-bg); border-radius: 12px; overflow: hidden;">
+      <sio-bucket-header label="Now" count="2" tint="now" subtitle="needs reply today"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Today" count="4" tint="today"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Later" count="7" tint="later"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Done" count="12" tint="done" subtitle="cleared this week"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+      <sio-bucket-header label="Yesterday" count="3" tint="tint"></sio-bucket-header>
+      <div style="background: var(--sio-surface); height: 44px;"></div>
+    </div>
+  `;
+        #label_accessor_storage = __runInitializers(this, _label_initializers, '');
+        /** Bucket label — rendered uppercase, 13px / 700, tinted. */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #count_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _count_initializers, undefined));
+        /** Item count — rendered as "· n" with tabular-nums. Omit to hide. */
+        get count() { return this.#count_accessor_storage; }
+        set count(value) { this.#count_accessor_storage = value; }
+        #subtitle_accessor_storage = (__runInitializers(this, _count_extraInitializers), __runInitializers(this, _subtitle_initializers, ''));
+        /** Optional right-aligned subtitle on the band (e.g. "needs reply today"). */
+        get subtitle() { return this.#subtitle_accessor_storage; }
+        set subtitle(value) { this.#subtitle_accessor_storage = value; }
+        #tint_accessor_storage = (__runInitializers(this, _subtitle_extraInitializers), __runInitializers(this, _tint_initializers, 'later'));
+        /**
+         * Bucket tint: now | today | later | done, lane keys (feed/paper/people),
+         * channel keys (mail/chats/calls/letters), 'tint', or any CSS color value.
+         */
+        get tint() { return this.#tint_accessor_storage; }
+        set tint(value) { this.#tint_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+        font-family: var(--sio-font-sf);
+      }
+      .header {
+        padding: 16px 16px 8px;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        /* faint band — ~2% label ink over the grouped background */
+        background: color-mix(in oklab, var(--sio-label) 2%, transparent);
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 3px;
+        background: var(--_bucket-tint);
+        flex-shrink: 0;
+      }
+      .label {
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--_bucket-tint);
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+      .count {
+        font-size: 11px;
+        color: var(--sio-label-3);
+        ${sioTabularNums}
+      }
+      .spacer {
+        flex: 1;
+      }
+      .subtitle {
+        font-size: 11px;
+        color: var(--sio-label-3);
+      }
+    `,
+        ];
+        get resolvedTint() {
+            return bucketTintVars[this.tint] ?? this.tint;
+        }
+        render() {
+            return html `
+      <div class="header" style="--_bucket-tint: ${this.resolvedTint}">
+        <div class="dot"></div>
+        <span class="label">${this.label}</span>
+        ${typeof this.count === 'number' && !Number.isNaN(this.count)
+                ? html `<span class="count">· ${this.count}</span>`
+                : html ``}
+        <span class="spacer"></span>
+        ${this.subtitle ? html `<span class="subtitle">${this.subtitle}</span>` : html ``}
+        <slot></slot>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _tint_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioBucketHeader = _classThis;
+})();
+export { SioBucketHeader };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWJ1Y2tldC1oZWFkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWJ1Y2tldC1oZWFkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGNBQWMsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQXFCL0QsTUFBTSxjQUFjLEdBQTJCO0lBQzdDLEdBQUcsRUFBRSx1QkFBdUI7SUFDNUIsS0FBSyxFQUFFLHlCQUF5QjtJQUNoQyxLQUFLLEVBQUUseUJBQXlCO0lBQ2hDLElBQUksRUFBRSx3QkFBd0I7SUFDOUIsSUFBSSxFQUFFLHNCQUFzQjtJQUM1QixLQUFLLEVBQUUsdUJBQXVCO0lBQzlCLE1BQU0sRUFBRSx3QkFBd0I7SUFDaEMsSUFBSSxFQUFFLG9CQUFvQjtJQUMxQixLQUFLLEVBQUUscUJBQXFCO0lBQzVCLEtBQUssRUFBRSxxQkFBcUI7SUFDNUIsT0FBTyxFQUFFLHVCQUF1QjtJQUNoQyxJQUFJLEVBQUUsaUJBQWlCO0NBQ3hCLENBQUM7QUFRRjs7Ozs7OztHQU9HO0lBRVUsZUFBZTs0QkFEM0IsYUFBYSxDQUFDLG1CQUFtQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7K0JBQW5CLFNBQVEsV0FBVzs7OztpQ0FpQjdDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztpQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO29DQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBTzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQWQzQixvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFNO1lBSTNCLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQWlDO1lBSXRELDZLQUFnQixRQUFRLDZCQUFSLFFBQVEsMkZBQU07WUFPOUIsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFBMkI7WUFqQ2pELDZLQWlHQzs7OztRQWhHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7OztHQWE5QixDQUFDO1FBSUYsdUVBQXdCLEVBQUUsRUFBQztRQUYzQiw2REFBNkQ7UUFFN0QsSUFBZ0IsS0FBSywyQ0FBTTtRQUEzQixJQUFnQixLQUFLLGlEQUFNO1FBSTNCLDJIQUE0QyxTQUFTLEdBQUM7UUFGdEQsc0VBQXNFO1FBRXRFLElBQWdCLEtBQUssMkNBQWlDO1FBQXRELElBQWdCLEtBQUssaURBQWlDO1FBSXRELGlJQUEyQixFQUFFLEdBQUM7UUFGOUIsOEVBQThFO1FBRTlFLElBQWdCLFFBQVEsOENBQU07UUFBOUIsSUFBZ0IsUUFBUSxvREFBTTtRQU85Qiw0SEFBdUMsT0FBTyxHQUFDO1FBTC9DOzs7V0FHRztRQUVILElBQWdCLElBQUksMENBQTJCO1FBQS9DLElBQWdCLElBQUksZ0RBQTJCO1FBRXhDLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7VUE4QkcsY0FBYzs7Ozs7Ozs7O0tBU25CO1NBQ0YsQ0FBQztRQUVGLElBQVksWUFBWTtZQUN0QixPQUFPLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQztRQUNoRCxDQUFDO1FBRU0sTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBO21EQUNvQyxJQUFJLENBQUMsWUFBWTs7OEJBRXRDLElBQUksQ0FBQyxLQUFLO1VBQzlCLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxRQUFRLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUM7Z0JBQzNELENBQUMsQ0FBQyxJQUFJLENBQUEseUJBQXlCLElBQUksQ0FBQyxLQUFLLFNBQVM7Z0JBQ2xELENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTs7VUFFUixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsMEJBQTBCLElBQUksQ0FBQyxRQUFRLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7OztLQUdsRixDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBaEdVLHVEQUFlOzs7OztTQUFmLGVBQWUifQ==

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

@@ -1,4 +1,8 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+export type TSioButtonType = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+export type TSioButtonSize = 'sm' | 'default' | 'lg';
+export type TSioButtonStatus = 'normal' | 'pending' | 'success' | 'error';
 declare global {
     interface HTMLElementTagNameMap {
         'sio-button': SioButton;
@@ -7,10 +11,10 @@ declare global {
 export declare class SioButton extends DeesElement {
     static demo: () => TemplateResult<1>;
     accessor text: string;
-    accessor type: 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
-    accessor size: 'sm' | 'default' | 'lg';
+    accessor type: TSioButtonType;
+    accessor size: TSioButtonSize;
     accessor disabled: boolean;
-    accessor status: 'normal' | 'pending' | 'success' | 'error';
+    accessor status: TSioButtonStatus;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     private handleClick;