@signalwire/web-components 4.0.0-beta.0 → 4.0.0-beta.2

package/README.md

@@ -29,7 +29,7 @@ import { CallMedia, CallControls, SelfMedia } from '@signalwire/web-components';
 
 ```html
 <!-- Basic video call layout -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants>
     <sw-self-media mirror></sw-self-media>
   </sw-participants>
@@ -51,6 +51,7 @@ Root container component that renders the remote video stream and provides call
 | `call` | `Call` | - | Call object with streams and layout data |
 
 **CSS Custom Properties:**
+
 ```css
 sw-call-media {
   --sw-color-primary: #044cf6;
@@ -62,12 +63,13 @@ sw-call-media {
 **CSS Parts:** `container`, `video`, `layers`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-call-media .call=${call}></sw-call-media>
+<sw-call-media .call="${call}"></sw-call-media>
 
 <!-- With child components -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants>
     <sw-self-media></sw-self-media>
   </sw-participants>
@@ -96,6 +98,7 @@ Renders the local video stream as an overlay with positioning from layout layers
 **Context:** Consumes `callContext` from parent `sw-call-media`
 
 **Usage:**
+
 ```html
 <!-- Basic usage (inside sw-participants) -->
 <sw-participants>
@@ -119,14 +122,15 @@ Renders overlay containers for all remote participants based on layout layer dat
 **Context:** Consumes `callContext` from parent `sw-call-media`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants></sw-participants>
 </sw-call-media>
 
 <!-- With local video as child -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <sw-participants>
     <sw-self-media mirror></sw-self-media>
   </sw-participants>
@@ -155,6 +159,7 @@ Responsive button bar for call actions: mute audio, mute video, screen share, an
 | `sw-hangup` | - | Call ended |
 
 **CSS Custom Properties:**
+
 ```css
 sw-call-controls {
   --sw-color-primary: #044cf6;
@@ -168,15 +173,16 @@ sw-call-controls {
 **CSS Parts:** `container`, `button`, `button-active`, `button-disabled`, `tooltip`
 
 **Usage:**
+
 ```html
 <!-- Basic usage (uses context from sw-call-media) -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <!-- ... -->
 </sw-call-media>
 <sw-call-controls></sw-call-controls>
 
 <!-- With explicit call property -->
-<sw-call-controls .call=${call} orientation="vertical"></sw-call-controls>
+<sw-call-controls .call="${call}" orientation="vertical"></sw-call-controls>
 
 <!-- Without tooltips -->
 <sw-call-controls show-tooltips="false"></sw-call-controls>
@@ -209,6 +215,7 @@ Displays call state, status text, and duration timer.
 **Status Values:** `idle`, `connecting`, `ringing`, `connected`, `disconnecting`, `disconnected`
 
 **CSS Custom Properties:**
+
 ```css
 sw-call-status {
   --sw-color-primary: #044cf6;
@@ -221,12 +228,13 @@ sw-call-status {
 **CSS Parts:** `container`, `status-text`, `duration`
 
 **Usage:**
+
 ```html
 <!-- Basic usage (uses context) -->
 <sw-call-status></sw-call-status>
 
 <!-- With explicit call -->
-<sw-call-status .call=${call}></sw-call-status>
+<sw-call-status .call="${call}"></sw-call-status>
 ```
 
 ---
@@ -250,6 +258,7 @@ sw-call-status {
 | `sw-dial` | `{ digits: string }` | Call button clicked |
 
 **CSS Custom Properties:**
+
 ```css
 sw-dialpad {
   --sw-color-primary: #044cf6;
@@ -262,6 +271,7 @@ sw-dialpad {
 **CSS Parts:** `container`, `display`, `keypad`, `key`, `key-pressed`, `call-button`
 
 **Usage:**
+
 ```html
 <!-- Basic DTMF dialpad (uses context) -->
 <sw-dialpad></sw-dialpad>
@@ -270,7 +280,7 @@ sw-dialpad {
 <sw-dialpad show-call-button placeholder="Phone number"></sw-dialpad>
 
 <!-- With explicit call -->
-<sw-dialpad .call=${call}></sw-dialpad>
+<sw-dialpad .call="${call}"></sw-dialpad>
 ```
 
 ```typescript
@@ -306,6 +316,7 @@ Dropdown for selecting audio/video input and output devices.
 | `sw-test-speaker` | - | Speaker test triggered |
 
 **CSS Custom Properties:**
+
 ```css
 sw-device-selector {
   --sw-color-primary: #044cf6;
@@ -317,15 +328,13 @@ sw-device-selector {
 **CSS Parts:** `container`, `tabs`, `device-list`, `device-item`, `device-item-selected`, `preview`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-device-selector .deviceController=${deviceController}></sw-device-selector>
+<sw-device-selector .deviceController="${deviceController}"></sw-device-selector>
 
 <!-- With preview panel -->
-<sw-device-selector
-  .deviceController=${deviceController}
-  show-preview>
-</sw-device-selector>
+<sw-device-selector .deviceController="${deviceController}" show-preview> </sw-device-selector>
 ```
 
 ```typescript
@@ -353,6 +362,7 @@ Real-time audio level indicator using Web Audio API.
 | `maxSize` | `number` | `32` | Maximum bar height/width in pixels |
 
 **CSS Custom Properties:**
+
 ```css
 sw-audio-level {
   --sw-color-success: #10b981;
@@ -368,16 +378,13 @@ sw-audio-level {
 **CSS Parts:** `container`, `bar`, `bar-active`
 
 **Usage:**
+
 ```html
 <!-- Basic usage -->
-<sw-audio-level .stream=${localStream}></sw-audio-level>
+<sw-audio-level .stream="${localStream}"></sw-audio-level>
 
 <!-- Horizontal with more bars -->
-<sw-audio-level
-  .stream=${localStream}
-  orientation="horizontal"
-  bars="10"
-  maxSize="48">
+<sw-audio-level .stream="${localStream}" orientation="horizontal" bars="10" maxSize="48">
 </sw-audio-level>
 ```
 
@@ -403,6 +410,7 @@ Single button widget for calling a preconfigured destination.
 | `sw-hangup` | - | Call ended |
 
 **CSS Custom Properties:**
+
 ```css
 sw-click-to-call {
   --sw-color-primary: #044cf6;
@@ -414,20 +422,19 @@ sw-click-to-call {
 **CSS Parts:** `container`, `button`, `controls`, `status`, `duration`
 
 **Usage:**
+
 ```html
 <!-- Basic click-to-call button -->
-<sw-click-to-call
-  .client=${client}
-  destination="sip:support@example.com"
-  label="Contact Support">
+<sw-click-to-call .client="${client}" destination="sip:support@example.com" label="Contact Support">
 </sw-click-to-call>
 
 <!-- Audio/video call -->
 <sw-click-to-call
-  .client=${client}
+  .client="${client}"
   destination="+15551234567"
   label="Call Sales"
-  audio-only="false">
+  audio-only="false"
+>
 </sw-click-to-call>
 ```
 
@@ -461,6 +468,7 @@ Searchable list of directory addresses for selecting call destinations.
 | `sw-dial` | `{ address: Address }` | Address dialed (double-click) |
 
 **CSS Custom Properties:**
+
 ```css
 sw-directory {
   --sw-color-primary: #044cf6;
@@ -472,9 +480,10 @@ sw-directory {
 **CSS Parts:** `container`, `search`, `list`, `item`, `item-selected`, `item-name`, `item-type`, `item-channels`
 
 **Usage:**
+
 ```html
 <!-- Basic directory list -->
-<sw-directory .directory=${directoryService}></sw-directory>
+<sw-directory .directory="${directoryService}"></sw-directory>
 ```
 
 ```typescript
@@ -517,6 +526,7 @@ Control panel for individual participant actions (mute, volume, pin, remove).
 **CSS Parts:** `container`, `action-button`, `slider`
 
 **Usage:**
+
 ```html
 <!-- Basic participant controls -->
 <sw-participant-controls
@@ -564,6 +574,7 @@ Simple example button component for demonstration purposes.
 **CSS Parts:** `button`
 
 **Usage:**
+
 ```html
 <!-- Primary button -->
 <sw-example-button>Click Me</sw-example-button>
@@ -580,7 +591,7 @@ The components use Lit context (`@lit/context`) to share call state. The `sw-cal
 
 ```html
 <!-- sw-call-media provides context -->
-<sw-call-media .call=${call}>
+<sw-call-media .call="${call}">
   <!-- These components consume context automatically -->
   <sw-participants>
     <sw-self-media></sw-self-media>
@@ -588,8 +599,8 @@ The components use Lit context (`@lit/context`) to share call state. The `sw-cal
 </sw-call-media>
 
 <!-- Components outside sw-call-media need explicit call property -->
-<sw-call-controls .call=${call}></sw-call-controls>
-<sw-call-status .call=${call}></sw-call-status>
+<sw-call-controls .call="${call}"></sw-call-controls>
+<sw-call-status .call="${call}"></sw-call-status>
 ```
 
 ---
@@ -655,12 +666,7 @@ sw-call-media::part(video) {
 ## TypeScript Interfaces
 
 ```typescript
-import type {
-  Call,
-  LayoutLayer,
-  DeviceInfo,
-  Address
-} from '@signalwire/web-components';
+import type { Call, LayoutLayer, DeviceInfo, Address } from '@signalwire/web-components';
 
 // Call object interface
 interface Call {
@@ -714,68 +720,68 @@ interface Address {
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <style>
-    .call-container {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      background: #000;
-    }
-
-    .video-area {
-      flex: 1;
-      position: relative;
-    }
-
-    .controls-bar {
-      padding: 16px;
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-      background: rgba(0, 0, 0, 0.8);
-    }
-  </style>
-</head>
-<body>
-  <div class="call-container">
-    <sw-call-status></sw-call-status>
-
-    <div class="video-area">
-      <sw-call-media id="call-media">
-        <sw-participants>
-          <sw-self-media mirror></sw-self-media>
-        </sw-participants>
-      </sw-call-media>
-    </div>
-
-    <div class="controls-bar">
-      <sw-call-controls></sw-call-controls>
-      <sw-dialpad></sw-dialpad>
+  <head>
+    <style>
+      .call-container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        background: #000;
+      }
+
+      .video-area {
+        flex: 1;
+        position: relative;
+      }
+
+      .controls-bar {
+        padding: 16px;
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        background: rgba(0, 0, 0, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="call-container">
+      <sw-call-status></sw-call-status>
+
+      <div class="video-area">
+        <sw-call-media id="call-media">
+          <sw-participants>
+            <sw-self-media mirror></sw-self-media>
+          </sw-participants>
+        </sw-call-media>
+      </div>
+
+      <div class="controls-bar">
+        <sw-call-controls></sw-call-controls>
+        <sw-dialpad></sw-dialpad>
+      </div>
     </div>
-  </div>
 
-  <script type="module">
-    import '@signalwire/web-components';
-    import { SignalWire } from '@signalwire/signalwire-js';
+    <script type="module">
+      import '@signalwire/web-components';
+      import { SignalWire } from '@signalwire/js';
 
-    const client = new SignalWire({
-      host: 'your-signalwire-space.signalwire.com',
-      token: 'your-token'
-    });
+      const client = new SignalWire({
+        host: 'your-signalwire-space.signalwire.com',
+        token: 'your-token'
+      });
 
-    await client.connect();
+      await client.connect();
 
-    const call = await client.call({
-      destination: 'sip:room@example.com',
-      audio: true,
-      video: true
-    });
+      const call = await client.call({
+        destination: 'sip:room@example.com',
+        audio: true,
+        video: true
+      });
 
-    // Set the call on the media component (provides context)
-    document.getElementById('call-media').call = call;
-  </script>
-</body>
+      // Set the call on the media component (provides context)
+      document.getElementById('call-media').call = call;
+    </script>
+  </body>
 </html>
 ```