@dryui/ui 0.1.6 → 0.1.8

package/dist/backdrop/backdrop.svelte

@@ -33,7 +33,7 @@
 		inset: 0;
 		z-index: var(--dry-layer-overlay);
 		display: grid;
-		place-items: center;
+		align-items: center;
 		padding: var(--dry-backdrop-padding);
 		background: var(--dry-backdrop-bg);
 		backdrop-filter: blur(var(--dry-backdrop-blur));

package/dist/button/button.svelte

@@ -115,6 +115,7 @@
 
 		display: inline-grid;
 		grid-auto-flow: column;
+		justify-content: center;
 		place-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-btn-padding-y) var(--dry-btn-padding-x);

package/dist/date-field/date-field-root.svelte

@@ -188,7 +188,6 @@
 
 <style>
 	[data-df-wrapper] {
-		container-type: inline-size;
 		display: grid;
 	}
 

package/dist/date-field/date-field-segment.svelte

@@ -142,7 +142,7 @@
 			color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-df-segment]:focus-visible {
+	[data-df-segment]:focus {
 		outline: 2px solid var(--dry-color-stroke-focus);
 		outline-offset: -1px;
 		background: var(--dry-color-fill-brand-weak);

package/dist/date-picker/datepicker-calendar.svelte

@@ -160,7 +160,6 @@
 <style>
 	[data-dp-calendar] {
 		--dry-calendar-grid-gap: 1px;
-		container-type: inline-size;
 		display: grid;
 		gap: var(--dry-space-2);
 		user-select: none;

package/dist/date-range-picker/date-range-picker-calendar.svelte

@@ -176,7 +176,13 @@
 						{@const inRange = isInSelectedRange(day) || isInPreviewRange(day)}
 						{@const rangeStart = isRangeStart(day)}
 						{@const rangeEnd = isRangeEnd(day)}
-						<div role="gridcell" data-calendar-cell>
+						<div
+							role="gridcell"
+							data-calendar-cell
+							data-in-range={inRange ? '' : undefined}
+							data-range-start={rangeStart ? '' : undefined}
+							data-range-end={rangeEnd ? '' : undefined}
+						>
 							<button
 								type="button"
 								tabindex={focused ? 0 : -1}
@@ -279,7 +285,6 @@
 	[data-drp-calendar] [data-calendar-row] {
 		display: grid;
 		grid-template-columns: repeat(7, minmax(0, 1fr));
-		gap: 1px;
 	}
 
 	[data-drp-calendar] [data-calendar-columnheader] {
@@ -297,6 +302,29 @@
 		place-items: center;
 	}
 
+	/* ── Cell-level range band (seamless, fills entire grid track) ── */
+
+	[data-drp-calendar] [data-calendar-cell][data-in-range],
+	[data-drp-calendar] [data-calendar-cell][data-range-start],
+	[data-drp-calendar] [data-calendar-cell][data-range-end] {
+		background: var(
+			--dry-range-calendar-range-bg,
+			color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent)
+		);
+	}
+
+	[data-drp-calendar] [data-calendar-cell][data-range-start] {
+		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md)) 0 0
+			var(--dry-range-calendar-day-radius, var(--dry-radius-md));
+	}
+
+	[data-drp-calendar] [data-calendar-cell][data-range-end] {
+		border-radius: 0 var(--dry-range-calendar-day-radius, var(--dry-radius-md))
+			var(--dry-range-calendar-day-radius, var(--dry-radius-md)) 0;
+	}
+
+	/* ── Day button base ── */
+
 	[data-drp-calendar] [data-calendar-day-button] {
 		display: inline-grid;
 		place-items: center;
@@ -330,39 +358,29 @@
 		font-weight: 600;
 	}
 
