@corti/dictation-web 0.0.1 → 0.0.2

package/dist/src/mic-selector.js

@@ -1,131 +0,0 @@
-import { __decorate } from "tslib";
-// mic-selector.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import ButtonStyles from './styles/buttons';
-import SelectStyles from './styles/select';
-let MicSelector = class MicSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.devices = [];
-        this.selectedDevice = '';
-    }
-    _selectDevice(device) {
-        this.selectedDevice = device.deviceId;
-        this.dispatchEvent(new CustomEvent('recording-device-changed', {
-            detail: device,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        return html `
-      <div class="mic-selector">
-        <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
-        </button>
-        <div id="settings-popover" popover>
-          <label id="device-select-label" for="device-select">
-            Recording Device
-          </label>
-          <select
-            id="device-select"
-            aria-labelledby="device-select-label"
-            @change=${(e) => {
-            const target = e.target;
-            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
-            if (selectedDevice) {
-                this._selectDevice(selectedDevice);
-            }
-        }}
-          >
-            ${this.devices.map(device => html `
-                <option
-                  value=${device.deviceId}
-                  ?selected=${this.selectedDevice === device.deviceId}
-                >
-                  ${device.label || 'Unknown Device'}
-                </option>
-              `)}
-          </select>
-          <!-- ${this.devices.map(device => html `
-              <div
-                class="dropdown-item ${this.selectedDevice === device.deviceId
-            ? 'selected'
-            : ''}"
-                @click=${() => this._selectDevice(device)}
-              >
-                ${device.label || 'Unknown Device'}
-              </div>
-            `)} -->
-        </div>
-      </div>
-    `;
-    }
-};
-MicSelector.styles = [
-    css `
-      :host {
-        display: block;
-        font-family: var(--component-font-family);
-      }
-      .label {
-        font-size: 0.8rem;
-        color: var(--component-text-color);
-        margin-bottom: 4px;
-      }
-      /* Retain the anchor-name styling for this component */
-      #settings-popover-button {
-        anchor-name: --settings_popover_btn;
-      }
-      [popover] {
-        margin: 0;
-        padding: 16px;
-        border: 0;
-        background: var(--card-background);
-        border: 1px solid var(--card-border-color);
-        border-radius: var(--card-border-radius);
-        box-shadow: var(--card-box-shadow);
-        z-index: 1000;
-        max-width: 260px;
-        position-anchor: --settings_popover_btn;
-        position-area: bottom;
-        position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(45%);
-        overflow-x: hidden;
-      }
-      .dropdown-item {
-        padding: 8px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        color: var(--component-text-color);
-        // allow only a single line of text and truncate the rest
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        opacity: 0.8;
-      }
-      .dropdown-item:hover {
-        background: var(--action-plain-background-hover);
-      }
-      .dropdown-item.selected {
-        font-weight: bold;
-        opacity: 1;
-      }
-    `,
-    ButtonStyles,
-    SelectStyles,
-];
-__decorate([
-    property({ type: Array })
-], MicSelector.prototype, "devices", void 0);
-__decorate([
-    property({ type: String })
-], MicSelector.prototype, "selectedDevice", void 0);
-MicSelector = __decorate([
-    customElement('mic-selector')
-], MicSelector);
-export { MicSelector };
-//# sourceMappingURL=mic-selector.js.map

package/dist/src/mic-selector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mic-selector.js","sourceRoot":"","sources":["../../src/mic-selector.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/settings-menu.d.ts

@@ -1,18 +0,0 @@
-import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
-interface Device {
-    deviceId: string;
-    label?: string;
-}
-export declare class MicSelector extends LitElement {
-    devices: Device[];
-    selectedDevice: string;
-    static styles: CSSResultGroup;
-    private _selectDevice;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mic-selector': MicSelector;
-    }
-}
-export {};

package/dist/src/settings-menu.js

