@rimelight/ui 0.0.46 → 0.0.48

package/dist/icons-DPnFQCts.d.mts

@@ -0,0 +1,72 @@
+//#region src/icons.raw.d.ts
+declare const svg: (inner: string) => string;
+declare const ICONS: {
+  readonly alertTriangle: "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4M12 17h.01\"/>";
+  readonly alignLeft: "<line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/>";
+  readonly arrowLeft: "<path d=\"M19 12H5M12 19l-7-7 7-7\"/>";
+  readonly arrowRight: "<path d=\"M5 12h14M12 5l7 7-7 7\"/>";
+  readonly bell: "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>";
+  readonly check: "<path d=\"M20 6 9 17l-5-5\"/>";
+  readonly chevronDown: "<path d=\"m6 9 6 6 6-6\"/>";
+  readonly chevronLeft: "<path d=\"m15 18-6-6 6-6\"/>";
+  readonly chevronRight: "<path d=\"m9 18 6-6-6-6\"/>";
+  readonly chevronsUpDown: "<path d=\"m7 15 5 5 5-5M7 9l5-5 5 5\"/>";
+  readonly circleCheck: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>";
+  readonly circleX: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6M9 9l6 6\"/>";
+  readonly close: "<path d=\"M18 6 6 18M6 6l12 12\"/>";
+  readonly copy: "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>";
+  readonly download: "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"/>";
+  readonly externalLink: "<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3\"/>";
+  readonly fileQuestion: "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4M9.1 11.8a3 3 0 0 1 5.8 1c0 .9-.6 1.4-1.1 1.8-.4.3-.8.7-.8 1.4M12 19h.01\"/>";
+  readonly gripHorizontal: "<circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/>";
+  readonly gripVertical: "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>";
+  readonly hardDrive: "<rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 18h.01M10 18h.01M2 14L5 3h14l3 11\"/>";
+  readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/>";
+  readonly imageUpscale: "<path d=\"M16 3H3v13h13V3z\"/><path d=\"M21 21v-4a2 2 0 0 0-2-2h-3M21 11V9M21 5a2 2 0 0 0-2-2h-1\"/>";
+  readonly info: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/>";
+  readonly layers: "<path d=\"m12 3-10 5L12 13l10-5-10-5Z\"/><path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\"/>";
+  readonly list: "<line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\"/><line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\"/><line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\"/><line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\"/><line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\"/>";
+  readonly loaderCircle: "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>";
+  readonly moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>";
+  readonly panelLeft: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><path d=\"M9 3v18\"/>";
+  readonly play: "<polygon points=\"6 3 20 12 6 21 6 3\"/>";
+  readonly quote: "<path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Zm11 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Z\"/>";
+  readonly search: "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>";
+  readonly share: "<circle cx=\"18\" cy=\"5\" r=\"3\"/><circle cx=\"6\" cy=\"12\" r=\"3\"/><circle cx=\"18\" cy=\"19\" r=\"3\"/><path d=\"m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98\"/>";
+  readonly sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"/>";
+  readonly uploadCloud: "<path d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3\"/>";
+  readonly user: "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>";
+  readonly star: "<polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>";
+  readonly lock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>";
+  readonly eye: "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>";
+  readonly eyeOff: "<path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\"/><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\"/><path d=\"M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22\"/><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/>";
+  readonly arrowUp: "<path d=\"M12 19V5M5 12l7-7 7 7\"/>";
+  readonly arrowDown: "<path d=\"M12 5v14M19 12l-7 7-7-7\"/>";
+  readonly edit: "<path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>";
+  readonly link: "<path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/>";
+  readonly plus: "<path d=\"M5 12h14M12 5v14\"/>";
+  readonly trash: "<path d=\"M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>";
+  readonly fileText: "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"M10 9H8M16 13H8M16 17H8\"/>";
+  readonly settings: "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>";
+  readonly type: "<polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/>";
+  readonly code: "<polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/>";
+  readonly film: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M7 3v18M17 3v18M3 7h4M17 7h4M3 12h18M3 17h4M17 17h4\"/>";
+  readonly messageSquare: "<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>";
+  readonly bookOpen: "<path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>";
+  readonly panelRight: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><path d=\"M15 3v18\"/>";
+  readonly pin: "<path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/>";
+  readonly ellipsisVertical: "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/>";
+  readonly arrowUpFromLine: "<path d=\"m18 9-6-6-6 6\"/><path d=\"M12 3v14\"/><path d=\"M5 21h14\"/>";
+  readonly arrowDownToLine: "<path d=\"M12 17V3\"/><path d=\"m6 11 6 6 6-6\"/><path d=\"M5 21h14\"/>";
+};
+//#endregion
+//#region src/icons.d.ts
+declare const getSvgIcon: (k: string) => string;
+declare const DEFAULT_ICONS: Record<keyof typeof ICONS, string>;
+type RimelightIcons = Partial<Record<keyof typeof ICONS | (string & {}), string>>;
+declare const resolveIcon: (name?: string, custom?: string) => {
+  isClass: boolean;
+  content: string;
+};
+//#endregion
+export { ICONS as a, resolveIcon as i, RimelightIcons as n, svg as o, getSvgIcon as r, DEFAULT_ICONS as t };

