@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.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.
Files changed (262) hide show
  1. package/.github/workflows/docker-cypress.yml +54 -0
  2. package/.github/workflows/main.yml +6 -4
  3. package/.github/workflows/node.js.yml +56 -21
  4. package/.github/workflows/release.js.yml +19 -17
  5. package/.releaserc.json +1 -1
  6. package/CHANGELOG.md +351 -9
  7. package/Dockerfile +78 -70
  8. package/README.md +112 -4
  9. package/css/components.css +5 -5
  10. package/css/gridjs/mermaid.min.css +1 -1
  11. package/css/leaflet/Control.Geocoder.css +1 -126
  12. package/css/leaflet/images/layers.png +0 -0
  13. package/css/tify/tify.css +6 -5
  14. package/css/tom-select/tom-select.bootstrap4.min.css +1 -1
  15. package/css/tom-select/tom-select.bootstrap5.min.css +1 -1
  16. package/css/tom-select/tom-select.default.min.css +1 -1
  17. package/css/tom-select/tom-select.default.min.css.map +1 -0
  18. package/css/tom-select/tom-select.min.css +1 -1
  19. package/cypress.config.js +84 -0
  20. package/dist/api.html +1 -1
  21. package/dist/css/design-system.css +607 -0
  22. package/dist/demo/bundle-test.html +4 -3
  23. package/dist/demo/components.css +46 -1
  24. package/dist/demo/design-system.html +710 -0
  25. package/dist/demo/dts-client.html +2 -2
  26. package/dist/demo/pb-autocomplete.html +23 -11
  27. package/dist/demo/pb-autocomplete2.html +66 -55
  28. package/dist/demo/pb-autocomplete3.html +17 -8
  29. package/dist/demo/pb-blacklab-highlight.html +28 -11
  30. package/dist/demo/pb-blacklab-results.html +3 -2
  31. package/dist/demo/pb-browse-docs.html +24 -24
  32. package/dist/demo/pb-browse-docs2.html +3 -3
  33. package/dist/demo/pb-clipboard.html +32 -28
  34. package/dist/demo/pb-code-editor.html +6 -6
  35. package/dist/demo/pb-code-highlight.html +63 -63
  36. package/dist/demo/pb-codepen.html +1 -1
  37. package/dist/demo/pb-collapse.html +1 -1
  38. package/dist/demo/pb-collapse2.html +2 -2
  39. package/dist/demo/pb-combo-box.html +135 -130
  40. package/dist/demo/pb-custom-form.html +64 -55
  41. package/dist/demo/pb-dialog.html +12 -6
  42. package/dist/demo/pb-document.html +1 -1
  43. package/dist/demo/pb-download.html +68 -59
  44. package/dist/demo/pb-drawer.html +67 -46
  45. package/dist/demo/pb-drawer2.html +65 -58
  46. package/dist/demo/pb-edit-app.html +2 -2
  47. package/dist/demo/pb-edit-xml.html +1 -1
  48. package/dist/demo/pb-facsimile-2.html +26 -11
  49. package/dist/demo/pb-facsimile-3.html +25 -10
  50. package/dist/demo/pb-facsimile-dedup-test-2.html +48 -0
  51. package/dist/demo/pb-facsimile-dedup-test.html +48 -0
  52. package/dist/demo/pb-facsimile.html +4 -4
  53. package/dist/demo/pb-formula.html +1 -1
  54. package/dist/demo/pb-grid.html +22 -8
  55. package/dist/demo/pb-highlight.html +2 -2
  56. package/dist/demo/pb-i18n-simple.html +1 -0
  57. package/dist/demo/pb-i18n.html +15 -5
  58. package/dist/demo/pb-image-strip-standalone.html +2 -2
  59. package/dist/demo/pb-image-strip-view.html +2 -2
  60. package/dist/demo/pb-leaflet-map.html +3 -3
  61. package/dist/demo/pb-leaflet-map2.html +2 -2
  62. package/dist/demo/pb-leaflet-map3.html +3 -3
  63. package/dist/demo/pb-link.html +1 -1
  64. package/dist/demo/pb-load.html +2 -6
  65. package/dist/demo/pb-login.html +1 -3
  66. package/dist/demo/pb-manage-odds.html +9 -4
  67. package/dist/demo/pb-markdown.html +1 -1
  68. package/dist/demo/pb-media-query.html +2 -2
  69. package/dist/demo/pb-mei.html +2 -2
  70. package/dist/demo/pb-mei2.html +2 -2
  71. package/dist/demo/pb-message.html +2 -3
  72. package/dist/demo/pb-odd-editor.html +54 -52
  73. package/dist/demo/pb-page-header.html +27 -0
  74. package/dist/demo/pb-popover.html +1 -1
  75. package/dist/demo/pb-print-preview.html +2 -2
  76. package/dist/demo/pb-progress.html +4 -4
  77. package/dist/demo/pb-repeat.html +32 -36
  78. package/dist/demo/pb-search.html +16 -5
  79. package/dist/demo/pb-search2.html +4 -4
  80. package/dist/demo/pb-search3.html +3 -3
  81. package/dist/demo/pb-search4.html +3 -3
  82. package/dist/demo/pb-select-feature.html +4 -4
  83. package/dist/demo/pb-select-feature2.html +4 -4
  84. package/dist/demo/pb-select-feature3.html +2 -2
  85. package/dist/demo/pb-select-i18n.html +58 -53
  86. package/dist/demo/pb-select-odd.html +1 -1
  87. package/dist/demo/pb-select.html +190 -75
  88. package/dist/demo/pb-select2.html +91 -37
  89. package/dist/demo/pb-select3.html +109 -41
  90. package/dist/demo/pb-svg.html +1 -1
  91. package/dist/demo/pb-table-grid.html +26 -15
  92. package/dist/demo/pb-tabs.html +15 -7
  93. package/dist/demo/pb-tify.html +7 -7
  94. package/dist/demo/pb-timeline.html +1 -1
  95. package/dist/demo/pb-timeline2.html +1 -1
  96. package/dist/demo/pb-toggle-feature.html +26 -23
  97. package/dist/demo/pb-toggle-feature2.html +4 -4
  98. package/dist/demo/pb-toggle-feature3.html +2 -2
  99. package/dist/demo/pb-toggle-feature4.html +56 -54
  100. package/dist/demo/pb-version.html +2 -2
  101. package/dist/demo/pb-view.html +78 -40
  102. package/dist/demo/pb-view2.html +69 -46
  103. package/dist/demo/pb-view3.html +53 -48
  104. package/dist/demo/pb-view4.html +70 -49
  105. package/dist/demo/pb-zoom.html +2 -2
  106. package/dist/{es-global-bridge-d8ce175d.js → es-global-bridge-D8ZcUcx_.js} +0 -4
  107. package/dist/focus-mixin-VCsFap6b.js +768 -0
  108. package/dist/images/icons.svg +217 -0
  109. package/dist/jinn-codemirror-DETLdm08.js +1 -0
  110. package/dist/lib/openseadragon.min.js +80 -0
  111. package/dist/lib/openseadragon.min.js.map +1 -0
  112. package/dist/pb-code-editor.js +25 -20
  113. package/dist/pb-component-docs.js +414 -3225
  114. package/dist/pb-components-bundle.js +3046 -4402
  115. package/dist/pb-dialog-tklYGWfc.js +121 -0
  116. package/dist/pb-edit-app.js +208 -107
  117. package/dist/pb-elements.json +716 -249
  118. package/dist/pb-facsimile.js +46 -0
  119. package/dist/pb-i18n-C0NDma4h.js +1 -0
  120. package/dist/pb-leaflet-map.js +23 -23
  121. package/dist/pb-mei.js +152 -134
  122. package/dist/pb-mixin-DHoWQheB.js +1 -0
  123. package/dist/pb-odd-editor.js +1671 -1231
  124. package/dist/pb-tify.js +1 -27
  125. package/dist/unsafe-html-D5VGo9Oq.js +1 -0
  126. package/dist/urls-BEONu_g4.js +1 -0
  127. package/eslint.config.mjs +92 -0
  128. package/gh-pages.js +5 -3
  129. package/i18n/common/en.json +6 -0
  130. package/i18n/common/pl.json +2 -2
  131. package/images/icons.svg +217 -0
  132. package/index.html +0 -5
  133. package/lib/leaflet-src.js.map +1 -0
  134. package/lib/leaflet.markercluster-src.js.map +1 -0
  135. package/lib/openseadragon.min.js +6 -6
  136. package/package.json +56 -81
  137. package/pb-elements.json +716 -249
  138. package/rollup.config.mjs +312 -0
  139. package/src/assets/components.css +5 -5
  140. package/src/assets/design-system.css +607 -0
  141. package/src/authority/airtable.js +20 -21
  142. package/src/authority/anton.js +129 -129
  143. package/src/authority/custom.js +70 -27
  144. package/src/authority/geonames.js +38 -32
  145. package/src/authority/gnd.js +50 -42
  146. package/src/authority/kbga.js +136 -134
  147. package/src/authority/metagrid.js +44 -46
  148. package/src/authority/reconciliation.js +66 -68
  149. package/src/authority/registry.js +4 -4
  150. package/src/docs/demo-utils.js +91 -0
  151. package/src/docs/pb-component-docs.js +287 -147
  152. package/src/docs/pb-component-view.js +380 -273
  153. package/src/docs/pb-components-list.js +115 -51
  154. package/src/docs/pb-demo-snippet.js +199 -174
  155. package/src/dts-client.js +306 -303
  156. package/src/dts-select-endpoint.js +125 -85
  157. package/src/parse-date-service.js +184 -135
  158. package/src/pb-ajax.js +175 -173
  159. package/src/pb-authority-lookup.js +198 -158
  160. package/src/pb-autocomplete.js +731 -313
  161. package/src/pb-blacklab-highlight.js +266 -260
  162. package/src/pb-blacklab-results.js +230 -225
  163. package/src/pb-browse-docs.js +601 -484
  164. package/src/pb-browse.js +68 -65
  165. package/src/pb-clipboard.js +97 -76
  166. package/src/pb-code-editor.js +111 -103
  167. package/src/pb-code-highlight.js +234 -204
  168. package/src/pb-codepen.js +81 -73
  169. package/src/pb-collapse.js +265 -152
  170. package/src/pb-combo-box.js +191 -191
  171. package/src/pb-components-bundle.js +1 -7
  172. package/src/pb-components.js +2 -6
  173. package/src/pb-custom-form.js +230 -141
  174. package/src/pb-dialog.js +99 -63
  175. package/src/pb-document.js +118 -91
  176. package/src/pb-download.js +214 -198
  177. package/src/pb-drawer.js +146 -149
  178. package/src/pb-edit-app.js +471 -240
  179. package/src/pb-edit-xml.js +101 -98
  180. package/src/pb-events.js +126 -107
  181. package/src/pb-facs-link.js +130 -101
  182. package/src/pb-facsimile.js +494 -410
  183. package/src/pb-fetch.js +389 -0
  184. package/src/pb-formula.js +152 -154
  185. package/src/pb-geolocation.js +130 -132
  186. package/src/pb-grid-action.js +59 -56
  187. package/src/pb-grid.js +388 -228
  188. package/src/pb-highlight.js +142 -142
  189. package/src/pb-hotkeys.js +40 -42
  190. package/src/pb-i18n.js +115 -127
  191. package/src/pb-icon-button.js +108 -0
  192. package/src/pb-icon.js +283 -0
  193. package/src/pb-image-strip.js +85 -79
  194. package/src/pb-lang.js +142 -57
  195. package/src/pb-leaflet-map.js +551 -483
  196. package/src/pb-link.js +132 -126
  197. package/src/pb-load.js +495 -428
  198. package/src/pb-login.js +303 -248
  199. package/src/pb-manage-odds.js +384 -338
  200. package/src/pb-map-icon.js +90 -90
  201. package/src/pb-map-layer.js +86 -86
  202. package/src/pb-markdown.js +107 -110
  203. package/src/pb-media-query.js +75 -73
  204. package/src/pb-mei.js +523 -303
  205. package/src/pb-message.js +144 -98
  206. package/src/pb-mixin.js +268 -265
  207. package/src/pb-navigation.js +83 -96
  208. package/src/pb-observable.js +39 -39
  209. package/src/pb-odd-editor.js +1209 -948
  210. package/src/pb-odd-elementspec-editor.js +375 -310
  211. package/src/pb-odd-model-editor.js +1189 -941
  212. package/src/pb-odd-parameter-editor.js +269 -170
  213. package/src/pb-odd-rendition-editor.js +184 -131
  214. package/src/pb-page.js +451 -422
  215. package/src/pb-paginate.js +260 -178
  216. package/src/pb-panel.js +217 -183
  217. package/src/pb-popover-themes.js +16 -9
  218. package/src/pb-popover.js +297 -288
  219. package/src/pb-print-preview.js +128 -128
  220. package/src/pb-progress.js +52 -52
  221. package/src/pb-repeat.js +141 -108
  222. package/src/pb-restricted.js +85 -78
  223. package/src/pb-search.js +258 -230
  224. package/src/pb-select-feature.js +210 -126
  225. package/src/pb-select-odd.js +184 -118
  226. package/src/pb-select-template.js +113 -78
  227. package/src/pb-select.js +330 -229
  228. package/src/pb-split-list.js +181 -176
  229. package/src/pb-svg.js +81 -80
  230. package/src/pb-table-column.js +55 -55
  231. package/src/pb-table-grid.js +334 -205
  232. package/src/pb-tabs.js +238 -61
  233. package/src/pb-tify.js +3331 -126
  234. package/src/pb-timeline.js +394 -255
  235. package/src/pb-toggle-feature.js +196 -188
  236. package/src/pb-upload.js +201 -176
  237. package/src/pb-version.js +22 -34
  238. package/src/pb-view-annotate.js +138 -102
  239. package/src/pb-view.js +1722 -1272
  240. package/src/pb-zoom.js +144 -46
  241. package/src/search-result-service.js +256 -223
  242. package/src/seed-element.js +14 -22
  243. package/src/settings.js +4 -4
  244. package/src/theming.js +98 -91
  245. package/src/urls.js +403 -289
  246. package/src/utils.js +53 -51
  247. package/vite.config.js +86 -0
  248. package/css/pb-styles.css +0 -51
  249. package/dist/iron-form-3b8dcaa7.js +0 -210
  250. package/dist/jinn-codemirror-da0e2d1f.js +0 -1
  251. package/dist/paper-checkbox-515a5284.js +0 -1597
  252. package/dist/paper-icon-button-b1d31571.js +0 -398
  253. package/dist/paper-listbox-a3b7175c.js +0 -1265
  254. package/dist/pb-i18n-0611135a.js +0 -1
  255. package/dist/pb-mixin-b1caa22e.js +0 -158
  256. package/dist/polymer-hack.js +0 -1
  257. package/dist/vaadin-element-mixin-6e4cee3a.js +0 -527
  258. package/lib/Control.Geocoder.min.js +0 -2
  259. package/lib/Control.Geocoder.min.js.map +0 -1
  260. package/src/assets/pb-styles.css +0 -51
  261. package/src/pb-light-dom.js +0 -40
  262. package/src/polymer-hack.js +0 -6
