kosui 0.2.0 → 0.5.0

package/dist/menu/menu-item.svelte.d.ts

@@ -1,11 +1,13 @@
-import { type Variants } from "../base.js";
-import type { ClassName, ElementRef } from "../utils.js";
+import { type ColorProp } from "../base.js";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 export type MenuItemProps = {
-    onSelect?: (el: HTMLElement) => void;
-    children: Snippet<[]>;
-} & ElementRef & ClassName & Variants & Omit<HTMLButtonAttributes, "type" | "value">;
+    onSelect?: () => void;
+    checked?: boolean;
+    el?: HTMLButtonElement;
+    children: Snippet;
+} & ClassName & ColorProp & Omit<HTMLButtonAttributes, "type" | "value" | "role" | "class">;
 declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "el">;
 type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

package/dist/menu/menu.svelte

@@ -1,29 +1,174 @@
 <script module lang="ts">
-  import { MenuContext, setMenuContext } from "./index.js";
-  import type { ElementRef } from "../utils.js";
+  import type { ShapeProp } from "../base.js";
+  import { baseClasses } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import {
+    Popover,
+    type PopoverPlacement,
+    type PopoverProps,
+  } from "../popover/index.js";
+  import { Shortcut } from "../shortcut/index.js";
+  import { cn, TypingBuffer } from "../utils.js";
   import type { Snippet } from "svelte";
+  import { createAttachmentKey, type Attachment } from "svelte/attachments";
+  import { setMenuContext } from "./menu-context.js";
+
+  export type MenuTriggerProps = {
+    [attachment: symbol]: Attachment<HTMLElement>;
+    id: string;
+    "aria-haspopup": "menu";
+    "aria-expanded": boolean;
+    "aria-controls"?: string;
+    onclick: (event: MouseEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+  };
 
   export type MenuProps = {
-    open?: boolean;
-    children: Snippet;
-  } & ElementRef;
+    trigger: Snippet<[MenuTriggerProps]>;
+    placement?: PopoverPlacement;
+  } & ShapeProp &
+    Omit<PopoverProps, "placement" | "anchorEl" | "onKeydownWhileOpen">;
+
+  type Start = "first" | "last" | "menu";
 </script>
 
 <script lang="ts">
   let {
     open = $bindable(false),
-    children,
     el = $bindable(),
+    trigger,
+    placement = "bottom-start",
+    shape = "xs",
+    class: className,
+    children,
+    ...restProps
   }: MenuProps = $props();
 