-	[data-drp-calendar] [data-calendar-day-button][data-range-start],
-	[data-drp-calendar] [data-calendar-day-button][data-range-end] {
-		background: var(--dry-range-calendar-selected-bg, var(--dry-color-fill-brand));
-		color: var(--dry-range-calendar-selected-color, var(--dry-color-on-brand));
-		font-weight: 600;
+	[data-drp-calendar] [data-calendar-day-button][data-outside-month] {
+		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
+		opacity: 0.6;
 	}
 
-	[data-drp-calendar] [data-calendar-day-button][data-range-start]:hover:not([data-disabled]),
-	[data-drp-calendar] [data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
-		background: var(--dry-range-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
+	[data-drp-calendar] [data-calendar-day-button][data-disabled] {
+		cursor: not-allowed;
+		opacity: 0.4;
+		pointer-events: none;
 	}
 
-	[data-drp-calendar] [data-calendar-day-button][data-in-range] {
-		background: var(
-			--dry-range-calendar-range-bg,
-			color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent)
-		);
-		border-radius: 0;
-	}
+	/* ── Range endpoints (last to win specificity over in-range/outside) ── */
 
 	[data-drp-calendar] [data-calendar-day-button][data-range-start],
 	[data-drp-calendar] [data-calendar-day-button][data-range-end] {
+		background: var(--dry-range-calendar-selected-bg, var(--dry-color-fill-brand));
+		color: var(--dry-range-calendar-selected-color, var(--dry-color-on-brand));
+		font-weight: 600;
 		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
 	}
 
-	[data-drp-calendar] [data-calendar-day-button][data-outside-month] {
-		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
-		opacity: 0.6;
-	}
-
-	[data-drp-calendar] [data-calendar-day-button][data-disabled] {
-		cursor: not-allowed;
-		opacity: 0.4;
-		pointer-events: none;
+	[data-drp-calendar] [data-calendar-day-button][data-range-start]:hover:not([data-disabled]),
+	[data-drp-calendar] [data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
+		background: var(--dry-range-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
 	}
 </style>

package/dist/date-time-input/date-time-input.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { DateField } from '../date-field/index.js';
+	import { DatePicker } from '../date-picker/index.js';
 	import { TimeInput } from '../time-input/index.js';
 
-	type DateSegmentType = 'month' | 'day' | 'year';
-
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: Date;
 		min?: Date;
@@ -27,28 +25,12 @@
 		...rest
 	}: Props = $props();
 
-	function getSegmentOrder(loc: string): DateSegmentType[] {
-		const formatter = new Intl.DateTimeFormat(loc, {
-			year: 'numeric',
-			month: '2-digit',
-			day: '2-digit'
-		});
-		const parts = formatter.formatToParts(new Date(2000, 0, 1));
-		const order: DateSegmentType[] = [];
-		for (const part of parts) {
-			if (part.type === 'month') order.push('month');
-			else if (part.type === 'day') order.push('day');
-			else if (part.type === 'year') order.push('year');
-		}
-		return order.length === 3 ? order : ['month', 'day', 'year'];
+	function toTimeString(d: Date): string {
+		return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
 	}
 
-	const segmentOrder = $derived(getSegmentOrder(locale));
-
 	let dateValue = $state<Date | null>(value);
-	let timeValue = $state(
-		String(value.getHours()).padStart(2, '0') + ':' + String(value.getMinutes()).padStart(2, '0')
-	);
+	let timeValue = $state(toTimeString(value));
 
 	let updating = false;
 
@@ -57,8 +39,7 @@
 		const v = value;
 		if (v) {
 			dateValue = new Date(v.getFullYear(), v.getMonth(), v.getDate());
-			timeValue =
-				String(v.getHours()).padStart(2, '0') + ':' + String(v.getMinutes()).padStart(2, '0');
+			timeValue = toTimeString(v);
 		}
 	});
 
@@ -93,18 +74,16 @@
 
 <div data-date-time-input class={className} {...rest}>
 	<div data-part="date-section">
-		<DateField.Root bind:value={dateValue} {locale} {disabled} {size}>
-			{#each segmentOrder as segmentType, i}
-				{#if i > 0}
-					<DateField.Separator />
-				{/if}
-				<DateField.Segment type={segmentType} />
-			{/each}
-		</DateField.Root>
+		<DatePicker.Root bind:value={dateValue} {locale} {disabled} min={min ?? null} max={max ?? null}>
+			<DatePicker.Trigger {size} />
+			<DatePicker.Content>
+				<DatePicker.Calendar />
+			</DatePicker.Content>
+		</DatePicker.Root>
 	</div>
 
 	<div data-part="time-section">
-		<TimeInput bind:value={timeValue} {disabled} />
+		<TimeInput bind:value={timeValue} {disabled} {size} />
 	</div>
 
 	{#if name}

package/dist/notification-center/notification-center-group.svelte

@@ -22,9 +22,9 @@
 		padding: var(--dry-space-2, 0.5rem) var(--dry-nc-item-padding, 0.75rem);
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		font-weight: 600;
-		color: var(--dry-color-text-weak, #64748b);
+		color: var(--dry-color-text-weak);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		background: var(--dry-color-fill, #f8fafc);
+		background: var(--dry-color-fill);
 	}
 </style>

package/dist/notification-center/notification-center-item.svelte

@@ -43,6 +43,7 @@
 <style>
 	[data-notification-center-item] {
 		padding: var(--dry-nc-item-padding, 0.75rem);
+		color: var(--dry-color-text-strong);
 		border-bottom: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
 		transition: background var(--dry-duration-fast, 100ms) ease;
 	}
@@ -52,7 +53,7 @@
 	}
 
 	[data-notification-center-item][data-state='unread'] {
-		background: var(--dry-nc-unread-bg, #eff6ff);
+		background: var(--dry-nc-unread-bg);
 	}
 
 	[data-notification-center-item][data-variant='warning'] {

package/dist/notification-center/notification-center-panel.svelte

@@ -53,6 +53,19 @@
 			} catch {
 				// Already shown
 			}
+
+			// Nudge panel into viewport if anchor positioning overflows
+			requestAnimationFrame(() => {
+				if (!panelEl) return;
+				panelEl.style.translate = '';
+				const rect = panelEl.getBoundingClientRect();
+				const pad = 8;
+				if (rect.left < pad) {
+					panelEl.style.translate = `${pad - rect.left}px 0`;
+				} else if (rect.right > window.innerWidth - pad) {
+					panelEl.style.translate = `${window.innerWidth - pad - rect.right}px 0`;
+				}
+			});
 		} else {
 			try {
 				if (panelEl.matches(':popover-open')) {
@@ -61,6 +74,7 @@
 			} catch {
 				// Already hidden
 			}
+			if (panelEl) panelEl.style.translate = '';
 		}
 	});
 </script>
@@ -94,11 +108,16 @@
 		inset: unset;
 		margin: 0;
 
+		&:not(:popover-open) {
+			display: none;
+		}
+
 		display: grid;
-		grid-template-columns: var(--dry-nc-panel-width, 24rem);
+		grid-template-columns: min(var(--dry-nc-panel-width, 24rem), calc(100dvw - var(--dry-space-4, 1rem) * 2));
 		max-height: 28rem;
 		overflow-y: auto;
-		background: var(--dry-color-bg-raised, #ffffff);
+		background: var(--dry-color-bg-overlay, #f1f3f5);
+		color: var(--dry-color-text-strong);
 		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
 		border-radius: var(--dry-radius-lg, 0.5rem);
 		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));

package/dist/notification-center/notification-center-root.svelte

@@ -66,7 +66,7 @@
 	[data-notification-center-root] {
 		--dry-nc-panel-width: 24rem;
 		--dry-nc-item-padding: var(--dry-space-3, 0.75rem);
-		--dry-nc-unread-bg: var(--dry-color-fill-brand-weak);
+		--dry-nc-unread-bg: color-mix(in srgb, var(--dry-color-fill-brand) 12%, transparent);
 
 		position: relative;
 		display: inline-grid;

package/dist/notification-center/notification-center-trigger.svelte

@@ -19,20 +19,17 @@
 		}
 	});
 
-	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		ctx.toggle();
-		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
-	}
 </script>
 
 <button
 	bind:this={el}
 	id={ctx.triggerId}
+	popovertarget={ctx.panelId}
 	aria-expanded={ctx.open}
 	aria-haspopup="dialog"
 	data-notification-center-trigger
 	class={className}
-	onclick={handleClick}
+	{onclick}
 	{...rest}
 >
 	{@render children({ unreadCount: ctx.unreadCount })}
@@ -53,6 +50,7 @@
 		color: var(--dry-color-text-strong);
 		box-shadow: var(--dry-shadow-sm);
 		font: inherit;
+		cursor: pointer;
 	}
 
 	[data-notification-center-trigger]:focus-visible {

package/dist/select/select-root.svelte

@@ -68,7 +68,6 @@
 
 <style>
 	[data-select-wrapper] {
-		container-type: inline-size;
 		display: grid;
 	}
 </style>

package/dist/select/select-trigger.svelte

@@ -99,6 +99,7 @@
 		grid-template-columns: 1fr 1.5rem;
 		align-items: center;
 		gap: var(--dry-space-2);
+		min-height: var(--dry-space-12);
 		padding: var(--dry-select-padding-y) var(--dry-select-padding-x);
 		font-size: var(--dry-select-font-size);
 		line-height: var(--dry-type-small-leading);
@@ -171,6 +172,7 @@
 		--dry-select-padding-x: var(--dry-space-2);
 		--dry-select-padding-y: var(--dry-space-1);
 		--dry-select-font-size: var(--dry-type-tiny-size);
+		min-height: var(--dry-space-8);
 		line-height: var(--dry-type-tiny-leading);
 	}
 

