go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1e6a9df874'
${ noResults }
svelte-kit-vice/src/uix/eidos/components/textarea/textarea.css

155 lines
4.4 KiB
Raw Normal View History Unescape

Build TextArea component + fix locale propagation bug across soma providers Major work in this session: 1. NumberField demo refactored to expose Intl.NumberFormatOptions live - 9 canonical presets (currency/unit/percent/compact/plain) - Locale/currency/unit lists derived from $libs/langs, $libs/currency, $format/units (no more hardcoded arrays) - Default locale from uix.format.numbers.getLocale() 2. Bug fix: locale prop ignored when soma.format service is active - soma/NumberField: 5 bypass points via new `hasOwnLocale` getter (decimalSeparator, groupSeparator, formatValue, formatEditValue, parseValue) - soma/Calendar: dateOrder respects locale prop (matches DateField precedence) - soma/RangeCalendar: same dateOrder fix - When the consumer passes `locale` prop, soma.nums/dates is bypassed and Intl is used directly with the prop locale 3. TextArea — new component, full 4-layer stack - morfo: 3 parts (provider/input/count), 3 events (commit-input/commit-submit/shift-count-overflow), APG textbox - soma: TextAreaProvider with autosize (scrollHeight measurement), submitOn modes (false|enter|shift+enter|mod+enter), maxLength soft clamp, Field integration (OR-merge), counter overflow tracking - eidos: 5 sizes × 3 variants × 8 colors, autosize suppresses CSS resize - sema: commit-submit + shift-count-overflow perceptual cues - demo: canonical 6-tab depth, all props exposed as live controls - PrimitiveTextareaAttributes added to soma/types/html.ts 4. Also includes accumulated unreleased work from prior sessions: - Eidos ports: announce, clipboard, drag-drop, feed, table, tree-grid, tree-view, virtual-grid, virtual-list, words - Their canonical demos under web/routes/uix/components/ - Semantic events defined for utility morfos (announce/clipboard/virtual-list/virtual-grid) - Tree indent guides fixed (TreeView ::before, TreeGrid stacked gradients) - Sidebar reorganized with Data + Utilities groups - Eidos words content layer and primitives Reference library survey performed before TextArea API design (Mantine, Radix Themes, Chakra v3, React Aria, Ark UI, Bits UI, shadcn, MUI, Prime). Decision documented: no separate CurrencyField/UnitField — single NumberField with formatOptions is the canon (matches all surveyed headless libs except PrimeReact's mode enum, which still uses 1 component). svelte-check: 0 errors in modified/created files. See CONTINUE.md for full session notes and next steps. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
/* TextArea — multi-line text input. Skin layered over `<textarea>`. */
[data-textarea] {
--_textarea-px: var(--space-3);
--_textarea-py: var(--space-2);
--_textarea-gap: var(--space-2);
--_textarea-font-size: var(--font-size-md);
--_textarea-line-height: var(--leading-normal);
--_textarea-radius: var(--radius-md);
--_textarea-border: var(--color-neutral-border);
--_textarea-border-hover: var(--color-neutral-border-strong);
--_textarea-border-focus: var(--color-primary-border-strong);
--_textarea-bg: var(--color-surface);
--_textarea-color: var(--color-content);
--_textarea-placeholder: var(--color-content-muted);
--_textarea-count-color: var(--color-content-muted);
--_textarea-count-overflow: var(--color-threat-text);
display: inline-flex;
flex-direction: column;
gap: var(--_textarea-gap);
inline-size: 100%;
min-inline-size: 0;
}
[data-textarea][data-size='xs'] {
--_textarea-px: var(--space-2);
--_textarea-py: var(--space-1);
--_textarea-font-size: var(--font-size-xs);
--_textarea-radius: var(--radius-sm);
}
[data-textarea][data-size='sm'] {
--_textarea-px: var(--space-2);
--_textarea-py: var(--space-1-5);
--_textarea-font-size: var(--font-size-sm);
}
[data-textarea][data-size='lg'] {
--_textarea-px: var(--space-4);
--_textarea-py: var(--space-3);
--_textarea-font-size: var(--font-size-lg);
--_textarea-radius: var(--radius-lg);
}
[data-textarea][data-size='xl'] {
--_textarea-px: var(--space-5);
--_textarea-py: var(--space-4);
--_textarea-font-size: var(--font-size-xl);
--_textarea-radius: var(--radius-lg);
}
/* Color accents — applied on focus + when invalid. */
[data-textarea][data-color='secondary'] {
--_textarea-border-focus: var(--color-secondary-border-strong);
}
[data-textarea][data-color='neutral'] {
--_textarea-border-focus: var(--color-neutral-border-strong);
}
[data-textarea][data-color='affirm'] {
--_textarea-border-focus: var(--color-affirm-border-strong);
}
[data-textarea][data-color='fulfill'] {
--_textarea-border-focus: var(--color-fulfill-border-strong);
}
[data-textarea][data-color='risk'] {
--_textarea-border-focus: var(--color-risk-border-strong);
}
[data-textarea][data-color='threat'] {
--_textarea-border-focus: var(--color-threat-border-strong);
}
[data-textarea][data-color='loss'] {
--_textarea-border-focus: var(--color-loss-border-strong);
}
/* The real input. */
[data-textarea-input] {
display: block;
inline-size: 100%;
min-inline-size: 0;
padding-block: var(--_textarea-py);
padding-inline: var(--_textarea-px);
border: var(--border-width) solid var(--_textarea-border);
border-radius: var(--_textarea-radius);
background: var(--_textarea-bg);
color: var(--_textarea-color);
font-family: var(--font-family-body);
font-size: var(--_textarea-font-size);
line-height: var(--_textarea-line-height);
outline: none;
transition:
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
[data-textarea-input]:hover:not([data-disabled]):not([data-readonly]) {
border-color: var(--_textarea-border-hover);
}
[data-textarea][data-focused] [data-textarea-input] {
border-color: var(--_textarea-border-focus);
box-shadow: 0 0 0 var(--ring-width, 2px)
color-mix(in srgb, var(--_textarea-border-focus) 25%, transparent);
}
[data-textarea-input][data-invalid] {
border-color: var(--color-threat-border-strong);
}
[data-textarea][data-variant='outline'] [data-textarea-input] {
background: transparent;
}
[data-textarea][data-variant='ghost'] [data-textarea-input] {
background: transparent;
border-color: transparent;
}
[data-textarea][data-variant='ghost'][data-focused] [data-textarea-input] {
border-color: var(--_textarea-border-focus);
}
[data-textarea-input][data-disabled] {
cursor: not-allowed;
opacity: var(--opacity-disabled, 0.6);
}
[data-textarea-input]::placeholder {
color: var(--_textarea-placeholder);
}
/* Count chip — eidos default render: `count / max`. */
[data-textarea-count] {
display: inline-flex;
align-items: baseline;
gap: 0.25em;
align-self: flex-end;
color: var(--_textarea-count-color);
font-family: var(--font-family-mono, ui-monospace, monospace);
font-size: calc(var(--_textarea-font-size) * 0.85);
font-variant-numeric: tabular-nums;
line-height: 1;
}
[data-textarea-count][data-overflow] {
color: var(--_textarea-count-overflow);
font-weight: 600;
}
[data-textarea-count-sep] {
opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
[data-textarea-input] {
transition: none;
}
}

Powered by TurnKey Linux.