@signalwire/web-components 4.0.0-beta.3 → 4.0.0-beta.5

package/dist/components/example-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example-button.d.ts","sourceRoot":"","sources":["../../src/components/example-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BA4BX;IAGF,QAAQ,UAAS;IAGjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAE7C,OAAO,CAAC,YAAY;IAgBpB,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}

package/dist/components/example-button.js

@@ -0,0 +1,74 @@
+import { LitElement as d, html as p, css as u } from "lit";
+import { property as c, customElement as b } from "lit/decorators.js";
+var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, i = (o, e, s, n) => {
+  for (var t = n > 1 ? void 0 : n ? h(e, s) : e, l = o.length - 1, a; l >= 0; l--)
+    (a = o[l]) && (t = (n ? a(e, s, t) : a(t)) || t);
+  return n && t && m(e, s, t), t;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.variant = "primary";
+  }
+  _handleClick(o) {
+    if (this.disabled) {
+      o.preventDefault(), o.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("sw-click", {
+        detail: { originalEvent: o },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return p`
+      <button part="button" ?disabled=${this.disabled} @click=${this._handleClick}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+r.styles = u`
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 4px;
+      background-color: #0066cc;
+      color: white;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    button:hover {
+      background-color: #0052a3;
+    }
+
+    button:active {
+      background-color: #003d7a;
+    }
+
+    button:disabled {
+      background-color: #cccccc;
+      cursor: not-allowed;
+    }
+  `;
+i([
+  c({ type: Boolean })
+], r.prototype, "disabled", 2);
+i([
+  c({ type: String })
+], r.prototype, "variant", 2);
+r = i([
+  b("sw-example-button")
+], r);
+export {
+  r as ExampleButton
+};
+//# sourceMappingURL=example-button.js.map

package/dist/components/example-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example-button.js","sources":["../../src/components/example-button.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * An example button component built with Lit\n *\n * @slot - Default slot for button content\n * @csspart button - The button element\n */\n@customElement('sw-example-button')\nexport class ExampleButton extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    button {\n      padding: 0.5rem 1rem;\n      font-size: 1rem;\n      border: none;\n      border-radius: 4px;\n      background-color: #0066cc;\n      color: white;\n      cursor: pointer;\n      transition: background-color 0.2s;\n    }\n\n    button:hover {\n      background-color: #0052a3;\n    }\n\n    button:active {\n      background-color: #003d7a;\n    }\n\n    button:disabled {\n      background-color: #cccccc;\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  variant: 'primary' | 'secondary' = 'primary';\n\n  private _handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('sw-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=${this.disabled} @click=${this._handleClick}>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-example-button': ExampleButton;\n  }\n}\n"],"names":["ExampleButton","LitElement","e","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAUO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgCL,KAAA,WAAW,IAGX,KAAA,UAAmC;AAAA,EAAA;AAAA,EAE3B,aAAaC,GAAe;AAClC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAE,eAAeA,EAAA;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,wCAC6B,KAAK,QAAQ,WAAW,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI/E;AACF;AA5DaH,EACJ,SAASI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA/BhBN,EAgCX,WAAA,YAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfN,EAmCX,WAAA,WAAA,CAAA;AAnCWA,IAANK,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBP,CAAA;"}

package/dist/components/participant-controls.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Participant Controls Component
+ *
+ * Individual participant control panel with actions like mute, remove,
+ * volume control, and pin/spotlight.
+ *
+ * @example
+ * ```html
+ * <sw-participant-controls
+ *   .participant=${participant}
+ *   .capabilities=${['memberMuteAudio', 'memberRemove']}
+ * ></sw-participant-controls>
+ * ```
+ */
+import { LitElement } from 'lit';
+import type { Observable } from 'rxjs';
+/**
+ * Participant interface for controls component
+ */
+export interface ControlParticipant {
+    id: string;
+    name$?: Observable<string>;
+    audioMuted$?: Observable<boolean>;
+    videoMuted$?: Observable<boolean>;
+    mute?(): Promise<void>;
+    unmute?(): Promise<void>;
+    muteVideo?(): Promise<void>;
+    unmuteVideo?(): Promise<void>;
+    remove?(): Promise<void>;
+}
+export declare class ParticipantControlsComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Participant object to control
+     */
+    participant: ControlParticipant | null;
+    /**
+     * Available capabilities (actions user can perform)
+     */
+    capabilities: string[];
+    /**
+     * Whether to show volume slider
+     */
+    showVolume: boolean;
+    /**
+     * Whether to show pin/spotlight button
+     */
+    showPin: boolean;
+    /**
+     * Current volume (0-100)
+     */
+    private volume;
+    /**
+     * Participant name
+     */
+    private participantName;
+    /**
+     * Audio mute state
+     */
+    private audioMuted;
+    /**
+     * Video mute state
+     */
+    private videoMuted;
+    /**
+     * Is pinned/spotlighted
+     */
+    private isPinned;
+    /**
+     * RxJS subscriptions for cleanup
+     */
+    private subscriptions;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private subscribeToParticipant;
+    private cleanup;
+    private get canMuteAudio();
+    private get canMuteVideo();
+    private get canRemove();
+    private get hasAnyCapability();
+    private handleToggleAudioMute;
+    private handleToggleVideoMute;
+    private handleRemove;
+    private handleVolumeChange;
+    private handleTogglePin;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-participant-controls': ParticipantControlsComponent;
+    }
+}
+//# sourceMappingURL=participant-controls.d.ts.map

package/dist/components/participant-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"participant-controls.d.ts","sourceRoot":"","sources":["../../src/components/participant-controls.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,WAAW,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,qBACa,4BAA6B,SAAQ,UAAU;IAC1D,MAAM,CAAC,MAAM,0BAoMX;IAEF;;OAEG;IAEH,WAAW,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAE9C;;OAEG;IAEH,YAAY,EAAE,MAAM,EAAE,CAAM;IAE5B;;OAEG;IAEH,UAAU,EAAE,OAAO,CAAS;IAE5B;;OAEG;IAEH,OAAO,EAAE,OAAO,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,MAAM,CAAe;IAE7B;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAyB;IAEhD;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAkB;IAEpC;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,OAAO;IAKf,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,gBAAgB,GAI3B;YAEa,qBAAqB;YAsBrB,qBAAqB;YAsBrB,YAAY;IAkB1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAYvB,MAAM;CAqIP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,4BAA4B,CAAC;KACzD;CACF"}

package/dist/components/participant-controls.js

@@ -0,0 +1,468 @@
+import { LitElement as d, html as o, css as h } from "lit";
+import { property as c, state as r, customElement as v } from "lit/decorators.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? w(e, l) : e, p = t.length - 1, u; p >= 0; p--)
+    (u = t[p]) && (s = (n ? u(e, l, s) : u(s)) || s);
+  return n && s && b(e, l, s), s;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.participant = null, this.capabilities = [], this.showVolume = !1, this.showPin = !1, this.volume = 100, this.participantName = "Participant", this.audioMuted = !1, this.videoMuted = !1, this.isPinned = !1, this.subscriptions = [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.subscribeToParticipant();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  updated(t) {
+    t.has("participant") && (this.cleanup(), this.subscribeToParticipant());
+  }
+  subscribeToParticipant() {
+    if (this.participant) {
+      if (this.participant.name$) {
+        const t = this.participant.name$.subscribe((e) => {
+          this.participantName = e;
+        });
+        this.subscriptions.push(t);
+      }
+      if (this.participant.audioMuted$) {
+        const t = this.participant.audioMuted$.subscribe((e) => {
+          this.audioMuted = e;
+        });
+        this.subscriptions.push(t);
+      }
+      if (this.participant.videoMuted$) {
+        const t = this.participant.videoMuted$.subscribe((e) => {
+          this.videoMuted = e;
+        });
+        this.subscriptions.push(t);
+      }
+    }
+  }
+  cleanup() {
+    this.subscriptions.forEach((t) => t.unsubscribe()), this.subscriptions = [];
+  }
+  get canMuteAudio() {
+    return this.capabilities.includes("memberMuteAudio");
+  }
+  get canMuteVideo() {
+    return this.capabilities.includes("memberMuteVideo");
+  }
+  get canRemove() {
+    return this.capabilities.includes("memberRemove");
+  }
+  get hasAnyCapability() {
+    return this.canMuteAudio || this.canMuteVideo || this.canRemove || this.showVolume || this.showPin;
+  }
+  async handleToggleAudioMute() {
+    if (this.participant)
+      try {
+        this.audioMuted && this.participant.unmute ? await this.participant.unmute() : !this.audioMuted && this.participant.mute && await this.participant.mute(), this.dispatchEvent(
+          new CustomEvent("sw-participant-mute-audio", {
+            detail: { participant: this.participant, muted: !this.audioMuted },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch (t) {
+        console.error("Failed to toggle audio mute:", t);
+      }
+  }
+  async handleToggleVideoMute() {
+    if (this.participant)
+      try {
+        this.videoMuted && this.participant.unmuteVideo ? await this.participant.unmuteVideo() : !this.videoMuted && this.participant.muteVideo && await this.participant.muteVideo(), this.dispatchEvent(
+          new CustomEvent("sw-participant-mute-video", {
+            detail: { participant: this.participant, muted: !this.videoMuted },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch (t) {
+        console.error("Failed to toggle video mute:", t);
+      }
+  }
+  async handleRemove() {
+    var t;
+    if ((t = this.participant) != null && t.remove)
+      try {
+        await this.participant.remove(), this.dispatchEvent(
+          new CustomEvent("sw-participant-remove", {
+            detail: { participant: this.participant },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch (e) {
+        console.error("Failed to remove participant:", e);
+      }
+  }
+  handleVolumeChange(t) {
+    const e = t.target;
+    this.volume = parseInt(e.value, 10), this.dispatchEvent(
+      new CustomEvent("sw-participant-volume", {
+        detail: { participant: this.participant, volume: this.volume },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleTogglePin() {
+    this.isPinned = !this.isPinned, this.dispatchEvent(
+      new CustomEvent("sw-participant-pin", {
+        detail: { participant: this.participant, pinned: this.isPinned },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return o`
+      <div class="container" part="container">
+        <div class="header">
+          <span class="participant-name">${this.participantName}</span>
+        </div>
+
+        <div class="actions">
+          ${this.hasAnyCapability ? null : o`<div class="no-actions">No actions available</div>`}
+          ${this.canMuteAudio ? o`
+                <button
+                  class="action-button ${this.audioMuted ? "active" : ""}"
+                  part="action-button"
+                  @click=${this.handleToggleAudioMute}
+                  aria-label="${this.audioMuted ? "Unmute audio" : "Mute audio"}"
+                >
+                  ${this.audioMuted ? o`<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
+                        />
+                      </svg>` : o`<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+                        />
+                      </svg>`}
+                  ${this.audioMuted ? "Unmute" : "Mute"}
+                </button>
+              ` : null}
+          ${this.canMuteVideo ? o`
+                <button
+                  class="action-button ${this.videoMuted ? "active" : ""}"
+                  part="action-button"
+                  @click=${this.handleToggleVideoMute}
+                  aria-label="${this.videoMuted ? "Unmute video" : "Mute video"}"
+                >
+                  ${this.videoMuted ? o`<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"
+                        />
+                      </svg>` : o`<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
+                        />
+                      </svg>`}
+                  ${this.videoMuted ? "Enable video" : "Disable video"}
+                </button>
+              ` : null}
+          ${this.showVolume ? o`
+                <div class="volume-control" part="slider">
+                  <label class="volume-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <path
+                        d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"
+                      />
+                    </svg>
+                    Volume: ${this.volume}%
+                  </label>
+                  <input
+                    type="range"
+                    class="volume-slider"
+                    min="0"
+                    max="100"
+                    .value=${String(this.volume)}
+                    @input=${this.handleVolumeChange}
+                    aria-label="Participant volume"
+                  />
+                </div>
+              ` : null}
+          ${this.showPin ? o`
+                <button
+                  class="action-button ${this.isPinned ? "active" : ""}"
+                  part="action-button"
+                  @click=${this.handleTogglePin}
+                  aria-label="${this.isPinned ? "Unpin" : "Pin"}"
+                  aria-pressed="${this.isPinned}"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z" />
+                  </svg>
+                  ${this.isPinned ? "Unpin" : "Pin"}
+                </button>
+              ` : null}
+          ${this.canRemove ? o`
+                <button
+                  class="action-button danger"
+                  part="action-button"
+                  @click=${this.handleRemove}
+                  aria-label="Remove participant"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                    />
+                  </svg>
+                  Remove
+                </button>
+              ` : null}
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = h`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-primary: #044cf6;
+      --sw-color-primary-hover: #0339c4;
+      --sw-color-success: #10b981;
+      --sw-color-danger: #ef4444;
+      --sw-color-danger-hover: #dc2626;
+      --sw-color-warning: #f59e0b;
+      --sw-color-text: #1f2937;
+      --sw-color-text-muted: #6b7280;
+      --sw-color-text-inverse: #ffffff;
+      --sw-color-background: #ffffff;
+      --sw-color-background-hover: #f3f4f6;
+      --sw-color-background-active: #e5e7eb;
+      --sw-color-border: #e5e7eb;
+      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --sw-font-size-xs: 11px;
+      --sw-font-size-sm: 12px;
+      --sw-font-size-base: 14px;
+      --sw-space-1: 4px;
+      --sw-space-2: 8px;
+      --sw-space-3: 12px;
+      --sw-space-4: 16px;
+      --sw-border-radius: 8px;
+
+      display: block;
+      font-family: var(--sw-font-family);
+    }
+
+    /* Dark mode support */
+    :host([data-theme='dark']) {
+      --sw-color-text: #f9fafb;
+      --sw-color-text-muted: #9ca3af;
+      --sw-color-background: #1f2937;
+      --sw-color-background-hover: #374151;
+      --sw-color-background-active: #4b5563;
+      --sw-color-border: #374151;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host(:not([data-theme='light'])) {
+        --sw-color-text: #f9fafb;
+        --sw-color-text-muted: #9ca3af;
+        --sw-color-background: #1f2937;
+        --sw-color-background-hover: #374151;
+        --sw-color-background-active: #4b5563;
+        --sw-color-border: #374151;
+      }
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sw-space-2);
+      padding: var(--sw-space-3);
+      background: var(--sw-color-background);
+      border: 1px solid var(--sw-color-border);
+      border-radius: var(--sw-border-radius);
+      min-width: 200px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      padding-bottom: var(--sw-space-2);
+      border-bottom: 1px solid var(--sw-color-border);
+    }
+
+    .participant-name {
+      flex: 1;
+      font-size: var(--sw-font-size-base);
+      font-weight: 500;
+      color: var(--sw-color-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sw-space-2);
+    }
+
+    .action-button {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      padding: var(--sw-space-2) var(--sw-space-3);
+      background: var(--sw-color-background-hover);
+      border: none;
+      border-radius: var(--sw-border-radius);
+      color: var(--sw-color-text);
+      font-family: var(--sw-font-family);
+      font-size: var(--sw-font-size-sm);
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+      text-align: left;
+    }
+
+    .action-button:hover {
+      background: var(--sw-color-background-active);
+    }
+
+    .action-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .action-button.active {
+      background: var(--sw-color-danger);
+      color: var(--sw-color-text-inverse);
+    }
+
+    .action-button.active:hover {
+      background: var(--sw-color-danger-hover);
+    }
+
+    .action-button.danger {
+      color: var(--sw-color-danger);
+    }
+
+    .action-button.danger:hover {
+      background: var(--sw-color-danger);
+      color: var(--sw-color-text-inverse);
+    }
+
+    .action-button svg {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    .volume-control {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sw-space-1);
+    }
+
+    .volume-label {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      font-size: var(--sw-font-size-sm);
+      color: var(--sw-color-text-muted);
+    }
+
+    .volume-label svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .volume-slider {
+      width: 100%;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: var(--sw-color-border);
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+    }
+
+    .volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      background: var(--sw-color-primary);
+      border-radius: 50%;
+      cursor: pointer;
+      transition: transform 0.1s ease;
+    }
+
+    .volume-slider::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+    }
+
+    .volume-slider::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      background: var(--sw-color-primary);
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+    }
+
+    .no-actions {
+      color: var(--sw-color-text-muted);
+      font-size: var(--sw-font-size-sm);
+      text-align: center;
+      padding: var(--sw-space-2);
+    }
+  `;
+a([
+  c({ attribute: !1 })
+], i.prototype, "participant", 2);
+a([
+  c({ attribute: !1 })
+], i.prototype, "capabilities", 2);
+a([
+  c({ type: Boolean, attribute: "show-volume" })
+], i.prototype, "showVolume", 2);
+a([
+  c({ type: Boolean, attribute: "show-pin" })
+], i.prototype, "showPin", 2);
+a([
+  r()
+], i.prototype, "volume", 2);
+a([
+  r()
+], i.prototype, "participantName", 2);
+a([
+  r()
+], i.prototype, "audioMuted", 2);
+a([
+  r()
+], i.prototype, "videoMuted", 2);
+a([
+  r()
+], i.prototype, "isPinned", 2);
+i = a([
+  v("sw-participant-controls")
+], i);
+export {
+  i as ParticipantControlsComponent
+};
+//# sourceMappingURL=participant-controls.js.map