-  setMenuContext(
-    new MenuContext(
-      () => open,
-      (value) => (open = value),
-      () => el,
-      (value) => (el = value),
-    ),
-  );
+  const id = $props.id();
+  const anchor = createAttachmentKey();
+  const buffer = new TypingBuffer();
+  let anchorEl: HTMLElement | undefined = $state();
+  let start: Start = "menu";
+
+  function show(from: Start) {
+    start = from;
+    open = true;
+  }
+
+  function close() {
+    open = false;
+    anchorEl?.focus();
+  }
+
+  setMenuContext({ close });
+
+  $effect(() => {
+    if (open && el) queueMicrotask(focusStart);
+  });
+
+  function items(): HTMLElement[] {
+    return el
+      ? [
+          ...el.querySelectorAll<HTMLElement>(
+            '[role^="menuitem"]:not(:disabled)',
+          ),
+        ]
+      : [];
+  }
+
+  function focusStart() {
+    const list = items();
+    const target =
+      start === "first" ? list[0] : start === "last" ? list.at(-1) : el;
+    (target ?? el)?.focus();
+  }
+
+  function typeahead(char: string, list: HTMLElement[], index: number) {
+    const typed = buffer.append(char).toLowerCase();
+    const prefix = [...typed].every((c) => c === typed[0]) ? typed[0] : typed;
+    const ordered = [...list.slice(index + 1), ...list.slice(0, index + 1)];
+    return ordered.find((item) =>
+      item.textContent?.trim().toLowerCase().startsWith(prefix),
+    );
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (
+      Shortcut.TAB_FORWARD.matches(event) ||
+      Shortcut.TAB_BACKWARD.matches(event)
+    ) {
+      open = false;
+      return;
+    }
+    const list = items();
+    const index = list.indexOf(document.activeElement as HTMLElement);
+    let target: HTMLElement | undefined;
+    if (Shortcut.ARROW_DOWN.matches(event)) {
+      target = list[(index + 1) % list.length];
+    } else if (Shortcut.ARROW_UP.matches(event)) {
+      target = index <= 0 ? list.at(-1) : list[index - 1];
+    } else if (Shortcut.HOME.matches(event)) {
+      target = list[0];
+    } else if (Shortcut.END.matches(event)) {
+      target = list.at(-1);
+    } else if (Shortcut.isChar(event) && event.key !== " ") {
+      target = typeahead(event.key, list, index);
+    } else if (
+      !Shortcut.ENTER.matches(event) &&
+      !Shortcut.SPACE.matches(event)
+    ) {
+      return;
+    }
+    target?.focus();
+    if (target) event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function onpointerleave() {
+    if (el?.contains(document.activeElement)) el.focus();
+  }
+
+  const triggerProps: MenuTriggerProps = $derived({
+    [anchor]: (node) => {
+      anchorEl = node;
+    },
+    id: `${id}-trigger`,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? `${id}-menu` : undefined,
+    onclick: (event) => {
+      if (open) open = false;
+      else show(event.detail === 0 ? "first" : "menu");
+    },
+    onkeydown: (event) => {
+      if (Shortcut.ARROW_DOWN.matches(event)) show("first");
+      else if (Shortcut.ARROW_UP.matches(event)) show("last");
+      else return;
+      event.preventDefault();
+    },
+  });
 </script>
 
-{@render children()}
+{@render trigger(triggerProps)}
+
+<Popover
+  bind:open
+  bind:el
+  {anchorEl}
+  {placement}
+  id="{id}-menu"
+  role="menu"
+  aria-labelledby="{id}-trigger"
+  tabindex={-1}
+  class={cn(
+    baseClasses({ shape }),
+    "max-h-[min(60vh,32rem)] min-w-40 overflow-y-auto bg-m3-surface-container p-1 text-m3-on-surface shadow-md shadow-m3-shadow/20 outline-none",
+    className,
+  )}
+  {...mergeProps(restProps, {
+    onkeydown,
+    onpointerleave,
+  })}
+>
+  {@render children()}
+</Popover>

package/dist/menu/menu.svelte.d.ts

@@ -1,9 +1,20 @@
-import type { ElementRef } from "../utils.js";
+import type { ShapeProp } from "../base.js";
+import { type PopoverPlacement, type PopoverProps } from "../popover/index.js";
 import type { Snippet } from "svelte";
+import { type Attachment } from "svelte/attachments";
+export type MenuTriggerProps = {
+    [attachment: symbol]: Attachment<HTMLElement>;
+    id: string;
+    "aria-haspopup": "menu";
+    "aria-expanded": boolean;
+    "aria-controls"?: string;
+    onclick: (event: MouseEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+};
 export type MenuProps = {
-    open?: boolean;
-    children: Snippet;
-} & ElementRef;
+    trigger: Snippet<[MenuTriggerProps]>;
+    placement?: PopoverPlacement;
+} & ShapeProp & Omit<PopoverProps, "placement" | "anchorEl" | "onKeydownWhileOpen">;
 declare const Menu: import("svelte").Component<MenuProps, {}, "el" | "open">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/merge-props.d.ts

@@ -4,7 +4,7 @@ export declare function interceptStopImmediatePropagation(event: Event, callback
 export declare function runEventHandlers(target: EventTarget, event: Event & {
     currentTarget: EventTarget & Element;
 }, ...handlers: EventHandler[]): void;
-type Props = Record<string, unknown>;
+type Props = Record<PropertyKey, unknown>;
 type PropsUnion<T extends Props[]> = (T extends (infer U)[] ? U extends Props ? (k: {
     [K in keyof U]: U[K];
 }) => void : never : never) extends (k: infer I) => void ? I : never;

package/dist/merge-props.js

@@ -1,4 +1,4 @@
-import { twMerge } from "tailwind-merge";
+import { cn } from "./utils.js";
 function isClass(value) {
     if (value === null || value === undefined) {
         return true;
@@ -9,10 +9,12 @@ function isClass(value) {
     if (Array.isArray(value)) {
         return value.every((item) => isClass(item));
     }
-    return false;
+    return Object.getPrototypeOf(value) === Object.prototype;
 }
 function isHandlerKey(key) {
-    return key.startsWith("on") && key[2].toLowerCase() === key[2];
+    return (typeof key === "string" &&
+        key.startsWith("on") &&
+        key[2].toLowerCase() === key[2]);
 }
 function isHandler(value) {
     return typeof value === "function";
@@ -48,10 +50,13 @@ function chainCallbacks(...callbacks) {
         }
     };
 }
+function ownKeys(props) {
+    return [...Object.keys(props), ...Object.getOwnPropertySymbols(props)];
+}
 export function mergeProps(...args) {
     const result = {};
     for (const props of args) {
-        for (const key in props) {
+        for (const key of ownKeys(props)) {
             const prevVal = result[key];
             const currVal = props[key];
             if (currVal === undefined) {
@@ -70,7 +75,7 @@ export function mergeProps(...args) {
                 continue;
             }
             if (key === "class" && isClass(prevVal) && isClass(currVal)) {
-                result[key] = twMerge(prevVal, currVal);
+                result[key] = cn(prevVal, currVal);
                 continue;
             }
             result[key] = currVal;

package/dist/modal/modal.svelte

@@ -1,123 +1,106 @@
 <script module lang="ts">
   import { events } from "../index.js";
+  import { baseClasses, type ShapeProp } from "../base.js";
   import { mergeProps } from "../merge-props.js";
-  import { Shortcut } from "../shortcut/index.js";
-  import type { ClassName } from "../utils.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { Snippet } from "svelte";
   import type { HTMLDialogAttributes } from "svelte/elements";
-  import { scale } from "svelte/transition";
-  import { twMerge } from "tailwind-merge";
+  import { prefersReducedMotion } from "svelte/motion";
+  import { scale, type TransitionConfig } from "svelte/transition";
 
   export type ModalProps = {
-    ref?: HTMLDialogElement;
+    el?: HTMLDialogElement;
     onCancel?: () => void;
+    transition?: (node: Element) => TransitionConfig;
     children: Snippet;
   } & ClassName &
-    HTMLDialogAttributes;
+    ShapeProp &
+    Omit<HTMLDialogAttributes, "class">;
+
+  type Layer = { el: HTMLDialogElement; opener?: HTMLElement };
+
+  const layers: Layer[] = [];
+
+  function zoom(node: Element) {
+    return scale(node, {
+      duration: prefersReducedMotion.current ? 0 : 150,
+      start: 0.95,
+    });
+  }
+
+  function focusedElement() {
+    const active = document.activeElement;
+    return active instanceof HTMLElement && active !== document.body
+      ? active
+      : undefined;
+  }
+
+  function closeLayer(layer: Layer) {
+    const index = layers.indexOf(layer);
+    layers.splice(index, 1);
+    const above = layers[index];
+    if (above) {
+      if (!above.opener?.isConnected || layer.el.contains(above.opener)) {
+        above.opener = layer.opener;
+      }
+    } else if (layer.opener?.isConnected) {
+      layer.opener.focus();
+    }
+  }
 </script>
 
 <script lang="ts">
   let {
-    ref = $bindable(),
+    el = $bindable(),
     open = $bindable(),
     onCancel,
+    transition = zoom,
     children,
+    shape = "xl",
     class: className,
     ...restProps
   }: ModalProps = $props();
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (Shortcut.ESCAPE.matches(event)) {
-      open = false;
-      onCancel?.();
-      event.preventDefault();
-    }
+  function isolateKeys(event: KeyboardEvent) {
     event.stopImmediatePropagation();
   }
 
-  function handleClickOutside(event: MouseEvent) {
-    if (ref && ref === event.target) {
-      const rect = ref.getBoundingClientRect();
-      if (
-        event.clientY < rect.top ||
-        event.clientY > rect.top + rect.height ||
-        event.clientX < rect.left ||
-        event.clientX > rect.left + rect.width
-      ) {
-        open = false;
-        onCancel?.();
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    }
+  function oncancel(event: Event) {
+    event.preventDefault();
+    open = false;
+    onCancel?.();
   }
 
   $effect(() => {
-    if (ref) {
-      ref.showModal();
-      events.on("keydown", handleKeydown);
-      events.on("mousedown", handleClickOutside);
+    if (!el) return;
+    const layer: Layer = { el, opener: focusedElement() };
+    layers.push(layer);
+    if (!el.open) el.showModal();
+    events.on("keydown", isolateKeys);
 
-      return () => {
-        events.remove("keydown", handleKeydown);
-        events.remove("mousedown", handleClickOutside);
-      };
-    }
+    return () => {
+      events.remove("keydown", isolateKeys);
+      closeLayer(layer);
+    };
   });
 </script>
 
 {#if open}
   <dialog
-    bind:this={ref}
-    class={twMerge("m-auto rounded-lg p-5 shadow-lg", className)}
-    transition:scale={{ duration: 150, start: 0.95 }}
+    bind:this={el}
+    closedby="any"
+    class={cn(
+      "m-auto bg-m3-surface-container-high p-6 text-m3-on-surface shadow-lg backdrop:bg-black/50 backdrop:backdrop-blur-[2px] data-closing:backdrop:bg-transparent motion-safe:backdrop:transition-colors starting:backdrop:bg-transparent",
+      baseClasses({ shape }),
+      className,
+    )}
+    transition:transition
     {...mergeProps(restProps, {
-      onintrostart: () => {
-        if (ref) {
-          ref.classList.remove("backdrop-out");
-          ref.classList.add("backdrop-in");
-        }
-      },
-      onoutrostart: () => {
-        if (ref) {
-          ref.classList.remove("backdrop-in");
-          ref.classList.add("backdrop-out");
-        }
-      },
+      oncancel,
+      onintrostart: () => el?.removeAttribute("data-closing"),
+      onoutrostart: () => el?.setAttribute("data-closing", ""),
     })}
   >
     {@render children()}
   </dialog>
 {/if}
-
-<style>@layer components { 
-  .backdrop-in::backdrop {
-    animation: backdrop-in 150ms forwards;
-  }
-
-  .backdrop-out::backdrop {
-    animation: backdrop-out 150ms forwards;
-  }
-
-  @keyframes backdrop-in {
-    from {
-      background: rgba(0, 0, 0, 0);
-      backdrop-filter: blur(0px);
-    }
-    to {
-      background: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(2px);
-    }
-  }
-
-  @keyframes backdrop-out {
-    from {
-      background: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(2px);
-    }
-    to {
-      background: rgba(0, 0, 0, 0);
-      backdrop-filter: blur(0px);
-    }
-  }
- }</style>

package/dist/modal/modal.svelte.d.ts

@@ -1,11 +1,14 @@
-import type { ClassName } from "../utils.js";
+import { type ShapeProp } from "../base.js";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLDialogAttributes } from "svelte/elements";
+import { type TransitionConfig } from "svelte/transition";
 export type ModalProps = {
-    ref?: HTMLDialogElement;
+    el?: HTMLDialogElement;
     onCancel?: () => void;
+    transition?: (node: Element) => TransitionConfig;
     children: Snippet;
-} & ClassName & HTMLDialogAttributes;
-declare const Modal: import("svelte").Component<ModalProps, {}, "open" | "ref">;
+} & ClassName & ShapeProp & Omit<HTMLDialogAttributes, "class">;
+declare const Modal: import("svelte").Component<ModalProps, {}, "el" | "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/nav/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NavGroup, type NavGroupProps } from "./nav-group.svelte";
+export { default as NavItem, type NavItemProps } from "./nav-item.svelte";

package/dist/nav/index.js

@@ -0,0 +1,2 @@
+export { default as NavGroup } from "./nav-group.svelte";
+export { default as NavItem } from "./nav-item.svelte";

package/dist/nav/nav-group.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type NavGroupProps = {
+    label: string;
+    children: Snippet;
+  } & ElementRef &
+    ClassName &
+    Omit<HTMLAttributes<HTMLDivElement>, "class">;
+</script>
+
+<script lang="ts">
+  let {
+    label,
+    children,
+    el = $bindable(),
+    class: className,
+    ...restProps
+  }: NavGroupProps = $props();
+
+  const id = $props.id();
+</script>
+
+<div
+  bind:this={el}
+  role="group"
+  aria-labelledby="{id}-label"
+  class={cn("flex flex-col gap-0.5", className)}
+  {...restProps}
+>
+  <div
+    id="{id}-label"
+    class="px-4 pt-4 pb-1 text-xs font-medium tracking-wide text-m3-on-surface-variant uppercase"
+  >
+    {label}
+  </div>
+  {@render children()}
+</div>

package/dist/nav/nav-group.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type NavGroupProps = {
+    label: string;
+    children: Snippet;
+} & ElementRef & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const NavGroup: import("svelte").Component<NavGroupProps, {}, "el">;
+type NavGroup = ReturnType<typeof NavGroup>;
+export default NavGroup;

package/dist/nav/nav-item.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">
+  import {
+    baseClasses,
+    type ShapeProp,
+    type Size,
+    type SizeProp,
+  } from "../base.js";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
+  import type { LucideIcon } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  export type NavItemProps = {
+    href: string;
+    current?: boolean;
+    icon?: LucideIcon;
+    children: Snippet;
+  } & ElementRef &
+    ClassName &
+    ShapeProp &
+    SizeProp &
+    Omit<HTMLAnchorAttributes, "href">;
+
+  const SIZES: Record<Size, string> = {
+    xs: "h-7 gap-2 px-3 text-xs",
+    sm: "h-9 gap-3 px-4 text-sm",
+    md: "h-11 gap-3 px-4 text-sm",
+    lg: "h-13 gap-3 px-4 text-base",
+    xl: "h-15 gap-4 px-5 text-base",
+  };
+</script>
+
+<script lang="ts">
+  let {
+    href,
+    current = false,
+    icon: Icon,
+    children,
+    el = $bindable(),
+    class: className,
+    shape = "full",
+    size = "md",
+    ...restProps
+  }: NavItemProps = $props();
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a
+  bind:this={el}
+  {href}
+  aria-current={current ? "page" : undefined}
+  class={cn(
+    baseClasses({ shape }),
+    SIZES[size],
+    "flex shrink-0 items-center text-m3-on-surface-variant hover:bg-m3-on-surface/8 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary aria-[current=page]:bg-m3-secondary-container aria-[current=page]:font-medium aria-[current=page]:text-m3-on-secondary-container",
+    className,
+  )}
+  {...restProps}
+>
+  {#if Icon}
+    <Icon class="size-[1.25em] shrink-0" />
+  {/if}
+  {@render children()}
+</a>
+<!-- eslint-enable svelte/no-navigation-without-resolve -->

package/dist/nav/nav-item.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type ShapeProp, type SizeProp } from "../base.js";
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { LucideIcon } from "@lucide/svelte";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+export type NavItemProps = {
+    href: string;
+    current?: boolean;
+    icon?: LucideIcon;
+    children: Snippet;
+} & ElementRef & ClassName & ShapeProp & SizeProp & Omit<HTMLAnchorAttributes, "href">;
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "el">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;

package/dist/popover/index.d.ts

@@ -1 +1 @@
-export { default as Popover, type PopoverProps } from "./popover.svelte";
+export { default as Popover, type PopoverPlacement, type PopoverProps, } from "./popover.svelte";

package/dist/popover/index.js

@@ -1 +1 @@
-export { default as Popover } from "./popover.svelte";
+export { default as Popover, } from "./popover.svelte";