@oneli8/core 1.0.0-beta.10
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/AGENTS.md +16 -0
- package/LICENSE +202 -0
- package/NOTICE +8 -0
- package/PRINCIPLES.md +48 -0
- package/README.md +130 -0
- package/ai-context.json +348 -0
- package/package.json +100 -0
- package/skills/oneli8-figma-to-code/SKILL.md +25 -0
- package/skills/oneli8-icons/SKILL.md +36 -0
- package/skills/oneli8-ui/SKILL.md +52 -0
- package/src/atoms/icon/icon.css +54 -0
- package/src/atoms/icon/icon.d.ts +19 -0
- package/src/atoms/icon/icon.js +81 -0
- package/src/atoms/icon/icons.generated.d.ts +48 -0
- package/src/atoms/icon/icons.generated.js +562 -0
- package/src/atoms/icon/index.d.ts +2 -0
- package/src/atoms/icon/index.js +2 -0
- package/src/atoms/index.d.ts +3 -0
- package/src/atoms/index.js +3 -0
- package/src/atoms/navigation-badge/index.d.ts +1 -0
- package/src/atoms/navigation-badge/index.js +1 -0
- package/src/atoms/navigation-badge/navigation-badge.css +35 -0
- package/src/atoms/navigation-badge/navigation-badge.d.ts +5 -0
- package/src/atoms/navigation-badge/navigation-badge.js +21 -0
- package/src/atoms/selection-indicator/index.d.ts +1 -0
- package/src/atoms/selection-indicator/index.js +1 -0
- package/src/atoms/selection-indicator/selection-indicator.css +160 -0
- package/src/atoms/selection-indicator/selection-indicator.d.ts +36 -0
- package/src/atoms/selection-indicator/selection-indicator.js +61 -0
- package/src/index.d.ts +3 -0
- package/src/index.js +3 -0
- package/src/materials/gem/gem.css +374 -0
- package/src/molecules/button/button.css +193 -0
- package/src/molecules/button/button.d.ts +51 -0
- package/src/molecules/button/button.js +134 -0
- package/src/molecules/button/index.d.ts +1 -0
- package/src/molecules/button/index.js +1 -0
- package/src/molecules/choice-chip/choice-chip.css +214 -0
- package/src/molecules/choice-chip/choice-chip.d.ts +27 -0
- package/src/molecules/choice-chip/choice-chip.js +170 -0
- package/src/molecules/choice-chip/index.d.ts +2 -0
- package/src/molecules/choice-chip/index.js +10 -0
- package/src/molecules/choice-item/choice-item.css +265 -0
- package/src/molecules/choice-item/choice-item.d.ts +54 -0
- package/src/molecules/choice-item/choice-item.js +153 -0
- package/src/molecules/choice-item/index.d.ts +1 -0
- package/src/molecules/choice-item/index.js +1 -0
- package/src/molecules/form-message/form-message.css +46 -0
- package/src/molecules/form-message/form-message.d.ts +23 -0
- package/src/molecules/form-message/form-message.js +73 -0
- package/src/molecules/form-message/index.d.ts +1 -0
- package/src/molecules/form-message/index.js +1 -0
- package/src/molecules/icon-button/icon-button.css +222 -0
- package/src/molecules/icon-button/icon-button.d.ts +40 -0
- package/src/molecules/icon-button/icon-button.js +121 -0
- package/src/molecules/icon-button/index.d.ts +1 -0
- package/src/molecules/icon-button/index.js +1 -0
- package/src/molecules/index.d.ts +10 -0
- package/src/molecules/index.js +10 -0
- package/src/molecules/link/index.d.ts +1 -0
- package/src/molecules/link/index.js +1 -0
- package/src/molecules/link/link.css +114 -0
- package/src/molecules/link/link.d.ts +27 -0
- package/src/molecules/link/link.js +76 -0
- package/src/molecules/navigation-item/index.js +1 -0
- package/src/molecules/navigation-item/navigation-item.css +153 -0
- package/src/molecules/navigation-item/navigation-item.js +95 -0
- package/src/molecules/select/index.js +1 -0
- package/src/molecules/select/select.css +31 -0
- package/src/molecules/select/select.js +127 -0
- package/src/molecules/selection-option/index.d.ts +1 -0
- package/src/molecules/selection-option/index.js +1 -0
- package/src/molecules/selection-option/selection-option.css +121 -0
- package/src/molecules/selection-option/selection-option.d.ts +42 -0
- package/src/molecules/selection-option/selection-option.js +97 -0
- package/src/molecules/text-field/index.d.ts +1 -0
- package/src/molecules/text-field/index.js +5 -0
- package/src/molecules/text-field/text-field.css +266 -0
- package/src/molecules/text-field/text-field.d.ts +69 -0
- package/src/molecules/text-field/text-field.js +234 -0
- package/src/molecules/token/index.d.ts +2 -0
- package/src/molecules/token/index.js +1 -0
- package/src/molecules/token/token.css +63 -0
- package/src/molecules/token/token.d.ts +35 -0
- package/src/molecules/token/token.js +83 -0
- package/src/organisms/choice-group/choice-group.css +93 -0
- package/src/organisms/choice-group/choice-group.d.ts +80 -0
- package/src/organisms/choice-group/choice-group.js +159 -0
- package/src/organisms/choice-group/index.d.ts +1 -0
- package/src/organisms/choice-group/index.js +1 -0
- package/src/organisms/choice-picker/choice-picker.css +98 -0
- package/src/organisms/choice-picker/choice-picker.d.ts +62 -0
- package/src/organisms/choice-picker/choice-picker.js +201 -0
- package/src/organisms/choice-picker/index.d.ts +1 -0
- package/src/organisms/choice-picker/index.js +1 -0
- package/src/organisms/combobox/combobox.css +40 -0
- package/src/organisms/combobox/combobox.js +309 -0
- package/src/organisms/combobox/index.js +5 -0
- package/src/organisms/index.d.ts +8 -0
- package/src/organisms/index.js +8 -0
- package/src/organisms/multi-select-field/index.d.ts +1 -0
- package/src/organisms/multi-select-field/index.js +1 -0
- package/src/organisms/multi-select-field/multi-select-field.css +76 -0
- package/src/organisms/multi-select-field/multi-select-field.d.ts +64 -0
- package/src/organisms/multi-select-field/multi-select-field.js +317 -0
- package/src/organisms/navigation-keys.js +58 -0
- package/src/organisms/segmented-control/index.d.ts +1 -0
- package/src/organisms/segmented-control/index.js +1 -0
- package/src/organisms/segmented-control/segmented-control.css +113 -0
- package/src/organisms/segmented-control/segmented-control.d.ts +43 -0
- package/src/organisms/segmented-control/segmented-control.js +163 -0
- package/src/organisms/selection-popup/index.js +1 -0
- package/src/organisms/selection-popup/selection-popup.css +90 -0
- package/src/organisms/selection-popup/selection-popup.js +100 -0
- package/src/organisms/tab-bar/index.d.ts +1 -0
- package/src/organisms/tab-bar/index.js +1 -0
- package/src/organisms/tab-bar/tab-bar.css +45 -0
- package/src/organisms/tab-bar/tab-bar.d.ts +37 -0
- package/src/organisms/tab-bar/tab-bar.js +104 -0
- package/src/organisms/tabs/index.d.ts +1 -0
- package/src/organisms/tabs/index.js +1 -0
- package/src/organisms/tabs/tabs.css +53 -0
- package/src/organisms/tabs/tabs.d.ts +48 -0
- package/src/organisms/tabs/tabs.js +152 -0
- package/styles.css +29 -0
|
@@ -0,0 +1,562 @@
|
|
|
1
|
+
// GENERATED by packages/sync/src/build-icons.mjs — do not edit by hand.
|
|
2
|
+
// Source: Figma "Oneli8 Design System — 1.0.0-beta.1", page Iconography,
|
|
3
|
+
// frame "Icon Library / Masters" (426:55). Re-run `npm run sync:icons`.
|
|
4
|
+
|
|
5
|
+
export const OL8_ICON_VIEWBOX = '0 0 24 24';
|
|
6
|
+
|
|
7
|
+
/** @type {Record<string, import('./icons.generated.js').Ol8IconEntry>} */
|
|
8
|
+
export const OL8_ICONS = {
|
|
9
|
+
"add": {
|
|
10
|
+
"category": "action",
|
|
11
|
+
"figmaNode": "418:14",
|
|
12
|
+
"mirrorInRTL": false,
|
|
13
|
+
"sourceInk": "#151817",
|
|
14
|
+
"body": "<path id=\"glyph-path\" d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
15
|
+
"elements": [
|
|
16
|
+
{
|
|
17
|
+
"tag": "path",
|
|
18
|
+
"attrs": {
|
|
19
|
+
"d": "M12 5V19M5 12H19",
|
|
20
|
+
"stroke": "currentColor",
|
|
21
|
+
"strokeWidth": "1.8",
|
|
22
|
+
"strokeLinecap": "round",
|
|
23
|
+
"strokeLinejoin": "round"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
"caution": {
|
|
29
|
+
"category": "status",
|
|
30
|
+
"figmaNode": "440:4",
|
|
31
|
+
"mirrorInRTL": false,
|
|
32
|
+
"sourceInk": "#151817",
|
|
33
|
+
"body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Stem\" d=\"M12 7V13\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Dot\" d=\"M12 17.6C12.5523 17.6 13 17.1523 13 16.6C13 16.0477 12.5523 15.6 12 15.6C11.4477 15.6 11 16.0477 11 16.6C11 17.1523 11.4477 17.6 12 17.6Z\" fill=\"currentColor\"/>",
|
|
34
|
+
"elements": [
|
|
35
|
+
{
|
|
36
|
+
"tag": "path",
|
|
37
|
+
"attrs": {
|
|
38
|
+
"d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
|
|
39
|
+
"stroke": "currentColor",
|
|
40
|
+
"strokeWidth": "1.8",
|
|
41
|
+
"strokeLinecap": "round",
|
|
42
|
+
"strokeLinejoin": "round"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"tag": "path",
|
|
47
|
+
"attrs": {
|
|
48
|
+
"d": "M12 7V13",
|
|
49
|
+
"stroke": "currentColor",
|
|
50
|
+
"strokeWidth": "1.8",
|
|
51
|
+
"strokeLinecap": "round",
|
|
52
|
+
"strokeLinejoin": "round"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"tag": "path",
|
|
57
|
+
"attrs": {
|
|
58
|
+
"d": "M12 17.6C12.5523 17.6 13 17.1523 13 16.6C13 16.0477 12.5523 15.6 12 15.6C11.4477 15.6 11 16.0477 11 16.6C11 17.1523 11.4477 17.6 12 17.6Z",
|
|
59
|
+
"fill": "currentColor"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
"check": {
|
|
65
|
+
"category": "selection",
|
|
66
|
+
"figmaNode": "391:4",
|
|
67
|
+
"mirrorInRTL": false,
|
|
68
|
+
"sourceInk": "#1a2a59",
|
|
69
|
+
"body": "<path id=\"Check Mark\" d=\"M6.9 12.15L10.2 15.45L17.1 8.55\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
70
|
+
"elements": [
|
|
71
|
+
{
|
|
72
|
+
"tag": "path",
|
|
73
|
+
"attrs": {
|
|
74
|
+
"d": "M6.9 12.15L10.2 15.45L17.1 8.55",
|
|
75
|
+
"stroke": "currentColor",
|
|
76
|
+
"strokeWidth": "1.8",
|
|
77
|
+
"strokeLinecap": "round",
|
|
78
|
+
"strokeLinejoin": "round"
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
"chevron-down": {
|
|
84
|
+
"category": "navigation",
|
|
85
|
+
"figmaNode": "521:106",
|
|
86
|
+
"mirrorInRTL": false,
|
|
87
|
+
"sourceInk": "#151817",
|
|
88
|
+
"body": "<path id=\"glyph-path\" d=\"M5 8.5L12 15.5L19 8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
89
|
+
"elements": [
|
|
90
|
+
{
|
|
91
|
+
"tag": "path",
|
|
92
|
+
"attrs": {
|
|
93
|
+
"d": "M5 8.5L12 15.5L19 8.5",
|
|
94
|
+
"stroke": "currentColor",
|
|
95
|
+
"strokeWidth": "1.8",
|
|
96
|
+
"strokeLinecap": "round",
|
|
97
|
+
"strokeLinejoin": "round"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
"chevron-up": {
|
|
103
|
+
"category": "navigation",
|
|
104
|
+
"figmaNode": "521:108",
|
|
105
|
+
"mirrorInRTL": false,
|
|
106
|
+
"sourceInk": "#151817",
|
|
107
|
+
"body": "<path id=\"glyph-path\" d=\"M5 15.5L12 8.5L19 15.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
108
|
+
"elements": [
|
|
109
|
+
{
|
|
110
|
+
"tag": "path",
|
|
111
|
+
"attrs": {
|
|
112
|
+
"d": "M5 15.5L12 8.5L19 15.5",
|
|
113
|
+
"stroke": "currentColor",
|
|
114
|
+
"strokeWidth": "1.8",
|
|
115
|
+
"strokeLinecap": "round",
|
|
116
|
+
"strokeLinejoin": "round"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
"clear": {
|
|
122
|
+
"category": "action",
|
|
123
|
+
"figmaNode": "557:4",
|
|
124
|
+
"mirrorInRTL": false,
|
|
125
|
+
"sourceInk": "#151817",
|
|
126
|
+
"body": "<path id=\"glyph-path\" d=\"M3 3L17 17M17 3L3 17\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
127
|
+
"elements": [
|
|
128
|
+
{
|
|
129
|
+
"tag": "path",
|
|
130
|
+
"attrs": {
|
|
131
|
+
"d": "M3 3L17 17M17 3L3 17",
|
|
132
|
+
"stroke": "currentColor",
|
|
133
|
+
"strokeWidth": "1.8",
|
|
134
|
+
"strokeLinecap": "round",
|
|
135
|
+
"strokeLinejoin": "round"
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
"close": {
|
|
141
|
+
"category": "action",
|
|
142
|
+
"figmaNode": "894:123",
|
|
143
|
+
"mirrorInRTL": false,
|
|
144
|
+
"sourceInk": "#151817",
|
|
145
|
+
"body": "<path id=\"glyph-path\" d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
146
|
+
"elements": [
|
|
147
|
+
{
|
|
148
|
+
"tag": "path",
|
|
149
|
+
"attrs": {
|
|
150
|
+
"d": "M6 6L18 18M18 6L6 18",
|
|
151
|
+
"stroke": "currentColor",
|
|
152
|
+
"strokeWidth": "1.8",
|
|
153
|
+
"strokeLinecap": "round",
|
|
154
|
+
"strokeLinejoin": "round"
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
},
|
|
159
|
+
"copy": {
|
|
160
|
+
"category": "action",
|
|
161
|
+
"figmaNode": "1291:153",
|
|
162
|
+
"mirrorInRTL": false,
|
|
163
|
+
"sourceInk": "#151817",
|
|
164
|
+
"body": "<path id=\"glyph-path\" d=\"M4.5 9H13.5C14.3284 9 15 9.6716 15 10.5V19.5C15 20.3284 14.3284 21 13.5 21H4.5C3.6716 21 3 20.3284 3 19.5V10.5C3 9.6716 3.6716 9 4.5 9ZM9 9V4.5C9 3.6716 9.6716 3 10.5 3H19.5C20.3284 3 21 3.6716 21 4.5V13.5C21 14.3284 20.3284 15 19.5 15H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
165
|
+
"elements": [
|
|
166
|
+
{
|
|
167
|
+
"tag": "path",
|
|
168
|
+
"attrs": {
|
|
169
|
+
"d": "M4.5 9H13.5C14.3284 9 15 9.6716 15 10.5V19.5C15 20.3284 14.3284 21 13.5 21H4.5C3.6716 21 3 20.3284 3 19.5V10.5C3 9.6716 3.6716 9 4.5 9ZM9 9V4.5C9 3.6716 9.6716 3 10.5 3H19.5C20.3284 3 21 3.6716 21 4.5V13.5C21 14.3284 20.3284 15 19.5 15H15",
|
|
170
|
+
"stroke": "currentColor",
|
|
171
|
+
"strokeWidth": "1.8",
|
|
172
|
+
"strokeLinecap": "round",
|
|
173
|
+
"strokeLinejoin": "round"
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
]
|
|
177
|
+
},
|
|
178
|
+
"critical": {
|
|
179
|
+
"category": "status",
|
|
180
|
+
"figmaNode": "418:18",
|
|
181
|
+
"mirrorInRTL": false,
|
|
182
|
+
"sourceInk": "#151817",
|
|
183
|
+
"body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Critical Mark\" d=\"M9 9L15 15M15 9L9 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
184
|
+
"elements": [
|
|
185
|
+
{
|
|
186
|
+
"tag": "path",
|
|
187
|
+
"attrs": {
|
|
188
|
+
"d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
|
|
189
|
+
"stroke": "currentColor",
|
|
190
|
+
"strokeWidth": "1.8",
|
|
191
|
+
"strokeLinecap": "round",
|
|
192
|
+
"strokeLinejoin": "round"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"tag": "path",
|
|
197
|
+
"attrs": {
|
|
198
|
+
"d": "M9 9L15 15M15 9L9 15",
|
|
199
|
+
"stroke": "currentColor",
|
|
200
|
+
"strokeWidth": "1.8",
|
|
201
|
+
"strokeLinecap": "round",
|
|
202
|
+
"strokeLinejoin": "round"
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
]
|
|
206
|
+
},
|
|
207
|
+
"forward": {
|
|
208
|
+
"category": "navigation",
|
|
209
|
+
"figmaNode": "418:16",
|
|
210
|
+
"mirrorInRTL": true,
|
|
211
|
+
"sourceInk": "#151817",
|
|
212
|
+
"body": "<path id=\"artwork\" d=\"M3 12H21M15 18L21 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
213
|
+
"elements": [
|
|
214
|
+
{
|
|
215
|
+
"tag": "path",
|
|
216
|
+
"attrs": {
|
|
217
|
+
"d": "M3 12H21M15 18L21 12L15 6",
|
|
218
|
+
"stroke": "currentColor",
|
|
219
|
+
"strokeWidth": "1.8",
|
|
220
|
+
"strokeLinecap": "round",
|
|
221
|
+
"strokeLinejoin": "round"
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
]
|
|
225
|
+
},
|
|
226
|
+
"heart": {
|
|
227
|
+
"category": "vitals",
|
|
228
|
+
"figmaNode": null,
|
|
229
|
+
"mirrorInRTL": false,
|
|
230
|
+
"candidate": true,
|
|
231
|
+
"sourceInk": "#151817",
|
|
232
|
+
"body": "<path id=\"glyph-path\" d=\"M12 21C12 21 3 15.6 3 9.6C3 6.6 5.4 4.5 8.1 4.5C9.9 4.5 11.4 5.55 12 6.9C12.6 5.55 14.1 4.5 15.9 4.5C18.6 4.5 21 6.6 21 9.6C21 15.6 12 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
233
|
+
"elements": [
|
|
234
|
+
{
|
|
235
|
+
"tag": "path",
|
|
236
|
+
"attrs": {
|
|
237
|
+
"d": "M12 21C12 21 3 15.6 3 9.6C3 6.6 5.4 4.5 8.1 4.5C9.9 4.5 11.4 5.55 12 6.9C12.6 5.55 14.1 4.5 15.9 4.5C18.6 4.5 21 6.6 21 9.6C21 15.6 12 21 12 21Z",
|
|
238
|
+
"stroke": "currentColor",
|
|
239
|
+
"strokeWidth": "1.8",
|
|
240
|
+
"strokeLinecap": "round",
|
|
241
|
+
"strokeLinejoin": "round"
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
]
|
|
245
|
+
},
|
|
246
|
+
"informative": {
|
|
247
|
+
"category": "status",
|
|
248
|
+
"figmaNode": "440:11",
|
|
249
|
+
"mirrorInRTL": false,
|
|
250
|
+
"sourceInk": "#151817",
|
|
251
|
+
"body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Stem\" d=\"M12 11V16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Dot\" d=\"M12 8.6C12.5523 8.6 13 8.15228 13 7.6C13 7.04771 12.5523 6.6 12 6.6C11.4477 6.6 11 7.04771 11 7.6C11 8.15228 11.4477 8.6 12 8.6Z\" fill=\"currentColor\"/>",
|
|
252
|
+
"elements": [
|
|
253
|
+
{
|
|
254
|
+
"tag": "path",
|
|
255
|
+
"attrs": {
|
|
256
|
+
"d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
|
|
257
|
+
"stroke": "currentColor",
|
|
258
|
+
"strokeWidth": "1.8",
|
|
259
|
+
"strokeLinecap": "round",
|
|
260
|
+
"strokeLinejoin": "round"
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"tag": "path",
|
|
265
|
+
"attrs": {
|
|
266
|
+
"d": "M12 11V16",
|
|
267
|
+
"stroke": "currentColor",
|
|
268
|
+
"strokeWidth": "1.8",
|
|
269
|
+
"strokeLinecap": "round",
|
|
270
|
+
"strokeLinejoin": "round"
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"tag": "path",
|
|
275
|
+
"attrs": {
|
|
276
|
+
"d": "M12 8.6C12.5523 8.6 13 8.15228 13 7.6C13 7.04771 12.5523 6.6 12 6.6C11.4477 6.6 11 7.04771 11 7.6C11 8.15228 11.4477 8.6 12 8.6Z",
|
|
277
|
+
"fill": "currentColor"
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
]
|
|
281
|
+
},
|
|
282
|
+
"loading": {
|
|
283
|
+
"category": "status",
|
|
284
|
+
"figmaNode": "440:2",
|
|
285
|
+
"mirrorInRTL": false,
|
|
286
|
+
"sourceInk": "#151817",
|
|
287
|
+
"body": "<path id=\"glyph-path\" d=\"M12 3C14.0823 2.99817 16.1008 3.71843 17.7116 5.03806C19.3223 6.35769 20.4257 8.19503 20.8336 10.237C21.2415 12.2789 20.9287 14.3992 19.9485 16.2363C18.9684 18.0735 17.3815 19.514 15.4583 20.3123C13.5351 21.1106 11.3946 21.2174 9.40156 20.6143C7.40849 20.0113 5.68619 18.7358 4.52813 17.0053C3.37008 15.2747 2.84794 13.1961 3.05068 11.1237C3.25343 9.05131 4.16851 7.11332 5.64 5.64\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
288
|
+
"elements": [
|
|
289
|
+
{
|
|
290
|
+
"tag": "path",
|
|
291
|
+
"attrs": {
|
|
292
|
+
"d": "M12 3C14.0823 2.99817 16.1008 3.71843 17.7116 5.03806C19.3223 6.35769 20.4257 8.19503 20.8336 10.237C21.2415 12.2789 20.9287 14.3992 19.9485 16.2363C18.9684 18.0735 17.3815 19.514 15.4583 20.3123C13.5351 21.1106 11.3946 21.2174 9.40156 20.6143C7.40849 20.0113 5.68619 18.7358 4.52813 17.0053C3.37008 15.2747 2.84794 13.1961 3.05068 11.1237C3.25343 9.05131 4.16851 7.11332 5.64 5.64",
|
|
293
|
+
"stroke": "currentColor",
|
|
294
|
+
"strokeWidth": "1.8",
|
|
295
|
+
"strokeLinecap": "round",
|
|
296
|
+
"strokeLinejoin": "round"
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
]
|
|
300
|
+
},
|
|
301
|
+
"maneuver-right": {
|
|
302
|
+
"category": "maneuver",
|
|
303
|
+
"figmaNode": null,
|
|
304
|
+
"mirrorInRTL": true,
|
|
305
|
+
"candidate": true,
|
|
306
|
+
"sourceInk": "#151817",
|
|
307
|
+
"body": "<path id=\"sign-body\" d=\"M4.5 19.5V10.5C4.5 8.85 5.85 7.5 7.5 7.5H13.5V4.5L19.5 9L13.5 13.5V10.5H7.5V19.5Z\" fill=\"currentColor\"/>",
|
|
308
|
+
"elements": [
|
|
309
|
+
{
|
|
310
|
+
"tag": "path",
|
|
311
|
+
"attrs": {
|
|
312
|
+
"d": "M4.5 19.5V10.5C4.5 8.85 5.85 7.5 7.5 7.5H13.5V4.5L19.5 9L13.5 13.5V10.5H7.5V19.5Z",
|
|
313
|
+
"fill": "currentColor"
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
]
|
|
317
|
+
},
|
|
318
|
+
"mixed": {
|
|
319
|
+
"category": "selection",
|
|
320
|
+
"figmaNode": "391:9",
|
|
321
|
+
"mirrorInRTL": false,
|
|
322
|
+
"sourceInk": "#151817",
|
|
323
|
+
"body": "<rect id=\"Mixed Mark\" x=\"7.5\" y=\"11.1\" width=\"9\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>",
|
|
324
|
+
"elements": [
|
|
325
|
+
{
|
|
326
|
+
"tag": "rect",
|
|
327
|
+
"attrs": {
|
|
328
|
+
"x": "7.5",
|
|
329
|
+
"y": "11.1",
|
|
330
|
+
"width": "9",
|
|
331
|
+
"height": "1.8",
|
|
332
|
+
"rx": "0.9",
|
|
333
|
+
"fill": "currentColor"
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
]
|
|
337
|
+
},
|
|
338
|
+
"pause": {
|
|
339
|
+
"category": "transport",
|
|
340
|
+
"figmaNode": null,
|
|
341
|
+
"mirrorInRTL": false,
|
|
342
|
+
"candidate": true,
|
|
343
|
+
"sourceInk": "#151817",
|
|
344
|
+
"body": "<path id=\"glyph-path\" d=\"M9 6V18M15 6V18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
345
|
+
"elements": [
|
|
346
|
+
{
|
|
347
|
+
"tag": "path",
|
|
348
|
+
"attrs": {
|
|
349
|
+
"d": "M9 6V18M15 6V18",
|
|
350
|
+
"stroke": "currentColor",
|
|
351
|
+
"strokeWidth": "1.8",
|
|
352
|
+
"strokeLinecap": "round",
|
|
353
|
+
"strokeLinejoin": "round"
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
]
|
|
357
|
+
},
|
|
358
|
+
"play": {
|
|
359
|
+
"category": "transport",
|
|
360
|
+
"figmaNode": null,
|
|
361
|
+
"mirrorInRTL": false,
|
|
362
|
+
"candidate": true,
|
|
363
|
+
"sourceInk": "#151817",
|
|
364
|
+
"body": "<path id=\"glyph-path\" d=\"M9 6L18 12L9 18Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
365
|
+
"elements": [
|
|
366
|
+
{
|
|
367
|
+
"tag": "path",
|
|
368
|
+
"attrs": {
|
|
369
|
+
"d": "M9 6L18 12L9 18Z",
|
|
370
|
+
"stroke": "currentColor",
|
|
371
|
+
"strokeWidth": "1.8",
|
|
372
|
+
"strokeLinecap": "round",
|
|
373
|
+
"strokeLinejoin": "round"
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
]
|
|
377
|
+
},
|
|
378
|
+
"positive": {
|
|
379
|
+
"category": "status",
|
|
380
|
+
"figmaNode": "440:8",
|
|
381
|
+
"mirrorInRTL": false,
|
|
382
|
+
"sourceInk": "#151817",
|
|
383
|
+
"body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Positive Mark\" d=\"M7.60002 12.2L10.6 15.2L16.6 9.2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
384
|
+
"elements": [
|
|
385
|
+
{
|
|
386
|
+
"tag": "path",
|
|
387
|
+
"attrs": {
|
|
388
|
+
"d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
|
|
389
|
+
"stroke": "currentColor",
|
|
390
|
+
"strokeWidth": "1.8",
|
|
391
|
+
"strokeLinecap": "round",
|
|
392
|
+
"strokeLinejoin": "round"
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"tag": "path",
|
|
397
|
+
"attrs": {
|
|
398
|
+
"d": "M7.60002 12.2L10.6 15.2L16.6 9.2",
|
|
399
|
+
"stroke": "currentColor",
|
|
400
|
+
"strokeWidth": "1.8",
|
|
401
|
+
"strokeLinecap": "round",
|
|
402
|
+
"strokeLinejoin": "round"
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
]
|
|
406
|
+
},
|
|
407
|
+
"search": {
|
|
408
|
+
"category": "action",
|
|
409
|
+
"figmaNode": "557:2",
|
|
410
|
+
"mirrorInRTL": false,
|
|
411
|
+
"sourceInk": "#151817",
|
|
412
|
+
"body": "<path id=\"glyph-path\" d=\"M15 15L20 20M10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17C13.866 17 17 13.866 17 10C17 6.134 13.866 3 10 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
413
|
+
"elements": [
|
|
414
|
+
{
|
|
415
|
+
"tag": "path",
|
|
416
|
+
"attrs": {
|
|
417
|
+
"d": "M15 15L20 20M10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17C13.866 17 17 13.866 17 10C17 6.134 13.866 3 10 3Z",
|
|
418
|
+
"stroke": "currentColor",
|
|
419
|
+
"strokeWidth": "1.8",
|
|
420
|
+
"strokeLinecap": "round",
|
|
421
|
+
"strokeLinejoin": "round"
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
]
|
|
425
|
+
},
|
|
426
|
+
"selected-dot": {
|
|
427
|
+
"category": "selection",
|
|
428
|
+
"figmaNode": "391:14",
|
|
429
|
+
"mirrorInRTL": false,
|
|
430
|
+
"sourceInk": "#e2e9ff",
|
|
431
|
+
"body": "<circle id=\"Selected Dot\" cx=\"12\" cy=\"12\" r=\"6\" fill=\"currentColor\"/>",
|
|
432
|
+
"elements": [
|
|
433
|
+
{
|
|
434
|
+
"tag": "circle",
|
|
435
|
+
"attrs": {
|
|
436
|
+
"cx": "12",
|
|
437
|
+
"cy": "12",
|
|
438
|
+
"r": "6",
|
|
439
|
+
"fill": "currentColor"
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
]
|
|
443
|
+
},
|
|
444
|
+
"skip-back": {
|
|
445
|
+
"category": "transport",
|
|
446
|
+
"figmaNode": null,
|
|
447
|
+
"mirrorInRTL": true,
|
|
448
|
+
"candidate": true,
|
|
449
|
+
"sourceInk": "#151817",
|
|
450
|
+
"body": "<path id=\"artwork\" d=\"M18 6L9 12L18 18Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"rail\" d=\"M6 6V18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
451
|
+
"elements": [
|
|
452
|
+
{
|
|
453
|
+
"tag": "path",
|
|
454
|
+
"attrs": {
|
|
455
|
+
"d": "M18 6L9 12L18 18Z",
|
|
456
|
+
"stroke": "currentColor",
|
|
457
|
+
"strokeWidth": "1.8",
|
|
458
|
+
"strokeLinecap": "round",
|
|
459
|
+
"strokeLinejoin": "round"
|
|
460
|
+
}
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"tag": "path",
|
|
464
|
+
"attrs": {
|
|
465
|
+
"d": "M6 6V18",
|
|
466
|
+
"stroke": "currentColor",
|
|
467
|
+
"strokeWidth": "1.8",
|
|
468
|
+
"strokeLinecap": "round",
|
|
469
|
+
"strokeLinejoin": "round"
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
]
|
|
473
|
+
},
|
|
474
|
+
"skip-forward": {
|
|
475
|
+
"category": "transport",
|
|
476
|
+
"figmaNode": null,
|
|
477
|
+
"mirrorInRTL": true,
|
|
478
|
+
"candidate": true,
|
|
479
|
+
"sourceInk": "#151817",
|
|
480
|
+
"body": "<path id=\"artwork\" d=\"M6 6L15 12L6 18Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"rail\" d=\"M18 6V18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
481
|
+
"elements": [
|
|
482
|
+
{
|
|
483
|
+
"tag": "path",
|
|
484
|
+
"attrs": {
|
|
485
|
+
"d": "M6 6L15 12L6 18Z",
|
|
486
|
+
"stroke": "currentColor",
|
|
487
|
+
"strokeWidth": "1.8",
|
|
488
|
+
"strokeLinecap": "round",
|
|
489
|
+
"strokeLinejoin": "round"
|
|
490
|
+
}
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"tag": "path",
|
|
494
|
+
"attrs": {
|
|
495
|
+
"d": "M18 6V18",
|
|
496
|
+
"stroke": "currentColor",
|
|
497
|
+
"strokeWidth": "1.8",
|
|
498
|
+
"strokeLinecap": "round",
|
|
499
|
+
"strokeLinejoin": "round"
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
]
|
|
503
|
+
},
|
|
504
|
+
"visibility-closed": {
|
|
505
|
+
"category": "action",
|
|
506
|
+
"figmaNode": "440:15",
|
|
507
|
+
"mirrorInRTL": false,
|
|
508
|
+
"sourceInk": "#151817",
|
|
509
|
+
"body": "<path id=\"Closed Lid\" d=\"M4.5 10.5C6.75 13.5 9.25 15 12 15C14.75 15 17.25 13.5 19.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Lashes\" d=\"M6.75 13.05L5.4 15M9.75 14.55L9.3 16.8M14.25 14.55L14.7 16.8M17.25 13.05L18.6 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
510
|
+
"elements": [
|
|
511
|
+
{
|
|
512
|
+
"tag": "path",
|
|
513
|
+
"attrs": {
|
|
514
|
+
"d": "M4.5 10.5C6.75 13.5 9.25 15 12 15C14.75 15 17.25 13.5 19.5 10.5",
|
|
515
|
+
"stroke": "currentColor",
|
|
516
|
+
"strokeWidth": "1.8",
|
|
517
|
+
"strokeLinecap": "round",
|
|
518
|
+
"strokeLinejoin": "round"
|
|
519
|
+
}
|
|
520
|
+
},
|
|
521
|
+
{
|
|
522
|
+
"tag": "path",
|
|
523
|
+
"attrs": {
|
|
524
|
+
"d": "M6.75 13.05L5.4 15M9.75 14.55L9.3 16.8M14.25 14.55L14.7 16.8M17.25 13.05L18.6 15",
|
|
525
|
+
"stroke": "currentColor",
|
|
526
|
+
"strokeWidth": "1.8",
|
|
527
|
+
"strokeLinecap": "round",
|
|
528
|
+
"strokeLinejoin": "round"
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
]
|
|
532
|
+
},
|
|
533
|
+
"visibility-open": {
|
|
534
|
+
"category": "action",
|
|
535
|
+
"figmaNode": "418:21",
|
|
536
|
+
"mirrorInRTL": false,
|
|
537
|
+
"sourceInk": "#151817",
|
|
538
|
+
"body": "<path id=\"Eye Contour\" d=\"M3 12C5.25 8.25 8.25 6.375 12 6.375C15.75 6.375 18.75 8.25 21 12C18.75 15.75 15.75 17.625 12 17.625C8.25 17.625 5.25 15.75 3 12Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Pupil\" d=\"M12 14.625C13.4497 14.625 14.625 13.4497 14.625 12C14.625 10.5503 13.4497 9.375 12 9.375C10.5503 9.375 9.375 10.5503 9.375 12C9.375 13.4497 10.5503 14.625 12 14.625Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
|
|
539
|
+
"elements": [
|
|
540
|
+
{
|
|
541
|
+
"tag": "path",
|
|
542
|
+
"attrs": {
|
|
543
|
+
"d": "M3 12C5.25 8.25 8.25 6.375 12 6.375C15.75 6.375 18.75 8.25 21 12C18.75 15.75 15.75 17.625 12 17.625C8.25 17.625 5.25 15.75 3 12Z",
|
|
544
|
+
"stroke": "currentColor",
|
|
545
|
+
"strokeWidth": "1.8",
|
|
546
|
+
"strokeLinecap": "round",
|
|
547
|
+
"strokeLinejoin": "round"
|
|
548
|
+
}
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"tag": "path",
|
|
552
|
+
"attrs": {
|
|
553
|
+
"d": "M12 14.625C13.4497 14.625 14.625 13.4497 14.625 12C14.625 10.5503 13.4497 9.375 12 9.375C10.5503 9.375 9.375 10.5503 9.375 12C9.375 13.4497 10.5503 14.625 12 14.625Z",
|
|
554
|
+
"stroke": "currentColor",
|
|
555
|
+
"strokeWidth": "1.8",
|
|
556
|
+
"strokeLinecap": "round",
|
|
557
|
+
"strokeLinejoin": "round"
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
]
|
|
561
|
+
}
|
|
562
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './navigation-badge.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { renderNavigationBadge } from './navigation-badge.js';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Oneli8 · Navigation Badge (ATOM)
|
|
3
|
+
* Figma: Atom / Navigation Badge 989:484 — a full radius pill at the standard
|
|
4
|
+
* indicator height, padded by the related inline step, whose surface and
|
|
5
|
+
* content are the only things that change when the item is selected or gem.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
.ol8-nav-badge {
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
block-size: var(--ol8-size-indicator-standard);
|
|
13
|
+
padding-inline: var(--ol8-spacing-inline-related);
|
|
14
|
+
border-radius: var(--ol8-shape-radius-full);
|
|
15
|
+
background: var(--ol8-color-navigation-badge-surface-default);
|
|
16
|
+
color: var(--ol8-color-navigation-badge-content-default);
|
|
17
|
+
font-family: var(--ol8-font-family-functional);
|
|
18
|
+
font-size: var(--ol8-font-size-012);
|
|
19
|
+
font-weight: var(--ol8-font-weight-semibold);
|
|
20
|
+
line-height: var(--ol8-font-line-018);
|
|
21
|
+
font-variant-numeric: tabular-nums;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Selection and material reach the badge through the item that owns it. */
|
|
25
|
+
[data-ol8-selected="true"] > * > .ol8-nav-badge,
|
|
26
|
+
[aria-selected="true"] > * > .ol8-nav-badge,
|
|
27
|
+
[aria-current] > * > .ol8-nav-badge {
|
|
28
|
+
background: var(--ol8-color-navigation-badge-surface-selected);
|
|
29
|
+
color: var(--ol8-color-navigation-badge-content-selected);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-ol8-material="gem"] .ol8-nav-badge {
|
|
33
|
+
background: var(--ol8-color-navigation-badge-surface-gem);
|
|
34
|
+
color: var(--ol8-color-navigation-badge-content-gem);
|
|
35
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** Navigation Badge (ATOM). Figma 989:484. One atom serves all three navigation organisms. */
|
|
2
|
+
export interface Ol8NavigationBadgeOptions { className?: string }
|
|
3
|
+
|
|
4
|
+
/** @throws when there is nothing to say. */
|
|
5
|
+
export declare function renderNavigationBadge(label: string | number, options?: Ol8NavigationBadgeOptions): string;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Oneli8 · Navigation Badge — headless behavior.
|
|
3
|
+
*
|
|
4
|
+
* Figma (989:484): "Canonical optional navigation badge. Content comes from
|
|
5
|
+
* item.badge; geometry and colors are semantic token controlled."
|
|
6
|
+
*
|
|
7
|
+
* One atom serves Tabs, Segmented Control and Tab Bar. None of them owns a
|
|
8
|
+
* private copy of it.
|
|
9
|
+
*/
|
|
10
|
+
export function renderNavigationBadge(label, options = {}) {
|
|
11
|
+
const { className } = options;
|
|
12
|
+
const text = String(label ?? '');
|
|
13
|
+
if (text === '') throw new Error('[ol8] a navigation badge with nothing to say should not be rendered at all.');
|
|
14
|
+
|
|
15
|
+
// The count is decoration beside a label that already names the destination,
|
|
16
|
+
// so the badge is not announced twice. A product that needs it announced
|
|
17
|
+
// spells it into the item's own accessible name.
|
|
18
|
+
return `<span class="ol8-nav-badge${className ? ` ${className}` : ''}" aria-hidden="true">${escapeText(text)}</span>`;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function escapeText(v) { return String(v).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './selection-indicator.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './selection-indicator.js';
|