@prioticket/design-system-web 1.0.2 → 1.0.5

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.
Files changed (4) hide show
  1. package/README.md +67 -35
  2. package/dist/component-gallery.html +431 -0
  3. package/dist/demo-theming.html +94 -120
  4. package/package.json +19 -10
package/README.md CHANGED
@@ -23,44 +23,66 @@ npm install @prioticket/design-system-web
23
23
 
24
24
  ### 1. Quick Start with CDN (Recommended for PHP, Vanilla HTML, etc.)
25
25
 
26
- This is the fastest way to use the components on any web page.
26
+ This is the fastest way to try the components on any plain HTML page while keeping everything tree-shakable.
27
27
 
28
28
  **Instructions:**
29
- Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDelivr CDN. Remember to replace `1.0.1` with the latest version number.
29
+ 1. Add the Material Symbols font (optional, only needed when you use icons).
30
+ 2. Include one of the provided theme CSS files.
31
+ 3. Copy the import map below so the browser can resolve the bare module specifiers used by Lit, Material Web, and tslib.
32
+ 4. Import the components you need from the CDN.
30
33
 
31
34
  ```html
32
35
  <!DOCTYPE html>
33
36
  <html>
34
37
  <head>
35
- <title>My App</title>
36
- <!-- 1. Load Material Icons font for icons -->
37
- <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">
38
-
39
- <!-- 2. Load the theme CSS from the CDN -->
40
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
38
+ <title>My App</title>
39
+ <!-- 1. Material Symbols for icons -->
40
+ <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">
41
+
42
+ <!-- 2. Theme CSS -->
43
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-only.css">
44
+
45
+ <!-- 3. Import map for the design system and its peer dependencies -->
46
+ <script type="importmap">
47
+ {
48
+ "imports": {
49
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
50
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
51
+ "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/lit-html.js",
52
+ "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/",
53
+ "lit-element": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/lit-element.js",
54
+ "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/",
55
+ "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/reactive-element.js",
56
+ "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/",
57
+ "@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
58
+ "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
59
+ "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
60
+ "tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
61
+ }
62
+ }
63
+ </script>
41
64
  </head>
42
65
  <body>
43
- <pd-button>Click Me</pd-button>
44
-
45
- <!-- 3. Load the required Lit dependency from a public CDN -->
46
- <script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
66
+ <pd-button>Click Me</pd-button>
47
67
 
48
- <!-- 4. Load the components you need from our CDN -->
49
- <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-button.es.js"></script>
68
+ <!-- 4. Import the components you need -->
69
+ <script type="module">
70
+ await import("https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/components/pd-button.es.js");
71
+ </script>
50
72
  </body>
51
73
  </html>
52
74
  ```
53
75
 
54
- **CSS Options:**
55
- ```html
56
- <!-- Option 1: Theme only (recommended - use your existing fonts) -->
57
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
58
-
59
- <!-- Option 2: Theme + Prioticket fonts -->
60
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-with-fonts.css">
76
+ **Notes:**
77
+ - 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).
78
+ - 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`).
79
+ - Update the `@prioticket/design-system-web@1.0.5` version string when a new release becomes available.
61
80
 
62
- <!-- Option 3: Just Prioticket fonts (if you already have the theme) -->
63
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/fonts-only.css">
81
+ ```html
82
+ <!-- Theme CSS options -->
83
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-only.css">
84
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-with-fonts.css">
85
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/fonts-only.css">
64
86
  ```
65
87
 
66
88
  **PHP Example:**
@@ -69,31 +91,38 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
69
91
  <html>
70
92
  <head>
71
93
  <title><?= htmlspecialchars($pageTitle) ?></title>
72
- <!-- Material Icons font for icons -->
73
94
  <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">
74
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
95
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-only.css">
96
+ <script type="importmap">{
97
+ "imports": {
98
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
99
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
100
+ "@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
101
+ "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
102
+ "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
103
+ "tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
104
+ }
105
+ }</script>
75
106
  </head>
76
107
  <body>
77
108
  <pd-button variant="filled"><?= htmlspecialchars($buttonText) ?></pd-button>
78
-
79
109
  <pd-card>
80
110
  <h3><?= htmlspecialchars($cardTitle) ?></h3>
81
111
  <p><?= htmlspecialchars($cardContent) ?></p>
82
112
  </pd-card>
83
113
 
84
- <script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
85
-
86
- <?php if ($showButton): ?>
87
- <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-button.es.js"></script>
88
- <?php endif; ?>
89
-
90
- <?php if ($showCard): ?>
91
- <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-card.es.js"></script>
92
- <?php endif; ?>
114
+ <script type="module">
115
+ await import("https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/components/pd-button.es.js");
116
+ await import("https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/components/pd-card.es.js");
117
+ </script>
93
118
  </body>
94
119
  </html>
