styleframe 3.4.0 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +72 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,77 @@
|
|
|
1
1
|
# styleframe
|
|
2
2
|
|
|
3
|
+
## 3.5.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#201](https://github.com/styleframe-dev/styleframe/pull/201) [`4ae6cd4`](https://github.com/styleframe-dev/styleframe/commit/4ae6cd46269f4619f6d8f3eb481f7aed29450db3) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Lock `fluid.screen` at `fluid.max-width` past the maximum viewport to prevent fluid values from extrapolating beyond their intended ceiling
|
|
8
|
+
- `useFluidViewportDesignTokens` now registers a media query at `min-width: <maxWidth>` that pins `fluid.screen` to `calc(var(--fluid--max-width) * 1px)`
|
|
9
|
+
- The lock breakpoint derives from the `maxWidth` option, supporting both numeric (`1440`) and string (`90rem`) values
|
|
10
|
+
|
|
11
|
+
## 3.5.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#196](https://github.com/styleframe-dev/styleframe/pull/196) [`5a37154`](https://github.com/styleframe-dev/styleframe/commit/5a37154540057d115a834961b708a77cbf032783) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Dropdown recipe with item, separator, label, arrow, tests, and documentation
|
|
16
|
+
- Add `useDropdownRecipe` container recipe with 3 colors (light, dark, neutral), 3 visual styles (solid, soft, subtle), and 3 sizes (sm, md, lg) — uses `@z-index.dropdown` for surface stacking
|
|
17
|
+
- Add `useDropdownItemRecipe` for clickable menu options with hover, focus, active, and disabled states across all color × variant combinations
|
|
18
|
+
- Add `useDropdownSeparatorRecipe` for visual dividers between item groups (color axis only)
|
|
19
|
+
- Add `useDropdownLabelRecipe` for uppercase muted group headings (color and size axes)
|
|
20
|
+
- Add `useDropdownArrowRecipe` using the CSS border-triangle technique — points upward by default to sit above the panel, registers an `@dropdown.arrow.size` variable (default `6px`)
|
|
21
|
+
- Add Dropdown documentation page with usage examples, anatomy, accessibility guidance (menu/menuitem/separator roles, keyboard navigation, roving tabindex), API reference, and FAQ
|
|
22
|
+
|
|
23
|
+
- [#198](https://github.com/styleframe-dev/styleframe/pull/198) [`eabf9f4`](https://github.com/styleframe-dev/styleframe/commit/eabf9f4150cddc240065e72d38d3c01042fb140c) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add fluid typography to the default design tokens preset
|
|
24
|
+
- Add `useFluidClamp` to compose a `clamp()`-style fluid value between a min/max pair using a viewport-driven breakpoint reference
|
|
25
|
+
- Add `useFluidViewportDesignTokens` registering `fluid.breakpoint`, `fluid.min`, and `fluid.max` viewport variables that drive the clamp interpolation
|
|
26
|
+
- Add `useFluidFontSizeDesignTokens` registering `font-size.min/max` (with `xs`–`xl` multipliers off the type scale) and resolving `font-size.{xs..xl}` to fluid clamp values
|
|
27
|
+
- Wire fluid font sizing into `useDesignTokensPreset` so the default preset ships fluid type out of the box
|
|
28
|
+
- Add `fluidFontSize` and `fluidViewport` value helpers and documentation for the new fluid composables and the presets reference page
|
|
29
|
+
|
|
30
|
+
- [#195](https://github.com/styleframe-dev/styleframe/pull/195) [`73a4c55`](https://github.com/styleframe-dev/styleframe/commit/73a4c551a403fcda250b108fb93c9ab7394b27c2) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add HamburgerMenu recipe with toggle button, animations, tests, and documentation
|
|
31
|
+
- Add `useHamburgerMenuRecipe` icon-toggle button recipe with 3 colors (light, dark, neutral), 3 sizes (sm, md, lg), 7 open-state animations (close, arrow-{up,down,left,right}, minus, plus), and a boolean `active` axis
|
|
32
|
+
- Inner bars rendered via `.hamburger-menu-inner` + `::before`/`::after` pseudo-elements; per-size dimensions and per-animation transforms registered via `setup(s)` callback
|
|
33
|
+
- Add HamburgerMenu Storybook stories with all-variants and all-sizes preview grids, plus per-color, per-size, per-animation, and disabled/active stories
|
|
34
|
+
- Add HamburgerMenu documentation page with usage examples, accessibility guidance (`aria-expanded`, `aria-label`), API reference, and best practices
|
|
35
|
+
|
|
36
|
+
- [#189](https://github.com/styleframe-dev/styleframe/pull/189) [`689f02b`](https://github.com/styleframe-dev/styleframe/commit/689f02bd98262c4ee7b35b92ca537ac0e50af013) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Input recipe with prefix/suffix and prepend/append slots
|
|
37
|
+
- Add `useInputRecipe` wrapper recipe with 3 colors (light, dark, neutral), 3 variants (default, soft, ghost), 3 sizes, and `invalid`/`disabled`/`readonly` boolean state axes; the wrapper owns the visual field and inherits typography into a nested `<input class="input-field">` styled via setup callback
|
|
38
|
+
- Add `useInputPrefixRecipe` and `useInputSuffixRecipe` for inline addons rendered inside the field, beside the text
|
|
39
|
+
- Add `useInputPrependRecipe` and `useInputAppendRecipe` as transparent slot containers for external addons (Buttons, dropdowns, plain text) — content brings its own visual language
|
|
40
|
+
- Add `useInputGroupRecipe` as a pure layout coordinator that flattens border-radius and collapses border-width at the seams where prepend/append meet the input, using `:has()` selectors
|
|
41
|
+
|
|
42
|
+
- [`ef662ae`](https://github.com/styleframe-dev/styleframe/commit/ef662ae696acf138a14c246b4b6f7a65ebae53c1) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Spinner recipe with circle, text, overlay, tests, and documentation
|
|
43
|
+
- Add `useSpinnerRecipe` container recipe with 4 colors (primary, light, dark, neutral) and 4 sizes (auto, sm, md, lg)
|
|
44
|
+
- Add `useSpinnerCircleRecipe` with SVG stroke-dasharray animation and keyframes
|
|
45
|
+
- Add `useSpinnerTextRecipe` for centered label overlay on the spinner
|
|
46
|
+
- Add `useSpinnerOverlayRecipe` for fixed/absolute backdrop
|
|
47
|
+
- Add Spinner documentation page with usage examples, API reference, and FAQ
|
|
48
|
+
|
|
49
|
+
- [#198](https://github.com/styleframe-dev/styleframe/pull/198) [`eabf9f4`](https://github.com/styleframe-dev/styleframe/commit/eabf9f4150cddc240065e72d38d3c01042fb140c) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Enable `fluidFontSize` by default in `useDesignTokensPreset`
|
|
50
|
+
- Calling `useDesignTokensPreset(s)` with no config now emits the fluid
|
|
51
|
+
font-size scale (`clamp()`-based `font-size.*`, `font-size.min/max`,
|
|
52
|
+
`scale.min/max`, and per-power scale variables). Previously, fluid was
|
|
53
|
+
opt-in via `fluidFontSize: true`.
|
|
54
|
+
- Pass `fluidFontSize: false` to fall back to the static `fontSize` domain.
|
|
55
|
+
- Custom `fontSize: { ... }` config is silently ignored when fluid is
|
|
56
|
+
active. Migration: add `fluidFontSize: false` alongside any custom
|
|
57
|
+
`fontSize` config you want to keep applying.
|
|
58
|
+
- Domain dependencies are now validated up front. Setting `fluidViewport:
|
|
59
|
+
false` or `scale: false` while leaving `fluidFontSize` enabled throws a
|
|
60
|
+
configuration error — both are required for the fluid scale to function.
|
|
61
|
+
Migration: add `fluidFontSize: false` whenever you disable `fluidViewport`
|
|
62
|
+
or `scale`.
|
|
63
|
+
- Internally, domains can now declare `enabled` predicates and a `requires`
|
|
64
|
+
list of config keys that must not be `false`. The preset uses this to gate
|
|
65
|
+
the fluid `scale` and `font-size` domains generically rather than via
|
|
66
|
+
ad-hoc checks inside each composable.
|
|
67
|
+
|
|
68
|
+
- [#198](https://github.com/styleframe-dev/styleframe/pull/198) [`eabf9f4`](https://github.com/styleframe-dev/styleframe/commit/eabf9f4150cddc240065e72d38d3c01042fb140c) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Accept `{ min, max }` objects in fluid range APIs
|
|
69
|
+
|
|
70
|
+
`useFluidClamp` and the per-step `values` of `useFluidFontSizeDesignTokens`
|
|
71
|
+
now accept ranges as either `[min, max]` tuples or `{ min, max }` objects.
|
|
72
|
+
The `fluidFontSize.values` config in `useDesignTokensPreset` accepts both
|
|
73
|
+
forms as well. Existing tuple call sites are unaffected.
|
|
74
|
+
|
|
3
75
|
## 3.4.0
|
|
4
76
|
|
|
5
77
|
### Minor Changes
|