@social.io/catalog 1.3.0 → 2.0.0

package/ts_web/elements/sio-pdf-viewer.ts

@@ -4,16 +4,13 @@ import {
   html,
   customElement,
   type TemplateResult,
-  cssManager,
   css,
-  unsafeCSS,
   state,
 } from '@design.estate/dees-element';
 
-// Import design tokens
-import { bdTheme } from './00colors.js';
-import { spacing, radius, shadows } from './00tokens.js';
-import { fontFamilies } from './00fonts.js';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+import './sio-button.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -65,15 +62,15 @@ export class SioPdfViewer extends DeesElement {
   private resizeObserver: ResizeObserver | null = null;
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         display: block;
         width: 100%;
         height: 100%;
         position: relative;
-        background: ${bdTheme('background')};
-        font-family: ${unsafeCSS(fontFamilies.sans)};
+        background: var(--sio-surface);
+        font-family: var(--sio-font-sf);
       }
 
       .container {
@@ -91,46 +88,46 @@ export class SioPdfViewer extends DeesElement {
         display: flex;
         flex-direction: column;
         align-items: center;
-        background: ${bdTheme('muted')};
+        background: var(--sio-bg);
       }
-      
+
       .pdf-canvas-wrapper {
         position: relative;
-        margin: ${unsafeCSS(spacing["4"])} auto;
-        box-shadow: ${unsafeCSS(shadows.lg)};
-        background: white;
+        margin: 16px auto;
+        box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
+        background: var(--sio-surface);
       }
-      
+
       canvas {
         display: block;
         max-width: 100%;
         height: auto;
       }
-      
+
       .pdf-controls {
         position: sticky;
         top: 0;
         z-index: 10;
         width: 100%;
-        padding: ${unsafeCSS(spacing["3"])};
-        background: ${bdTheme('background')};
-        border-bottom: 1px solid ${bdTheme('border')};
+        padding: 12px;
+        background: var(--sio-surface);
+        border-bottom: var(--sio-hairline) solid var(--sio-separator);
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: ${unsafeCSS(spacing["3"])};
-        box-shadow: ${unsafeCSS(shadows.sm)};
+        gap: 12px;
       }
-      
+
       .pdf-controls-group {
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["2"])};
+        gap: 8px;
       }
-      
+
       .page-info {
-        font-size: 0.875rem;
-        color: ${bdTheme('mutedForeground')};
+        font-size: 13px;
+        color: var(--sio-label-3);
+        font-variant-numeric: tabular-nums;
         min-width: 100px;
         text-align: center;
       }
@@ -141,12 +138,12 @@ export class SioPdfViewer extends DeesElement {
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
-        color: ${bdTheme('mutedForeground')};
+        color: var(--sio-label-3);
       }
 
       .spinner {
         animation: spin 1s linear infinite;
-        margin-bottom: ${unsafeCSS(spacing["2"])};
+        margin-bottom: 8px;
       }
 
       @keyframes spin {
@@ -164,35 +161,36 @@ export class SioPdfViewer extends DeesElement {
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
-        padding: ${unsafeCSS(spacing["6"])};
-        background: ${bdTheme('card')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.lg)};
-        box-shadow: ${unsafeCSS(shadows.md)};
+        padding: 24px;
+        background: var(--sio-surface);
+        border: var(--sio-hairline) solid var(--sio-separator);
+        border-radius: var(--sio-radius-lg);
+        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
         max-width: 400px;
       }
 
       .error-icon {
-        color: ${bdTheme('destructive')};
-        margin-bottom: ${unsafeCSS(spacing["3"])};
+        color: var(--sio-red);
+        margin-bottom: 12px;
       }
 
       .error-title {
-        font-size: 1.125rem;
+        font-size: 17px;
         font-weight: 600;
-        color: ${bdTheme('foreground')};
-        margin-bottom: ${unsafeCSS(spacing["2"])};
+        letter-spacing: -0.43px;
+        color: var(--sio-label);
+        margin-bottom: 8px;
       }
 
       .error-message {
-        color: ${bdTheme('mutedForeground')};
-        margin-bottom: ${unsafeCSS(spacing["4"])};
-        font-size: 0.875rem;
+        color: var(--sio-label-3);
+        margin-bottom: 16px;
+        font-size: 13px;
       }
 
       .error-actions {
         display: flex;
-        gap: ${unsafeCSS(spacing["2"])};
+        gap: 8px;
         justify-content: center;
       }
 
