@signalwire/web-components 4.0.0-beta.8 → 4.0.0-dev-20260515133934

package/README.md

@@ -24,9 +24,9 @@ npm install @signalwire/web-components
 import '@signalwire/web-components';
 
 // Or import specific components
-import '@signalwire/web-components/call-status';
-import '@signalwire/web-components/call-media';
-import '@signalwire/web-components/self-media';
+import '@signalwire/web-components/sw-call-status';
+import '@signalwire/web-components/sw-call-media';
+import '@signalwire/web-components/sw-self-media';
 ```
 
 ```html
@@ -241,53 +241,42 @@ sw-call-status {
 
 ---
 
-### sw-dialpad
+### sw-ui-dialpad
 
-12-key telephone keypad for DTMF tones and dialing.
+12-key telephone keypad for DTMF tones and dialing. (Replaces the legacy
+`<sw-dialpad>` element, which has been removed.)
 
 **Properties:**
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `call` | `DialpadCall` | - | Call with sendDigits method |
 | `showCallButton` | `boolean` | `false` | Show call button below keypad |
 | `placeholder` | `string` | `'Enter number'` | Input placeholder text |
+| `allowText` | `boolean` | `false` | Allow free-text input in the display |
 
 **Events:**
 | Event | Detail | Description |
 |-------|--------|-------------|
 | `sw-digit-press` | `{ digit: string, digits: string }` | Key pressed |
-| `sw-backspace` | `{ digits: string }` | Backspace pressed |
+| `sw-dialpad-backspace` | `{ digits: string }` | Backspace pressed |
+| `sw-dialpad-input` | `{ digits: string }` | Free-text input changed (when `allow-text`) |
 | `sw-dial` | `{ digits: string }` | Call button clicked |
 
-**CSS Custom Properties:**
-
-```css
-sw-dialpad {
-  --sw-color-primary: #044cf6;
-  --sw-color-success: #10b981;
-  --sw-key-size: 64px;
-  --sw-key-gap: 12px;
-}
-```
-
-**CSS Parts:** `container`, `display`, `keypad`, `key`, `key-pressed`, `call-button`
+**Theming:** styled via the design tokens in `theme.css`
+(`--fg-default`, `--bg-surface`, `--interactive-button-primary-bg`, …) plus
+local knobs `--sw-dialpad-display-size` and `--sw-dialpad-key-size`.
 
 **Usage:**
 
 ```html
-<!-- Basic DTMF dialpad (uses context) -->
-<sw-dialpad></sw-dialpad>
+<!-- Basic DTMF dialpad -->
+<sw-ui-dialpad></sw-ui-dialpad>
 
 <!-- With call button for dialing -->
-<sw-dialpad show-call-button placeholder="Phone number"></sw-dialpad>
-
-<!-- With explicit call -->
-<sw-dialpad .call="${call}"></sw-dialpad>
+<sw-ui-dialpad show-call-button placeholder="Phone number"></sw-ui-dialpad>
 ```
 
 ```typescript
-// Listen for dial event
-const dialpad = document.querySelector('sw-dialpad');
+const dialpad = document.querySelector('sw-ui-dialpad');
 
 dialpad.addEventListener('sw-dial', (e) => {
   console.log('Dialing:', e.detail.digits);
@@ -556,34 +545,38 @@ controls.addEventListener('sw-participant-mute-audio', (e) => {
 
 ---
 
-### sw-example-button
-
-Simple example button component for demonstration purposes.
-
-**Properties:**
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | Disable button |
-| `variant` | `'primary' \| 'secondary'` | `'primary'` | Button style |
-
-**Slots:** Default slot for button content
-
-**Events:**
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `sw-click` | `{ originalEvent: MouseEvent }` | Button clicked |
-
-**CSS Parts:** `button`
-
-**Usage:**
-
-```html
-<!-- Primary button -->
-<sw-example-button>Click Me</sw-example-button>
-
-<!-- Secondary disabled button -->
-<sw-example-button variant="secondary" disabled>Disabled</sw-example-button>
-```
+## UI Primitives (`sw-ui-*`)
+
+In addition to the SDK-aware components above, the package exports a set of
+presentational `sw-ui-*` primitives that have no dependency on
+`@signalwire/js`. They are themed via the design tokens in
+`@signalwire/web-components/theme.css` and can be used in any layout.
+
+| Tag | Purpose |
+|-----|---------|
+| `sw-ui-icon` | Inline SVG icon by name (see `IconName` type) |
+| `sw-ui-dropup` | Anchored dropdown panel that opens upward |
+| `sw-ui-split-button` | Primary action paired with a chevron menu |
+| `sw-ui-control-bar` | Mute / camera / screen-share / hand-raise / fullscreen bar |
+| `sw-ui-dialpad` | DTMF keypad (see above) |
+| `sw-ui-call-layout` | Fluid landscape/portrait video + transcript + controls layout |
+| `sw-ui-background` | Bundled or remote background image with thumbnail fallback |
+| `sw-ui-modal` | Dialog primitive with backdrop and focus management |
+| `sw-ui-content-drawer` | Slide-in panel that renders text / markdown / code / html |
+| `sw-ui-responsive-container` | Reports its own size class as an attribute |
+| `sw-ui-alert` | Stackable alert / prompt with `showPrompt(...)` helper |
+| `sw-ui-transcript-view` | Transcript renderer with Prism syntax highlighting |
+
+Each primitive is also available as a subpath import:
+
+```ts
+import '@signalwire/web-components/sw-ui-modal';
+import '@signalwire/web-components/sw-ui-call-layout';
+import { showPrompt } from '@signalwire/web-components/sw-ui-alert';
+```
+
+`sw-ui-transcript-view` pulls in `marked`, `dompurify`, and `prismjs` at
+runtime (lazy-loaded for the Prism language packs).
 
 ---
 

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,9 @@
+var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function l(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+export {
+  o as commonjsGlobal,
+  l as getDefaultExportFromCjs
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/prism-python.js

@@ -0,0 +1,28 @@
+import { getDefaultExportFromCjs as a } from "./_commonjsHelpers.js";
+import { __require as f } from "../node_modules/prismjs/components/prism-python.js";
+function p(t, s) {
+  for (var o = 0; o < s.length; o++) {
+    const e = s[o];
+    if (typeof e != "string" && !Array.isArray(e)) {
+      for (const r in e)
+        if (r !== "default" && !(r in t)) {
+          const n = Object.getOwnPropertyDescriptor(e, r);
+          n && Object.defineProperty(t, r, n.get ? n : {
+            enumerable: !0,
+            get: () => e[r]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
+}
+var i = f();
+const u = /* @__PURE__ */ a(i), l = /* @__PURE__ */ p({
+  __proto__: null,
+  default: u
+}, [i]);
+export {
+  u as default,
+  l as p
+};
+//# sourceMappingURL=prism-python.js.map

package/dist/_virtual/prism-python.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-python.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_virtual/prism-python2.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=prism-python2.js.map

package/dist/_virtual/prism-python2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-python2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/prism-typescript.js

@@ -0,0 +1,28 @@
+import { getDefaultExportFromCjs as a } from "./_commonjsHelpers.js";
+import { __require as c } from "../node_modules/prismjs/components/prism-typescript.js";
+function f(t, s) {
+  for (var o = 0; o < s.length; o++) {
+    const e = s[o];
+    if (typeof e != "string" && !Array.isArray(e)) {
+      for (const r in e)
+        if (r !== "default" && !(r in t)) {
+          const p = Object.getOwnPropertyDescriptor(e, r);
+          p && Object.defineProperty(t, r, p.get ? p : {
+            enumerable: !0,
+            get: () => e[r]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
+}
+var i = c();
+const n = /* @__PURE__ */ a(i), l = /* @__PURE__ */ f({
+  __proto__: null,
+  default: n
+}, [i]);
+export {
+  n as default,
+  l as p
+};
+//# sourceMappingURL=prism-typescript.js.map

package/dist/_virtual/prism-typescript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-typescript.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_virtual/prism-typescript2.js

@@ -0,0 +1,5 @@
+var p = {};
+export {
+  p as __exports
+};
+//# sourceMappingURL=prism-typescript2.js.map

package/dist/_virtual/prism-typescript2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-typescript2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/prism.js

@@ -0,0 +1,28 @@
+import { getDefaultExportFromCjs as f } from "./_commonjsHelpers.js";
+import { __require as n } from "../node_modules/prismjs/prism.js";
+function p(t, i) {
+  for (var o = 0; o < i.length; o++) {
+    const e = i[o];
+    if (typeof e != "string" && !Array.isArray(e)) {
+      for (const r in e)
+        if (r !== "default" && !(r in t)) {
+          const s = Object.getOwnPropertyDescriptor(e, r);
+          s && Object.defineProperty(t, r, s.get ? s : {
+            enumerable: !0,
+            get: () => e[r]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }));
+}
+var a = n();
+const u = /* @__PURE__ */ f(a), l = /* @__PURE__ */ p({
+  __proto__: null,
+  default: u
+}, [a]);
+export {
+  u as default,
+  l as p
+};
+//# sourceMappingURL=prism.js.map

package/dist/_virtual/prism.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_virtual/prism2.js

@@ -0,0 +1,5 @@
+var r = { exports: {} };
+export {
+  r as __module
+};
+//# sourceMappingURL=prism2.js.map

package/dist/_virtual/prism2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}