@social.io/catalog 1.3.0 → 2.1.0

package/dist_ts_web/elements/sio-button.js

@@ -1,38 +1,141 @@
-import { DeesElement, html, property, customElement, cssManager, css, unsafeCSS, } from '@design.estate/dees-element';
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions } from './00tokens.js';
-import { fontFamilies, typography } from './00fonts.js';
-@customElement('sio-button')
-export class SioButton extends DeesElement {
-    static demo = () => html `
-    <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
-      <sio-button>Default</sio-button>
-      <sio-button type="primary">Primary</sio-button>
-      <sio-button type="destructive">Delete</sio-button>
-      <sio-button type="outline">Outline</sio-button>
-      <sio-button type="ghost">Ghost</sio-button>
-      <sio-button size="sm">Small</sio-button>
-      <sio-button size="lg">Large</sio-button>
-      <sio-button disabled>Disabled</sio-button>
+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 } from './tokens.js';
+import './sio-icon.js';
+let SioButton = (() => {
+    let _classDecorators = [customElement('sio-button')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _text_decorators;
+    let _text_initializers = [];
+    let _text_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _status_decorators;
+    let _status_initializers = [];
+    let _status_extraInitializers = [];
+    var SioButton = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _text_decorators = [property({ type: String })];
+            _type_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: String })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _status_decorators = [property({ type: String })];
+            __esDecorate(this, null, _text_decorators, { kind: "accessor", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_extraInitializers);
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _status_decorators, { kind: "accessor", name: "status", static: false, private: false, access: { has: obj => "status" in obj, get: obj => obj.status, set: (obj, value) => { obj.status = value; } }, metadata: _metadata }, _status_initializers, _status_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioButton = _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; padding: 24px; background: var(--sio-bg); border-radius: 14px;"
+    >
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+        <sio-button type="primary">
+          <sio-icon icon="pencil" size="15"></sio-icon>
+          Compose
+        </sio-button>
+        <sio-button type="secondary">
+          <sio-icon icon="archive" size="15"></sio-icon>
+          Archive
+        </sio-button>
+        <sio-button type="outline">
+          <sio-icon icon="clock" size="15"></sio-icon>
+          Move to Later
+        </sio-button>
+        <sio-button type="ghost">Dismiss</sio-button>
+        <sio-button type="destructive">
+          <sio-icon icon="trash" size="15"></sio-icon>
+          Delete thread
+        </sio-button>
+      </div>
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+        <sio-button type="primary" size="sm">Reply</sio-button>
+        <sio-button type="secondary" size="sm">Forward</sio-button>
+        <sio-button type="primary">Mark as Done</sio-button>
+        <sio-button type="primary" size="lg">
+          <sio-icon icon="send" size="17"></sio-icon>
+          Send
+        </sio-button>
+        <sio-button type="outline" size="lg">Save draft</sio-button>
+      </div>
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+        <sio-button type="primary" status="pending">Sending…</sio-button>
+        <sio-button type="primary" status="success">Sent</sio-button>
+        <sio-button type="destructive" status="error">Failed</sio-button>
+        <sio-button type="primary" disabled>Compose</sio-button>
+        <sio-button type="secondary" disabled>Archive</sio-button>
+      </div>
     </div>
   `;
-    @property({ type: String })
-    accessor text = '';
-    @property({ type: String })
-    accessor type = 'default';
-    @property({ type: String })
-    accessor size = 'default';
-    @property({ type: Boolean, reflect: true })
-    accessor disabled = false;
-    @property({ type: String })
-    accessor status = 'normal';
-    static styles = [
-        cssManager.defaultStyles,
-        css `
+        #text_accessor_storage = __runInitializers(this, _text_initializers, '');
+        get text() { return this.#text_accessor_storage; }
+        set text(value) { this.#text_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _text_extraInitializers), __runInitializers(this, _type_initializers, 'default'));
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, 'default'));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #status_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _status_initializers, 'normal'));
+        get status() { return this.#status_accessor_storage; }
+        set status(value) { this.#status_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
       :host {
         display: inline-block;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
       }
 
       :host([disabled]) {
@@ -45,220 +148,218 @@ export class SioButton extends DeesElement {
         align-items: center;
         justify-content: center;
         white-space: nowrap;
-        border-radius: 6px;
-        font-weight: 500;
-        font-size: 14px;
+        border: var(--sio-hairline) solid transparent;
+        border-radius: var(--sio-radius);
+        font-family: var(--sio-font-sf);
+        font-weight: 600;
         line-height: 1;
-        letter-spacing: -0.01em;
-        transition: all 120ms ease;
+        transition:
+          background 120ms ease,
+          color 120ms ease,
+          border-color 120ms ease,
+          transform 80ms ease;
         cursor: pointer;
         user-select: none;
         outline: none;
-        border: none;
         gap: 6px;
       }
 
-      /* Size variants */
+      .button:active:not(.disabled) {
+        transform: scale(0.98);
+      }
+
+      .button:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: 2px;
+      }
+
+      /* Size ramp — SF footnote/subheadline tracking */
       .button.size-sm {
-        height: 32px;
-        padding: 0 12px;
-        font-size: 13px;
+        height: 28px;
+        padding: 0 10px;
+        font-size: 12px;
+        letter-spacing: 0;
+        gap: 5px;
       }
 
       .button.size-default {
         height: 36px;
-        padding: 0 16px;
-        font-size: 14px;
+        padding: 0 14px;
+        font-size: 13px;
+        letter-spacing: -0.08px;
       }
 
       .button.size-lg {
-        height: 42px;
-        padding: 0 24px;
+        height: 44px;
+        padding: 0 20px;
         font-size: 15px;
+        letter-spacing: -0.24px;
       }
 
-      /* Type variants */
-      .button.default {
-        background: ${bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
-        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
+      /* default falls back to the secondary look (iOS gray fill) */
+      .button.default,
+      .button.secondary {
+        background: var(--sio-surface-2);
+        color: var(--sio-label);
       }
 
-      .button.default:hover:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 20%)')};
+      .button.default:hover:not(.disabled),
+      .button.secondary:hover:not(.disabled) {
+        background: color-mix(in oklab, var(--sio-label) 10%, transparent);
       }
 
-      .button.default:active:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 87%)', 'hsl(0 0% 18%)')};
+      .button.default:active:not(.disabled),
+      .button.secondary:active:not(.disabled) {
+        background: color-mix(in oklab, var(--sio-label) 14%, transparent);
       }
 
+      /* primary — solid system tint. The on-tint label is white in both
+         themes per the v7 spec (solid tint/red fills always carry white). */
       .button.primary {
-        background: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
-        color: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 0%)')};
+        background: var(--sio-tint);
+        color: #ffffff;
       }
 
       .button.primary:hover:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 100%)')};
+        background: var(--sio-tint-hover);
       }
 
       .button.primary:active:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: color-mix(in oklab, var(--sio-tint) 88%, var(--sio-label));
       }
 
-      /* Secondary variant */
-      .button.secondary {
-        background: transparent;
-        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
-        box-shadow: inset 0 0 0 1px ${bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
-      }
-
-      .button.secondary:hover:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 15%)')};
-      }
-
-      .button.secondary:active:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 12%)')};
-      }
-      
-      /* Destructive variant */
+      /* destructive — solid system red */
       .button.destructive {
-        background: ${bdTheme('hsl(0 100% 95%)', 'hsl(0 50% 20%)')};
-        color: ${bdTheme('hsl(0 100% 45%)', 'hsl(0 100% 75%)')};
+        background: var(--sio-red);
+        color: #ffffff;
       }
 
       .button.destructive:hover:not(.disabled) {
-        background: ${bdTheme('hsl(0 100% 45%)', 'hsl(0 100% 50%)')};
-        color: white;
+        background: color-mix(in oklab, var(--sio-red) 88%, var(--sio-label));
       }
 
       .button.destructive:active:not(.disabled) {
-        background: ${bdTheme('hsl(0 100% 40%)', 'hsl(0 100% 45%)')};
-        color: white;
+        background: color-mix(in oklab, var(--sio-red) 80%, var(--sio-label));
       }
 
+      /* outline — hairline ring, quiet label */
       .button.outline {
         background: transparent;
-        color: ${bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
-        box-shadow: inset 0 0 0 1.5px ${bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 30%)')};
+        color: var(--sio-label);
+        border-color: var(--sio-separator-opaque);
       }
 
       .button.outline:hover:not(.disabled) {
-        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
-        box-shadow: inset 0 0 0 1.5px ${bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 50%)')};
+        background: var(--sio-surface-2);
       }
 
       .button.outline:active:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: color-mix(in oklab, var(--sio-label) 10%, transparent);
       }
 
+      /* ghost — bare label, fill on hover */
       .button.ghost {
         background: transparent;
-        color: ${bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+        color: var(--sio-label-2);
       }
 
       .button.ghost:hover:not(.disabled) {
-        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
-        background: ${bdTheme('hsl(0 0% 0% / 0.05)', 'hsl(0 0% 100% / 0.05)')};
+        color: var(--sio-label);
+        background: var(--sio-surface-2);
       }
 
       .button.ghost:active:not(.disabled) {
-        background: ${bdTheme('hsl(0 0% 0% / 0.1)', 'hsl(0 0% 100% / 0.1)')};
+        background: color-mix(in oklab, var(--sio-label) 10%, transparent);
       }
 
       /* Status states */
       .button.pending {
         pointer-events: none;
-        opacity: 0.7;
+        opacity: 0.75;
       }
 
       .spinner {
-        position: absolute;
-        left: ${unsafeCSS(spacing["3"])};
-        animation: spin 1s linear infinite;
+        animation: spin 900ms linear infinite;
       }
 
       @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
       }
 
       .button.success {
-        background: ${bdTheme('success')};
-        color: ${bdTheme('successForeground')};
+        background: var(--sio-green);
+        color: #ffffff;
         pointer-events: none;
       }
 
       .button.error {
-        background: ${bdTheme('destructive')};
-        color: ${bdTheme('destructiveForeground')};
+        background: var(--sio-red);
+        color: #ffffff;
         pointer-events: none;
       }
 
       /* Disabled state */
       .button.disabled {
-        opacity: 0.5;
+        opacity: 0.45;
         cursor: not-allowed;
         transform: none !important;
       }
 
-      /* Focus state */
-      .button:focus-visible {
-        outline: 2px solid ${bdTheme('hsl(0 0% 15% / 0.2)', 'hsl(0 0% 95% / 0.2)')};
-        outline-offset: 2px;
-      }
-      
       /* Icon sizing within buttons */
       .button sio-icon {
-        width: 16px;
-        height: 16px;
         flex-shrink: 0;
       }
-      
-      .button.size-sm sio-icon {
-        width: 14px;
-        height: 14px;
-      }
-      
-      .button.size-lg sio-icon {
-        width: 18px;
-        height: 18px;
-      }
     `,
-    ];
-    render() {
-        const buttonClasses = [
-            'button',
-            this.type === 'primary' ? 'primary' : this.type,
-            `size-${this.size}`,
-            this.disabled ? 'disabled' : '',
-            this.status,
-        ].filter(Boolean).join(' ');
-        return html `
-      <button
-        class="${buttonClasses}"
-        ?disabled=${this.disabled}
-        @click=${this.handleClick}
-      >
-        ${this.status === 'pending' ? html `
-          <sio-icon class="spinner" icon="loader" size="16"></sio-icon>
-        ` : ''}
-        ${this.status === 'success' ? html `
-          <sio-icon icon="check" size="16"></sio-icon>
-        ` : ''}
-        ${this.status === 'error' ? html `
-          <sio-icon icon="x" size="16"></sio-icon>
-        ` : ''}
+        ];
+        render() {
+            const buttonClasses = [
+                'button',
+                this.type,
+                `size-${this.size}`,
+                this.disabled ? 'disabled' : '',
+                this.status,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const statusIconSize = this.size === 'sm' ? 13 : this.size === 'lg' ? 17 : 15;
+            return html `
+      <button class="${buttonClasses}" ?disabled=${this.disabled} @click=${this.handleClick}>
+        ${this.status === 'pending'
+                ? html `<sio-icon class="spinner" icon="loader" size=${statusIconSize}></sio-icon>`
+                : ''}
+        ${this.status === 'success'
+                ? html `<sio-icon icon="check" size=${statusIconSize}></sio-icon>`
+                : ''}
+        ${this.status === 'error'
+                ? html `<sio-icon icon="x" size=${statusIconSize}></sio-icon>`
+                : ''}
         <slot>${this.text}</slot>
       </button>
     `;
-    }
-    handleClick(event) {
-        if (this.disabled || this.status !== 'normal') {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
         }
-        // Let the native click bubble normally
-        // Don't dispatch a custom event to avoid double-triggering
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWJ1dHRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tYnV0dG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsVUFBVSxFQUNWLEdBQUcsRUFDSCxTQUFTLEdBRVYsTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyx1QkFBdUI7QUFDdkIsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQVF4RCxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUM7QUFDNUIsTUFBTSxPQUFPLFNBQVUsU0FBUSxXQUFXO0lBQ2pDLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7Ozs7OztHQVc5QixDQUFDO0lBRUYsQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7SUFDcEIsUUFBUSxDQUFDLElBQUksR0FBVyxFQUFFLENBQUM7SUFFbEMsQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7SUFDcEIsUUFBUSxDQUFDLElBQUksR0FBOEUsU0FBUyxDQUFDO0lBRTVHLENBQUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO0lBQ3BCLFFBQVEsQ0FBQyxJQUFJLEdBQTRCLFNBQVMsQ0FBQztJQUUxRCxDQUFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO0lBQ3BDLFFBQVEsQ0FBQyxRQUFR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
+        handleClick(event) {
+            if (this.disabled || this.status !== 'normal') {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            // Let the native click bubble normally — no synthetic event, so
+            // consumers never see a double trigger.
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _status_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioButton = _classThis;
+})();
+export { SioButton };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWJ1dHRvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tYnV0dG9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQztJQW1CVixTQUFTOzRCQURyQixhQUFhLENBQUMsWUFBWSxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7eUJBQW5CLFNBQVEsV0FBVzs7OztnQ0E0Q3ZDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztnQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO2tDQUcxQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFYM0IsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFBYztZQUdsQyxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUE2QjtZQUdqRCxpS0FBZ0IsSUFBSSw2QkFBSixJQUFJLG1GQUE2QjtZQUdqRCw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFrQjtZQUcxQyx1S0FBZ0IsTUFBTSw2QkFBTixNQUFNLHVGQUE4QjtZQXpEdEQsNktBMlJDOzs7O1FBMVJRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7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

package/dist_ts_web/elements/sio-channel-rail.d.ts

@@ -0,0 +1,38 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+import './sio-logo.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-channel-rail': SioChannelRail;
+    }
+}
+export interface ISioChannelRailItem {
+    id: string;
+    label: string;
+    color: string;
+    icon: string;
+    unread?: number;
+}
+export interface ISioChannelSelectDetail {
+    id: string;
+    channel: ISioChannelRailItem;
+}
+/**
+ * sio-channel-rail — the 64px channel column at the very left of the
+ * desktop window (v7 prototype: SIOChannelRail in
+ * SocialIODesktopChannels.jsx).
+ *
+ * Each item stacks an 18px icon over a 10px label; the active item gets a
+ * rounded-10 chip and its channel color, and every item can carry an unread
+ * badge (channel-colored pill at top -5 / right -9 with a 2px ring cut out
+ * of the rail). Selecting a channel dispatches `channel-select` with
+ * `{ id, channel }` (bubbles, composed).
+ */
+export declare class SioChannelRail extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor channels: ISioChannelRailItem[];
+    accessor active: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private handleSelect;
+}