@codeauradev/ngx-wind-editor 1.0.1 → 1.0.2

package/fesm2022/codeauradev-ngx-wind-editor.mjs

@@ -1,6 +1,6 @@
 import * as Y from "yjs";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, afterNextRender, computed, effect, inject, input, model, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, afterNextRender, computed, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
 const SLASH_ITEMS = [
 	{
 		id: "paragraph",
@@ -1799,8 +1799,8 @@ function mountWindSurface(host, options) {
 			unsession();
 			frame.replaceChildren();
 		},
-		focus() {
-			docEl.focus();
+		focus(options) {
+			docEl.focus(options);
 		},
 		exec(command) {
 			if (readonly && command.type !== "undo" && command.type !== "redo") return;
@@ -2032,12 +2032,16 @@ const TOOLS = [
 ];
 var WindEditor = class WindEditor {
 	constructor() {
+		this.value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 		this.html = model("", ...ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []);
 		this.placeholder = input("Write something…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
-		this.readOnly = input(false, {
-			...ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {},
-			alias: "readonly"
-		});
+		this.readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+		this.touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+		this.errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+		this.touch = output();
 		this.showToolbar = input(true, ...ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []);
 		this.toolbar = input("full", ...ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []);
 		this.tools = computed(() => {
@@ -2056,6 +2060,7 @@ var WindEditor = class WindEditor {
 		this.sourceOpen = signal(false, ...ngDevMode ? [{ debugName: "sourceOpen" }] : /* istanbul ignore next */ []);
 		this.sourceDraft = signal("", ...ngDevMode ? [{ debugName: "sourceDraft" }] : /* istanbul ignore next */ []);
 		this.slashIndex = signal(0, ...ngDevMode ? [{ debugName: "slashIndex" }] : /* istanbul ignore next */ []);
+		this.errorText = computed(() => this.errors().map((error) => error.message || error.kind).filter((message) => message.length > 0).join(" "), ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
 		this.slashItems = computed(() => {
 			const query = this.change()?.slash;
 			return query === null || query === void 0 ? [] : filterSlash(query);
@@ -2065,15 +2070,23 @@ var WindEditor = class WindEditor {
 		this.handle = null;
 		this.echo = "";
 		afterNextRender(() => this.attach());
+		effect(() => {
+			const next = this.html();
+			if (next !== this.value()) this.value.set(next);
+		});
+		effect(() => {
+			const next = this.value();
+			if (next !== this.html()) this.html.set(next);
+		});
 		effect(() => {
 			const value = this.placeholder();
 			this.handle?.setPlaceholder(value);
 		});
 		effect(() => {
-			this.handle?.setReadonly(this.readOnly());
+			this.handle?.setReadonly(this.readonly() || this.disabled());
 		});
 		effect(() => {
-			const html = this.html();
+			const html = this.value();
 			if (html !== this.echo) this.handle?.setHtml(html);
 		});
 		effect(() => {
@@ -2098,8 +2111,8 @@ var WindEditor = class WindEditor {
 		if (id === "source") return this.sourceOpen();
 		return false;
 	}
-	disabled(id) {
-		if (this.readOnly() && id !== "source") return true;
+	toolDisabled(id) {
+		if ((this.readonly() || this.disabled()) && id !== "source") return true;
 		const snap = this.change();
 		if (id === "undo") return !snap?.canUndo;
 		if (id === "redo") return !snap?.canRedo;
@@ -2147,7 +2160,7 @@ var WindEditor = class WindEditor {
 			this.linkOpen.update((open) => !open);
 		} else if (id === "image") this.imageOpen.update((open) => !open);
 		else if (id === "source") {
-			this.sourceDraft.set(this.change()?.html ?? this.html());
+			this.sourceDraft.set(this.change()?.html ?? this.value());
 			this.sourceOpen.update((open) => !open);
 		}
 	}
@@ -2195,7 +2208,7 @@ var WindEditor = class WindEditor {
 	}
 	applySource() {
 		this.echo = this.sourceDraft();
-		this.html.set(this.echo);
+		this.value.set(this.echo);
 		this.handle?.setHtml(this.echo);
 		this.sourceOpen.set(false);
 	}
@@ -2210,14 +2223,14 @@ var WindEditor = class WindEditor {
 		const element = this.surfaceRef()?.nativeElement;
 		if (!element || this.handle) return;
 		this.handle = mountWindSurface(element, {
-			html: this.html() || void 0,
+			html: this.value() || void 0,
 			placeholder: this.placeholder(),
-			readonly: this.readOnly(),
+			readonly: this.readonly() || this.disabled(),
 			onChange: (change) => {
 				this.change.set(change);
-				if (change.html !== this.html()) {
+				if (change.html !== this.value()) {
 					this.echo = change.html;
-					this.html.set(change.html);
+					this.value.set(change.html);
 				}
 			},
 			onLink: () => {
@@ -2227,7 +2240,15 @@ var WindEditor = class WindEditor {
 			interceptKey: (event) => this.onKey(event)
 		});
 		this.echo = this.handle.getHtml();
-		if (this.echo !== this.html()) this.html.set(this.echo);
+		if (this.echo !== this.value()) this.value.set(this.echo);
+	}
+	focus(options) {
+		this.handle?.focus(options);
+	}
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next instanceof Node && event.currentTarget instanceof Node && event.currentTarget.contains(next)) return;
+		this.touch.emit();
 	}
 	onKey(event) {
 		const items = this.slashItems();
@@ -2273,6 +2294,13 @@ var WindEditor = class WindEditor {
 			isStandalone: true,
 			selector: "wind-editor",
 			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				html: {
 					classPropertyName: "html",
 					publicName: "html",
@@ -2287,13 +2315,48 @@ var WindEditor = class WindEditor {
 					isRequired: false,
 					transformFunction: null
 				},
-				readOnly: {
-					classPropertyName: "readOnly",
+				readonly: {
+					classPropertyName: "readonly",
 					publicName: "readonly",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				invalid: {
+					classPropertyName: "invalid",
+					publicName: "invalid",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				touched: {
+					classPropertyName: "touched",
+					publicName: "touched",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errors: {
+					classPropertyName: "errors",
+					publicName: "errors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				showToolbar: {
 					classPropertyName: "showToolbar",
 					publicName: "showToolbar",
@@ -2309,8 +2372,22 @@ var WindEditor = class WindEditor {
 					transformFunction: null
 				}
 			},
-			outputs: { html: "htmlChange" },
-			host: { classAttribute: "wind-editor block min-w-0" },
+			outputs: {
+				value: "valueChange",
+				html: "htmlChange",
+				touch: "touch"
+			},
+			host: {
+				listeners: { "focusout": "onFocusOut($event)" },
+				properties: {
+					"class.is-invalid": "invalid()",
+					"class.is-disabled": "disabled()",
+					"attr.aria-invalid": "invalid() || null",
+					"attr.aria-required": "required() || null",
+					"attr.aria-disabled": "disabled() || null"
+				},
+				classAttribute: "wind-editor"
+			},
 			viewQueries: [{
 				propertyName: "surfaceRef",
 				first: true,
@@ -2320,22 +2397,22 @@ var WindEditor = class WindEditor {
 			}],
 			ngImport: i0,
 			template: `
-    <div class="rounded-xl border border-stone-200 bg-white text-stone-900 shadow-sm dark:border-stone-800 dark:bg-stone-950 dark:text-stone-100">
+    <div class="wind-shell">
       @if (showToolbar() && tools().length > 0) {
-        <div class="flex gap-0.5 overflow-x-auto border-b border-stone-200 px-1.5 py-1.5 dark:border-stone-800" role="toolbar" aria-label="Formatting">
+        <div class="wind-toolbar" role="toolbar" aria-label="Formatting">
           @for (tool of tools(); track tool.id) {
             <button
               type="button"
-              class="inline-flex h-9 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-sm text-stone-600 hover:bg-stone-100 disabled:opacity-40 aria-pressed:bg-teal-700 aria-pressed:text-white dark:text-stone-300 dark:hover:bg-stone-900 dark:aria-pressed:bg-teal-600"
+              class="wind-tool"
               [attr.aria-label]="tool.label"
               [attr.title]="tool.label"
               [attr.aria-pressed]="pressed(tool.id)"
-              [disabled]="disabled(tool.id)"
+              [disabled]="toolDisabled(tool.id)"
               (mousedown)="$event.preventDefault()"
               (click)="run(tool.id)"
             >
               @if (tool.id === 'paragraph' || tool.id === 'h1' || tool.id === 'h2') {
-                <span class="px-0.5 text-xs font-semibold tracking-wide">{{ tool.id === 'paragraph' ? 'P' : tool.id.toUpperCase() }}</span>
+                <span class="wind-tool-label">{{ tool.id === 'paragraph' ? 'P' : tool.id.toUpperCase() }}</span>
               } @else {
                 <wind-icon [name]="tool.icon" />
               }
@@ -2345,33 +2422,33 @@ var WindEditor = class WindEditor {
       }
 
       @if (linkOpen()) {
-        <form class="flex flex-wrap items-center gap-2 border-b border-stone-200 px-3 py-2 dark:border-stone-800" (submit)="applyLink($event)">
-          <label class="sr-only" for="wind-link">Link URL</label>
+        <form class="wind-pop" (submit)="applyLink($event)">
+          <label class="wind-sr" for="wind-link">Link URL</label>
           <input
             id="wind-link"
-            class="h-9 min-w-0 flex-1 rounded-md border border-stone-300 bg-white px-2 text-sm outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900"
+            class="wind-field"
             [value]="linkDraft()"
             placeholder="https://"
             (input)="onDraft($event, 'link')"
           />
-          <button type="submit" class="h-9 rounded-md bg-teal-700 px-3 text-sm font-medium text-white">Apply</button>
-          <button type="button" class="h-9 rounded-md px-2 text-sm text-stone-600 dark:text-stone-300" (click)="clearLink()">Remove</button>
+          <button type="submit" class="wind-primary">Apply</button>
+          <button type="button" class="wind-quiet" (click)="clearLink()">Remove</button>
         </form>
       }
 
       @if (imageOpen()) {
-        <form class="flex flex-wrap items-center gap-2 border-b border-stone-200 px-3 py-2 dark:border-stone-800" (submit)="applyImage($event)">
-          <input class="h-9 min-w-0 flex-1 rounded-md border border-stone-300 bg-white px-2 text-sm outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900" [value]="imageSrc()" placeholder="Image URL" (input)="onDraft($event, 'src')" />
-          <input class="h-9 w-36 rounded-md border border-stone-300 bg-white px-2 text-sm outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900" [value]="imageAlt()" placeholder="Alt text" (input)="onDraft($event, 'alt')" />
-          <button type="submit" class="h-9 rounded-md bg-teal-700 px-3 text-sm font-medium text-white">Insert</button>
+        <form class="wind-pop" (submit)="applyImage($event)">
+          <input class="wind-field" [value]="imageSrc()" placeholder="Image URL" (input)="onDraft($event, 'src')" />
+          <input class="wind-field wind-field-short" [value]="imageAlt()" placeholder="Alt text" (input)="onDraft($event, 'alt')" />
+          <button type="submit" class="wind-primary">Insert</button>
         </form>
       }
 
-      <div class="relative min-h-48" #surface></div>
+      <div class="wind-surface" #surface></div>
 
       @if (slashItems().length > 0 && change()?.slashRect; as rect) {
         <ul
-          class="fixed z-30 max-h-64 w-56 overflow-auto rounded-lg border border-stone-200 bg-white py-1 shadow-lg dark:border-stone-700 dark:bg-stone-900"
+          class="wind-menu"
           role="listbox"
           [style.top.px]="rect.top"
           [style.left.px]="rect.left"
@@ -2380,43 +2457,46 @@ var WindEditor = class WindEditor {
             <li>
               <button
                 type="button"
-                class="flex w-full items-baseline justify-between gap-3 px-3 py-1.5 text-left text-sm hover:bg-stone-100 dark:hover:bg-stone-800"
-                [class.bg-teal-700]="index === slashIndex()"
-                [class.text-white]="index === slashIndex()"
+                class="wind-option"
+                [class.is-active]="index === slashIndex()"
                 role="option"
                 [attr.aria-selected]="index === slashIndex()"
                 (mousedown)="$event.preventDefault()"
                 (click)="pickSlash(item)"
               >
                 <span>{{ item.label }}</span>
-                <span class="text-xs opacity-70">{{ item.hint }}</span>
+                <span class="wind-option-hint">{{ item.hint }}</span>
               </button>
             </li>
           }
         </ul>
       }
 
-      <footer class="flex items-center justify-between gap-3 border-t border-stone-200 px-3 py-1.5 text-xs text-stone-500 dark:border-stone-800 dark:text-stone-400">
+      <footer class="wind-meta">
         <span>{{ change()?.words ?? 0 }} words</span>
-        <span class="text-stone-400">/ for blocks</span>
+        <span class="wind-meta-hint">/ for blocks</span>
       </footer>
 
+      @if (invalid() && errorText()) {
+        <p class="wind-error" role="alert">{{ errorText() }}</p>
+      }
+
       @if (sourceOpen()) {
-        <div class="border-t border-stone-200 p-3 dark:border-stone-800">
+        <div class="wind-source">
           <textarea
-            class="h-40 w-full resize-y rounded-md border border-stone-300 bg-stone-50 p-2 font-mono text-xs outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900"
+            class="wind-source-input"
             [value]="sourceDraft()"
             spellcheck="false"
             aria-label="HTML source"
             (input)="onDraft($event, 'source')"
           ></textarea>
-          <button type="button" class="mt-2 h-9 rounded-md bg-stone-900 px-3 text-sm text-white dark:bg-stone-100 dark:text-stone-900" (click)="applySource()">Apply HTML</button>
+          <button type="button" class="wind-primary" (click)="applySource()">Apply HTML</button>
         </div>
       }
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;min-width:0}.wind-frame{position:relative;min-width:0}.wind-doc{min-height:12rem;padding:1rem 1.15rem 1.5rem;outline:none;color:var(--color-stone-900, #1c1917);font-family:var(--font-serif, Georgia, \"Iowan Old Style\", \"Palatino Linotype\", serif);font-size:1.0625rem;line-height:1.65;caret-color:var(--color-teal-700, #0f766e);overflow-wrap:anywhere}.wind-doc>*+*{margin-top:.75rem}.wind-doc p,.wind-doc h1,.wind-doc h2,.wind-doc h3,.wind-doc blockquote,.wind-doc pre,.wind-doc li{margin:0}.wind-doc h1,.wind-doc h2,.wind-doc h3{font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);line-height:1.2;letter-spacing:-.03em;color:var(--color-stone-950, #0c0a09)}.wind-doc h1{font-size:1.875rem;font-weight:600}.wind-doc h2{font-size:1.5rem;font-weight:600}.wind-doc h3{font-size:1.25rem;font-weight:600}.wind-doc blockquote{border-left:2px solid var(--color-teal-700, #0f766e);padding-left:.9rem;color:var(--color-stone-600, #57534e)}.wind-doc ul,.wind-doc ol{margin:0;padding-left:1.25rem}.wind-doc li+li{margin-top:.25rem}.wind-doc pre{overflow-x:auto;border-radius:.6rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 6%,transparent);padding:.8rem .9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem;line-height:1.55;white-space:pre-wrap}.wind-doc pre code{font:inherit;background:none;padding:0}.wind-doc a{color:var(--color-teal-800, #115e59);text-decoration:underline;text-underline-offset:2px}.wind-doc code{border-radius:.3rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 8%,transparent);padding:.05em .3em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}.wind-doc img{display:block;max-width:100%;border-radius:.6rem}.wind-doc figure{margin:0}.wind-doc hr{border:0;border-top:1px solid var(--color-stone-300, #d6d3d1);margin:.25rem 0}.wind-doc [data-atomic].is-selected{outline:2px solid var(--color-teal-700, #0f766e);outline-offset:3px;border-radius:.4rem}.wind-doc[data-empty=true]>p[data-placeholder]:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--color-stone-400, #a8a29e)}.wind-carets{position:absolute;inset:0;pointer-events:none;overflow:hidden}.wind-caret,.wind-remote{position:absolute;pointer-events:none}.wind-caret{width:2px;background:var(--peer);border-radius:1px}.wind-caret i{position:absolute;top:-1.15rem;left:-1px;border-radius:.3rem;background:var(--peer);color:#fff;padding:.05rem .3rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);font-size:.65rem;font-style:normal;line-height:1.3;letter-spacing:.01em;white-space:nowrap}.wind-remote{background:color-mix(in oklab,var(--peer) 32%,transparent);border-radius:.1rem}.wind-frame.is-readonly .wind-doc{caret-color:transparent}.dark .wind-doc{color:var(--color-stone-100, #f5f5f4);caret-color:var(--color-teal-300, #5eead4)}.dark .wind-doc h1,.dark .wind-doc h2,.dark .wind-doc h3{color:var(--color-stone-50, #fafaf9)}.dark .wind-doc blockquote{color:var(--color-stone-400, #a8a29e)}.dark .wind-doc a{color:var(--color-teal-300, #5eead4)}.dark .wind-doc hr{border-top-color:var(--color-stone-700, #44403c)}.dark .wind-doc pre,.dark .wind-doc code{background:color-mix(in oklab,white 8%,transparent)}\n"],
+			styles: ["wind-editor,.wind-editor{display:block;min-width:0;color:#1c1917;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.wind-frame{position:relative;min-width:0}.wind-doc{min-height:12rem;padding:1rem 1.15rem 1.5rem;outline:none;color:var(--color-stone-900, #1c1917);font-family:var(--font-serif, Georgia, \"Iowan Old Style\", \"Palatino Linotype\", serif);font-size:1.0625rem;line-height:1.65;caret-color:var(--color-teal-700, #0f766e);overflow-wrap:anywhere}.wind-doc>*+*{margin-top:.75rem}.wind-doc p,.wind-doc h1,.wind-doc h2,.wind-doc h3,.wind-doc blockquote,.wind-doc pre,.wind-doc li{margin:0}.wind-doc h1,.wind-doc h2,.wind-doc h3{font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);line-height:1.2;letter-spacing:-.03em;color:var(--color-stone-950, #0c0a09)}.wind-doc h1{font-size:1.875rem;font-weight:600}.wind-doc h2{font-size:1.5rem;font-weight:600}.wind-doc h3{font-size:1.25rem;font-weight:600}.wind-doc blockquote{border-left:2px solid var(--color-teal-700, #0f766e);padding-left:.9rem;color:var(--color-stone-600, #57534e)}.wind-doc ul,.wind-doc ol{margin:0;padding-left:1.25rem}.wind-doc li+li{margin-top:.25rem}.wind-doc pre{overflow-x:auto;border-radius:.6rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 6%,transparent);padding:.8rem .9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem;line-height:1.55;white-space:pre-wrap}.wind-doc pre code{font:inherit;background:none;padding:0}.wind-doc a{color:var(--color-teal-800, #115e59);text-decoration:underline;text-underline-offset:2px}.wind-doc code{border-radius:.3rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 8%,transparent);padding:.05em .3em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}.wind-doc img{display:block;max-width:100%;border-radius:.6rem}.wind-doc figure{margin:0}.wind-doc hr{border:0;border-top:1px solid var(--color-stone-300, #d6d3d1);margin:.25rem 0}.wind-doc [data-atomic].is-selected{outline:2px solid var(--color-teal-700, #0f766e);outline-offset:3px;border-radius:.4rem}.wind-doc[data-empty=true]>p[data-placeholder]:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--color-stone-400, #a8a29e)}.wind-carets{position:absolute;inset:0;pointer-events:none;overflow:hidden}.wind-caret,.wind-remote{position:absolute;pointer-events:none}.wind-caret{width:2px;background:var(--peer);border-radius:1px}.wind-caret i{position:absolute;top:-1.15rem;left:-1px;border-radius:.3rem;background:var(--peer);color:#fff;padding:.05rem .3rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);font-size:.65rem;font-style:normal;line-height:1.3;letter-spacing:.01em;white-space:nowrap}.wind-remote{background:color-mix(in oklab,var(--peer) 32%,transparent);border-radius:.1rem}.wind-frame.is-readonly .wind-doc{caret-color:transparent}.dark .wind-doc{color:var(--color-stone-100, #f5f5f4);caret-color:var(--color-teal-300, #5eead4)}.dark .wind-doc h1,.dark .wind-doc h2,.dark .wind-doc h3{color:var(--color-stone-50, #fafaf9)}.dark .wind-doc blockquote{color:var(--color-stone-400, #a8a29e)}.dark .wind-doc a{color:var(--color-teal-300, #5eead4)}.dark .wind-doc hr{border-top-color:var(--color-stone-700, #44403c)}.dark .wind-doc pre,.dark .wind-doc code{background:color-mix(in oklab,white 8%,transparent)}.wind-editor.is-disabled{opacity:.7}.wind-shell{border:1px solid #e7e5e4;border-radius:.75rem;background:#fff;color:#1c1917;box-shadow:0 1px 2px #1c19170f}.wind-editor.is-invalid .wind-shell{border-color:#b91c1c}.wind-toolbar,.wind-pop,.wind-meta,.wind-error,.wind-source{border-color:#e7e5e4}.wind-toolbar{display:flex;gap:.125rem;overflow-x:auto;border-bottom:1px solid #e7e5e4;padding:.375rem}.wind-tool,.wind-primary,.wind-quiet,.wind-field,.wind-source-input{font:inherit}.wind-tool{display:inline-flex;height:2.25rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.25rem;border:0;border-radius:.375rem;background:transparent;padding:0 .5rem;color:#57534e;font-size:.875rem;line-height:1;cursor:pointer}.wind-tool:hover{background:#f5f5f4}.wind-tool:disabled{opacity:.4;cursor:default}.wind-tool[aria-pressed=true]{background:#0f766e;color:#fff}.wind-tool-label{padding:0 .125rem;font-size:.75rem;font-weight:600;letter-spacing:.04em}.wind-pop,.wind-source{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;border-bottom:1px solid #e7e5e4;padding:.5rem .75rem}.wind-source{display:block;border-bottom:0;border-top:1px solid #e7e5e4}.wind-field,.wind-source-input{height:2.25rem;min-width:0;flex:1 1 12rem;border:1px solid #d6d3d1;border-radius:.375rem;background:#fff;padding:0 .5rem;color:inherit;font-size:.875rem;outline:none}.wind-field-short{flex:0 1 9rem;width:9rem}.wind-field:focus,.wind-source-input:focus{border-color:#0f766e}.wind-source-input{display:block;box-sizing:border-box;width:100%;height:10rem;resize:vertical;padding:.5rem;background:#fafaf9;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;line-height:1.5}.wind-primary,.wind-quiet{height:2.25rem;border:0;border-radius:.375rem;cursor:pointer;font-size:.875rem}.wind-primary{background:#0f766e;padding:0 .75rem;color:#fff;font-weight:500}.wind-quiet{background:transparent;padding:0 .5rem;color:#57534e}.wind-source .wind-primary{margin-top:.5rem;background:#1c1917}.wind-surface{position:relative;min-height:12rem}.wind-menu{position:fixed;z-index:30;max-height:16rem;width:14rem;overflow:auto;margin:0;border:1px solid #e7e5e4;border-radius:.5rem;background:#fff;padding:.25rem 0;list-style:none;box-shadow:0 10px 24px #1c19171f}.wind-option{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:.75rem;border:0;background:transparent;padding:.375rem .75rem;color:inherit;font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.wind-option:hover,.wind-option.is-active{background:#f5f5f4}.wind-option.is-active{background:#0f766e;color:#fff}.wind-option-hint{font-size:.75rem;opacity:.7}.wind-meta,.wind-error{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid #e7e5e4;padding:.375rem .75rem;color:#78716c;font-size:.75rem}.wind-meta-hint{color:#a8a29e}.wind-error{color:#b91c1c}.wind-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dark .wind-shell,.dark.wind-editor .wind-shell{border-color:#292524;background:#0c0a09;color:#f5f5f4}.dark .wind-editor.is-invalid .wind-shell,.dark.wind-editor.is-invalid .wind-shell{border-color:#f87171}.dark .wind-toolbar,.dark .wind-pop,.dark .wind-meta,.dark .wind-source,.dark.wind-editor .wind-toolbar,.dark.wind-editor .wind-pop,.dark.wind-editor .wind-meta,.dark.wind-editor .wind-source{border-color:#292524}.dark .wind-tool,.dark .wind-quiet,.dark.wind-editor .wind-tool,.dark.wind-editor .wind-quiet{color:#d6d3d1}.dark .wind-tool:hover,.dark.wind-editor .wind-tool:hover{background:#1c1917}.dark .wind-tool[aria-pressed=true],.dark.wind-editor .wind-tool[aria-pressed=true]{background:#0d9488;color:#fff}.dark .wind-field,.dark .wind-source-input,.dark.wind-editor .wind-field,.dark.wind-editor .wind-source-input{border-color:#44403c;background:#1c1917;color:#f5f5f4}.dark .wind-source .wind-primary,.dark.wind-editor .wind-source .wind-primary{background:#f5f5f4;color:#1c1917}.dark .wind-menu,.dark.wind-editor .wind-menu{border-color:#44403c;background:#1c1917}.dark .wind-option:hover,.dark.wind-editor .wind-option:hover{background:#292524}.dark .wind-option.is-active,.dark.wind-editor .wind-option.is-active{background:#0f766e;color:#fff}.dark .wind-meta,.dark.wind-editor .wind-meta{color:#a8a29e}.dark .wind-error,.dark.wind-editor .wind-error{border-color:#7f1d1d;color:#fca5a5}\n"],
 			dependencies: [{
 				kind: "component",
 				type: WindIcon,
@@ -2440,24 +2520,32 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			imports: [WindIcon],
-			host: { class: "wind-editor block min-w-0" },
+			host: {
+				class: "wind-editor",
+				"(focusout)": "onFocusOut($event)",
+				"[class.is-invalid]": "invalid()",
+				"[class.is-disabled]": "disabled()",
+				"[attr.aria-invalid]": "invalid() || null",
+				"[attr.aria-required]": "required() || null",
+				"[attr.aria-disabled]": "disabled() || null"
+			},
 			template: `
-    <div class="rounded-xl border border-stone-200 bg-white text-stone-900 shadow-sm dark:border-stone-800 dark:bg-stone-950 dark:text-stone-100">
+    <div class="wind-shell">
       @if (showToolbar() && tools().length > 0) {
-        <div class="flex gap-0.5 overflow-x-auto border-b border-stone-200 px-1.5 py-1.5 dark:border-stone-800" role="toolbar" aria-label="Formatting">
+        <div class="wind-toolbar" role="toolbar" aria-label="Formatting">
           @for (tool of tools(); track tool.id) {
             <button
               type="button"
-              class="inline-flex h-9 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-sm text-stone-600 hover:bg-stone-100 disabled:opacity-40 aria-pressed:bg-teal-700 aria-pressed:text-white dark:text-stone-300 dark:hover:bg-stone-900 dark:aria-pressed:bg-teal-600"
+              class="wind-tool"
               [attr.aria-label]="tool.label"
               [attr.title]="tool.label"
               [attr.aria-pressed]="pressed(tool.id)"
-              [disabled]="disabled(tool.id)"
+              [disabled]="toolDisabled(tool.id)"
               (mousedown)="$event.preventDefault()"
               (click)="run(tool.id)"
             >
               @if (tool.id === 'paragraph' || tool.id === 'h1' || tool.id === 'h2') {
-                <span class="px-0.5 text-xs font-semibold tracking-wide">{{ tool.id === 'paragraph' ? 'P' : tool.id.toUpperCase() }}</span>
+                <span class="wind-tool-label">{{ tool.id === 'paragraph' ? 'P' : tool.id.toUpperCase() }}</span>
               } @else {
                 <wind-icon [name]="tool.icon" />
               }
@@ -2467,33 +2555,33 @@ i0.ɵɵngDeclareClassMetadata({
       }
 
       @if (linkOpen()) {
-        <form class="flex flex-wrap items-center gap-2 border-b border-stone-200 px-3 py-2 dark:border-stone-800" (submit)="applyLink($event)">
-          <label class="sr-only" for="wind-link">Link URL</label>
+        <form class="wind-pop" (submit)="applyLink($event)">
+          <label class="wind-sr" for="wind-link">Link URL</label>
           <input
             id="wind-link"
-            class="h-9 min-w-0 flex-1 rounded-md border border-stone-300 bg-white px-2 text-sm outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900"
+            class="wind-field"
             [value]="linkDraft()"
             placeholder="https://"
             (input)="onDraft($event, 'link')"
           />
-          <button type="submit" class="h-9 rounded-md bg-teal-700 px-3 text-sm font-medium text-white">Apply</button>
-          <button type="button" class="h-9 rounded-md px-2 text-sm text-stone-600 dark:text-stone-300" (click)="clearLink()">Remove</button>
+          <button type="submit" class="wind-primary">Apply</button>
+          <button type="button" class="wind-quiet" (click)="clearLink()">Remove</button>
         </form>
       }
 
       @if (imageOpen()) {
-        <form class="flex flex-wrap items-center gap-2 border-b border-stone-200 px-3 py-2 dark:border-stone-800" (submit)="applyImage($event)">
-          <input class="h-9 min-w-0 flex-1 rounded-md border border-stone-300 bg-white px-2 text-sm outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900" [value]="imageSrc()" placeholder="Image URL" (input)="onDraft($event, 'src')" />
-          <input class="h-9 w-36 rounded-md border border-stone-300 bg-white px-2 text-sm outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900" [value]="imageAlt()" placeholder="Alt text" (input)="onDraft($event, 'alt')" />
-          <button type="submit" class="h-9 rounded-md bg-teal-700 px-3 text-sm font-medium text-white">Insert</button>
+        <form class="wind-pop" (submit)="applyImage($event)">
+          <input class="wind-field" [value]="imageSrc()" placeholder="Image URL" (input)="onDraft($event, 'src')" />
+          <input class="wind-field wind-field-short" [value]="imageAlt()" placeholder="Alt text" (input)="onDraft($event, 'alt')" />
+          <button type="submit" class="wind-primary">Insert</button>
         </form>
       }
 
-      <div class="relative min-h-48" #surface></div>
+      <div class="wind-surface" #surface></div>
 
       @if (slashItems().length > 0 && change()?.slashRect; as rect) {
         <ul
-          class="fixed z-30 max-h-64 w-56 overflow-auto rounded-lg border border-stone-200 bg-white py-1 shadow-lg dark:border-stone-700 dark:bg-stone-900"
+          class="wind-menu"
           role="listbox"
           [style.top.px]="rect.top"
           [style.left.px]="rect.left"
@@ -2502,46 +2590,60 @@ i0.ɵɵngDeclareClassMetadata({
             <li>
               <button
                 type="button"
-                class="flex w-full items-baseline justify-between gap-3 px-3 py-1.5 text-left text-sm hover:bg-stone-100 dark:hover:bg-stone-800"
-                [class.bg-teal-700]="index === slashIndex()"
-                [class.text-white]="index === slashIndex()"
+                class="wind-option"
+                [class.is-active]="index === slashIndex()"
                 role="option"
                 [attr.aria-selected]="index === slashIndex()"
                 (mousedown)="$event.preventDefault()"
                 (click)="pickSlash(item)"
               >
                 <span>{{ item.label }}</span>
-                <span class="text-xs opacity-70">{{ item.hint }}</span>
+                <span class="wind-option-hint">{{ item.hint }}</span>
               </button>
             </li>
           }
         </ul>
       }
 
-      <footer class="flex items-center justify-between gap-3 border-t border-stone-200 px-3 py-1.5 text-xs text-stone-500 dark:border-stone-800 dark:text-stone-400">
+      <footer class="wind-meta">
         <span>{{ change()?.words ?? 0 }} words</span>
-        <span class="text-stone-400">/ for blocks</span>
+        <span class="wind-meta-hint">/ for blocks</span>
       </footer>
 
+      @if (invalid() && errorText()) {
+        <p class="wind-error" role="alert">{{ errorText() }}</p>
+      }
+
       @if (sourceOpen()) {
-        <div class="border-t border-stone-200 p-3 dark:border-stone-800">
+        <div class="wind-source">
           <textarea
-            class="h-40 w-full resize-y rounded-md border border-stone-300 bg-stone-50 p-2 font-mono text-xs outline-none focus:border-teal-700 dark:border-stone-700 dark:bg-stone-900"
+            class="wind-source-input"
             [value]="sourceDraft()"
             spellcheck="false"
             aria-label="HTML source"
             (input)="onDraft($event, 'source')"
           ></textarea>
-          <button type="button" class="mt-2 h-9 rounded-md bg-stone-900 px-3 text-sm text-white dark:bg-stone-100 dark:text-stone-900" (click)="applySource()">Apply HTML</button>
+          <button type="button" class="wind-primary" (click)="applySource()">Apply HTML</button>
         </div>
       }
     </div>
   `,
-			styles: [":host{display:block;min-width:0}.wind-frame{position:relative;min-width:0}.wind-doc{min-height:12rem;padding:1rem 1.15rem 1.5rem;outline:none;color:var(--color-stone-900, #1c1917);font-family:var(--font-serif, Georgia, \"Iowan Old Style\", \"Palatino Linotype\", serif);font-size:1.0625rem;line-height:1.65;caret-color:var(--color-teal-700, #0f766e);overflow-wrap:anywhere}.wind-doc>*+*{margin-top:.75rem}.wind-doc p,.wind-doc h1,.wind-doc h2,.wind-doc h3,.wind-doc blockquote,.wind-doc pre,.wind-doc li{margin:0}.wind-doc h1,.wind-doc h2,.wind-doc h3{font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);line-height:1.2;letter-spacing:-.03em;color:var(--color-stone-950, #0c0a09)}.wind-doc h1{font-size:1.875rem;font-weight:600}.wind-doc h2{font-size:1.5rem;font-weight:600}.wind-doc h3{font-size:1.25rem;font-weight:600}.wind-doc blockquote{border-left:2px solid var(--color-teal-700, #0f766e);padding-left:.9rem;color:var(--color-stone-600, #57534e)}.wind-doc ul,.wind-doc ol{margin:0;padding-left:1.25rem}.wind-doc li+li{margin-top:.25rem}.wind-doc pre{overflow-x:auto;border-radius:.6rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 6%,transparent);padding:.8rem .9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem;line-height:1.55;white-space:pre-wrap}.wind-doc pre code{font:inherit;background:none;padding:0}.wind-doc a{color:var(--color-teal-800, #115e59);text-decoration:underline;text-underline-offset:2px}.wind-doc code{border-radius:.3rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 8%,transparent);padding:.05em .3em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}.wind-doc img{display:block;max-width:100%;border-radius:.6rem}.wind-doc figure{margin:0}.wind-doc hr{border:0;border-top:1px solid var(--color-stone-300, #d6d3d1);margin:.25rem 0}.wind-doc [data-atomic].is-selected{outline:2px solid var(--color-teal-700, #0f766e);outline-offset:3px;border-radius:.4rem}.wind-doc[data-empty=true]>p[data-placeholder]:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--color-stone-400, #a8a29e)}.wind-carets{position:absolute;inset:0;pointer-events:none;overflow:hidden}.wind-caret,.wind-remote{position:absolute;pointer-events:none}.wind-caret{width:2px;background:var(--peer);border-radius:1px}.wind-caret i{position:absolute;top:-1.15rem;left:-1px;border-radius:.3rem;background:var(--peer);color:#fff;padding:.05rem .3rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);font-size:.65rem;font-style:normal;line-height:1.3;letter-spacing:.01em;white-space:nowrap}.wind-remote{background:color-mix(in oklab,var(--peer) 32%,transparent);border-radius:.1rem}.wind-frame.is-readonly .wind-doc{caret-color:transparent}.dark .wind-doc{color:var(--color-stone-100, #f5f5f4);caret-color:var(--color-teal-300, #5eead4)}.dark .wind-doc h1,.dark .wind-doc h2,.dark .wind-doc h3{color:var(--color-stone-50, #fafaf9)}.dark .wind-doc blockquote{color:var(--color-stone-400, #a8a29e)}.dark .wind-doc a{color:var(--color-teal-300, #5eead4)}.dark .wind-doc hr{border-top-color:var(--color-stone-700, #44403c)}.dark .wind-doc pre,.dark .wind-doc code{background:color-mix(in oklab,white 8%,transparent)}\n"]
+			styles: ["wind-editor,.wind-editor{display:block;min-width:0;color:#1c1917;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.wind-frame{position:relative;min-width:0}.wind-doc{min-height:12rem;padding:1rem 1.15rem 1.5rem;outline:none;color:var(--color-stone-900, #1c1917);font-family:var(--font-serif, Georgia, \"Iowan Old Style\", \"Palatino Linotype\", serif);font-size:1.0625rem;line-height:1.65;caret-color:var(--color-teal-700, #0f766e);overflow-wrap:anywhere}.wind-doc>*+*{margin-top:.75rem}.wind-doc p,.wind-doc h1,.wind-doc h2,.wind-doc h3,.wind-doc blockquote,.wind-doc pre,.wind-doc li{margin:0}.wind-doc h1,.wind-doc h2,.wind-doc h3{font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);line-height:1.2;letter-spacing:-.03em;color:var(--color-stone-950, #0c0a09)}.wind-doc h1{font-size:1.875rem;font-weight:600}.wind-doc h2{font-size:1.5rem;font-weight:600}.wind-doc h3{font-size:1.25rem;font-weight:600}.wind-doc blockquote{border-left:2px solid var(--color-teal-700, #0f766e);padding-left:.9rem;color:var(--color-stone-600, #57534e)}.wind-doc ul,.wind-doc ol{margin:0;padding-left:1.25rem}.wind-doc li+li{margin-top:.25rem}.wind-doc pre{overflow-x:auto;border-radius:.6rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 6%,transparent);padding:.8rem .9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem;line-height:1.55;white-space:pre-wrap}.wind-doc pre code{font:inherit;background:none;padding:0}.wind-doc a{color:var(--color-teal-800, #115e59);text-decoration:underline;text-underline-offset:2px}.wind-doc code{border-radius:.3rem;background:color-mix(in oklab,var(--color-stone-900, #1c1917) 8%,transparent);padding:.05em .3em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}.wind-doc img{display:block;max-width:100%;border-radius:.6rem}.wind-doc figure{margin:0}.wind-doc hr{border:0;border-top:1px solid var(--color-stone-300, #d6d3d1);margin:.25rem 0}.wind-doc [data-atomic].is-selected{outline:2px solid var(--color-teal-700, #0f766e);outline-offset:3px;border-radius:.4rem}.wind-doc[data-empty=true]>p[data-placeholder]:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--color-stone-400, #a8a29e)}.wind-carets{position:absolute;inset:0;pointer-events:none;overflow:hidden}.wind-caret,.wind-remote{position:absolute;pointer-events:none}.wind-caret{width:2px;background:var(--peer);border-radius:1px}.wind-caret i{position:absolute;top:-1.15rem;left:-1px;border-radius:.3rem;background:var(--peer);color:#fff;padding:.05rem .3rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);font-size:.65rem;font-style:normal;line-height:1.3;letter-spacing:.01em;white-space:nowrap}.wind-remote{background:color-mix(in oklab,var(--peer) 32%,transparent);border-radius:.1rem}.wind-frame.is-readonly .wind-doc{caret-color:transparent}.dark .wind-doc{color:var(--color-stone-100, #f5f5f4);caret-color:var(--color-teal-300, #5eead4)}.dark .wind-doc h1,.dark .wind-doc h2,.dark .wind-doc h3{color:var(--color-stone-50, #fafaf9)}.dark .wind-doc blockquote{color:var(--color-stone-400, #a8a29e)}.dark .wind-doc a{color:var(--color-teal-300, #5eead4)}.dark .wind-doc hr{border-top-color:var(--color-stone-700, #44403c)}.dark .wind-doc pre,.dark .wind-doc code{background:color-mix(in oklab,white 8%,transparent)}.wind-editor.is-disabled{opacity:.7}.wind-shell{border:1px solid #e7e5e4;border-radius:.75rem;background:#fff;color:#1c1917;box-shadow:0 1px 2px #1c19170f}.wind-editor.is-invalid .wind-shell{border-color:#b91c1c}.wind-toolbar,.wind-pop,.wind-meta,.wind-error,.wind-source{border-color:#e7e5e4}.wind-toolbar{display:flex;gap:.125rem;overflow-x:auto;border-bottom:1px solid #e7e5e4;padding:.375rem}.wind-tool,.wind-primary,.wind-quiet,.wind-field,.wind-source-input{font:inherit}.wind-tool{display:inline-flex;height:2.25rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.25rem;border:0;border-radius:.375rem;background:transparent;padding:0 .5rem;color:#57534e;font-size:.875rem;line-height:1;cursor:pointer}.wind-tool:hover{background:#f5f5f4}.wind-tool:disabled{opacity:.4;cursor:default}.wind-tool[aria-pressed=true]{background:#0f766e;color:#fff}.wind-tool-label{padding:0 .125rem;font-size:.75rem;font-weight:600;letter-spacing:.04em}.wind-pop,.wind-source{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;border-bottom:1px solid #e7e5e4;padding:.5rem .75rem}.wind-source{display:block;border-bottom:0;border-top:1px solid #e7e5e4}.wind-field,.wind-source-input{height:2.25rem;min-width:0;flex:1 1 12rem;border:1px solid #d6d3d1;border-radius:.375rem;background:#fff;padding:0 .5rem;color:inherit;font-size:.875rem;outline:none}.wind-field-short{flex:0 1 9rem;width:9rem}.wind-field:focus,.wind-source-input:focus{border-color:#0f766e}.wind-source-input{display:block;box-sizing:border-box;width:100%;height:10rem;resize:vertical;padding:.5rem;background:#fafaf9;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;line-height:1.5}.wind-primary,.wind-quiet{height:2.25rem;border:0;border-radius:.375rem;cursor:pointer;font-size:.875rem}.wind-primary{background:#0f766e;padding:0 .75rem;color:#fff;font-weight:500}.wind-quiet{background:transparent;padding:0 .5rem;color:#57534e}.wind-source .wind-primary{margin-top:.5rem;background:#1c1917}.wind-surface{position:relative;min-height:12rem}.wind-menu{position:fixed;z-index:30;max-height:16rem;width:14rem;overflow:auto;margin:0;border:1px solid #e7e5e4;border-radius:.5rem;background:#fff;padding:.25rem 0;list-style:none;box-shadow:0 10px 24px #1c19171f}.wind-option{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:.75rem;border:0;background:transparent;padding:.375rem .75rem;color:inherit;font:inherit;font-size:.875rem;text-align:left;cursor:pointer}.wind-option:hover,.wind-option.is-active{background:#f5f5f4}.wind-option.is-active{background:#0f766e;color:#fff}.wind-option-hint{font-size:.75rem;opacity:.7}.wind-meta,.wind-error{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid #e7e5e4;padding:.375rem .75rem;color:#78716c;font-size:.75rem}.wind-meta-hint{color:#a8a29e}.wind-error{color:#b91c1c}.wind-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dark .wind-shell,.dark.wind-editor .wind-shell{border-color:#292524;background:#0c0a09;color:#f5f5f4}.dark .wind-editor.is-invalid .wind-shell,.dark.wind-editor.is-invalid .wind-shell{border-color:#f87171}.dark .wind-toolbar,.dark .wind-pop,.dark .wind-meta,.dark .wind-source,.dark.wind-editor .wind-toolbar,.dark.wind-editor .wind-pop,.dark.wind-editor .wind-meta,.dark.wind-editor .wind-source{border-color:#292524}.dark .wind-tool,.dark .wind-quiet,.dark.wind-editor .wind-tool,.dark.wind-editor .wind-quiet{color:#d6d3d1}.dark .wind-tool:hover,.dark.wind-editor .wind-tool:hover{background:#1c1917}.dark .wind-tool[aria-pressed=true],.dark.wind-editor .wind-tool[aria-pressed=true]{background:#0d9488;color:#fff}.dark .wind-field,.dark .wind-source-input,.dark.wind-editor .wind-field,.dark.wind-editor .wind-source-input{border-color:#44403c;background:#1c1917;color:#f5f5f4}.dark .wind-source .wind-primary,.dark.wind-editor .wind-source .wind-primary{background:#f5f5f4;color:#1c1917}.dark .wind-menu,.dark.wind-editor .wind-menu{border-color:#44403c;background:#1c1917}.dark .wind-option:hover,.dark.wind-editor .wind-option:hover{background:#292524}.dark .wind-option.is-active,.dark.wind-editor .wind-option.is-active{background:#0f766e;color:#fff}.dark .wind-meta,.dark.wind-editor .wind-meta{color:#a8a29e}.dark .wind-error,.dark.wind-editor .wind-error{border-color:#7f1d1d;color:#fca5a5}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
 		html: [{
 			type: i0.Input,
 			args: [{
@@ -2561,7 +2663,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		readOnly: [{
+		readonly: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -2569,6 +2671,50 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
 		showToolbar: [{
 			type: i0.Input,
 			args: [{