From e9999598a008c47d372144c820c1517d9aaf43cf Mon Sep 17 00:00:00 2001 From: sarthakworks <39374452+sarthakworks@users.noreply.github.com> Date: Thu, 19 Feb 2026 19:53:54 +0530 Subject: [PATCH 1/2] Added Recipes.md --- docs/content/recipes.md | 173 +++++++++++++++++++++++++++++++++++++++ docs/templates/base.html | 1 + 2 files changed, 174 insertions(+) create mode 100644 docs/content/recipes.md diff --git a/docs/content/recipes.md b/docs/content/recipes.md new file mode 100644 index 0000000..a2c0989 --- /dev/null +++ b/docs/content/recipes.md @@ -0,0 +1,173 @@ ++++ +title = "Recipes" +description = "Practical patterns built with Oat primitives." ++++ + +Small, composable patterns built from semantic HTML + Oat styles. + +## Grouped accordion (single-open) + +Use native `
` elements with the same `name` to make a group where opening one closes the others. + +{% demo() %} +```html +
+

FAQ

+ +
+ What is Oat? +

Oat is a tiny semantic CSS + WebComponents UI library.

+
+ +
+ Does this need JavaScript? +

No. The single-open behavior comes from native HTML details grouping.

+
+ +
+ Can I keep multiple open? +

Yes. Remove the shared name attribute.

+
+
+``` +{% end %} + +### Notes + +- This is progressive enhancement friendly and works without custom JS. +- Keep summary text short and descriptive for accessibility. + +## Slider patterns (without a custom component) + +Use native `` for performance and accessibility. + +### Simple range slider + +{% demo() %} +```html +
+
+ + +
+ +
+ + +
+ +
+ +
+ +
+
+
+``` +{% end %} + + +### Range (min-max), multiple slider range + +{% demo() %} +```html +
+ $20 - $80 + + + + + + +
+``` +{% end %} + +### Range (min-max), multiple thumbs single slider + +{% demo() %} +```html +
+
+ $20 + $80 +
+ +
+
+
+ + + + +
+ + +
+``` +{% end %} + +### Notes + +- `` supports `min`, `max`, `step` and `disabled`. +- Vertical is as simple as adding a CSS `rotate()` rule if someone wants that. +- Multi-thumb range slider can be useful, but it'll have to be done by stacking 2 ``s together and hacking it rather than creating a custom slider from scratch to keep it simple. diff --git a/docs/templates/base.html b/docs/templates/base.html index 520e81e..6da32df 100644 --- a/docs/templates/base.html +++ b/docs/templates/base.html @@ -49,6 +49,7 @@
  • Customizing
  • Other tiny libs
  • Extensions
    • +
  • Recipes
  • From bcb7e726b90285cb781ac52b46d4cbf731105e48 Mon Sep 17 00:00:00 2001 From: sarthakworks <39374452+sarthakworks@users.noreply.github.com> Date: Thu, 19 Feb 2026 21:15:55 +0530 Subject: [PATCH 2/2] notes fix --- docs/content/recipes.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/recipes.md b/docs/content/recipes.md index a2c0989..08d611f 100644 --- a/docs/content/recipes.md +++ b/docs/content/recipes.md @@ -168,6 +168,6 @@ Use native `` for performance and accessibility. ### Notes -- `` supports `min`, `max`, `step` and `disabled`. -- Vertical is as simple as adding a CSS `rotate()` rule if someone wants that. -- Multi-thumb range slider can be useful, but it'll have to be done by stacking 2 ``s together and hacking it rather than creating a custom slider from scratch to keep it simple. +- Standard `` attributes like `min`, `max`, `step`, and `disabled` are fully supported. +- Vertical sliders created using a CSS `rotate()` transform. +- Multi-thumb sliders achieved by stacking two range inputs, providing a lightweight alternative to complex custom libraries.