seblify 0.1.8 → 0.2.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 +184 -73
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
+
[](https://seblify.com)
|
|
1
2
|
[](https://www.npmjs.com/package/seblify)
|
|
2
3
|
[](https://www.npmjs.com/package/seblify)
|
|
3
4
|
|
|
4
|
-
[](https://seblify.com)
|
|
5
|
-
|
|
6
5
|
# Seblify
|
|
7
6
|
|
|
8
7
|
[comment]: <> (==== ========================= ====)
|
|
@@ -13,6 +12,12 @@
|
|
|
13
12
|
|
|
14
13
|
Svelte UI component library for building themed interfaces.
|
|
15
14
|
|
|
15
|
+
### Feedback
|
|
16
|
+
|
|
17
|
+
Seblify is a work in progress, and I am very open to feedback. If you find a bug, hit a rough edge, or have an idea for a component, API, example, or design-system improvement, please let me know.
|
|
18
|
+
|
|
19
|
+
Ideas and bug reports are genuinely welcome: [support.seblify@gmail.com](mailto:support.seblify@gmail.com)
|
|
20
|
+
|
|
16
21
|
## Installation
|
|
17
22
|
|
|
18
23
|
```bash
|
|
@@ -28,12 +33,12 @@ import 'seblify/theme.css';
|
|
|
28
33
|
|
|
29
34
|
## Components
|
|
30
35
|
|
|
36
|
+
Explore the supported components in this library. Components are grouped by purpose and linked to their full documentation, including usage examples, props, accessibility notes, and design-system guidance.
|
|
37
|
+
|
|
31
38
|
[](https://seblify.com/components)
|
|
32
39
|
[](https://seblify.com/components)
|
|
33
40
|
[](https://seblify.com/components)
|
|
34
41
|
|
|
35
|
-
Explore the supported components in this library. Components are grouped by purpose and linked to their full documentation, including usage examples, props, accessibility notes, and design-system guidance.
|
|
36
|
-
|
|
37
42
|
### Quick links
|
|
38
43
|
|
|
39
44
|
- [Input Components](https://seblify.com/sections/action)
|
|
@@ -41,177 +46,159 @@ Explore the supported components in this library. Components are grouped by purp
|
|
|
41
46
|
- [Framework Components](https://seblify.com/sections/framework)
|
|
42
47
|
- [Design System](https://seblify.com/design-system)
|
|
43
48
|
|
|
44
|
-
|
|
49
|
+
<br />
|
|
50
|
+
|
|
51
|
+
### Input Components
|
|
45
52
|
|
|
46
|
-
|
|
53
|
+
_6 items_
|
|
47
54
|
|
|
48
55
|
Components that let users make choices, submit data, and trigger behavior.
|
|
49
56
|
|
|
50
57
|
<details>
|
|
51
|
-
<summary><strong>Input Fields</strong></summary>
|
|
58
|
+
<summary><strong>Input Fields · 1</strong></summary>
|
|
52
59
|
|
|
53
60
|
Text-like controls for entering structured user input.
|
|
54
61
|
|
|
55
62
|
| Component | Summary | Status |
|
|
56
63
|
| --- | --- | --- |
|
|
57
|
-
| [Pin Input](https://seblify.com/components/pin-input) | A segmented numeric input for short verification codes. |
|
|
64
|
+
| [Pin Input](https://seblify.com/components/pin-input) | A segmented numeric input for short verification codes. | Draft |
|
|
58
65
|
|
|
59
|
-
|
|
60
|
-
---
|
|
61
66
|
</details>
|
|
62
|
-
|
|
63
67
|
<br />
|
|
64
68
|
|
|
65
69
|
<details>
|
|
66
|
-
<summary><strong>Selectable</strong></summary>
|
|
70
|
+
<summary><strong>Selectable · 5</strong></summary>
|
|
67
71
|
|
|
68
72
|
Controls for selecting boolean, range, or option-based values.
|
|
69
73
|
|
|
70
74
|
| Component | Summary | Status |
|
|
71
75
|
| --- | --- | --- |
|
|
72
|
-
| [Checkbox](https://seblify.com/components/checkbox) | A boolean selection control for one option in a form or settings flow. |
|
|
73
|
-
| [SegmentControl](https://seblify.com/components/segment-control) | A compact single-selection control for switching between a small set of options. |
|
|
74
|
-
| [Slider](https://seblify.com/components/slider) | A range input for choosing an approximate numeric value. |
|
|
75
|
-
| [Switch](https://seblify.com/components/switch) | A two-state control for immediately turning a setting on or off. |
|
|
76
|
-
| [ThemeSwitch](https://seblify.com/components/theme-switch) | A segmented control for selecting system, light, or dark color mode. |
|
|
77
|
-
|
|
76
|
+
| [Checkbox](https://seblify.com/components/checkbox) | A boolean selection control for one option in a form or settings flow. | Draft |
|
|
77
|
+
| [SegmentControl](https://seblify.com/components/segment-control) | A compact single-selection control for switching between a small set of options. | Draft |
|
|
78
|
+
| [Slider](https://seblify.com/components/slider) | A range input for choosing an approximate numeric value. | Draft |
|
|
79
|
+
| [Switch](https://seblify.com/components/switch) | A two-state control for immediately turning a setting on or off. | Draft |
|
|
80
|
+
| [ThemeSwitch](https://seblify.com/components/theme-switch) | A segmented control for selecting system, light, or dark color mode. | Draft |
|
|
78
81
|
|
|
79
|
-
---
|
|
80
82
|
</details>
|
|
83
|
+
<br />
|
|
84
|
+
|
|
85
|
+
### Display Components
|
|
81
86
|
|
|
82
|
-
|
|
87
|
+
_8 items_
|
|
83
88
|
|
|
84
89
|
Components for showing content, feedback, media, and motion.
|
|
85
90
|
|
|
86
91
|
<details>
|
|
87
|
-
<summary><strong>Annotation</strong></summary>
|
|
92
|
+
<summary><strong>Annotation · 3</strong></summary>
|
|
88
93
|
|
|
89
94
|
Small attached indicators, labels, and supporting markers.
|
|
90
95
|
|
|
91
96
|
| Component | Summary | Status |
|
|
92
97
|
| --- | --- | --- |
|
|
93
|
-
| [Badge](https://seblify.com/components/badge) | A small attached indicator for counts, labels, and presence states around another item. |
|
|
94
|
-
| [Tag](https://seblify.com/components/tag) | A compact text marker for statuses, categories, and item labels. |
|
|
95
|
-
| [TagGroup](https://seblify.com/components/tag-group) | A wrapping inline group for tags with the standard tag spacing. |
|
|
96
|
-
|
|
98
|
+
| [Badge](https://seblify.com/components/badge) | A small attached indicator for counts, labels, and presence states around another item. | Draft |
|
|
99
|
+
| [Tag](https://seblify.com/components/tag) | A compact text marker for statuses, categories, and item labels. | Draft |
|
|
100
|
+
| [TagGroup](https://seblify.com/components/tag-group) | A wrapping inline group for tags with the standard tag spacing. | Draft |
|
|
97
101
|
|
|
98
|
-
---
|
|
99
102
|
</details>
|
|
100
|
-
|
|
101
103
|
<br />
|
|
102
104
|
|
|
103
105
|
<details>
|
|
104
|
-
<summary><strong>Loading</strong></summary>
|
|
106
|
+
<summary><strong>Loading · 2</strong></summary>
|
|
105
107
|
|
|
106
108
|
Progress indicators and waiting states.
|
|
107
109
|
|
|
108
110
|
| Component | Summary | Status |
|
|
109
111
|
| --- | --- | --- |
|
|
110
|
-
| [Loading Dots](https://seblify.com/components/loading-dots) | A compact animated loading indicator for inline waiting states. |
|
|
111
|
-
| [Spinner](https://seblify.com/components/spinner) | A circular loading indicator for indeterminate progress. |
|
|
112
|
-
|
|
112
|
+
| [Loading Dots](https://seblify.com/components/loading-dots) | A compact animated loading indicator for inline waiting states. | Draft |
|
|
113
|
+
| [Spinner](https://seblify.com/components/spinner) | A circular loading indicator for indeterminate progress. | Draft |
|
|
113
114
|
|
|
114
|
-
---
|
|
115
115
|
</details>
|
|
116
|
-
|
|
117
116
|
<br />
|
|
118
117
|
|
|
119
118
|
<details>
|
|
120
|
-
<summary><strong>Typography</strong></summary>
|
|
119
|
+
<summary><strong>Typography · 2</strong></summary>
|
|
121
120
|
|
|
122
121
|
Text primitives and typographic treatments for readable interfaces.
|
|
123
122
|
|
|
124
123
|
| Component | Summary | Status |
|
|
125
124
|
| --- | --- | --- |
|
|
126
|
-
| [Eyebrow](https://seblify.com/components/eyebrow) | A short contextual label that sits above a heading or dense content block. |
|
|
127
|
-
| [Highlight](https://seblify.com/components/highlight) | Highlights case-insensitive text matches inside a plain text string. |
|
|
125
|
+
| [Eyebrow](https://seblify.com/components/eyebrow) | A short contextual label that sits above a heading or dense content block. | Draft |
|
|
126
|
+
| [Highlight](https://seblify.com/components/highlight) | Highlights case-insensitive text matches inside a plain text string. | Draft |
|
|
128
127
|
|
|
129
|
-
|
|
130
|
-
---
|
|
131
128
|
</details>
|
|
132
|
-
|
|
133
129
|
<br />
|
|
134
130
|
|
|
135
131
|
<details>
|
|
136
|
-
<summary><strong>Media</strong></summary>
|
|
132
|
+
<summary><strong>Media · 1</strong></summary>
|
|
137
133
|
|
|
138
134
|
Icons, images, video, and other visual media components.
|
|
139
135
|
|
|
140
136
|
| Component | Summary | Status |
|
|
141
137
|
| --- | --- | --- |
|
|
142
|
-
| [Icon](https://seblify.com/components/icon) | A convenient registry-based icon component for Seblify SVG icons. |
|
|
138
|
+
| [Icon](https://seblify.com/components/icon) | A convenient registry-based icon component for Seblify SVG icons. | Draft |
|
|
143
139
|
|
|
144
|
-
|
|
145
|
-
---
|
|
146
140
|
</details>
|
|
141
|
+
<br />
|
|
142
|
+
|
|
143
|
+
### Framework Components
|
|
147
144
|
|
|
148
|
-
|
|
145
|
+
_10 items_
|
|
149
146
|
|
|
150
147
|
Layout, navigation, overlays, and surface primitives.
|
|
151
148
|
|
|
152
149
|
<details>
|
|
153
|
-
<summary><strong>Align</strong></summary>
|
|
150
|
+
<summary><strong>Align · 4</strong></summary>
|
|
154
151
|
|
|
155
152
|
Small layout primitives for spacing and aligning content.
|
|
156
153
|
|
|
157
154
|
| Component | Summary | Status |
|
|
158
155
|
| --- | --- | --- |
|
|
159
|
-
| [Cluster](https://seblify.com/components/cluster) | A wrapping horizontal layout primitive that spaces items with a configurable gap. |
|
|
160
|
-
| [Grid](https://seblify.com/components/grid) | A responsive grid layout primitive with automatic columns or an explicit column count. |
|
|
161
|
-
| [Row](https://seblify.com/components/row) | A horizontal layout primitive that spaces items with a configurable gap. |
|
|
162
|
-
| [Stack](https://seblify.com/components/stack) | A vertical layout primitive that spaces items with a configurable gap. |
|
|
156
|
+
| [Cluster](https://seblify.com/components/cluster) | A wrapping horizontal layout primitive that spaces items with a configurable gap. | Draft |
|
|
157
|
+
| [Grid](https://seblify.com/components/grid) | A responsive grid layout primitive with automatic columns or an explicit column count. | Draft |
|
|
158
|
+
| [Row](https://seblify.com/components/row) | A horizontal layout primitive that spaces items with a configurable gap. | Draft |
|
|
159
|
+
| [Stack](https://seblify.com/components/stack) | A vertical layout primitive that spaces items with a configurable gap. | Draft |
|
|
163
160
|
|
|
164
|
-
|
|
165
|
-
---
|
|
166
161
|
</details>
|
|
167
|
-
|
|
168
162
|
<br />
|
|
169
163
|
|
|
170
164
|
<details>
|
|
171
|
-
<summary><strong>Container</strong></summary>
|
|
165
|
+
<summary><strong>Container · 3</strong></summary>
|
|
172
166
|
|
|
173
167
|
Page and region containers that define app structure.
|
|
174
168
|
|
|
175
169
|
| Component | Summary | Status |
|
|
176
170
|
| --- | --- | --- |
|
|
177
|
-
| [AppShell](https://seblify.com/components/app-shell) | A full-page application frame with sidebar, header, and content regions. |
|
|
178
|
-
| [PageHeader](https://seblify.com/components/page-header) | A page-level heading block with optional breadcrumb, eyebrow, summary, and actions. |
|
|
179
|
-
| [Sidebar](https://seblify.com/components/sidebar) | A responsive side container for persistent or overlay navigation. |
|
|
180
|
-
|
|
171
|
+
| [AppShell](https://seblify.com/components/app-shell) | A full-page application frame with sidebar, header, and content regions. | Draft |
|
|
172
|
+
| [PageHeader](https://seblify.com/components/page-header) | A page-level heading block with optional breadcrumb, eyebrow, summary, and actions. | Draft |
|
|
173
|
+
| [Sidebar](https://seblify.com/components/sidebar) | A responsive side container for persistent or overlay navigation. | Draft |
|
|
181
174
|
|
|
182
|
-
---
|
|
183
175
|
</details>
|
|
184
|
-
|
|
185
176
|
<br />
|
|
186
177
|
|
|
187
178
|
<details>
|
|
188
|
-
<summary><strong>Navigation</strong></summary>
|
|
179
|
+
<summary><strong>Navigation · 2</strong></summary>
|
|
189
180
|
|
|
190
181
|
Components that help users understand location and move around.
|
|
191
182
|
|
|
192
183
|
| Component | Summary | Status |
|
|
193
184
|
| --- | --- | --- |
|
|
194
|
-
| [Breadcrumb](https://seblify.com/components/breadcrumb) | A contextual navigation trail for showing page hierarchy. |
|
|
195
|
-
| [Sidenav](https://seblify.com/components/sidenav) | A hierarchical side navigation for sections, links, and nested pages. |
|
|
196
|
-
|
|
185
|
+
| [Breadcrumb](https://seblify.com/components/breadcrumb) | A contextual navigation trail for showing page hierarchy. | Draft |
|
|
186
|
+
| [Sidenav](https://seblify.com/components/sidenav) | A hierarchical side navigation for sections, links, and nested pages. | Draft |
|
|
197
187
|
|
|
198
|
-
---
|
|
199
188
|
</details>
|
|
200
|
-
|
|
201
189
|
<br />
|
|
202
190
|
|
|
203
191
|
<details>
|
|
204
|
-
<summary><strong>Surface</strong></summary>
|
|
192
|
+
<summary><strong>Surface · 1</strong></summary>
|
|
205
193
|
|
|
206
194
|
Framing primitives for cards, papers, tiles, and other contained regions.
|
|
207
195
|
|
|
208
196
|
| Component | Summary | Status |
|
|
209
197
|
| --- | --- | --- |
|
|
210
|
-
| [Paper](https://seblify.com/components/paper) | A themed container for grouping content with configurable variant, tone, padding, border, and elevation. |
|
|
198
|
+
| [Paper](https://seblify.com/components/paper) | A themed container for grouping content with configurable variant, tone, padding, border, and elevation. | Draft |
|
|
211
199
|
|
|
212
|
-
|
|
213
|
-
---
|
|
214
200
|
</details>
|
|
201
|
+
<br />
|
|
215
202
|
|
|
216
203
|
## Design System
|
|
217
204
|
|
|
@@ -223,12 +210,136 @@ Theme, tokens, and styling guidance for Seblify.
|
|
|
223
210
|
| [Icons](https://seblify.com/design-system/icons) | Browse all generated Seblify icons, grouped automatically from the SVG source folders. |
|
|
224
211
|
| [Theme](https://seblify.com/design-system/theme) | Seblify themes use CSS variables for light, dark, system, and custom color modes. |
|
|
225
212
|
|
|
226
|
-
|
|
213
|
+
<br />
|
|
214
|
+
|
|
215
|
+
## Release Notes <small>· 0.2.0</small>
|
|
227
216
|
|
|
228
|
-
_May 14 2026_ ·
|
|
217
|
+
_May 14 2026_ · _28 items updated_
|
|
229
218
|
|
|
230
219
|
Recent changes are summarized below. For the full release history, see the [changelog](https://seblify.com/release-notes).
|
|
231
220
|
|
|
232
|
-
### [
|
|
221
|
+
### [AppShell](https://seblify.com/components/app-shell)
|
|
222
|
+
|
|
223
|
+
- Added AppShell component
|
|
224
|
+
|
|
225
|
+
### [Badge](https://seblify.com/components/badge)
|
|
226
|
+
|
|
227
|
+
- Added badge component. It takes a number or a short text
|
|
228
|
+
- Added inheritable dir support. Added right-to-left example
|
|
229
|
+
- Badge can now be placed on the center edge of its content
|
|
230
|
+
- Badge can be colored with the tone property
|
|
231
|
+
- Added appear animation when badge is populated. Added interactive example for badge with no content
|
|
232
|
+
- Fixed badge placement on round objects
|
|
233
|
+
|
|
234
|
+
### [Breadcrumb](https://seblify.com/components/breadcrumb)
|
|
235
|
+
|
|
236
|
+
- Added breadcrumb component with examples
|
|
237
|
+
|
|
238
|
+
### [Checkbox](https://seblify.com/components/checkbox)
|
|
239
|
+
|
|
240
|
+
- Added checkbox component. Added example with optional disable state. Added example with checkboxes in a table
|
|
241
|
+
|
|
242
|
+
### [Cluster](https://seblify.com/components/cluster)
|
|
243
|
+
|
|
244
|
+
- Added cluster component for wrapping lines
|
|
245
|
+
|
|
246
|
+
### [component-api](https://seblify.com/components/component-api)
|
|
247
|
+
|
|
248
|
+
- Reserved prop value options to streamline semantics across components
|
|
249
|
+
|
|
250
|
+
### [Eyebrow](https://seblify.com/components/eyebrow)
|
|
251
|
+
|
|
252
|
+
- Added eyebrow component
|
|
253
|
+
|
|
254
|
+
### [general](https://seblify.com/components/general)
|
|
255
|
+
|
|
256
|
+
- Setup release note collection flow
|
|
257
|
+
|
|
258
|
+
### [Grid](https://seblify.com/components/grid)
|
|
259
|
+
|
|
260
|
+
- Added grid component. Set column amount or item size
|
|
261
|
+
|
|
262
|
+
### [Highlight](https://seblify.com/components/highlight)
|
|
263
|
+
|
|
264
|
+
- Added highlight component to highlight query matches in a text
|
|
265
|
+
- Customize highlight style with tone and variant prop
|
|
266
|
+
- Made a better example with a longer text
|
|
267
|
+
|
|
268
|
+
### [Icon](https://seblify.com/components/icon)
|
|
269
|
+
|
|
270
|
+
- Added icon component. Takes the name of an icon to display
|
|
271
|
+
- Generates icon components. Specific icons can be imported instead of entire svg collection. Better tree-shaking support
|
|
272
|
+
|
|
273
|
+
### [icons](https://seblify.com/components/icons)
|
|
274
|
+
|
|
275
|
+
- Added initial icons as poc
|
|
276
|
+
|
|
277
|
+
### [Loading Dots](https://seblify.com/components/loading-dots)
|
|
278
|
+
|
|
279
|
+
- Added loading dots component. Takes size prop
|
|
280
|
+
- Different colors via tones prop
|
|
281
|
+
|
|
282
|
+
### [PageHeader](https://seblify.com/components/page-header)
|
|
283
|
+
|
|
284
|
+
- Added page-header component. Uses eyebrow and breadcrumb
|
|
285
|
+
|
|
286
|
+
### [Paper](https://seblify.com/components/paper)
|
|
287
|
+
|
|
288
|
+
- Added Paper basic surface component
|
|
289
|
+
|
|
290
|
+
### [Pin Input](https://seblify.com/components/pin-input)
|
|
291
|
+
|
|
292
|
+
- Added pin-input component. It has optional length and can be disabled
|
|
293
|
+
|
|
294
|
+
### [Row](https://seblify.com/components/row)
|
|
295
|
+
|
|
296
|
+
- Added row component as non-wrapping horizontal container
|
|
297
|
+
|
|
298
|
+
### [SegmentControl](https://seblify.com/components/segment-control)
|
|
299
|
+
|
|
300
|
+
- Added segment-control component
|
|
301
|
+
|
|
302
|
+
### [Sidebar](https://seblify.com/components/sidebar)
|
|
303
|
+
|
|
304
|
+
- Added sidebar component - a left-side container. Uses sidenav component
|
|
305
|
+
|
|
306
|
+
### [Sidenav](https://seblify.com/components/sidenav)
|
|
307
|
+
|
|
308
|
+
- Added sidenav component. Takes tree data to build collapsible nav items
|
|
309
|
+
|
|
310
|
+
### [Slider](https://seblify.com/components/slider)
|
|
311
|
+
|
|
312
|
+
- Added slider component. It can take stepsize
|
|
313
|
+
- Added example with optional disabled slider
|
|
314
|
+
|
|
315
|
+
### [Spinner](https://seblify.com/components/spinner)
|
|
316
|
+
|
|
317
|
+
- Added spinner component with customizable size
|
|
318
|
+
- Accepts tone prop
|
|
319
|
+
|
|
320
|
+
### [Stack](https://seblify.com/components/stack)
|
|
321
|
+
|
|
322
|
+
- Added stack component as vertical container with gap prop
|
|
323
|
+
|
|
324
|
+
### [Switch](https://seblify.com/components/switch)
|
|
325
|
+
|
|
326
|
+
- Added switch component
|
|
327
|
+
|
|
328
|
+
### [Tag](https://seblify.com/components/tag)
|
|
329
|
+
|
|
330
|
+
- Added tag component with custom radius
|
|
331
|
+
- Tag takes variant, tone, and border props
|
|
332
|
+
- Nested icons, spinner, or loading dots inherit size and tone
|
|
333
|
+
|
|
334
|
+
### [TagGroup](https://seblify.com/components/tag-group)
|
|
335
|
+
|
|
336
|
+
- Added tag-group component. Used in all tag examples
|
|
337
|
+
|
|
338
|
+
### [theme](https://seblify.com/components/theme)
|
|
339
|
+
|
|
340
|
+
- Setup initial theme structure
|
|
341
|
+
- Added doc example for scoped theme customization
|
|
342
|
+
|
|
343
|
+
### [ThemeSwitch](https://seblify.com/components/theme-switch)
|
|
233
344
|
|
|
234
|
-
-
|
|
345
|
+
- Added theme-switch component. It uses the segment-control
|
package/package.json
CHANGED
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
"name": "seblify",
|
|
3
3
|
"private": false,
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"build": "svelte-package --input src --output dist --tsconfig ./tsconfig.json",
|
|
9
9
|
"generate:icons": "node ./scripts/generate-icons.mjs",
|
|
10
10
|
"doc": "node ./scripts/change-log/document-change.mjs",
|
|
11
11
|
"change-log:validate": "node ./scripts/change-log/validate-pending.mjs",
|
|
12
|
-
"readme:generate": "node ./scripts/readme/generate-readme.mjs",
|
|
13
12
|
"prepare-release": "node ./scripts/prepare-release.mjs",
|
|
14
13
|
"prepublishOnly": "pnpm run generate:icons && pnpm run build"
|
|
15
14
|
},
|
|
@@ -64,7 +63,7 @@
|
|
|
64
63
|
"access": "public",
|
|
65
64
|
"provenance": false
|
|
66
65
|
},
|
|
67
|
-
"description": "Svelte UI component library for
|
|
66
|
+
"description": "Svelte UI component library for themed interfaces",
|
|
68
67
|
"keywords": [
|
|
69
68
|
"svelte",
|
|
70
69
|
"sveltekit",
|