package/dist/time-input/index.d.ts

@@ -1,2 +1,9 @@
-export type { TimeInputProps } from '@dryui/primitives';
+export interface TimeInputProps {
+	value?: string;
+	disabled?: boolean;
+	step?: number;
+	size?: 'sm' | 'md' | 'lg';
+	name?: string;
+	class?: string;
+}
 export { default as TimeInput } from './time-input.svelte';

package/dist/time-input/time-input.svelte

@@ -1,97 +1,141 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getFormControlCtx } from '@dryui/primitives';
-	import type { TimeInputProps } from './index.js';
+	import { Select } from '../select/index.js';
+
+	interface Props {
+		value?: string;
+		disabled?: boolean;
+		step?: number;
+		size?: 'sm' | 'md' | 'lg';
+		name?: string;
+		class?: string;
+	}
 
 	let {
 		value = $bindable(''),
 		disabled = false,
 		step,
-		class: className,
-		...rest
-	}: TimeInputProps = $props();
+		size = 'md',
+		name,
+		class: className
+	}: Props = $props();
 
 	const ctx = getFormControlCtx();
 	const isDisabled = $derived(disabled || ctx?.disabled || false);
-</script>
 
-<span data-time-input-wrapper>
-	<input
-		type="time"
-		bind:value
-		{step}
-		id={ctx?.id}
-		disabled={isDisabled}
-		required={ctx?.required || undefined}
-		aria-describedby={ctx?.describedBy}
-		aria-invalid={ctx?.hasError || undefined}
-		aria-errormessage={ctx?.errorMessageId}
-		data-time-input
-		data-disabled={isDisabled || undefined}
-		class={className}
-		{...rest}
-	/>
-</span>
+	let hourStr = $state('');
+	let minuteStr = $state('');
+	let updating = false;
 
