josh
8ac420fe61
Implement the approved UX review across Fleet, Betas, Library, deployments, and Settings. Add reviewed promotion and reconciliation plans, atomic queued-removal cancellation, recoverable beta drafts and launch inputs, accessible controls, and mobile improvements. Validated with 473 tests, a clean typecheck, production build, and isolated desktop/mobile browser walkthroughs. Include the review and implementation coverage notes.
74 lines
2.4 KiB
Svelte
74 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { setContext, type Snippet } from 'svelte';
|
|
import { fieldContext, type FieldContext } from '../../field-context.js';
|
|
|
|
interface Props {
|
|
label?: string;
|
|
hint?: string | null;
|
|
error?: string | null;
|
|
required?: boolean;
|
|
forId?: string;
|
|
children?: Snippet;
|
|
}
|
|
|
|
let { label, hint = null, error = null, required = false, forId, children }: Props = $props();
|
|
const id = $props.id();
|
|
setContext<FieldContext>(fieldContext, {
|
|
get labelId() { return `${id}-label`; },
|
|
get messageId() { return error || hint ? `${id}-message` : undefined; },
|
|
get invalid() { return !!error; }
|
|
});
|
|
|
|
function connectLabel(node: HTMLDivElement) {
|
|
const connect = () => {
|
|
const label = node.querySelector<HTMLLabelElement>('label.label');
|
|
const control = node.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>('input:not([type="hidden"]), select, textarea');
|
|
if (!label || !control || forId) return;
|
|
if (!control.id) control.id = `${id}-control`;
|
|
label.htmlFor = control.id;
|
|
};
|
|
connect();
|
|
const observer = new MutationObserver(connect);
|
|
observer.observe(node, { childList: true, subtree: true });
|
|
return { destroy: () => observer.disconnect() };
|
|
}
|
|
</script>
|
|
|
|
<div class="field" use:connectLabel>
|
|
{#if label}
|
|
<label class="label" id={`${id}-label`} for={forId ?? `${id}-control`}>
|
|
{label}
|
|
{#if required}<span class="req" aria-hidden="true">*</span>{/if}
|
|
</label>
|
|
{/if}
|
|
<div class="control" class:has-error={!!error}>
|
|
{@render children?.()}
|
|
</div>
|
|
{#if error}
|
|
<div id={`${id}-message`} class="msg msg-error" role="alert">{error}</div>
|
|
{:else if hint}
|
|
<div id={`${id}-message`} class="msg msg-hint">{hint}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
.label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-secondary);
|
|
}
|
|
.req { color: var(--state-danger); margin-left: 3px; }
|
|
.control { display: flex; flex-direction: column; }
|
|
.msg {
|
|
font-size: var(--text-xs);
|
|
}
|
|
.msg-hint { color: var(--text-tertiary); }
|
|
.msg-error { color: var(--state-danger); }
|
|
</style>
|