@@ -1,131 +0,0 @@
-import { __decorate } from "tslib";
-// mic-selector.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import ButtonStyles from './styles/buttons';
-import SelectStyles from './styles/select';
-let MicSelector = class MicSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.devices = [];
-        this.selectedDevice = '';
-    }
-    _selectDevice(device) {
-        this.selectedDevice = device.deviceId;
-        this.dispatchEvent(new CustomEvent('recording-device-changed', {
-            detail: device,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        return html `
-      <div class="mic-selector">
-        <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
-        </button>
-        <div id="settings-popover" popover>
-          <label id="device-select-label" for="device-select">
-            Recording Device
-          </label>
-          <select
-            id="device-select"
-            aria-labelledby="device-select-label"
-            @change=${(e) => {
-            const target = e.target;
-            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
-            if (selectedDevice) {
-                this._selectDevice(selectedDevice);
-            }
-        }}
-          >
-            ${this.devices.map(device => html `
-                <option
-                  value=${device.deviceId}
-                  ?selected=${this.selectedDevice === device.deviceId}
-                >
-                  ${device.label || 'Unknown Device'}
-                </option>
-              `)}
-          </select>
-          <!-- ${this.devices.map(device => html `
-              <div
-                class="dropdown-item ${this.selectedDevice === device.deviceId
-            ? 'selected'
-            : ''}"
-                @click=${() => this._selectDevice(device)}
-              >
-                ${device.label || 'Unknown Device'}
-              </div>
-            `)} -->
-        </div>
-      </div>
-    `;
-    }
-};
-MicSelector.styles = [
-    css `
-      :host {
-        display: block;
-        font-family: var(--component-font-family);
-      }
-      .label {
-        font-size: 0.8rem;
-        color: var(--component-text-color);
-        margin-bottom: 4px;
-      }
-      /* Retain the anchor-name styling for this component */
-      #settings-popover-button {
-        anchor-name: --settings_popover_btn;
-      }
-      [popover] {
-        margin: 0;
-        padding: 16px;
-        border: 0;
-        background: var(--card-background);
-        border: 1px solid var(--card-border-color);
-        border-radius: var(--card-border-radius);
-        box-shadow: var(--card-box-shadow);
-        z-index: 1000;
-        max-width: 260px;
-        position-anchor: --settings_popover_btn;
-        position-area: bottom;
-        position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(45%);
-        overflow-x: hidden;
-      }
-      .dropdown-item {
-        padding: 8px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        color: var(--component-text-color);
-        // allow only a single line of text and truncate the rest
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        opacity: 0.8;
-      }
-      .dropdown-item:hover {
-        background: var(--action-plain-background-hover);
-      }
-      .dropdown-item.selected {
-        font-weight: bold;
-        opacity: 1;
-      }
-    `,
-    ButtonStyles,
-    SelectStyles,
-];
-__decorate([
-    property({ type: Array })
-], MicSelector.prototype, "devices", void 0);
-__decorate([
-    property({ type: String })
-], MicSelector.prototype, "selectedDevice", void 0);
-MicSelector = __decorate([
-    customElement('mic-selector')
-], MicSelector);
-export { MicSelector };
-//# sourceMappingURL=settings-menu.js.map

package/dist/src/settings-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/settings-menu.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/settings-popover.d.ts

@@ -1,18 +0,0 @@
-import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
-interface Device {
-    deviceId: string;
-    label?: string;
-}
-export declare class MicSelector extends LitElement {
-    devices: Device[];
-    selectedDevice: string;
-    static styles: CSSResultGroup;
-    private _selectDevice;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mic-selector': MicSelector;
-    }
-}
-export {};

package/dist/src/settings-popover.js

