v1.7.1

Author: shinokada

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.7.1
+
+### Patch Changes
+
+- fix: #1642
+  feat: both the checkbox and its children are inside the label, making the text clickable
+
 ## 1.7.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {

src/routes/docs/components/stepper.md

@@ -225,6 +225,7 @@ Use this example to show the number of steps inside a timeline component using i
 ```
 
 ## Stepper with form
+
 Use this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.
 
 ```svelte example

src/routes/docs/forms/phone-input.md

@@ -310,7 +310,7 @@ The PhoneInput component provides customizable styling through six distinct clas
   import { PhoneInput } from "flowbite-svelte";
 </script>
 
-<PhoneInput aria-describedby="helper-text-explanation" id="phone-input" placeholder="123-456-7890" required classes={{ defaultInput: "border-blue-500", defaultDiv:"ps-4"}}/>
+<PhoneInput aria-describedby="helper-text-explanation" id="phone-input" placeholder="123-456-7890" required classes={{ defaultInput: "border-blue-500", defaultDiv: "ps-4" }} />
 ```
 
 ## See also

static/llm/components/stepper.md

@@ -211,6 +211,40 @@ Use this example to show the number of steps inside a timeline component using i
 />
 ```
 
+## Stepper with form
+
+Use this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.
+
+```svelte
+<script lang="ts">
+  import { ProgressStepper, Label, Input, Button } from "flowbite-svelte";
+</script>
+
+<ProgressStepper steps={[{ status: "completed" }, { status: "current" }, { status: "pending" }]} classes={{ progressstepper: "mb-8" }} />
+<form action="#">
+  <h3 class="mb-4 text-lg leading-none font-medium text-gray-900 dark:text-white">Invoice details</h3>
+  <div class="mb-4 grid gap-4 sm:grid-cols-2">
+    <div>
+      <Label for="username" class="mb-2">Username</Label>
+      <Input type="text" name="username" id="username" placeholder="username.example" required />
+    </div>
+    <div>
+      <Label for="email" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Email</Label>
+      <Input type="email" name="email" id="email" placeholder="[email protected]" required />
+    </div>
+    <div>
+      <Label for="password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Password</Label>
+      <Input type="password" name="password" id="password" placeholder="•••••••••" required />
+    </div>
+    <div>
+      <Label for="confirm-password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Confirm password</Label>
+      <Input type="password" name="confirm-password" id="confirm-password" placeholder="•••••••••" required />
+    </div>
+  </div>
+  <Button type="submit">Next Step: Payment Info</Button>
+</form>
+```
+
 ## Component data
 
 ### BreadcrumbStepper

static/llm/forms/phone-input.md

@@ -287,6 +287,18 @@ Use this example to verify a phone number via SMS or phone call using a dropdown
 </form>
 ```
 
+## Classes
+
+The PhoneInput component provides customizable styling through six distinct class slots: `defaultDiv` for the icon container positioning, `phonesvg` for the phone icon styling, `defaultInput` for the standard input field appearance, `floatingSpan` for floating label positioning, `floatingInput` for the floating variant input styling, and `labelFloating` for animated label transitions. Each class can be overridden using the classes prop to customize the component's appearance.
+
+```svelte
+<script>
+  import { PhoneInput } from "flowbite-svelte";
+</script>
+
+<PhoneInput aria-describedby="helper-text-explanation" id="phone-input" placeholder="123-456-7890" required classes={{ defaultInput: "border-blue-500", defaultDiv: "ps-4" }} />
+```
+
 ## See also
 
 - [Input field](https://flowbite-svelte.com/llm/forms/input-field.md)