@atmo-dev/kit 0.9.0 → 0.10.0

package/dist/events.js

@@ -10,8 +10,9 @@ export { default as StarterPackButton } from './events/StarterPackButton.svelte'
 export { default as VodPlayer } from './events/VodPlayer.svelte';
 export { default as VodTranscript } from './events/VodTranscript.svelte';
 export { default as ConferenceTimetable } from './events/schedule/ConferenceTimetable.svelte';
-export { default as DatePicker } from './events/DatePicker.svelte';
-export { default as TimePicker } from './events/TimePicker.svelte';
-export { default as DateTimePicker } from './events/DateTimePicker.svelte';
-export { default as TimezonePicker } from './events/TimezonePicker.svelte';
-export { default as ImageDropper } from './events/ImageDropper.svelte';
+// Compatibility aliases; general-purpose controls are owned by the main Kit entry.
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';

package/dist/index.d.ts

@@ -5,6 +5,11 @@ export { default as Input } from './components/Input.svelte';
 export type { InputProps } from './components/Input.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';
 export { default as SocialClientPicker } from './components/SocialClientPicker.svelte';
 export type { SocialClientPickerProps } from './components/SocialClientPicker.svelte';
 export * from './social.js';

package/dist/index.js

@@ -3,6 +3,11 @@ export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';
 export { default as SocialClientPicker } from './components/SocialClientPicker.svelte';
 export * from './social.js';
 export { default as Checkbox } from './components/Checkbox.svelte';

package/dist/social/mention-suggestions.js

@@ -31,7 +31,7 @@ export function mentionSuggestions(search, host) {
             empty.role = 'option';
             empty.setAttribute('aria-disabled', 'true');
             empty.setAttribute('aria-selected', 'false');
-            empty.className = 'p-3 text-xs text-muted';
+            empty.className = 'p-3 text-xs text-base-600 dark:text-base-400';
             empty.textContent = 'No accounts found';
             menu.append(empty);
         }
