@ukic/web-components 2.35.0 → 2.35.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 (68) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
  3. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  4. package/dist/cjs/ic-toast.cjs.entry.js +2 -2
  5. package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/ic-accordion/ic-accordion.stories.js +635 -0
  7. package/dist/collection/components/ic-alert/ic-alert.stories.js +257 -0
  8. package/dist/collection/components/ic-back-to-top/ic-back-to-top.stories.js +162 -0
  9. package/dist/collection/components/ic-badge/ic-badge.stories.js +1082 -0
  10. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.stories.js +502 -0
  11. package/dist/collection/components/ic-button/ic-button.stories.js +2218 -0
  12. package/dist/collection/components/ic-card/ic-card.stories.js +1034 -0
  13. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +687 -0
  14. package/dist/collection/components/ic-chip/ic-chip.stories.js +670 -0
  15. package/dist/collection/components/ic-classification-banner/ic-classification-banner.stories.js +131 -0
  16. package/dist/collection/components/ic-data-entity/ic-data-entity.stories.js +487 -0
  17. package/dist/collection/components/ic-dialog/ic-dialog.stories.js +1256 -0
  18. package/dist/collection/components/ic-empty-state/ic-empty-state.stories.js +397 -0
  19. package/dist/collection/components/ic-footer/ic-footer.stories.js +383 -0
  20. package/dist/collection/components/ic-hero/ic-hero.stories.js +489 -0
  21. package/dist/collection/components/ic-link/ic-link.stories.js +114 -0
  22. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.stories.js +416 -0
  23. package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +7 -35
  24. package/dist/collection/components/ic-page-header/ic-page-header.stories.js +557 -0
  25. package/dist/collection/components/ic-pagination/ic-pagination.stories.js +125 -0
  26. package/dist/collection/components/ic-popover-menu/ic-popover-menu.stories.js +486 -0
  27. package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js +450 -0
  28. package/dist/collection/components/ic-search-bar/ic-search-bar.stories.js +591 -0
  29. package/dist/collection/components/ic-section-container/ic-section-container.stories.js +62 -0
  30. package/dist/collection/components/ic-select/ic-select-searchable.stories.js +953 -0
  31. package/dist/collection/components/ic-select/ic-select-single.stories.js +780 -0
  32. package/dist/collection/components/ic-side-navigation/ic-side-navigation.stories.js +2526 -0
  33. package/dist/collection/components/ic-skeleton/ic-skeleton.stories.js +141 -0
  34. package/dist/collection/components/ic-status-tag/ic-status-tag.stories.js +161 -0
  35. package/dist/collection/components/ic-stepper/ic-stepper.stories.js +327 -0
  36. package/dist/collection/components/ic-switch/ic-switch.stories.js +171 -0
  37. package/dist/collection/components/ic-tab-context/ic-tabs.stories.js +388 -0
  38. package/dist/collection/components/ic-text-field/ic-text-field.stories.js +1083 -0
  39. package/dist/collection/components/ic-theme/ic-theme.stories.js +171 -0
  40. package/dist/collection/components/ic-toast/ic-toast.js +2 -2
  41. package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
  42. package/dist/collection/components/ic-toast/ic-toast.stories.js +413 -0
  43. package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js +3 -3
  44. package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js.map +1 -1
  45. package/dist/collection/components/ic-toggle-button/ic-toggle-button.stories.js +537 -0
  46. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.stories.js +610 -0
  47. package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js +356 -0
  48. package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js +1083 -0
  49. package/dist/collection/components/ic-typography/ic-typography.stories.js +437 -0
  50. package/dist/collection/patterns/top-nav-content-footer.stories.js +109 -0
  51. package/dist/collection/patterns/z-index.stories.js +474 -0
  52. package/dist/components/ic-navigation-item.js +1 -1
  53. package/dist/components/ic-navigation-item.js.map +1 -1
  54. package/dist/components/ic-toast.js +2 -2
  55. package/dist/components/ic-toast.js.map +1 -1
  56. package/dist/core/core.esm.js +1 -1
  57. package/dist/core/p-3e8023ff.entry.js +2 -0
  58. package/dist/core/p-3e8023ff.entry.js.map +1 -0
  59. package/dist/core/{p-7e8a4abd.entry.js → p-bfaa257c.entry.js} +2 -2
  60. package/dist/core/{p-7e8a4abd.entry.js.map → p-bfaa257c.entry.js.map} +1 -1
  61. package/dist/esm/ic-navigation-item.entry.js +1 -1
  62. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  63. package/dist/esm/ic-toast.entry.js +2 -2
  64. package/dist/esm/ic-toast.entry.js.map +1 -1
  65. package/hydrate/index.js +3 -3
  66. package/package.json +15 -11
  67. package/dist/core/p-dfb3e76e.entry.js +0 -2
  68. package/dist/core/p-dfb3e76e.entry.js.map +0 -1
