time input: implement compact mode

src/lib/TimeInput.svelte

@@ -283,13 +283,16 @@
 		{#each ['hour', 'minute'] as componentKey[] as key}
 			{@const opts = components[key]}
 			<StyledRawInput
+				class={[
+					'text-center text-xl focus:placeholder:text-transparent',
+					compact ? 'h-9 w-16!' : 'h-16 w-24!'
+				]}
 				bind:value={values[key]}
 				inputmode="numeric"
 				pattern="[0-9]*"
 				placeholder={opts.placeholder ?? '00'}
 				max={opts.max}
 				min={0}
-				class="time-input"
 				validate={{ pattern: opts.pattern }}
 				use={(n) => liveValidator(n, keydownValidatorOpts)}
 				onkeydown={opts.onkeydown}
@@ -299,21 +302,28 @@
 			/>
 
 			{#if opts.divider}
-				<span class="mx-2 text-3xl">{opts.divider}</span>
+				<span class={[compact ? 'mx-1 text-2xl' : 'mx-2 text-3xl']}>{opts.divider}</span>
 			{/if}
 		{/each}
 
 		<!-- AM/PM Picker -->
-		<div class="ml-3 flex flex-col">
+		<div class={['flex', compact ? 'ml-1.5' : 'ml-3 flex-col']}>
 			{#each ['AM', 'PM'] as (typeof ampm)[] as shade, index}
 				<button
 					class={[
-						'border-sui-accent dark:border-sui-accent/50 cursor-pointer border px-3 py-1 font-medium',
+						compact ? 'px-2 py-0.5' : 'px-3 py-1',
+						'border-sui-accent dark:border-sui-accent/50 cursor-pointer border font-medium',
 						ampm === shade && [
 							'bg-sui-accent text-sui-background dark:bg-sui-accent/30 dark:text-sui-background/90',
 							'ring-sui-text z-10 ring-1 dark:ring-blue-300'
 						],
-						index === 0 ? 'rounded-t-sm' : 'rounded-b-sm'
+						index === 0
+							? compact
+								? 'rounded-l-sm'
+								: 'rounded-t-sm'
+							: compact
+								? 'rounded-r-sm'
+								: 'rounded-b-sm'
 					]}
 					onclick={() => {
 						ampm = shade;
@@ -337,21 +347,3 @@
 		</Label>
 	</div>
 </div>
-
-<style lang="postcss">
-	@reference "./styles/reference.css";
-
-	:global(.time-input) {
-		@apply h-16 w-24 text-center text-xl;
-		-moz-appearance: textfield;
-
-		&:focus::placeholder {
-			@apply text-transparent;
-		}
-
-		&::-webkit-inner-spin-button,
-		&::-webkit-outer-spin-button {
-			@apply m-0 appearance-none;
-		}
-	}
-</style>