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 '46ce1d800d'
${ noResults }
svelte-kit-vice/src/uix/eidos/components/date-picker/date-picker.css

256 lines
8.0 KiB
Raw Normal View History Unescape

uix: date-picker + date-range-picker components + component audit infra Two new Eidos components shipped end-to-end (wrapper + recipe + demo + Soma provider hardening) plus a checklist-driven audit pipeline that scores all 67 morfo components against doctrinal completion criteria. New components: - date-picker: full popover-anchored picker over date-field + calendar, with calendar/content/trigger parts and demo route. - date-range-picker: standalone wrapper with own calendar/grid/segment surface, demo route, and recipe CSS. - Both wrappers follow Option C disciplined (root + parts attached via explicit assignment, no Object.assign). Supporting Soma changes: - range-calendar provider tightened (211 LOC of behavior, 167 LOC of tests), README brought up to component doctrine. - date-field, date-picker, date-range-field, date-range-picker Soma providers + READMEs updated for new wrappers. - popover provider/close gain props needed by the picker wrappers. Morfo updates: - date-picker / date-range-picker / range-calendar morfos refined for the new APIs (parts, events, ARIA). Audit infrastructure (new): - src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across morfo / eidos wrapper / recipe CSS / demo / README / cross-layer scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION and DEMO_AUTHORING_GUIDE. - scripts/component-audit.ts + `npm run component:audit` — regex parser over all 67 components, emits tmp/component-audit.md with summary scoreboard + per-component findings. Validates against canonical SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS. - Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip, date-range-picker). Top systemic gaps: translations.label (49), README Gaps/Comparativa/Baseline sections (87 combined), keyboard /event ratio under-declaration (15), apg URL absent (19). Misc: - src/uix/kimi-audit-eidos.md — supplementary audit notes. - .gitignore: ignore .codex-* agent scratch artifacts at repo root. - continue.md + READMEs updated through the migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
[data-date-picker] {
--_date-field-height: var(--date-field-height-md);
--_date-field-px: var(--date-field-px-md);
--_date-field-gap: var(--date-field-gap-md);
--_date-field-segment-px: var(--date-field-segment-px-md);
--_date-field-font-size: var(--date-field-font-size-md);
--_date-field-accent-border: var(--color-primary-border);
--_date-field-accent-track: var(--color-primary-track);
--_date-field-accent-text: var(--color-primary-text);
display: inline-flex;
flex-direction: column;
gap: var(--date-field-stack-gap);
inline-size: 100%;
min-inline-size: 0;
color: var(--date-field-color);
font-family: var(--date-field-font-family);
font-size: var(--_date-field-font-size);
line-height: var(--date-field-line-height);
}
[data-date-picker][data-size='sm'] {
--_date-field-height: var(--date-field-height-sm);
--_date-field-px: var(--date-field-px-sm);
--_date-field-gap: var(--date-field-gap-sm);
--_date-field-segment-px: var(--date-field-segment-px-sm);
--_date-field-font-size: var(--date-field-font-size-sm);
}
[data-date-picker][data-size='lg'] {
--_date-field-height: var(--date-field-height-lg);
--_date-field-px: var(--date-field-px-lg);
--_date-field-gap: var(--date-field-gap-lg);
--_date-field-segment-px: var(--date-field-segment-px-lg);
--_date-field-font-size: var(--date-field-font-size-lg);
}
[data-date-picker][data-color='secondary'] {
--_date-field-accent-border: var(--color-secondary-border);
--_date-field-accent-track: var(--color-secondary-track);
--_date-field-accent-text: var(--color-secondary-text);
}
[data-date-picker][data-color='neutral'] {
--_date-field-accent-border: var(--color-neutral-border);
--_date-field-accent-track: var(--color-neutral-track);
--_date-field-accent-text: var(--color-neutral-text);
}
[data-date-picker][data-color='affirm'] {
--_date-field-accent-border: var(--color-affirm-border);
--_date-field-accent-track: var(--color-affirm-track);
--_date-field-accent-text: var(--color-affirm-text);
}
[data-date-picker][data-color='fulfill'] {
--_date-field-accent-border: var(--color-fulfill-border);
--_date-field-accent-track: var(--color-fulfill-track);
--_date-field-accent-text: var(--color-fulfill-text);
}
[data-date-picker][data-color='risk'] {
--_date-field-accent-border: var(--color-risk-border);
--_date-field-accent-track: var(--color-risk-track);
--_date-field-accent-text: var(--color-risk-text);
}
[data-date-picker][data-color='threat'] {
--_date-field-accent-border: var(--color-threat-border);
--_date-field-accent-track: var(--color-threat-track);
--_date-field-accent-text: var(--color-threat-text);
}
[data-date-picker][data-color='loss'] {
--_date-field-accent-border: var(--color-loss-border);
--_date-field-accent-track: var(--color-loss-track);
--_date-field-accent-text: var(--color-loss-text);
}
[data-date-picker][data-variant='outline'] [data-date-field-input] {
background: transparent;
}
[data-date-picker][data-variant='ghost'] [data-date-field-input] {
border-color: transparent;
background: transparent;
padding-inline: 0;
}
[data-date-picker][data-invalid] [data-date-field-input] {
border-color: var(--date-field-border-invalid);
}
[data-date-picker][data-disabled] {
opacity: var(--date-field-disabled-opacity);
}
[data-date-picker-trigger] {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: var(--_date-field-height);
block-size: var(--_date-field-height);
padding: 0;
border: var(--date-field-border-width) solid var(--date-field-border);
border-radius: var(--date-field-radius);
background: var(--date-field-bg);
color: inherit;
cursor: pointer;
transition:
background var(--date-field-transition-duration) var(--date-field-transition-ease),
border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease),
color var(--date-field-transition-duration) var(--date-field-transition-ease);
}
[data-date-picker-trigger]:hover {
border-color: var(--_date-field-accent-border);
background: var(--_date-field-accent-track);
color: var(--_date-field-accent-text);
}
[data-date-picker-trigger]:focus-visible {
outline: none;
border-color: var(--_date-field-accent-border);
box-shadow: var(--date-field-focus-shadow);
}
[data-date-picker-trigger][data-disabled],
[data-date-picker-trigger]:disabled {
cursor: not-allowed;
opacity: var(--date-field-disabled-opacity);
}
date-picker + date-range-picker: trigger embedded inside the input The calendar icon now lives INSIDE the date input as a flush trailing affordance, not as a separate sibling button. The change is markup + recipe CSS only — no API change. - Demo (date-picker): drop the `.picker-control` grid wrapper; put `<DatePicker.Trigger />` as the last child of the Input snippet, after the segments. Codeblock snippets updated to match. - Demo (date-range-picker): keep the dual-input + separator layout but move `<DateRangePicker.Trigger />` into the END input, since the trigger represents the trailing affordance of the whole range. Both code snippets updated. - Recipe CSS (both): add nested rules that detect the embedded case (`[data-date-field-input] > [data-date-picker-trigger]`, `[data-date-range-field-input] > [data-date-range-picker-trigger]`). Embedded trigger drops its own border/background, matches the segment height, sits flush at the trailing edge with `margin-inline-start: auto`, and uses the segment focus ring on hover/focus instead of the standalone field ring. The standalone (sibling) treatment stays available for consumers who prefer the icon as a separate control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
/* ── Trigger embedded inside the input ──────────────────────────────────────
* When the consumer places <DatePicker.Trigger /> as a descendant of
* <DatePicker.Input>, the icon becomes a flush affordance at the input's
* trailing edge: no border, no separate background, smaller hit area sized
* to the segment height, and a subtle hover tint that doesn't compete with
* the field's focus ring. The standalone treatment above stays available
* for consumers who place the trigger as a sibling. */
[data-date-field-input] [data-date-picker-trigger] {
flex: 0 0 auto;
inline-size: var(--date-field-segment-height);
block-size: var(--date-field-segment-height);
margin-inline-start: auto;
padding: 0;
border: none;
border-radius: var(--date-field-segment-radius);
background: transparent;
color: var(--date-field-segment-color);
box-shadow: none;
}
[data-date-field-input] [data-date-picker-trigger]:hover {
border: none;
background: var(--_date-field-accent-track);
color: var(--_date-field-accent-text);
}
[data-date-field-input] [data-date-picker-trigger]:focus-visible {
outline: none;
border: none;
background: var(--_date-field-accent-track);
color: var(--_date-field-accent-text);
box-shadow: var(--date-field-segment-focus-shadow);
}
uix: date-picker + date-range-picker components + component audit infra Two new Eidos components shipped end-to-end (wrapper + recipe + demo + Soma provider hardening) plus a checklist-driven audit pipeline that scores all 67 morfo components against doctrinal completion criteria. New components: - date-picker: full popover-anchored picker over date-field + calendar, with calendar/content/trigger parts and demo route. - date-range-picker: standalone wrapper with own calendar/grid/segment surface, demo route, and recipe CSS. - Both wrappers follow Option C disciplined (root + parts attached via explicit assignment, no Object.assign). Supporting Soma changes: - range-calendar provider tightened (211 LOC of behavior, 167 LOC of tests), README brought up to component doctrine. - date-field, date-picker, date-range-field, date-range-picker Soma providers + READMEs updated for new wrappers. - popover provider/close gain props needed by the picker wrappers. Morfo updates: - date-picker / date-range-picker / range-calendar morfos refined for the new APIs (parts, events, ARIA). Audit infrastructure (new): - src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across morfo / eidos wrapper / recipe CSS / demo / README / cross-layer scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION and DEMO_AUTHORING_GUIDE. - scripts/component-audit.ts + `npm run component:audit` — regex parser over all 67 components, emits tmp/component-audit.md with summary scoreboard + per-component findings. Validates against canonical SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS. - Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip, date-range-picker). Top systemic gaps: translations.label (49), README Gaps/Comparativa/Baseline sections (87 combined), keyboard /event ratio under-declaration (15), apg URL absent (19). Misc: - src/uix/kimi-audit-eidos.md — supplementary audit notes. - .gitignore: ignore .codex-* agent scratch artifacts at repo root. - continue.md + READMEs updated through the migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
[data-popover-content]:has([data-date-picker-calendar]) {
--_popover-content-width-override: max-content;
--_popover-content-min-width-override: max-content;
--_popover-content-max-width-override: calc(100vw - var(--space-4));
}
[data-date-picker-calendar][data-calendar] {
padding: 0;
border-color: transparent;
background: transparent;
box-shadow: none;
}
[data-date-picker-calendar][data-calendar][data-invalid] {
border-color: transparent;
}
pickers: promote Footer/Clear/Cancel/Close to canonical Eidos parts The footer affordances (Clear / Cancel / Close) lived inline in each demo as picker-actions.svelte. Promoted to canonical Eidos surface so the API is consistent and the contract is auditable. morfo: - date-picker + date-range-picker: added Footer (archetype 'footer'), Clear/Cancel/Close (archetype 'trigger', kind 'public', optional). Each part declares aria-label via idlangref and data-action="…". - types.ts: added 'footer' to ARCHETYPE_VOCABULARY array + the MorfoArchetype union (the type had it, the runtime list did not). - lang catalogs: added clear / cancel / close idlangref entries to date-picker.ts and date-range-picker.ts. eidos: - Created date-picker-footer/clear/cancel/close.svelte and the range mirrors. Each part: - Pulls the provider from context via DatePickerProvider.require() (analogous DateRangePickerProvider.require() for the range). - Renders nothing when the corresponding *Button opt is false; the Close part stays visible whenever mode === 'modal' (modal pickers need a way out — outside-click and Escape are blocked). - Emits data-{component}-{part} + data-action so the recipe selector matches the morfo declaration. - aria-label resolves via uix.langs.ts('#?components.X.{action}|…'). - onclick calls provider.clear() / cancel() / commit() then forwards any consumer-supplied onclick. - index.ts barrels: registered Footer/Clear/Cancel + replaced Close (was popover-close.svelte) with the new picker-aware Close. Soma popover-close still drives the old aria; date-picker's Close adds the modal-conditional visibility + commit semantics. - *.css: folded the inline picker-actions styles into the recipes — data-{name}-footer flex row + data-{name}-{clear,cancel,close} buttons (clear/cancel margin-inline-end: auto so close sits flush right). prefers-reduced-motion already covered. soma: - date-picker exports.ts: surfaces DatePickerProvider + DatePickerMode + datePickerAttrs so the Eidos parts can consume them (mirrors what date-range-picker already exposed). No new behavior — just plumbing. demo: - date-picker + date-range-picker demos: replaced <PickerActions /> with <DatePicker.Footer> <DatePicker.Clear /><DatePicker.Cancel /><DatePicker.Close /> </DatePicker.Footer>. The two picker-actions.svelte files are deleted. Verification: 0 type errors, morfo:check PASS (Footer parts not required in DOM; conditional visibility honored), component:audit 67/67 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
/* ── Footer (Clear / Cancel / Close action row) ──────────────────────────── */
[data-date-picker-footer] {
display: flex;
align-items: center;
gap: var(--space-2);
padding-block-start: var(--space-3);
margin-block-start: var(--space-3);
border-block-start: var(--border-width) solid var(--color-border-subtle);
}
[data-date-picker-clear],
[data-date-picker-cancel] {
margin-inline-end: auto;
}
[data-date-picker-clear],
[data-date-picker-cancel],
[data-date-picker-close] {
inline-size: max-content;
min-block-size: var(--control-height-sm);
padding-inline: var(--space-3);
border-radius: var(--radius-md);
border: var(--border-width) solid transparent;
background: transparent;
color: var(--color-content-primary);
font: inherit;
font-size: var(--font-size-sm);
line-height: var(--leading-ui);
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default);
}
[data-date-picker-clear]:hover,
[data-date-picker-cancel]:hover {
background: var(--color-surface-overlay);
}
[data-date-picker-close] {
border-color: var(--color-primary-border);
background: var(--color-primary-solid);
color: var(--color-content-on-solid);
}
[data-date-picker-close]:hover {
background: var(--color-primary-solid-hover);
}
[data-date-picker-clear]:focus-visible,
[data-date-picker-cancel]:focus-visible,
[data-date-picker-close]:focus-visible {
outline: var(--focus-ring-width) solid var(--color-primary-border);
outline-offset: var(--focus-ring-offset);
}
uix: date-picker + date-range-picker components + component audit infra Two new Eidos components shipped end-to-end (wrapper + recipe + demo + Soma provider hardening) plus a checklist-driven audit pipeline that scores all 67 morfo components against doctrinal completion criteria. New components: - date-picker: full popover-anchored picker over date-field + calendar, with calendar/content/trigger parts and demo route. - date-range-picker: standalone wrapper with own calendar/grid/segment surface, demo route, and recipe CSS. - Both wrappers follow Option C disciplined (root + parts attached via explicit assignment, no Object.assign). Supporting Soma changes: - range-calendar provider tightened (211 LOC of behavior, 167 LOC of tests), README brought up to component doctrine. - date-field, date-picker, date-range-field, date-range-picker Soma providers + READMEs updated for new wrappers. - popover provider/close gain props needed by the picker wrappers. Morfo updates: - date-picker / date-range-picker / range-calendar morfos refined for the new APIs (parts, events, ARIA). Audit infrastructure (new): - src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across morfo / eidos wrapper / recipe CSS / demo / README / cross-layer scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION and DEMO_AUTHORING_GUIDE. - scripts/component-audit.ts + `npm run component:audit` — regex parser over all 67 components, emits tmp/component-audit.md with summary scoreboard + per-component findings. Validates against canonical SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS. - Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip, date-range-picker). Top systemic gaps: translations.label (49), README Gaps/Comparativa/Baseline sections (87 combined), keyboard /event ratio under-declaration (15), apg URL absent (19). Misc: - src/uix/kimi-audit-eidos.md — supplementary audit notes. - .gitignore: ignore .codex-* agent scratch artifacts at repo root. - continue.md + READMEs updated through the migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
@media (prefers-reduced-motion: reduce) {
[data-date-picker-trigger] {
transition: none;
}
pickers: promote Footer/Clear/Cancel/Close to canonical Eidos parts The footer affordances (Clear / Cancel / Close) lived inline in each demo as picker-actions.svelte. Promoted to canonical Eidos surface so the API is consistent and the contract is auditable. morfo: - date-picker + date-range-picker: added Footer (archetype 'footer'), Clear/Cancel/Close (archetype 'trigger', kind 'public', optional). Each part declares aria-label via idlangref and data-action="…". - types.ts: added 'footer' to ARCHETYPE_VOCABULARY array + the MorfoArchetype union (the type had it, the runtime list did not). - lang catalogs: added clear / cancel / close idlangref entries to date-picker.ts and date-range-picker.ts. eidos: - Created date-picker-footer/clear/cancel/close.svelte and the range mirrors. Each part: - Pulls the provider from context via DatePickerProvider.require() (analogous DateRangePickerProvider.require() for the range). - Renders nothing when the corresponding *Button opt is false; the Close part stays visible whenever mode === 'modal' (modal pickers need a way out — outside-click and Escape are blocked). - Emits data-{component}-{part} + data-action so the recipe selector matches the morfo declaration. - aria-label resolves via uix.langs.ts('#?components.X.{action}|…'). - onclick calls provider.clear() / cancel() / commit() then forwards any consumer-supplied onclick. - index.ts barrels: registered Footer/Clear/Cancel + replaced Close (was popover-close.svelte) with the new picker-aware Close. Soma popover-close still drives the old aria; date-picker's Close adds the modal-conditional visibility + commit semantics. - *.css: folded the inline picker-actions styles into the recipes — data-{name}-footer flex row + data-{name}-{clear,cancel,close} buttons (clear/cancel margin-inline-end: auto so close sits flush right). prefers-reduced-motion already covered. soma: - date-picker exports.ts: surfaces DatePickerProvider + DatePickerMode + datePickerAttrs so the Eidos parts can consume them (mirrors what date-range-picker already exposed). No new behavior — just plumbing. demo: - date-picker + date-range-picker demos: replaced <PickerActions /> with <DatePicker.Footer> <DatePicker.Clear /><DatePicker.Cancel /><DatePicker.Close /> </DatePicker.Footer>. The two picker-actions.svelte files are deleted. Verification: 0 type errors, morfo:check PASS (Footer parts not required in DOM; conditional visibility honored), component:audit 67/67 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
[data-date-picker-clear],
[data-date-picker-cancel],
[data-date-picker-close] {
transition: none;
}
uix: date-picker + date-range-picker components + component audit infra Two new Eidos components shipped end-to-end (wrapper + recipe + demo + Soma provider hardening) plus a checklist-driven audit pipeline that scores all 67 morfo components against doctrinal completion criteria. New components: - date-picker: full popover-anchored picker over date-field + calendar, with calendar/content/trigger parts and demo route. - date-range-picker: standalone wrapper with own calendar/grid/segment surface, demo route, and recipe CSS. - Both wrappers follow Option C disciplined (root + parts attached via explicit assignment, no Object.assign). Supporting Soma changes: - range-calendar provider tightened (211 LOC of behavior, 167 LOC of tests), README brought up to component doctrine. - date-field, date-picker, date-range-field, date-range-picker Soma providers + READMEs updated for new wrappers. - popover provider/close gain props needed by the picker wrappers. Morfo updates: - date-picker / date-range-picker / range-calendar morfos refined for the new APIs (parts, events, ARIA). Audit infrastructure (new): - src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across morfo / eidos wrapper / recipe CSS / demo / README / cross-layer scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION and DEMO_AUTHORING_GUIDE. - scripts/component-audit.ts + `npm run component:audit` — regex parser over all 67 components, emits tmp/component-audit.md with summary scoreboard + per-component findings. Validates against canonical SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS. - Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip, date-range-picker). Top systemic gaps: translations.label (49), README Gaps/Comparativa/Baseline sections (87 combined), keyboard /event ratio under-declaration (15), apg URL absent (19). Misc: - src/uix/kimi-audit-eidos.md — supplementary audit notes. - .gitignore: ignore .codex-* agent scratch artifacts at repo root. - continue.md + READMEs updated through the migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
}

Powered by TurnKey Linux.