wip

studio-frontend/src/app/style-select.element.scss

@@ -0,0 +1,53 @@
+@use "sass:math";
+
+:host {
+	// background: red;
+	display: flex;
+	gap: 0.6rem;
+	box-sizing: border-box;
+}
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+.bubble {
+	position: relative;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: flex-end;
+	width: 80px;
+	height: 80px;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+	background: {
+		size: cover;
+		position: center center;
+	}
+
+	outline: #FFF2 solid 2px;
+	color: rgba(#fff, 0.75);
+	transition: {
+		property: background-color, outline-color;
+		duration: 200ms;
+		timing-function: ease;
+	}
+	white-space: nowrap;
+
+	cursor: pointer;
+
+	.gradient {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to top, #000B, #0000);
+		border-radius: 0.5rem;
+	}
+
+	.label {
+		position: relative;
+		font: {
+			size: math.div(12, 16) * 1rem;
+			weight: 500;
+		}
+	}
+}

studio-frontend/src/app/style-select.element.ts

@@ -0,0 +1,63 @@
+import { FormFieldBaseElement } from "@storyteller/studio-ui/forms/form-field-base";
+import { PropertyValues, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+import { type StyleOption, type VstStyle } from "./inspector-tabs/style-tab";
+
+import styles from "./style-select.element.scss?inline";
+
+@customElement("sts-style-select")
+export class StyleSelect extends FormFieldBaseElement {
+	static override styles = unsafeCSS(styles);
+
+	@property({ reflect: true })
+	override role = "listbox"
+
+	@property({ attribute: false })
+	options: readonly StyleOption[] = [];
+
+	@property() value?: VstStyle;
+
+	protected override update(changes: PropertyValues<this>): void {
+		if (changes.has("value"))
+			this.internals.setFormValue(this.value ?? "");
+
+		super.update(changes);
+	}
+
+	protected override render = () => html`
+	    <div>
+			<div
+				class=${classMap({
+					"bubble": true,
+				})}
+				style=${styleMap({
+					"background-image": `url(https://fakeyou.com/images/landing/onboarding/styles/style-2d-anime.webp)`,
+				})}
+			>
+				<div class="gradient"></div>
+				<span class="label">
+					${ "Foo" }
+				</span>
+			</div>
+		    <select
+				@change=${(event: InputEvent) => {
+					const value = (event.target as HTMLSelectElement).value;
+
+					// this.onChange({ target: { name: this.name, value: itemValue } });
+					this.dispatchEvent(new CustomEvent("value-change", {
+						detail: value,
+					}))
+				} }
+			>
+				${ this.options.map(({ label, value }) => html`
+				    <option value="${value}">
+					    ${ label }
+					</option>`
+				)}
+		    </select>
+		</div>
+	`
+}

studio-frontend/src/app/temp-video-preview.element.ts

@@ -10,7 +10,6 @@ import { bind, on } from "@storyteller/framework";
 
 import { VideoStylePreview } from "./api/VideoStylePreview";
 
-import "./bubble-select.element";
 import "./style-select.element";
 
 import styles from "./temp-video-preview.element.scss?inline";
@@ -204,11 +203,13 @@ export class TempVideoPreview extends LitElement {
 						>
 							Select Base Style
 						</label>
-						<sts-bubble-select
+
+						<sts-style-select
 							id="video-style-preview-base-style"
 							.options=${STYLE_OPTIONS}
 							.value=${bind(this, "selectedStyle")}
-						></sts-bubble-select>
+						></sts-style-select>
+
 					</div>
 
 					<div class="video-style-preview__prompts">