@@ -1,131 +0,0 @@
-import { __decorate } from "tslib";
-// mic-selector.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import ButtonStyles from './styles/buttons';
-import SelectStyles from './styles/select';
-let MicSelector = class MicSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.devices = [];
-        this.selectedDevice = '';
-    }
-    _selectDevice(device) {
-        this.selectedDevice = device.deviceId;
-        this.dispatchEvent(new CustomEvent('recording-device-changed', {
-            detail: device,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        return html `
-      <div class="mic-selector">
-        <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
-        </button>
-        <div id="settings-popover" popover>
-          <label id="device-select-label" for="device-select">
-            Recording Device
-          </label>
-          <select
-            id="device-select"
-            aria-labelledby="device-select-label"
-            @change=${(e) => {
-            const target = e.target;
-            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
-            if (selectedDevice) {
-                this._selectDevice(selectedDevice);
-            }
-        }}
-          >
-            ${this.devices.map(device => html `
-                <option
-                  value=${device.deviceId}
-                  ?selected=${this.selectedDevice === device.deviceId}
-                >
-                  ${device.label || 'Unknown Device'}
-                </option>
-              `)}
-          </select>
-          <!-- ${this.devices.map(device => html `
-              <div
-                class="dropdown-item ${this.selectedDevice === device.deviceId
-            ? 'selected'
-            : ''}"
-                @click=${() => this._selectDevice(device)}
-              >
-                ${device.label || 'Unknown Device'}
-              </div>
-            `)} -->
-        </div>
-      </div>
-    `;
-    }
-};
-MicSelector.styles = [
-    css `
-      :host {
-        display: block;
-        font-family: var(--component-font-family);
-      }
-      .label {
-        font-size: 0.8rem;
-        color: var(--component-text-color);
-        margin-bottom: 4px;
-      }
-      /* Retain the anchor-name styling for this component */
-      #settings-popover-button {
-        anchor-name: --settings_popover_btn;
-      }
-      [popover] {
-        margin: 0;
-        padding: 16px;
-        border: 0;
-        background: var(--card-background);
-        border: 1px solid var(--card-border-color);
-        border-radius: var(--card-border-radius);
-        box-shadow: var(--card-box-shadow);
-        z-index: 1000;
-        max-width: 260px;
-        position-anchor: --settings_popover_btn;
-        position-area: bottom;
-        position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(45%);
-        overflow-x: hidden;
-      }
-      .dropdown-item {
-        padding: 8px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        color: var(--component-text-color);
-        // allow only a single line of text and truncate the rest
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        opacity: 0.8;
-      }
-      .dropdown-item:hover {
-        background: var(--action-plain-background-hover);
-      }
-      .dropdown-item.selected {
-        font-weight: bold;
-        opacity: 1;
-      }
-    `,
-    ButtonStyles,
-    SelectStyles,
-];
-__decorate([
-    property({ type: Array })
-], MicSelector.prototype, "devices", void 0);
-__decorate([
-    property({ type: String })
-], MicSelector.prototype, "selectedDevice", void 0);
-MicSelector = __decorate([
-    customElement('mic-selector')
-], MicSelector);
-export { MicSelector };
-//# sourceMappingURL=settings-popover.js.map

package/dist/src/settings-popover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings-popover.js","sourceRoot":"","sources":["../../src/settings-popover.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/settings.d.ts

@@ -1,18 +0,0 @@
-import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
-interface Device {
-    deviceId: string;
-    label?: string;
-}
-export declare class MicSelector extends LitElement {
-    devices: Device[];
-    selectedDevice: string;
-    static styles: CSSResultGroup;
-    private _selectDevice;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mic-selector': MicSelector;
-    }
-}
-export {};

package/dist/src/settings.js

