@ghchinoy/lit-audio-ui 0.3.5 → 0.4.0

package/dist/components/scream-voice-button.js

@@ -1,8 +1,8 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 import "@material/web/button/filled-button.js";
-import "@material/web/icon/icon.js";
 /**
 * Copyright 2026 Google LLC
 *

package/dist/components/ui-3d-flip.js

@@ -0,0 +1,126 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import "@material/web/icon/icon.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.flipped = !1, this.axis = "y", this.duration = "0.6s";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      perspective: 1000px;
+      width: 100%;
+      height: 100%;
+    }
+
+    .flip-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      transition: transform var(--ui-3d-flip-duration, 0.6s);
+      transform-style: preserve-3d;
+    }
+
+    :host([flipped]) .flip-container {
+      transform: rotateY(180deg);
+    }
+
+    :host([flipped][axis='x']) .flip-container {
+      transform: rotateX(180deg);
+    }
+
+    .front,
+    .back {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+      display: flex;
+      flex-direction: column;
+      border-radius: inherit;
+      overflow: hidden;
+    }
+
+    .back {
+      transform: rotateY(180deg);
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+
+    :host([axis='x']) .back {
+      transform: rotateX(180deg);
+    }
+
+    /* Slot for optional trigger icon */
+    .flip-trigger {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 10;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+	}
+	render() {
+		return r`
+      <div
+        class="flip-container"
+        style="--ui-3d-flip-duration: ${this.duration}"
+      >
+        <div class="front">
+          <slot name="front"></slot>
+          <div class="flip-trigger" @click=${this.toggle}>
+            <slot name="flip-icon">
+              <!-- Default info icon if nothing provided -->
+              <md-icon style="color: white; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));">info</md-icon>
+            </slot>
+          </div>
+        </div>
+        <div class="back">
+          <slot name="back"></slot>
+          <div class="flip-trigger" @click=${this.toggle}>
+            <slot name="flip-icon-back">
+              <md-icon style="color: var(--md-sys-color-primary);">close</md-icon>
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	toggle() {
+		this.flipped = !this.flipped, this.dispatchEvent(new CustomEvent("flip-change", {
+			detail: { flipped: this.flipped },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "flipped", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "axis", void 0), e([a({ type: String })], o.prototype, "duration", void 0), o = e([i("ui-3d-flip")], o);
+export { o as Ui3dFlip };

package/dist/components/ui-audio-next-button.js

@@ -0,0 +1,46 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as n } from "../utils/audio-context.js";
+import "@material/web/icon/icon.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o } from "lit/decorators.js";
+import "@material/web/iconbutton/icon-button.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var s = class extends r {
+	static {
+		this.styles = i`
+    :host {
+      display: inline-block;
+    }
+  `;
+	}
+	render() {
+		return a`
+      <md-icon-button
+        ?disabled=${!(this.playerState && this.playerState.items.length > 0 && (this.playerState.currentIndex < this.playerState.items.length - 1 || this.playerState.autoAdvance))}
+        @click=${() => this.playerState?.next()}
+      >
+        <md-icon>skip_next</md-icon>
+      </md-icon-button>
+    `;
+	}
+};
+e([t({
+	context: n,
+	subscribe: !0
+})], s.prototype, "playerState", void 0), s = e([o("ui-audio-next-button")], s);
+export { s as UiAudioNextButton };

package/dist/components/ui-audio-play-button.js

@@ -1,9 +1,9 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
 import { audioPlayerContext as n } from "../utils/audio-context.js";
+import "@material/web/icon/icon.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/iconbutton/filled-icon-button.js";
 import "@material/web/progress/circular-progress.js";
 var c = class extends r {

package/dist/components/ui-audio-prev-button.js

@@ -0,0 +1,46 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as n } from "../utils/audio-context.js";
+import "@material/web/icon/icon.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o } from "lit/decorators.js";
+import "@material/web/iconbutton/icon-button.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var s = class extends r {
+	static {
+		this.styles = i`
+    :host {
+      display: inline-block;
+    }
+  `;
+	}
+	render() {
+		return a`
+      <md-icon-button
+        ?disabled=${!(this.playerState && this.playerState.items.length > 0 && (this.playerState.currentIndex > 0 || this.playerState.autoAdvance))}
+        @click=${() => this.playerState?.previous()}
+      >
+        <md-icon>skip_previous</md-icon>
+      </md-icon-button>
+    `;
+	}
+};
+e([t({
+	context: n,
+	subscribe: !0
+})], s.prototype, "playerState", void 0), s = e([o("ui-audio-prev-button")], s);
+export { s as UiAudioPrevButton };

package/dist/components/ui-audio-provider.js

@@ -5,7 +5,7 @@ import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s, query as c, state as l } from "lit/decorators.js";
 var u = class extends r {
 	constructor(...e) {
-		super(...e), this.src = "", this._animationFrameId = 0, this.state = {
+		super(...e), this.src = "", this.items = [], this.autoAdvance = !0, this._animationFrameId = 0, this.state = {
 			src: "",
 			isPlaying: !1,
 			isBuffering: !1,
@@ -13,13 +13,19 @@ var u = class extends r {
 			duration: 0,
 			volume: 1,
 			muted: !1,
+			items: [],
+			currentIndex: -1,
+			autoAdvance: !0,
 			analyserNode: void 0,
 			play: () => this.play(),
 			pause: () => this.pause(),
 			togglePlay: () => this._togglePlay(),
 			seek: (e) => this._seek(e),
 			setVolume: (e) => this._setVolume(e),
-			toggleMute: () => this._toggleMute()
+			toggleMute: () => this._toggleMute(),
+			next: () => this.next(),
+			previous: () => this.previous(),
+			select: (e) => this.select(e)
 		};
 	}
 	static {
@@ -55,10 +61,10 @@ var u = class extends r {
 			isPlaying: !1,
 			currentTime: 0,
 			error: void 0
-		});
+		}), e.has("items") && (this._updateState({ items: this.items }), this.items.length > 0 && !this.src && this.state.currentIndex === -1 && this.select(0)), e.has("autoAdvance") && this._updateState({ autoAdvance: this.autoAdvance });
 	}
 	updated(e) {
-		e.has("src") && this._audioEl && this._audioEl.load();
+		e.has("src") && this._audioEl && (this._audioEl.load(), this.state.isPlaying && this.play());
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this._animationFrameId && cancelAnimationFrame(this._animationFrameId), this._audioContext && this._audioContext.state !== "closed" && this._audioContext.close();
@@ -103,14 +109,34 @@ var u = class extends r {
 	_toggleMute() {
 		this._audioEl && (this._audioEl.muted = !this._audioEl.muted, this._updateState({ muted: this._audioEl.muted }));
 	}
+	next() {
+		if (this.items.length === 0) return;
+		let e = (this.state.currentIndex + 1) % this.items.length;
+		this.select(e);
+	}
+	previous() {
+		if (this.items.length === 0) return;
+		let e = (this.state.currentIndex - 1 + this.items.length) % this.items.length;
+		this.select(e);
+	}
+	select(e) {
+		if (e >= 0 && e < this.items.length) {
+			let t = this.items[e];
+			this.src = t.src, this._updateState({
+				currentIndex: e,
+				src: t.src,
+				currentTime: 0
+			});
+		}
+	}
 	_handleLoadedMetadata() {
 		this._updateState({ duration: this._audioEl.duration });
 	}
 	_handleEnded() {
-		this._updateState({
+		this.autoAdvance && this.items.length > 0 ? (this.next(), this.play()) : (this._updateState({
 			isPlaying: !1,
 			currentTime: 0
-		}), this._audioEl.currentTime = 0;
+		}), this._audioEl.currentTime = 0);
 	}
 	_handlePlaying() {
 		this._updateState({
@@ -136,5 +162,5 @@ var u = class extends r {
 		this._animationFrameId = requestAnimationFrame(e);
 	}
 };
-e([s({ type: String })], u.prototype, "src", void 0), e([c("audio")], u.prototype, "_audioEl", void 0), e([t({ context: n }), l()], u.prototype, "state", void 0), u = e([o("ui-audio-provider")], u);
+e([s({ type: String })], u.prototype, "src", void 0), e([s({ type: Array })], u.prototype, "items", void 0), e([s({ type: Boolean })], u.prototype, "autoAdvance", void 0), e([c("audio")], u.prototype, "_audioEl", void 0), e([t({ context: n }), l()], u.prototype, "state", void 0), u = e([o("ui-audio-provider")], u);
 export { u as UiAudioProvider };

package/dist/components/ui-audio-time-display.js

@@ -5,7 +5,7 @@ import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
 var c = class extends r {
 	constructor(...e) {
-		super(...e), this.format = "full";
+		super(...e), this.format = "combined", this.separator = " / ", this.compact = !1;
 	}
 	static {
 		this.styles = i`
@@ -24,17 +24,16 @@ var c = class extends r {
 		if (this.format === "remaining") {
 			let n = Math.max(0, t - e);
 			return a`-${this._formatTime(n)}`;
-		} else return a`${this._formatTime(e)} /
-      ${t ? this._formatTime(t) : "--:--"}`;
+		} else return a`${this._formatTime(e)}${this.separator}${t ? this._formatTime(t) : "--:--"}`;
 	}
 	_formatTime(e) {
-		if (!e || isNaN(e)) return "0:00";
+		if (!e || isNaN(e)) return this.compact, "0:00";
 		let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60), i = "";
