@julianelda/domos 1.1.0 → 1.2.0

package/dist/assets/{styles.css → background.css}

@@ -23,14 +23,3 @@ body {
       transparent 1px
     );
 }
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}

package/dist/button/button.mocks.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from "./button.types.ts";
+export declare const buttonPropsPrimary: ButtonProps;
+export declare const buttonPropsSecondary: ButtonProps;

package/dist/button/button.mocks.js

@@ -0,0 +1,18 @@
+export const buttonPropsPrimary = {
+    id: "primary-button",
+    onClick: () => {
+        console.log("");
+    },
+    style: "primary",
+    text: "Primary button",
+    type: "button",
+};
+export const buttonPropsSecondary = {
+    id: "secondary-button",
+    onClick: () => {
+        console.log("");
+    },
+    style: "secondary",
+    text: "Secondary button",
+    type: "button",
+};

package/dist/button/button.stories.svelte

@@ -1,11 +1,14 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { fn } from "storybook/test";
+
+  import { buttonPropsPrimary, buttonPropsSecondary } from "./button.mocks.js";
   import Button from "./button.svelte";
 
   const { Story } = defineMeta({
-    title: "Button",
-    component: Button,
+    args: {
+      onclick: fn(),
+    },
     argTypes: {
       id: { control: "text" },
       style: {
@@ -18,26 +21,15 @@
         options: ["button", "submit"],
       },
     },
-    args: {
-      onclick: fn(),
-    },
+    component: Button,
+    title: "Button",
   });
 </script>
 
 <Story
   name="Primary"
-  args={{
-    id: "button",
-    style: "primary",
-    text: "Button primary",
-    type: "button",
-  }} />
+  args={buttonPropsPrimary} />
 
 <Story
   name="Secondary"
-  args={{
-    id: "button",
-    style: "secondary",
-    text: "Button secondary",
-    type: "button",
-  }} />
+  args={buttonPropsSecondary} />

package/dist/button/button.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-  interface Props {
-    id: string;
-    onClick: () => void;
-    style: "primary" | "secondary";
-    text: string;
-    type: "button" | "submit";
-  }
+  import type { ButtonProps } from "./button.types.js";
 
   const {
     id,
@@ -13,7 +7,7 @@
     style = "primary",
     text,
     type = "button",
-  }: Props = $props();
+  }: ButtonProps = $props();
 </script>
 
 <button

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

@@ -1,10 +1,4 @@
-interface Props {
-    id: string;
-    onClick: () => void;
-    style: "primary" | "secondary";
-    text: string;
-    type: "button" | "submit";
-}
-declare const Button: import("svelte").Component<Props, {}, "">;
+import type { ButtonProps } from "./button.types.ts";
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/button/button.types.d.ts

@@ -0,0 +1,7 @@
+export interface ButtonProps {
+    id: string;
+    onClick: () => void;
+    style: "primary" | "secondary";
+    text: string;
+    type: "button" | "submit";
+}

package/dist/button/button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/card/card.stories.svelte

@@ -1,10 +1,11 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import Card from "./card.svelte";
 
   const { Story } = defineMeta({
-    title: "Card",
     component: Card,
+    title: "Card",
   });
 </script>
 

package/dist/checkbox/checkbox.mocks.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from "./checkbox.types.ts";
+export declare const checkboxProps: CheckboxProps;

package/dist/checkbox/checkbox.mocks.js

@@ -0,0 +1,8 @@
+export const checkboxProps = {
+    id: "checkbox-id",
+    label: "Checkbox label",
+    onChange: () => {
+        console.log("");
+    },
+    value: true,
+};

package/dist/checkbox/checkbox.stories.svelte

