kosui 0.1.0 → 0.1.2

package/README.md

@@ -2,6 +2,26 @@
 
 A Svelte component library used by [Koso](https://koso.app) and [Cipherly](https://cipherly.app).
 
+## Design Philosophy
+
+These principles are listed in order of priority. When they conflict, the higher principle wins.
+
+**Svelte First** — Write idiomatic Svelte. Prefer runes, snippets, and Svelte's built-in reactivity over external state management or patterns that fight the framework.
+
+**Be Parsimonious** — Keep components as simple as possible. Reach for CSS first; use JavaScript only when CSS can't do it. Don't add abstractions that aren't earning their weight.
+
+**Accessible by Default** — ARIA roles, keyboard navigation, and focus management are built in, not bolted on. A component isn't done until it works without a mouse.
+
+**Convention over Invention** — If a component is standard across major platforms and frameworks — iOS, Android, Windows, macOS, and the web — it belongs in the library. Its behavior should be unsurprising: implement it the way those platforms do, not the way we imagine it might work.
+
+**Transparent Props** — Components don't hide their underlying DOM element. Every component spreads `...restProps` and provides an `el` binding so consumers can always reach the element without fighting the component.
+
+**Composable over Configurable** — Prefer Svelte snippets and composition over a proliferation of boolean props and string options. When a component needs customization, reach for `{#snippet}` before adding another prop.
+
+**Minimal Dependencies** — As few external dependencies as possible. Every dependency is a maintenance burden and a potential breaking change. A little copied, well-understood code beats a large transitive dependency graph.
+
+**Modern Baseline** — Target current, evergreen browsers. Dropping legacy browser support is acceptable in exchange for simpler code.
+
 ## Changesets
 
 Add a new changeset:

package/dist/alert/alert.svelte

@@ -144,23 +144,23 @@
     border-radius: var(--radius);
   }
 
