fix(select) + feat(field): match-anchor width, label persistence, OptionalIndicator, auto-label

select bugs
- The popover content didn't match the trigger width even though
  matchAnchorWidth was already implemented in the eidos layer. Root
  cause was in soma/layers/floating/floating.svelte.ts: `transformedStyle`
  read `this.opts.style` directly without `.current`, so consumer styles
  never merged into the floating wrapper. Fixed by reading
  `this.opts.style.current` and also returning the value when it's an
  object (previously fell through to undefined). All popover-based
  components (select, combobox, date/time pickers, color picker) now get
  their `style` prop applied.
- The trigger value text reverted from the rendered label (e.g. "Apple")
  to the raw value string ("apple") whenever the popover closed. Items
  unmount when Content's Presence collapses, and they were unregistering
  their label on cleanup — leaving the label registry empty between
  opens. Drop the unregister on cleanup; keep registrations alive across
  popover open/close cycles. Re-mounts overwrite the entry.

field improvements (F1 + F2 + F3)
- F1: add an explicit `[data-field][data-variant='surface']` CSS block
  so the surface variant (declared in the type union) has its own rule
  instead of silently falling back to the default style.
- F2: new `OptionalIndicator` part (morfo + soma wrapper + eidos
  wrapper). Renders only when `required === false`. Default text comes
  from `texts['optional-indicator']` ("(optional)"). Styled muted + 0.85em.
- F3: `<Field.Label />` without children now auto-renders the
  localised label from `texts.label`. Reduces boilerplate when consumers
  rely on the field name for its label.
- Demo at /uix/components/field gained composition examples for the new
  parts.

Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4576
files. In-browser: select trigger and popover widths both 336 px;
closed and open values both show labels (e.g. "Apple, Pear, Orange").
Field demo shows 2 required `*`, 1 `(optional)`, and an empty
`<Field.Label />` falling back to the literal "Field".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/field/field-optional-indicator.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as Field from '$soma/components/field';
+	import type { FieldOptionalIndicatorProps } from './types';
+
+	let { children, ...rest }: FieldOptionalIndicatorProps = $props();
+</script>
+
+<Field.OptionalIndicator {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</Field.OptionalIndicator>

src/uix/eidos/components/field/field.css

@@ -90,6 +90,11 @@
 	--_field-control-font-size: var(--field-control-font-size-xl);
 }
 
+/* surface: filled, default treatment. */
+[data-field][data-variant='surface'] {
+	--_field-control-bg: var(--field-control-bg);
+}
+
 /* outline: transparent fill, border stays visible. */
 [data-field][data-variant='outline'] {
 	--_field-control-bg: var(--field-control-ghost-bg);
@@ -168,6 +173,14 @@
 	line-height: 1;
 }
 