package/dist/icons.d.mts

@@ -1,2 +1,2 @@
-import { a as ICONS, i as resolveIcon, n as RimelightIcons, o as svg, r as getSvgIcon, t as DEFAULT_ICONS } from "./icons--RzV1RTU.mjs";
+import { a as ICONS, i as resolveIcon, n as RimelightIcons, o as svg, r as getSvgIcon, t as DEFAULT_ICONS } from "./icons-DPnFQCts.mjs";
 export { DEFAULT_ICONS, ICONS, RimelightIcons, getSvgIcon, resolveIcon, svg };

package/dist/index.d.mts

@@ -1,13 +1,12 @@
-import { c as UIConfig } from "./types-DqAgCNcm.mjs";
+import { c as UIConfig } from "./types-DWmKMcYC.mjs";
 //#region src/index.d.ts
-interface RimelightUIPlugin {
+export interface RimelightUIPlugin {
   name: string;
   enforce?: "pre" | "post";
   resolveId?: (id: string) => string | null | undefined;
   load?: (id: string) => string | null | undefined;
   [key: string]: any;
 }
-type RimelightUIPlugins = (RimelightUIPlugin | RimelightUIPlugin[])[];
-declare const ui: ({ unocss, ...cfg }?: UIConfig) => RimelightUIPlugins;
-//#endregion
-export { RimelightUIPlugin, RimelightUIPlugins, ui };
+export type RimelightUIPlugins = (RimelightUIPlugin | RimelightUIPlugin[])[];
+export declare const ui: ({ unocss, ...cfg }?: UIConfig) => RimelightUIPlugins;
+//#endregion

package/dist/preset.d.mts

@@ -1,2 +1,2 @@
-import { l as PALETTES, u as rimelightUiPreset } from "./types-DqAgCNcm.mjs";
+import { l as PALETTES, u as rimelightUiPreset } from "./types-DWmKMcYC.mjs";
 export { PALETTES, rimelightUiPreset as default };

package/dist/preset.mjs

@@ -208,7 +208,79 @@ function rimelightUiPreset({ colors, icons, presets = {} } = {}) {
 }
 [data-theme="dark"] { color-scheme: dark; }
 [data-theme="light"] { color-scheme: light; }
-body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }` }]
+body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }
+
+/* Reduced motion - disable all animations for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Global focus-visible ring for consistent keyboard focus */
+:focus-visible {
+  outline: 2px solid var(--rl-primary-500);
+  outline-offset: 2px;
+}
+
+/* Ensure minimum touch target sizes (WCAG 2.2 - 24x24 minimum, 44x44 enhanced) */
+button:not(:disabled),
+[role="button"]:not(:disabled),
+a[href],
+input:not([type="hidden"]),
+select,
+textarea,
+summary {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+/* Enhanced touch targets for primary interactive elements */
+@media (pointer: coarse) {
+  button:not(:disabled),
+  [role="button"]:not(:disabled),
+  a[href] {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+/* Improve skip link visibility */
+.skip-link:focus-visible {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.75rem 1.5rem;
+  background: var(--rl-primary-600);
+  color: white;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+@keyframes carousel {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+@keyframes carousel-inverse {
+  0% { transform: translateX(350%); }
+  100% { transform: translateX(-100%); }
+}
+@keyframes swing {
+  0%, 100% { transform: translateX(-50%); }
+  50% { transform: translateX(250%); }
+}
+@keyframes elastic {
+  0% { transform: scaleX(0.1) translateX(-100%); }
+  50% { transform: scaleX(0.7) translateX(100%); }
+  100% { transform: scaleX(0.1) translateX(350%); }
+}` }]
 	};
 }
 //#endregion