-		return t > 0 && (i += "" + t + ":" + (n < 10 ? "0" : "")), i += "" + n + ":" + (r < 10 ? "0" : ""), i += "" + r, i;
+		return t > 0 ? i += "" + t + ":" + (n < 10 ? "0" : "") : this.compact, i += "" + n + ":" + (r < 10 ? "0" : ""), i += "" + r, i;
 	}
 };
 e([t({
 	context: n,
 	subscribe: !0
-}), s({ attribute: !1 })], c.prototype, "playerState", void 0), e([s({ type: String })], c.prototype, "format", void 0), c = e([o("ui-audio-time-display")], c);
+}), s({ attribute: !1 })], c.prototype, "playerState", void 0), e([s({ type: String })], c.prototype, "format", void 0), e([s({ type: String })], c.prototype, "separator", void 0), e([s({ type: Boolean })], c.prototype, "compact", void 0), c = e([o("ui-audio-time-display")], c);
 export { c as UiAudioTimeDisplay };

package/dist/components/ui-audio-volume-slider.js

@@ -1,9 +1,9 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
 import { audioPlayerContext as n } from "../utils/audio-context.js";
+import "@material/web/icon/icon.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/slider/slider.js";
 import "@material/web/iconbutton/icon-button.js";
 var c = class extends r {

package/dist/components/ui-mic-selector.js

@@ -1,8 +1,8 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import "./ui-live-waveform.js";
+import "@material/web/icon/icon.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/menu/menu.js";
 import "@material/web/menu/menu-item.js";
 import "@material/web/divider/divider.js";

package/dist/components/ui-orb.js

@@ -32,7 +32,12 @@ var c = class extends t {
 		this._initThree();
 	}
 	updated(e) {
-		e.has("colors") && this._updateColors();
+		e.has("colors") && this._updateColors(), e.has("seed") && this._updateSeed();
+	}
+	_updateSeed() {
+		if (!this._mesh) return;
+		let e = this._splitmix32(this.seed), t = new Float32Array(Array.from({ length: 7 }, () => e() * Math.PI * 2));
+		this._mesh.material.uniforms.uOffsets.value = t;
 	}
 	_updateColors() {
 		if (!(!this._targetColor1 || !this._targetColor2)) if (this.colors && this.colors.length === 2) this._targetColor1.set(this.colors[0]), this._targetColor2.set(this.colors[1]);

package/dist/components/ui-playlist.js

@@ -0,0 +1,106 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as n } from "../utils/audio-context.js";
+import "@material/web/icon/icon.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import "@material/web/list/list.js";
+import "@material/web/list/list-item.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var c = class extends r {
+	constructor(...e) {
+		super(...e), this.header = "Queue", this.emptyText = "No tracks in queue";
+	}
+	static {
+		this.styles = i`
+    :host {
+      display: block;
+      background: var(--md-sys-color-surface-container-low, transparent);
+      border-radius: 12px;
+      overflow: hidden;
+      font-family: inherit;
+      color-scheme: light dark;
+    }
+
+    .playlist-header {
+      padding: 16px 20px;
+      font-size: 0.75rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--md-sys-color-primary);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    md-list {
+      background: transparent;
+      --md-list-container-color: transparent;
+    }
+
+    md-list-item {
+      --md-list-item-label-text-font: inherit;
+      --md-list-item-supporting-text-font: inherit;
+      cursor: pointer;
+    }
+
+    md-list-item[selected] {
+      --md-list-item-label-text-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary-container, rgba(0, 102, 204, 0.1));
+    }
+
+    .now-playing-icon {
+      color: var(--md-sys-color-primary);
+      font-size: 18px;
+    }
+
+    .empty-state {
+      padding: 32px;
+      text-align: center;
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 0.9rem;
+    }
+  `;
+	}
+	render() {
+		let e = this.playerState?.items || [], t = this.playerState?.currentIndex ?? -1;
+		return a`
+      <div class="playlist-header">${this.header}</div>
+
+      ${e.length === 0 ? a`<div class="empty-state">${this.emptyText}</div>` : a`
+            <md-list>
+              ${e.map((e, n) => a`
+                  <md-list-item
+                    ?selected=${n === t}
+                    @click=${() => this.playerState?.select(n)}
+                  >
+                    <div slot="headline">${e.title || "Untitled Track"}</div>
+                    <div slot="supporting-text">${e.artist || "Unknown Artist"}</div>
+                    ${n === t ? a`<md-icon slot="start" class="now-playing-icon"
+                          >${this.playerState?.isPlaying ? "graphic_eq" : "play_arrow"}</md-icon
+                        >` : a`<md-icon slot="start">music_note</md-icon>`}
+                  </md-list-item>
+                `)}
+            </md-list>
+          `}
+    `;
+	}
+};
+e([t({
+	context: n,
+	subscribe: !0
+})], c.prototype, "playerState", void 0), e([s({ type: String })], c.prototype, "header", void 0), e([s({ type: String })], c.prototype, "emptyText", void 0), c = e([o("ui-playlist")], c);
+export { c as UiPlaylist };

