@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-button.ts

@@ -3,16 +3,22 @@ import {
   html,
   property,
   customElement,
-  cssManager,
   css,
-  unsafeCSS,
   type TemplateResult,
 } 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';
+import { sioElementStyles } from './tokens.js';
+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 {
@@ -23,15 +29,45 @@ declare global {
 @customElement('sio-button')
 export class SioButton extends DeesElement {
   public 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>
+    <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>
   `;
 
@@ -39,23 +75,22 @@ export class SioButton extends DeesElement {
   public accessor text: string = '';
 
   @property({ type: String })
-  public accessor type: 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' = 'default';
+  public accessor type: TSioButtonType = 'default';
 
   @property({ type: String })
-  public accessor size: 'sm' | 'default' | 'lg' = 'default';
+  public accessor size: TSioButtonSize = 'default';
 
   @property({ type: Boolean, reflect: true })
   public accessor disabled: boolean = false;
 
   @property({ type: String })
-  public accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  public accessor status: TSioButtonStatus = 'normal';
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         display: inline-block;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
       }
 
       :host([disabled]) {
@@ -68,210 +103,199 @@ 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%)')};
-      }
-
-      /* 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%)')};
+        background: color-mix(in oklab, var(--sio-tint) 88%, var(--sio-label));
       }
 
-      .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;
-      }
     `,
   ];
 
   public render(): TemplateResult {
     const buttonClasses = [
       'button',
-      this.type === 'primary' ? 'primary' : this.type,
+      this.type,
       `size-${this.size}`,
       this.disabled ? 'disabled' : '',
       this.status,
-    ].filter(Boolean).join(' ');
+    ]
+      .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="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>
-        ` : ''}
+      <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>
     `;
@@ -283,9 +307,7 @@ export class SioButton extends DeesElement {
       event.stopPropagation();
       return;
     }
-
-
-    // Let the native click bubble normally
-    // Don't dispatch a custom event to avoid double-triggering
+    // Let the native click bubble normally — no synthetic event, so
+    // consumers never see a double trigger.
   }
-}
+}

package/ts_web/elements/sio-channel-rail.ts