package/dist/resolver.d.mts

@@ -1,6 +1,5 @@
-import { n as ClassValue, s as ThemeConfig } from "./types-DqAgCNcm.mjs";
+import { n as ClassValue, s as ThemeConfig } from "./types-DWmKMcYC.mjs";
 //#region src/resolver.d.ts
-declare function cx(...args: ClassValue[]): string;
-declare function defineTheme<const S extends string>(name: string, themeConfig: ThemeConfig<S>): (props?: any) => Record<S, string>;
-//#endregion
-export { cx, defineTheme };
+export declare function cx(...args: ClassValue[]): string;
+export declare function defineTheme<const S extends string>(name: string, themeConfig: ThemeConfig<S>): (props?: any) => Record<S, string>;
+//#endregion

package/dist/resolver.mjs

@@ -63,10 +63,8 @@ function defineTheme(name, themeConfig) {
 	return (props = {}) => {
 		const res = {};
 		for (let i = 0; i < slots.length; i++) res[slots[i]] = baseMap[slots[i]] || "";
-		const values = {
-			...defaultVariants,
-			...props
-		};
+		const values = { ...defaultVariants };
+		for (const k in props) if (props[k] !== void 0) values[k] = props[k];
 		const color = autoColor ? props.color ?? defaultVariants.color : void 0;
 		for (let k = 0; k < variantKeys.length; k++) {
 			const key = variantKeys[k];

package/dist/shortcuts.d.mts

@@ -1,7 +1,7 @@
 import { Atom } from "./stores.mjs";
 //#region src/shortcuts.d.ts
-type Handler = (e: KeyboardEvent) => void;
-interface ShortcutConfig {
+export type Handler = (e: KeyboardEvent) => void;
+export interface ShortcutConfig {
   handler: Handler;
   usingInput?: boolean | string | undefined;
   label?: string | undefined;
@@ -9,11 +9,11 @@ interface ShortcutConfig {
   category?: string | undefined;
   order?: number | undefined;
 }
-type ShortcutsConfig = Record<string, ShortcutConfig | Handler | false | null | undefined>;
-interface ShortcutsOptions {
+export type ShortcutsConfig = Record<string, ShortcutConfig | Handler | false | null | undefined>;
+export interface ShortcutsOptions {
   chainDelay?: number | undefined;
 }
-interface RegisteredShortcut {
+export interface RegisteredShortcut {
   id: string;
   keys: string[];
   label?: string | undefined;
@@ -21,9 +21,8 @@ interface RegisteredShortcut {
   category?: string | undefined;
   order?: number | undefined;
 }
-declare const normalizeModifier: (m: string) => string;
-declare const formatShortcutKeys: (k: string) => string[];
-declare const activeShortcutsStore: Atom<RegisteredShortcut[]>;
-declare function defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): () => void;
-//#endregion
-export { Handler, RegisteredShortcut, ShortcutConfig, ShortcutsConfig, ShortcutsOptions, activeShortcutsStore, defineShortcuts, formatShortcutKeys, normalizeModifier };
+export declare const normalizeModifier: (m: string) => string;
+export declare const formatShortcutKeys: (k: string) => string[];
+export declare const activeShortcutsStore: Atom<RegisteredShortcut[]>;
+export declare function defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): () => void;
+//#endregion

package/dist/stores.d.mts

@@ -1,9 +1,8 @@
 //#region src/stores.d.ts
-interface Atom<T> {
+export interface Atom<T> {
   get: () => T;
   set: (next: T) => void;
   subscribe: (fn: (val: T) => void) => () => void;
 }
-declare function atom<T>(initial: T): Atom<T>;
-//#endregion
-export { Atom, atom };
+export declare function atom<T>(initial: T): Atom<T>;
+//#endregion

package/dist/{types-DqAgCNcm.d.mts → types-DWmKMcYC.d.mts}

@@ -1,4 +1,4 @@
-import { n as RimelightIcons } from "./icons--RzV1RTU.mjs";
+import { n as RimelightIcons } from "./icons-DPnFQCts.mjs";
 import { Preset, UserConfig } from "unocss";
 //#region src/preset.d.ts
 declare const PALETTES: {

package/dist/types.d.mts

@@ -1,2 +1,2 @@
-import { a as Theme, c as UIConfig, i as PresetOptions, n as ClassValue, o as ThemeColor, r as ColorModeInput, s as ThemeConfig, t as BuiltinThemeColor } from "./types-DqAgCNcm.mjs";
+import { a as Theme, c as UIConfig, i as PresetOptions, n as ClassValue, o as ThemeColor, r as ColorModeInput, s as ThemeConfig, t as BuiltinThemeColor } from "./types-DWmKMcYC.mjs";
 export { BuiltinThemeColor, ClassValue, ColorModeInput, PresetOptions, Theme, ThemeColor, ThemeConfig, UIConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -55,18 +55,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@unocss/vite": "66.10.0",
-    "unocss": "66.10.0"
+    "@unocss/vite": "66.10.2",
+    "unocss": "66.10.2"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.10",
     "@astrojs/solid-js": "7.0.2",
     "@astrojs/ts-plugin": "1.10.11",
     "@astrojs/vue": "7.0.2",
-    "@rimelight/config": "0.0.4",
-    "astro": "7.3.1",
+    "@rimelight/config": "0.0.6",
+    "@vitejs/plugin-vue": "6.0.8",
+    "astro": "7.3.2",
     "solid-js": "1.9.15",
     "typescript": "6.0.3",
+    "vite-plugin-solid": "2.11.14",
     "vue": "3.5.42"
   },
   "peerDependencies": {
@@ -91,7 +93,7 @@
     }
   },
   "engines": {
-    "node": ">=26.7.0"
+    "node": ">=26.8.2"
   },
   "scripts": {
     "build": "vp pack",

package/src/components/3d-hover/RLS3dHover.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ThreeDHoverProps } from "./3d-hover"
+import { hover3dTheme } from "./3d-hover.theme"
+
+export interface RLS3dHoverProps extends ThreeDHoverProps {
+  children?: JSX.Element
+}
+
+const RLS3dHover: Component<RLS3dHoverProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => hover3dTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLS3dHover

package/src/components/accordion/RLSAccordion.tsx

@@ -0,0 +1,112 @@
+import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
+import type { AccordionItem, AccordionProps } from "./accordion"
+import { accordionTheme } from "./accordion.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSAccordionProps extends AccordionProps {
+  children?: JSX.Element
+  trailingIconSlot?: JSX.Element
+}
+
+const RLSAccordion: Component<RLSAccordionProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "summary",
+    "multiple",
+    "trailingIcon",
+    "disabled",
+    "name",
+    "ui",
+    "class",
+    "children",
+    "trailingIconSlot"
+  ])
+
+  const groupName =
+    props.name ||
+    (!props.multiple ? `accordion-${Math.random().toString(36).substring(2, 9)}` : undefined)
+
+  const resolvedClasses = createMemo(() =>
+    accordionTheme({
+      disabled: props.disabled ? true : false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const trailingIcon = () => props.trailingIcon ?? "chevronDown"
+
+  return props.items && props.items.length > 0 ? (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      <For each={props.items}>
+        {(item: AccordionItem) => {
+          const itemDisabled = () => !!(props.disabled || item.disabled)
+          const itemTrailingIcon = () => (item.trailingIcon as string | undefined) || trailingIcon()
+          return (
+            <details
+              class={resolvedClasses().item}
+              data-slot="item"
+              name={props.name || (!props.multiple ? groupName : undefined)}
+            >
+              <summary
+                class={`${resolvedClasses().trigger} ${itemDisabled() ? "pointer-events-none opacity-50 select-none" : ""}`}
+                data-slot="trigger"
+              >
+                {item.icon ? (
+                  <span class={resolvedClasses().leadingIcon} data-slot="leading-icon">
+                    <span class={item.icon} aria-hidden="true" />
+                  </span>
+                ) : null}
+
+                <span class={resolvedClasses().label} data-slot="label">
+                  {item.label}
+                </span>
+
+                {itemTrailingIcon() ? (
+                  <span class={resolvedClasses().trailingIcon} data-slot="trailing-icon">
+                    {props.trailingIconSlot ?? <RLSIcon name={itemTrailingIcon()} size="md" />}
+                  </span>
+                ) : null}
+              </summary>
+
+              <div class={resolvedClasses().content} data-slot="content">
+                <div class={resolvedClasses().body} data-slot="body">
+                  {item.content}
+                </div>
+              </div>
+            </details>
+          )
+        }}
+      </For>
+    </div>
+  ) : (
+    <details
+      class={`${resolvedClasses().root} ${resolvedClasses().item}`}
+      data-slot="root"
+      name={props.name}
+      {...rest}
+    >
+      <summary
+        class={`${resolvedClasses().trigger} ${props.disabled ? "pointer-events-none opacity-50 select-none" : ""}`}
+        data-slot="trigger"
+      >
+        <span class={resolvedClasses().label} data-slot="label">
+          {props.summary}
+        </span>
+        {trailingIcon() ? (
+          <span class={resolvedClasses().trailingIcon} data-slot="trailing-icon">
+            {props.trailingIconSlot ?? <RLSIcon name={trailingIcon()} size="md" />}
+          </span>
+        ) : null}
+      </summary>
+
+      <div class={resolvedClasses().content} data-slot="content">
+        <div class={resolvedClasses().body} data-slot="body">
+          {props.children}
+        </div>
+      </div>
+    </details>
+  )
+}
+
+export default RLSAccordion

package/src/components/app/RLSApp.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { AppProps } from "./app"
+import { appTheme } from "./app.theme"
+
+export interface RLSAppProps extends AppProps {
+  children?: JSX.Element
+}
+
+const RLSApp: Component<RLSAppProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => appTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSApp

package/src/components/aspect-ratio/RLSAspectRatio.tsx

@@ -0,0 +1,30 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { AspectRatioProps } from "./aspect-ratio"
+import { aspectRatioTheme } from "./aspect-ratio.theme"
+
+export interface RLSAspectRatioProps extends AspectRatioProps {
+  children?: JSX.Element
+}
+
+const RLSAspectRatio: Component<RLSAspectRatioProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ratio", "ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    aspectRatioTheme({ ratio: props.ratio, ui: props.ui, class: props.class })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      <svg
+        viewBox={`0 0 100 ${(1 / (props.ratio ?? 1)) * 100}`}
+        class="w-full h-auto pointer-events-none block"
+        aria-hidden="true"
+      />
+      <div class={resolvedClasses().content} data-slot="content">
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default RLSAspectRatio

package/src/components/audio/RLSAudio.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { AudioProps } from "./audio"
+import { audioTheme } from "./audio.theme"
+
+export interface RLSAudioProps extends AudioProps {
+  children?: JSX.Element
+  transcript?: JSX.Element
+}
+
+const RLSAudio: Component<RLSAudioProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children", "transcript"])
+
+  const resolvedClasses = createMemo(() => audioTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+      {props.transcript !== undefined && (
+        <div class="mt-2 text-sm text-zinc-400" data-slot="transcript">
+          {props.transcript}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default RLSAudio