Promote PickerShell from action-row-only to a canonical 4-zone shell (Root → Header / Body / Footer) shared by every composite picker so date/time/color popovers get the same visual contract for free. - Add `<PickerShell.Root>` flex-column wrapper (emits data-picker-shell, data-mode) plus `<PickerShell.Header>` and `<PickerShell.Body>` zones matching the existing Footer's spacing + border tokens. - Auto-wrap all 5 *-content.svelte popovers (date / date-range / time / time-range / color) in `<PickerShell.Root>` so consumers only compose Body + Footer. - Refresh all 5 demos to use `<PickerShell.Body>` around picker content; date-picker demo gains a `showShellHeader` toggle showcasing the new Header zone. - CSS scales section gap + header spacing across xs/sm/md/lg picker sizes via [data-popover-content][data-picker-size] scopes, in sync with the existing Footer scale. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
da10548a68
commit
afb09c2254
@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { PickerShellBodyProps } from './types';
|
||||||
|
|
||||||
|
// Body zone — the scrollable middle area that contains the
|
||||||
|
// picker-specific content (calendar / clock / color area + sliders).
|
||||||
|
// Pure layout, no behaviour.
|
||||||
|
let { children, ...rest }: PickerShellBodyProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div data-picker-body {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { PickerShellHeaderProps } from './types';
|
||||||
|
|
||||||
|
// Header zone — optional top strip inside a picker popover. Mirrors
|
||||||
|
// the Footer's bottom border by emitting a bottom-border + spacing
|
||||||
|
// block via [data-picker-header] CSS. Pure layout, no behaviour.
|
||||||
|
let { children, ...rest }: PickerShellHeaderProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div data-picker-header {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getPickerShellHandle } from '$soma/components/picker-shell';
|
||||||
|
import type { PickerShellProps } from './types';
|
||||||
|
|
||||||
|
// PickerShell root — outer flex column wrapping the canonical
|
||||||
|
// Header / Body / Footer zones for every composite picker. Pure
|
||||||
|
// composition; reads `mode` off `pickerShellContext` when available so
|
||||||
|
// the CSS can react to inline vs modal.
|
||||||
|
let { children, ...rest }: PickerShellProps = $props();
|
||||||
|
|
||||||
|
const shell = getPickerShellHandle();
|
||||||
|
const mode = $derived(shell?.getMode() ?? 'inline');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div data-picker-shell data-mode={mode} {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</div>
|
||||||
Loading…
Reference in new issue