@@ -0,0 +1,256 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+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;
+}
+
+/**
+ * The v7 channel set — All / Mail / Chats / Calls / Letters
+ * (prototype: SIO_CHANNELS in SocialIOData.jsx).
+ */
+const defaultChannels: ISioChannelRailItem[] = [
+  { id: 'all', label: 'All', color: 'var(--sio-blue)', icon: 'grid-2x2' },
+  { id: 'mail', label: 'Mail', color: 'var(--sio-ch-mail)', icon: 'mail' },
+  { id: 'chats', label: 'Chats', color: 'var(--sio-ch-chats)', icon: 'message-circle' },
+  { id: 'calls', label: 'Calls', color: 'var(--sio-ch-calls)', icon: 'phone' },
+  { id: 'letters', label: 'Letters', color: 'var(--sio-ch-letters)', icon: 'file-text' },
+];
+
+/**
+ * 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).
+ */
+@customElement('sio-channel-rail')
+export class SioChannelRail extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 24px; font-family: var(--sio-font-sf);">
+      <!-- busy morning: unreads on every channel -->
+      <div
+        style="display: flex; height: 340px; border-radius: 12px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator);"
+      >
+        <sio-channel-rail
+          active="mail"
+          .channels=${[
+            { id: 'all', label: 'All', color: 'var(--sio-blue)', icon: 'grid-2x2', unread: 3 },
+            { id: 'mail', label: 'Mail', color: 'var(--sio-ch-mail)', icon: 'mail', unread: 4 },
+            { id: 'chats', label: 'Chats', color: 'var(--sio-ch-chats)', icon: 'message-circle', unread: 7 },
+            { id: 'calls', label: 'Calls', color: 'var(--sio-ch-calls)', icon: 'phone', unread: 1 },
+            { id: 'letters', label: 'Letters', color: 'var(--sio-ch-letters)', icon: 'file-text', unread: 2 },
+          ]}
+        ></sio-channel-rail>
+        <div style="width: 210px; background: var(--sio-surface); padding: 14px 16px;">
+          <div style="font-size: 13px; font-weight: 600; color: var(--sio-label);">Inbox</div>
+          <div style="margin-top: 2px; font-size: 11px; color: var(--sio-label-3);">
+            4 unread · Feed 12 · Paper 4
+          </div>
+        </div>
+      </div>
+
+      <!-- Letters active, all clear -->
+      <div
+        style="display: flex; height: 340px; border-radius: 12px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator);"
+      >
+        <sio-channel-rail active="letters"></sio-channel-rail>
+        <div style="width: 210px; background: var(--sio-surface); padding: 14px 16px;">
+          <div style="font-size: 13px; font-weight: 600; color: var(--sio-label);">Letters</div>
+          <div style="margin-top: 2px; font-size: 11px; color: var(--sio-label-3);">
+            Scan station online · 1 queued
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  @property({ type: Array })
+  public accessor channels: ISioChannelRailItem[] = defaultChannels;
+
+  @property({ type: String })
+  public accessor active = 'mail';
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      /* Rail chrome: the systemGray fill composited over the canvas —
+         #E8E8EC light / #1C1C1F dark, matching the design's #EDEDEE/#17171A
+         from tokens alone. */
+      .rail {
+        width: 64px;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 2px;
+        padding: 10px 8px;
+        background-color: var(--sio-bg);
+        background-image: linear-gradient(var(--sio-surface-2), var(--sio-surface-2));
+        border-right: var(--sio-hairline) solid var(--sio-separator);
+      }
+
+      .brand {
+        height: 35px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 2px 0 9px;
+      }
+
+      .item {
+        appearance: none;
+        border: none;
+        margin: 0;
+        position: relative;
+        padding: 8px 0;
+        border-radius: var(--sio-radius);
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3px;
+        font-family: var(--sio-font-sf);
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: background 120ms ease, color 120ms ease;
+      }
+
+      .item.active {
+        background: color-mix(in oklab, var(--sio-label) 5%, transparent);
+      }
+
+      .item:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: -2px;
+      }
+
+      .glyph {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--sio-label-3);
+      }
+
+      .item.active .glyph {
+        color: var(--_channel-color, var(--sio-tint));
+      }
+
+      .badge {
+        position: absolute;
+        top: -5px;
+        right: -9px;
+        min-width: 15px;
+        height: 15px;
+        padding: 0 4px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        background: var(--_channel-color, var(--sio-tint));
+        /* fixed foreground on the theme-stable channel palette */
+        color: #ffffff;
+        font-size: 10px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        /* 2px ring in the rail's own chrome tone */
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--sio-label) 8%, var(--sio-bg));
+      }
+
+      .label {
+        font-size: 10px;
+        font-weight: 500;
+        letter-spacing: 0.02px;
+        line-height: 1.25;
+        color: var(--sio-label-2);
+        white-space: nowrap;
+      }
+
+      .item.active .label {
+        font-weight: 600;
+        color: var(--sio-label);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <nav class="rail" part="rail">
+        <div class="brand" part="brand">
+          <sio-logo size="24" no-entrance no-hover aria-hidden="true"></sio-logo>
+        </div>
+        ${this.channels.map(
+          (channel) => html`
+            <button
+              type="button"
+              class="item ${channel.id === this.active ? 'active' : ''}"
+              style="--_channel-color: ${channel.color}"
+              aria-current=${channel.id === this.active ? 'page' : 'false'}
+              @click=${() => this.handleSelect(channel)}
+            >
+              <span class="glyph">
+                <sio-icon icon=${channel.icon} size="18" .strokeWidth=${1.7}></sio-icon>
+                ${channel.unread
+                  ? html`<span class="badge">${channel.unread}</span>`
+                  : html``}
+              </span>
+              <span class="label">${channel.label}</span>
+            </button>
+          `,
+        )}
+      </nav>
+    `;
+  }
+
+  private handleSelect(channel: ISioChannelRailItem): void {
+    if (channel.id === this.active) {
+      return;
+    }
+    this.active = channel.id;
+    this.dispatchEvent(
+      new CustomEvent<ISioChannelSelectDetail>('channel-select', {
+        detail: { id: channel.id, channel },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}