@flitsmeister/design-system 3.0.0 → 3.0.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/README.md +59 -27
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,53 +1,85 @@
|
|
|
1
1
|
# @flitsmeister/design-system
|
|
2
2
|
|
|
3
|
-
Flitsmeister design system
|
|
3
|
+
Flitsmeister design system for modern web apps. Version 3 and higher ships Lit-based web components that can be used from plain HTML, Lit, React, Vue, Angular, Svelte, or any other framework that supports custom elements.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|--------|--------|------|
|
|
7
|
-
| **3.x** | Web components (`fm-button`, `fm-input`, …) | [design-system-v2](https://github.com/flitsmeister/design-system-v2) |
|
|
8
|
-
| **2.x** | Vue components + design tokens | [design-system](https://github.com/flitsmeister/design-system) |
|
|
5
|
+
> Note: npm v2.x of this package contained Vue components and design tokens. npm v3.x is a new web component package under the same package name.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
## Install
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install @flitsmeister/design-system
|
|
11
|
+
```
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
With pnpm:
|
|
15
14
|
|
|
16
15
|
```bash
|
|
17
|
-
pnpm
|
|
16
|
+
pnpm add @flitsmeister/design-system
|
|
18
17
|
```
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
The package requires Node.js 24 or newer for local tooling and publishing. Runtime components are browser custom elements built with Lit.
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
Import the components you use, then render the matching custom elements in your HTML.
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import '@flitsmeister/design-system/fm-button'
|
|
27
|
+
import '@flitsmeister/design-system/fm-input'
|
|
24
28
|
```
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
```html
|
|
31
|
+
<fm-input id="email" placeholder="Email" type="email"></fm-input>
|
|
32
|
+
<fm-button role="primary" buttontype="filled">Opslaan</fm-button>
|
|
33
|
+
```
|
|
27
34
|
|
|
28
|
-
|
|
29
|
-
|
|
35
|
+
For icons, import the icon component and register icons before using them.
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import '@flitsmeister/design-system/fm-icon/all'
|
|
30
39
|
```
|
|
31
40
|
|
|
32
|
-
|
|
41
|
+
```html
|
|
42
|
+
<fm-icon name="check" variant="filled" size="md"></fm-icon>
|
|
43
|
+
<fm-button role="primary" icon="add" icon-variant="bold">Toevoegen</fm-button>
|
|
44
|
+
```
|
|
33
45
|
|
|
34
|
-
##
|
|
46
|
+
## Components
|
|
35
47
|
|
|
36
|
-
|
|
37
|
-
|
|
48
|
+
| Component | Import | Description |
|
|
49
|
+
| --- | --- | --- |
|
|
50
|
+
| `fm-button` | `@flitsmeister/design-system/fm-button` | Accessible button with variants, sizes, icons, loading, success, and error states. |
|
|
51
|
+
| `fm-input` | `@flitsmeister/design-system/fm-input` | Text input with floating label, validation rules, loading, success, and error states. |
|
|
52
|
+
| `fm-radio-input` | `@flitsmeister/design-system/fm-radio-input` | Radio-card option with label, media, description, and native radio behavior. |
|
|
53
|
+
| `fm-segmented-controller` | `@flitsmeister/design-system/fm-segmented-controller` | Segmented control backed by a native radio group. |
|
|
54
|
+
| `fm-dropdown` | `@flitsmeister/design-system/fm-dropdown` | Animated dropdown backed by a hidden native select for forms and accessibility. |
|
|
55
|
+
| `fm-wizard` | `@flitsmeister/design-system/fm-wizard` | Wizard stepper with declarative `fm-wizard-node` configuration. |
|
|
56
|
+
| `fm-icon` | `@flitsmeister/design-system/fm-icon` | Icon element using the generated Flitsmeister icon registry. |
|
|
57
|
+
|
|
58
|
+
You can also import the package root to register the main component set:
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
import '@flitsmeister/design-system'
|
|
38
62
|
```
|
|
39
63
|
|
|
40
|
-
|
|
64
|
+
## Installer CLI
|
|
65
|
+
|
|
66
|
+
The package includes a small setup CLI:
|
|
41
67
|
|
|
42
68
|
```bash
|
|
43
|
-
|
|
44
|
-
|
|
69
|
+
npx --package @flitsmeister/design-system design-system-install
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
After installing the package in a project:
|
|
45
73
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
pnpm exec design-system-install
|
|
74
|
+
```bash
|
|
75
|
+
npm exec design-system-install
|
|
49
76
|
```
|
|
50
77
|
|
|
51
|
-
|
|
78
|
+
`fm-ui-install` is available as an alias for the same CLI.
|
|
79
|
+
|
|
80
|
+
## Version History
|
|
52
81
|
|
|
53
|
-
|
|
82
|
+
| Version | Contents | Repository |
|
|
83
|
+
| --- | --- | --- |
|
|
84
|
+
| `3.x` | Lit web components (`fm-button`, `fm-input`, `fm-dropdown`, and more) | [design-system-v2](https://github.com/flitsmeister/design-system-v2) |
|
|
85
|
+
| `2.x` | Vue components and design tokens | [design-system](https://github.com/flitsmeister/design-system) |
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flitsmeister/design-system",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Flitsmeister design system — Lit web components (v3+). v2.x on npm was Vue; same package name, major bump.",
|
|
5
|
-
"license": "
|
|
5
|
+
"license": "ISC",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|