package/dist/components/ui-spectrum-visualizer.js

@@ -0,0 +1,75 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
+import { getNormalizedFrequencyData as t } from "../utils/audio-utils.js";
+import { c as n } from "../node_modules/@lit/context/lib/decorators/consume.js";
+import { audioPlayerContext as r } from "../utils/audio-context.js";
+import { LitElement as i, css as a, html as o } from "lit";
+import { customElement as s, property as c, query as l } from "lit/decorators.js";
+/**
+* Copyright 2026 Google LLC
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+var u = class extends i {
+	constructor(...e) {
+		super(...e), this.barWidth = 4, this.barGap = 2, this.height = 100, this._animationFrameId = 0;
+	}
+	static {
+		this.styles = a`
+    :host {
+      display: block;
+      width: 100%;
+      overflow: hidden;
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+	}
+	render() {
+		return o`<canvas style="height: ${this.height}px;"></canvas>`;
+	}
+	firstUpdated() {
+		this._startLoop();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), cancelAnimationFrame(this._animationFrameId);
+	}
+	_startLoop() {
+		let e = () => {
+			this._renderFrame(), this._animationFrameId = requestAnimationFrame(e);
+		};
+		this._animationFrameId = requestAnimationFrame(e);
+	}
+	_renderFrame() {
+		if (!this._canvas || !this.playerState?.analyserNode) return;
+		let e = this.playerState.analyserNode;
+		this._dataArray ||= new Uint8Array(e.frequencyBinCount);
+		let n = this._canvas.getContext("2d");
+		if (!n) return;
+		let r = this._canvas.getBoundingClientRect(), i = window.devicePixelRatio || 1;
+		this._canvas.width !== r.width * i && (this._canvas.width = r.width * i, this._canvas.height = r.height * i, n.scale(i, i)), n.clearRect(0, 0, r.width, r.height);
+		let a = t(e, this._dataArray), o = this.barWidth + this.barGap, s = Math.floor(r.width / o), c = getComputedStyle(this), l = this.color;
+		l ||= c.getPropertyValue("--md-sys-color-primary").trim() || "#0066cc", n.fillStyle = l;
+		for (let e = 0; e < s; e++) {
+			let t = (a[Math.floor(e / s * (a.length * .6))] || 0) * r.height, i = e * o, c = r.height - t;
+			n.fillRect(i, c, this.barWidth, t);
+		}
+	}
+};
+e([n({
+	context: r,
+	subscribe: !0
+})], u.prototype, "playerState", void 0), e([c({ type: Number })], u.prototype, "barWidth", void 0), e([c({ type: Number })], u.prototype, "barGap", void 0), e([c({ type: Number })], u.prototype, "height", void 0), e([c({ type: String })], u.prototype, "color", void 0), e([l("canvas")], u.prototype, "_canvas", void 0), u = e([s("ui-spectrum-visualizer")], u);
+export { u as UiSpectrumVisualizer };

package/dist/components/ui-speech-cancel-button.js

@@ -1,9 +1,9 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
 import { speechContext as n } from "../utils/speech-context.js";
+import "@material/web/icon/icon.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/iconbutton/icon-button.js";
 var s = class extends r {
 	static {

package/dist/components/ui-speech-record-button.js

@@ -1,9 +1,9 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import { c as t } from "../node_modules/@lit/context/lib/decorators/consume.js";
 import { speechContext as n } from "../utils/speech-context.js";
+import "@material/web/icon/icon.js";
 import { LitElement as r, css as i, html as a } from "lit";
 import { customElement as o, property as s } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 import "@material/web/iconbutton/filled-icon-button.js";
 var c = class extends r {
 	constructor(...e) {

package/dist/components/ui-voice-button.js

@@ -1,9 +1,9 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
 import "./ui-live-waveform.js";
+import "@material/web/icon/icon.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a, state as o } from "lit/decorators.js";
 import "@material/web/button/filled-button.js";
-import "@material/web/icon/icon.js";
 import { classMap as s } from "lit/directives/class-map.js";
 import "@material/web/button/outlined-button.js";
 /**
@@ -36,13 +36,16 @@ var c = class extends t {
     .wrapper {
       display: flex;
       align-items: center;
+      justify-content: center;
       gap: 12px;
+      min-width: 100%;
     }
 
     md-filled-button,
     md-outlined-button {
       transition: all 0.2s ease-in-out;
       font-family: inherit;
+      min-width: 140px; /* Ensure enough room for text + wave */
     }
 
     /* Customize the button depending on the state */
@@ -111,6 +114,7 @@ var c = class extends t {
       background: transparent;
       border: none;
       transition: all 0.3s ease;
+      flex-shrink: 0;
     }
 
     .waveform-slot.idle {
@@ -124,12 +128,13 @@ var c = class extends t {
       opacity: 1;
     }
 
+    /* Waveform contrast colors based on state */
     .waveform-slot.recording {
-      color: var(--md-sys-color-on-error-container, #410002);
+      --current-wave-color: var(--md-sys-color-error, #ba1a1a);
     }
 
     .waveform-slot.processing {
-      color: var(--md-sys-color-on-secondary-container, #001d36);
+      --current-wave-color: var(--md-sys-color-primary, #0066cc);
     }
 
     .trailing-text {
@@ -217,7 +222,7 @@ var c = class extends t {
                     .barRadius=${4}
                     .fadeEdges=${!1}
                     .sensitivity=${1.8}
-                    barColor="var(--ui-speech-wave-color, currentColor)"
+                    barColor="var(--ui-speech-wave-color, var(--current-wave-color, currentColor))"
                     height="20"
                     style="position: absolute; inset: 0;"
                   ></ui-live-waveform>