kosui 0.0.32 → 0.0.33

package/dist/alert/alert.svelte

@@ -7,7 +7,6 @@
     type Radius,
     type RadiusProp,
   } from "../base.js";
-  import { mergeProps } from "../merge-props.js";
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
 
@@ -47,138 +46,123 @@
     outlined = false,
     elevated = false,
     children,
+    class: className,
     ...props
   }: AlertProps = $props();
 </script>
 
 <div
   role="alert"
-  {...mergeProps(props, {
-    class: [
-      "base",
-      `radius-${radius}`,
-      `variant-${variant}`,
-      `color-${color}`,
-      outlined && "outlined",
-      elevated && "elevated",
-    ],
-  })}
+  class={[
+    "base",
+    `variant-${variant}`,
+    `color-${color}`,
+    `radius-${radius}`,
+    outlined && "outlined",
+    elevated && "elevated",
+    className,
+  ]}
+  {...props}
 >
   {@render children()}
 </div>
 
-<style>@layer components { 
-  .base {
+<style>@layer components { .radius-none {
+  --radius: none;
+}
+
+.radius-xs {
+  --radius: 0.125rem;
+}
+
+.radius-sm {
+  --radius: 0.25rem;
+}
+
+.radius-md {
+  --radius: 0.375rem;
+}
+
+.radius-lg {
+  --radius: 0.5rem;
+}
+
+.radius-xl {
+  --radius: 0.75rem;
+}
+
+.radius-2xl {
+  --radius: 1rem;
+}
+
+.radius-3xl {
+  --radius: 1.5rem;
+}
+
+.radius-4xl {
+  --radius: 2rem;
+}
+
+.radius-full {
+  --radius: calc(infinity * 1px);
+}
+
+.color-primary {
+  --color-main: var(--md-sys-color-primary);
+  --color-on-main: var(--md-sys-color-on-primary);
+  --color-tonal: var(--md-sys-color-primary-container);
+  --color-on-tonal: var(--md-sys-color-on-primary-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.color-secondary {
+  --color-main: var(--md-sys-color-secondary);
+  --color-on-main: var(--md-sys-color-on-secondary);
+  --color-tonal: var(--md-sys-color-secondary-container);
+  --color-on-tonal: var(--md-sys-color-on-secondary-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.color-tertiary {
+  --color-main: var(--md-sys-color-tertiary);
+  --color-on-main: var(--md-sys-color-on-tertiary);
+  --color-tonal: var(--md-sys-color-tertiary-container);
+  --color-on-tonal: var(--md-sys-color-on-tertiary-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.color-error {
+  --color-main: var(--md-sys-color-error);
+  --color-on-main: var(--md-sys-color-on-error);
+  --color-tonal: var(--md-sys-color-error-container);
+  --color-on-tonal: var(--md-sys-color-on-error-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.base {
     padding: calc(var(--spacing) * 4);
+    border-radius: var(--radius);
   }
 
-  .elevated {
-    box-shadow:
-      0 1px 3px 0 rgb(from var(--md-sys-color-shadow, rgb(0 0 0)) r g b / 0.2),
-      0 1px 2px -1px
-        rgb(from var(--md-sys-color-shadow, rgb(0 0 0)) r g b / 0.2);
-  }
-
-  .variant-filled.color-primary {
-    background-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  .variant-filled.color-secondary {
-    background-color: var(--md-sys-color-secondary);
-    color: var(--md-sys-color-on-secondary);
-  }
-
-  .variant-filled.color-tertiary {
-    background-color: var(--md-sys-color-tertiary);
-    color: var(--md-sys-color-on-tertiary);
-  }
-
-  .variant-filled.color-error {
-    background-color: var(--md-sys-color-error);
-    color: var(--md-sys-color-on-error);
-  }
-
-  .variant-filled.color-plain {
-    background-color: var(--md-sys-color-inverse-surface);
-    color: var(--md-sys-color-inverse-on-surface);
+.variant-filled {
+    background-color: var(--color-main);
+    color: var(--color-on-main);
   }
 
-  .variant-tonal.color-primary {
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
+.variant-tonal {
+    background-color: var(--color-tonal);
+    color: var(--color-on-tonal);
   }
 
-  .variant-tonal.color-secondary {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  .variant-tonal.color-tertiary {
-    background-color: var(--md-sys-color-tertiary-container);
-    color: var(--md-sys-color-on-tertiary-container);
-  }
-
-  .variant-tonal.color-error {
-    background-color: var(--md-sys-color-error-container);
-    color: var(--md-sys-color-on-error-container);
-  }
-
-  .variant-tonal.color-plain {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  .outlined {
+.outlined {
     border-width: 1px;
     border-style: solid;
+    border-color: var(--color-main);
   }
 
-  .outlined.color-primary {
-    border-color: var(--md-sys-color-primary);
-  }
-
-  .outlined.color-secondary {
-    border-color: var(--md-sys-color-secondary);
-  }
-
-  .outlined.color-tertiary {
-    border-color: var(--md-sys-color-tertiary);
-  }
-
-  .outlined.color-error {
-    border-color: var(--md-sys-color-error);
-  }
-
-  .outlined.color-plain {
-    border-color: var(--md-sys-color-outline);
-  }
-
-  .radius-none {
-    border-radius: 0;
-  }
-
-  .radius-xs {
-    border-radius: var(--radius-xs);
-  }
-
-  .radius-sm {
-    border-radius: var(--radius-sm);
-  }
-
-  .radius-md {
-    border-radius: var(--radius-lg);
-  }
-
-  .radius-lg {
-    border-radius: var(--radius-2xl);
-  }
-
-  .radius-xl {
-    border-radius: var(--radius-4xl);
-  }
-
-  .radius-full {
-    border-radius: calc(infinity * 1px);
+.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);
   }
  }</style>

package/dist/alert/alert.svelte.d.ts

@@ -17,7 +17,7 @@ export type AlertElevated = boolean;
 export type AlertElevatedProp = {
     elevated?: AlertElevated;
 };
-export declare const ALERT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export declare const ALERT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
 export type AlertRadius = Radius;
 export type AlertRadiusProp = RadiusProp;
 export type AlertProps = {

package/dist/base.css

@@ -0,0 +1,71 @@
+.radius-none {
+  --radius: none;
+}
+
+.radius-xs {
+  --radius: 0.125rem;
+}
+
+.radius-sm {
+  --radius: 0.25rem;
+}
+
+.radius-md {
+  --radius: 0.375rem;
+}
+
+.radius-lg {
+  --radius: 0.5rem;
+}
+
+.radius-xl {
+  --radius: 0.75rem;
+}
+
+.radius-2xl {
+  --radius: 1rem;
+}
+
+.radius-3xl {
+  --radius: 1.5rem;
+}
+
+.radius-4xl {
+  --radius: 2rem;
+}
+
+.radius-full {
+  --radius: calc(infinity * 1px);
+}
+
+.color-primary {
+  --color-main: var(--md-sys-color-primary);
+  --color-on-main: var(--md-sys-color-on-primary);
+  --color-tonal: var(--md-sys-color-primary-container);
+  --color-on-tonal: var(--md-sys-color-on-primary-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.color-secondary {
+  --color-main: var(--md-sys-color-secondary);
+  --color-on-main: var(--md-sys-color-on-secondary);
+  --color-tonal: var(--md-sys-color-secondary-container);
+  --color-on-tonal: var(--md-sys-color-on-secondary-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.color-tertiary {
+  --color-main: var(--md-sys-color-tertiary);
+  --color-on-main: var(--md-sys-color-on-tertiary);
+  --color-tonal: var(--md-sys-color-tertiary-container);
+  --color-on-tonal: var(--md-sys-color-on-tertiary-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}
+
+.color-error {
+  --color-main: var(--md-sys-color-error);
+  --color-on-main: var(--md-sys-color-on-error);
+  --color-tonal: var(--md-sys-color-error-container);
+  --color-on-tonal: var(--md-sys-color-on-error-container);
+  --color-shadow: var(--md-sys-color-shadow);
+}

package/dist/base.d.ts

@@ -18,7 +18,7 @@ export type Size = (typeof SIZES)[number];
 export type SizeProp = {
     size?: Size;
 };
-export declare const RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export declare const RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
 export type Radius = (typeof RADII)[number];
 export type RadiusProp = {
     radius?: Radius;

package/dist/base.js

@@ -17,7 +17,18 @@ export const COLORS = [
 ];
 export const SHAPES = ["square", "rounded", "circle"];
 export const SIZES = ["xs", "sm", "md", "lg", "xl"];
-export const RADII = ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export const RADII = [
+    "none",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "full",
+];
 export const UNDERLINES = ["always", "hover", "none"];
 const hoverBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", variant === "filled" && "hover:opacity-90", variant === "tonal" && "hover:opacity-80", variant === "text" && "hover:opacity-80", variant === "elevated" &&
     color === "primary" &&

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

@@ -12,7 +12,7 @@ export type InputColorProp = ColorProp;
 export declare const INPUT_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type InputSize = Size;
 export type InputSizeProp = SizeProp;
-export declare const INPUT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export declare const INPUT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
 export type InputRadius = Radius;
 export type InputRadiusProp = RadiusProp;
 export type InputProps = ElementRef & ClassName & InputVariantProp & InputSizeProp & InputRadiusProp & InputColorProp & Omit<HTMLInputAttributes, "size">;

package/dist/slider/slider.svelte.d.ts

@@ -9,7 +9,7 @@ export type SliderColorProp = ColorProp;
 export declare const SLIDER_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type SliderSize = Size;
 export type SliderSizeProp = SizeProp;
-export declare const SLIDER_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export declare const SLIDER_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
 export type SliderRadius = Radius;
 export type SliderRadiusProp = RadiusProp;
 export type Mark = {

package/dist/switch/switch.svelte.d.ts

@@ -9,7 +9,7 @@ export type SwitchColorProp = ColorProp;
 export declare const SWITCH_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type SwitchSize = Size;
 export type SwitchSizeProp = SizeProp;
-export declare const SWITCH_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export declare const SWITCH_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
 export type SwitchRadius = Radius;
 export type SwitchRadiusProp = RadiusProp;
 export type SwitchProps = {

package/dist/textarea/textarea.svelte.d.ts

@@ -12,7 +12,7 @@ export type TextareaColorProp = ColorProp;
 export declare const TEXTAREA_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type TextareaSize = Size;
 export type TextareaSizeProp = SizeProp;
-export declare const TEXTAREA_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export declare const TEXTAREA_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
 export type TextareaRadius = Radius;
 export type TextareaRadiusProp = RadiusProp;
 export type TextareaProps = ClassName & TextareaVariantProp & TextareaSizeProp & TextareaRadiusProp & TextareaColorProp & Omit<HTMLTextareaAttributes, "size">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.2",
-    "@lucide/svelte": "^0.542.0",
+    "@lucide/svelte": "^0.544.0",
     "marked": "^16.1.1"
   },
   "peerDependencies": {
@@ -53,7 +53,7 @@
     "globals": "^16.0.0",
     "highlight.js": "^11.11.1",
     "highlight.svelte": "^0.1.3",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.0",
     "postcss": "^8.5.6",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",