The `[data-uix-control] input[type='text|number']` rule only covered two input types, so demos that used `<input type='date'>` (date- and date-range pickers' min/max/start/end inputs, calendar bounds, etc.) or `<input type='email|search|tel|url|password|time|month|week| datetime-local'>` (form/field demos) fell back to the user-agent chrome — different padding, borders, fonts, and the native calendar/clock indicator with no theme alignment. Replaced the type-specific selector with an exclusion list: [data-uix-control] input:not([type='checkbox']):not([type='radio']):not([type='range']) Every text-like input now picks up the demo's standard chrome (6px / 32px / `--uix-line` border / `--uix-surface` bg / focus ring). Checkbox + radio keep their bespoke toggle treatments; range keeps its native track with the demo accent. Added: - Consistent `min-block-size: 32px` + `box-sizing: border-box` so inputs line up vertically with the demo's button-style pill controls. - Disabled state: 0.55 opacity + `not-allowed` cursor. - `::-webkit-calendar-picker-indicator` recolored for date/datetime-local/month/time/week inputs — inverted 70% so the calendar/clock icon reads on dark theme and matches the field text tone, with full opacity on hover. - `::-webkit-search-cancel-button` recolored. Verified in browser: date-range-picker demo's start/end/minValue/ maxValue inputs now match minDays/maxDays (number) and label/name (text) inputs. Form demo Field-rendered inputs and the controls panel both read as one consistent surface. date-field controls panel (locale select + name text + min/max date inputs) matches. Closes #47 in the task list. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
539d9fac39
commit
8ccd9de033
Loading…
Reference in new issue