@@ -1,44 +1,42 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { fn } from "storybook/test";
+
+  import { checkboxProps } from "./checkbox.mocks.js";
   import Checkbox from "./checkbox.svelte";
 
   const { Story } = defineMeta({
-    title: "Checkbox",
-    component: Checkbox,
+    args: {
+      onChange: fn(),
+    },
     argTypes: {
+      hideLabel: { control: "boolean" },
       id: { control: "text" },
       label: { control: "text" },
       value: { control: "boolean" },
-      hideLabel: { control: "boolean" },
-    },
-    args: {
-      onChange: fn(),
     },
+    component: Checkbox,
+    title: "Checkbox",
   });
 </script>
 
 <Story
   name="Checked"
   args={{
-    id: "checkbox-checked",
-    label: "Checked Checkbox",
+    ...checkboxProps,
     value: true,
   }} />
 
 <Story
   name="Unchecked"
   args={{
-    id: "checkbox-unchecked",
-    label: "Unchecked Checkbox",
+    ...checkboxProps,
     value: false,
   }} />
 
 <Story
   name="Hidden Label"
   args={{
-    id: "checkbox-hidden-label",
-    label: "Hidden Label Checkbox",
-    value: false,
+    ...checkboxProps,
     hideLabel: true,
   }} />

package/dist/checkbox/checkbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import InputLabel from "../input-label/input-label.svelte";
+
   import type { CheckboxProps } from "./checkbox.types.js";
 
   const { hideLabel, id, label, onChange, value }: CheckboxProps = $props();

package/dist/index.d.ts

@@ -1,4 +1,11 @@
+import "./assets/style/styles.css";
 export { default as Button } from "./button/button.svelte";
 export { default as Card } from "./card/card.svelte";
+export { default as Checkbox } from "./checkbox/checkbox.svelte";
+export { default as InputButton } from "./input-button/input-button.svelte";
+export { default as InputField } from "./input-field/input-field.svelte";
+export { default as InputLabel } from "./input-label/input-label.svelte";
+export { default as InputSelect } from "./input-select/input-select.svelte";
 export { default as Input } from "./input/input.svelte";
+export { default as SelectField } from "./select-field/select-field.svelte";
 export { default as Select } from "./select/select.svelte";

package/dist/index.js

@@ -1,4 +1,11 @@
+import "./assets/style/styles.css";
 export { default as Button } from "./button/button.svelte";
 export { default as Card } from "./card/card.svelte";
+export { default as Checkbox } from "./checkbox/checkbox.svelte";
+export { default as InputButton } from "./input-button/input-button.svelte";
+export { default as InputField } from "./input-field/input-field.svelte";
+export { default as InputLabel } from "./input-label/input-label.svelte";
+export { default as InputSelect } from "./input-select/input-select.svelte";
 export { default as Input } from "./input/input.svelte";
+export { default as SelectField } from "./select-field/select-field.svelte";
 export { default as Select } from "./select/select.svelte";

package/dist/input/input.mocks.d.ts

@@ -0,0 +1,5 @@
+import type { InputProps } from "./input.types.ts";
+export declare const inputProps1: InputProps;
+export declare const inputProps2: InputProps;
+export declare const inputProps3: InputProps;
+export declare const inputProps4: InputProps;

package/dist/input/input.mocks.js

@@ -0,0 +1,18 @@
+import { inputFieldProps1, inputFieldProps2, inputFieldProps3, inputFieldProps4, } from "./../input-field/input-field.mocks.js";
+export const inputProps1 = {
+    ...inputFieldProps1,
+    label: "Input text",
+    placeholder: "Placeholder",
+};
+export const inputProps2 = {
+    ...inputFieldProps2,
+    label: "Input number",
+};
+export const inputProps3 = {
+    ...inputFieldProps3,
+    label: "Input search",
+};
+export const inputProps4 = {
+    ...inputFieldProps4,
+    label: "Input number with limit",
+};

package/dist/input/input.stories.svelte

