slot-text 0.3.1 → 0.3.2
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/README.md +22 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/style.css +2 -1
package/README.md
CHANGED
|
@@ -15,10 +15,32 @@ Dependency-free text roll animation for tiny, tactile UI labels.
|
|
|
15
15
|
|
|
16
16
|
## 📦 Install
|
|
17
17
|
|
|
18
|
+
Choose your preferred package manager:
|
|
19
|
+
|
|
20
|
+
**npm**
|
|
21
|
+
|
|
18
22
|
```bash
|
|
19
23
|
npm install slot-text
|
|
20
24
|
```
|
|
21
25
|
|
|
26
|
+
**pnpm**
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pnpm add slot-text
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**Bun**
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
bun add slot-text
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**Yarn**
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
yarn add slot-text
|
|
42
|
+
```
|
|
43
|
+
|
|
22
44
|
## 🚀 Quick start
|
|
23
45
|
|
|
24
46
|
```ts
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { animateSlotText, buildSlotText, chromatic, clearSlotText, } from "./slotText.js";
|
|
2
|
-
import { animateSlotText, buildSlotText, clearSlotText
|
|
2
|
+
import { animateSlotText, buildSlotText, clearSlotText } from "./slotText.js";
|
|
3
3
|
/**
|
|
4
4
|
* Create a text-roll controller for one element.
|
|
5
5
|
*
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.slot-text {
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
white-space: pre;
|
|
4
|
+
align-items: baseline;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
.char-slot {
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
instead of letting the row overflow like it does at rest. */
|
|
13
14
|
flex: none;
|
|
14
15
|
justify-content: center;
|
|
16
|
+
align-items: baseline;
|
|
15
17
|
/* Clip only vertically: the roll needs a top/bottom mask, but glyph side
|
|
16
18
|
bearings, kerning overhang and the settle tilt must stay visible so
|
|
17
19
|
letters never look cropped. (overflow: hidden is the legacy fallback.) */
|
|
@@ -19,7 +21,6 @@
|
|
|
19
21
|
overflow-x: visible;
|
|
20
22
|
overflow-y: clip;
|
|
21
23
|
line-height: 1.3;
|
|
22
|
-
vertical-align: bottom;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
/* Cells appearing from or collapsing to empty change width drastically, so
|