@@ -42,12 +42,12 @@ export function mentionSuggestions(search, host) {
             option.id = `${menu.id}-${index}`;
             option.setAttribute('aria-selected', String(index === selected));
             option.className =
-                'block w-full rounded-ui px-3 py-2 text-left text-xs text-ink hover:bg-recess aria-selected:bg-recess';
+                'block w-full rounded-ui px-3 py-2 text-left text-xs text-base-950 dark:text-base-50 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:hover:bg-base-950 aria-selected:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:aria-selected:bg-base-950';
             const name = document.createElement('strong');
             name.className = 'block truncate font-medium';
             name.textContent = actor.displayName || actor.handle;
             const handle = document.createElement('span');
-            handle.className = 'block truncate text-muted';
+            handle.className = 'block truncate text-base-600 dark:text-base-400';
             handle.textContent = `@${actor.handle}`;
             option.append(name, handle);
             option.onmousedown = (event) => event.preventDefault();
@@ -84,7 +84,7 @@ export function mentionSuggestions(search, host) {
                 menu.role = 'listbox';
                 menu.setAttribute('aria-label', 'Mention suggestions');
                 menu.className =
-                    'absolute z-60 w-70 max-w-full overflow-hidden rounded-ui border border-line bg-page p-1 font-sans text-ink';
+                    'absolute z-60 w-70 max-w-full overflow-hidden rounded-ui border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] bg-base-50 dark:bg-base-925 p-1 font-sans text-base-950 dark:text-base-50';
                 host().append(menu);
                 draw();
             },

package/dist/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const focus = "focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-focus";
-export declare const control = "block min-h-11 w-full min-w-0 rounded-ui border border-control-line bg-field px-3 py-2.5 text-base leading-normal text-ink shadow-(--ui-recess-shadow) placeholder:text-muted transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-control-hover focus:ring-0 focus:ring-offset-0 focus-visible:border-focus focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-focus disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-control-line aria-invalid:border-action aria-invalid:hover:border-action sm:text-sm";
+export declare const focus = "focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300";
+export declare const control = "block min-h-11 w-full min-w-0 rounded-ui border border-base-300 dark:border-base-800 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-975 px-3 py-2.5 text-base leading-normal text-base-950 dark:text-base-50 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] placeholder:text-base-600 dark:placeholder:text-base-400 transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-base-400 dark:hover:border-base-700 focus:ring-0 focus:ring-offset-0 focus-visible:border-accent-700 dark:focus-visible:border-accent-300 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300 disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-base-300 dark:disabled:hover:border-base-800 aria-invalid:border-accent-700 dark:aria-invalid:border-accent-300 aria-invalid:hover:border-accent-700 dark:aria-invalid:hover:border-accent-300 sm:text-sm";

package/dist/styles.js

@@ -1,3 +1,3 @@
 // Shared Tailwind recipes, not an additional component stylesheet.
-export const focus = 'focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-focus';
-export const control = 'block min-h-11 w-full min-w-0 rounded-ui border border-control-line bg-field px-3 py-2.5 text-base leading-normal text-ink shadow-(--ui-recess-shadow) placeholder:text-muted transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-control-hover focus:ring-0 focus:ring-offset-0 focus-visible:border-focus focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-focus disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-control-line aria-invalid:border-action aria-invalid:hover:border-action sm:text-sm';
+export const focus = 'focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300';
+export const control = 'block min-h-11 w-full min-w-0 rounded-ui border border-base-300 dark:border-base-800 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-975 px-3 py-2.5 text-base leading-normal text-base-950 dark:text-base-50 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] placeholder:text-base-600 dark:placeholder:text-base-400 transition-colors duration-(--atmo-duration) motion-reduce:transition-none hover:border-base-400 dark:hover:border-base-700 focus:ring-0 focus:ring-offset-0 focus-visible:border-accent-700 dark:focus-visible:border-accent-300 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300 disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-base-300 dark:disabled:hover:border-base-800 aria-invalid:border-accent-700 dark:aria-invalid:border-accent-300 aria-invalid:hover:border-accent-700 dark:aria-invalid:hover:border-accent-300 sm:text-sm';

package/dist/theme.css

@@ -4,6 +4,18 @@
 /* Resolve relative to this stylesheet in src/lib or the packaged dist directory. */
 @source './';
 
+/* Explicit document modes win; without one, follow the browser preference. */
+@custom-variant dark {
+	&:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *) {
+		@slot;
+	}
+	@media (prefers-color-scheme: dark) {
+		&:not(:where(.light, .light *, [data-theme='light'], [data-theme='light'] *)) {
+			@slot;
+		}
+	}
+}
+
 @theme inline {
 	--color-base-50: var(--base-50);
 	--color-base-100: var(--base-100);
@@ -15,7 +27,9 @@
 	--color-base-700: var(--base-700);
 	--color-base-800: var(--base-800);
 	--color-base-900: var(--base-900);
+	--color-base-925: var(--base-925);
 	--color-base-950: var(--base-950);
+	--color-base-975: var(--base-975);
 	--color-accent-50: var(--accent-50);
 	--color-accent-100: var(--accent-100);
 	--color-accent-200: var(--accent-200);
@@ -26,19 +40,9 @@
 	--color-accent-700: var(--accent-700);
 	--color-accent-800: var(--accent-800);
 	--color-accent-900: var(--accent-900);
+	--color-accent-925: var(--accent-925);
 	--color-accent-950: var(--accent-950);
-	--color-page: var(--ui-page);
-	--color-recess: var(--ui-recess);
-	--color-surface: var(--ui-surface);
-	--color-ink: var(--ui-ink);
-	--color-muted: var(--ui-muted);
-	--color-line: var(--ui-line);
-	--color-control-line: var(--ui-control-line);
-	--color-control-hover: var(--ui-control-hover);
-	--color-field: var(--ui-field);
-	--color-action: var(--ui-action);
-	--color-accent-soft: var(--ui-accent-soft);
-	--color-focus: var(--ui-focus);
+	--color-accent-975: var(--accent-975);
 	--font-sans: var(--atmo-font-sans);
 	--radius-ui: var(--atmo-radius-control);
 	--radius-panel: var(--atmo-radius-panel);
@@ -82,9 +86,8 @@
 		color-scheme: light;
 	}
 