@@ -0,0 +1,42 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { fn } from "storybook/test";
+
+  import Input from "./input.svelte";
+
+  const { Story } = defineMeta({
+    args: {
+      onChange: fn(),
+    },
+    argTypes: {
+      hideLabel: { control: "boolean" },
+      id: { control: "text" },
+      label: { control: "text" },
+      value: { control: "boolean" },
+    },
+    component: Input,
+    title: "Input",
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{
+    id: "input-id-1",
+    type: "text",
+    label: "Input Label",
+    value: "Input Value",
+    placeholder: "Placeholder Text",
+  }} />
+
+<Story
+  name="Borderless"
+  args={{
+    id: "input-id-1",
+    type: "text",
+    label: "Input Label",
+    value: "Input Value",
+    placeholder: "Placeholder Text",
+    borderless: true,
+    hideLabel: true,
+  }} />

package/dist/input/input.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Input;
+type Input = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Input from "./input.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/input/input.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import InputField from "../input-field/input-field.svelte";
   import InputLabel from "../input-label/input-label.svelte";
+
   import type { InputProps } from "./input.types.js";
 
   const {
+    borderless,
     disabled,
     hideLabel,
     id,
@@ -16,19 +18,18 @@
   }: InputProps = $props();
 </script>
 
-<div class="flex-1">
+<div class="flex flex-1 flex-col gap-1">
   <InputLabel
     {hideLabel}
     {id}
     {label} />
-  <div class="mt-1">
-    <InputField
-      {disabled}
-      {id}
-      {onChange}
-      {onKeyDown}
-      {placeholder}
-      {type}
-      {value} />
-  </div>
+  <InputField
+    {borderless}
+    {disabled}
+    {id}
+    {onChange}
+    {onKeyDown}
+    {placeholder}
+    {type}
+    {value} />
 </div>

package/dist/input-button/input-button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import InputField from "../input-field/input-field.svelte";
   import InputLabel from "../input-label/input-label.svelte";
+
   import type { InputButtonProps } from "./input-button.types.js";
 
   const {

package/dist/input-field/input-field.mocks.d.ts

@@ -0,0 +1,6 @@
+import type { InputFieldProps } from "./input-field.types.ts";
+export declare const inputFieldProps1: InputFieldProps;
+export declare const inputFieldProps2: InputFieldProps;
+export declare const inputFieldProps3: InputFieldProps;
+export declare const inputFieldProps4: InputFieldProps;
+export declare const inputFieldProps5: InputFieldProps;

package/dist/input-field/input-field.mocks.js

@@ -0,0 +1,25 @@
+export const inputFieldProps1 = {
+    id: "input-id-1",
+    type: "text",
+    value: "Input value",
+};
+export const inputFieldProps2 = {
+    id: "input-id-2",
+    type: "number",
+    value: 100,
+};
+export const inputFieldProps3 = {
+    id: "input-id-3",
+    type: "search",
+    value: "Search query",
+};
+export const inputFieldProps4 = {
+    id: "input-id-4",
+    type: "number",
+    value: 100,
+};
+export const inputFieldProps5 = {
+    id: "input-id-5",
+    type: "range",
+    value: 10,
+};

package/dist/input-field/input-field.svelte

@@ -2,6 +2,7 @@
   import type { InputFieldProps } from "./input-field.types.js";
 
   const {
+    borderless = false,
     disabled = false,
     id,
     onChange,
@@ -23,6 +24,22 @@
   {type}
   {value}
   class={[
-    "form-input block w-full appearance-none border border-ink-gray bg-white p-2 px-3 text-ink-black ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate dark:text-app-text-dark",
+    "form-input block w-full appearance-none border text-ink-black dark:text-app-text-dark",
+    borderless === true
+      ? "border-0 bg-transparent p-0 ring-0 outline-none focus:ring-0 focus:outline-none"
+      : "border-ink-gray bg-white p-2 px-3 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate",
     withIconLeft === true ? "rounded-l-md" : "rounded-md",
   ]} />
+
+<style>
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+</style>

package/dist/input-field/input-field.types.d.ts

@@ -1,10 +1,12 @@
 export interface InputFieldProps {
+    borderless?: boolean;
     disabled?: boolean;
     id: string;
     onChange?: (value: number | string) => void;
     onKeyDown?: (value: number | string) => void;
     placeholder?: string;
-    type: "number" | "search" | "text";
+    type: InputFieldTypes;
     value: number | string;
     withIconLeft?: boolean;
 }
+export type InputFieldTypes = "number" | "range" | "search" | "text";

package/dist/input-label/input-label.types.d.ts

@@ -2,5 +2,5 @@ export interface InputLabelProps {
     hideLabel?: boolean;
     id: string;
     label: string;
-    value?: string;
+    value?: number | string;
 }

package/dist/input-select/input-select.mocks.d.ts

@@ -0,0 +1,3 @@
+import type { InputSelectProps } from "./input-select.types.ts";
+export declare const inputSelectProps1: InputSelectProps;
+export declare const inputSelectProps2: InputSelectProps;

package/dist/input-select/input-select.mocks.js

@@ -0,0 +1,21 @@
+import { selectFieldOptions1, selectFieldOptions2, } from "./../select-field/select-field.mocks.js";
+export const inputSelectProps1 = {
+    inputId: "input-id-1",
+    inputLabel: "Currency amount",
+    inputValue: "100",
+    options: [...selectFieldOptions1],
+    selectId: "select-id-1",
+    selectLabel: "Currency select",
+    selectValue: selectFieldOptions1[0].value,
+    type: "text",
+};
+export const inputSelectProps2 = {
+    inputId: "input-id-2",
+    inputLabel: "Currency amount",
+    inputValue: "100",
+    options: [...selectFieldOptions2],
+    selectId: "select-id-2",
+    selectLabel: "Currency select",
+    selectValue: selectFieldOptions2[2].value,
+    type: "text",
+};

package/dist/input-select/input-select.svelte

@@ -2,6 +2,7 @@
   import InputField from "../input-field/input-field.svelte";
   import InputLabel from "../input-label/input-label.svelte";
   import SelectField from "../select-field/select-field.svelte";
+
   import type { InputSelectProps } from "./input-select.types.js";
 
   const {

package/dist/input-select/input-select.types.d.ts

@@ -1,3 +1,5 @@
+import type { InputFieldTypes } from "./../input-field/input-field.types.ts";
+import type { SelectFieldOption } from "./../select-field/select-field.types.ts";
 export interface InputSelectProps {
     hideLabel?: boolean;
     inputDisabled?: boolean;
@@ -8,12 +10,9 @@ export interface InputSelectProps {
     onInputChange?: (value: number | string) => void;
     onInputKeydown?: (key: number | string) => void;
     onSelectChange?: (value: string) => void;
-    options: {
-        label: string;
-        value: string;
-    }[];
+    options: SelectFieldOption[];
     selectId: string;
     selectLabel: string;
     selectValue: string;
-    type: "number" | "search" | "text";
+    type: InputFieldTypes;
 }

package/dist/select/select.mocks.d.ts

@@ -0,0 +1,3 @@
+import type { SelectProps } from "./select.types.ts";
+export declare const selectProps1: SelectProps;
+export declare const selectProps2: SelectProps;

package/dist/select/select.mocks.js

@@ -0,0 +1,11 @@
+import { selectFieldProps1, selectFieldProps2, } from "./../select-field/select-field.mocks.js";
+export const selectProps1 = {
+    ...selectFieldProps1,
+    label: "Select currency",
+    value: selectFieldProps1.options[0].value,
+};
+export const selectProps2 = {
+    ...selectFieldProps2,
+    label: "Select currency",
+    value: selectFieldProps2.options[2].value,
+};

package/dist/select/select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import InputLabel from "../input-label/input-label.svelte";
   import SelectField from "../select-field/select-field.svelte";
+
   import type { SelectProps } from "./select.types.js";
 
   const { hideLabel, id, label, onChange, options, value }: SelectProps =

package/dist/select-field/select-field.mocks.d.ts

@@ -0,0 +1,5 @@
+import type { SelectFieldOption, SelectFieldProps } from "./select-field.types.ts";
+export declare const selectFieldOptions1: SelectFieldOption[];
+export declare const selectFieldOptions2: SelectFieldOption[];
+export declare const selectFieldProps1: SelectFieldProps;
+export declare const selectFieldProps2: SelectFieldProps;

package/dist/select-field/select-field.mocks.js

@@ -0,0 +1,50 @@
+export const selectFieldOptions1 = [
+    {
+        label: "Euro",
+        value: "EUR",
+    },
+    {
+        label: "British Pound",
+        value: "GBP",
+    },
+    {
+        label: "Japanese Yen",
+        value: "JPY",
+    },
+    {
+        label: "United States Dollar",
+        value: "USD",
+    },
+];
+export const selectFieldOptions2 = [
+    {
+        label: "EUR",
+        value: "EUR",
+    },
+    {
+        label: "GBP",
+        value: "GBP",
+    },
+    {
+        label: "JPY",
+        value: "JPY",
+    },
+    {
+        label: "USD",
+        value: "USD",
+    },
+];
+export const selectFieldProps1 = {
+    id: "select-id-1",
+    inInputField: false,
+    onChange: () => { },
+    options: [...selectFieldOptions1],
+    value: selectFieldOptions1[0].value,
+};
+export const selectFieldProps2 = {
+    id: "select-id-2",
+    inInputField: false,
+    onChange: () => { },
+    options: [...selectFieldOptions2],
+    value: selectFieldOptions2[2].value,
+};

package/dist/select-field/select-field.svelte

@@ -12,7 +12,7 @@
 
 <select
   class={[
-    "w-full form-select appearance-none rounded-md border border-ink-gray py-2 pr-8 pl-2 text-ink-black focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate dark:text-ink-white",
+    "form-select w-full appearance-none rounded-md border border-ink-gray py-2 pr-8 pl-2 text-ink-black focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate dark:text-ink-white",
     inInputField && "h-full rounded-l-none bg-transparent",
     !inInputField && "block pl-3",
   ]}

package/dist/select-field/select-field.types.d.ts

@@ -1,10 +1,11 @@
+export interface SelectFieldOption {
+    label: string;
+    value: string;
+}
 export interface SelectFieldProps {
     id: string;
     inInputField?: boolean;
     onChange: (value: string) => void;
-    options: {
-        label: string;
-        value: string;
-    }[];
+    options: SelectFieldOption[];
     value: string;
 }

package/dist/tailwind.css

@@ -1,9 +1,4 @@
 @import "tailwindcss";
 @import "@julianelda/chroma";
 
-@custom-variant dark (&:is(.dark *));
-
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
-
 @source "./**/*.{svelte,js,ts}";

package/package.json

@@ -1,47 +1,53 @@
 {
   "name": "@julianelda/domos",
-  "version": "1.1.0",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && bun run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "test": "vitest --project=client",
-    "test:e2e": "playwright test",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
+  "version": "1.2.0",
+  "keywords": [
+    "svelte"
+  ],
   "files": [
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
-  "svelte": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "type": "module",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./tailwind": "./dist/tailwind.css",
+    "./background": "./dist/assets/background.css"
   },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
+  "scripts": {
+    "build": "vite build && bun run prepack",
+    "build-storybook": "storybook build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "format": "oxfmt",
+    "lint": "oxlint && prettier --check **/*.svelte && eslint .",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "prepare": "svelte-kit sync || echo ''",
+    "prettier": "prettier --check **/*.svelte",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@julianelda/chroma": "^1.0.0",
+    "@julianelda/stilo": "^1.0.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
-    "@eslint/js": "^9.39.2",
-    "@lucide/svelte": "^0.563.1",
+    "@eslint/js": "^10.0.1",
+    "@julianelda/lexis": "^2.6.0",
+    "@lucide/svelte": "^1.16.0",
     "@playwright/test": "^1.58.1",
     "@prettier/plugin-oxc": "^0.1.3",
     "@storybook/addon-a11y": "^10.2.7",
@@ -50,37 +56,36 @@
     "@storybook/sveltekit": "^10.2.7",
     "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^24",
-    "@vitest/browser-playwright": "^4.0.18",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.2.7",
+    "@typescript/native-preview": "^7.0.0-dev.20260521.1",
+    "@vitest/browser-playwright": "^4.1.7",
+    "eslint": "^10.4.0",
+    "eslint-plugin-oxlint": "^1.66.0",
+    "eslint-plugin-perfectionist": "^5.9.0",
     "eslint-plugin-svelte": "^3.14.0",
     "globals": "^17.3.0",
+    "oxfmt": "^0.51.0",
+    "oxlint": "^1.66.0",
+    "oxlint-tsgolint": "^0.23.0",
     "playwright": "^1.58.1",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.3.17",
     "storybook": "^10.2.7",
-    "svelte": "^5.49.2",
+    "svelte": "^5.55.9",
     "svelte-check": "^4.3.6",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5.9.3",
+    "tailwindcss": "^4.3.0",
     "typescript-eslint": "^8.54.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "vitest-browser-svelte": "^2.0.2"
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7",
+    "vitest-browser-svelte": "^2.1.1"
   },
-  "keywords": [
-    "svelte"
-  ],
-  "dependencies": {
-    "@julianelda/chroma": "^1.0.0",
-    "@julianelda/stilo": "^1.0.2"
+  "peerDependencies": {
+    "svelte": "^5.0.0"
   }
 }