@karmo-co/drift-kit-reference 23.7.2 → 23.8.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/manifest/components/slider.md +39 -0
- package/manifest/index.json +28 -1
- package/manifest/setup.md +14 -14
- package/package.json +1 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Slider (`slider`)
|
|
2
|
+
|
|
3
|
+
Choose a value along a range by dragging, or one of a few named settings in order (stepped), where the order itself means something: less to more rounded, thinner to thicker, tighter to more spacious.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Anatomy (HTML)
|
|
7
|
+
|
|
8
|
+
```text
|
|
9
|
+
div.dk-component-slider[data-size][data-stepped]
|
|
10
|
+
div.dk-component-slider__head (optional)
|
|
11
|
+
label.dk-component-slider__label
|
|
12
|
+
output.dk-component-slider__value (optional)
|
|
13
|
+
div.dk-component-slider__control
|
|
14
|
+
span.dk-component-slider__track (aria-hidden)
|
|
15
|
+
span.dk-component-slider__fill
|
|
16
|
+
span.dk-component-slider__thumb (aria-hidden)
|
|
17
|
+
input.dk-component-slider__input (type="range")
|
|
18
|
+
div.dk-component-slider__stops (stepped, aria-hidden)
|
|
19
|
+
span.dk-component-slider__stop[data-value][data-chosen]
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Attributes
|
|
23
|
+
|
|
24
|
+
| Attribute | Values the stylesheet styles |
|
|
25
|
+
|---|---|
|
|
26
|
+
| `data-chosen` | (present or absent) |
|
|
27
|
+
| `data-pseudo-class` | `active`, `focus`, `hover` |
|
|
28
|
+
| `data-size` | `large`, `small` |
|
|
29
|
+
| `data-stepped` | (present or absent) |
|
|
30
|
+
|
|
31
|
+
## React
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { Slider } from '@karmo-co/drift-kit/react';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Component tokens
|
|
38
|
+
|
|
39
|
+
`--dk-component-slider-thumb-size`, `--dk-component-slider-small-thumb-size`, `--dk-component-slider-large-thumb-size`, `--dk-component-slider-track-height`, `--dk-component-slider-small-track-height`, `--dk-component-slider-large-track-height`, `--dk-component-slider-radius`, `--dk-component-slider-thumb-border-width`, `--dk-component-slider-tick-size`, `--dk-component-slider-halo-size`, `--dk-component-slider-halo-strength`, `--dk-component-slider-press-scale`, `--dk-component-slider-focus-ring-width`, `--dk-component-slider-focus-ring-offset`, `--dk-component-slider-gap`, `--dk-component-slider-stops-gap`, `--dk-component-slider-track-surface`, `--dk-component-slider-fill-surface`, `--dk-component-slider-thumb-surface`, `--dk-component-slider-thumb-border`, `--dk-component-slider-thumb-shadow`, `--dk-component-slider-tick-color`, `--dk-component-slider-focus-ring`, `--dk-component-slider-disabled-track`, `--dk-component-slider-disabled-fill`, `--dk-component-slider-disabled-thumb`, `--dk-component-slider-label-font-family`, `--dk-component-slider-label-font-size`, `--dk-component-slider-label-line-height`, `--dk-component-slider-small-label-font-size`, `--dk-component-slider-small-label-line-height`, `--dk-component-slider-large-label-font-size`, `--dk-component-slider-large-label-line-height`, `--dk-component-slider-label-font-weight`, `--dk-component-slider-label-color`, `--dk-component-slider-value-color`, `--dk-component-slider-stop-font-size`, `--dk-component-slider-stop-line-height`, `--dk-component-slider-stop-color`, `--dk-component-slider-stop-color-hover`, `--dk-component-slider-stop-chosen-color`, `--dk-component-slider-stop-chosen-font-weight`, `--dk-component-slider-disabled-text`
|
package/manifest/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schema": 1,
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.8.1",
|
|
4
4
|
"built": "2026-10-27",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
@@ -208,6 +208,11 @@
|
|
|
208
208
|
"name": "Sidebar",
|
|
209
209
|
"purpose": "An app's main navigation. A rail on a desktop that collapses to its glyphs, and on a phone a bottom tab bar or a drawer, from one set of markup."
|
|
210
210
|
},
|
|
211
|
+
{
|
|
212
|
+
"id": "slider",
|
|
213
|
+
"name": "Slider",
|
|
214
|
+
"purpose": "Choose a value along a range by dragging, or one of a few named settings in order (stepped), where the order itself means something: less to more rounded, thinner to thicker, tighter to more spacious."
|
|
215
|
+
},
|
|
211
216
|
{
|
|
212
217
|
"id": "stepper",
|
|
213
218
|
"name": "Stepper",
|
|
@@ -1235,6 +1240,28 @@
|
|
|
1235
1240
|
"components": [],
|
|
1236
1241
|
"tokens": []
|
|
1237
1242
|
}
|
|
1243
|
+
},
|
|
1244
|
+
"23.8.0": {
|
|
1245
|
+
"added": {
|
|
1246
|
+
"components": [
|
|
1247
|
+
"slider"
|
|
1248
|
+
],
|
|
1249
|
+
"tokens": []
|
|
1250
|
+
},
|
|
1251
|
+
"removed": {
|
|
1252
|
+
"components": [],
|
|
1253
|
+
"tokens": []
|
|
1254
|
+
}
|
|
1255
|
+
},
|
|
1256
|
+
"23.8.1": {
|
|
1257
|
+
"added": {
|
|
1258
|
+
"components": [],
|
|
1259
|
+
"tokens": []
|
|
1260
|
+
},
|
|
1261
|
+
"removed": {
|
|
1262
|
+
"components": [],
|
|
1263
|
+
"tokens": []
|
|
1264
|
+
}
|
|
1238
1265
|
}
|
|
1239
1266
|
}
|
|
1240
1267
|
}
|
package/manifest/setup.md
CHANGED
|
@@ -53,23 +53,23 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
|
|
|
53
53
|
Both scripts are deferred, and an icon script goes after `components.js`, which replaces the icon registry when it runs: an icon script that runs first loses its set. Every tag carries its file's `integrity` from the table below and `crossorigin="anonymous"`, so a file whose bytes changed never loads. In this order:
|
|
54
54
|
|
|
55
55
|
```html
|
|
56
|
-
<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.
|
|
57
|
-
<script src="https://storage.googleapis.com/drift-kit-public/23.
|
|
58
|
-
<script src="https://storage.googleapis.com/drift-kit-public/23.
|
|
56
|
+
<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.8.1/drift-kit.css" integrity="sha384-xDADCHUyP7oW8XIytxfHrzNEuXlXYH5o2dT1ylHZZ+MP1DU05LKKo7bAR4+eVP9e" crossorigin="anonymous" />
|
|
57
|
+
<script src="https://storage.googleapis.com/drift-kit-public/23.8.1/components.js" integrity="sha384-VRH1DhmlydwOoO7c24W2FjmktpA0002EuRTnyO5/bUvefqdJE/qJYvhx9wvma3b0" crossorigin="anonymous" defer></script>
|
|
58
|
+
<script src="https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
| File | Address | Integrity |
|
|
62
62
|
|---|---|---|
|
|
63
|
-
| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
64
|
-
| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
65
|
-
| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
66
|
-
| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
67
|
-
| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
68
|
-
| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
69
|
-
| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
70
|
-
| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
71
|
-
| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
72
|
-
| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.
|
|
63
|
+
| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-kit.css` | `sha384-xDADCHUyP7oW8XIytxfHrzNEuXlXYH5o2dT1ylHZZ+MP1DU05LKKo7bAR4+eVP9e` |
|
|
64
|
+
| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-kit.min.css` | `sha384-wRw7kcVqtagnOxbuntK4XHZrvopEwGBjC16eu53NAJdytFdvCTMgY7H78MBHhfMA` |
|
|
65
|
+
| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/components.js` | `sha384-VRH1DhmlydwOoO7c24W2FjmktpA0002EuRTnyO5/bUvefqdJE/qJYvhx9wvma3b0` |
|
|
66
|
+
| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
|
|
67
|
+
| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
|
|
68
|
+
| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
|
|
69
|
+
| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
|
|
70
|
+
| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
|
|
71
|
+
| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
|
|
72
|
+
| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.8.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
|
|
73
73
|
|
|
74
74
|
### Integrity for 23.4.0
|
|
75
75
|
|
|
@@ -97,5 +97,5 @@ The behaviour script initialises every component on the page when it loads. Mark
|
|
|
97
97
|
The kit class names the drift-critique capture script keys on, at this version. Pass them to it as `--kit '<this JSON>'` so its alignment and reduced-motion checks read this version's names.
|
|
98
98
|
|
|
99
99
|
```json
|
|
100
|
-
{"version":"23.
|
|
100
|
+
{"version":"23.8.1","field":".dk-component-input__field","trigger":".dk-component-select__trigger","button":".dk-component-button","iconButton":".dk-component-icon-button","spinners":[".dk-component-loading-spinner",".dk-component-button__spinner"],"componentPrefix":"dk-component-","fieldRoot":"dk-component-input"}
|
|
101
101
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@karmo-co/drift-kit-reference",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.8.1",
|
|
4
4
|
"description": "Reference documentation of Karmo's private Drift design system, for Karmo's Claude skills. Documentation only.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"drift-kit-ref": "bin/drift-kit-ref.js"
|