@nldd/design-system 0.8.63 → 0.8.64

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 (398) hide show
  1. package/dist/assets/styles/{slotted-reset.d.ts → style-resets.d.ts} +1 -1
  2. package/dist/assets/styles/style-resets.d.ts.map +1 -0
  3. package/dist/assets/styles/{slotted-reset.fixtures.d.ts → style-resets.fixtures.d.ts} +4 -4
  4. package/dist/assets/styles/style-resets.fixtures.d.ts.map +1 -0
  5. package/dist/assets/styles/{slotted-reset.fixtures.js → style-resets.fixtures.js} +4 -4
  6. package/dist/assets/styles/style-resets.fixtures.js.map +1 -0
  7. package/dist/assets/styles/{slotted-reset.js → style-resets.js} +1 -1
  8. package/dist/assets/styles/style-resets.js.map +1 -0
  9. package/dist/components/actions/button/button.styles.js +7 -7
  10. package/dist/components/actions/button/button.styles.js.map +1 -1
  11. package/dist/components/actions/button-bar/button-bar.styles.d.ts.map +1 -1
  12. package/dist/components/actions/button-bar/button-bar.styles.js +3 -0
  13. package/dist/components/actions/button-bar/button-bar.styles.js.map +1 -1
  14. package/dist/components/actions/button-group/button-group.styles.d.ts.map +1 -1
  15. package/dist/components/actions/button-group/button-group.styles.js +3 -0
  16. package/dist/components/actions/button-group/button-group.styles.js.map +1 -1
  17. package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
  18. package/dist/components/actions/icon-button/icon-button.styles.js +4 -1
  19. package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
  20. package/dist/components/actions/menu/menu.styles.d.ts.map +1 -1
  21. package/dist/components/actions/menu/menu.styles.js +4 -1
  22. package/dist/components/actions/menu/menu.styles.js.map +1 -1
  23. package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
  24. package/dist/components/actions/split-button/split-button.styles.js +4 -1
  25. package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
  26. package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
  27. package/dist/components/actions/toolbar/toolbar.styles.js +4 -1
  28. package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
  29. package/dist/components/components.js +31 -30
  30. package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
  31. package/dist/components/content/blockquote/blockquote.styles.js +4 -1
  32. package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
  33. package/dist/components/content/byline/byline.styles.d.ts.map +1 -1
  34. package/dist/components/content/byline/byline.styles.js +4 -1
  35. package/dist/components/content/byline/byline.styles.js.map +1 -1
  36. package/dist/components/content/code-viewer/code-viewer.styles.d.ts.map +1 -1
  37. package/dist/components/content/code-viewer/code-viewer.styles.js +4 -1
  38. package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
  39. package/dist/components/content/icon/icon-aliases.js +1 -1
  40. package/dist/components/content/icon/icon-aliases.js.map +1 -1
  41. package/dist/components/content/icon/icon.styles.d.ts.map +1 -1
  42. package/dist/components/content/icon/icon.styles.js +3 -0
  43. package/dist/components/content/icon/icon.styles.js.map +1 -1
  44. package/dist/components/content/image/image.styles.d.ts.map +1 -1
  45. package/dist/components/content/image/image.styles.js +4 -1
  46. package/dist/components/content/image/image.styles.js.map +1 -1
  47. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
  48. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +4 -1
  49. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
  50. package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
  51. package/dist/components/content/tag/tag.styles.js +4 -1
  52. package/dist/components/content/tag/tag.styles.js.map +1 -1
  53. package/dist/components/content/title/title.styles.d.ts.map +1 -1
  54. package/dist/components/content/title/title.styles.js +4 -1
  55. package/dist/components/content/title/title.styles.js.map +1 -1
  56. package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
  57. package/dist/components/content/tooltip/tooltip.styles.js +4 -1
  58. package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
  59. package/dist/components/forms/form-actions/form-actions.styles.d.ts.map +1 -1
  60. package/dist/components/forms/form-actions/form-actions.styles.js +3 -0
  61. package/dist/components/forms/form-actions/form-actions.styles.js.map +1 -1
  62. package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
  63. package/dist/components/forms/form-field/form-field.styles.js +4 -1
  64. package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
  65. package/dist/components/{index-BVaijKe_.js → index-BNhqNvDd.js} +3672 -2673
  66. package/dist/components/index.d.ts +1 -0
  67. package/dist/components/index.d.ts.map +1 -1
  68. package/dist/components/index.js +1 -0
  69. package/dist/components/index.js.map +1 -1
  70. package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
  71. package/dist/components/inputs/checkbox/checkbox.styles.js +3 -0
  72. package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
  73. package/dist/components/inputs/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
  74. package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +4 -1
  75. package/dist/components/inputs/checkbox-field/checkbox-field.styles.js.map +1 -1
  76. package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map +1 -1
  77. package/dist/components/inputs/code-editor/code-editor.styles.js +4 -1
  78. package/dist/components/inputs/code-editor/code-editor.styles.js.map +1 -1
  79. package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
  80. package/dist/components/inputs/combo-box/combo-box.styles.js +4 -1
  81. package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
  82. package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
  83. package/dist/components/inputs/dropdown/dropdown.styles.js +4 -1
  84. package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
  85. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
  86. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +4 -1
  87. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
  88. package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
  89. package/dist/components/inputs/number-field/number-field.styles.js +4 -1
  90. package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
  91. package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
  92. package/dist/components/inputs/password-field/password-field.styles.js +4 -1
  93. package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
  94. package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
  95. package/dist/components/inputs/radio-button/radio-button.styles.js +3 -0
  96. package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
  97. package/dist/components/inputs/radio-button-field/radio-button-field.styles.d.ts.map +1 -1
  98. package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +4 -1
  99. package/dist/components/inputs/radio-button-field/radio-button-field.styles.js.map +1 -1
  100. package/dist/components/inputs/radio-button-group/radio-button-group.styles.d.ts.map +1 -1
  101. package/dist/components/inputs/radio-button-group/radio-button-group.styles.js +4 -1
  102. package/dist/components/inputs/radio-button-group/radio-button-group.styles.js.map +1 -1
  103. package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
  104. package/dist/components/inputs/search-field/search-field.styles.js +13 -1
  105. package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
  106. package/dist/components/inputs/search-field/search-field.template.d.ts.map +1 -1
  107. package/dist/components/inputs/search-field/search-field.template.js +47 -39
  108. package/dist/components/inputs/search-field/search-field.template.js.map +1 -1
  109. package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
  110. package/dist/components/inputs/segmented-control/segmented-control.styles.js +4 -1
  111. package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
  112. package/dist/components/inputs/stepper/stepper.styles.d.ts.map +1 -1
  113. package/dist/components/inputs/stepper/stepper.styles.js +3 -0
  114. package/dist/components/inputs/stepper/stepper.styles.js.map +1 -1
  115. package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
  116. package/dist/components/inputs/switch/switch.styles.js +3 -0
  117. package/dist/components/inputs/switch/switch.styles.js.map +1 -1
  118. package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map +1 -1
  119. package/dist/components/inputs/switch-field/switch-field.styles.js +4 -1
  120. package/dist/components/inputs/switch-field/switch-field.styles.js.map +1 -1
  121. package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
  122. package/dist/components/inputs/text-field/text-field.styles.js +4 -1
  123. package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
  124. package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
  125. package/dist/components/inputs/toggle-button/toggle-button.styles.js +4 -1
  126. package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
  127. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
  128. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js +3 -0
  129. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map +1 -1
  130. package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
  131. package/dist/components/inputs/token/token.styles.js +4 -1
  132. package/dist/components/inputs/token/token.styles.js.map +1 -1
  133. package/dist/components/layout/app-view/app-view.styles.d.ts.map +1 -1
  134. package/dist/components/layout/app-view/app-view.styles.js +3 -0
  135. package/dist/components/layout/app-view/app-view.styles.js.map +1 -1
  136. package/dist/components/layout/box/box.styles.d.ts.map +1 -1
  137. package/dist/components/layout/box/box.styles.js +3 -0
  138. package/dist/components/layout/box/box.styles.js.map +1 -1
  139. package/dist/components/layout/card/card.d.ts +28 -2
  140. package/dist/components/layout/card/card.d.ts.map +1 -1
  141. package/dist/components/layout/card/card.i18n.d.ts +5 -0
  142. package/dist/components/layout/card/card.i18n.d.ts.map +1 -0
  143. package/dist/components/layout/card/card.i18n.js +4 -0
  144. package/dist/components/layout/card/card.i18n.js.map +1 -0
  145. package/dist/components/layout/card/card.js +54 -2
  146. package/dist/components/layout/card/card.js.map +1 -1
  147. package/dist/components/layout/card/card.styles.d.ts.map +1 -1
  148. package/dist/components/layout/card/card.styles.js +20 -0
  149. package/dist/components/layout/card/card.styles.js.map +1 -1
  150. package/dist/components/layout/card/card.template.d.ts.map +1 -1
  151. package/dist/components/layout/card/card.template.js +17 -1
  152. package/dist/components/layout/card/card.template.js.map +1 -1
  153. package/dist/components/layout/collection/collection.d.ts +5 -5
  154. package/dist/components/layout/collection/collection.d.ts.map +1 -1
  155. package/dist/components/layout/collection/collection.js +4 -4
  156. package/dist/components/layout/collection/collection.styles.d.ts.map +1 -1
  157. package/dist/components/layout/collection/collection.styles.js +5 -2
  158. package/dist/components/layout/collection/collection.styles.js.map +1 -1
  159. package/dist/components/layout/container/container.d.ts +7 -3
  160. package/dist/components/layout/container/container.d.ts.map +1 -1
  161. package/dist/components/layout/container/container.js +15 -3
  162. package/dist/components/layout/container/container.js.map +1 -1
  163. package/dist/components/layout/container/container.styles.d.ts.map +1 -1
  164. package/dist/components/layout/container/container.styles.js +42 -1
  165. package/dist/components/layout/container/container.styles.js.map +1 -1
  166. package/dist/components/layout/divider/divider.styles.d.ts.map +1 -1
  167. package/dist/components/layout/divider/divider.styles.js +3 -0
  168. package/dist/components/layout/divider/divider.styles.js.map +1 -1
  169. package/dist/components/layout/page/page.styles.d.ts.map +1 -1
  170. package/dist/components/layout/page/page.styles.js +3 -0
  171. package/dist/components/layout/page/page.styles.js.map +1 -1
  172. package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
  173. package/dist/components/layout/page-footer/page-footer.styles.js +4 -1
  174. package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
  175. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map +1 -1
  176. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +3 -0
  177. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map +1 -1
  178. package/dist/components/layout/page-sections/hero/hero.d.ts +25 -5
  179. package/dist/components/layout/page-sections/hero/hero.d.ts.map +1 -1
  180. package/dist/components/layout/page-sections/hero/hero.js +60 -11
  181. package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
  182. package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map +1 -1
  183. package/dist/components/layout/page-sections/hero/hero.styles.js +15 -4
  184. package/dist/components/layout/page-sections/hero/hero.styles.js.map +1 -1
  185. package/dist/components/layout/page-sections/hero/hero.template.d.ts.map +1 -1
  186. package/dist/components/layout/page-sections/hero/hero.template.js +13 -1
  187. package/dist/components/layout/page-sections/hero/hero.template.js.map +1 -1
  188. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
  189. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +3 -0
  190. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
  191. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
  192. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +3 -0
  193. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
  194. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts +119 -0
  195. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts.map +1 -0
  196. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts +6 -0
  197. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts.map +1 -0
  198. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js +5 -0
  199. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js.map +1 -0
  200. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js +219 -0
  201. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map +1 -0
  202. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts +2 -0
  203. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -0
  204. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +157 -0
  205. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -0
  206. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts +4 -0
  207. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts.map +1 -0
  208. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js +57 -0
  209. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js.map +1 -0
  210. package/dist/components/layout/page-sections/simple-section/simple-section.styles.d.ts.map +1 -1
  211. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +3 -0
  212. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map +1 -1
  213. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
  214. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +3 -0
  215. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
  216. package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
  217. package/dist/components/layout/popover/popover.styles.js +3 -0
  218. package/dist/components/layout/popover/popover.styles.js.map +1 -1
  219. package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
  220. package/dist/components/layout/sheet/sheet.styles.js +3 -0
  221. package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
  222. package/dist/components/layout/spacer/spacer.styles.d.ts.map +1 -1
  223. package/dist/components/layout/spacer/spacer.styles.js +3 -0
  224. package/dist/components/layout/spacer/spacer.styles.js.map +1 -1
  225. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.d.ts.map +1 -1
  226. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +3 -0
  227. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js.map +1 -1
  228. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts +47 -19
  229. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts.map +1 -1
  230. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +123 -73
  231. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
  232. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.d.ts.map +1 -1
  233. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +17 -14
  234. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js.map +1 -1
  235. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.d.ts.map +1 -1
  236. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.js +10 -8
  237. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.js.map +1 -1
  238. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.d.ts.map +1 -1
  239. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +3 -0
  240. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js.map +1 -1
  241. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.d.ts.map +1 -1
  242. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +3 -0
  243. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js.map +1 -1
  244. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.d.ts.map +1 -1
  245. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +3 -0
  246. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js.map +1 -1
  247. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.d.ts.map +1 -1
  248. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +3 -0
  249. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js.map +1 -1
  250. package/dist/components/layout/window/window.d.ts +1 -19
  251. package/dist/components/layout/window/window.d.ts.map +1 -1
  252. package/dist/components/layout/window/window.js +1 -187
  253. package/dist/components/layout/window/window.js.map +1 -1
  254. package/dist/components/layout/window/window.styles.d.ts.map +1 -1
  255. package/dist/components/layout/window/window.styles.js +5 -28
  256. package/dist/components/layout/window/window.styles.js.map +1 -1
  257. package/dist/components/layout/window/window.template.d.ts.map +1 -1
  258. package/dist/components/layout/window/window.template.js +1 -2
  259. package/dist/components/layout/window/window.template.js.map +1 -1
  260. package/dist/components/lists-and-tables/cells/cell/cell.styles.d.ts.map +1 -1
  261. package/dist/components/lists-and-tables/cells/cell/cell.styles.js +4 -1
  262. package/dist/components/lists-and-tables/cells/cell/cell.styles.js.map +1 -1
  263. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.d.ts.map +1 -1
  264. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +4 -1
  265. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js.map +1 -1
  266. package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.d.ts.map +1 -1
  267. package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js +3 -0
  268. package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js.map +1 -1
  269. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.d.ts.map +1 -1
  270. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +3 -0
  271. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js.map +1 -1
  272. package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.d.ts.map +1 -1
  273. package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js +3 -0
  274. package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js.map +1 -1
  275. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.d.ts.map +1 -1
  276. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +4 -1
  277. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js.map +1 -1
  278. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +1 -1
  279. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +3 -0
  280. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +1 -1
  281. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.d.ts.map +1 -1
  282. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +4 -1
  283. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js.map +1 -1
  284. package/dist/components/lists-and-tables/list/list.d.ts +138 -8
  285. package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
  286. package/dist/components/lists-and-tables/list/list.i18n.d.ts +2 -0
  287. package/dist/components/lists-and-tables/list/list.i18n.d.ts.map +1 -1
  288. package/dist/components/lists-and-tables/list/list.i18n.js +2 -0
  289. package/dist/components/lists-and-tables/list/list.i18n.js.map +1 -1
  290. package/dist/components/lists-and-tables/list/list.js +368 -16
  291. package/dist/components/lists-and-tables/list/list.js.map +1 -1
  292. package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
  293. package/dist/components/lists-and-tables/list/list.styles.js +163 -25
  294. package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
  295. package/dist/components/lists-and-tables/list/list.template.d.ts +26 -1
  296. package/dist/components/lists-and-tables/list/list.template.d.ts.map +1 -1
  297. package/dist/components/lists-and-tables/list/list.template.js +76 -18
  298. package/dist/components/lists-and-tables/list/list.template.js.map +1 -1
  299. package/dist/components/lists-and-tables/list-item/list-item.d.ts +20 -7
  300. package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
  301. package/dist/components/lists-and-tables/list-item/list-item.js +49 -24
  302. package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
  303. package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
  304. package/dist/components/lists-and-tables/list-item/list-item.styles.js +50 -28
  305. package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
  306. package/dist/components/lists-and-tables/list-item/list-item.template.d.ts +1 -1
  307. package/dist/components/lists-and-tables/list-item/list-item.template.d.ts.map +1 -1
  308. package/dist/components/lists-and-tables/list-item/list-item.template.js +9 -6
  309. package/dist/components/lists-and-tables/list-item/list-item.template.js.map +1 -1
  310. package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
  311. package/dist/components/lists-and-tables/table/table.styles.js +4 -1
  312. package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
  313. package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +0 -44
  314. package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -1
  315. package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts +0 -1
  316. package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map +1 -1
  317. package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js +0 -1
  318. package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map +1 -1
  319. package/dist/components/navigation/breadcrumbs/breadcrumbs.js +1 -84
  320. package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
  321. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
  322. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +6 -52
  323. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
  324. package/dist/components/navigation/breadcrumbs/breadcrumbs.template.d.ts.map +1 -1
  325. package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js +1 -17
  326. package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map +1 -1
  327. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
  328. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +4 -1
  329. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
  330. package/dist/components/navigation/link/link.styles.d.ts.map +1 -1
  331. package/dist/components/navigation/link/link.styles.js +4 -1
  332. package/dist/components/navigation/link/link.styles.js.map +1 -1
  333. package/dist/components/navigation/menu-bar/menu-bar.styles.d.ts.map +1 -1
  334. package/dist/components/navigation/menu-bar/menu-bar.styles.js +4 -1
  335. package/dist/components/navigation/menu-bar/menu-bar.styles.js.map +1 -1
  336. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
  337. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +4 -1
  338. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
  339. package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
  340. package/dist/components/navigation/pagination/pagination.styles.js +4 -1
  341. package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
  342. package/dist/components/navigation/skip-link/skip-link.styles.d.ts.map +1 -1
  343. package/dist/components/navigation/skip-link/skip-link.styles.js +4 -1
  344. package/dist/components/navigation/skip-link/skip-link.styles.js.map +1 -1
  345. package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
  346. package/dist/components/navigation/tab-bar/tab-bar.styles.js +4 -1
  347. package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
  348. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts +5 -0
  349. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts.map +1 -1
  350. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +17 -0
  351. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
  352. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
  353. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +32 -16
  354. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
  355. package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
  356. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +4 -1
  357. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
  358. package/dist/components/{prism-python-Tr_Ff1KJ.js → prism-python--N285k7w.js} +1 -1
  359. package/dist/components/{prism-rust-CxUpjfK5.js → prism-rust-Cnm1tSdo.js} +1 -1
  360. package/dist/components/{prism-typescript-zaF4YQWN.js → prism-typescript-BPJAiB1s.js} +1 -1
  361. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.d.ts.map +1 -1
  362. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +4 -1
  363. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js.map +1 -1
  364. package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
  365. package/dist/components/status-and-feedback/badge/badge.styles.js +4 -1
  366. package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
  367. package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map +1 -1
  368. package/dist/components/status-and-feedback/banner/banner.styles.js +4 -1
  369. package/dist/components/status-and-feedback/banner/banner.styles.js.map +1 -1
  370. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
  371. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +4 -1
  372. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
  373. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts +5 -4
  374. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts.map +1 -1
  375. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +5 -5
  376. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -1
  377. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.d.ts.map +1 -1
  378. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js +5 -2
  379. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js.map +1 -1
  380. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map +1 -1
  381. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +4 -1
  382. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map +1 -1
  383. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
  384. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +4 -1
  385. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
  386. package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.d.ts.map +1 -1
  387. package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +4 -1
  388. package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js.map +1 -1
  389. package/dist/components/status-and-feedback/status-bar/status-bar.styles.d.ts.map +1 -1
  390. package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +4 -1
  391. package/dist/components/status-and-feedback/status-bar/status-bar.styles.js.map +1 -1
  392. package/dist/css/rich-text.css +63 -0
  393. package/dist/css/settings.css +10 -3
  394. package/package.json +5 -1
  395. package/dist/assets/styles/slotted-reset.d.ts.map +0 -1
  396. package/dist/assets/styles/slotted-reset.fixtures.d.ts.map +0 -1
  397. package/dist/assets/styles/slotted-reset.fixtures.js.map +0 -1
  398. package/dist/assets/styles/slotted-reset.js.map +0 -1