95
120
  ```
96
121
 
122
+ #### About single-script bundles
123
+
124
+ 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.5 we recommend sticking with the import-map approach above or a real bundler setup.
125
+
97
126
  ### 2. Usage with a Bundler (Framework Integration)
98
127
 
99
128
  #### Angular
@@ -307,3 +336,6 @@ The source code for this library is proprietary and maintained in a private repo
307
336
  ## Support
308
337
 
309
338
  For questions or bug reports, please contact the Prioticket development team internally.
339
+
340
+
341
+
package/dist/component-gallery.html ADDED
@@ -0,0 +1,431 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Prioticket Design System – Component Gallery</title>
7
+
8
+ <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">
9
+
10
+ <script type="importmap">
11
+ {
12
+ "imports": {
13
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
14
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
15
+ "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/lit-html.js",
16
+ "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/",
17
+ "lit-element": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/lit-element.js",
18
+ "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/",
19
+ "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/reactive-element.js",
20
+ "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/",
21
+ "@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
22
+ "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
23
+ "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
24
+ "tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
25
+ }
26
+ }
27
+ </script>
28
+
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-only.css">
30
+
31
+ <style>
32
+ :root {
33
+ color-scheme: light;
34
+ }
35
+
36
+ body {
37
+ margin: 0;
38
+ font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
39
+ background: var(--md-sys-color-surface);
40
+ color: var(--md-sys-color-on-surface);
41
+ }
42
+
43
+ .page-header {
44
+ max-width: 1100px;
45
+ margin: 0 auto;
46
+ padding: 48px 24px 24px;
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: 12px;
50
+ }
51
+
52
+ .page-header h1 {
53
+ margin: 0;
54
+ font-size: 2.25rem;
55
+ font-weight: 600;
56
+ }
57
+
58
+ .page-header p {
59
+ margin: 0;
60
+ max-width: 720px;
61
+ color: var(--md-sys-color-on-surface-variant, #4a4a4a);
62
+ }
63
+
64
+ main {
65
+ max-width: 1100px;
66
+ margin: 0 auto 96px;
67
+ padding: 0 24px;
68
+ display: flex;
69
+ flex-direction: column;
70
+ gap: 32px;
71
+ }
72
+
73
+ section {
74
+ background: var(--md-sys-color-surface-container, #ffffff);
75
+ border: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,0.08));
76
+ border-radius: var(--md-sys-shape-corner-medium, 16px);
77
+ padding: 24px;
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: 20px;
81
+ box-shadow: var(--md-sys-elevation-1, 0 1px 3px rgba(0,0,0,0.08));
82
+ }
83
+
84
+ section h2 {
85
+ margin: 0;
86
+ font-size: 1.4rem;
87
+ }
88
+
89
+ section p.section-description {
90
+ margin: 0;
91
+ color: var(--md-sys-color-on-surface-variant, #5f5f5f);
92
+ }
93
+
94
+ .component-grid {
95
+ display: flex;
96
+ flex-wrap: wrap;
97
+ gap: 16px 24px;
98
+ align-items: center;
99
+ }
100
+
101
+ .component-stack {
102
+ display: flex;
103
+ flex-direction: column;
104
+ gap: 16px;
105
+ }
106
+
107
+ .slider-field {
108
+ display: flex;
109
+ flex-direction: column;
110
+ gap: 8px;
111
+ min-width: 220px;
112
+ }
113
+
114
+ .field-label {
115
+ font-size: 0.875rem;
116
+ color: var(--md-sys-color-on-surface-variant, #5f5f5f);
117
+ }
118
+
119
+ .toggle-field {
120
+ display: inline-flex;
121
+ align-items: center;
122
+ gap: 12px;
123
+ }
124
+
125
+ .cards-grid {
126
+ display: grid;
127
+ gap: 20px;
128
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
129
+ }
130
+
131
+ pd-card, pd-expandable-card {
132
+ display: block;
133
+ }
134
+
135
+ .tabs-wrapper {
136
+ display: flex;
137
+ flex-direction: column;
138
+ gap: 16px;
139
+ }
140
+
141
+ .list-wrapper {
142
+ max-width: 420px;
143
+ }
144
+
145
+ .menu-demo {
146
+ position: relative;
147
+ display: inline-flex;
148
+ }
149
+
150
+ .menu-demo #menu-trigger {
151
+ width: 100%;
152
+ }
153
+
154
+ .dialog-actions {
155
+ display: flex;
156
+ justify-content: flex-end;
157
+ gap: 12px;
158
+ margin-top: 16px;
159
+ }
160
+
161
+ pd-dialog::part(content) {
162
+ max-width: 420px;
163
+ }
164
+
165
+ @media (max-width: 640px) {
166
+ section {
167
+ padding: 20px;
168
+ }
169
+
170
+ .page-header {
171
+ padding: 32px 20px 20px;
172
+ }
173
+
174
+ main {
175
+ padding: 0 20px;
176
+ }
177
+ }
178
+ </style>
179
+ </head>
180
+ <body>
181
+ <header class="page-header">
182
+ <h1>Prioticket Design System &mdash; Component Gallery</h1>
183
+ <p>Quickly preview the core Prioticket web components without a build step. This page loads everything directly from the CDN using the recommended import map.</p>
184
+ </header>
185
+
186
+ <main>
187
+ <section>
188
+ <h2>Buttons & Quick Actions</h2>
189
+ <p class="section-description">Primary call-to-actions alongside compact controls and iconography.</p>
190
+ <div class="component-grid">
191
+ <pd-button>Filled Button</pd-button>
192
+ <pd-button variant="outlined">Outlined Button</pd-button>
193
+ <pd-button variant="text">Text Button</pd-button>
194
+ <pd-button variant="tonal" icon="event">Tonal Button</pd-button>
195
+ <pd-icon-button icon="favorite" aria-label="Favorite"></pd-icon-button>
196
+ <pd-fab icon="add" label="Create" lower>
197
+ </pd-fab>
198
+ <pd-chip variant="assist" label="Assist Chip" icon="help"></pd-chip>
199
+ <pd-chip variant="filter" label="Selected" selected></pd-chip>
200
+ <pd-icon name="notifications" size="medium"></pd-icon>
201
+ </div>
202
+
203
+ </section>
204
+
205
+ <section>
206
+ <h2>Form Inputs</h2>
207
+ <p class="section-description">Text capture, selections, and toggles built on Material Web primitives.</p>
208
+ <div class="component-grid">
209
+ <pd-text-field label="Guest name" supporting-text="Full name as on passport"></pd-text-field>
210
+ <pd-text-field variant="filled" label="Email" type="email" placeholder="guest@example.com" required></pd-text-field>
211
+ <pd-select data-demo="destination" label="Destination" supporting-text="Popular locations"></pd-select>
212
+ <div class="slider-field">
213
+ <span class="field-label">Group size</span>
214
+ <pd-slider min="1" max="10" value="4" step="1" ticks labeled></pd-slider>
215
+ </div>
216
+ <pd-checkbox label="Add travel insurance" checked></pd-checkbox>
217
+ <pd-radio name="plan" value="standard" checked>Standard plan</pd-radio>
218
+ <pd-radio name="plan" value="premium">Premium plan</pd-radio>
219
+ <div class="toggle-field">
220
+ <pd-switch selected aria-label="Enable reminders"></pd-switch>
221
+ <span class="field-label">Enable reminders</span>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <section>
227
+ <h2>Cards & Navigation</h2>
228
+ <p class="section-description">Containers and navigation primitives for grouping related content.</p>
229
+ <div class="cards-grid">
230
+ <pd-card>
231
+ <div style="padding: 20px; display: flex; flex-direction: column; gap: 12px;">
232
+ <h3 style="margin: 0; font-size: 1.1rem;">Upcoming tour</h3>
233
+ <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Amsterdam Canal Cruise &mdash; 2 tickets confirmed for 18 Oct 2025.</p>
234
+ <pd-button variant="text">Manage booking</pd-button>
235
+ </div>
236
+ </pd-card>
237
+ <pd-expandable-card header="Travel requirements" subheader="Visa & preparation">
238
+ <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
239
+ <p style="margin: 0;">Remember to bring a printed copy of your voucher and arrive 15 minutes before departure.</p>
240
+ <pd-checkbox label="Send me a reminder"></pd-checkbox>
241
+ </div>
242
+ </pd-expandable-card>
243
+ </div>
244
+ <div class="tabs-wrapper">
245
+ <pd-tabs>
246
+ <button slot="tab">Overview</button>
247
+ <button slot="tab">Details</button>
248
+ <button slot="tab">Reviews</button>
249
+ <div slot="panel">
250
+ <p style="margin: 16px 0 0;">Key highlights and itinerary summary.</p>
251
+ </div>
252
+ <div slot="panel">
253
+ <p style="margin: 16px 0 0;">Full schedule with timings, inclusions, and pricing.</p>
254
+ </div>
255
+ <div slot="panel">
256
+ <p style="margin: 16px 0 0;">Customer feedback aggregated from recent tours.</p>
257
+ </div>
258
+ </pd-tabs>
259
+ </div>
260
+ <div class="list-wrapper">
261
+ <pd-list>
262
+ <pd-list-item icon="event" headline="Morning Cruise" supporting-text="09:00 &mdash; 2h experience"></pd-list-item>
263
+ <md-divider></md-divider>
264
+ <pd-list-item icon="restaurant" headline="Lunch add-on" supporting-text="3-course meal" trailing-icon="chevron_right"></pd-list-item>
265
+ <md-divider></md-divider>
266
+ <pd-list-item icon="directions_bus" headline="Shuttle" supporting-text="Hotel pickup available"></pd-list-item>
267
+ </pd-list>
268
+ </div>
269
+ </section>
270
+
271
+ <section>
272
+ <h2>Overlays & Feedback</h2>
273
+ <p class="section-description">Dialogs, progress indicators, and menus for transient interactions.</p>
274
+ <div class="component-grid">
275
+ <div class="menu-demo">
276
+ <pd-button id="menu-trigger" icon="more_vert" variant="outlined">More actions</pd-button>
277
+ <pd-menu anchor="menu-trigger" id="demo-menu">
278
+ <pd-menu-item text="Share" leading-icon="share"></pd-menu-item>
279
+ <pd-menu-item text="Duplicate" leading-icon="content_copy"></pd-menu-item>
280
+ <pd-menu-item text="Archive" leading-icon="inventory_2"></pd-menu-item>
281
+ </pd-menu>
282
+ </div>
283
+
284
+ <div>
285
+ <pd-button id="open-dialog" variant="filled" icon="info">Show info dialog</pd-button>
286
+ <pd-dialog id="info-dialog" headline="Booking details">
287
+ <p slot="content">Your tickets are confirmed. You can manage guest information or reschedule up to 24 hours before departure.</p>
288
+ <div slot="actions" class="dialog-actions">
289
+ <pd-button id="close-dialog" variant="text">Close</pd-button>
290
+ <pd-button variant="filled">View booking</pd-button>
291
+ </div>
292
+ </pd-dialog>
293
+ </div>
294
+
295
+ <div class="component-stack">
296
+ <pd-progress indeterminate></pd-progress>
297
+ <pd-progress value="0.45"></pd-progress>
298
+ </div>
299
+ </div>
300
+ </section>
301
+
302
+ <section>
303
+ <h2>Workflows & Progress</h2>
304
+ <p class="section-description">Stepper patterns for long flows and checkout journeys.</p>
305
+ <div class="component-stack">
306
+ <pd-stepper id="booking-stepper"></pd-stepper>
307
+ <div class="component-grid">
308
+ <pd-button id="stepper-prev" variant="text" icon="chevron_left">Back</pd-button>
309
+ <pd-button id="stepper-next" variant="filled" icon="chevron_right" icon-trailing>Next</pd-button>
310
+ </div>
311
+ </div>
312
+ <div class="component-stack">
313
+ <pd-segmented-stepper id="compact-stepper">
314
+ <pd-stepper-item>Select</pd-stepper-item>
315
+ <pd-stepper-item>Details</pd-stepper-item>
316
+ <pd-stepper-item>Payment</pd-stepper-item>
317
+ <pd-stepper-item>Confirm</pd-stepper-item>
318
+ </pd-segmented-stepper>
319
+ </div>
320
+ </section>
321
+ </main>
322
+
323
+ <script type="module">
324
+ const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist';
325
+ const COMPONENT_BASE = CDN_BASE + '/components';
326
+
327
+ const COMPONENTS = [
328
+ 'pd-button',
329
+ 'pd-card',
330
+ 'pd-checkbox',
331
+ 'pd-chip',
332
+ 'pd-dialog',
333
+ 'pd-expandable-card',
334
+ 'pd-fab',
335
+ 'pd-icon',
336
+ 'pd-icon-button',
337
+ 'pd-list',
338
+ 'pd-menu',
339
+ 'pd-menu-item',
340
+ 'pd-progress',
341
+ 'pd-radio',
342
+ 'pd-segmented-button',
343
+ 'pd-segmented-stepper',
344
+ 'pd-select',
345
+ 'pd-slider',
346
+ 'pd-stepper',
347
+ 'pd-switch',
348
+ 'pd-tabs',
349
+ 'pd-text-field'
350
+ ];
351
+
352
+ await Promise.all(COMPONENTS.map((name) => import(COMPONENT_BASE + '/' + name + '.es.js')));
353
+
354
+ // Populate select options
355
+ const destinationSelect = document.querySelector('pd-select[data-demo="destination"]');
356
+ if (destinationSelect) {
357
+ destinationSelect.options = [
358
+ { value: 'ams', label: 'Amsterdam' },
359
+ { value: 'bcn', label: 'Barcelona' },
360
+ { value: 'lis', label: 'Lisbon' },
361
+ { value: 'nyc', label: 'New York' }
362
+ ];
363
+ destinationSelect.value = 'ams';
364
+ }
365
+
366
+ // Stepper setup
367
+ const stepper = document.getElementById('booking-stepper');
368
+ if (stepper) {
369
+ stepper.steps = [
370
+ { label: 'Select tickets', content: 'Choose the experience and ticket quantity.' },
371
+ { label: 'Guest details', content: 'Add visitor information and preferences.', optional: true },
372
+ { label: 'Payment', content: 'Complete payment to secure your booking.' },
373
+ { label: 'Confirmation', content: 'Receive confirmation and manage booking.' }
374
+ ];
375
+ }
376
+
377
+ const prevButton = document.getElementById('stepper-prev');
378
+ const nextButton = document.getElementById('stepper-next');
379
+
380
+ const updateStepperButtons = () => {
381
+ if (!stepper || !prevButton || !nextButton) return;
382
+ prevButton.disabled = stepper.currentStep === 0;
383
+ nextButton.disabled = stepper.currentStep >= stepper.steps.length - 1;
384
+ };
385
+
386
+ if (prevButton && nextButton && stepper) {
387
+ prevButton.addEventListener('click', () => {
388
+ stepper.back();
389
+ updateStepperButtons();
390
+ });
391
+
392
+ nextButton.addEventListener('click', () => {
393
+ stepper.next();
394
+ updateStepperButtons();
395
+ });
396
+
397
+ stepper.addEventListener('step-change', updateStepperButtons);
398
+ updateStepperButtons();
399
+ }
400
+
401
+ // Segmented stepper configuration
402
+ const segmentedStepper = document.getElementById('compact-stepper');
403
+ if (segmentedStepper) {
404
+ segmentedStepper.activeStep = 1;
405
+ segmentedStepper.completedSteps = [0];
406
+ }
407
+
408
+ // Dialog wiring
409
+ const dialog = document.getElementById('info-dialog');
410
+ const openDialogButton = document.getElementById('open-dialog');
411
+ const closeDialogButton = document.getElementById('close-dialog');
412
+
413
+ if (dialog instanceof HTMLElement) {
414
+ openDialogButton?.addEventListener('click', () => dialog.setAttribute('open', ''));
415
+ closeDialogButton?.addEventListener('click', () => dialog.removeAttribute('open'));
416
+ }
417
+
418
+ // Menu wiring
419
+ const menu = document.getElementById('demo-menu');
420
+ const menuTrigger = document.getElementById('menu-trigger');
421
+ if (menu && menuTrigger) {
422
+ menuTrigger.addEventListener('click', () => {
423
+ menu.open = !menu.open;
424
+ });
425
+ menu.addEventListener('closed', () => {
426
+ menuTrigger.focus();
427
+ });
428
+ }
429
+ </script>
430
+ </body>
431
+ </html>
package/dist/demo-theming.html CHANGED
@@ -4,13 +4,30 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Dynamic Theming Demo - Prioticket Design System</title>
7
-
8
- <!-- Load Material Icons font -->
7
+
9
8
  <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">
10
-
11
- <!-- Load theme CSS -->
12
- <link rel="stylesheet" href="/dist/theme-only.css">
13
-
9
+
10
+ <script type="importmap">
11
+ {
12
+ "imports": {
13
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
14
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
15
+ "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/lit-html.js",
16
+ "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/",
17
+ "lit-element": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/lit-element.js",
18
+ "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/",
19
+ "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/reactive-element.js",
20
+ "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/",
21
+ "@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
22
+ "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
23
+ "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
24
+ "tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
25
+ }
26
+ }
27
+ </script>
28
+
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-only.css">
30
+
14
31
  <style>
15
32
  body {
16
33
  font-family: system-ui, -apple-system, sans-serif;
@@ -20,7 +37,7 @@
20
37
  color: var(--md-sys-color-on-background);
21
38
  transition: background-color 0.3s ease, color 0.3s ease;
22
39
  }
23
-
40
+
24
41
  .demo-section {
25
42
  margin-bottom: 2rem;
26
43
  padding: 1.5rem;
@@ -30,14 +47,14 @@
30
47
  color: var(--md-sys-color-on-surface);
31
48
  transition: all 0.3s ease;
32
49
  }
33
-
50
+
34
51
  .theme-controls {
35
52
  display: flex;
36
53
  gap: 1rem;
37
54
  flex-wrap: wrap;
38
55
  margin-bottom: 1rem;
39
56
  }
40
-
57
+
41
58
  .theme-controls button {
42
59
  padding: 0.5rem 1rem;
43
60
  border: 1px solid var(--md-sys-color-outline, #ccc);
@@ -47,18 +64,18 @@
47
64
  cursor: pointer;
48
65
  transition: all 0.2s ease;
49
66
  }
50
-
67
+
51
68
  .theme-controls button:hover {
52
69
  background: var(--md-sys-color-surface-variant, #f5f5f5);
53
70
  }
54
-
71
+
55
72
  .component-showcase {
56
73
  display: flex;
57
74
  gap: 1rem;
58
75
  flex-wrap: wrap;
59
76
  margin-top: 1rem;
60
77
  }
61
-
78
+
62
79
  .status {
63
80
  padding: 1rem;
64
81
  border-radius: var(--md-sys-shape-corner-small, 4px);
@@ -66,9 +83,9 @@
66
83
  color: var(--md-sys-color-on-primary-container, #0d47a1);
67
84
  margin: 1rem 0;
68
85
  }
69
-
86
+
70
87
  #debug-output {
71
- font-family: 'Courier New', monospace;
88
+ font-family: "Courier New", monospace;
72
89
  background: var(--md-sys-color-surface-variant, #f5f5f5);
73
90
  color: var(--md-sys-color-on-surface-variant, #303030);
74
91
  padding: 1rem;
@@ -81,24 +98,24 @@
81
98
  </style>
82
99
  </head>
83
100
  <body>
84
- <h1>🎨 Dynamic Theming Demo</h1>
85
-
101
+ <h1>Dynamic Theming Demo</h1>
102
+
86
103
  <div class="status" id="status">
87
- ⚡ Loading theming system...
104
+ Loading theming system...
88
105
  </div>
89
-
106
+
90
107
  <div class="demo-section">
91
108
  <h2>Theme Controls</h2>
92
109
  <p>Click the buttons below to see real-time theme changes:</p>
93
110
  <div class="theme-controls">
94
111
  <button onclick="applyDefaultTheme()">Default Theme</button>
95
- <button onclick="applyOrangeTheme()">🧡 Orange Theme</button>
96
- <button onclick="applyPurpleTheme()">💜 Purple Theme</button>
97
- <button onclick="applyGreenTheme()">💚 Green Theme</button>
98
- <button onclick="applyDarkTheme()">🌙 Dark Theme</button>
112
+ <button onclick="applyOrangeTheme()">Orange Theme</button>
113
+ <button onclick="applyPurpleTheme()">Purple Theme</button>
114
+ <button onclick="applyGreenTheme()">Green Theme</button>
115
+ <button onclick="applyDarkTheme()">Dark Theme</button>
99
116
  </div>
100
117
  </div>
101
-
118
+
102
119
  <div class="demo-section">
103
120
  <h2>Components</h2>
104
121
  <p>Components automatically update with theme changes:</p>
@@ -108,7 +125,7 @@
108
125
  <pd-button variant="text">Text</pd-button>
109
126
  <pd-button variant="tonal">Tonal</pd-button>
110
127
  </div>
111
-
128
+
112
129
  <div class="component-showcase" style="margin-top: 1rem;">
113
130
  <pd-card>
114
131
  <div style="padding: 1rem;">
@@ -118,68 +135,67 @@
118
135
  </pd-card>
119
136
  </div>
120
137
  </div>
121
-
138
+
122
139
  <div class="demo-section">
123
140
  <h2>Debug Output</h2>
124
141
  <div id="debug-output">
125
- <p>🚀 Theming system initializing...</p>
142
+ <p>Theming system initializing...</p>
126
143
  </div>
127
144
  </div>
128
145
 
129
- <!-- Load dependencies and components -->
130
146
  <script type="module">
131
- // Import components and theming from the source (for development)
132
- import '../src/components/pd-button.ts';
133
- import '../src/components/pd-card.ts';
134
-
135
- // Import theming system
136
- import { initialize, getDefaultTheme } from '../src/theming/index.ts';
137
-
138
- // Status and debug elements
147
+ const CDN_BASE = 'https://cdn.jsdelivr.net/npm';
148
+ const DS_BASE = `${CDN_BASE}/@prioticket/design-system-web@1.0.5/dist`;
149
+ const THEMING_URL = `${DS_BASE}/theming.es.js`;
150
+ const COMPONENTS = [
151
+ `${DS_BASE}/components/pd-button.es.js`,
152
+ `${DS_BASE}/components/pd-card.es.js`
153
+ ];
154
+
155
+ await Promise.all(COMPONENTS.map((url) => import(/* @vite-ignore */ url)));
156
+ const { initialize, getDefaultTheme } = await import(/* @vite-ignore */ THEMING_URL);
157
+
139
158
  const statusEl = document.getElementById('status');
140
159
  const debugOutput = document.getElementById('debug-output');
141
-
160
+
142
161
  function updateStatus(message, type = 'info') {
143
- const emoji = type === 'success' ? '✅' : type === 'error' ? '❌' : '⚡';
144
- statusEl.innerHTML = `${emoji} ${message}`;
162
+ const prefix = type === 'success' ? '[SUCCESS]' : type === 'error' ? '[ERROR]' : '[INFO]';
163
+ statusEl.textContent = `${prefix} ${message}`;
145
164
  }
146
-
165
+
147
166
  function logDebug(message) {
148
167
  const timestamp = new Date().toLocaleTimeString();
149
168
  debugOutput.innerHTML += `<div>[${timestamp}] ${message}</div>`;
150
169
  debugOutput.scrollTop = debugOutput.scrollHeight;
151
170
  }
152
-
153
- // Override console methods to capture theming logs
171
+
154
172
  const originalLog = console.log;
155
173
  const originalWarn = console.warn;
156
174
  const originalError = console.error;
157
-
175
+
158
176
  console.log = (...args) => {
159
177
  originalLog(...args);
160
178
  if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
161
179
  logDebug(args.join(' '));
162
180
  }
163
181
  };
164
-
182
+
165
183
  console.warn = (...args) => {
166
184
  originalWarn(...args);
167
185
  if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
168
- logDebug(`⚠️ ${args.join(' ')}`);
186
+ logDebug(`[WARN] ${args.join(' ')}`);
169
187
  }
170
188
  };
171
-
189
+
172
190
  console.error = (...args) => {
173
191
  originalError(...args);
174
192
  if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
175
- logDebug(`❌ ${args.join(' ')}`);
193
+ logDebug(`[ERROR] ${args.join(' ')}`);
176
194
  }
177
195
  };
178
-
179
- // Theme configurations
196
+
180
197
  const themes = {
181
198
  default: getDefaultTheme(),
182
-
183
199
  orange: {
184
200
  colorPrimary: '#ff6600',
185
201
  colorOnPrimary: '#ffffff',
@@ -195,7 +211,6 @@
195
211
  shapeCornerMedium: '12px',
196
212
  shapeCornerLarge: '16px'
197
213
  },
198
-
199
214
  purple: {
200
215
  colorPrimary: '#7c4dff',
201
216
  colorOnPrimary: '#ffffff',
@@ -211,7 +226,6 @@
211
226
  shapeCornerMedium: '4px',
212
227
  shapeCornerLarge: '8px'
213
228
  },
214
-
215
229
  green: {
216
230
  colorPrimary: '#4caf50',
217
231
  colorOnPrimary: '#ffffff',
@@ -227,7 +241,6 @@
227
241
  shapeCornerMedium: '20px',
228
242
  shapeCornerLarge: '24px'
229
243
  },
230
-
231
244
  dark: {
232
245
  colorPrimary: '#bb86fc',
233
246
  colorOnPrimary: '#000000',
@@ -246,86 +259,47 @@
246
259
  shapeCornerLarge: '12px'
247
260
  }
248
261
  };
249
-
250
- // Theme application functions
251
- window.applyDefaultTheme = async () => {
252
- try {
253
- updateStatus('Applying default theme...');
254
- logDebug('🎨 Switching to default theme');
255
- await initialize({ theme: themes.default, debug: true });
256
- updateStatus('Default theme applied successfully!', 'success');
257
- } catch (error) {
258
- updateStatus('Failed to apply default theme', 'error');
259
- logDebug(`❌ Error: ${error.message}`);
260
- }
261
- };
262
-
263
- window.applyOrangeTheme = async () => {
264
- try {
265
- updateStatus('Applying orange theme...');
266
- logDebug('🧡 Switching to orange theme');
267
- await initialize({ theme: themes.orange, debug: true });
268
- updateStatus('Orange theme applied successfully!', 'success');
269
- } catch (error) {
270
- updateStatus('Failed to apply orange theme', 'error');
271
- logDebug(`❌ Error: ${error.message}`);
272
- }
273
- };
274
-
275
- window.applyPurpleTheme = async () => {
276
- try {
277
- updateStatus('Applying purple theme...');
278
- logDebug('💜 Switching to purple theme');
279
- await initialize({ theme: themes.purple, debug: true });
280
- updateStatus('Purple theme applied successfully!', 'success');
281
- } catch (error) {
282
- updateStatus('Failed to apply purple theme', 'error');
283
- logDebug(`❌ Error: ${error.message}`);
284
- }
285
- };
286
-
287
- window.applyGreenTheme = async () => {
288
- try {
289
- updateStatus('Applying green theme...');
290
- logDebug('💚 Switching to green theme');
291
- await initialize({ theme: themes.green, debug: true });
292
- updateStatus('Green theme applied successfully!', 'success');
293
- } catch (error) {
294
- updateStatus('Failed to apply green theme', 'error');
295
- logDebug(`❌ Error: ${error.message}`);
262
+
263
+ async function applyTheme(name) {
264
+ const theme = themes[name];
265
+ if (!theme) {
266
+ logDebug(`[WARN] Theme "${name}" not found.`);
267
+ return;
296
268
  }
297
- };
298
-
299
- window.applyDarkTheme = async () => {
269
+
300
270
  try {
301
- updateStatus('Applying dark theme...');
302
- logDebug('🌙 Switching to dark theme');
303
- await initialize({ theme: themes.dark, debug: true });
304
- updateStatus('Dark theme applied successfully!', 'success');
271
+ updateStatus(`Applying ${name} theme...`);
272
+ logDebug(`[INFO] Switching to ${name} theme.`);
273
+ await initialize({ theme, debug: true });
274
+ updateStatus(`${name.charAt(0).toUpperCase() + name.slice(1)} theme applied successfully!`, 'success');
305
275
  } catch (error) {
306
- updateStatus('Failed to apply dark theme', 'error');
307
- logDebug(`❌ Error: ${error.message}`);
276
+ updateStatus(`Failed to apply ${name} theme`, 'error');
277
+ logDebug(`[ERROR] ${error instanceof Error ? error.message : error}`);
308
278
  }
309
- };
310
-
311
- // Initialize demo
279
+ }
280
+
281
+ window.applyDefaultTheme = () => applyTheme('default');
282
+ window.applyOrangeTheme = () => applyTheme('orange');
283
+ window.applyPurpleTheme = () => applyTheme('purple');
284
+ window.applyGreenTheme = () => applyTheme('green');
285
+ window.applyDarkTheme = () => applyTheme('dark');
286
+
312
287
  (async () => {
313
288
  try {
314
- logDebug('🚀 Demo initializing...');
315
- logDebug('📦 Components loaded');
316
- logDebug('🎨 Applying default theme...');
317
-
289
+ logDebug('[INIT] Demo initializing...');
290
+ logDebug('[INIT] Components loaded.');
291
+ logDebug('[INIT] Applying default theme...');
292
+
318
293
  await initialize({ theme: themes.default, debug: true });
319
-
294
+
320
295
  updateStatus('Demo ready! Click theme buttons to test.', 'success');
321
- logDebug('✅ Demo initialization complete!');
322
-
296
+ logDebug('[INIT] Demo initialization complete.');
323
297
  } catch (error) {
324
298
  updateStatus('Demo initialization failed', 'error');
325
- logDebug(`❌ Initialization error: ${error.message}`);
299
+ logDebug(`[ERROR] ${error instanceof Error ? error.message : error}`);
326
300
  console.error('Demo initialization error:', error);
327
301
  }
328
302
  })();
329
303
  </script>
330
304
  </body>
331
- </html>
305
+ </html>
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@prioticket/design-system-web",
3
3
  "private": false,
4
- "version": "1.0.2",
4
+ "version": "1.0.5",
5
5
  "type": "module",
6
- "main": "./dist/prioticket-design-system-web.umd.js",
6
+ "main": "./dist/prioticket-design-system-web.cjs.js",
7
7
  "module": "./dist/prioticket-design-system-web.es.js",
8
8
  "types": "./dist/types/index.d.ts",
9
9
  "sideEffects": [
@@ -14,31 +14,40 @@
14
14
  ".": {
15
15
  "types": "./dist/types/index.d.ts",
16
16
  "import": "./dist/prioticket-design-system-web.es.js",
17
- "require": "./dist/prioticket-design-system-web.umd.js"
17
+ "require": "./dist/prioticket-design-system-web.cjs.js",
18
+ "default": "./dist/prioticket-design-system-web.es.js"
18
19
  },
19
20
  "./theme": {
21
+ "types": "./dist/types/theme.d.ts",
20
22
  "import": "./dist/theme.es.js",
21
- "require": "./dist/theme.cjs.js"
23
+ "require": "./dist/theme.cjs.js",
24
+ "default": "./dist/theme.es.js"
22
25
  },
23
26
  "./fonts": {
27
+ "types": "./dist/types/fonts.d.ts",
24
28
  "import": "./dist/fonts.es.js",
25
- "require": "./dist/fonts.cjs.js"
29
+ "require": "./dist/fonts.cjs.js",
30
+ "default": "./dist/fonts.es.js"
26
31
  },
27
32
  "./theme-with-fonts": {
33
+ "types": "./dist/types/theme-with-fonts.d.ts",
28
34
  "import": "./dist/theme-with-fonts.es.js",
29
- "require": "./dist/theme-with-fonts.cjs.js"
35
+ "require": "./dist/theme-with-fonts.cjs.js",
36
+ "default": "./dist/theme-with-fonts.es.js"
30
37
  },
31
38
  "./theming": {
32
39
  "types": "./dist/types/theming/index.d.ts",
33
40
  "import": "./dist/theming.es.js",
34
- "require": "./dist/theming.cjs.js"
41
+ "require": "./dist/theming.cjs.js",
42
+ "default": "./dist/theming.es.js"
35
43
  },
36
44
  "./components/*": {
37
45
  "types": "./dist/types/components/*.d.ts",
38
46
  "import": "./dist/components/*.es.js",
39
- "require": "./dist/components/*.cjs.js"
47
+ "require": "./dist/components/*.cjs.js",
48
+ "default": "./dist/components/*.es.js"
40
49
  },
41
- "./theme-only.css": "./dist/theme-only.css",
50
+ "./theme-only.css": "./dist/theme-only.css",
42
51
  "./fonts-only.css": "./dist/fonts-only.css",
43
52
  "./theme-with-fonts.css": "./dist/theme-with-fonts.css",
44
53
  "./package.json": "./package.json"
@@ -70,7 +79,7 @@
70
79
  "author": "Prioticket",
71
80
  "license": "MIT",
72
81
  "dependencies": {
73
- "@prioticket/design-tokens-material-web": "^1.0.2"
82
+ "@prioticket/design-tokens-material-web": "^1.0.0"
74
83
  },
75
84
  "peerDependencies": {
76
85
  "@material/web": "^2.4.0",