@@ -201,24 +199,24 @@ export class SioPdfViewer extends DeesElement {
         height: 100%;
         display: flex;
         flex-direction: column;
-        background: ${bdTheme('background')};
+        background: var(--sio-surface);
       }
 
       .fallback-header {
-        padding: ${unsafeCSS(spacing["4"])};
-        border-bottom: 1px solid ${bdTheme('border')};
+        padding: 16px;
+        border-bottom: var(--sio-hairline) solid var(--sio-separator);
         display: flex;
         align-items: center;
         justify-content: space-between;
-        background: ${bdTheme('card')};
+        background: var(--sio-surface);
       }
 
       .fallback-title {
         font-weight: 500;
-        color: ${bdTheme('foreground')};
+        color: var(--sio-label);
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["2"])};
+        gap: 8px;
       }
 
       .fallback-content {
@@ -226,24 +224,24 @@ export class SioPdfViewer extends DeesElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: ${unsafeCSS(spacing["8"])};
+        padding: 32px;
       }
 
       .fallback-message {
         text-align: center;
-        color: ${bdTheme('mutedForeground')};
+        color: var(--sio-label-3);
       }
 
       .fallback-icon {
         font-size: 48px;
-        margin-bottom: ${unsafeCSS(spacing["4"])};
+        margin-bottom: 16px;
         opacity: 0.5;
       }
 
       .fallback-text {
-        margin-bottom: ${unsafeCSS(spacing["4"])};
+        margin-bottom: 16px;
       }