@@ -0,0 +1,474 @@
1
+ import { html } from "lit-html";
2
+
3
+ export default {
4
+ title: "Patterns/Component z-index",
5
+ };
6
+
7
+ export const ComponentZIndex = {
8
+ render: () => html`
9
+ <style>
10
+ ic-toast {
11
+ --bottom-position: 50px;
12
+ }
13
+ </style>
14
+ <div style="display:flex;">
15
+ <ic-side-navigation
16
+ app-title="Application Name"
17
+ version="v0.0.7"
18
+ status="BETA"
19
+ >
20
+ <svg
21
+ slot="app-icon"
22
+ xmlns="http://www.w3.org/2000/svg"
23
+ height="24px"
24
+ viewBox="0 0 24 24"
25
+ width="24px"
26
+ fill="#000000"
27
+ >
28
+ <path d="M0 0h24v24H0V0z" fill="none" />
29
+ <path
30
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
31
+ />
32
+ </svg>
33
+ <ic-navigation-item slot="primary-navigation" href="/" label="Home">
34
+ <svg
35
+ slot="icon"
36
+ width="24"
37
+ height="24"
38
+ viewBox="0 0 24 24"
39
+ fill="none"
40
+ xmlns="http://www.w3.org/2000/svg"
41
+ >
42
+ <path
43
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
44
+ fill="currentColor"
45
+ />
46
+ </svg>
47
+ </ic-navigation-item>
48
+ <ic-navigation-item
49
+ slot="primary-navigation"
50
+ href="/"
51
+ label="Search"
52
+ selected="true"
53
+ >
54
+ <svg
55
+ slot="icon"
56
+ width="24"
57
+ height="24"
58
+ viewBox="0 0 24 24"
59
+ fill="none"
60
+ xmlns="http://www.w3.org/2000/svg"
61
+ >
62
+ <path
63
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
64
+ fill="currentColor"
65
+ />
66
+ </svg>
67
+ </ic-navigation-item>
68
+ <ic-divider slot="primary-navigation"></ic-divider>
69
+ <ic-navigation-item slot="primary-navigation" href="/" label="Trends">
70
+ <svg
71
+ slot="icon"
72
+ width="24"
73
+ height="24"
74
+ viewBox="0 0 24 24"
75
+ fill="none"
76
+ xmlns="http://www.w3.org/2000/svg"
77
+ >
78
+ <path
79
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
80
+ fill="currentColor"
81
+ />
82
+ </svg>
83
+ </ic-navigation-item>
84
+ <ic-navigation-group
85
+ slot="primary-navigation"
86
+ label="Second navigation group"
87
+ expandable="true"
88
+ >
89
+ <ic-navigation-item label="Different navigation" href="/">
90
+ <svg
91
+ slot="icon"
92
+ width="24"
93
+ height="24"
94
+ viewBox="0 0 24 24"
95
+ fill="none"
96
+ xmlns="http://www.w3.org/2000/svg"
97
+ >
98
+ <path
99
+ d="M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z"
100
+ fill="currentColor"
101
+ />
102
+ </svg>
103
+ </ic-navigation-item>
104
+ <ic-navigation-item label="Navigation" href="/">
105
+ <svg
106
+ slot="icon"
107
+ width="24"
108
+ height="24"
109
+ viewBox="0 0 24 24"
110
+ fill="none"
111
+ xmlns="http://www.w3.org/2000/svg"
112
+ >
113
+ <path
114
+ d="M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z"
115
+ fill="currentColor"
116
+ />
117
+ </svg>
118
+ </ic-navigation-item>
119
+ </ic-navigation-group>
120
+ <ic-navigation-item
121
+ slot="primary-navigation"
122
+ href="/"
123
+ label="This is a very very very long label for the navigation item"
124
+ >
125
+ <svg
126
+ slot="icon"
127
+ width="24"
128
+ height="24"
129
+ viewBox="0 0 24 24"
130
+ fill="none"
131
+ xmlns="http://www.w3.org/2000/svg"
132
+ >
133
+ <path
134
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
135
+ fill="currentColor"
136
+ />
137
+ </svg>
138
+ </ic-navigation-item>
139
+ <ic-navigation-item
140
+ slot="secondary-navigation"
141
+ href="/"
142
+ label="Settings"
143
+ >
144
+ <svg
145
+ slot="icon"
146
+ width="24"
147
+ height="24"
148
+ viewBox="0 0 24 24"
149
+ fill="none"
150
+ xmlns="http://www.w3.org/2000/svg"
151
+ >
152
+ <path
153
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
154
+ fill="currentColor"
155
+ />
156
+ </svg>
157
+ </ic-navigation-item>
158
+ </ic-side-navigation>
159
+ <div
160
+ class="content-wrapper"
161
+ style="display:flex; flex-direction: column; flex-grow: 1;"
162
+ >
163
+ <main>
164
+ <ic-top-navigation
165
+ app-title="Application Name"
166
+ status="beta"
167
+ version="v0.0.7"
168
+ >
169
+ <svg
170
+ slot="app-icon"
171
+ xmlns="http://www.w3.org/2000/svg"
172
+ height="24px"
173
+ viewBox="0 0 24 24"
174
+ width="24px"
175
+ fill="#000000"
176
+ >
177
+ <path d="M0 0h24v24H0V0z" fill="none" />
178
+ <path
179
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
180
+ />
181
+ </svg>
182
+ <ic-search-bar
183
+ slot="search"
184
+ placeholder="Search"
185
+ label="Search"
186
+ id="top-nav-search-bar"
187
+ ></ic-search-bar>
188
+ <ic-navigation-button
189
+ label="button1"
190
+ slot="buttons"
191
+ onclick="alert('test')"
192
+ >
193
+ <svg
194
+ slot="icon"
195
+ xmlns="http://www.w3.org/2000/svg"
196
+ height="24px"
197
+ viewBox="0 0 24 24"
198
+ width="24px"
199
+ fill="#000000"
200
+ >
201
+ <path d="M0 0h24v24H0V0z" fill="none" />
202
+ <path
203
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
204
+ />
205
+ </svg>
206
+ </ic-navigation-button>
207
+ <ic-navigation-group
208
+ slot="navigation"
209
+ label="Navigation group"
210
+ expandable="true"
211
+ >
212
+ <ic-navigation-item
213
+ label="Navigation"
214
+ href="/"
215
+ ></ic-navigation-item>
216
+ <ic-navigation-item
217
+ label="Navigation"
218
+ href="/"
219
+ ></ic-navigation-item>
220
+ <ic-navigation-item
221
+ label="Navigation"
222
+ href="/"
223
+ ></ic-navigation-item>
224
+ <ic-navigation-item
225
+ label="Navigation"
226
+ href="/"
227
+ ></ic-navigation-item>
228
+ <ic-navigation-item
229
+ label="Navigation"
230
+ href="/"
231
+ selected="true"
232
+ ></ic-navigation-item>
233
+ <ic-navigation-item
234
+ label="Navigation"
235
+ href="/"
236
+ ></ic-navigation-item>
237
+ <ic-navigation-item
238
+ label="Navigation"
239
+ href="/"
240
+ ></ic-navigation-item>
241
+ <ic-navigation-item
242
+ label="Navigation"
243
+ href="/"
244
+ ></ic-navigation-item>
245
+ <ic-navigation-item
246
+ label="Navigation"
247
+ href="/"
248
+ ></ic-navigation-item>
249
+ <ic-navigation-item
250
+ label="Navigation"
251
+ href="/"
252
+ ></ic-navigation-item>
253
+ </ic-navigation-group>
254
+ <ic-navigation-group
255
+ slot="navigation"
256
+ label="Second navigation group"
257
+ expandable="true"
258
+ >
259
+ <ic-navigation-item
260
+ label="Different navigation"
261
+ href="/"
262
+ ></ic-navigation-item>
263
+ <ic-navigation-item
264
+ label="Navigation"
265
+ href="/"
266
+ ></ic-navigation-item>
267
+ <ic-navigation-item
268
+ label="Navigation"
269
+ href="/"
270
+ ></ic-navigation-item>
271
+ <ic-navigation-item
272
+ label="Navigation"
273
+ href="/"
274
+ ></ic-navigation-item>
275
+ <ic-navigation-item
276
+ label="Navigation"
277
+ href="/"
278
+ ></ic-navigation-item>
279
+ <ic-navigation-item
280
+ label="Navigation"
281
+ href="/"
282
+ ></ic-navigation-item>
283
+ <ic-navigation-item
284
+ label="Navigation"
285
+ href="/"
286
+ ></ic-navigation-item>
287
+ <ic-navigation-item
288
+ label="Navigation"
289
+ href="/"
290
+ ></ic-navigation-item>
291
+ <ic-navigation-item
292
+ label="Navigation"
293
+ href="/"
294
+ ></ic-navigation-item>
295
+ <ic-navigation-item
296
+ label="Navigation"
297
+ href="/"
298
+ ></ic-navigation-item>
299
+ </ic-navigation-group>
300
+ </ic-top-navigation>
301
+ <span id="main"></span>
302
+ <ic-page-header
303
+ heading="Page header"
304
+ subheading="This is a page header component with additional functionality and this is the text."
305
+ aligned="full-width"
306
+ sticky
307
+ >
308
+ <ic-status-tag
309
+ slot="heading-adornment"
310
+ label="Beta"
311
+ ></ic-status-tag>
312
+ <ic-search-bar
313
+ id="page-header-search-bar"
314
+ characters-until-suggestion="1"
315
+ slot="input"
316
+ label="What is your favourite coffee?"
317
+ ></ic-search-bar>
318
+ </ic-page-header>
319
+ <ic-section-container id="top-target">
320
+ <ic-typography
321
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
322
+ vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante
323
+ quis, tempor interdum libero. In dictum sodales velit, eu egestas
324
+ arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci
325
+ sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna
326
+ interdum risus, vel fringilla libero ex eu dui. Suspendisse
327
+ ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae
328
+ congue ligula rutrum id.</ic-typography
329
+ >
330
+ <ic-button onclick="showToast()">Display toast</ic-button>
331
+ <ic-typography
332
+ >Etiam in suscipit metus. Duis semper, sapien a molestie semper,
333
+ ex nibh porttitor tellus, vel molestie justo odio vel purus.
334
+ Curabitur porttitor, tortor sed semper sollicitudin, odio odio
335
+ congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies
336
+ commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt
337
+ ullamcorper sit amet in metus. Aenean facilisis placerat dictum.
338
+ Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor
339
+ lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam
340
+ non lorem ante.</ic-typography
341
+ >
342
+ <ic-typography
343
+ >Donec aliquam eget mauris condimentum cursus. Nullam tempus a
344
+ urna in commodo. Proin mauris augue, viverra id finibus id,
345
+ vulputate in ante. Aliquam volutpat hendrerit tellus vitae
346
+ tristique. Donec pellentesque enim arcu, at feugiat mauris
347
+ venenatis vitae. Sed iaculis ut elit et ultrices. Donec diam eros,
348
+ iaculis ac est nec, tempus feugiat nisl. Suspendisse eget interdum
349
+ lorem. Phasellus pretium urna id elit pharetra
350
+ hendrerit.</ic-typography
351
+ >
352
+ <ic-typography
353
+ >Mauris blandit, mi ut posuere dapibus, est ante porttitor sem,
354
+ quis pretium velit ante nec felis. Vivamus efficitur scelerisque
355
+ dapibus. Nunc lacinia finibus laoreet. Praesent commodo augue
356
+ orci, congue rutrum velit malesuada gravida. Nunc magna mauris,
357
+ ornare nec nisl vel, faucibus euismod orci. Proin in augue vitae
358
+ nunc gravida consectetur. Pellentesque id malesuada ex, sit amet
359
+ imperdiet est. Duis erat nibh, lacinia vitae faucibus non, aliquam
360
+ in dolor. Nam interdum felis vitae feugiat posuere. Cras volutpat
361
+ molestie ipsum, sed auctor quam volutpat vitae. Vivamus lobortis
362
+ scelerisque libero vel scelerisque.</ic-typography
363
+ >
364
+ <ic-typography
365
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
366
+ eget orci condimentum, tempus tortor posuere, lacinia ex.
367
+ Curabitur bibendum suscipit turpis vitae mollis. Ut laoreet orci a
368
+ risus facilisis porta. Orci varius natoque penatibus et magnis dis
369
+ parturient montes, nascetur ridiculus mus. Curabitur a porttitor
370
+ neque, ac dignissim velit. Morbi quis malesuada massa, vitae
371
+ sodales tellus. Aenean laoreet mattis lobortis. In mauris erat,
372
+ tincidunt in placerat sed, pretium ac tortor. Morbi blandit lacus
373
+ a leo vehicula aliquet.</ic-typography
374
+ >
375
+ <ic-typography
376
+ >Pellentesque aliquam risus vel eros maximus, at pellentesque mi
377
+ pretium. Etiam nec velit at orci varius porttitor. Aliquam
378
+ facilisis, elit non cursus fringilla, metus metus malesuada lacus,
379
+ at blandit nibh augue aliquet orci. Duis aliquam, est eget sodales
380
+ ullamcorper, eros turpis euismod nulla, sed sollicitudin diam
381
+ massa semper purus. Vivamus vel turpis ipsum. Interdum et
382
+ malesuada fames ac ante ipsum primis in faucibus. Morbi euismod
383
+ turpis dapibus quam fermentum condimentum. Mauris ex orci,
384
+ consequat quis tempor eu, finibus vitae eros. Ut eu erat eu ipsum
385
+ pulvinar cursus vel at dui. Etiam tincidunt quam porta nulla
386
+ suscipit vestibulum. Sed iaculis enim leo, et aliquam justo
387
+ feugiat in. Vivamus in ornare nulla, at tempor massa. Sed et
388
+ aliquam nisi.</ic-typography
389
+ >
390
+ <ic-typography
391
+ >Mauris tempus accumsan libero non tincidunt. Curabitur et leo
392
+ orci. Suspendisse molestie posuere leo vitae posuere. Cras lacinia
393
+ urna non erat gravida sagittis. Quisque dapibus arcu nec sem
394
+ pharetra convallis. Nullam sed arcu mollis, posuere elit at,
395
+ condimentum ligula. Nullam maximus nulla quam, ut euismod est
396
+ feugiat at. Quisque ut venenatis ex, in facilisis sapien.
397
+ Pellentesque in orci vitae metus iaculis venenatis. Nunc porttitor
398
+ tellus arcu, in posuere quam vulputate nec. Aenean in venenatis
399
+ ligula, non mollis quam. Suspendisse nec enim vel massa finibus
400
+ pretium et a urna. Etiam suscipit semper est, id efficitur diam
401
+ sollicitudin nec. Nullam nibh sapien, condimentum ut laoreet et,
402
+ euismod ac mi. Vestibulum tristique odio non risus ullamcorper, et
403
+ aliquam turpis varius. Nunc metus ex, tempus a augue sit amet,
404
+ interdum vulputate libero.</ic-typography
405
+ >
406
+ <ic-typography
407
+ >Aenean convallis libero id magna congue pellentesque. Nulla
408
+ iaculis interdum porta. Aenean laoreet scelerisque nulla vel
409
+ molestie. Class aptent taciti sociosqu ad litora torquent per
410
+ conubia nostra, per inceptos himenaeos. Integer sollicitudin in
411
+ felis vitae rhoncus. Sed eu elementum massa. Cras ut accumsan
412
+ risus. Donec nec augue justo. Aenean sagittis luctus leo egestas
413
+ consectetur. Sed sit amet nisl quis felis volutpat facilisis ac
414
+ vitae tellus. Curabitur pharetra commodo consequat. Aliquam
415
+ consequat ipsum lacus, sed faucibus sapien mollis
416
+ vel.</ic-typography
417
+ >
418
+ <ic-toast-region>
419
+ <ic-toast id="toast1" heading="Your coffee is ready"></ic-toast>
420
+ </ic-toast-region>
421
+ </ic-section-container>
422
+ </main>
423
+ <ic-back-to-top target="main"></ic-back-to-top>
424
+ <ic-footer
425
+ description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
426
+ please get in touch."
427
+ caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
428
+ >
429
+ <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
430
+ <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
431
+ <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
432
+ <ic-footer-link slot="link" href="/">Components</ic-footer-link>
433
+ <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
434
+ <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
435
+ <div
436
+ slot="logo"
437
+ style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
438
+ background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
439
+ >
440
+ Logo
441
+ </div>
442
+ </ic-footer>
443
+ </div>
444
+ </div>
445
+ <ic-classification-banner
446
+ classification="official"
447
+ ></ic-classification-banner>
448
+ <script>
449
+ const options = [
450
+ { label: "Espresso", value: "espresso" },
451
+ { label: "Double Espresso", value: "doubleespresso" },
452
+ { label: "Flat White", value: "flatwhite" },
453
+ { label: "Cappuccino", value: "cappuccino" },
454
+ { label: "Americano", value: "americano" },
455
+ { label: "Ameno", value: "ameno" },
456
+ { label: "Aicano", value: "acano" },
457
+ { label: "Mocha", value: "mocha" },
458
+ ];
459
+ document.querySelector("#page-header-search-bar").options = options;
460
+ document.querySelector("#top-nav-search-bar").options = options;
461
+ var toastRegion = document.querySelector("ic-toast-region");
462
+ function showToast() {
463
+ var x = document.getElementById("toast1");
464
+ toastRegion.setVisible(x);
465
+ }
466
+ </script>
467
+ `,
468
+
469
+ name: "Component z-index",
470
+
471
+ parameters: {
472
+ layout: "fullscreen",
473
+ },
474
+ };
@@ -5,7 +5,7 @@ import { O as OpenInNew } from './OpenInNew.js';
5
5
  import { d as defineCustomElement$3 } from './ic-tooltip2.js';
6
6
  import { d as defineCustomElement$2 } from './ic-typography2.js';
7
7
 
8
- const icNavigationItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:\"\";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:\"\";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:0.25rem}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:var(--ic-space-lg);width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 56px);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding-top:var(--ic-space-md) !important;padding-bottom:var(--ic-space-md) !important;text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:\"\";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:\" \" !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-primary-text)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}";
8
+ const icNavigationItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:\"\";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:\"\";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:0.25rem}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:var(--ic-space-lg);width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 56px);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding-top:var(--ic-space-md) !important;padding-bottom:var(--ic-space-md) !important;text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:\"\";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:\" \" !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-primary-text)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}";
9
9
 
10
10
  const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem extends HTMLElement {
11
11
  constructor() {