-<style>
-	[data-time-input-wrapper] {
-		container-type: inline-size;
-		display: grid;
-	}
+	// Parse incoming value into hour/minute (only reacts to value changes)
+	$effect(() => {
+		if (updating) return;
+		const parts = value.split(':');
+		const h = parts[0] ?? '';
+		const m = parts[1] ?? '';
+		untrack(() => {
+			if (h !== hourStr) hourStr = h;
+			if (m !== minuteStr) minuteStr = m;
+		});
+	});
 
-	[data-time-input] {
-		--dry-time-input-bg: var(--dry-color-bg-raised);
-		--dry-time-input-border: var(--dry-color-stroke-strong);
-		--dry-time-input-color: var(--dry-color-text-strong);
-		--dry-time-input-radius: var(--dry-radius-md);
-		--dry-time-input-padding-x: var(--dry-space-3);
-		--dry-time-input-padding-y: var(--dry-space-2);
-		--dry-time-input-font-size: var(--dry-type-small-size);
-
-		padding: var(--dry-time-input-padding-y) var(--dry-time-input-padding-x);
-		border: 1px solid var(--dry-time-input-border);
-		border-radius: var(--dry-time-input-radius);
-		background: var(--dry-time-input-bg);
-		color: var(--dry-time-input-color);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-time-input-font-size);
-		line-height: var(--dry-type-small-leading);
-		box-sizing: border-box;
-		appearance: none;
-		transition:
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
-
-		&::-webkit-calendar-picker-indicator {
-			opacity: 0.7;
-			cursor: pointer;
-			filter: none;
+	// Reconstruct value when selects change (only reacts to hourStr/minuteStr)
+	$effect(() => {
+		const h = hourStr;
+		const m = minuteStr;
+		if (h && m) {
+			const newVal = `${h}:${m}`;
+			untrack(() => {
+				if (newVal !== value) {
+					updating = true;
+					value = newVal;
+					updating = false;
+				}
+			});
 		}
+	});
 
-		&:hover:not([data-disabled]) {
-			border-color: var(--dry-color-stroke-strong);
-		}
+	// Generate hour options 00-23
+	const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
 
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: -1px;
-			border-color: var(--dry-color-focus-ring);
-		}
+	// Generate minute options based on step
+	const minutes = $derived.by(() => {
+		const stepMinutes = step && step >= 60 ? Math.floor(step / 60) : 1;
+		const count = Math.floor(60 / stepMinutes);
+		return Array.from({ length: count }, (_, i) =>
+			String(i * stepMinutes).padStart(2, '0')
+		);
+	});
+</script>
 
