diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
index a7d93ec..2fde4bd 100644
--- a/src/components/Breadcrumb.astro
+++ b/src/components/Breadcrumb.astro
@@ -34,7 +34,7 @@ const { items, separator = "/" } = Astro.props as {
                 ) : (
                     <a
                         href={item.url}
-                        class="wr:flex wr:items-center wr:gap-2 wr:text-gray-800 wr:dark:text-gray-200 wr:hover:underline wr:hover:text-blue-600 wr:hover:dark:text-blue-400"
+                        class="wr:flex wr:items-center wr:gap-2 wr:text-gray-500 wr:dark:text-gray-200 wr:hover:underline wr:hover:text-blue-600 wr:hover:dark:text-blue-400"
                     >
                         {item.icon && (
                             <Icon name={item.icon} class={`wr:size-4`} />
diff --git a/src/components/Field.astro b/src/components/Field.astro
index 0c728e4..0b98920 100644
--- a/src/components/Field.astro
+++ b/src/components/Field.astro
@@ -42,6 +42,9 @@ interface Props extends HTMLAttributes<"div"> {
     suffixText?: string;
     iconLeft?: string;
     iconRight?: string;
+    min?: number;
+    max?: number;
+    step?: number;
     size?: "sm" | "md" | "lg";
     class?: string;
 }
@@ -161,6 +164,9 @@ const controlWrap = "wr:relative";
                                 .filter(Boolean)
                                 .join(" ") || undefined
                         }
+                        min={p.kind === "number" ? p.min : undefined}
+                        max={p.kind === "number" ? p.max : undefined}
+                        step={p.kind === "number" ? p.step : undefined}
                         value={
                             typeof p.value === "string" ||
                             typeof p.value === "number"