@signalwire/web-components 4.0.0-beta.10 → 4.0.0-beta.12

package/dist/components/UI/controls/sw-ui-dialpad.js

@@ -0,0 +1,359 @@
+import { LitElement as u, html as d, css as g } from "lit";
+import { property as c, state as p, customElement as h } from "lit/decorators.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, l, a) => {
+  for (var i = a > 1 ? void 0 : a ? f(e, l) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (i = (a ? o(e, l, i) : o(i)) || i);
+  return a && i && b(e, l, i), i;
+};
+const v = /^[0-9*#]$/, y = 500, m = [
+  { digit: "1", letters: "" },
+  { digit: "2", letters: "ABC" },
+  { digit: "3", letters: "DEF" },
+  { digit: "4", letters: "GHI" },
+  { digit: "5", letters: "JKL" },
+  { digit: "6", letters: "MNO" },
+  { digit: "7", letters: "PQRS" },
+  { digit: "8", letters: "TUV" },
+  { digit: "9", letters: "WXYZ" },
+  { digit: "*", letters: "" },
+  { digit: "0", letters: "+" },
+  { digit: "#", letters: "" }
+];
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.showCallButton = !1, this.allowText = !1, this.placeholder = "Enter number", this.digits = "", this.pressedKey = null, this._longPressTimer = null, this._longPressFired = !1;
+  }
+  _startLongPress(t) {
+    this._cancelLongPress(), this._longPressFired = !1, this._longPressTimer = setTimeout(() => {
+      this._longPressFired = !0, this._longPressTimer = null, t();
+    }, y);
+  }
+  _cancelLongPress() {
+    this._longPressTimer !== null && (clearTimeout(this._longPressTimer), this._longPressTimer = null);
+  }
+  disconnectedCallback() {
+    this._cancelLongPress(), super.disconnectedCallback();
+  }
+  _clearAll() {
+    this.digits.length !== 0 && (this.digits = "", this.dispatchEvent(
+      new CustomEvent("sw-dialpad-backspace", {
+        detail: { digits: this.digits },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _pressDigit(t) {
+    this.digits += t, this.pressedKey = t, this.dispatchEvent(
+      new CustomEvent("sw-digit-press", {
+        detail: { digit: t, digits: this.digits },
+        bubbles: !0,
+        composed: !0
+      })
+    ), setTimeout(() => {
+      this.pressedKey = null;
+    }, 100);
+  }
+  _backspace() {
+    this.digits.length !== 0 && (this.digits = this.digits.slice(0, -1), this.dispatchEvent(
+      new CustomEvent("sw-dialpad-backspace", {
+        detail: { digits: this.digits },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _dial() {
+    this.digits.length !== 0 && this.dispatchEvent(
+      new CustomEvent("sw-dial", {
+        detail: { digits: this.digits },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Handle keyboard input on the display field.
+   * We intercept all keys and manage state ourselves to prevent the browser
+   * from accumulating non-DTMF characters in the input value.
+   */
+  _onKeyDown(t) {
+    const { key: e } = t;
+    if (this.allowText) {
+      e === "Enter" && this.showCallButton && (t.preventDefault(), this._dial());
+      return;
+    }
+    v.test(e) ? (t.preventDefault(), this._pressDigit(e)) : e === "Backspace" ? (t.preventDefault(), this._backspace()) : e === "Enter" && this.showCallButton ? (t.preventDefault(), this._dial()) : e !== "Tab" && !t.ctrlKey && !t.metaKey && t.preventDefault();
+  }
+  _onInput(t) {
+    if (!this.allowText) return;
+    const e = t.target.value;
+    this.digits = e, this.dispatchEvent(
+      new CustomEvent("sw-dialpad-input", {
+        detail: { digits: this.digits },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return d`
+      <div class="container" part="container">
+        <div class="display" part="display">
+          <input
+            type=${this.allowText ? "text" : "tel"}
+            class="display-input"
+            .value=${this.digits}
+            placeholder=${this.placeholder}
+            @keydown=${this._onKeyDown}
+            @input=${this._onInput}
+            aria-label="Phone number input"
+          />
+          <button
+            class="backspace-button"
+            @click=${() => {
+      if (this._longPressFired) {
+        this._longPressFired = !1;
+        return;
+      }
+      this._backspace();
+    }}
+            @pointerdown=${() => this._startLongPress(() => this._clearAll())}
+            @pointerup=${() => this._cancelLongPress()}
+            @pointerleave=${() => this._cancelLongPress()}
+            @pointercancel=${() => this._cancelLongPress()}
+            ?disabled=${this.digits.length === 0}
+            aria-label="Delete last digit (long-press to clear)"
+          >
+            <sw-ui-icon name="backspace" size="24"></sw-ui-icon>
+          </button>
+        </div>
+
+        <div class="keypad" part="keypad" role="group" aria-label="Telephone keypad">
+          ${m.map(
+      (t) => d`
+              <button
+                class="key ${this.pressedKey === t.digit ? "pressed" : ""}"
+                part="key ${this.pressedKey === t.digit ? "key-pressed" : ""}"
+                @click=${() => {
+        if (this._longPressFired) {
+          this._longPressFired = !1;
+          return;
+        }
+        this._pressDigit(t.digit);
+      }}
+                @pointerdown=${t.digit === "0" ? () => this._startLongPress(() => this._pressDigit("+")) : void 0}
+                @pointerup=${t.digit === "0" ? () => this._cancelLongPress() : void 0}
+                @pointerleave=${t.digit === "0" ? () => this._cancelLongPress() : void 0}
+                @pointercancel=${t.digit === "0" ? () => this._cancelLongPress() : void 0}
+                aria-label="${t.digit}${t.letters ? `, ${t.letters}` : ""}${t.digit === "0" ? " (long-press for +)" : ""}"
+              >
+                <span class="key-digit">${t.digit}</span>
+                <span class="key-letters">${t.letters}</span>
+              </button>
+            `
+    )}
+        </div>
+
+        ${this.showCallButton ? d`
+              <button
+                class="call-button"
+                part="call-button"
+                @click=${this._dial}
+                ?disabled=${this.digits.length === 0}
+                aria-label="Call ${this.digits}"
+              >
+                <sw-ui-icon name="phone-call" size="20"></sw-ui-icon> Call
+              </button>
+            ` : null}
+      </div>
+    `;
+  }
+};
+s.styles = g`
+    :host {
+      --sw-dialpad-display-size: 32px;
+      --sw-dialpad-key-size: 24px;
+      display: block;
+      font-family: var(--type-family-body);
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-3);
+      padding: var(--sp-4);
+      max-width: 280px;
+      background: var(--bg-surface);
+      border-radius: var(--radius-md);
+    }
+
+    .display {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--sp-3) var(--sp-4);
+      background: var(--bg-surface-raised);
+      border-radius: var(--radius-md);
+      min-height: 48px;
+    }
+
+    .display-input {
+      flex: 1;
+      font-size: var(--sw-dialpad-display-size);
+      font-weight: 500;
+      font-family: var(--type-family-body);
+      color: var(--fg-default);
+      background: transparent;
+      border: none;
+      outline: none;
+      letter-spacing: 2px;
+      text-align: center;
+      width: 100%;
+    }
+
+    .display-input::placeholder {
+      color: var(--fg-muted);
+      font-size: var(--type-size-body);
+      letter-spacing: normal;
+    }
+
+    .backspace-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      background: transparent;
+      border: none;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      color: var(--fg-muted);
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+    }
+
+    .backspace-button:hover {
+      background: var(--interactive-dropdown-hover);
+      color: var(--fg-default);
+    }
+
+    .backspace-button:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    .backspace-button sw-ui-icon {
+      pointer-events: none;
+    }
+
+    .keypad {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 72px));
+      justify-content: center;
+      gap: var(--sp-2);
+    }
+
+    .key {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+      aspect-ratio: 1;
+      background: var(--bg-surface);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-full);
+      cursor: pointer;
+      transition:
+        background-color 0.1s ease,
+        transform 0.1s ease;
+      user-select: none;
+      -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .key:hover {
+      background: var(--bg-surface-raised);
+    }
+
+    .key:active,
+    .key.pressed {
+      background: var(--interactive-dropdown-hover);
+      transform: scale(0.95);
+    }
+
+    .key-digit {
+      font-size: var(--sw-dialpad-key-size);
+      font-weight: 500;
+      color: var(--fg-default);
+      line-height: 1;
+    }
+
+    .key-letters {
+      font-size: var(--type-size-caption);
+      color: var(--fg-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-top: 2px;
+      min-height: 14px;
+    }
+
+    .call-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 56px;
+      background: var(--interactive-status-success);
+      border: none;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      color: white;
+      font-size: var(--type-size-body);
+      font-weight: 600;
+      font-family: var(--type-family-body);
+      transition: background-color 0.15s ease;
+      gap: var(--sp-2);
+    }
+
+    .call-button:hover {
+      background: #0ea472;
+    }
+
+    .call-button:active {
+      background: #0d9668;
+    }
+
+    .call-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .call-button sw-ui-icon {
+      pointer-events: none;
+    }
+  `;
+r([
+  c({ type: Boolean, reflect: !0, attribute: "show-call-button" })
+], s.prototype, "showCallButton", 2);
+r([
+  c({ type: Boolean, reflect: !0, attribute: "allow-text" })
+], s.prototype, "allowText", 2);
+r([
+  c({ type: String })
+], s.prototype, "placeholder", 2);
+r([
+  p()
+], s.prototype, "digits", 2);
+r([
+  p()
+], s.prototype, "pressedKey", 2);
+s = r([
+  h("sw-ui-dialpad")
+], s);
+export {
+  s as SwUiDialpad
+};
+//# sourceMappingURL=sw-ui-dialpad.js.map

package/dist/components/UI/controls/sw-ui-dialpad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-dialpad.js","sources":["../../../../src/components/UI/controls/sw-ui-dialpad.ts"],"sourcesContent":["/**\n * Dialpad Component\n *\n * A 12-key telephone keypad (0-9, *, #) for entering phone numbers\n * and sending DTMF tones during active calls. Pure UI component — no\n * call logic. Use `sw-call-dialpad` for a version that integrates with\n * a call context.\n *\n * @example\n * ```html\n * <sw-dialpad show-call-button></sw-dialpad>\n * ```\n *\n * Long-press behavior:\n * - Long-press the `0` key → inserts `+` (international prefix).\n * - Long-press the backspace button → clears the entire buffer.\n *\n * @fires sw-digit-press       - Fired when a digit button is pressed. Detail: `{ digit: string, digits: string }`\n * @fires sw-dialpad-backspace - Fired when the backspace button is pressed (or long-pressed to clear). Detail: `{ digits: string }`\n * @fires sw-dial              - Fired when the call button is pressed. Detail: `{ digits: string }`\n * @fires sw-dialpad-input     - Fired when free-text input changes (only when `allow-text` is set). Detail: `{ digits: string }`\n *\n * @cssprop [--interactive-button-primary-bg=#044ef4] - Primary accent color.\n * @cssprop [--interactive-button-primary-hover=#0342cf] - Primary color on hover.\n * @cssprop [--interactive-status-success=#22c55e] - Success/call button color.\n * @cssprop [--interactive-button-destructive-bg=#dc2626] - Danger/hangup button color.\n * @cssprop [--bg-surface=#181a28] - Component background.\n * @cssprop [--fg-default=#f0f0f4] - Text color.\n * @cssprop [--fg-muted=#a0a0aa] - Muted text color.\n * @cssprop [--border-default=rgba(255,255,255,0.12)] - Border color.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../icons/sw-ui-icon.js';\n\nconst DTMF_PATTERN = /^[0-9*#]$/;\nconst LONG_PRESS_MS = 500;\n\n/**\n * Key layout for standard telephone keypad\n */\nconst KEYS = [\n  { digit: '1', letters: '' },\n  { digit: '2', letters: 'ABC' },\n  { digit: '3', letters: 'DEF' },\n  { digit: '4', letters: 'GHI' },\n  { digit: '5', letters: 'JKL' },\n  { digit: '6', letters: 'MNO' },\n  { digit: '7', letters: 'PQRS' },\n  { digit: '8', letters: 'TUV' },\n  { digit: '9', letters: 'WXYZ' },\n  { digit: '*', letters: '' },\n  { digit: '0', letters: '+' },\n  { digit: '#', letters: '' }\n] as const;\n\n@customElement('sw-ui-dialpad')\nexport class SwUiDialpad extends LitElement {\n  static styles = css`\n    :host {\n      --sw-dialpad-display-size: 32px;\n      --sw-dialpad-key-size: 24px;\n      display: block;\n      font-family: var(--type-family-body);\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sp-3);\n      padding: var(--sp-4);\n      max-width: 280px;\n      background: var(--bg-surface);\n      border-radius: var(--radius-md);\n    }\n\n    .display {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--sp-3) var(--sp-4);\n      background: var(--bg-surface-raised);\n      border-radius: var(--radius-md);\n      min-height: 48px;\n    }\n\n    .display-input {\n      flex: 1;\n      font-size: var(--sw-dialpad-display-size);\n      font-weight: 500;\n      font-family: var(--type-family-body);\n      color: var(--fg-default);\n      background: transparent;\n      border: none;\n      outline: none;\n      letter-spacing: 2px;\n      text-align: center;\n      width: 100%;\n    }\n\n    .display-input::placeholder {\n      color: var(--fg-muted);\n      font-size: var(--type-size-body);\n      letter-spacing: normal;\n    }\n\n    .backspace-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 40px;\n      background: transparent;\n      border: none;\n      border-radius: var(--radius-md);\n      cursor: pointer;\n      color: var(--fg-muted);\n      transition:\n        background-color 0.15s ease,\n        color 0.15s ease;\n    }\n\n    .backspace-button:hover {\n      background: var(--interactive-dropdown-hover);\n      color: var(--fg-default);\n    }\n\n    .backspace-button:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n\n    .backspace-button sw-ui-icon {\n      pointer-events: none;\n    }\n\n    .keypad {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 72px));\n      justify-content: center;\n      gap: var(--sp-2);\n    }\n\n    .key {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      min-width: 0;\n      aspect-ratio: 1;\n      background: var(--bg-surface);\n      border: 1px solid var(--border-default);\n      border-radius: var(--radius-full);\n      cursor: pointer;\n      transition:\n        background-color 0.1s ease,\n        transform 0.1s ease;\n      user-select: none;\n      -webkit-user-select: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .key:hover {\n      background: var(--bg-surface-raised);\n    }\n\n    .key:active,\n    .key.pressed {\n      background: var(--interactive-dropdown-hover);\n      transform: scale(0.95);\n    }\n\n    .key-digit {\n      font-size: var(--sw-dialpad-key-size);\n      font-weight: 500;\n      color: var(--fg-default);\n      line-height: 1;\n    }\n\n    .key-letters {\n      font-size: var(--type-size-caption);\n      color: var(--fg-muted);\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-top: 2px;\n      min-height: 14px;\n    }\n\n    .call-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 56px;\n      background: var(--interactive-status-success);\n      border: none;\n      border-radius: var(--radius-md);\n      cursor: pointer;\n      color: white;\n      font-size: var(--type-size-body);\n      font-weight: 600;\n      font-family: var(--type-family-body);\n      transition: background-color 0.15s ease;\n      gap: var(--sp-2);\n    }\n\n    .call-button:hover {\n      background: #0ea472;\n    }\n\n    .call-button:active {\n      background: #0d9668;\n    }\n\n    .call-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .call-button sw-ui-icon {\n      pointer-events: none;\n    }\n  `;\n\n  /** Whether to display the call button below the keypad. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-call-button' })\n  showCallButton: boolean = false;\n\n  /** Allow free-text input in the display field (e.g., SIP URIs, vanity letters). Keypad buttons still append DTMF digits. */\n  @property({ type: Boolean, reflect: true, attribute: 'allow-text' })\n  allowText: boolean = false;\n\n  /** Placeholder text shown in the digit display input. */\n  @property({ type: String })\n  placeholder: string = 'Enter number';\n\n  @state() private digits: string = '';\n  @state() private pressedKey: string | null = null;\n\n  private _longPressTimer: ReturnType<typeof setTimeout> | null = null;\n  private _longPressFired = false;\n\n  private _startLongPress(action: () => void) {\n    this._cancelLongPress();\n    this._longPressFired = false;\n    this._longPressTimer = setTimeout(() => {\n      this._longPressFired = true;\n      this._longPressTimer = null;\n      action();\n    }, LONG_PRESS_MS);\n  }\n\n  private _cancelLongPress() {\n    if (this._longPressTimer !== null) {\n      clearTimeout(this._longPressTimer);\n      this._longPressTimer = null;\n    }\n  }\n\n  override disconnectedCallback() {\n    this._cancelLongPress();\n    super.disconnectedCallback();\n  }\n\n  private _clearAll() {\n    if (this.digits.length === 0) return;\n    this.digits = '';\n    this.dispatchEvent(\n      new CustomEvent('sw-dialpad-backspace', {\n        detail: { digits: this.digits },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private _pressDigit(digit: string) {\n    this.digits += digit;\n    this.pressedKey = digit;\n\n    this.dispatchEvent(\n      new CustomEvent('sw-digit-press', {\n        detail: { digit, digits: this.digits },\n        bubbles: true,\n        composed: true\n      })\n    );\n\n    setTimeout(() => {\n      this.pressedKey = null;\n    }, 100);\n  }\n\n  private _backspace() {\n    if (this.digits.length === 0) return;\n    this.digits = this.digits.slice(0, -1);\n    this.dispatchEvent(\n      new CustomEvent('sw-dialpad-backspace', {\n        detail: { digits: this.digits },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private _dial() {\n    if (this.digits.length === 0) return;\n    this.dispatchEvent(\n      new CustomEvent('sw-dial', {\n        detail: { digits: this.digits },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard input on the display field.\n   * We intercept all keys and manage state ourselves to prevent the browser\n   * from accumulating non-DTMF characters in the input value.\n   */\n  private _onKeyDown(e: KeyboardEvent) {\n    const { key } = e;\n\n    if (this.allowText) {\n      if (key === 'Enter' && this.showCallButton) {\n        e.preventDefault();\n        this._dial();\n      }\n      return;\n    }\n\n    if (DTMF_PATTERN.test(key)) {\n      e.preventDefault();\n      this._pressDigit(key);\n    } else if (key === 'Backspace') {\n      e.preventDefault();\n      this._backspace();\n    } else if (key === 'Enter' && this.showCallButton) {\n      e.preventDefault();\n      this._dial();\n    } else if (key !== 'Tab' && !e.ctrlKey && !e.metaKey) {\n      // Block all other printable characters\n      e.preventDefault();\n    }\n  }\n\n  private _onInput(e: Event) {\n    if (!this.allowText) return;\n    const value = (e.target as HTMLInputElement).value;\n    this.digits = value;\n    this.dispatchEvent(\n      new CustomEvent('sw-dialpad-input', {\n        detail: { digits: this.digits },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"display\" part=\"display\">\n          <input\n            type=${this.allowText ? 'text' : 'tel'}\n            class=\"display-input\"\n            .value=${this.digits}\n            placeholder=${this.placeholder}\n            @keydown=${this._onKeyDown}\n            @input=${this._onInput}\n            aria-label=\"Phone number input\"\n          />\n          <button\n            class=\"backspace-button\"\n            @click=${() => {\n              if (this._longPressFired) { this._longPressFired = false; return; }\n              this._backspace();\n            }}\n            @pointerdown=${() => this._startLongPress(() => this._clearAll())}\n            @pointerup=${() => this._cancelLongPress()}\n            @pointerleave=${() => this._cancelLongPress()}\n            @pointercancel=${() => this._cancelLongPress()}\n            ?disabled=${this.digits.length === 0}\n            aria-label=\"Delete last digit (long-press to clear)\"\n          >\n            <sw-ui-icon name=\"backspace\" size=\"24\"></sw-ui-icon>\n          </button>\n        </div>\n\n        <div class=\"keypad\" part=\"keypad\" role=\"group\" aria-label=\"Telephone keypad\">\n          ${KEYS.map(\n            (key) => html`\n              <button\n                class=\"key ${this.pressedKey === key.digit ? 'pressed' : ''}\"\n                part=\"key ${this.pressedKey === key.digit ? 'key-pressed' : ''}\"\n                @click=${() => {\n                  if (this._longPressFired) { this._longPressFired = false; return; }\n                  this._pressDigit(key.digit);\n                }}\n                @pointerdown=${key.digit === '0'\n                  ? () => this._startLongPress(() => this._pressDigit('+'))\n                  : undefined}\n                @pointerup=${key.digit === '0' ? () => this._cancelLongPress() : undefined}\n                @pointerleave=${key.digit === '0' ? () => this._cancelLongPress() : undefined}\n                @pointercancel=${key.digit === '0' ? () => this._cancelLongPress() : undefined}\n                aria-label=\"${key.digit}${key.letters ? `, ${key.letters}` : ''}${\n                  key.digit === '0' ? ' (long-press for +)' : ''\n                }\"\n              >\n                <span class=\"key-digit\">${key.digit}</span>\n                <span class=\"key-letters\">${key.letters}</span>\n              </button>\n            `\n          )}\n        </div>\n\n        ${this.showCallButton\n          ? html`\n              <button\n                class=\"call-button\"\n                part=\"call-button\"\n                @click=${this._dial}\n                ?disabled=${this.digits.length === 0}\n                aria-label=\"Call ${this.digits}\"\n              >\n                <sw-ui-icon name=\"phone-call\" size=\"20\"></sw-ui-icon> Call\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-dialpad': SwUiDialpad;\n  }\n}\n"],"names":["DTMF_PATTERN","LONG_PRESS_MS","KEYS","SwUiDialpad","LitElement","action","digit","e","key","value","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/UI/controls/sw-ui-dropup.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+export type DropUpItem = {
+    label: string;
+    id: string;
+    selected?: boolean;
+};
+/**
+ * Dropdown (opens upward) menu anchored to a trigger element.
+ *
+ * @fires sw-dropup-select - User picked an item. `detail` is the selected `DropUpItem`.
+ * @fires sw-dropup-close  - Outside click closed the menu.
+ *
+ * @cssprop --sw-dropup-offset    [4px]                    - gap between anchor and menu
+ * @cssprop --sw-dropup-max-width [200px]                  - maximum menu width
+ * @cssprop --sw-dropup-bg        [#1f2937]                - menu background
+ * @cssprop --sw-dropup-border    [1px solid rgba(255,255,255,0.1)] - menu border
+ * @cssprop --sw-dropup-radius    [8px]                    - menu border-radius
+ * @cssprop --sw-dropup-shadow    [0 4px 12px rgba(0,0,0,0.4)]     - menu box-shadow
+ * @cssprop --sw-dropup-color     [#e5e7eb]                - item text colour
+ * @cssprop --sw-dropup-item-hover  [rgba(255,255,255,0.08)] - item hover background
+ * @cssprop --sw-dropup-item-active [rgba(255,255,255,0.15)] - selected item background
+ */
+export declare class SwUiDropup extends LitElement {
+    static styles: import("lit").CSSResult;
+    items: Array<DropUpItem | string>;
+    open: boolean;
+    anchor?: Element;
+    private _menu;
+    private _outsideClickHandler;
+    updated(changed: Map<string, unknown>): void;
+    private _positionToAnchor;
+    disconnectedCallback(): void;
+    private normalizeItem;
+    private onSelect;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-dropup': SwUiDropup;
+    }
+}
+//# sourceMappingURL=sw-ui-dropup.d.ts.map

package/dist/components/UI/controls/sw-ui-dropup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-dropup.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/controls/sw-ui-dropup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3E;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BA2CX;IAmBF,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,CAAM;IAGvC,IAAI,UAAS;IAIb,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,OAAO,CAAC,KAAK,CAAe;IAE5B,OAAO,CAAC,oBAAoB,CAK1B;IAEF,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAarC,OAAO,CAAC,iBAAiB;IAWzB,oBAAoB;IAKpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,QAAQ;IAehB,MAAM;CAkBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/UI/controls/sw-ui-dropup.js

@@ -0,0 +1,137 @@
+import { LitElement as c, html as d, nothing as p, css as m } from "lit";
+import { property as u, query as h, customElement as f } from "lit/decorators.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? v(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (r = (o ? l(t, s, r) : l(r)) || r);
+  return o && r && b(t, s, r), r;
+};
+let n = class extends c {
+  constructor() {
+    super(...arguments), this.items = [], this.open = !1, this._outsideClickHandler = (e) => {
+      const t = e.composedPath();
+      !t.includes(this) && (!this.anchor || !t.includes(this.anchor)) && this.dispatchEvent(new CustomEvent("sw-dropup-close", { bubbles: !0, composed: !0 }));
+    };
+  }
+  updated(e) {
+    e.has("open") && (this.open ? (document.addEventListener("mousedown", this._outsideClickHandler), this.anchor && this._positionToAnchor()) : document.removeEventListener("mousedown", this._outsideClickHandler));
+  }
+  _positionToAnchor() {
+    const e = this.anchor.getBoundingClientRect(), t = 4;
+    this._menu.style.position = "fixed", this._menu.style.top = `${e.top - t}px`, this._menu.style.bottom = "auto", this._menu.style.left = `${e.left + e.width / 2}px`, this._menu.style.right = "auto", this._menu.style.transform = "translateX(-50%) translateY(-100%)";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("mousedown", this._outsideClickHandler);
+  }
+  normalizeItem(e) {
+    return typeof e == "string" ? { label: e, id: e, selected: !1 } : e;
+  }
+  onSelect(e) {
+    const t = { ...e, selected: !0 };
+    this.items = (this.items ?? []).map((s) => {
+      const o = this.normalizeItem(s);
+      return { ...o, selected: o.id === e.id };
+    }), this.dispatchEvent(
+      new CustomEvent("sw-dropup-select", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const e = (this.items ?? []).map((t) => {
+      const s = this.normalizeItem(t);
+      return d`
+        <button
+          part="item"
+          @click=${() => this.onSelect(s)}
+          class=${s.selected === !0 ? "selected" : ""}
+        >
+          ${s.label}
+        </button>
+      `;
+    });
+    return d`
+      <div part="menu" class="menu ${this.open ? "open" : ""}">${e.length ? e : p}</div>
+    `;
+  }
+};
+n.styles = m`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .menu {
+      position: absolute;
+      bottom: calc(100% + var(--sw-dropup-offset, 4px));
+      left: 0;
+      display: none;
+      flex-direction: column;
+      border: 1px solid var(--border-default);
+      background: var(--bg-page);
+      color: var(--fg-default);
+      font-family: var(--type-family-body);
+      font-size: var(--type-size-small);
+      min-width: 120px;
+      max-width: var(--sw-dropup-max-width, 200px);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      overflow: hidden;
+    }
+
+    .menu.open {
+      display: flex;
+    }
+
+    button {
+      all: unset;
+      padding: 8px 12px;
+      cursor: pointer;
+      font-size: 0.8125rem;
+      transition: background var(--transition-fast);
+    }
+
+    button.selected {
+      background: var(--bg-surface-raised);
+    }
+
+    button:hover {
+      background: var(--bg-surface);
+    }
+  `;
+i([
+  u({
+    reflect: !0,
+    converter: {
+      fromAttribute(e) {
+        if (!e) return [];
+        try {
+          const t = JSON.parse(e);
+          return Array.isArray(t) ? t : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute(e) {
+        return JSON.stringify(e);
+      }
+    }
+  })
+], n.prototype, "items", 2);
+i([
+  u({ type: Boolean, reflect: !0 })
+], n.prototype, "open", 2);
+i([
+  u({ attribute: !1 })
+], n.prototype, "anchor", 2);
+i([
+  h(".menu")
+], n.prototype, "_menu", 2);
+n = i([
+  f("sw-ui-dropup")
+], n);
+export {
+  n as SwUiDropup
+};
+//# sourceMappingURL=sw-ui-dropup.js.map

package/dist/components/UI/controls/sw-ui-dropup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-dropup.js","sources":["../../../../src/components/UI/controls/sw-ui-dropup.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nexport type DropUpItem = { label: string; id: string; selected?: boolean };\n\n/**\n * Dropdown (opens upward) menu anchored to a trigger element.\n *\n * @fires sw-dropup-select - User picked an item. `detail` is the selected `DropUpItem`.\n * @fires sw-dropup-close  - Outside click closed the menu.\n *\n * @cssprop --sw-dropup-offset    [4px]                    - gap between anchor and menu\n * @cssprop --sw-dropup-max-width [200px]                  - maximum menu width\n * @cssprop --sw-dropup-bg        [#1f2937]                - menu background\n * @cssprop --sw-dropup-border    [1px solid rgba(255,255,255,0.1)] - menu border\n * @cssprop --sw-dropup-radius    [8px]                    - menu border-radius\n * @cssprop --sw-dropup-shadow    [0 4px 12px rgba(0,0,0,0.4)]     - menu box-shadow\n * @cssprop --sw-dropup-color     [#e5e7eb]                - item text colour\n * @cssprop --sw-dropup-item-hover  [rgba(255,255,255,0.08)] - item hover background\n * @cssprop --sw-dropup-item-active [rgba(255,255,255,0.15)] - selected item background\n */\n@customElement('sw-ui-dropup')\nexport class SwUiDropup extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n      position: relative;\n    }\n\n    .menu {\n      position: absolute;\n      bottom: calc(100% + var(--sw-dropup-offset, 4px));\n      left: 0;\n      display: none;\n      flex-direction: column;\n      border: 1px solid var(--border-default);\n      background: var(--bg-page);\n      color: var(--fg-default);\n      font-family: var(--type-family-body);\n      font-size: var(--type-size-small);\n      min-width: 120px;\n      max-width: var(--sw-dropup-max-width, 200px);\n      border-radius: var(--radius-md);\n      box-shadow: var(--shadow-md);\n      overflow: hidden;\n    }\n\n    .menu.open {\n      display: flex;\n    }\n\n    button {\n      all: unset;\n      padding: 8px 12px;\n      cursor: pointer;\n      font-size: 0.8125rem;\n      transition: background var(--transition-fast);\n    }\n\n    button.selected {\n      background: var(--bg-surface-raised);\n    }\n\n    button:hover {\n      background: var(--bg-surface);\n    }\n  `;\n\n  @property({\n    reflect: true,\n    converter: {\n      fromAttribute(value: string | null): Array<DropUpItem | string> {\n        if (!value) return [];\n        try {\n          const parsed: unknown = JSON.parse(value);\n          return Array.isArray(parsed) ? (parsed as Array<DropUpItem | string>) : [];\n        } catch {\n          return [];\n        }\n      },\n      toAttribute(value: Array<DropUpItem | string>): string {\n        return JSON.stringify(value);\n      }\n    }\n  })\n  items: Array<DropUpItem | string> = [];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  // Optional element treated as \"inside\" for outside-click AND used as the position anchor\n  @property({ attribute: false })\n  anchor?: Element;\n\n  @query('.menu')\n  private _menu!: HTMLElement;\n\n  private _outsideClickHandler = (e: MouseEvent) => {\n    const path = e.composedPath();\n    if (!path.includes(this) && (!this.anchor || !path.includes(this.anchor))) {\n      this.dispatchEvent(new CustomEvent('sw-dropup-close', { bubbles: true, composed: true }));\n    }\n  };\n\n  updated(changed: Map<string, unknown>) {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      document.addEventListener('mousedown', this._outsideClickHandler);\n      if (this.anchor) {\n        this._positionToAnchor();\n      }\n    } else {\n      document.removeEventListener('mousedown', this._outsideClickHandler);\n    }\n  }\n\n  private _positionToAnchor() {\n    const rect = this.anchor!.getBoundingClientRect();\n    const offset = 4;\n    this._menu.style.position = 'fixed';\n    this._menu.style.top = `${rect.top - offset}px`;\n    this._menu.style.bottom = 'auto';\n    this._menu.style.left = `${rect.left + rect.width / 2}px`;\n    this._menu.style.right = 'auto';\n    this._menu.style.transform = 'translateX(-50%) translateY(-100%)';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('mousedown', this._outsideClickHandler);\n  }\n\n  private normalizeItem(item: DropUpItem | string): DropUpItem {\n    if (typeof item === 'string') {\n      return { label: item, id: item, selected: false };\n    }\n    return item;\n  }\n\n  private onSelect(item: DropUpItem) {\n    const selectedItem = { ...item, selected: true };\n    this.items = (this.items ?? []).map((i) => {\n      const normalized = this.normalizeItem(i);\n      return { ...normalized, selected: normalized.id === item.id };\n    });\n    this.dispatchEvent(\n      new CustomEvent('sw-dropup-select', {\n        detail: selectedItem,\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    const list = (this.items ?? []).map((i) => {\n      const item = this.normalizeItem(i);\n      return html`\n        <button\n          part=\"item\"\n          @click=${() => this.onSelect(item)}\n          class=${item.selected === true ? 'selected' : ''}\n        >\n          ${item.label}\n        </button>\n      `;\n    });\n\n    return html`\n      <div part=\"menu\" class=\"menu ${this.open ? 'open' : ''}\">${list.length ? list : nothing}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-dropup': SwUiDropup;\n  }\n}\n"],"names":["SwUiDropup","LitElement","path","changed","rect","offset","item","selectedItem","i","normalized","list","html","nothing","css","__decorateClass","property","value","parsed","query","customElement"],"mappings":"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"}

package/dist/components/UI/controls/sw-ui-split-button.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import type { DropUpItem } from './sw-ui-dropup';
+/**
+ * Pill-shaped split button: main action + optional chevron dropdown.
+ *
+ * When `items` is non-empty, renders as a unified pill with a subtle
+ * divider between the icon area and the chevron: `[ 🎤 | ▲ ]`
+ *
+ * When `items` is empty, renders as a single pill button.
+ *
+ * - **active/inactive** slots → toggle button, dispatches `sw-split-button-toggle`
+ * - **default** slot only → push button, dispatches `sw-split-button-click`
+ *
+ * @slot active   - icon shown when active
+ * @slot inactive - icon shown when inactive
+ * @slot (default)- icon for a non-toggle button
+ *
+ * @fires sw-split-button-toggle - Fired on toggle-mode click. `detail` is the new active state (boolean).
+ * @fires sw-split-button-click  - Fired on push-mode click. No detail.
+ *
+ * @cssprop --sw-split-button-size     [44px]  - height (width auto-fits content)
+ * @cssprop --sw-split-button-bg       - button background (falls back to --bg-surface)
+ * @cssprop --sw-split-button-bg-hover - hover background (falls back to --bg-surface-raised)
+ * @cssprop --sw-split-button-color    - icon colour (falls back to --fg-default)
+ * @cssprop --sw-split-button-radius   - border-radius (falls back to --radius-full)
+ */
+export declare class SwUiSplitButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    items: Array<DropUpItem | string>;
+    active: boolean;
+    private _dropupOpen;
+    private _hasNamedSlots;
+    private _chevronBtn;
+    private _onDropupSelect;
+    private _updateNamedSlots;
+    private _onMainClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-split-button': SwUiSplitButton;
+    }
+}
+//# sourceMappingURL=sw-ui-split-button.d.ts.map

package/dist/components/UI/controls/sw-ui-split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/controls/sw-ui-split-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,0BAwEX;IAkBF,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,CAAM;IAGvC,MAAM,EAAE,OAAO,CAAS;IAGxB,OAAO,CAAC,WAAW,CAAkB;IAGrC,OAAO,CAAC,cAAc,CAAS;IAG/B,OAAO,CAAC,WAAW,CAAqB;IAExC,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,YAAY;IAepB,MAAM;CAsCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}