+[data-field-optional-indicator] {
+	color: var(--color-content-muted);
+	font-size: 0.85em;
+	font-weight: var(--font-weight-normal, 400);
+	line-height: 1;
+	margin-inline-start: var(--space-1);
+}
+
 [data-field-control] {
 	display: inline-flex;
 	align-items: center;

src/uix/eidos/components/field/index.ts

@@ -13,6 +13,7 @@
 import FieldComponent from './field.svelte';
 import Label from './field-label.svelte';
 import RequiredIndicator from './field-required-indicator.svelte';
+import OptionalIndicator from './field-optional-indicator.svelte';
 import Control from './field-control.svelte';
 import Input from './field-input.svelte';
 import HelperText from './field-helper-text.svelte';
@@ -23,6 +24,7 @@ import Suffix from './field-suffix.svelte';
 type FieldNamespace = typeof FieldComponent & {
 	Label: typeof Label;
 	RequiredIndicator: typeof RequiredIndicator;
+	OptionalIndicator: typeof OptionalIndicator;
 	Control: typeof Control;
 	Input: typeof Input;
 	HelperText: typeof HelperText;
@@ -34,6 +36,7 @@ type FieldNamespace = typeof FieldComponent & {
 const Field = FieldComponent as FieldNamespace;
 Field.Label = Label;
 Field.RequiredIndicator = RequiredIndicator;
+Field.OptionalIndicator = OptionalIndicator;
 Field.Control = Control;
 Field.Input = Input;
 Field.HelperText = HelperText;
@@ -49,6 +52,7 @@ export type {
 	FieldProps,
 	FieldLabelProps as LabelProps,
 	FieldRequiredIndicatorProps as RequiredIndicatorProps,
+	FieldOptionalIndicatorProps as OptionalIndicatorProps,
 	FieldControlProps as ControlProps,
 	FieldInputProps as InputProps,
 	FieldHelperTextProps as HelperTextProps,

src/uix/eidos/components/field/types.ts

@@ -8,6 +8,7 @@ import type {
 	ProviderProps,
 	FieldSnippetProps as FieldProviderSnippetProps,
 	RequiredIndicatorProps,
+	OptionalIndicatorProps,
 	SuffixProps
 } from '$soma/components/field';
 import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types';
@@ -36,6 +37,7 @@ export type FieldProps = ProviderProps & {
 
 export type FieldLabelProps = LabelProps;
 export type FieldRequiredIndicatorProps = RequiredIndicatorProps;
+export type FieldOptionalIndicatorProps = OptionalIndicatorProps;
 export type FieldControlProps = ControlProps;
 export type FieldInputProps = InputProps;
 export type FieldHelperTextProps = HelperTextProps;

src/uix/morfo/components/field.ts

@@ -6,7 +6,9 @@ export const fieldMorfo = {
 	kebab: 'field',
 	scope: ['soma'],
 	texts: {
-		label: '#?components.field.label|Field'
+		label: '#?components.field.label|Field',
+		'required-indicator': '#?components.field.required-indicator|*',
+		'optional-indicator': '#?components.field.optional-indicator|(optional)'
 	},
 	parts: [
 		{
@@ -64,6 +66,16 @@ export const fieldMorfo = {
 			data: [{ attr: 'data-required', value: v.propRef('required'), severity: 'optional' }],
 			aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
 		},
+		{
+			name: 'OptionalIndicator',
+			kebab: 'optional-indicator',
+			archetype: 'indicator',
+			kind: 'public',
+			defaultElement: 'span',
+			optional: true,
+			data: [{ attr: 'data-required', value: v.propRef('required'), severity: 'optional' }],
+			aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
+		},
 		{
 			name: 'Control',
 			kebab: 'control',

src/uix/soma/components/field/components/field-label.svelte

@@ -5,7 +5,8 @@
 } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '../../../id';
-	import { FieldLabelProvider } from '../field-provider.svelte';
+	import { FieldLabelProvider, FieldProvider } from '../field-provider.svelte';
+	import { FIELD_LANGS } from '../langs';
 	import type { FieldLabelProps } from '../types';
 
 	const uid = $props.id();
@@ -18,6 +19,8 @@
 		...restProps
 	}: FieldLabelProps = $props();
 
+	const provider = FieldProvider.require();
+
 	const state = FieldLabelProvider.create({
 		id: readableActive(() => id),
 		ref: writableActive(
@@ -27,12 +30,19 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
+
+	// Auto-render localized label text when no children/child are passed.
+	const defaultText = $derived(provider.soma.langs.ts(FIELD_LANGS.LABEL) ?? 'Field');
 </script>
 
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
 	<label {...mergedProps}>
-		{@render children?.()}
+		{#if children}
+			{@render children()}
+		{:else}
+			{defaultText}
+		{/if}
 	</label>
 {/if}

src/uix/soma/components/field/components/field-optional-indicator.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { mergeProps } from '../../../props';
+	import { createId } from '../../../id';
+	import { FieldProvider, FieldOptionalIndicatorProvider } from '../field-provider.svelte';
+	import { FIELD_LANGS } from '../langs';
+	import type { FieldOptionalIndicatorProps } from '../types';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid, 'field-optional-indicator'),
+		onlyWhenOptional = true,
+		children,
+		child,
+		...restProps
+	}: FieldOptionalIndicatorProps = $props();
+
+	const provider = FieldProvider.require();
+
+	// Render only when the field is NOT required (i.e. optional).
+	const shouldRender = $derived(!onlyWhenOptional || !provider.isRequired);
+
+	const state = FieldOptionalIndicatorProvider.create({
+		id: readableActive(() => id),
+		ref: writableActive(
+			() => ref,
+			(v) => (ref = v)
+		)
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, state.props));
+
+	const defaultText = $derived(
+		provider.soma.langs.ts(FIELD_LANGS.OPTIONAL_INDICATOR) ?? '(optional)'
+	);
+</script>
+
+{#if shouldRender}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<span {...mergedProps}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{defaultText}
+			{/if}
+		</span>
+	{/if}
+{/if}

src/uix/soma/components/field/exports.ts

@@ -1,6 +1,7 @@
 export { default as Provider } from './components/field.svelte';
 export { default as Label } from './components/field-label.svelte';
 export { default as RequiredIndicator } from './components/field-required-indicator.svelte';
+export { default as OptionalIndicator } from './components/field-optional-indicator.svelte';
 export { default as Control } from './components/field-control.svelte';
 export { default as Input } from './components/field-input.svelte';
 export { default as HelperText } from './components/field-helper-text.svelte';
@@ -12,6 +13,7 @@ export type {
 	FieldProps as ProviderProps,
 	FieldLabelProps as LabelProps,
 	FieldRequiredIndicatorProps as RequiredIndicatorProps,
+	FieldOptionalIndicatorProps as OptionalIndicatorProps,
 	FieldControlProps as ControlProps,
 	FieldInputProps as InputProps,
 	FieldHelperTextProps as HelperTextProps,

src/uix/soma/components/field/field-provider.svelte.ts

@@ -241,6 +241,38 @@ export class FieldRequiredIndicatorProvider {
 	);
 }
 
+// ── OptionalIndicator ────────────────────────────────────────────────────────
+
+interface FieldOptionalIndicatorOpts extends WithRefOpts {}
+
+export class FieldOptionalIndicatorProvider {
+	readonly opts: FieldOptionalIndicatorOpts;
+	readonly runtimePart: SomaRuntimePart;
+	static create(opts: FieldOptionalIndicatorOpts) {
+		return new FieldOptionalIndicatorProvider(opts);
+	}
+
+	readonly provider: FieldProvider;
+
+	private constructor(opts: FieldOptionalIndicatorOpts) {
+		this.opts = opts;
+		this.provider = FieldProvider.require();
+		this.runtimePart = this.provider.runtime.part('optional-indicator', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			syncAttrs: true
+		});
+	}
+
+	readonly props = $derived.by(() =>
+		this.runtimePart.assert({
+			...this.runtimePart.props,
+			'aria-hidden': 'true' as const
+		} as const)
+	);
+}
+
 // ── Control ──────────────────────────────────────────────────────────────────
 
 interface FieldControlOpts extends WithRefOpts {}

src/uix/soma/components/field/langs.ts

@@ -1,3 +1,6 @@
-// Field has no built-in translatable strings. Labels, helper and error text
+/** Idlangref constants for the Field component. */
-// are provided by the consumer.
+export const FIELD_LANGS = {
-export const FIELD_LANGS = {} as const;
+	LABEL: '#?components.field.label|Field',
+	REQUIRED_INDICATOR: '#?components.field.required-indicator|*',
+	OPTIONAL_INDICATOR: '#?components.field.optional-indicator|(optional)'
+} as const;

src/uix/soma/components/field/types.ts

@@ -90,6 +90,13 @@ export type FieldRequiredIndicatorProps = WithChild<{
 }> &
 	Without<PrimitiveSpanAttributes, {}>;
 
+export type FieldOptionalIndicatorProps = WithChild<{
+	id?: string;
+	/** Only render while the field is NOT required. @default true */
+	onlyWhenOptional?: boolean;
+}> &
+	Without<PrimitiveSpanAttributes, {}>;
+
 export type FieldControlProps = WithChild<{ id?: string }> & Without<PrimitiveDivAttributes, {}>;
 
 export type FieldInputProps = WithChild<{

src/uix/soma/components/select/select-provider.svelte.ts

@@ -683,10 +683,16 @@ export class SelectItemProvider {
 			owner: this
 		});
 
-		// Register label for display text (avoids DOM queries)
+		// Register label for display text (avoids DOM queries).
+		// Note: items unmount whenever the popover closes (Content uses Presence
+		// so its DOM subtree disappears). Unregistering on cleanup would empty
+		// the registry between opens — which leaves `getDisplayText()` falling
+		// back to the raw value string for the closed-trigger display. Keep
+		// the entry alive; re-mounts simply overwrite it (idempotent).
 		this.provider.registerLabel(opts.value.current, opts.label.current || opts.value.current);
 		$effect(() => {
-			return () => this.provider.unregisterLabel(opts.value.current);
+			// Keep label registration in sync with reactive prop changes.
+			this.provider.registerLabel(opts.value.current, opts.label.current || opts.value.current);
 		});
 	}
 

src/uix/soma/layers/floating/floating.svelte.ts

@@ -106,8 +106,14 @@ export class FloatingContent {
 	arrowId = state(useId());
 
 	transformedStyle = $derived.by(() => {
-		if (typeof this.opts.style === 'string') return cssToStyleObj(this.opts.style);
+		// opts.style is a readable signal — must read `.current` to access the
-		if (!this.opts.style) return {};
+		// consumer value. Previously this checked `typeof this.opts.style`
+		// directly, which always read the signal object itself, so consumer
+		// styles never merged into the floating wrapper.
+		const style = this.opts.style.current;
+		if (typeof style === 'string') return cssToStyleObj(style);
+		if (!style) return {};
+		return style;
 	});
 
 	updatePositionStrategy = undefined as unknown as FloatingContentOpts['updatePositionStrategy'];

web/routes/uix/components/field/+page.svelte

@@ -212,6 +212,36 @@
 
 	{#if tab === 'live'}
 		<section data-uix-section>
+			<h2 data-uix-section-title>Composition examples</h2>
+			<p data-uix-section-desc>
+				Auto-rendered label text, optional indicator and required indicator side by side.
+			</p>
+			<div data-uix-example-grid style="display: grid; gap: var(--uix-space-4); margin-block: var(--uix-space-3);">
+				<Field name="given-name" required>
+					<Field.Label>First name <Field.RequiredIndicator /></Field.Label>
+					<Field.Control>
+						<Field.Input type="text" />
+					</Field.Control>
+					<Field.HelperText>Required — required indicator shows.</Field.HelperText>
+				</Field>
+
+				<Field name="middle-name">
+					<Field.Label>Middle name <Field.OptionalIndicator /></Field.Label>
+					<Field.Control>
+						<Field.Input type="text" />
+					</Field.Control>
+					<Field.HelperText>Optional — optional indicator shows its default text.</Field.HelperText>
+				</Field>
+
+				<Field name="nickname">
+					<Field.Label />
+					<Field.Control>
+						<Field.Input type="text" />
+					</Field.Control>
+					<Field.HelperText>Empty &lt;Field.Label /&gt; falls back to localized texts.label.</Field.HelperText>
+				</Field>
+			</div>
+
 			<h2 data-uix-section-title>Controls</h2>
 			<p data-uix-section-desc>
 				<span data-uix-layer-badge="soma">soma</span> owns state and ARIA wiring.