-		&[data-disabled] {
-			opacity: 0.55;
-			cursor: not-allowed;
-		}
+<div
+	role="group"
+	aria-label="Time"
+	data-time-input-wrapper
+	data-disabled={isDisabled || undefined}
+	id={ctx?.id}
+	aria-describedby={ctx?.describedBy}
+	aria-invalid={ctx?.hasError || undefined}
+	aria-errormessage={ctx?.errorMessageId}
+	class={className}
+>
+	<Select.Root bind:value={hourStr} disabled={isDisabled}>
+		<Select.Trigger {size} aria-label="Hour">
+			<span data-time-display data-placeholder={!hourStr ? '' : undefined}>
+				{hourStr || 'HH'}
+			</span>
+		</Select.Trigger>
+		<Select.Content>
+			{#each hours as h (h)}
+				<Select.Item value={h}>{h}</Select.Item>
+			{/each}
+		</Select.Content>
+	</Select.Root>
+
+	<span data-time-separator>:</span>
+
+	<Select.Root bind:value={minuteStr} disabled={isDisabled}>
+		<Select.Trigger {size} aria-label="Minute">
+			<span data-time-display data-placeholder={!minuteStr ? '' : undefined}>
+				{minuteStr || 'MM'}
+			</span>
+		</Select.Trigger>
+		<Select.Content>
+			{#each minutes as m (m)}
+				<Select.Item value={m}>{m}</Select.Item>
+			{/each}
+		</Select.Content>
+	</Select.Root>
+
+	{#if name}
+		<input type="hidden" {name} {value} disabled={isDisabled || undefined} />
+	{/if}
+</div>
+
+<style>
+	[data-time-input-wrapper] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-1);
 	}
 
-	[data-time-input]::-webkit-datetime-edit-hour-field,
-	[data-time-input]::-webkit-datetime-edit-minute-field,
-	[data-time-input]::-webkit-datetime-edit-ampm-field {
-		padding: 0;
+	[data-time-display][data-placeholder] {
+		color: var(--dry-color-text-weak);
 	}
 
-	@container (max-width: 200px) {
-		[data-time-input] {
-			--dry-time-input-padding-x: var(--dry-space-2);
-		}
+	[data-time-separator] {
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size);
+		color: var(--dry-color-text-strong);
+		font-weight: 600;
+		line-height: 1;
+	}
+
+	[data-time-input-wrapper][data-disabled] {
+		opacity: 0.55;
+		pointer-events: none;
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -1502,7 +1502,7 @@
     "thumbnail:create": "bun scripts/create-thumbnail.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^0.1.5"
+    "@dryui/primitives": "^0.1.7"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"