@@ -1,131 +0,0 @@
-import { __decorate } from "tslib";
-// mic-selector.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import ButtonStyles from './styles/buttons';
-import SelectStyles from './styles/select';
-let MicSelector = class MicSelector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.devices = [];
-        this.selectedDevice = '';
-    }
-    _selectDevice(device) {
-        this.selectedDevice = device.deviceId;
-        this.dispatchEvent(new CustomEvent('recording-device-changed', {
-            detail: device,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        return html `
-      <div class="mic-selector">
-        <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
-        </button>
-        <div id="settings-popover" popover>
-          <label id="device-select-label" for="device-select">
-            Recording Device
-          </label>
-          <select
-            id="device-select"
-            aria-labelledby="device-select-label"
-            @change=${(e) => {
-            const target = e.target;
-            const selectedDevice = this.devices.find(device => device.deviceId === target.value);
-            if (selectedDevice) {
-                this._selectDevice(selectedDevice);
-            }
-        }}
-          >
-            ${this.devices.map(device => html `
-                <option
-                  value=${device.deviceId}
-                  ?selected=${this.selectedDevice === device.deviceId}
-                >
-                  ${device.label || 'Unknown Device'}
-                </option>
-              `)}
-          </select>
-          <!-- ${this.devices.map(device => html `
-              <div
-                class="dropdown-item ${this.selectedDevice === device.deviceId
-            ? 'selected'
-            : ''}"
-                @click=${() => this._selectDevice(device)}
-              >
-                ${device.label || 'Unknown Device'}
-              </div>
-            `)} -->
-        </div>
-      </div>
-    `;
-    }
-};
-MicSelector.styles = [
-    css `
-      :host {
-        display: block;
-        font-family: var(--component-font-family);
-      }
-      .label {
-        font-size: 0.8rem;
-        color: var(--component-text-color);
-        margin-bottom: 4px;
-      }
-      /* Retain the anchor-name styling for this component */
-      #settings-popover-button {
-        anchor-name: --settings_popover_btn;
-      }
-      [popover] {
-        margin: 0;
-        padding: 16px;
-        border: 0;
-        background: var(--card-background);
-        border: 1px solid var(--card-border-color);
-        border-radius: var(--card-border-radius);
-        box-shadow: var(--card-box-shadow);
-        z-index: 1000;
-        max-width: 260px;
-        position-anchor: --settings_popover_btn;
-        position-area: bottom;
-        position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(45%);
-        overflow-x: hidden;
-      }
-      .dropdown-item {
-        padding: 8px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        color: var(--component-text-color);
-        // allow only a single line of text and truncate the rest
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        opacity: 0.8;
-      }
-      .dropdown-item:hover {
-        background: var(--action-plain-background-hover);
-      }
-      .dropdown-item.selected {
-        font-weight: bold;
-        opacity: 1;
-      }
-    `,
-    ButtonStyles,
-    SelectStyles,
-];
-__decorate([
-    property({ type: Array })
-], MicSelector.prototype, "devices", void 0);
-__decorate([
-    property({ type: String })
-], MicSelector.prototype, "selectedDevice", void 0);
-MicSelector = __decorate([
-    customElement('mic-selector')
-], MicSelector);
-export { MicSelector };
-//# sourceMappingURL=settings.js.map

package/dist/src/settings.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../src/settings.ts"],"names":[],"mappings":";AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAQpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAEL,YAAO,GAAa,EAAE,CAAC;QAGvB,mBAAc,GAAW,EAAE,CAAC;IAuH9B,CAAC;IA7DS,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC1C,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;sBAYO,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;cAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEF,MAAM,CAAC,QAAQ;8BACX,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;;oBAEjD,MAAM,CAAC,KAAK,IAAI,gBAAgB;;eAErC,CACF;;iBAEI,IAAI,CAAC,OAAO,CAAC,GAAG,CACrB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;uCAEa,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,QAAQ;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;yBACG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;kBAEvC,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;AApHM,kBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;IACD,YAAY;IACZ,YAAY;CACb,AAtDY,CAsDX;AA3DF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACC;AALjB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4HvB","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport ButtonStyles from './styles/buttons';\nimport SelectStyles from './styles/select';\n\ninterface Device {\n  deviceId: string;\n  label?: string;\n}\n\n@customElement('mic-selector')\nexport class MicSelector extends LitElement {\n  @property({ type: Array })\n  devices: Device[] = [];\n\n  @property({ type: String })\n  selectedDevice: string = '';\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\n      }\n      .label {\n        font-size: 0.8rem;\n        color: var(--component-text-color);\n        margin-bottom: 4px;\n      }\n      /* Retain the anchor-name styling for this component */\n      #settings-popover-button {\n        anchor-name: --settings_popover_btn;\n      }\n      [popover] {\n        margin: 0;\n        padding: 16px;\n        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\n        z-index: 1000;\n        max-width: 260px;\n        position-anchor: --settings_popover_btn;\n        position-area: bottom;\n        position-visibility: always;\n        /* inset: unset; */\n        transform: translateX(45%);\n        overflow-x: hidden;\n      }\n      .dropdown-item {\n        padding: 8px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--component-text-color);\n        // allow only a single line of text and truncate the rest\n        width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        opacity: 0.8;\n      }\n      .dropdown-item:hover {\n        background: var(--action-plain-background-hover);\n      }\n      .dropdown-item.selected {\n        font-weight: bold;\n        opacity: 1;\n      }\n    `,\n    ButtonStyles,\n    SelectStyles,\n  ];\n\n  private _selectDevice(device: Device): void {\n    this.selectedDevice = device.deviceId;\n    this.dispatchEvent(\n      new CustomEvent('recording-device-changed', {\n        detail: device,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <label id=\"device-select-label\" for=\"device-select\">\n            Recording Device\n          </label>\n          <select\n            id=\"device-select\"\n            aria-labelledby=\"device-select-label\"\n            @change=${(e: Event) => {\n              const target = e.target as HTMLSelectElement;\n              const selectedDevice = this.devices.find(\n                device => device.deviceId === target.value,\n              );\n              if (selectedDevice) {\n                this._selectDevice(selectedDevice);\n              }\n            }}\n          >\n            ${this.devices.map(\n              device => html`\n                <option\n                  value=${device.deviceId}\n                  ?selected=${this.selectedDevice === device.deviceId}\n                >\n                  ${device.label || 'Unknown Device'}\n                </option>\n              `,\n            )}\n          </select>\n          <!-- ${this.devices.map(\n            device => html`\n              <div\n                class=\"dropdown-item ${this.selectedDevice === device.deviceId\n                  ? 'selected'\n                  : ''}\"\n                @click=${() => this._selectDevice(device)}\n              >\n                ${device.label || 'Unknown Device'}\n              </div>\n            `,\n          )} -->\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mic-selector': MicSelector;\n  }\n}\n"]}

package/dist/src/styles/ComponentStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentStyles.js","sourceRoot":"","sources":["../../../src/styles/ComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ComponentStyles = css`\n  .wrapper {\n    background-color: var(--card-background);\n    border: 1px solid var(--card-border-color);\n    border-radius: var(--card-border-radius);\n    box-shadow: var(--card-box-shadow);\n    padding: var(--card-padding);\n    display: flex;\n    width: min-content;\n    gap: 4px;\n    height: 46px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n  h2 {\n    margin: 0 0 10px;\n    font-size: 1rem;\n    font-weight: 500;\n  }\n  label {\n    font-size: 0.9rem;\n    margin-right: 8px;\n  }\n  select {\n    padding: 4px 6px;\n    font-size: 0.9rem;\n    border: 1px solid var(--card-border-color);\n    border-radius: 4px;\n    background-color: var(--card-background);\n    color: inherit;\n  }\n\n  .visualiser {\n    width: 16px;\n    height: 100%;\n    background: var(--visualiser-background);\n    margin-top: 8px;\n    border-radius: 5px;\n    overflow: hidden;\n    display: flex;\n    align-items: flex-end;\n  }\n  .level {\n    height: 100%;\n    width: 100%;\n    background: var(--visualiser-level-color);\n    transition: width 0.1s ease-in-out;\n  }\n`;\n\nexport default ComponentStyles;\n"]}

package/dist/src/styles/buttons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttons.js","sourceRoot":"","sources":["../../../src/styles/buttons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ButtonStyles = css`\n  /* Default (plain) button styling */\n  button,\n  .button {\n    background: var(--action-plain-background);\n    /* border: 1px solid var(--action-plain-border-color); */\n    border: none;\n    color: var(--component-text-color);\n    cursor: pointer;\n    padding: 8px;\n    border-radius: var(--card-inner-border-radius);\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.3s ease;\n    font-family: var(--component-font-family);\n  }\n\n  button:hover,\n  .button:hover {\n    background: var(--action-plain-background-hover);\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--action-accent-background);\n    outline-offset: 2px;\n  }\n\n  /* Accent variant */\n  button.accent,\n  .button.accent {\n    background: var(--action-accent-background);\n    color: var(--action-accent-text-color);\n    border: none;\n  }\n\n  button.accent:hover,\n  .button.accent:hover {\n    background: var(--action-accent-background-hover);\n  }\n\n  /* Accent variant */\n  button.red,\n  .button.red {\n    background: var(--action-red-background);\n    color: var(--action-red-text-color);\n    border: none;\n  }\n\n  button.red:hover,\n  .button.red:hover {\n    background: var(--action-red-background-hover);\n  }\n`;\n\nexport default ButtonStyles;\n"]}

package/dist/src/styles/callout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../../src/styles/callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst CalloutStyles = css`\n  .callout {\n    background: var(--callout-accent-background);\n    border: 1px solid var(--callout-accent-border);\n    color: var(--callout-accent-text);\n    padding: 8px;\n    border-radius: var(--card-inner-border-radius);\n    display: flex;\n    font-size: 0.9rem;\n    gap: 8px;\n    align-items: flex-start;\n    &.red {\n      background: var(--callout-red-background);\n      border: 1px solid var(--callout-red-border);\n      color: var(--callout-red-text);\n    }\n    &.orange {\n      background: var(--callout-orange-background);\n      border: 1px solid var(--callout-orange-border);\n      color: var(--callout-orange-text);\n    }\n  }\n`;\n\nexport default CalloutStyles;\n"]}

package/dist/src/styles/select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/styles/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst SelectStyles = css`\n  label {\n    display: block;\n    font-size: 0.8rem;\n    padding-bottom: 0.5rem;\n    font-weight: 500;\n    color: var(--component-text-color);\n    pointer-events: none;\n  }\n  select {\n    background: var(--card-background);\n    color: var(--component-text-color);\n    border: 1px solid var(--card-border-color);\n    padding: var(--card-padding);\n    border-radius: var(--card-inner-border-radius);\n    outline: none;\n    width: 100%;\n  }\n\n  select:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  select:hover {\n    background: var(--action-plain-background-hover);\n  }\n\n  select:focus-visible {\n    outline: 2px solid var(--action-accent-background);\n    /* outline-offset: 2px; */\n  }\n`;\n\nexport default SelectStyles;\n"]}