@rogieking/figui3 3.0.2 → 3.1.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/README.md +19 -1
- package/dist/.min-css/fig-y6bay2cg.css +2 -0
- package/dist/.min-css/fig.js +1 -0
- package/dist/base.css +99 -0
- package/dist/components.css +3978 -0
- package/dist/fig.css +2 -0
- package/dist/fig.js +72 -69
- package/dist/fig.min.js +399 -0
- package/fig.js +187 -26
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -300,7 +300,16 @@ A segmented button group for exclusive selection.
|
|
|
300
300
|
| Attribute | Type | Default | Description |
|
|
301
301
|
|-----------|------|---------|-------------|
|
|
302
302
|
| `name` | string | — | Control group identifier |
|
|
303
|
-
| `value` | string | — | Selected segment value |
|
|
303
|
+
| `value` | string | — | Selected segment value (trimmed, case-sensitive match) |
|
|
304
|
+
|
|
305
|
+
Selection behavior:
|
|
306
|
+
- If `fig-segmented-control[value]` is set, it takes precedence and selects the first matching segment.
|
|
307
|
+
- Segment match value resolves from `fig-segment[value]` when present and non-empty; otherwise it falls back to `fig-segment` text content (`textContent.trim()`).
|
|
308
|
+
- If no segment matches the control `value`, current selection is preserved.
|
|
309
|
+
|
|
310
|
+
Events:
|
|
311
|
+
- Emits bubbling `input` and `change` events when user interaction changes selection.
|
|
312
|
+
- Event `detail` contains the resolved selected value.
|
|
304
313
|
|
|
305
314
|
```html
|
|
306
315
|
<fig-segmented-control>
|
|
@@ -310,6 +319,15 @@ A segmented button group for exclusive selection.
|
|
|
310
319
|
</fig-segmented-control>
|
|
311
320
|
```
|
|
312
321
|
|
|
322
|
+
```html
|
|
323
|
+
<!-- Text fallback: no value attrs, value resolves from text -->
|
|
324
|
+
<fig-segmented-control value="Center">
|
|
325
|
+
<fig-segment>Left</fig-segment>
|
|
326
|
+
<fig-segment>Center</fig-segment>
|
|
327
|
+
<fig-segment>Right</fig-segment>
|
|
328
|
+
</fig-segmented-control>
|
|
329
|
+
```
|
|
330
|
+
|
|
313
331
|
---
|
|
314
332
|
|
|
315
333
|
### Slider (`<fig-slider>`)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var r="./fig-y6bay2cg.css";export{r as default};
|
package/dist/base.css
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
html {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
color: var(--figma-color-text);
|
|
7
|
+
-webkit-font-smoothing: antialiased;
|
|
8
|
+
-moz-osx-font-smoothing: grayscale;
|
|
9
|
+
font-family: var(--font-family);
|
|
10
|
+
font-size: 16px;
|
|
11
|
+
font-weight: var(--body-medium-fontWeight);
|
|
12
|
+
letter-spacing: var(--body-letter-spacing);
|
|
13
|
+
background-color: var(--figma-color-bg);
|
|
14
|
+
}
|
|
15
|
+
body {
|
|
16
|
+
font-size: var(--body-medium-fontSize);
|
|
17
|
+
letter-spacing: var(--body-letter-spacing);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h1,
|
|
21
|
+
h2 {
|
|
22
|
+
font-weight: var(--body-large-strong-fontWeight);
|
|
23
|
+
font-size: var(--body-large-fontSize);
|
|
24
|
+
}
|
|
25
|
+
h3 {
|
|
26
|
+
font-weight: var(--body-medium-strong-fontWeight);
|
|
27
|
+
font-size: var(--body-medium-fontSize);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
hr {
|
|
31
|
+
height: 1px;
|
|
32
|
+
border: none;
|
|
33
|
+
background-color: var(--figma-color-border);
|
|
34
|
+
margin: var(--spacer-2) 0;
|
|
35
|
+
|
|
36
|
+
&[vertical] {
|
|
37
|
+
height: 100%;
|
|
38
|
+
width: 1px;
|
|
39
|
+
margin: 0 var(--spacer-2);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
*,
|
|
44
|
+
*:before,
|
|
45
|
+
*:after {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
::selection {
|
|
50
|
+
background-color: var(--figma-color-text-selection);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
::-moz-selection {
|
|
54
|
+
background-color: var(--figma-color-text-selection);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* helper classes/defaults */
|
|
58
|
+
::-webkit-scrollbar {
|
|
59
|
+
width: var(--spacer-1);
|
|
60
|
+
/* Width of the vertical scrollbar */
|
|
61
|
+
height: var(--spacer-1);
|
|
62
|
+
/* Height of the horizontal scrollbar */
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
::-webkit-scrollbar-thumb {
|
|
66
|
+
background-color: var(--figma-color-bg-tertiary);
|
|
67
|
+
border-radius: calc(var(--spacer-1) / 2);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
::-webkit-scrollbar-thumb:hover {
|
|
71
|
+
background-color: var(--figma-color-bg-secondary);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* For Firefox */
|
|
75
|
+
* {
|
|
76
|
+
scrollbar-width: thin;
|
|
77
|
+
scrollbar-color: var(--figma-color-bg-tertiary)
|
|
78
|
+
var(--figma-color-bg-secondary);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.subtle {
|
|
82
|
+
color: var(--figma-color-text-tertiary);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Defaults */
|
|
86
|
+
p {
|
|
87
|
+
margin: var(--spacer-2) 0;
|
|
88
|
+
line-height: 1rem;
|
|
89
|
+
color: var(--figma-color-text-secondary);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
label {
|
|
93
|
+
color: var(--figma-color-text-secondary);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
h2 {
|
|
97
|
+
font-weight: var(--body-medium-strong-fontWeight);
|
|
98
|
+
margin: var(--spacer-2) 0;
|
|
99
|
+
}
|