feat(eidos): add TimePicker wrapper + demo following P-1..P-5 picker contract
Builds on the existing soma TimePicker slider-based clock (HourSlider /
MinuteSlider / SecondSlider + DayPeriodToggle). Adds the canonical
picker shell:
- mode='inline' | 'modal' on the Provider, propagated to popover.modal
- Provider helpers commit() / cancel() / clear() with watch(open)
snapshot for cancel-revert
- Footer composition (TimePicker.Footer / Clear / Cancel / Close as
pure-composition Eidos parts; no *Button root props)
- New TimePicker.Clock soma component that carries the
data-time-picker-clock contract attr, wraps the slider stack
- Eidos shell: Provider visual root, Trigger (clock icon), Content
(popover content), Clock, Footer + action parts, slider/toggle
pass-throughs
Renews the time-picker morfo to declare Provider / Trigger / Clock /
DayPeriodToggle / DayPeriodItem / Footer / Clear / Cancel / Close,
plus all 6 commit/emerge events (open + close-commit/cancel/dismiss/
dismiss-outside + commit-clear). apg=dialog-modal.
Demo at /uix/components/time-picker exercises all controls, Footer
composition switches, soma + eidos code snippets, morfo / sema / recipe
/ a11y tabs. README documents the picker contract.
67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check
0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
/* TimePicker — visual layer.
|
|
|
|
|
*
|
|
|
|
|
* Reuses time-field tokens for the field-shaped portion (Input + Segments)
|
|
|
|
|
* and the calendar/popover surface tokens for the popover Clock body.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
[data-time-picker] {
|
|
|
|
|
--_time-field-height: var(--time-field-height-md);
|
|
|
|
|
--_time-field-px: var(--time-field-px-md);
|
|
|
|
|
--_time-field-gap: var(--time-field-gap-md);
|
|
|
|
|
--_time-field-segment-px: var(--time-field-segment-px-md);
|
|
|
|
|
--_time-field-font-size: var(--time-field-font-size-md);
|
|
|
|
|
--_time-field-accent-border: var(--color-primary-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-primary-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-primary-text);
|
|
|
|
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--time-field-stack-gap);
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
color: var(--time-field-color);
|
|
|
|
|
font-family: var(--time-field-font-family);
|
|
|
|
|
font-size: var(--_time-field-font-size);
|
|
|
|
|
line-height: var(--time-field-line-height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker][data-size='sm'] {
|
|
|
|
|
--_time-field-height: var(--time-field-height-sm);
|
|
|
|
|
--_time-field-px: var(--time-field-px-sm);
|
|
|
|
|
--_time-field-gap: var(--time-field-gap-sm);
|
|
|
|
|
--_time-field-segment-px: var(--time-field-segment-px-sm);
|
|
|
|
|
--_time-field-font-size: var(--time-field-font-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker][data-size='lg'] {
|
|
|
|
|
--_time-field-height: var(--time-field-height-lg);
|
|
|
|
|
--_time-field-px: var(--time-field-px-lg);
|
|
|
|
|
--_time-field-gap: var(--time-field-gap-lg);
|
|
|
|
|
--_time-field-segment-px: var(--time-field-segment-px-lg);
|
|
|
|
|
--_time-field-font-size: var(--time-field-font-size-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker][data-color='secondary'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-secondary-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-secondary-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
[data-time-picker][data-color='neutral'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-neutral-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-neutral-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
[data-time-picker][data-color='affirm'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-affirm-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-affirm-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
[data-time-picker][data-color='fulfill'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-fulfill-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-fulfill-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-fulfill-text);
|
|
|
|
|
}
|
|
|
|
|
[data-time-picker][data-color='risk'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-risk-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-risk-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-risk-text);
|
|
|
|
|
}
|
|
|
|
|
[data-time-picker][data-color='threat'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-threat-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-threat-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-threat-text);
|
|
|
|
|
}
|
|
|
|
|
[data-time-picker][data-color='loss'] {
|
|
|
|
|
--_time-field-accent-border: var(--color-loss-border);
|
|
|
|
|
--_time-field-accent-track: var(--color-loss-track);
|
|
|
|
|
--_time-field-accent-text: var(--color-loss-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Trigger ─────────────────────────────────────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-time-picker-trigger] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
inline-size: var(--_time-field-height);
|
|
|
|
|
block-size: var(--_time-field-height);
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: var(--time-field-border-width) solid var(--time-field-border);
|
|
|
|
|
border-radius: var(--time-field-radius);
|
|
|
|
|
background: var(--time-field-bg);
|
|
|
|
|
color: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--time-field-transition-duration) var(--time-field-transition-ease),
|
|
|
|
|
border-color var(--time-field-transition-duration) var(--time-field-transition-ease),
|
|
|
|
|
box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease),
|
|
|
|
|
color var(--time-field-transition-duration) var(--time-field-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-trigger]:hover {
|
|
|
|
|
border-color: var(--_time-field-accent-border);
|
|
|
|
|
background: var(--_time-field-accent-track);
|
|
|
|
|
color: var(--_time-field-accent-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-trigger]:focus-visible {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: var(--_time-field-accent-border);
|
|
|
|
|
box-shadow: var(--time-field-focus-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-trigger][data-disabled],
|
|
|
|
|
[data-time-picker-trigger]:disabled {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
opacity: var(--time-field-disabled-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Embedded trigger inside the input — flush affordance like date-picker. */
|
|
|
|
|
[data-time-field-input] [data-time-picker-trigger] {
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
inline-size: var(--time-field-segment-height);
|
|
|
|
|
block-size: var(--time-field-segment-height);
|
|
|
|
|
margin-inline-start: auto;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: var(--time-field-segment-radius);
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--time-field-segment-color);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-field-input] [data-time-picker-trigger]:hover {
|
|
|
|
|
border: none;
|
|
|
|
|
background: var(--_time-field-accent-track);
|
|
|
|
|
color: var(--_time-field-accent-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-field-input] [data-time-picker-trigger]:focus-visible {
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
background: var(--_time-field-accent-track);
|
|
|
|
|
color: var(--_time-field-accent-text);
|
|
|
|
|
box-shadow: var(--time-field-segment-focus-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Popover content / Clock surface ─────────────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-popover-content]:has([data-time-picker-clock]) {
|
|
|
|
|
--_popover-content-width-override: max-content;
|
|
|
|
|
--_popover-content-min-width-override: max-content;
|
|
|
|
|
--_popover-content-max-width-override: calc(100vw - var(--space-4));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
gap: var(--space-2);
|
|
|
|
|
padding: var(--space-2-5);
|
|
|
|
|
min-inline-size: 14rem;
|
feat(eidos): add TimePicker wrapper + demo following P-1..P-5 picker contract
Builds on the existing soma TimePicker slider-based clock (HourSlider /
MinuteSlider / SecondSlider + DayPeriodToggle). Adds the canonical
picker shell:
- mode='inline' | 'modal' on the Provider, propagated to popover.modal
- Provider helpers commit() / cancel() / clear() with watch(open)
snapshot for cancel-revert
- Footer composition (TimePicker.Footer / Clear / Cancel / Close as
pure-composition Eidos parts; no *Button root props)
- New TimePicker.Clock soma component that carries the
data-time-picker-clock contract attr, wraps the slider stack
- Eidos shell: Provider visual root, Trigger (clock icon), Content
(popover content), Clock, Footer + action parts, slider/toggle
pass-throughs
Renews the time-picker morfo to declare Provider / Trigger / Clock /
DayPeriodToggle / DayPeriodItem / Footer / Clear / Cancel / Close,
plus all 6 commit/emerge events (open + close-commit/cancel/dismiss/
dismiss-outside + commit-clear). apg=dialog-modal.
Demo at /uix/components/time-picker exercises all controls, Footer
composition switches, soma + eidos code snippets, morfo / sema / recipe
/ a11y tabs. README documents the picker contract.
67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check
0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
color: var(--color-content-primary);
|
|
|
|
|
font-family: var(--font-ui);
|
|
|
|
|
font-size: var(--font-size-sm);
|
|
|
|
|
line-height: var(--leading-ui);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] [data-slider] {
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Labelled scale (ruler) above hour slider, below minute/second ───────── */
|
|
|
|
|
|
|
|
|
|
.time-picker-slider {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
gap: 2px;
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-picker-scale {
|
|
|
|
|
position: relative;
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
block-size: 0.875rem;
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
/* Inner inset matches the slider's thumb radius so endpoint labels align
|
|
|
|
|
with the actual track endpoints, not the bounding box. */
|
|
|
|
|
padding-inline: calc(var(--_slider-thumb-size, 1rem) / 2);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-picker-scale-tick {
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset-block: 0;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 1px;
|
|
|
|
|
color: var(--color-content-muted);
|
|
|
|
|
font-family: var(--font-mono, var(--font-ui));
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
/* Smallest typographic step in the system token set — keeps the ruler
|
|
|
|
|
readable but visually subordinate to the slider thumb / value. */
|
|
|
|
|
font-size: var(--font-size-xxs);
|
|
|
|
|
line-height: 1;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-picker-scale-mark {
|
|
|
|
|
display: block;
|
|
|
|
|
inline-size: 1px;
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
block-size: 4px;
|
|
|
|
|
background: var(--color-border-default);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-picker-scale-label {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Below variant: marks rise to the top of the scale row so the label is
|
|
|
|
|
underneath the track. */
|
|
|
|
|
.time-picker-scale-below .time-picker-scale-tick {
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
}
|
|
|
|
|
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
/* ── Per-channel accent palette ───────────────────────────────────────────
|
|
|
|
|
Differentiates the three sliders visually: hour uses the picker's
|
|
|
|
|
primary accent, minute uses secondary (cool counterpart), second uses
|
|
|
|
|
a muted tone so it visually subordinates. All three remain
|
|
|
|
|
semantically equivalent — the differentiation is purely visual to
|
|
|
|
|
help the user track which channel each slider drives. */
|
|
|
|
|
|
|
|
|
|
/* Hour = primary, Minute = secondary, Second = neutral. Tokens are
|
|
|
|
|
resolved at the clock root using global CSS vars (not the picker's
|
|
|
|
|
inherited `--_time-field-accent-*`) because the Popover content is
|
|
|
|
|
portaled outside the picker scope — inherited custom properties do
|
|
|
|
|
not cross portal boundaries. */
|
|
|
|
|
[data-time-picker-clock] [data-time-picker-hour-slider] {
|
|
|
|
|
--_time-picker-slider-accent: var(--color-primary-border);
|
|
|
|
|
--_time-picker-slider-track: var(--color-primary-track);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] [data-time-picker-minute-slider] {
|
|
|
|
|
--_time-picker-slider-accent: var(--color-secondary-border);
|
|
|
|
|
--_time-picker-slider-track: var(--color-secondary-track);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] [data-time-picker-second-slider] {
|
|
|
|
|
--_time-picker-slider-accent: var(--color-neutral-border);
|
|
|
|
|
--_time-picker-slider-track: var(--color-neutral-track);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Slider thumb / range reinforcement inside the clock ──────────────────
|
|
|
|
|
The base slider recipe sets thumb color from --color-surface-default
|
|
|
|
|
over the primary range; inside the popover this can blend with the
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
popover surface. Bump emphasis with the per-channel accent. */
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] [data-slider-thumb] {
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
border-color: var(--_time-picker-slider-accent, var(--_time-field-accent-border));
|
|
|
|
|
box-shadow:
|
|
|
|
|
var(--slider-thumb-shadow),
|
|
|
|
|
0 0 0 2px var(--color-surface-default);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] [data-slider-thumb]:focus-visible {
|
|
|
|
|
box-shadow:
|
|
|
|
|
var(--slider-thumb-focus-shadow),
|
|
|
|
|
0 0 0 2px var(--color-surface-default);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-time-picker-clock] [data-slider-range] {
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
background: var(--_time-picker-slider-accent, var(--_time-field-accent-border));
|
|
|
|
|
}
|
|
|
|
|
|
feat(eidos): add TimePicker wrapper + demo following P-1..P-5 picker contract
Builds on the existing soma TimePicker slider-based clock (HourSlider /
MinuteSlider / SecondSlider + DayPeriodToggle). Adds the canonical
picker shell:
- mode='inline' | 'modal' on the Provider, propagated to popover.modal
- Provider helpers commit() / cancel() / clear() with watch(open)
snapshot for cancel-revert
- Footer composition (TimePicker.Footer / Clear / Cancel / Close as
pure-composition Eidos parts; no *Button root props)
- New TimePicker.Clock soma component that carries the
data-time-picker-clock contract attr, wraps the slider stack
- Eidos shell: Provider visual root, Trigger (clock icon), Content
(popover content), Clock, Footer + action parts, slider/toggle
pass-throughs
Renews the time-picker morfo to declare Provider / Trigger / Clock /
DayPeriodToggle / DayPeriodItem / Footer / Clear / Cancel / Close,
plus all 6 commit/emerge events (open + close-commit/cancel/dismiss/
dismiss-outside + commit-clear). apg=dialog-modal.
Demo at /uix/components/time-picker exercises all controls, Footer
composition switches, soma + eidos code snippets, morfo / sema / recipe
/ a11y tabs. README documents the picker contract.
67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check
0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
refactor(pickers): date/time/date-range pickers consume shared PickerShell
Follow-up to commit 714ee373 (PickerShell extraction). Norm N-8 now
applied to every composite picker — date-picker, time-picker and
date-range-picker stop carrying their own Footer/Clear/Cancel/Close
duplicates and read the shared <PickerShell.Footer/Clear/Cancel/Close>
through `pickerShellContext`.
Soma changes
------------
- date-picker, time-picker, date-range-picker providers each gain a
`pickerShellHandle: PickerShellHandle` field exposing
`getMode/commit/cancel/clear`, and call
`pickerShellContext.set(this.pickerShellHandle)` in the constructor
so descendant Eidos shell parts can drive the picker.
Morfo changes
-------------
- Footer/Clear/Cancel/Close parts removed from each picker morfo.
The shared chrome lives outside the per-picker contract — its data
attrs are `[data-picker-footer/clear/cancel/close]` (no per-picker
prefix). Comment block in each morfo file documents the move.
Eidos changes
-------------
- Deleted 12 obsolete files:
src/uix/eidos/components/date-picker/date-picker-{footer,clear,cancel,close}.svelte
src/uix/eidos/components/time-picker/time-picker-{footer,clear,cancel,close}.svelte
src/uix/eidos/components/date-range-picker/date-range-picker-{footer,clear,cancel,close}.svelte
- Each picker's `index.ts` re-imports the 4 parts from
`../picker-shell/picker-shell-{footer,clear,cancel,close}.svelte`
so the public namespace stays `X.Footer / X.Clear / X.Cancel /
X.Close` — no breaking change for consumers.
- Each picker's `types.ts` re-exports `FooterProps/ClearProps/
CancelProps/CloseProps` from `../picker-shell`, replacing the stale
per-picker types that referenced soma popover Close props.
CSS changes
-----------
- Deleted ~190 lines of duplicated footer/clear/cancel/close rules
from date-picker.css, time-picker.css, date-range-picker.css. The
canonical `[data-picker-footer/clear/cancel/close]` rules in
picker-shell.css now style every picker uniformly.
- prefers-reduced-motion blocks pruned of the same selectors.
Public API
----------
Unchanged from a consumer perspective: `<DatePicker.Footer>`,
`<TimePicker.Clear>`, `<DateRangePicker.Close>`, etc. still resolve
to working components. The inner DOM markers change from
`[data-{x}-picker-footer]` to `[data-picker-footer]` — anyone with
custom CSS targeting the old selectors must migrate.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
[data-time-picker-trigger] {
|
feat(eidos): add TimePicker wrapper + demo following P-1..P-5 picker contract
Builds on the existing soma TimePicker slider-based clock (HourSlider /
MinuteSlider / SecondSlider + DayPeriodToggle). Adds the canonical
picker shell:
- mode='inline' | 'modal' on the Provider, propagated to popover.modal
- Provider helpers commit() / cancel() / clear() with watch(open)
snapshot for cancel-revert
- Footer composition (TimePicker.Footer / Clear / Cancel / Close as
pure-composition Eidos parts; no *Button root props)
- New TimePicker.Clock soma component that carries the
data-time-picker-clock contract attr, wraps the slider stack
- Eidos shell: Provider visual root, Trigger (clock icon), Content
(popover content), Clock, Footer + action parts, slider/toggle
pass-throughs
Renews the time-picker morfo to declare Provider / Trigger / Clock /
DayPeriodToggle / DayPeriodItem / Footer / Clear / Cancel / Close,
plus all 6 commit/emerge events (open + close-commit/cancel/dismiss/
dismiss-outside + commit-clear). apg=dialog-modal.
Demo at /uix/components/time-picker exercises all controls, Footer
composition switches, soma + eidos code snippets, morfo / sema / recipe
/ a11y tabs. README documents the picker contract.
67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check
0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
