Native <label> accessible primitive with `for` association — the gap the Field family left open (Field.Label is context-bound; nothing labelled a control outside a Field). Ported from morfo-runtime:terra/label into the current eidos-native leaf shape. - Eidos-native leaf (scope: ['eidos'], no soma/sema): morfo is the contract (one Provider part -> data-label); the wrapper renders <label> directly. - Visual axes size/weight/color follow the Text typography mechanism (--style-label-* base + inline --_label-* overrides via ActiveEidos.resolve), not a prop-less shell — real selectable axes in the demo. - Multi-click mousedown guard (Radix convention) inline in the wrapper; composes the consumer's onmousedown. - Complements Field.Label (auto-wired inside a Field); floating label is a deferred Field concern, not a prop here. Passes component:audit label (0 err / 0 warn), check (0 label errors), eidos-lint (0 invalid), recipe-css-contract, smoke. Browser-verified: size/ weight/color change the label live; for-association focuses the control. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>menubar-v4-safe
parent
4c5fcbbb79
commit
71f6b9a5d7
@ -0,0 +1,13 @@
|
||||
// Label — standalone accessible label primitive (native <label>).
|
||||
//
|
||||
// import { Label } from '$uix/eidos/components/label';
|
||||
//
|
||||
// <Label for="email">Email</Label>
|
||||
// <input id="email" type="email" />
|
||||
//
|
||||
// Inside a Field, prefer <Field.Label> (auto-wires `for` via context).
|
||||
import Label from './label.svelte';
|
||||
|
||||
export { Label };
|
||||
export default Label;
|
||||
export type { LabelProps, LabelSize, LabelWeight, LabelColor } from './types';
|
||||
@ -0,0 +1,27 @@
|
||||
/*
|
||||
* Label recipe — a native <label> carrying the foundation `label` typography
|
||||
* style (`--style-label-*`: UI family, `sm` size, `medium` weight,
|
||||
* content-primary). Per-axis overrides arrive as inline `--_label-*` variables
|
||||
* set by the wrapper when the consumer passes `size` / `weight` / `color` — the
|
||||
* same mechanism `<Text>` uses, so a bare `<Label>` and `<Text style="label">`
|
||||
* read identically. inline-flex + gap lets a leading icon / indicator sit next
|
||||
* to the text (matching Field.Label).
|
||||
*/
|
||||
|
||||
[data-label] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
font-family: var(--_label-font-family, var(--style-label-font-family));
|
||||
font-size: var(--_label-font-size, var(--style-label-font-size));
|
||||
font-weight: var(--_label-font-weight, var(--style-label-font-weight));
|
||||
line-height: var(--_label-line-height, var(--style-label-line-height));
|
||||
letter-spacing: var(--_label-letter-spacing, var(--style-label-letter-spacing));
|
||||
color: var(--_label-color, var(--style-label-color));
|
||||
}
|
||||
|
||||
/* Consumer marks the label disabled (data-disabled) when its control is. */
|
||||
[data-label][data-disabled] {
|
||||
color: var(--color-content-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import './label.css';
|
||||
/**
|
||||
* Eidos `<Label>` — standalone accessible label. Applies the foundation
|
||||
* `label` typography style (`--style-label-*`) on a native `<label>`, with
|
||||
* per-axis overrides for `size` / `weight` / `color` (the same inline
|
||||
* `--_label-*` variable mechanism `<Text>` uses). Pass `for` to associate it
|
||||
* with any control by id.
|
||||
*
|
||||
* <Label for="email">Email</Label>
|
||||
* <Label size="lg" weight="semibold" for="title">Title</Label>
|
||||
* <input id="email" type="email" />
|
||||
*
|
||||
* A mousedown guard stops a double / triple click from selecting the label
|
||||
* text (Radix convention); a single click still labels + focuses the control.
|
||||
* Eidos-native leaf (no soma / sema). Inside a Field, prefer `<Field.Label>`.
|
||||
*/
|
||||
import { ActiveEidos } from '$uix/eidos';
|
||||
import type { LabelProps } from './types';
|
||||
|
||||
let {
|
||||
size,
|
||||
weight,
|
||||
color,
|
||||
onmousedown: consumerMouseDown,
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: LabelProps = $props();
|
||||
|
||||
const eidos = ActiveEidos.require();
|
||||
|
||||
const resolvedStyle = $derived.by(() => {
|
||||
const decls: string[] = [];
|
||||
const sizeKey = eidos.resolve(size);
|
||||
const weightKey = eidos.resolve(weight);
|
||||
const colorKey = eidos.resolve(color);
|
||||
if (sizeKey) decls.push(`--_label-font-size: var(--font-size-${sizeKey});`);
|
||||
if (weightKey) decls.push(`--_label-font-weight: var(--font-weight-${weightKey});`);
|
||||
if (colorKey) decls.push(`--_label-color: var(--color-content-${colorKey});`);
|
||||
return decls.join(' ');
|
||||
});
|
||||
|
||||
function onmousedown(e: MouseEvent & { currentTarget: EventTarget & HTMLLabelElement }) {
|
||||
if (e.detail > 1) e.preventDefault();
|
||||
consumerMouseDown?.(e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<label {...restProps} class={className} data-label="" style={resolvedStyle} {onmousedown}>
|
||||
{@render children?.()}
|
||||
</label>
|
||||
@ -0,0 +1,28 @@
|
||||
import type { HTMLLabelAttributes } from 'svelte/elements';
|
||||
import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
|
||||
|
||||
/** Font-size scale for a label — the form-control aligned subset. */
|
||||
export type LabelSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
|
||||
/** Font-weight slot. Maps to `--font-weight-{key}`. */
|
||||
export type LabelWeight = 'regular' | 'medium' | 'semibold';
|
||||
/** Content-role color slot. Maps to `--color-content-{key}`. */
|
||||
export type LabelColor = 'primary' | 'secondary' | 'muted' | 'disabled';
|
||||
|
||||
/**
|
||||
* Props for the standalone `<Label>` primitive — a native `<label>` that
|
||||
* applies the foundation `label` typography style (`--style-label-*`), with
|
||||
* per-axis overrides for `size` / `weight` / `color`. Pass `for` to associate
|
||||
* it with a control by id; a multi-click mousedown guard keeps the label text
|
||||
* from being selected on double click.
|
||||
*
|
||||
* Inside a `Field`, prefer `<Field.Label>` — it auto-wires `for` through the
|
||||
* field context.
|
||||
*/
|
||||
export type LabelProps = HTMLLabelAttributes & {
|
||||
/** Font size. Overrides the label style's default (`sm`). Responsive. */
|
||||
size?: ResponsiveProp<LabelSize>;
|
||||
/** Font weight. Overrides the label style's default (`medium`). Responsive. */
|
||||
weight?: ResponsiveProp<LabelWeight>;
|
||||
/** Content-role color. Overrides the label style's default (`primary`). Responsive. */
|
||||
color?: ResponsiveProp<LabelColor>;
|
||||
};
|
||||
@ -0,0 +1,37 @@
|
||||
import type { Morfo } from '../types';
|
||||
|
||||
/**
|
||||
* Label — standalone accessible label primitive (native `<label>`).
|
||||
*
|
||||
* Eidos-native: renders a semantic `<label>`, passes `for` through to
|
||||
* associate with any control, and stamps `data-label` for styling. There is
|
||||
* no headless state to coordinate — the only behaviour is a mousedown guard
|
||||
* that stops a multi-click from selecting the label text (the Radix Label
|
||||
* convention). That guard is DOM hygiene, not semantic behaviour, so it lives
|
||||
* inline in the eidos wrapper rather than a soma provider.
|
||||
*
|
||||
* Standalone counterpart to `Field.Label`: use `<Label for="…">` to label a
|
||||
* control that isn't wrapped in a `Field`; inside a `Field`, prefer
|
||||
* `Field.Label` (it auto-wires `for=inputId` through the field context).
|
||||
*
|
||||
* Passive on the morfo surface: a label neither commits, emerges, nor
|
||||
* transitions, so it declares no semantic events — same justification as
|
||||
* `link.ts` / `separator.ts`.
|
||||
*/
|
||||
export const labelMorfo = {
|
||||
name: 'Label',
|
||||
kebab: 'label',
|
||||
scope: ['eidos'],
|
||||
parts: [
|
||||
{
|
||||
name: 'Provider',
|
||||
kebab: 'provider',
|
||||
archetype: 'label',
|
||||
kind: 'public',
|
||||
defaultElement: 'label',
|
||||
optional: false,
|
||||
data: [],
|
||||
aria: []
|
||||
}
|
||||
]
|
||||
} as const satisfies Morfo;
|
||||
@ -0,0 +1,326 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Label,
|
||||
type LabelSize,
|
||||
type LabelWeight,
|
||||
type LabelColor
|
||||
} from '$uix/eidos/components/label';
|
||||
import { compileMorfo } from '$uix/morfo';
|
||||
import { labelMorfo } from '@/uix/morfo/components/label';
|
||||
|
||||
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
||||
|
||||
let tab = $state<Tab>('live');
|
||||
let stageRef = $state<HTMLElement | null>(null);
|
||||
|
||||
// ── Live state ───────────────────────────────────────────────────────
|
||||
let text = $state('Email address');
|
||||
let size = $state<LabelSize>('sm');
|
||||
let weight = $state<LabelWeight>('medium');
|
||||
let color = $state<LabelColor>('primary');
|
||||
let disabled = $state(false);
|
||||
type Control = 'input' | 'checkbox' | 'switch';
|
||||
const controls = ['input', 'checkbox', 'switch'] as const;
|
||||
let control = $state<Control>('input');
|
||||
|
||||
const sizes: LabelSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
const weights: LabelWeight[] = ['regular', 'medium', 'semibold'];
|
||||
const colors: LabelColor[] = ['primary', 'secondary', 'muted', 'disabled'];
|
||||
|
||||
// ── Compiled morfo ───────────────────────────────────────────────────
|
||||
const compiled = compileMorfo(labelMorfo);
|
||||
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
||||
const events = $derived([...compiled.actions.byName.values()]);
|
||||
|
||||
const eidosSnippet = $derived(
|
||||
[
|
||||
"<script lang='ts'>",
|
||||
" import { Label } from '$uix/eidos/components/label';",
|
||||
'</' + 'script>',
|
||||
'',
|
||||
'<Label',
|
||||
' for="email"',
|
||||
size !== 'sm' && ` size="${size}"`,
|
||||
weight !== 'medium' && ` weight="${weight}"`,
|
||||
color !== 'primary' && ` color="${color}"`,
|
||||
disabled && ' data-disabled',
|
||||
`>${text}</Label>`,
|
||||
'<input id="email" type="email" />'
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n')
|
||||
);
|
||||
</script>
|
||||
|
||||
<div data-uix-canvas-inner>
|
||||
<header>
|
||||
<div data-uix-eyebrow>Forms · Label</div>
|
||||
<h1 data-uix-page-title>Label</h1>
|
||||
<p data-uix-page-lede>
|
||||
Standalone accessible label primitive. A native <code><label></code> carrying the
|
||||
foundation <code>label</code> typography style, with <code>size</code> / <code>weight</code> /
|
||||
<code>color</code> overrides. Pass <code>for</code> to associate it with any control by id.
|
||||
Eidos-native leaf. Inside a <code><Field></code>, prefer <code><Field.Label></code>.
|
||||
</p>
|
||||
<div data-uix-page-meta>
|
||||
<span data-uix-meta-pill><span data-uix-meta-key>parts</span>{compiled.parts.order.length}</span>
|
||||
<span data-uix-meta-pill><span data-uix-meta-key>events</span>{events.length}</span>
|
||||
<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>{sizes.length}</span>
|
||||
<span data-uix-meta-pill><span data-uix-meta-key>layer</span>eidos-native</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div data-uix-stage>
|
||||
<div data-uix-stage-area bind:this={stageRef}>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
||||
{#if control === 'input'}
|
||||
<Label for="demo-input" {size} {weight} {color} data-disabled={disabled || undefined}>{text}</Label>
|
||||
<input id="demo-input" type="text" {disabled} placeholder="click the label →" />
|
||||
{:else if control === 'checkbox'}
|
||||
<input id="demo-check" type="checkbox" {disabled} />
|
||||
<Label for="demo-check" {size} {weight} {color} data-disabled={disabled || undefined}>{text}</Label>
|
||||
{:else}
|
||||
<input id="demo-switch" type="checkbox" role="switch" {disabled} />
|
||||
<Label for="demo-switch" {size} {weight} {color} data-disabled={disabled || undefined}>{text}</Label>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div data-uix-stage-trace>
|
||||
<span data-uix-stage-trace-key>tip</span>
|
||||
<span>click the label to focus / toggle the control · double-click won't select its text</span>
|
||||
<span style="margin-inline-start:auto;">
|
||||
<span data-uix-stage-trace-key>for</span>
|
||||
<span data-uix-stage-trace-event>demo-{control}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-uix-tabs role="tablist">
|
||||
<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
|
||||
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>API</button>
|
||||
<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
|
||||
<span data-uix-layer-badge="morfo">morfo</span>
|
||||
<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
|
||||
</button>
|
||||
<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
|
||||
<span data-uix-layer-badge="sema">sema</span>
|
||||
<span data-uix-tab-count>0</span>
|
||||
</button>
|
||||
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
|
||||
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
|
||||
</div>
|
||||
|
||||
{#if tab === 'live'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Controls</h2>
|
||||
<p data-uix-section-desc>
|
||||
<span data-uix-layer-badge="eidos">eidos</span> owns the whole surface — a native
|
||||
<code><label></code> with the foundation label typography + per-axis overrides.
|
||||
</p>
|
||||
|
||||
<div data-uix-controls>
|
||||
<label data-uix-control style="min-inline-size: 18rem;">
|
||||
<span data-uix-control-label>label text</span>
|
||||
<input type="text" bind:value={text} />
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>size</span>
|
||||
<span data-uix-chips role="radiogroup">
|
||||
{#each sizes as s}
|
||||
<button data-uix-chip data-active={size === s} onclick={() => (size = s)}>{s}</button>
|
||||
{/each}
|
||||
</span>
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>weight</span>
|
||||
<span data-uix-chips role="radiogroup">
|
||||
{#each weights as w}
|
||||
<button data-uix-chip data-active={weight === w} onclick={() => (weight = w)}>{w}</button>
|
||||
{/each}
|
||||
</span>
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>color</span>
|
||||
<span data-uix-chips role="radiogroup">
|
||||
{#each colors as c}
|
||||
<button data-uix-chip data-active={color === c} onclick={() => (color = c)}>{c}</button>
|
||||
{/each}
|
||||
</span>
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>associated control</span>
|
||||
<span data-uix-chips role="radiogroup">
|
||||
{#each controls as c}
|
||||
<button data-uix-chip data-active={control === c} onclick={() => (control = c)}>{c}</button>
|
||||
{/each}
|
||||
</span>
|
||||
</label>
|
||||
<label data-uix-control>
|
||||
<span data-uix-control-label>disabled <span data-uix-control-hint>data-disabled</span></span>
|
||||
<span data-uix-switch>
|
||||
<input type="checkbox" bind:checked={disabled} />
|
||||
<span data-uix-switch-label>{disabled ? 'on' : 'off'}</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>Size scale</div>
|
||||
<p data-uix-section-desc>Each step maps to a <code>--font-size-*</code> token; the label weight + color stay constant.</p>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:baseline; margin-block-start:var(--space-2);">
|
||||
{#each sizes as s}
|
||||
<div style="display:flex; flex-direction:column; gap:var(--space-1);">
|
||||
<span data-uix-control-label>{s}</span>
|
||||
<Label size={s}>{text}</Label>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div data-uix-subsection-head>Weight & color</div>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:flex-start; margin-block-start:var(--space-2);">
|
||||
<div style="display:flex; flex-direction:column; gap:var(--space-1-5);">
|
||||
<span data-uix-control-label>weight</span>
|
||||
{#each weights as w}
|
||||
<Label weight={w}>{w} · {text}</Label>
|
||||
{/each}
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:var(--space-1-5);">
|
||||
<span data-uix-control-label>color</span>
|
||||
{#each colors as c}
|
||||
<Label color={c}>{c} · {text}</Label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-uix-code>
|
||||
<div data-uix-code-head>
|
||||
<span data-uix-layer-badge="eidos">eidos</span>
|
||||
<span>native label + `for` association</span>
|
||||
<span data-uix-code-lang>svelte</span>
|
||||
</div>
|
||||
<pre><code>{eidosSnippet}</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'api'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>API + reference comparison</h2>
|
||||
<p data-uix-section-desc>
|
||||
A standalone label primitive exists in Radix and Bits; Ark UI / MUI only ship a
|
||||
Field-scoped label. UIX ships both: <code><Label></code> (standalone, this) and
|
||||
<code><Field.Label></code> (auto-wired inside a Field).
|
||||
</p>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Feature</th><th>Radix</th><th>Bits</th><th>React Aria</th><th>Ark / MUI</th><th>UIX</th><th>Decision</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">Standalone label</td><td>✅ Label.Root</td><td>✅ Label.Root</td><td>✅ <Label></td><td>❌ field-only</td><td>✅ <Label></td><td>Native <label> + `for` passthrough.</td></tr>
|
||||
<tr><td class="name">size / weight / color axes</td><td>❌ unstyled</td><td>❌</td><td>❌</td><td>⚠️</td><td>✅</td><td>Foundation label style + per-axis overrides (Text mechanism).</td></tr>
|
||||
<tr><td class="name">Multi-click select guard</td><td>✅ onMouseDown</td><td>✅</td><td>❌</td><td>❌</td><td>✅</td><td>Inline DOM-hygiene handler.</td></tr>
|
||||
<tr><td class="name">Field-scoped label</td><td>⚠️ separate</td><td>⚠️</td><td>✅ context</td><td>✅</td><td>✅ Field.Label</td><td>Complementary — auto-wires for=inputId.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">for</td><td>native</td><td class="default">—</td><td>Associate with a control by its id.</td></tr>
|
||||
<tr><td class="name">size</td><td>eidos</td><td class="default">sm</td><td>xs | sm | md | lg | xl · responsive · maps to --font-size-*.</td></tr>
|
||||
<tr><td class="name">weight</td><td>eidos</td><td class="default">medium</td><td>regular | medium | semibold · responsive.</td></tr>
|
||||
<tr><td class="name">color</td><td>eidos</td><td class="default">primary</td><td>primary | secondary | muted | disabled · responsive.</td></tr>
|
||||
<tr><td class="name">data-disabled</td><td>eidos</td><td class="default">—</td><td>Consumer sets it when the control is disabled → muted + not-allowed.</td></tr>
|
||||
<tr><td class="name">…HTMLLabelAttributes</td><td>native</td><td class="default">—</td><td>id, class, aria-*, event handlers pass through.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'morfo'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Morfo contract</h2>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Optional</th></tr></thead>
|
||||
<tbody>
|
||||
{#each partsList as part}
|
||||
<tr>
|
||||
<td class="name">{part.kebab}</td>
|
||||
<td><code data-uix-part-marker>[{part.marker}]</code></td>
|
||||
<td class="type"><{part.defaultElement}></td>
|
||||
<td class="type">{part.role ?? '—'}</td>
|
||||
<td class="default">{part.optional ? 'yes' : 'no'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p data-uix-section-desc style="margin-block-start:var(--space-3);">
|
||||
<code>scope: ['eidos']</code> — an eidos-native leaf. The morfo declares one Provider part
|
||||
(→ <code>data-label</code>); the visual axes (size / weight / color) are eidos-only,
|
||||
stamped as inline <code>--_label-*</code> variables by the wrapper (the <code><Text></code>
|
||||
mechanism). No soma, no sema.
|
||||
</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'sema'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>
|
||||
<span data-uix-layer-badge="sema">sema</span> · events
|
||||
</h2>
|
||||
<p data-uix-section-desc>
|
||||
<strong>No semantic events.</strong> A label neither commits, emerges, nor transitions — it
|
||||
is a passive display primitive. Interaction with the associated control (which carries its
|
||||
own sema) belongs to that control, not the label.
|
||||
</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'recipe'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Eidos recipe</h2>
|
||||
<p data-uix-section-desc>
|
||||
<code>src/uix/eidos/components/label/label.css</code> applies the foundation
|
||||
<code>--style-label-*</code> tokens, overridable per-instance by the inline
|
||||
<code>--_label-*</code> variables the wrapper sets from <code>size</code> /
|
||||
<code>weight</code> / <code>color</code>.
|
||||
</p>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Selector</th><th>Owner</th><th>Purpose</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>[data-label]</code></td>
|
||||
<td><span data-uix-tag data-kind="morfo">morfo</span></td>
|
||||
<td>Label typography from <code>--style-label-*</code> + <code>--_label-*</code> overrides.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name"><code>[data-label][data-disabled]</code></td>
|
||||
<td><span data-uix-tag data-kind="eidos">eidos</span></td>
|
||||
<td>Muted color + not-allowed cursor when the control is disabled.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'a11y'}
|
||||
<section data-uix-section>
|
||||
<h2 data-uix-section-title>Accessibility</h2>
|
||||
<div data-uix-table-wrap>
|
||||
<table data-uix-table>
|
||||
<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="name">Element</td><td>Native <code><label></code> — full built-in label semantics, no ARIA needed.</td></tr>
|
||||
<tr><td class="name">Association</td><td><code>for="{'{'}id{'}'}"</code> ties the label to a control; clicking it focuses / toggles the control.</td></tr>
|
||||
<tr><td class="name">Text selection</td><td>A multi-click mousedown guard prevents accidental text selection while keeping single-click activation.</td></tr>
|
||||
<tr><td class="name">Field integration</td><td>Inside a <code><Field></code>, use <code>Field.Label</code> — it wires <code>for</code> automatically and reflects invalid / disabled field state.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in new issue