-	/* Recompute semantic tokens at palette boundaries, not only at :root.
-	   A red button inside a blue section must resolve its own complete palette.
-	   Add atmo-theme to a custom-ramp boundary to get the same behavior. */
+	/* Derive the extra shades at palette boundaries, including custom ramps
+	   marked with atmo-theme. Ratios preserve the existing page/field colors. */
 	:where(
 		:root,
 		.atmo,
@@ -118,38 +121,14 @@
 		.pink,
 		.rose
 	) {
-		--ui-page: light-dark(var(--base-50), color-mix(in srgb, var(--base-900) 50%, var(--base-950)));
-		--ui-recess: light-dark(
-			color-mix(in srgb, var(--base-100) 75%, var(--base-200)),
-			var(--base-950)
-		);
-		--ui-surface: light-dark(var(--base-50), var(--base-900));
-		--ui-ink: light-dark(var(--base-950), var(--base-50));
-		--ui-muted: light-dark(var(--base-600), var(--base-400));
-		--ui-line: light-dark(
-			var(--base-300),
-			color-mix(in srgb, var(--base-800) 80%, var(--base-950))
-		);
-		--ui-field: light-dark(
-			color-mix(in srgb, var(--base-100) 75%, var(--base-200)),
-			color-mix(in srgb, var(--base-950) 80%, black)
-		);
-		--ui-control-line: light-dark(var(--base-300), var(--base-800));
-		--ui-control-hover: light-dark(var(--base-400), var(--base-700));
-		--ui-action: light-dark(var(--accent-700), var(--accent-300));
-		--ui-accent-soft: light-dark(
-			var(--accent-50),
-			color-mix(in srgb, var(--accent-950) 65%, var(--base-950))
-		);
-		--ui-focus: light-dark(var(--accent-700), var(--accent-300));
-		--ui-shadow: light-dark(color-mix(in srgb, var(--base-950) 8%, transparent), #0006);
-		--ui-shadow-soft: light-dark(color-mix(in srgb, var(--base-950) 2%, transparent), #0002);
-		--ui-recess-shadow: inset 0 2px 4px var(--ui-shadow), inset 0 5px 12px var(--ui-shadow-soft);
+		--base-925: color-mix(in srgb, var(--base-900) 50%, var(--base-950));
+		--base-975: color-mix(in srgb, var(--base-950) 80%, black);
+		--accent-925: color-mix(in srgb, var(--accent-900) 50%, var(--accent-950));
+		--accent-975: color-mix(in srgb, var(--accent-950) 80%, black);
 	}
 	.atmo {
 		font-family: var(--atmo-font-sans);
-		color: var(--ui-ink);
-		background: var(--ui-page);
+		@apply bg-base-50 text-base-950 dark:bg-base-925 dark:text-base-50;
 		-webkit-font-smoothing: antialiased;
 	}
 	.gray {

package/dist/theme.js

@@ -1,10 +1,9 @@
-// Portals leave their original DOM ancestry. Carry the originating palette,
-// semantic tokens, font, and color scheme with them; behavior stays in Bits UI.
+// Portals inherit the document's light/dark mode normally. Only carry scoped
+// palettes and typography, which would otherwise be lost outside their ancestry.
 export function readTheme(element) {
     const style = getComputedStyle(element);
-    const variables = Array.from(style).filter((name) => ['--base-', '--accent-', '--ui-', '--atmo-'].some((prefix) => name.startsWith(prefix)));
+    const variables = Array.from(style).filter((name) => ['--base-', '--accent-', '--atmo-'].some((prefix) => name.startsWith(prefix)));
     return [
-        `color-scheme:${style.colorScheme}`,
         `font-family:${style.fontFamily}`,
         ...variables.map((name) => `${name}:${style.getPropertyValue(name)}`)
     ].join(';');
@@ -19,12 +18,5 @@ export function observeTheme(element, update) {
         });
         parent = parent.parentElement;
     }
-    // readTheme snapshots computed semantic colors for portals. Those colors
-    // change with the system scheme even when no ancestor attribute changes.
-    const scheme = window.matchMedia('(prefers-color-scheme: dark)');
-    scheme.addEventListener('change', update);
-    return () => {
-        observer.disconnect();
-        scheme.removeEventListener('change', update);
-    };
+    return () => observer.disconnect();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmo-dev/kit",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "The shared UI foundation for Atmo apps.",
   "license": "MIT",
   "repository": {