package/dist/demo/design-system.html ADDED
@@ -0,0 +1,710 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
+ <title>TEI Publisher Components - Native Design System</title>
7
+ <link rel="stylesheet" href="../src/assets/design-system.css">
8
+ <style>
9
+ body {
10
+ font-family: var(--pb-font-family);
11
+ background-color: var(--pb-background-color);
12
+ color: var(--pb-on-background-color);
13
+ margin: 0;
14
+ padding: var(--pb-spacing-6);
15
+ line-height: var(--pb-line-height-normal);
16
+ }
17
+
18
+ .demo-container {
19
+ max-width: 1200px;
20
+ margin: 0 auto;
21
+ }
22
+
23
+ .demo-section {
24
+ margin-bottom: var(--pb-spacing-12);
25
+ padding: var(--pb-spacing-8);
26
+ background-color: var(--pb-surface-color);
27
+ border-radius: var(--pb-border-radius-lg);
28
+ box-shadow: var(--pb-elevation-2);
29
+ }
30
+
31
+ .demo-section h2 {
32
+ margin-top: 0;
33
+ color: var(--pb-primary-color);
34
+ border-bottom: 2px solid var(--pb-primary-color);
35
+ padding-bottom: var(--pb-spacing-3);
36
+ }
37
+
38
+ .demo-grid {
39
+ display: grid;
40
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
41
+ gap: var(--pb-spacing-6);
42
+ margin-top: var(--pb-spacing-6);
43
+ }
44
+
45
+ .demo-item {
46
+ padding: var(--pb-spacing-5);
47
+ border: 1px solid var(--pb-neutral-300);
48
+ border-radius: var(--pb-border-radius-md);
49
+ background-color: var(--pb-surface-variant);
50
+ }
51
+
52
+ .demo-item h3 {
53
+ margin-top: 0;
54
+ font-size: var(--pb-font-size-md);
55
+ color: var(--pb-neutral-800);
56
+ }
57
+
58
+ .color-palette {
59
+ display: grid;
60
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
61
+ gap: var(--pb-spacing-3);
62
+ }
63
+
64
+ .color-swatch {
65
+ display: flex;
66
+ flex-direction: column;
67
+ align-items: center;
68
+ padding: var(--pb-spacing-3);
69
+ border-radius: var(--pb-border-radius-md);
70
+ border: 1px solid var(--pb-neutral-300);
71
+ }
72
+
73
+ .color-box {
74
+ width: 60px;
75
+ height: 60px;
76
+ border-radius: var(--pb-border-radius-sm);
77
+ margin-bottom: var(--pb-spacing-2);
78
+ }
79
+
80
+ .color-name {
81
+ font-size: var(--pb-font-size-sm);
82
+ text-align: center;
83
+ }
84
+
85
+ .demo-buttons {
86
+ display: flex;
87
+ flex-wrap: wrap;
88
+ gap: var(--pb-spacing-3);
89
+ align-items: center;
90
+ }
91
+
92
+ .demo-inputs {
93
+ display: grid;
94
+ gap: var(--pb-spacing-5);
95
+ }
96
+
97
+ .demo-tabs-example .pb-tab-panels {
98
+ min-height: 200px;
99
+ }
100
+
101
+ .icon-grid {
102
+ display: grid;
103
+ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
104
+ gap: var(--pb-spacing-4);
105
+ }
106
+
107
+ .icon-demo {
108
+ display: flex;
109
+ flex-direction: column;
110
+ align-items: center;
111
+ padding: var(--pb-spacing-3);
112
+ border: 1px solid var(--pb-neutral-200);
113
+ border-radius: var(--pb-border-radius-md);
114
+ }
115
+
116
+ .icon-demo pb-icon {
117
+ font-size: 24px;
118
+ margin-bottom: var(--pb-spacing-2);
119
+ }
120
+
121
+ .icon-name {
122
+ font-size: var(--pb-font-size-sm);
123
+ text-align: center;
124
+ }
125
+
126
+ .code-block {
127
+ background-color: var(--pb-neutral-100);
128
+ border: 1px solid var(--pb-neutral-300);
129
+ border-radius: var(--pb-border-radius-md);
130
+ padding: var(--pb-spacing-4);
131
+ font-family: var(--pb-font-family-mono);
132
+ font-size: var(--pb-font-size-sm);
133
+ overflow-x: auto;
134
+ margin: var(--pb-spacing-3) 0;
135
+ }
136
+
137
+ .responsive-demo {
138
+ resize: horizontal;
139
+ overflow: auto;
140
+ border: 2px dashed var(--pb-neutral-400);
141
+ padding: var(--pb-spacing-5);
142
+ min-width: 300px;
143
+ max-width: 100%;
144
+ }
145
+ </style>
146
+ </head>
147
+ <body>
148
+ <!-- Load icon sprite -->
149
+ <div style="display: none;">
150
+ <svg xmlns="http://www.w3.org/2000/svg">
151
+ <defs>
152
+ <!-- Navigation icons -->
153
+ <g id="icon-expand-more">
154
+ <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
155
+ </g>
156
+
157
+ <g id="icon-expand-less">
158
+ <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/>
159
+ </g>
160
+
161
+ <g id="icon-chevron-right">
162
+ <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
163
+ </g>
164
+
165
+ <g id="icon-chevron-left">
166
+ <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
167
+ </g>
168
+
169
+ <g id="icon-menu">
170
+ <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
171
+ </g>
172
+
173
+ <g id="icon-close">
174
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
175
+ </g>
176
+
177
+ <!-- Action icons -->
178
+ <g id="icon-search">
179
+ <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
180
+ </g>
181
+
182
+ <g id="icon-edit">
183
+ <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
184
+ </g>
185
+
186
+ <g id="icon-delete">
187
+ <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
188
+ </g>
189
+
190
+ <g id="icon-add">
191
+ <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
192
+ </g>
193
+
194
+ <g id="icon-save">
195
+ <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
196
+ </g>
197
+
198
+ <g id="icon-copy">
199
+ <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
200
+ </g>
201
+
202
+ <g id="icon-download">
203
+ <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
204
+ </g>
205
+ </defs>
206
+ </svg>
207
+ </div>
208
+
209
+ <div class="demo-container">
210
+ <header style="text-align: center; margin-bottom: var(--pb-spacing-12);">
211
+ <h1 style="color: var(--pb-primary-color); margin-bottom: var(--pb-spacing-3);">
212
+ TEI Publisher Components - Native Design System
213
+ </h1>
214
+ <p style="font-size: var(--pb-font-size-lg); color: var(--pb-neutral-700);">
215
+ Modern, accessible components using native HTML elements
216
+ </p>
217
+ </header>
218
+
219
+ <!-- Color Palette -->
220
+ <section class="demo-section">
221
+ <h2>Color Palette</h2>
222
+ <div class="color-palette">
223
+ <div class="color-swatch">
224
+ <div class="color-box" style="background-color: var(--pb-primary-color);"></div>
225
+ <div class="color-name">Primary</div>
226
+ </div>
227
+ <div class="color-swatch">
228
+ <div class="color-box" style="background-color: var(--pb-primary-color-dark);"></div>
229
+ <div class="color-name">Primary Dark</div>
230
+ </div>
231
+ <div class="color-swatch">
232
+ <div class="color-box" style="background-color: var(--pb-primary-color-light);"></div>
233
+ <div class="color-name">Primary Light</div>
234
+ </div>
235
+ <div class="color-swatch">
236
+ <div class="color-box" style="background-color: var(--pb-error-color);"></div>
237
+ <div class="color-name">Error</div>
238
+ </div>
239
+ <div class="color-swatch">
240
+ <div class="color-box" style="background-color: var(--pb-success-color);"></div>
241
+ <div class="color-name">Success</div>
242
+ </div>
243
+ <div class="color-swatch">
244
+ <div class="color-box" style="background-color: var(--pb-warning-color);"></div>
245
+ <div class="color-name">Warning</div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Buttons -->
251
+ <section class="demo-section">
252
+ <h2>Buttons</h2>
253
+
254
+ <div class="demo-item">
255
+ <h3>Button Variants</h3>
256
+ <div class="demo-buttons">
257
+ <button class="pb-button pb-button--text" type="button">Text Button</button>
258
+ <button class="pb-button pb-button--outlined" type="button">Outlined Button</button>
259
+ <button class="pb-button pb-button--contained" type="button">Contained Button</button>
260
+ <button class="pb-button pb-button--text" type="button" disabled>Disabled</button>
261
+ </div>
262
+
263
+ <div class="code-block">
264
+ &lt;button class="pb-button pb-button--text"&gt;Text Button&lt;/button&gt;
265
+ &lt;button class="pb-button pb-button--outlined"&gt;Outlined Button&lt;/button&gt;
266
+ &lt;button class="pb-button pb-button--contained"&gt;Contained Button&lt;/button&gt;
267
+ </div>
268
+ </div>
269
+
270
+ <div class="demo-item">
271
+ <h3>Button Sizes</h3>
272
+ <div class="demo-buttons">
273
+ <button class="pb-button pb-button--contained pb-button--sm" type="button">Small</button>
274
+ <button class="pb-button pb-button--contained" type="button">Medium</button>
275
+ <button class="pb-button pb-button--contained pb-button--lg" type="button">Large</button>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="demo-item">
280
+ <h3>Icon Buttons</h3>
281
+ <div class="demo-buttons">
282
+ <button class="pb-button pb-button--icon" type="button" aria-label="Save document">
283
+ <pb-icon icon="save"></pb-icon>
284
+ </button>
285
+ <button class="pb-button pb-button--icon pb-button--contained" type="button" aria-label="Edit item">
286
+ <pb-icon icon="edit"></pb-icon>
287
+ </button>
288
+ <button class="pb-button pb-button--fab" type="button" aria-label="Add new item">
289
+ <pb-icon icon="add" style="font-size: 24px;">
290
+ <svg viewBox="0 0 24 24" width="24" height="24">
291
+ <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
292
+ </svg>
293
+ </pb-icon>
294
+ </button>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="demo-item">
299
+ <h3>Buttons with Icons</h3>
300
+ <div class="demo-buttons">
301
+ <button class="pb-button pb-button--contained" type="button">
302
+ <pb-icon icon="save"></pb-icon>
303
+ Save Document
304
+ </button>
305
+ <button class="pb-button pb-button--outlined" type="button">
306
+ <pb-icon icon="search"></pb-icon>
307
+ Search
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- Form Inputs -->
314
+ <section class="demo-section">
315
+ <h2>Form Inputs</h2>
316
+
317
+ <div class="demo-inputs">
318
+ <div class="demo-item">
319
+ <h3>Text Inputs with Floating Labels</h3>
320
+ <div class="pb-input-container">
321
+ <input class="pb-input" type="text" id="demo-input-1" placeholder=" ">
322
+ <label for="demo-input-1" class="pb-input-label">Full Name</label>
323
+ </div>
324
+
325
+ <div class="pb-input-container">
326
+ <input class="pb-input" type="email" id="demo-input-2" placeholder=" " required>
327
+ <label for="demo-input-2" class="pb-input-label">Email Address</label>
328
+ <div class="pb-input-helper">We'll use this to contact you</div>
329
+ </div>
330
+
331
+ <div class="pb-input-container">
332
+ <input class="pb-input" type="text" id="demo-input-3" placeholder=" " value="Pre-filled value">
333
+ <label for="demo-input-3" class="pb-input-label">Website URL</label>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="demo-item">
338
+ <h3>Input States</h3>
339
+ <div class="pb-input-container">
340
+ <input class="pb-input" type="text" id="demo-input-error" placeholder=" " aria-invalid="true" value="invalid@">
341
+ <label for="demo-input-error" class="pb-input-label" style="color: var(--pb-error-color);">Email (Error State)</label>
342
+ <div class="pb-input-error">Please enter a valid email address</div>
343
+ </div>
344
+
345
+ <div class="pb-input-container">
346
+ <input class="pb-input" type="text" id="demo-input-disabled" placeholder=" " disabled value="Disabled input">
347
+ <label for="demo-input-disabled" class="pb-input-label">Disabled Input</label>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Dropdowns -->
354
+ <section class="demo-section">
355
+ <h2>Dropdowns</h2>
356
+
357
+ <div class="demo-grid">
358
+ <div class="demo-item">
359
+ <h3>Native Select</h3>
360
+ <div class="pb-input-container">
361
+ <select class="pb-input" id="demo-select">
362
+ <option value="">Choose an option...</option>
363
+ <option value="option1">Option 1</option>
364
+ <option value="option2">Option 2</option>
365
+ <option value="option3">Option 3</option>
366
+ </select>
367
+ <label for="demo-select" class="pb-input-label">Select Option</label>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="demo-item">
372
+ <h3>Custom Dropdown</h3>
373
+ <div class="pb-dropdown">
374
+ <button class="pb-dropdown__trigger" type="button">
375
+ <span class="pb-dropdown__value">Select a country...</span>
376
+ <pb-icon icon="expand-more" class="pb-dropdown__trigger-icon" decorative></pb-icon>
377
+ </button>
378
+ <ul class="pb-dropdown__menu" hidden>
379
+ <li class="pb-dropdown__item" data-value="us">United States</li>
380
+ <li class="pb-dropdown__item" data-value="ca">Canada</li>
381
+ <li class="pb-dropdown__item" data-value="mx">Mexico</li>
382
+ <li class="pb-dropdown__item" data-value="uk">United Kingdom</li>
383
+ </ul>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- Tabs -->
390
+ <section class="demo-section">
391
+ <h2>Tabs</h2>
392
+
393
+ <div class="demo-item demo-tabs-example">
394
+ <div class="pb-tabs" role="tablist" aria-label="Demo content">
395
+ <button class="pb-tab pb-tab--selected" type="button" role="tab" id="tab-overview" aria-controls="panel-overview" aria-selected="true" tabindex="0">
396
+ Overview
397
+ </button>
398
+ <button class="pb-tab" type="button" role="tab" id="tab-features" aria-controls="panel-features" aria-selected="false" tabindex="-1">
399
+ Features
400
+ </button>
401
+ <button class="pb-tab" type="button" role="tab" id="tab-docs" aria-controls="panel-docs" aria-selected="false" tabindex="-1">
402
+ Documentation
403
+ </button>
404
+ </div>
405
+
406
+ <div class="pb-tab-panels">
407
+ <div class="pb-tab-panel pb-tab-panel--active" role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">
408
+ <h3>Overview</h3>
409
+ <p>This is the overview panel content. It provides a general introduction to the design system and its components.</p>
410
+ <ul>
411
+ <li>Native HTML elements</li>
412
+ <li>Material Design inspired</li>
413
+ <li>Fully accessible</li>
414
+ <li>Mobile responsive</li>
415
+ </ul>
416
+ </div>
417
+ <div class="pb-tab-panel" role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0" hidden>
418
+ <h3>Features</h3>
419
+ <p>Key features of the design system:</p>
420
+ <ul>
421
+ <li>CSS Custom Properties for theming</li>
422
+ <li>Consistent spacing and typography</li>
423
+ <li>Dark mode support</li>
424
+ <li>Print-friendly styles</li>
425
+ </ul>
426
+ </div>
427
+ <div class="pb-tab-panel" role="tabpanel" id="panel-docs" aria-labelledby="tab-docs" tabindex="0" hidden>
428
+ <h3>Documentation</h3>
429
+ <p>Documentation and resources:</p>
430
+ <ul>
431
+ <li>Component API documentation</li>
432
+ <li>Accessibility guidelines</li>
433
+ <li>Migration patterns</li>
434
+ <li>Testing strategies</li>
435
+ </ul>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Icons -->
442
+ <section class="demo-section">
443
+ <h2>Icons</h2>
444
+
445
+ <div class="demo-item">
446
+ <h3>Icon Sizes</h3>
447
+ <div style="display: flex; align-items: center; gap: var(--pb-spacing-4); margin-bottom: var(--pb-spacing-4);">
448
+ <pb-icon icon="save" size="xs"></pb-icon>
449
+ <pb-icon icon="save" size="sm"></pb-icon>
450
+ <pb-icon icon="save" size="md"></pb-icon>
451
+ <pb-icon icon="save" size="lg"></pb-icon>
452
+ <pb-icon icon="save" size="xl"></pb-icon>
453
+ </div>
454
+
455
+ <h3>Available Icons</h3>
456
+ <div class="icon-grid">
457
+ <div class="icon-demo">
458
+ <pb-icon icon="save"></pb-icon>
459
+ <span class="icon-name">save</span>
460
+ </div>
461
+ <div class="icon-demo">
462
+ <pb-icon icon="edit"></pb-icon>
463
+ <span class="icon-name">edit</span>
464
+ </div>
465
+ <div class="icon-demo">
466
+ <pb-icon icon="delete"></pb-icon>
467
+ <span class="icon-name">delete</span>
468
+ </div>
469
+ <div class="icon-demo">
470
+ <pb-icon icon="search"></pb-icon>
471
+ <span class="icon-name">search</span>
472
+ </div>
473
+ <div class="icon-demo">
474
+ <pb-icon icon="expand-more"></pb-icon>
475
+ <span class="icon-name">expand-more</span>
476
+ </div>
477
+ <div class="icon-demo">
478
+ <pb-icon icon="expand-less"></pb-icon>
479
+ <span class="icon-name">expand-less</span>
480
+ </div>
481
+ <div class="icon-demo">
482
+ <pb-icon icon="add"></pb-icon>
483
+ <span class="icon-name">add</span>
484
+ </div>
485
+ <div class="icon-demo">
486
+ <pb-icon icon="copy"></pb-icon>
487
+ <span class="icon-name">copy</span>
488
+ </div>
489
+ <div class="icon-demo">
490
+ <pb-icon icon="download"></pb-icon>
491
+ <span class="icon-name">download</span>
492
+ </div>
493
+ <div class="icon-demo">
494
+ <pb-icon icon="close"></pb-icon>
495
+ <span class="icon-name">close</span>
496
+ </div>
497
+ <div class="icon-demo">
498
+ <pb-icon icon="menu"></pb-icon>
499
+ <span class="icon-name">menu</span>
500
+ </div>
501
+ <div class="icon-demo">
502
+ <pb-icon icon="chevron-right"></pb-icon>
503
+ <span class="icon-name">chevron-right</span>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </section>
508
+
509
+ <!-- Responsive Design -->
510
+ <section class="demo-section">
511
+ <h2>Responsive Design</h2>
512
+ <div class="demo-item">
513
+ <h3>Resize to Test Responsiveness</h3>
514
+ <p>Drag the right border of the container below to see how components adapt:</p>
515
+ <div class="responsive-demo">
516
+ <div class="demo-buttons" style="margin-bottom: var(--pb-spacing-4);">
517
+ <button class="pb-button pb-button--contained" type="button">Responsive Button</button>
518
+ <button class="pb-button pb-button--outlined" type="button">Another Button</button>
519
+ </div>
520
+
521
+ <div class="pb-input-container">
522
+ <input class="pb-input" type="text" id="responsive-input" placeholder=" ">
523
+ <label for="responsive-input" class="pb-input-label">Responsive Input</label>
524
+ </div>
525
+
526
+ <div class="pb-tabs" role="tablist" style="margin-top: var(--pb-spacing-4);">
527
+ <button class="pb-tab pb-tab--selected" type="button" role="tab">Tab 1</button>
528
+ <button class="pb-tab" type="button" role="tab">Tab 2</button>
529
+ <button class="pb-tab" type="button" role="tab">Tab 3</button>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </section>
534
+
535
+ <!-- Accessibility Features -->
536
+ <section class="demo-section">
537
+ <h2>Accessibility Features</h2>
538
+ <div class="demo-grid">
539
+ <div class="demo-item">
540
+ <h3>Focus Management</h3>
541
+ <p>Try navigating with the Tab key:</p>
542
+ <div class="demo-buttons">
543
+ <button class="pb-button pb-button--text" type="button">First</button>
544
+ <button class="pb-button pb-button--outlined" type="button">Second</button>
545
+ <button class="pb-button pb-button--contained" type="button">Third</button>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="demo-item">
550
+ <h3>Screen Reader Support</h3>
551
+ <button class="pb-button pb-button--icon pb-button--contained" type="button" aria-label="Delete this item">
552
+ <pb-icon icon="delete" decorative></pb-icon>
553
+ </button>
554
+ <p style="font-size: var(--pb-font-size-sm); margin-top: var(--pb-spacing-2);">
555
+ Icon button with proper aria-label
556
+ </p>
557
+ </div>
558
+ </div>
559
+ </section>
560
+ </div>
561
+
562
+ <!-- JavaScript for interactive demos -->
563
+ <script type="module">
564
+ import '../src/pb-icon.js';
565
+
566
+ // Custom dropdown functionality
567
+ document.querySelectorAll('.pb-dropdown').forEach(dropdown => {
568
+ const trigger = dropdown.querySelector('.pb-dropdown__trigger');
569
+ const menu = dropdown.querySelector('.pb-dropdown__menu');
570
+ const items = dropdown.querySelectorAll('.pb-dropdown__item');
571
+ const valueElement = dropdown.querySelector('.pb-dropdown__value');
572
+
573
+ trigger.addEventListener('click', () => {
574
+ const isOpen = !menu.hidden;
575
+ menu.hidden = isOpen;
576
+ dropdown.classList.toggle('pb-dropdown--open', !isOpen);
577
+ });
578
+
579
+ items.forEach(item => {
580
+ item.addEventListener('click', () => {
581
+ valueElement.textContent = item.textContent;
582
+ menu.hidden = true;
583
+ dropdown.classList.remove('pb-dropdown--open');
584
+ });
585
+ });
586
+
587
+ // Close on outside click
588
+ document.addEventListener('click', (e) => {
589
+ if (!dropdown.contains(e.target)) {
590
+ menu.hidden = true;
591
+ dropdown.classList.remove('pb-dropdown--open');
592
+ }
593
+ });
594
+ });
595
+
596
+ // Tab functionality
597
+ document.querySelectorAll('.pb-tabs').forEach(tabContainer => {
598
+ const tabs = tabContainer.querySelectorAll('[role="tab"]');
599
+ const panels = document.querySelectorAll('[role="tabpanel"]');
600
+
601
+ function selectTab(selectedTab) {
602
+ tabs.forEach((tab, index) => {
603
+ const isSelected = tab === selectedTab;
604
+ tab.setAttribute('aria-selected', isSelected);
605
+ tab.tabIndex = isSelected ? 0 : -1;
606
+ tab.classList.toggle('pb-tab--selected', isSelected);
607
+
608
+ if (panels[index]) {
609
+ panels[index].hidden = !isSelected;
610
+ panels[index].classList.toggle('pb-tab-panel--active', isSelected);
611
+ }
612
+ });
613
+ }
614
+
615
+ tabs.forEach((tab, index) => {
616
+ tab.addEventListener('click', () => selectTab(tab));
617
+
618
+ tab.addEventListener('keydown', (e) => {
619
+ let newIndex = index;
620
+
621
+ switch (e.key) {
622
+ case 'ArrowLeft':
623
+ newIndex = index > 0 ? index - 1 : tabs.length - 1;
624
+ break;
625
+ case 'ArrowRight':
626
+ newIndex = index < tabs.length - 1 ? index + 1 : 0;
627
+ break;
628
+ case 'Home':
629
+ newIndex = 0;
630
+ break;
631
+ case 'End':
632
+ newIndex = tabs.length - 1;
633
+ break;
634
+ default:
635
+ return;
636
+ }
637
+
638
+ e.preventDefault();
639
+ tabs[newIndex].focus();
640
+ selectTab(tabs[newIndex]);
641
+ });
642
+ });
643
+ });
644
+
645
+ // Input floating label behavior
646
+ document.querySelectorAll('.pb-input').forEach(input => {
647
+ const container = input.closest('.pb-input-container');
648
+
649
+ function updateLabel() {
650
+ if (input.value || input === document.activeElement) {
651
+ container.classList.add('pb-input-container--filled');
652
+ } else {
653
+ container.classList.remove('pb-input-container--filled');
654
+ }
655
+ }
656
+
657
+ input.addEventListener('focus', updateLabel);
658
+ input.addEventListener('blur', updateLabel);
659
+ input.addEventListener('input', updateLabel);
660
+
661
+ // Initial state
662
+ updateLabel();
663
+ });
664
+
665
+ // Add ripple effect to buttons
666
+ document.querySelectorAll('.pb-button').forEach(button => {
667
+ button.addEventListener('click', function(e) {
668
+ const ripple = document.createElement('span');
669
+ const rect = this.getBoundingClientRect();
670
+ const size = Math.max(rect.width, rect.height);
671
+ const x = e.clientX - rect.left - size / 2;
672
+ const y = e.clientY - rect.top - size / 2;
673
+
674
+ ripple.style.cssText = `
675
+ position: absolute;
676
+ border-radius: 50%;
677
+ background: rgba(255, 255, 255, 0.6);
678
+ transform: scale(0);
679
+ animation: ripple 0.6s linear;
680
+ width: ${size}px;
681
+ height: ${size}px;
682
+ left: ${x}px;
683
+ top: ${y}px;
684
+ pointer-events: none;
685
+ `;
686
+
687
+ this.style.position = 'relative';
688
+ this.style.overflow = 'hidden';
689
+ this.appendChild(ripple);
690
+
691
+ setTimeout(() => {
692
+ ripple.remove();
693
+ }, 600);
694
+ });
695
+ });
696
+
697
+ // Add ripple animation styles
698
+ const style = document.createElement('style');
699
+ style.textContent = `
700
+ @keyframes ripple {
701
+ to {
702
+ transform: scale(4);
703
+ opacity: 0;
704
+ }
705
+ }
706
+ `;
707
+ document.head.appendChild(style);
708
+ </script>
709
+ </body>
710
+ </html>