feat: enhance FwbInput component with additional size option and improved padding

[Sqrcz]

Summary by CodeRabbit

• New Features

  • Added Extra Large (xl) size across Input, Range, and Toggle components.

• Documentation

  • Updated examples to show all sizes (including xl), unified placeholders/labels to "enter your first name", switched numeric bindings to explicit number form, consolidated some examples to shared state, and updated defaults from 10 to 50.

• Styling

  • Adjusted input padding, range thumb sizing, and related stylesheet changes to support the new size set and visual consistency.

[netlify]

✅ Deploy Preview for sensational-seahorse-8635f8 ready!

Name	Link
🔨 Latest commit	6487be3
🔍 Latest deploy log	https://app.netlify.com/projects/sensational-seahorse-8635f8/deploys/69a37ac474383700089bc4a3
😎 Deploy Preview	https://deploy-preview-433--sensational-seahorse-8635f8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 803de97 and 6487be3.

📒 Files selected for processing (2)

• docs/components/toggle/examples/FwbToggleExampleSize.vue
• src/components/FwbToggle/composables/useToggleClasses.ts

---

📝 Walkthrough

Walkthrough

Adds an "xl" (Extra Large) size across Input, Range, and Toggle components: updates the public InputSize type, extends class mappings (padding/thumb sizes), adjusts component styling for ranges, and updates docs/examples (standardized placeholders, v-model.number, initial values, and new xl examples).

Changes

Cohort / File(s)	Summary
FwbInput — types & class logic src/components/FwbInput/types.ts, src/components/FwbInput/composables/useInputClasses.ts	Expanded InputSize type to include 'xl'; replaced shorthand padding with explicit horizontal/vertical padding tokens and added xl mapping. Verify visual padding changes.
FwbInput — docs & examples docs/components/input.md, docs/components/input/examples/FwbInputExampleSize.vue	Documentation and example updated: standardized placeholders ("enter your first name"), label adjusted to "Medium (default)", and new Extra Large (xl) example added. Mostly template/content edits.
FwbRange — component & classes src/components/FwbRange/FwbRange.vue, src/components/FwbRange/composables/useRangeClasses.ts	Introduced xl size with explicit thumb sizing, added fwb-range-input class prefix, moved to unscoped CSS using Tailwind @apply, and simplified thumb selectors. Review cross-browser thumb styling and scope change.
FwbRange — docs & examples docs/components/range.md, docs/components/range/examples/*	Examples reformatted to multi-line components, many examples use v-model.number, initial example values changed from 10→50, ranges consolidated to share a single v-model in one example, and Extra Large example added. Check shared v-model behavior.
FwbToggle — docs & class mapping docs/components/toggle/examples/FwbToggleExampleSize.vue, src/components/FwbToggle/composables/useToggleClasses.ts	Added xl toggle example in docs; composable API updated to accept size: Ref<InputSize>, reworked size and color mappings, and now returns additional computed values (labelOrder, toggleClasses, toggleColor, toggleSize). Review public prop change.
Docs formatting & minor edits docs/components/input.md, docs/components/range.md, various examples	Several template reorderings (class attribute order), code formatting to multi-line components, and minor label/text adjustments (e.g., "Min-Max range"). Content-only and formatting changes across docs.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• chore: dependency update #420: Edits to src/components/FwbInput/composables/useInputClasses.ts—overlaps with input class/token adjustments.
• chore: refactoring and dependency updates #409: Modifies range component styling/composables—related to thumb sizing and class changes in useRangeClasses.ts.
• Feature: Improved FwbInput component flexibility #365: Changes to FwbInput class logic and size/type definitions—overlaps with types.ts and input class mappings.

Poem

🐰
A hop, a nibble, an XL delight,
I stretched my paws and widened the night.
Padding and thumbs now dress up bold,
Docs sing the sizes, new and old.
Hooray — more room to bound and bite! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately reflects the main changes: it mentions enhancing FwbInput with an additional size option (xl) and improved padding, which are core changes visible across multiple files (types.ts, useInputClasses.ts, and documentation examples).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/components/FwbRange/FwbRange.vue (1)

60-71: Consider consolidating duplicate thumb styles.

Both ::-webkit-slider-thumb and ::-moz-range-thumb share identical styling. While functional, this could be consolidated if the build tool supports it.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/FwbRange/FwbRange.vue` around lines 60 - 71, Consolidate the
duplicate thumb rules by merging the two vendor-specific selectors into a single
rule so the shared styles for .fwb-range-input::-webkit-slider-thumb and
.fwb-range-input::-moz-range-thumb are declared once; keep both pseudo-element
selectors (webkit and moz) in the selector list and include the shared
declarations (appearance overrides and Tailwind `@apply` classes) inside that
single rule to avoid repetition while preserving vendor support.

src/components/FwbRange/composables/useRangeClasses.ts (1)

17-20: Remove unused disabled prop from type definition.

The disabled ref is defined in UseRangeClassesProps but never accessed in the useRangeClasses function body. Only props.size.value is used. Remove it to keep the type definition focused on what the composable actually needs.

♻️ Proposed cleanup

 export type UseRangeClassesProps = {
   size: Ref<InputSize>
-  disabled: Ref<boolean>
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/FwbRange/composables/useRangeClasses.ts` around lines 17 - 20,
The UseRangeClassesProps type currently declares a disabled: Ref<boolean> that
is not used inside useRangeClasses; remove the disabled property from
UseRangeClassesProps and update any call sites or tests that construct a
UseRangeClassesProps object to stop passing disabled (or provide only size),
ensuring useRangeClasses continues to access props.size.value as before; verify
TypeScript types compile and adjust imports or mocks referencing
UseRangeClassesProps if needed.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/FwbRange/composables/useRangeClasses.ts`:
- Around line 17-20: The UseRangeClassesProps type currently declares a
disabled: Ref<boolean> that is not used inside useRangeClasses; remove the
disabled property from UseRangeClassesProps and update any call sites or tests
that construct a UseRangeClassesProps object to stop passing disabled (or
provide only size), ensuring useRangeClasses continues to access
props.size.value as before; verify TypeScript types compile and adjust imports
or mocks referencing UseRangeClassesProps if needed.

In `@src/components/FwbRange/FwbRange.vue`:
- Around line 60-71: Consolidate the duplicate thumb rules by merging the two
vendor-specific selectors into a single rule so the shared styles for
.fwb-range-input::-webkit-slider-thumb and .fwb-range-input::-moz-range-thumb
are declared once; keep both pseudo-element selectors (webkit and moz) in the
selector list and include the shared declarations (appearance overrides and
Tailwind `@apply` classes) inside that single rule to avoid repetition while
preserving vendor support.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7b1e539 and 803de97.

📒 Files selected for processing (8)

• docs/components/range.md
• docs/components/range/examples/FwbRangeExample.vue
• docs/components/range/examples/FwbRangeExampleDisabled.vue
• docs/components/range/examples/FwbRangeExampleMinMax.vue
• docs/components/range/examples/FwbRangeExampleSize.vue
• docs/components/range/examples/FwbRangeExampleSteps.vue
• src/components/FwbRange/FwbRange.vue
• src/components/FwbRange/composables/useRangeClasses.ts