-.variant-filled {
+  .variant-filled {
     background-color: var(--color-main);
     color: var(--color-on-main);
   }
 
-.variant-tonal {
+  .variant-tonal {
     background-color: var(--color-tonal);
     color: var(--color-on-tonal);
   }
 
-.outlined {
+  .outlined {
     border-width: 1px;
     border-style: solid;
     border-color: var(--color-main);
   }
 
-.elevated {
+  .elevated {
     box-shadow:
       0 1px 3px 0 rgb(from var(--color-shadow, rgb(0 0 0)) r g b / 0.2),
       0 1px 2px -1px rgb(from var(--color-shadow, rgb(0 0 0)) r g b / 0.2);

package/dist/button/button.svelte

@@ -3,13 +3,13 @@
   import { mergeProps } from "../merge-props.js";
   import { Tooltip, type TooltipTriggerProps } from "../tooltip/index.js";
   import { noop, type ClassName, type ElementRef } from "../utils.js";
-  import type { Icon } from "@lucide/svelte";
+  import type { LucideIcon } from "@lucide/svelte";
   import type { Snippet } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export type ButtonProps = {
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     size?: number;
     tooltip?: Snippet | string;
   } & ElementRef &

package/dist/button/button.svelte.d.ts

@@ -1,10 +1,10 @@
 import { type Variants } from "../base.js";
 import { type ClassName, type ElementRef } from "../utils.js";
-import type { Icon } from "@lucide/svelte";
+import type { LucideIcon } from "@lucide/svelte";
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 export type ButtonProps = {
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     size?: number;
     tooltip?: Snippet | string;
 } & ElementRef & ClassName & Variants & HTMLButtonAttributes;

package/dist/command/action.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Shortcut } from "../shortcut/index.js";
-import { type Icon } from "@lucide/svelte";
+import { type LucideIcon } from "@lucide/svelte";
 type ActionProps = {
     id: string;
     callback: () => void;
     category?: string;
     name?: string;
     description?: string;
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     enabled?: () => boolean;
     selected?: () => boolean;
     shortcut?: Shortcut;
@@ -17,7 +17,7 @@ export declare class Action {
     category: string;
     name: string;
     description: string;
-    icon: typeof Icon;
+    icon: LucideIcon;
     enabled: () => boolean;
     selected?: () => boolean;
     shortcut?: Shortcut;

package/dist/dialog/dialog.svelte

@@ -1,14 +1,14 @@
 <script module lang="ts">
   import { mergeComponentProps } from "../merge-props.js";
   import { Modal, type ModalProps } from "../modal/index.js";
-  import type { Icon } from "@lucide/svelte";
+  import type { LucideIcon } from "@lucide/svelte";
   import type { Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
 
   export type DialogProps<T> = {
     ref?: HTMLDialogElement;
     onSelect?: (value: T | undefined) => void;
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     title?: string;
     children: Snippet;
     actions?: Snippet<[{ onSelect: (value: T | undefined) => void }]>;

package/dist/dialog/dialog.svelte.d.ts

@@ -1,10 +1,10 @@
 import { type ModalProps } from "../modal/index.js";
-import type { Icon } from "@lucide/svelte";
+import type { LucideIcon } from "@lucide/svelte";
 import type { Snippet } from "svelte";
 export type DialogProps<T> = {
     ref?: HTMLDialogElement;
     onSelect?: (value: T | undefined) => void;
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     title?: string;
     children: Snippet;
     actions?: Snippet<[{

package/dist/dialog/dialoguer-context.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Variants } from "../base.js";
 import type { InputProps } from "../input/index.js";
-import type { Icon } from "@lucide/svelte";
+import type { LucideIcon } from "@lucide/svelte";
 import { type Snippet } from "svelte";
 export type DialoguerButtonProps<T> = {
     text: string;
@@ -8,27 +8,27 @@ export type DialoguerButtonProps<T> = {
     default?: boolean;
 } & Variants;
 type ShowDialogProps<T> = {
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     title?: string;
     inputProps?: InputProps;
     message: Snippet<[]> | string;
     buttons: DialoguerButtonProps<T>[];
 };
 type NoticeDialogProps = {
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     title?: string;
     message: Snippet<[]> | string;
     acceptText?: string;
 };
 type ConfirmDialogProps = {
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     title?: string;
     message: Snippet<[]> | string;
     cancelText?: string;
     acceptText?: string;
 };
 type InputDialogProps = {
-    icon?: typeof Icon;
+    icon?: LucideIcon;
     title?: string;
     props: InputProps;
     message: Snippet<[]> | string;
@@ -37,7 +37,7 @@ type InputDialogProps = {
 };
 export declare class DialoguerContext {
     message: Snippet<[]> | string;
-    icon: typeof Icon | undefined;
+    icon: LucideIcon | undefined;
     title: string | undefined;
     inputProps: InputProps | undefined;
     buttons: DialoguerButtonProps<unknown>[];

package/dist/link/link.svelte

@@ -31,12 +31,21 @@
     ...props
   }: LinkProps = $props();
 
-  const classes = twMerge(
-    baseClasses({ variant, color, shape, underline, hover: true, focus: true }),
-    variant !== "text" &&
-      "flex h-9 items-center justify-center gap-2 text-nowrap transition-all active:scale-95",
-    "cursor-pointer",
-    className,
+  const classes = $derived(
+    twMerge(
+      baseClasses({
+        variant,
+        color,
+        shape,
+        underline,
+        hover: true,
+        focus: true,
+      }),
+      variant !== "text" &&
+        "flex h-9 items-center justify-center gap-2 text-nowrap transition-all active:scale-95",
+      "cursor-pointer",
+      className,
+    ),
   );
 </script>
 

package/dist/markdown/markdown-token.svelte

@@ -9,7 +9,7 @@
 
   const ctx = getMarkdownContext();
 
-  let renderer = ctx.getRenderer(token.type);
+  let renderer = $derived(ctx.getRenderer(token.type));
 </script>
 
 {#snippet children()}

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

@@ -4,6 +4,6 @@ export type MenuProps = {
     open?: boolean;
     children: Snippet;
 } & ElementRef;
-declare const Menu: import("svelte").Component<MenuProps, {}, "open" | "el">;
+declare const Menu: import("svelte").Component<MenuProps, {}, "el" | "open">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/popover/popover.svelte

@@ -156,10 +156,6 @@
       }
     }
   }
-
-  if (!children) {
-    console.log(children);
-  }
 </script>
 
 {#if open}

package/dist/popover/popover.svelte.d.ts

@@ -13,6 +13,6 @@ export type PopoverProps = {
     onKeydownWhileOpen?: (event: KeyboardEvent) => void;
     children: Snippet;
 } & ClassName & ElementRef & HTMLAttributes<HTMLDivElement>;
-declare const Popover: import("svelte").Component<PopoverProps, {}, "open" | "el">;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "el" | "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/slider/slider.svelte

@@ -111,15 +111,15 @@
       () => step,
       () => marks,
       () => disabled,
-      label,
+      (val) => label(val),
       () => labelAlwaysOn,
       () => inverted,
       () => restrictToMarks,
       () => color,
       () => size,
       () => radius,
-      onChange,
-      onChangeEnd,
+      (val) => onChange?.(val),
+      (val) => onChangeEnd?.(val),
       sliderHandle,
       sliderHandleLabel,
       sliderHandleLabelArrow,

package/dist/textarea/textarea.svelte

@@ -79,5 +79,4 @@
 
     className,
   )}
-  {...restProps}
-></textarea>
+  {...restProps}></textarea>

package/dist/tooltip/tooltip.svelte

@@ -58,18 +58,20 @@
     open = false;
   }
 
-  const triggerProps: TooltipTriggerProps = click
-    ? {
-        ref: (ref) => (anchorEl = ref),
-        onclick: () => (open = true),
-      }
-    : {
-        ref: (ref) => (anchorEl = ref),
-        onmouseenter: () => !isTouchDevice() && show(),
-        onmouseleave: () => hide(),
-        ontouchstart: () => show(delay),
-        ontouchend: () => cancel(),
-      };
+  const triggerProps: TooltipTriggerProps = $derived(
+    click
+      ? {
+          ref: (ref) => (anchorEl = ref),
+          onclick: () => (open = true),
+        }
+      : {
+          ref: (ref) => (anchorEl = ref),
+          onmouseenter: () => !isTouchDevice() && show(),
+          onmouseleave: () => hide(),
+          ontouchstart: () => show(delay),
+          ontouchend: () => cancel(),
+        },
+  );
 </script>
 
 <Popover

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,45 +28,45 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
-    "@lucide/svelte": "^0.552.0",
-    "marked": "^16.4.1"
+    "@lucide/svelte": "^1.1.0",
+    "marked": "^18.0.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
-    "@eslint/compat": "^1.4.1",
-    "@eslint/js": "^9.39.1",
-    "@playwright/test": "^1.56.1",
-    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.48.4",
-    "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.1.16",
-    "@tailwindcss/vite": "^4.1.16",
-    "@types/node": "^24.10.0",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.13.0",
-    "globals": "^16.5.0",
-    "highlight.js": "^11.11.1",
-    "highlight.svelte": "^0.1.3",
-    "jsdom": "^27.1.0",
-    "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.7.1",
-    "publint": "^0.3.15",
-    "svelte": "^5.43.3",
-    "svelte-check": "^4.3.3",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.1.12",
-    "vitest": "^4.0.7"
+    "@changesets/cli": "2.31.1",
+    "@eslint/compat": "2.1.1",
+    "@eslint/js": "10.0.1",
+    "@playwright/test": "1.64.1",
+    "@sveltejs/adapter-static": "3.0.10",
+    "@sveltejs/kit": "2.70.3",
+    "@sveltejs/package": "2.5.8",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "@tailwindcss/forms": "0.5.11",
+    "@tailwindcss/postcss": "4.3.3",
+    "@tailwindcss/vite": "4.3.3",
+    "@types/node": "25.9.9",
+    "eslint": "10.14.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-svelte": "3.23.1",
+    "globals": "17.14.0",
+    "highlight.js": "11.12.0",
+    "highlight.svelte": "0.1.3",
+    "jsdom": "29.1.1",
+    "postcss": "8.5.32",
+    "prettier": "3.9.10",
+    "prettier-plugin-svelte": "4.1.1",
+    "prettier-plugin-tailwindcss": "0.8.1",
+    "publint": "0.3.25",
+    "svelte": "^5.57.3",
+    "svelte-check": "4.7.8",
+    "tailwind-merge": "3.7.0",
+    "tailwindcss": "4.3.3",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.72.1",
+    "vite": "8.3.5",
+    "vitest": "4.1.12"
   },
   "keywords": [
     "svelte"