@rcarls/rc-fab 0.5.0 → 0.6.0
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 +9 -0
- package/README.md +18 -19
- package/package.json +2 -2
- package/dist/types/packages/rc-fab/src/rc-fab.test.d.ts +0 -0
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -27,8 +27,7 @@ import '@rcarls/rc-fab/define';
|
|
|
27
27
|
```html
|
|
28
28
|
<!-- Back to top (scroll-triggered) -->
|
|
29
29
|
<rc-fab scroll-reveal>
|
|
30
|
-
<button type="button" aria-label="Back to top"
|
|
31
|
-
onclick="scrollTo({ top: 0, behavior: 'smooth' })">
|
|
30
|
+
<button type="button" aria-label="Back to top" onclick="scrollTo({ top: 0, behavior: 'smooth' })">
|
|
32
31
|
<span aria-hidden="true">↑</span>
|
|
33
32
|
</button>
|
|
34
33
|
</rc-fab>
|
|
@@ -51,23 +50,23 @@ import '@rcarls/rc-fab/define';
|
|
|
51
50
|
|
|
52
51
|
## Key attributes and CSS custom properties
|
|
53
52
|
|
|
54
|
-
| Attribute / property | Description
|
|
55
|
-
|
|
|
56
|
-
| `position`
|
|
57
|
-
| `scroll-reveal`
|
|
58
|
-
|
|
59
|
-
| CSS custom property
|
|
60
|
-
|
|
|
61
|
-
| `--rc-fab-position`
|
|
62
|
-
| `--rc-fab-scroll-threshold` | `300px`
|
|
63
|
-
| `--rc-fab-scroll-timeline`
|
|
64
|
-
| `--rc-fab-radius`
|
|
65
|
-
| `--rc-fab-size`
|
|
66
|
-
| `--rc-fab-bg`
|
|
67
|
-
| `--rc-fab-color`
|
|
68
|
-
| `--rc-fab-shadow`
|
|
69
|
-
| `--rc-fab-inset-block`
|
|
70
|
-
| `--rc-fab-inset-inline`
|
|
53
|
+
| Attribute / property | Description |
|
|
54
|
+
| -------------------- | ------------------------------------------------------------------------------- |
|
|
55
|
+
| `position` | Viewport corner: `bottom-end` (default), `bottom-start`, `top-end`, `top-start` |
|
|
56
|
+
| `scroll-reveal` | Reveal the FAB only after scrolling past `--rc-fab-scroll-threshold` |
|
|
57
|
+
|
|
58
|
+
| CSS custom property | Default | Description |
|
|
59
|
+
| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
60
|
+
| `--rc-fab-position` | `fixed` | CSS position value. Use `absolute` for layout-relative placement |
|
|
61
|
+
| `--rc-fab-scroll-threshold` | `300px` | Scroll distance before the FAB appears (requires `scroll-reveal`) |
|
|
62
|
+
| `--rc-fab-scroll-timeline` | `scroll(root block)` | Override scroll target for the CSS animation path (e.g. `scroll(nearest block)`) |
|
|
63
|
+
| `--rc-fab-radius` | _(native)_ | Border-radius; defers to the native button's radius until set. Use `9999px` for pill-shaped, `50%` for a circle, or `1rem` for Material rounded-square |
|
|
64
|
+
| `--rc-fab-size` | _(native)_ | Height and minimum width; defers to native button sizing until set (packaged themes set `3.5rem`) |
|
|
65
|
+
| `--rc-fab-bg` | _(native)_ | Button background color; defers to the native button's background until set |
|
|
66
|
+
| `--rc-fab-color` | _(native)_ | Button foreground color; defers to the native button's color until set |
|
|
67
|
+
| `--rc-fab-shadow` | _(native)_ | Elevation shadow; defers to the native button's shadow until set |
|
|
68
|
+
| `--rc-fab-inset-block` | `1.5rem` | Distance from the block-axis edge |
|
|
69
|
+
| `--rc-fab-inset-inline` | `1.5rem` | Distance from the inline-axis edge |
|
|
71
70
|
|
|
72
71
|
## Scroll-reveal behaviour
|
|
73
72
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.6.0",
|
|
7
7
|
"description": "Sticky floating action button modeled after the Material 3 Floating action button, wrapping a consumer-supplied button with scroll-aware visibility.",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@rcarls/rc-common": "0.
|
|
48
|
+
"@rcarls/rc-common": "0.6.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
File without changes
|