@prioticket/design-system-web 1.0.5 → 1.0.7
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/COMPONENT-DOCUMENTATION.md +561 -430
- package/README.md +344 -341
- package/component-documentation.json +1755 -1128
- package/custom-elements.json +6453 -0
- package/dist/component-gallery.html +2 -2
- package/dist/components/pd-checkbox.cjs.js +6 -6
- package/dist/components/pd-checkbox.es.js +39 -38
- package/dist/components/pd-menu.cjs.js +13 -13
- package/dist/components/pd-menu.es.js +19 -19
- package/dist/components/pd-segmented-stepper.cjs.js +3 -3
- package/dist/components/pd-segmented-stepper.es.js +4 -11
- package/dist/components/pd-stepper.cjs.js +3 -3
- package/dist/components/pd-stepper.es.js +19 -5
- package/dist/components/pd-tabs.cjs.js +4 -4
- package/dist/components/pd-tabs.es.js +53 -60
- package/dist/demo-theming.html +305 -305
- package/dist/types/components/pd-checkbox.d.ts +1 -0
- package/dist/types/components/pd-segmented-stepper.d.ts +2 -3
- package/dist/types/components/pd-stepper.d.ts +2 -0
- package/dist/types/components/pd-tabs.d.ts +2 -2
- package/package.json +25 -5
package/README.md
CHANGED
|
@@ -1,341 +1,344 @@
|
|
|
1
|
-
# Prioticket Design System Web
|
|
2
|
-
|
|
3
|
-
A comprehensive Web Components library built with **Lit** that provides Material Design components for Prioticket applications. This library is designed to work seamlessly across any frontend framework or in vanilla HTML.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- 🎨 **Material Design 3** - Built on Google's official Material Web components
|
|
8
|
-
- 🌈 **Dynamic Theming** - Real-time theme switching without page reload
|
|
9
|
-
- 🌐 **Framework Agnostic** - Works with Angular, React, Vue, PHP, or any web technology
|
|
10
|
-
- 📦 **Tree Shakable** - Load only the components you need
|
|
11
|
-
- 🎯 **TypeScript** - Full type safety and excellent developer experience
|
|
12
|
-
- 🔧 **Customizable** - Flexible theming with CSS custom properties
|
|
13
|
-
- ⚡ **Performance Optimized** - Individual component bundles for maximum efficiency
|
|
14
|
-
- 🎪 **Modern Standards** - ES Modules, Web Components, and HTTP/2 friendly
|
|
15
|
-
|
|
16
|
-
## Installation
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install @prioticket/design-system-web
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"lit
|
|
54
|
-
"lit
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
import
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
|
192
|
-
|
|
193
|
-
| pd-
|
|
194
|
-
| pd-
|
|
195
|
-
| pd-
|
|
196
|
-
| pd-
|
|
197
|
-
| pd-
|
|
198
|
-
| pd-
|
|
199
|
-
| pd-
|
|
200
|
-
| pd-
|
|
201
|
-
| pd-
|
|
202
|
-
| pd-
|
|
203
|
-
| pd-
|
|
204
|
-
| pd-
|
|
205
|
-
| pd-
|
|
206
|
-
| pd-
|
|
207
|
-
| pd-
|
|
208
|
-
| pd-
|
|
209
|
-
| pd-
|
|
210
|
-
| pd-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
**
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
:
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
##
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
1
|
+
# Prioticket Design System Web
|
|
2
|
+
|
|
3
|
+
A comprehensive Web Components library built with **Lit** that provides Material Design components for Prioticket applications. This library is designed to work seamlessly across any frontend framework or in vanilla HTML.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Material Design 3** - Built on Google's official Material Web components
|
|
8
|
+
- 🌈 **Dynamic Theming** - Real-time theme switching without page reload
|
|
9
|
+
- 🌐 **Framework Agnostic** - Works with Angular, React, Vue, PHP, or any web technology
|
|
10
|
+
- 📦 **Tree Shakable** - Load only the components you need
|
|
11
|
+
- 🎯 **TypeScript** - Full type safety and excellent developer experience
|
|
12
|
+
- 🔧 **Customizable** - Flexible theming with CSS custom properties
|
|
13
|
+
- ⚡ **Performance Optimized** - Individual component bundles for maximum efficiency
|
|
14
|
+
- 🎪 **Modern Standards** - ES Modules, Web Components, and HTTP/2 friendly
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @prioticket/design-system-web
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### React projects
|
|
23
|
+
|
|
24
|
+
We publish official wrappers as `@prioticket/design-system-react`. Install that package alongside the web components when building React apps—see `packages/react/README.md` for setup and usage details.
|
|
25
|
+
|
|
26
|
+
## Usage Guide
|
|
27
|
+
|
|
28
|
+
### 1. Quick Start with CDN (Recommended for PHP, Vanilla HTML, etc.)
|
|
29
|
+
|
|
30
|
+
This is the fastest way to try the components on any plain HTML page while keeping everything tree-shakable.
|
|
31
|
+
|
|
32
|
+
**Instructions:**
|
|
33
|
+
1. Add the Material Symbols font (optional, only needed when you use icons).
|
|
34
|
+
2. Include one of the provided theme CSS files.
|
|
35
|
+
3. Copy the import map below so the browser can resolve the bare module specifiers used by Lit, Material Web, and tslib.
|
|
36
|
+
4. Import the components you need from the CDN.
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<!DOCTYPE html>
|
|
40
|
+
<html>
|
|
41
|
+
<head>
|
|
42
|
+
<title>My App</title>
|
|
43
|
+
<!-- 1. Material Symbols for icons -->
|
|
44
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
45
|
+
|
|
46
|
+
<!-- 2. Theme CSS -->
|
|
47
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/theme-only.css">
|
|
48
|
+
|
|
49
|
+
<!-- 3. Import map for the design system and its peer dependencies -->
|
|
50
|
+
<script type="importmap">
|
|
51
|
+
{
|
|
52
|
+
"imports": {
|
|
53
|
+
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
|
|
54
|
+
"lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
|
|
55
|
+
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/lit-html.js",
|
|
56
|
+
"lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/",
|
|
57
|
+
"lit-element": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/lit-element.js",
|
|
58
|
+
"lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/",
|
|
59
|
+
"@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/reactive-element.js",
|
|
60
|
+
"@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/",
|
|
61
|
+
"@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
|
|
62
|
+
"@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
|
|
63
|
+
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
|
|
64
|
+
"tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
</script>
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<pd-button>Click Me</pd-button>
|
|
71
|
+
|
|
72
|
+
<!-- 4. Import the components you need -->
|
|
73
|
+
<script type="module">
|
|
74
|
+
await import("https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/components/pd-button.es.js");
|
|
75
|
+
</script>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
**Notes:**
|
|
81
|
+
- Reuse the same import map for every demo page; add or remove component imports as needed (see `public/component-gallery.html` for a larger example).
|
|
82
|
+
- Chromium-based browsers allow this to run directly from `file://` URLs. For Safari/Firefox or when sharing with others, serve the folder over HTTP (for example, `npx http-server public` or `python3 -m http.server`).
|
|
83
|
+
- Update the `@prioticket/design-system-web@1.0.7` version string when a new release becomes available.
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<!-- Theme CSS options -->
|
|
87
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/theme-only.css">
|
|
88
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/theme-with-fonts.css">
|
|
89
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/fonts-only.css">
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**PHP Example:**
|
|
93
|
+
```php
|
|
94
|
+
<!DOCTYPE html>
|
|
95
|
+
<html>
|
|
96
|
+
<head>
|
|
97
|
+
<title><?= htmlspecialchars($pageTitle) ?></title>
|
|
98
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
99
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/theme-only.css">
|
|
100
|
+
<script type="importmap">{
|
|
101
|
+
"imports": {
|
|
102
|
+
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
|
|
103
|
+
"lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
|
|
104
|
+
"@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
|
|
105
|
+
"@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
|
|
106
|
+
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
|
|
107
|
+
"tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
|
|
108
|
+
}
|
|
109
|
+
}</script>
|
|
110
|
+
</head>
|
|
111
|
+
<body>
|
|
112
|
+
<pd-button variant="filled"><?= htmlspecialchars($buttonText) ?></pd-button>
|
|
113
|
+
<pd-card>
|
|
114
|
+
<h3><?= htmlspecialchars($cardTitle) ?></h3>
|
|
115
|
+
<p><?= htmlspecialchars($cardContent) ?></p>
|
|
116
|
+
</pd-card>
|
|
117
|
+
|
|
118
|
+
<script type="module">
|
|
119
|
+
await import("https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/components/pd-button.es.js");
|
|
120
|
+
await import("https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/components/pd-card.es.js");
|
|
121
|
+
</script>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
#### About single-script bundles
|
|
127
|
+
|
|
128
|
+
The published package focuses on ES modules so that browsers and bundlers can tree-shake unused Material Web dependencies. Producing a one-file UMD/IIFE bundle would dramatically increase payload size, and Vite cannot emit a shared UMD bundle while we expose every component as an entry point. We plan to revisit this once we have a dedicated aggregation build, but for 1.0.7 we recommend sticking with the import-map approach above or a real bundler setup.
|
|
129
|
+
|
|
130
|
+
### 2. Usage with a Bundler (Framework Integration)
|
|
131
|
+
|
|
132
|
+
#### Angular
|
|
133
|
+
|
|
134
|
+
**Step 1: Add CSS to angular.json**
|
|
135
|
+
|
|
136
|
+
This tells the Angular CLI to include the theme styles in your application's global CSS bundle.
|
|
137
|
+
|
|
138
|
+
```json
|
|
139
|
+
"styles": [
|
|
140
|
+
"src/styles.css",
|
|
141
|
+
"node_modules/@prioticket/design-system-web/dist/theme-only.css"
|
|
142
|
+
]
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
**Step 1.5: Add Material Icons to index.html**
|
|
146
|
+
|
|
147
|
+
Add the Material Icons font to your `src/index.html` file:
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
<head>
|
|
151
|
+
<!-- Other head content -->
|
|
152
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
153
|
+
</head>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
**Step 2: Import Components and Add Schema**
|
|
157
|
+
|
|
158
|
+
In your Angular component, import the components to register them and add `CUSTOM_ELEMENTS_SCHEMA`.
|
|
159
|
+
|
|
160
|
+
```typescript
|
|
161
|
+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
162
|
+
|
|
163
|
+
// Import components by their package path
|
|
164
|
+
import '@prioticket/design-system-web/components/pd-button';
|
|
165
|
+
|
|
166
|
+
@Component({
|
|
167
|
+
selector: 'app-example',
|
|
168
|
+
template: `<pd-button>Hello from Angular</pd-button>`,
|
|
169
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
170
|
+
})
|
|
171
|
+
export class ExampleComponent {}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
#### React / Vue / Other Frameworks
|
|
175
|
+
|
|
176
|
+
Similar pattern - install via npm, import the CSS file, and import individual components:
|
|
177
|
+
|
|
178
|
+
```javascript
|
|
179
|
+
// Import the theme CSS (exact method depends on your bundler)
|
|
180
|
+
import '@prioticket/design-system-web/dist/theme-only.css';
|
|
181
|
+
|
|
182
|
+
// Import components
|
|
183
|
+
import '@prioticket/design-system-web/components/pd-button';
|
|
184
|
+
|
|
185
|
+
// Use in JSX/template
|
|
186
|
+
<pd-button>Hello from React</pd-button>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Available Components
|
|
190
|
+
|
|
191
|
+
| Component | Description | CDN Import Path |
|
|
192
|
+
|-----------|-------------|-----------------|
|
|
193
|
+
| pd-button | Material Design buttons | `components/pd-button.es.js` |
|
|
194
|
+
| pd-card | Cards for content grouping | `components/pd-card.es.js` |
|
|
195
|
+
| pd-checkbox | Checkboxes | `components/pd-checkbox.es.js` |
|
|
196
|
+
| pd-chip | Chips for tags/filters | `components/pd-chip.es.js` |
|
|
197
|
+
| pd-dialog | Modal dialogs | `components/pd-dialog.es.js` |
|
|
198
|
+
| pd-expandable-card | Expandable cards with collapsible content | `components/pd-expandable-card.es.js` |
|
|
199
|
+
| pd-fab | Floating action buttons | `components/pd-fab.es.js` |
|
|
200
|
+
| pd-icon | Material Design icons | `components/pd-icon.es.js` |
|
|
201
|
+
| pd-icon-button | Icon buttons | `components/pd-icon-button.es.js` |
|
|
202
|
+
| pd-list | Lists with items | `components/pd-list.es.js` |
|
|
203
|
+
| pd-menu | Dropdown menus | `components/pd-menu.es.js` |
|
|
204
|
+
| pd-menu-item | Individual menu items | `components/pd-menu-item.es.js` |
|
|
205
|
+
| pd-progress | Progress indicators | `components/pd-progress.es.js` |
|
|
206
|
+
| pd-radio | Radio buttons | `components/pd-radio.es.js` |
|
|
207
|
+
| pd-segmented-button | Segmented button controls | `components/pd-segmented-button.es.js` |
|
|
208
|
+
| pd-segmented-stepper | Segmented stepper navigation | `components/pd-segmented-stepper.es.js` |
|
|
209
|
+
| pd-select | Select dropdowns | `components/pd-select.es.js` |
|
|
210
|
+
| pd-slider | Range sliders | `components/pd-slider.es.js` |
|
|
211
|
+
| pd-stepper | Step indicators | `components/pd-stepper.es.js` |
|
|
212
|
+
| pd-switch | Toggle switches | `components/pd-switch.es.js` |
|
|
213
|
+
| pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
|
|
214
|
+
| pd-text-field | Text input fields | `components/pd-text-field.es.js` |
|
|
215
|
+
|
|
216
|
+
## Dynamic Theming
|
|
217
|
+
|
|
218
|
+
The design system supports real-time theme switching without page reload. Apply custom themes dynamically to match your brand or user preferences.
|
|
219
|
+
|
|
220
|
+
### Basic Usage
|
|
221
|
+
|
|
222
|
+
```javascript
|
|
223
|
+
// Import the theming system
|
|
224
|
+
import { initialize } from '@prioticket/design-system-web/theming';
|
|
225
|
+
|
|
226
|
+
// Apply a custom theme
|
|
227
|
+
await initialize({
|
|
228
|
+
theme: {
|
|
229
|
+
colorPrimary: '#ff6600',
|
|
230
|
+
colorOnPrimary: '#ffffff',
|
|
231
|
+
colorSurface: '#fff8f5',
|
|
232
|
+
shapeCornerSmall: '8px'
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### CDN Usage
|
|
238
|
+
|
|
239
|
+
```html
|
|
240
|
+
<script type="module">
|
|
241
|
+
import { initialize } from 'https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@latest/dist/theming.es.js';
|
|
242
|
+
|
|
243
|
+
// Apply orange theme
|
|
244
|
+
await initialize({
|
|
245
|
+
theme: {
|
|
246
|
+
colorPrimary: '#ff6600',
|
|
247
|
+
colorPrimaryContainer: '#fff3e8',
|
|
248
|
+
shapeCornerMedium: '12px'
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
</script>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
### Supported Theme Tokens
|
|
255
|
+
|
|
256
|
+
- **Colors**: `colorPrimary`, `colorOnPrimary`, `colorPrimaryContainer`, `colorSecondary`, `colorSurface`, `colorOnSurface`, `colorBackground`, `colorError`
|
|
257
|
+
- **Shapes**: `shapeCornerSmall`, `shapeCornerMedium`, `shapeCornerLarge`
|
|
258
|
+
|
|
259
|
+
### Framework Examples
|
|
260
|
+
|
|
261
|
+
**React:**
|
|
262
|
+
```jsx
|
|
263
|
+
useEffect(() => {
|
|
264
|
+
initialize({
|
|
265
|
+
theme: { colorPrimary: '#4caf50' }
|
|
266
|
+
});
|
|
267
|
+
}, []);
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
**Angular:**
|
|
271
|
+
```typescript
|
|
272
|
+
ngOnInit() {
|
|
273
|
+
initialize({
|
|
274
|
+
theme: { colorPrimary: '#2196f3' }
|
|
275
|
+
});
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
### Live Demo
|
|
280
|
+
|
|
281
|
+
Run `npm run dev` and visit `/demo-theming.html` to see real-time theme switching in action.
|
|
282
|
+
|
|
283
|
+
## Customizing Fonts
|
|
284
|
+
|
|
285
|
+
The design system is built to work with any font stack. The theme CSS uses CSS custom properties:
|
|
286
|
+
|
|
287
|
+
```css
|
|
288
|
+
/* Override Prioticket fonts with your own */
|
|
289
|
+
:root {
|
|
290
|
+
--md-sys-typescale-body-large-font: "Your Font", Arial, sans-serif;
|
|
291
|
+
--md-sys-typescale-title-medium-font: "Your Font", Arial, sans-serif;
|
|
292
|
+
--md-sys-typescale-headline-small-font: "Your Font", Arial, sans-serif;
|
|
293
|
+
}
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
## CSS Architecture
|
|
297
|
+
|
|
298
|
+
- **theme-only.css** (14KB) - All component styles without fonts
|
|
299
|
+
- **fonts-only.css** (1.3KB) - Just Prioticket font declarations
|
|
300
|
+
- **theme-with-fonts.css** (15.7KB) - Complete theme including fonts
|
|
301
|
+
- **fonts/** - Font files (~232KB total)
|
|
302
|
+
|
|
303
|
+
Choose `theme-only.css` to use your existing fonts, or `theme-with-fonts.css` for the complete Prioticket experience.
|
|
304
|
+
|
|
305
|
+
## Performance Best Practices
|
|
306
|
+
|
|
307
|
+
1. **Load only what you need** - Import individual components via CDN
|
|
308
|
+
2. **Use theme-only.css** - If you already have fonts, skip the font files
|
|
309
|
+
3. **Leverage HTTP/2** - Multiple small files load efficiently on modern servers
|
|
310
|
+
4. **CDN for Lit** - Load the Lit dependency from a fast CDN
|
|
311
|
+
5. **Conditional loading** - In server-side apps, only load components used on each page
|
|
312
|
+
|
|
313
|
+
## Browser Support
|
|
314
|
+
|
|
315
|
+
- Chrome 84+
|
|
316
|
+
- Firefox 90+
|
|
317
|
+
- Safari 14+
|
|
318
|
+
- Edge 84+
|
|
319
|
+
|
|
320
|
+
## Development
|
|
321
|
+
|
|
322
|
+
```bash
|
|
323
|
+
# Install dependencies
|
|
324
|
+
npm install
|
|
325
|
+
|
|
326
|
+
# Start development server
|
|
327
|
+
npm run dev
|
|
328
|
+
|
|
329
|
+
# Build the library
|
|
330
|
+
npm run build
|
|
331
|
+
|
|
332
|
+
# Run Storybook
|
|
333
|
+
npm run storybook
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
## Source Code
|
|
337
|
+
|
|
338
|
+
The source code for this library is proprietary and maintained in a private repository at Prioticket.
|
|
339
|
+
|
|
340
|
+
## Support
|
|
341
|
+
|
|
342
|
+
For questions or bug reports, please contact the Prioticket development team internally.
|
|
343
|
+
|
|
344
|
+
|