-      
+
       /* Scrollbar styling */
       .pdf-container::-webkit-scrollbar {
         width: 8px;
@@ -251,25 +249,25 @@ export class SioPdfViewer extends DeesElement {
       }
 
       .pdf-container::-webkit-scrollbar-track {
-        background: ${bdTheme('muted')};
+        background: var(--sio-bg);
       }
 
       .pdf-container::-webkit-scrollbar-thumb {
-        background: ${bdTheme('border')};
+        background: var(--sio-separator-opaque);
         border-radius: 4px;
       }
 
       .pdf-container::-webkit-scrollbar-thumb:hover {
-        background: ${bdTheme('mutedForeground')};
+        background: var(--sio-label-4);
       }
-      
+
       /* Responsive */
       @media (max-width: 600px) {
         .pdf-controls {
           flex-wrap: wrap;
-          gap: ${unsafeCSS(spacing["2"])};
+          gap: 8px;
         }
-        
+
         .pdf-controls-group {
           flex-wrap: nowrap;
         }
@@ -523,7 +521,7 @@ export class SioPdfViewer extends DeesElement {
       this.renderTask = page.render(renderContext);
       await this.renderTask.promise;
     } catch (error) {
-      if (error.name !== 'RenderingCancelledException') {
+      if ((error as any).name !== 'RenderingCancelledException') {
         console.error('Error rendering page:', error);
       }
     }

package/ts_web/elements/sio-segmented.ts

@@ -0,0 +1,183 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-segmented': SioSegmented;
+  }
+}
+
+export interface ISioSegment {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+export interface ISioSegmentChangeDetail {
+  id: string;
+  segment: ISioSegment;
+}
+
+/**
+ * sio-segmented — iOS-style segmented control (v7 prototype:
+ * SocialIOUnified.jsx mode switch — Priority / Timeline / By person).
+ *
+ * Recessed systemGray track (2px inner padding, radius 9), the selected
+ * segment floats on a white / systemGray knob with the layered iOS shadow
+ * and steps up to weight 600. Selecting a segment dispatches
+ * `segment-change` with `{ id, segment }` (bubbles, composed).
+ */
+@customElement('sio-segmented')
+export class SioSegmented extends DeesElement {
+  public static demo = () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 20px; max-width: 360px; padding: 20px; border-radius: 14px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <sio-segmented
+        .segments=${[
+          { id: 'priority', label: 'Priority' },
+          { id: 'time', label: 'Timeline' },
+          { id: 'person', label: 'By person' },
+        ]}
+        selected="priority"
+      ></sio-segmented>
+
+      <sio-segmented
+        .segments=${[
+          { id: 'feed', label: 'Feed', count: 12 },
+          { id: 'paper', label: 'Paper', count: 4 },
+          { id: 'people', label: 'People', count: 3 },
+        ]}
+        selected="people"
+      ></sio-segmented>
+
+      <sio-segmented
+        .segments=${[
+          { id: 'all', label: 'All' },
+          { id: 'unread', label: 'Unread', count: 7 },
+        ]}
+        selected="all"
+      ></sio-segmented>
+    </div>
+  `;
+
+  @property({ type: Array })
+  public accessor segments: ISioSegment[] = [];
+
+  @property({ type: String })
+  public accessor selected = '';
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+
+        /* iOS UISegmentedControl selected fill — white in light, systemGray
+           #636366 in dark. Not modeled in tokens.ts (it is knob-specific,
+           not a surface), so it branches here via the same theme mechanism
+           tokens.ts uses — no string concatenation. */
+        --sio-segmented-knob: ${cssManager.bdTheme('#FFFFFF', '#636366')};
+      }
+
+      .track {
+        display: flex;
+        padding: 2px;
+        border-radius: 9px;
+        background: var(--sio-surface-2);
+      }
+
+      .segment {
+        appearance: none;
+        border: none;
+        margin: 0;
+        flex: 1;
+        min-width: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 5px 0;
+        border-radius: 7px;
+        background: transparent;
+        font-family: var(--sio-font-sf);
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+        line-height: 1.25;
+        color: var(--sio-label-3);
+        white-space: nowrap;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
+      }
+
+      .segment:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: 1px;
+      }
+
+      .segment.selected {
+        background: var(--sio-segmented-knob);
+        color: var(--sio-label);
+        font-weight: 600;
+        box-shadow:
+          0 1px 4px rgba(0, 0, 0, 0.12),
+          0 0 0 0.5px rgba(0, 0, 0, 0.04);
+      }
+
+      .count {
+        font-variant-numeric: tabular-nums;
+        font-size: 12px;
+        font-weight: 500;
+        opacity: 0.55;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const selectedId = this.selected || this.segments[0]?.id;
+    return html`
+      <div class="track" role="tablist">
+        ${this.segments.map(
+          (segment) => html`
+            <button
+              type="button"
+              role="tab"
+              class="segment ${segment.id === selectedId ? 'selected' : ''}"
+              aria-selected=${segment.id === selectedId ? 'true' : 'false'}
+              @click=${() => this.handleSelect(segment)}
+            >
+              ${segment.label}
+              ${segment.count !== undefined
+                ? html`<span class="count">${segment.count}</span>`
+                : html``}
+            </button>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  private handleSelect(segment: ISioSegment): void {
+    if (segment.id === this.selected) {
+      return;
+    }
+    this.selected = segment.id;
+    this.dispatchEvent(
+      new CustomEvent<ISioSegmentChangeDetail>('segment-change', {
+        detail: { id: segment.id, segment },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}

package/ts_web/elements/sio-step-timeline.ts

@@ -0,0 +1,179 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+
+export interface ISioStepTimelineStep {
+  when: string;
+  label: string;
+  done: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sio-step-timeline': SioStepTimeline;
+  }
+}
+
+/**
+ * sio-step-timeline — v7 vertical tracking timeline (outbound letters,
+ * delivery receipts, meeting prep …).
+ *
+ * 14px dots take the accent color once a step is done; the 2px connecting
+ * line only colors between two completed steps. Labels sit at 14.5px with
+ * muted 12px timestamps underneath — exactly the SIOLetterTracking recipe.
+ */
+@customElement('sio-step-timeline')
+export class SioStepTimeline extends DeesElement {
+  public static demo = () => html`
+    <div
+      style="display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; background: var(--sio-bg); border-radius: 18px; font-family: var(--sio-font-sf);"
+    >
+      <div
+        style="flex: 1; min-width: 260px; background: var(--sio-surface); border: 0.5px solid var(--sio-separator); border-radius: 16px; padding: 14px 16px;"
+      >
+        <div
+          style="font-size: 11px; font-weight: 700; color: var(--sio-label-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px;"
+        >
+          Tracking
+        </div>
+        <sio-step-timeline
+          .steps=${[
+            { when: 'Today 08:10', label: 'Printed at Berlin-Mitte print hub', done: true },
+            { when: 'Today 09:42', label: 'Handed to Deutsche Post', done: true },
+            { when: 'Tomorrow', label: 'In transit', done: false },
+            { when: 'Thu', label: 'Delivered', done: false },
+          ]}
+        ></sio-step-timeline>
+      </div>
+      <div
+        style="flex: 1; min-width: 260px; background: var(--sio-surface); border: 0.5px solid var(--sio-separator); border-radius: 16px; padding: 14px 16px;"
+      >
+        <div
+          style="font-size: 11px; font-weight: 700; color: var(--sio-label-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px;"
+        >
+          Delivery
+        </div>
+        <sio-step-timeline
+          color="var(--sio-bucket-done)"
+          .steps=${[
+            { when: 'Mon 14:48', label: 'Printed at Berlin-Mitte print hub', done: true },
+            { when: 'Mon 16:02', label: 'Handed to Deutsche Post', done: true },
+            { when: 'Tue', label: 'In transit', done: true },
+            { when: 'Wed 11:15', label: 'Delivered', done: true },
+          ]}
+        ></sio-step-timeline>
+      </div>
+    </div>
+  `;
+
+  /** Ordered steps, first to last. */
+  @property({ type: Array })
+  public accessor steps: ISioStepTimelineStep[] = [];
+
+  /** Accent for completed dots + connecting lines. Defaults to the letters channel. */
+  @property({ type: String })
+  public accessor color: string = 'var(--sio-ch-letters)';
+
+  public static styles = [
+    ...sioElementStyles,
+    css`
+      :host {
+        display: block;
+        color: var(--sio-label);
+      }
+
+      .step {
+        position: relative;
+        display: flex;
+        gap: 12px;
+        margin-bottom: 14px;
+      }
+      .step:last-child {
+        margin-bottom: 0;
+      }
+
+      .dot {
+        box-sizing: border-box;
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        margin-top: 3px;
+        flex-shrink: 0;
+        background: transparent;
+        border: 2px solid var(--sio-label-3);
+        position: relative;
+        z-index: 2;
+      }
+      .step.done .dot {
+        background: var(--step-color);
+        border-color: var(--step-color);
+      }
+
+      .line {
+        position: absolute;
+        left: 6px;
+        top: 17px;
+        bottom: -14px;
+        width: 2px;
+        background: var(--sio-separator);
+      }
+      .line.done {
+        background: var(--step-color);
+      }
+
+      .body {
+        flex: 1;
+        min-width: 0;
+        padding-bottom: 2px;
+      }
+
+      .label {
+        font-size: 14.5px;
+        line-height: 1.35;
+        font-weight: 400;
+        color: var(--sio-label);
+      }
+      .step.done .label {
+        font-weight: 500;
+      }
+
+      .when {
+        font-size: 12px;
+        color: var(--sio-label-3);
+        margin-top: 1px;
+        font-variant-numeric: tabular-nums;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div style="--step-color: ${this.color};">
+        ${this.steps.map(
+          (step, index) => html`
+            <div class="step ${step.done ? 'done' : ''}">
+              <div class="dot"></div>
+              ${index < this.steps.length - 1
+                ? html`
+                    <div
+                      class="line ${step.done && this.steps[index + 1].done ? 'done' : ''}"
+                    ></div>
+                  `
+                : html``}
+              <div class="body">
+                <div class="label">${step.label}</div>
+                <div class="when">${step.when}</div>
+              </div>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  }
+}