@rimelight/ui 0.0.47 → 0.0.48

package/dist/index.d.mts

@@ -1,13 +1,12 @@
 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.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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.47",
+  "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.5",
-    "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

package/src/components/avatar/RLSAvatar.tsx

@@ -0,0 +1,142 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { AvatarProps } from "./avatar"
+import { avatarTheme } from "./avatar.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSAvatarProps extends AvatarProps {
+  children?: JSX.Element
+  fallbackSlot?: JSX.Element
+  badgeSlot?: JSX.Element
+  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>
+}
+
+const RLSAvatar: Component<RLSAvatarProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "src",
+    "alt",
+    "fallback",
+    "initials",
+    "title",
+    "subtitle",
+    "label",
+    "badge",
+    "badgeColor",
+    "badgePosition",
+    "size",
+    "color",
+    "loading",
+    "referrerpolicy",
+    "crossorigin",
+    "decoding",
+    "height",
+    "width",
+    "sizes",
+    "srcset",
+    "ui",
+    "class",
+    "children",
+    "fallbackSlot",
+    "badgeSlot",
+    "imgProps"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    avatarTheme({
+      size: props.size ?? "md",
+      color: props.color ?? "neutral",
+      badgePosition: props.badgePosition ?? "bottom-right",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const avatarFallback = () => props.fallback || props.initials
+  const hasTextLayout = () => Boolean(props.title || props.subtitle)
+  const badgeClass = () =>
+    props.badgeColor?.startsWith("bg-")
+      ? props.badgeColor
+      : `bg-${props.badgeColor ?? "success"}-500`
+
+  const image = () => (
+    <>
+      {props.src ? (
+        <img
+          src={props.src}
+          alt={props.alt ?? ""}
+          class={resolvedClasses().image}
+          data-slot="image"
+          loading={props.loading}
+          referrerPolicy={props.referrerpolicy || undefined}
+          crossorigin={props.crossorigin || undefined}
+          decoding={props.decoding}
+          {...props.imgProps}
+        />
+      ) : (
+        <span class={resolvedClasses().fallback} data-slot="fallback">
+          {props.fallbackSlot ? (
+            props.fallbackSlot
+          ) : avatarFallback() ? (
+            avatarFallback()
+          ) : (
+            <RLSIcon name="i-rl-user" class={resolvedClasses().icon} aria-hidden="true" />
+          )}
+        </span>
+      )}
+    </>
+  )
+
+  const badgeEl = () =>
+    props.badge || props.badgeSlot ? (
+      <span class={`${resolvedClasses().badge}  ${badgeClass()}`} data-slot="badge">
+        {props.badgeSlot
+          ? props.badgeSlot
+          : typeof props.badge === "string" || typeof props.badge === "number"
+            ? props.badge
+            : null}
+      </span>
+    ) : null
+
+  if (hasTextLayout()) {
+    return (
+      <div class="flex items-center gap-3" data-slot="profile-wrapper">
+        <span
+          class={resolvedClasses().root}
+          data-slot="root"
+          aria-label={props.label || props.title}
+          role={props.label || props.title ? "img" : undefined}
+          {...rest}
+        >
+          {props.children ? props.children : image()}
+          {badgeEl()}
+        </span>
+        <div class="flex flex-col leading-tight">
+          {props.title && (
+            <span class="font-medium text-sm text-default" data-slot="title">
+              {props.title}
+            </span>
+          )}
+          {props.subtitle && (
+            <span class="text-xs text-muted" data-slot="subtitle">
+              {props.subtitle}
+            </span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <span
+      class={resolvedClasses().root}
+      data-slot="root"
+      aria-label={props.label}
+      role={props.label ? "img" : undefined}
+      {...rest}
+    >
+      {props.children ? props.children : image()}
+      {badgeEl()}
+    </span>
+  )
+}
+
+export default RLSAvatar

package/src/components/avatar/avatar.ts

@@ -8,24 +8,24 @@ export interface AvatarProps {
    * @default "span"
    */
   as?: any
-  src?: string
-  alt?: string
+  src?: string | undefined
+  alt?: string | undefined
   icon?: any
-  text?: string
-  fallback?: string
+  text?: string | undefined
+  fallback?: string | undefined
   /**
    * @default "md"
    */
-  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined
   /**
    * @default "neutral"
    */
-  color?: ThemeColor
-  chip?: boolean | ChipProps
-  badge?: boolean | string | number
-  badgeColor?: string
-  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
-  loading?: "lazy" | "eager"
+  color?: ThemeColor | undefined
+  chip?: boolean | ChipProps | undefined
+  badge?: boolean | string | number | undefined
+  badgeColor?: string | undefined
+  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | undefined
+  loading?: "lazy" | "eager" | undefined
   referrerpolicy?:
     | ""
     | "no-referrer"
@@ -36,25 +36,26 @@ export interface AvatarProps {
     | "strict-origin"
     | "strict-origin-when-cross-origin"
     | "unsafe-url"
-  crossorigin?: "" | "anonymous" | "use-credentials"
-  decoding?: "async" | "auto" | "sync"
-  height?: string | number
-  width?: string | number
-  sizes?: string
-  srcset?: string
-  usemap?: string
+    | undefined
+  crossorigin?: "" | "anonymous" | "use-credentials" | undefined
+  decoding?: "async" | "auto" | "sync" | undefined
+  height?: string | number | undefined
+  width?: string | number | undefined
+  sizes?: string | undefined
+  srcset?: string | undefined
+  usemap?: string | undefined
   /**
    * Compact initials displayed inside the avatar circle (alias for fallback)
    */
-  initials?: string
+  initials?: string | undefined
   /**
    * Display name rendered adjacent to the avatar (e.g. "Daniel Marchi")
    */
-  title?: string
+  title?: string | undefined
   /**
    * Secondary description rendered below the title (e.g. "Lead Developer")
    */
-  subtitle?: string
+  subtitle?: string | undefined
   /**
    * Accessible aria-label fallback for screen readers when avatar is purely visual
    */