@@ -0,0 +1,119 @@
1
+ /**
2
+ * Nederlandse Digitale Dienst Sidebar Section Component (Lit + TypeScript)
3
+ *
4
+ * A page section with a left sidebar alongside the main content.
5
+ *
6
+ * - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable
7
+ * tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets
8
+ * default to 16px; override with `sticky-top` / `sticky-bottom` so it clears
9
+ * other sticky page elements (e.g. a sticky header).
10
+ * - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on
11
+ * md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed`
12
+ * attribute. The consumer owns the trigger: place
13
+ * any chrome (a button, a chosen-filters bar, …) wherever you want, show it only
14
+ * while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by
15
+ * reading `collapsed` / listening to `collapse-change`), and call `show()` /
16
+ * `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events.
17
+ * The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a
18
+ * "Sluit" button — overridable via the `sheet-top-title-bar` slot.
19
+ *
20
+ * The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the
21
+ * box (expanded) and the sheet (collapsed) so there is a single, never-duplicated
22
+ * copy — the light DOM (and its state) is preserved across the switch.
23
+ *
24
+ * The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the
25
+ * host), not the viewport — so a sidebar-section in a narrow column or a split-view
26
+ * pane collapses to the sheet just like one in a narrow viewport, and the sidebar
27
+ * never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow
28
+ * section then stacks the sidebar (full-width) above the main instead of using a sheet.
29
+ *
30
+ * Inherits block `padding` and `height` from PageSectionMixin.
31
+ *
32
+ * @element nldd-sidebar-section
33
+ *
34
+ * @slot - Main content
35
+ * @slot sidebar - Sidebar content (sticky box when expanded, a left/bottom sheet when
36
+ * collapsed). The box and the sheet add no padding of their own — wrap
37
+ * the content in a padded container (e.g. nldd-container) for inset spacing.
38
+ * @slot sheet-top-title-bar - Replaces the sheet's default title bar (when collapsed). Empty falls back to an
39
+ * `nldd-top-title-bar` with the `sidebar-label` as title and a "Sluit" button.
40
+ * @slot header - Content above the columns
41
+ * @slot footer - Content below the columns
42
+ *
43
+ * @attr {boolean} [collapsed] - Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome.
44
+ * @attr {boolean} [no-collapse] - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
45
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
46
+ * @attr {string} [sticky-top] - Sticky top inset on lg (CSS length; default = 16px).
47
+ * @attr {string} [sticky-bottom]- Sticky bottom inset on lg (CSS length; default = 16px).
48
+ * @attr {string} [sidebar-label]- Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
49
+ *
50
+ * @fires open - The sidebar sheet opened.
51
+ * @fires close - The sidebar sheet closed.
52
+ * @fires collapse-change - The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`.
53
+ *
54
+ * @method show() - Opens the sidebar sheet (collapsed only; no-op on lg).
55
+ * @method hide() - Closes the sidebar sheet.
56
+ * @method toggle() - Opens or closes the sidebar sheet (collapsed only).
57
+ */
58
+ import { LitElement, type PropertyValues } from 'lit';
59
+ import '../../sheet/sheet.js';
60
+ import '../../page/page.js';
61
+ import '../../../navigation/top-title-bar/top-title-bar.js';
62
+ declare const NLDDSidebarSection_base: typeof LitElement & (new (...args: any[]) => LitElement & {
63
+ background: import("../../../../utilities/page-section-mixin.js").PageSectionBackground;
64
+ scheme: import("../../../../utilities/page-section-mixin.js").PageSectionScheme;
65
+ paddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
66
+ paddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
67
+ paddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
68
+ smPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
69
+ smPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
70
+ smPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
71
+ mdPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
72
+ mdPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
73
+ mdPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
74
+ lgPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
75
+ lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
76
+ lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
77
+ height?: string;
78
+ _onSlotChange(e: Event): void;
79
+ });
80
+ export declare class NLDDSidebarSection extends NLDDSidebarSection_base {
81
+ static styles: import("lit").CSSResult;
82
+ width: string;
83
+ stickyTop: string;
84
+ stickyBottom: string;
85
+ sidebarLabel: string;
86
+ noCollapse: boolean;
87
+ collapsed: boolean;
88
+ private _sheet?;
89
+ private _ro?;
90
+ private readonly _lgMin;
91
+ private _hasMeasured;
92
+ private _sheetOpen;
93
+ get _resolvedSidebarLabel(): string;
94
+ /** Dismiss-button label for the sheet's default title bar (i18n). */
95
+ get _sheetDismissText(): string;
96
+ connectedCallback(): void;
97
+ disconnectedCallback(): void;
98
+ firstUpdated(): void;
99
+ private _onResize;
100
+ private _applyCollapsed;
101
+ updated(changed: PropertyValues): void;
102
+ private _applyInset;
103
+ /** Opens the sidebar sheet. No-op on lg, where the sidebar is always visible. */
104
+ show(): void;
105
+ /** Closes the sidebar sheet. */
106
+ hide(): void;
107
+ /** Opens or closes the sidebar sheet. No-op on lg. */
108
+ toggle(): void;
109
+ _onSheetOpen: () => void;
110
+ _onSheetClose: () => void;
111
+ render(): import("lit-html").TemplateResult;
112
+ }
113
+ declare global {
114
+ interface HTMLElementTagNameMap {
115
+ 'nldd-sidebar-section': NLDDSidebarSection;
116
+ }
117
+ }
118
+ export {};
119
+ //# sourceMappingURL=sidebar-section.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oDAAoD,CAAC;;;;;;;;;;;;;;;;;;;AAG5D,qBACa,kBAAmB,SAAQ,uBAA4B;IACnE,OAAgB,MAAM,0BAAwB;IAG9C,KAAK,SAAM;IAGX,SAAS,SAAM;IAGf,YAAY,SAAM;IAGlB,YAAY,SAAM;IAGlB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,OAAO,CAAC,MAAM,CAAC,CAAY;IAE3B,OAAO,CAAC,GAAG,CAAC,CAAiB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,qEAAqE;IACrE,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAEQ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAM7B,OAAO,CAAC,SAAS,CAOf;IAEF,OAAO,CAAC,eAAe;IAcd,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,OAAO,CAAC,WAAW;IAQnB,iFAAiF;IACjF,IAAI,IAAI,IAAI;IAKZ,gCAAgC;IAChC,IAAI,IAAI,IAAI;IAIZ,sDAAsD;IACtD,MAAM,IAAI,IAAI;IAQd,YAAY,QAAO,IAAI,CAAgC;IACvD,aAAa,QAAO,IAAI,CAAiC;IAEhD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}
@@ -0,0 +1,6 @@
1
+ export declare const nlddSidebarSectionTranslations: {
2
+ 'components.sidebar-section.sidebar-label': string;
3
+ 'components.sidebar-section.sheet-dismiss-action': string;
4
+ };
5
+ export type NLDDSidebarSectionTranslations = typeof nlddSidebarSectionTranslations;
6
+ //# sourceMappingURL=sidebar-section.i18n.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.i18n.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B;;;CAG1C,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,OAAO,8BAA8B,CAAC"}
@@ -0,0 +1,5 @@
1
+ export const nlddSidebarSectionTranslations = {
2
+ 'components.sidebar-section.sidebar-label': 'Zijbalk',
3
+ 'components.sidebar-section.sheet-dismiss-action': 'Sluit',
4
+ };
5
+ //# sourceMappingURL=sidebar-section.i18n.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.i18n.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC7C,0CAA0C,EAAE,SAAS;IACrD,iDAAiD,EAAE,OAAO;CAC1D,CAAC"}
@@ -0,0 +1,219 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ /**
8
+ * Nederlandse Digitale Dienst Sidebar Section Component (Lit + TypeScript)
9
+ *
10
+ * A page section with a left sidebar alongside the main content.
11
+ *
12
+ * - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable
13
+ * tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets
14
+ * default to 16px; override with `sticky-top` / `sticky-bottom` so it clears
15
+ * other sticky page elements (e.g. a sticky header).
16
+ * - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on
17
+ * md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed`
18
+ * attribute. The consumer owns the trigger: place
19
+ * any chrome (a button, a chosen-filters bar, …) wherever you want, show it only
20
+ * while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by
21
+ * reading `collapsed` / listening to `collapse-change`), and call `show()` /
22
+ * `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events.
23
+ * The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a
24
+ * "Sluit" button — overridable via the `sheet-top-title-bar` slot.
25
+ *
26
+ * The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the
27
+ * box (expanded) and the sheet (collapsed) so there is a single, never-duplicated
28
+ * copy — the light DOM (and its state) is preserved across the switch.
29
+ *
30
+ * The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the
31
+ * host), not the viewport — so a sidebar-section in a narrow column or a split-view
32
+ * pane collapses to the sheet just like one in a narrow viewport, and the sidebar
33
+ * never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow
34
+ * section then stacks the sidebar (full-width) above the main instead of using a sheet.
35
+ *
36
+ * Inherits block `padding` and `height` from PageSectionMixin.
37
+ *
38
+ * @element nldd-sidebar-section
39
+ *
40
+ * @slot - Main content
41
+ * @slot sidebar - Sidebar content (sticky box when expanded, a left/bottom sheet when
42
+ * collapsed). The box and the sheet add no padding of their own — wrap
43
+ * the content in a padded container (e.g. nldd-container) for inset spacing.
44
+ * @slot sheet-top-title-bar - Replaces the sheet's default title bar (when collapsed). Empty falls back to an
45
+ * `nldd-top-title-bar` with the `sidebar-label` as title and a "Sluit" button.
46
+ * @slot header - Content above the columns
47
+ * @slot footer - Content below the columns
48
+ *
49
+ * @attr {boolean} [collapsed] - Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome.
50
+ * @attr {boolean} [no-collapse] - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
51
+ * @attr {string} [width] - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
52
+ * @attr {string} [sticky-top] - Sticky top inset on lg (CSS length; default = 16px).
53
+ * @attr {string} [sticky-bottom]- Sticky bottom inset on lg (CSS length; default = 16px).
54
+ * @attr {string} [sidebar-label]- Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
55
+ *
56
+ * @fires open - The sidebar sheet opened.
57
+ * @fires close - The sidebar sheet closed.
58
+ * @fires collapse-change - The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`.
59
+ *
60
+ * @method show() - Opens the sidebar sheet (collapsed only; no-op on lg).
61
+ * @method hide() - Closes the sidebar sheet.
62
+ * @method toggle() - Opens or closes the sidebar sheet (collapsed only).
63
+ */
64
+ import { LitElement } from 'lit';
65
+ import { customElement, property, query } from 'lit/decorators.js';
66
+ import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
67
+ import { breakpoints } from '../../../../assets/styles/breakpoints.js';
68
+ import { sidebarSectionStyles } from './sidebar-section.styles.js';
69
+ import { sidebarSectionTemplate } from './sidebar-section.template.js';
70
+ import { nlddSidebarSectionTranslations } from './sidebar-section.i18n.js';
71
+ import '../../sheet/sheet.js';
72
+ import '../../page/page.js';
73
+ import '../../../navigation/top-title-bar/top-title-bar.js';
74
+ let NLDDSidebarSection = class NLDDSidebarSection extends PageSectionMixin(LitElement) {
75
+ constructor() {
76
+ super(...arguments);
77
+ this.width = '';
78
+ this.stickyTop = '';
79
+ this.stickyBottom = '';
80
+ this.sidebarLabel = '';
81
+ this.noCollapse = false;
82
+ this.collapsed = false;
83
+ this._lgMin = parseInt(breakpoints.lgMin, 10);
84
+ this._hasMeasured = false;
85
+ this._sheetOpen = false;
86
+ this._onResize = (entries) => {
87
+ const entry = entries[0];
88
+ const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
89
+ // The first delivery is the initial measurement, not a breakpoint crossing.
90
+ const announce = this._hasMeasured;
91
+ this._hasMeasured = true;
92
+ this._applyCollapsed(width, announce);
93
+ };
94
+ // Track open state for toggle(); the open/close events still bubble out to the
95
+ // consumer (for aria-expanded) — these handlers don't stop them.
96
+ this._onSheetOpen = () => { this._sheetOpen = true; };
97
+ this._onSheetClose = () => { this._sheetOpen = false; };
98
+ }
99
+ get _resolvedSidebarLabel() {
100
+ return this.sidebarLabel || nlddSidebarSectionTranslations['components.sidebar-section.sidebar-label'];
101
+ }
102
+ /** Dismiss-button label for the sheet's default title bar (i18n). */
103
+ get _sheetDismissText() {
104
+ return nlddSidebarSectionTranslations['components.sidebar-section.sheet-dismiss-action'];
105
+ }
106
+ connectedCallback() {
107
+ super.connectedCallback();
108
+ // Collapse on the section's OWN width, not the viewport, so it adapts to
109
+ // whatever space it's placed in (a narrow column, a split-view pane, …).
110
+ this._ro = new ResizeObserver(this._onResize);
111
+ this._ro.observe(this);
112
+ }
113
+ disconnectedCallback() {
114
+ super.disconnectedCallback();
115
+ this._ro?.disconnect();
116
+ this._ro = undefined;
117
+ this._hasMeasured = false;
118
+ }
119
+ firstUpdated() {
120
+ // Seed the collapsed state from the rendered width before the first paint,
121
+ // so there's no flash of the wrong layout; the ResizeObserver owns it after.
122
+ this._applyCollapsed(this.clientWidth, false);
123
+ }
124
+ _applyCollapsed(width, announce) {
125
+ // no-collapse opts out of the sheet entirely — the sidebar stacks instead.
126
+ const next = width < this._lgMin && !this.noCollapse;
127
+ if (next === this.collapsed)
128
+ return;
129
+ this.collapsed = next;
130
+ if (announce) {
131
+ this.dispatchEvent(new CustomEvent('collapse-change', {
132
+ detail: { collapsed: next },
133
+ bubbles: true,
134
+ composed: true,
135
+ }));
136
+ }
137
+ }
138
+ updated(changed) {
139
+ super.updated(changed);
140
+ if (changed.has('width')) {
141
+ const w = this.width;
142
+ // 'full' is handled by CSS (--_max-width: none); CSS lengths feed the var.
143
+ if (w && w !== 'full' && CSS.supports('max-width', w)) {
144
+ this.style.setProperty('--_max-width', w);
145
+ }
146
+ else {
147
+ this.style.removeProperty('--_max-width');
148
+ }
149
+ }
150
+ if (changed.has('stickyTop'))
151
+ this._applyInset('--_sticky-top', this.stickyTop);
152
+ if (changed.has('stickyBottom'))
153
+ this._applyInset('--_sticky-bottom', this.stickyBottom);
154
+ // Toggling no-collapse flips whether a narrow section collapses — re-evaluate.
155
+ if (changed.has('noCollapse'))
156
+ this._applyCollapsed(this.clientWidth, false);
157
+ // Expanding to the box (lg) moves the sidebar slot out of the sheet, so close
158
+ // any open sheet rather than leave an empty modal behind.
159
+ if (changed.has('collapsed') && !this.collapsed)
160
+ this._sheet?.hide();
161
+ }
162
+ _applyInset(name, value) {
163
+ if (value && CSS.supports('top', value)) {
164
+ this.style.setProperty(name, value);
165
+ }
166
+ else {
167
+ this.style.removeProperty(name);
168
+ }
169
+ }
170
+ /** Opens the sidebar sheet. No-op on lg, where the sidebar is always visible. */
171
+ show() {
172
+ if (!this.collapsed)
173
+ return;
174
+ this._sheet?.show();
175
+ }
176
+ /** Closes the sidebar sheet. */
177
+ hide() {
178
+ this._sheet?.hide();
179
+ }
180
+ /** Opens or closes the sidebar sheet. No-op on lg. */
181
+ toggle() {
182
+ if (!this.collapsed)
183
+ return;
184
+ if (this._sheetOpen)
185
+ this._sheet?.hide();
186
+ else
187
+ this._sheet?.show();
188
+ }
189
+ render() {
190
+ return sidebarSectionTemplate(this);
191
+ }
192
+ };
193
+ NLDDSidebarSection.styles = sidebarSectionStyles;
194
+ __decorate([
195
+ property({ type: String, reflect: true })
196
+ ], NLDDSidebarSection.prototype, "width", void 0);
197
+ __decorate([
198
+ property({ type: String, reflect: true, attribute: 'sticky-top' })
199
+ ], NLDDSidebarSection.prototype, "stickyTop", void 0);
200
+ __decorate([
201
+ property({ type: String, reflect: true, attribute: 'sticky-bottom' })
202
+ ], NLDDSidebarSection.prototype, "stickyBottom", void 0);
203
+ __decorate([
204
+ property({ type: String, attribute: 'sidebar-label' })
205
+ ], NLDDSidebarSection.prototype, "sidebarLabel", void 0);
206
+ __decorate([
207
+ property({ type: Boolean, reflect: true, attribute: 'no-collapse' })
208
+ ], NLDDSidebarSection.prototype, "noCollapse", void 0);
209
+ __decorate([
210
+ property({ type: Boolean, reflect: true })
211
+ ], NLDDSidebarSection.prototype, "collapsed", void 0);
212
+ __decorate([
213
+ query('.sidebar-section__sheet')
214
+ ], NLDDSidebarSection.prototype, "_sheet", void 0);
215
+ NLDDSidebarSection = __decorate([
216
+ customElement('nldd-sidebar-section')
217
+ ], NLDDSidebarSection);
218
+ export { NLDDSidebarSection };
219
+ //# sourceMappingURL=sidebar-section.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export declare const sidebarSectionStyles: import("lit").CSSResult;
2
+ //# sourceMappingURL=sidebar-section.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,yBAqJhC,CAAC"}
@@ -0,0 +1,157 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ import { breakpoints } from '../../../../assets/styles/breakpoints.js';
3
+ const smMax = unsafeCSS(breakpoints.smMax);
4
+ const mdMin = unsafeCSS(breakpoints.mdMin);
5
+ const mdMax = unsafeCSS(breakpoints.mdMax);
6
+ const lgMin = unsafeCSS(breakpoints.lgMin);
7
+ export const sidebarSectionStyles = css `
8
+ :host {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+
13
+ /* # Host
14
+
15
+ Container queries on the section's OWN width (not the viewport): the row
16
+ <-> stacked switch and the padding follow the space the section is given.
17
+ The collapse-to-sheet is JS-driven — a ResizeObserver on the host sets
18
+ [collapsed] (see the .ts) — and only happens when the section is narrow AND
19
+ not [no-collapse]; the lg breakpoint (>= ${lgMin}) is the switch. */
20
+
21
+ :host {
22
+ container-type: inline-size;
23
+ /* Block-padding overrides from PageSectionMixin; resolved per breakpoint
24
+ below (scope override -> base override -> responsive default). */
25
+ --_padding-top: initial;
26
+ --_padding-bottom: initial;
27
+ --_sm-padding-top: initial;
28
+ --_sm-padding-bottom: initial;
29
+ --_md-padding-top: initial;
30
+ --_md-padding-bottom: initial;
31
+ --_lg-padding-top: initial;
32
+ --_lg-padding-bottom: initial;
33
+ --_max-width: var(--semantics-page-sections-body-max-width);
34
+ /* Sticky insets default to 16px top and bottom; override via sticky-top /
35
+ sticky-bottom to clear other sticky page elements (e.g. a sticky header). */
36
+ --_sticky-top: var(--primitives-space-16);
37
+ --_sticky-bottom: var(--primitives-space-16);
38
+ --_sidebar-width: var(--primitives-area-320);
39
+
40
+ display: flex;
41
+ width: 100%;
42
+ flex-direction: column;
43
+ align-items: center;
44
+ }
45
+
46
+ :host([hidden]) {
47
+ display: none;
48
+ }
49
+
50
+ :host([width="full"]) {
51
+ --_max-width: none;
52
+ }
53
+
54
+
55
+ /* # Block */
56
+
57
+ .sidebar-section {
58
+ box-sizing: border-box;
59
+ display: flex;
60
+ width: 100%;
61
+ flex-direction: column;
62
+ align-items: center;
63
+
64
+ @container (max-width: ${smMax}) {
65
+ padding-inline: var(--semantics-page-sections-sm-margin-inline);
66
+ padding-top: var(--_sm-padding-top, var(--_padding-top, var(--semantics-page-sections-sm-margin-block)));
67
+ padding-bottom: var(--_sm-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-sm-margin-block)));
68
+ }
69
+
70
+ @container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
71
+ padding-inline: var(--semantics-page-sections-md-margin-inline);
72
+ padding-top: var(--_md-padding-top, var(--_padding-top, var(--semantics-page-sections-md-margin-block)));
73
+ padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
74
+ }
75
+
76
+ @container (min-width: ${lgMin}) {
77
+ padding-inline: var(--semantics-page-sections-lg-margin-inline);
78
+ padding-top: var(--_lg-padding-top, var(--_padding-top, var(--semantics-page-sections-lg-margin-block)));
79
+ padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
80
+ }
81
+ }
82
+
83
+
84
+ /* # Body */
85
+
86
+ .sidebar-section__body {
87
+ display: flex;
88
+ width: 100%;
89
+ max-width: var(--_max-width);
90
+ flex-direction: column;
91
+
92
+ @container (max-width: ${smMax}) { gap: var(--semantics-page-sections-sm-gap); }
93
+ @container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--semantics-page-sections-md-gap); }
94
+ @container (min-width: ${lgMin}) { gap: var(--semantics-page-sections-lg-gap); }
95
+ }
96
+
97
+ .sidebar-section__header[hidden],
98
+ .sidebar-section__footer[hidden] {
99
+ display: none;
100
+ }
101
+
102
+
103
+ /* # Columns — stacked (column) by default, two columns (row) when the section
104
+ is wide. Pure width switch, like the other page-sections. When collapsed the
105
+ aside is removed in JS (it moves to the sheet), so only the main remains;
106
+ with [no-collapse] the aside stays and this is the stacked fallback. */
107
+
108
+ .sidebar-section__columns {
109
+ display: flex;
110
+ flex-direction: column;
111
+
112
+ @container (max-width: ${smMax}) { gap: var(--semantics-page-sections-sm-gap); }
113
+ @container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--semantics-page-sections-md-gap); }
114
+ @container (min-width: ${lgMin}) {
115
+ flex-direction: row;
116
+ gap: var(--semantics-page-sections-lg-gap);
117
+ }
118
+ }
119
+
120
+ .sidebar-section__main {
121
+ min-width: 0;
122
+ flex-grow: 1;
123
+ }
124
+
125
+
126
+ /* # Sidebar — full-width when stacked (narrow, [no-collapse]); a fixed-width
127
+ column beside the main when wide. */
128
+
129
+ .sidebar-section__sidebar {
130
+ flex-shrink: 0;
131
+
132
+ @container (min-width: ${lgMin}) {
133
+ width: var(--_sidebar-width);
134
+ max-width: var(--_sidebar-width);
135
+ }
136
+ }
137
+
138
+ /* # Box — tinted always. Sticky + scrollable only beside the main (wide); when
139
+ stacked it's a plain full-width tinted box above the main, so no sticky (which
140
+ would scroll over the main) and no viewport height cap. */
141
+
142
+ .sidebar-section__sidebar-box {
143
+ box-sizing: border-box;
144
+ border-radius: var(--components-sidebar-section-sidebar-box-corner-radius);
145
+ background-color: var(--components-sidebar-section-sidebar-box-background-color);
146
+ box-shadow: inset 0 0 0 1px var(--components-sidebar-section-sidebar-box-highlight-border-color);
147
+
148
+ @container (min-width: ${lgMin}) {
149
+ position: sticky;
150
+ top: var(--_sticky-top);
151
+ bottom: var(--_sticky-bottom);
152
+ max-height: calc(100dvh - var(--_sticky-top) - var(--_sticky-bottom));
153
+ overflow-y: auto;
154
+ }
155
+ }
156
+ `;
157
+ //# sourceMappingURL=sidebar-section.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;+CAYQ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6CzB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;CAQ/B,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { type TemplateResult } from 'lit';
2
+ import type { NLDDSidebarSection } from './sidebar-section.js';
3
+ export declare function sidebarSectionTemplate(component: NLDDSidebarSection): TemplateResult;
4
+ //# sourceMappingURL=sidebar-section.template.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,GAAG,cAAc,CAsDpF"}
@@ -0,0 +1,57 @@
1
+ import { html, nothing } from 'lit';
2
+ export function sidebarSectionTemplate(component) {
3
+ const collapsed = component.collapsed;
4
+ const sidebarLabel = component._resolvedSidebarLabel;
5
+ return html `
6
+ <section class="sidebar-section">
7
+ <div class="sidebar-section__body">
8
+ <header class="sidebar-section__header"
9
+ hidden
10
+ >
11
+ <slot name="header" @slotchange=${component._onSlotChange}></slot>
12
+ </header>
13
+ <div class="sidebar-section__columns">
14
+ ${!collapsed ? html `
15
+ <aside class="sidebar-section__sidebar"
16
+ aria-label=${sidebarLabel}
17
+ >
18
+ <div class="sidebar-section__sidebar-box">
19
+ <slot name="sidebar"></slot>
20
+ </div>
21
+ </aside>
22
+ ` : nothing}
23
+ <div class="sidebar-section__main">
24
+ <slot></slot>
25
+ </div>
26
+ </div>
27
+ <footer class="sidebar-section__footer"
28
+ hidden
29
+ >
30
+ <slot name="footer" @slotchange=${component._onSlotChange}></slot>
31
+ </footer>
32
+ </div>
33
+ </section>
34
+ <nldd-sheet class="sidebar-section__sheet"
35
+ placement="left"
36
+ accessible-label=${sidebarLabel}
37
+ @open=${component._onSheetOpen}
38
+ @close=${component._onSheetClose}
39
+ >
40
+ ${collapsed ? html `
41
+ <nldd-page sticky-header>
42
+ <slot
43
+ name="sheet-top-title-bar"
44
+ slot="header"
45
+ >
46
+ <nldd-top-title-bar
47
+ text=${sidebarLabel}
48
+ dismiss-text=${component._sheetDismissText}
49
+ ></nldd-top-title-bar>
50
+ </slot>
51
+ <slot name="sidebar"></slot>
52
+ </nldd-page>
53
+ ` : nothing}
54
+ </nldd-sheet>
55
+ `;
56
+ }
57
+ //# sourceMappingURL=sidebar-section.template.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,sBAAsB,CAAC,SAA6B;IACnE,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC;IACtC,MAAM,YAAY,GAAG,SAAS,CAAC,qBAAqB,CAAC;IACrD,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;OAGvD,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;oBAEJ,YAAY;;;;;;MAM1B,CAAC,CAAC,CAAC,OAAO;;;;;;;;uCAQuB,SAAS,CAAC,aAAa;;;;;;sBAMxC,YAAY;WACvB,SAAS,CAAC,YAAY;YACrB,SAAS,CAAC,aAAa;;KAE9B,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;cAOP,YAAY;sBACJ,SAAS,CAAC,iBAAiB;;;;;IAK7C,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBA0G/B,CAAC"}
1
+ {"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBA6G/B,CAAC"}
@@ -5,6 +5,9 @@ const mdMin = unsafeCSS(breakpoints.mdMin);
5
5
  const mdMax = unsafeCSS(breakpoints.mdMax);
6
6
  const lgMin = unsafeCSS(breakpoints.lgMin);
7
7
  export const simpleSectionStyles = css `
8
+ :host {
9
+ box-sizing: border-box;
10
+ }
8
11
 
9
12
 
10
13
  /* # Host */
@@ -1 +1 @@
1
- {"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmDX,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
1
+ {"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAsDX,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAiI1C,CAAC"}
1
+ {"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAoI1C,CAAC"}