@carbon/web-components 2.53.0 → 2.54.0

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 (552) hide show
  1. package/custom-elements.json +784 -110
  2. package/es/components/ai-label/ai-label.scss.js +1 -1
  3. package/es/components/breadcrumb/breadcrumb.scss.js +1 -1
  4. package/es/components/button/button.scss.js +1 -1
  5. package/es/components/checkbox/checkbox.scss.js +1 -1
  6. package/es/components/code-snippet/code-snippet.scss.js +1 -1
  7. package/es/components/combo-box/combo-box.scss.js +1 -1
  8. package/es/components/combo-button/combo-button.scss.js +1 -1
  9. package/es/components/contained-list/contained-list.scss.js +1 -1
  10. package/es/components/content-switcher/content-switcher.scss.js +1 -1
  11. package/es/components/copy-button/copy-button.scss.js +1 -1
  12. package/es/components/data-table/data-table.scss.js +1 -1
  13. package/es/components/data-table/table-toolbar-search.d.ts +3 -3
  14. package/es/components/data-table/table-toolbar-search.d.ts.map +1 -1
  15. package/es/components/data-table/table-toolbar-search.js +2 -3
  16. package/es/components/data-table/table-toolbar-search.js.map +1 -1
  17. package/es/components/date-picker/date-picker.d.ts +4 -0
  18. package/es/components/date-picker/date-picker.d.ts.map +1 -1
  19. package/es/components/date-picker/date-picker.js +5 -1
  20. package/es/components/date-picker/date-picker.js.map +1 -1
  21. package/es/components/date-picker/date-picker.scss.js +1 -1
  22. package/es/components/date-picker/fix-events-plugin.d.ts.map +1 -1
  23. package/es/components/date-picker/fix-events-plugin.js +0 -6
  24. package/es/components/date-picker/fix-events-plugin.js.map +1 -1
  25. package/es/components/date-picker/range-plugin.d.ts +2 -8
  26. package/es/components/date-picker/range-plugin.d.ts.map +1 -1
  27. package/es/components/date-picker/range-plugin.js +3 -9
  28. package/es/components/date-picker/range-plugin.js.map +1 -1
  29. package/es/components/dialog/dialog.scss.js +1 -1
  30. package/es/components/dropdown/dropdown.d.ts +3 -2
  31. package/es/components/dropdown/dropdown.d.ts.map +1 -1
  32. package/es/components/dropdown/dropdown.js +9 -2
  33. package/es/components/dropdown/dropdown.js.map +1 -1
  34. package/es/components/dropdown/dropdown.scss.js +1 -1
  35. package/es/components/feature-flags/index.js +1 -1
  36. package/es/components/file-uploader/file-uploader.scss.js +1 -1
  37. package/es/components/fluid-combo-box/fluid-combo-box-skeleton.d.ts +18 -0
  38. package/es/components/fluid-combo-box/fluid-combo-box-skeleton.d.ts.map +1 -0
  39. package/es/components/fluid-combo-box/fluid-combo-box-skeleton.js +45 -0
  40. package/es/components/fluid-combo-box/fluid-combo-box-skeleton.js.map +1 -0
  41. package/es/components/fluid-combo-box/fluid-combo-box.d.ts +23 -0
  42. package/es/components/fluid-combo-box/fluid-combo-box.d.ts.map +1 -0
  43. package/es/components/fluid-combo-box/fluid-combo-box.js +53 -0
  44. package/es/components/fluid-combo-box/fluid-combo-box.js.map +1 -0
  45. package/es/components/fluid-combo-box/fluid-combo-box.scss.js +14 -0
  46. package/es/components/fluid-combo-box/fluid-combo-box.scss.js.map +1 -0
  47. package/es/components/fluid-combo-box/index.d.ts +9 -0
  48. package/es/components/fluid-combo-box/index.d.ts.map +1 -0
  49. package/es/components/fluid-combo-box/index.js +9 -0
  50. package/es/components/fluid-dropdown/fluid-dropdown.scss.js +1 -1
  51. package/es/components/fluid-form/fluid-form.d.ts +19 -0
  52. package/es/components/fluid-form/fluid-form.d.ts.map +1 -0
  53. package/es/components/fluid-form/fluid-form.js +44 -0
  54. package/es/components/fluid-form/fluid-form.js.map +1 -0
  55. package/es/components/fluid-form/fluid-form.scss.js +14 -0
  56. package/es/components/fluid-form/fluid-form.scss.js.map +1 -0
  57. package/es/components/fluid-form/index.d.ts +8 -0
  58. package/es/components/fluid-form/index.d.ts.map +1 -0
  59. package/es/components/fluid-form/index.js +8 -0
  60. package/es/components/fluid-multi-select/fluid-multi-select.scss.js +1 -1
  61. package/es/components/fluid-number-input/fluid-number-input.scss.js +1 -1
  62. package/es/components/fluid-number-input/fluid-number-input.scss.js.map +1 -1
  63. package/es/components/fluid-password-input/fluid-password-input.scss.js +1 -1
  64. package/es/components/fluid-password-input/fluid-password-input.scss.js.map +1 -1
  65. package/es/components/fluid-search/fluid-search.scss.js +1 -1
  66. package/es/components/fluid-select/fluid-select.scss.js +1 -1
  67. package/es/components/fluid-select/fluid-select.scss.js.map +1 -1
  68. package/es/components/fluid-text-input/fluid-text-input.scss.js +1 -1
  69. package/es/components/fluid-text-input/fluid-text-input.scss.js.map +1 -1
  70. package/es/components/fluid-textarea/fluid-textarea.scss.js +1 -1
  71. package/es/components/fluid-textarea/fluid-textarea.scss.js.map +1 -1
  72. package/es/components/fluid-time-picker/fluid-time-picker.scss.js +1 -1
  73. package/es/components/form/form-item.scss.js +1 -1
  74. package/es/components/form/form.scss.js +1 -1
  75. package/es/components/form-group/form-group.scss.js +1 -1
  76. package/es/components/grid/column-hang.scss.js +1 -1
  77. package/es/components/grid/grid.d.ts +5 -0
  78. package/es/components/grid/grid.d.ts.map +1 -1
  79. package/es/components/grid/grid.js +11 -1
  80. package/es/components/grid/grid.js.map +1 -1
  81. package/es/components/grid/grid.scss.js +1 -1
  82. package/es/components/grid/grid.scss.js.map +1 -1
  83. package/es/components/icon/icon.d.ts +1 -1
  84. package/es/components/menu/menu-item.d.ts +1 -0
  85. package/es/components/menu/menu-item.d.ts.map +1 -1
  86. package/es/components/menu/menu-item.js +5 -0
  87. package/es/components/menu/menu-item.js.map +1 -1
  88. package/es/components/menu/menu-item.scss.js +1 -1
  89. package/es/components/menu/menu-item.scss.js.map +1 -1
  90. package/es/components/menu-button/menu-button.d.ts.map +1 -1
  91. package/es/components/menu-button/menu-button.js +0 -1
  92. package/es/components/menu-button/menu-button.js.map +1 -1
  93. package/es/components/menu-button/menu-button.scss.js +1 -1
  94. package/es/components/modal/modal.scss.js +1 -1
  95. package/es/components/modal/modal.scss.js.map +1 -1
  96. package/es/components/multi-select/multi-select.d.ts +38 -4
  97. package/es/components/multi-select/multi-select.d.ts.map +1 -1
  98. package/es/components/multi-select/multi-select.js +30 -27
  99. package/es/components/multi-select/multi-select.js.map +1 -1
  100. package/es/components/multi-select/multi-select.scss.js +1 -1
  101. package/es/components/notification/actionable-notification.d.ts +1 -1
  102. package/es/components/notification/actionable-notification.scss.js +1 -1
  103. package/es/components/notification/callout-notification.d.ts +1 -1
  104. package/es/components/notification/inline-notification.d.ts +1 -1
  105. package/es/components/notification/inline-notification.scss.js +1 -1
  106. package/es/components/notification/toast-notification.scss.js +1 -1
  107. package/es/components/number-input/number-input.scss.js +1 -1
  108. package/es/components/overflow-menu/overflow-menu.scss.js +1 -1
  109. package/es/components/page-header/page-header.scss.js +1 -1
  110. package/es/components/pagination/defs.d.ts +25 -0
  111. package/es/components/pagination/defs.d.ts.map +1 -1
  112. package/es/components/pagination/defs.js +27 -1
  113. package/es/components/pagination/defs.js.map +1 -1
  114. package/es/components/pagination/pagination.d.ts +9 -1
  115. package/es/components/pagination/pagination.d.ts.map +1 -1
  116. package/es/components/pagination/pagination.js +7 -2
  117. package/es/components/pagination/pagination.js.map +1 -1
  118. package/es/components/pagination/pagination.scss.js +1 -1
  119. package/es/components/pagination/pagination.scss.js.map +1 -1
  120. package/es/components/pagination-nav/pagination-nav.scss.js +1 -1
  121. package/es/components/password-input/defs.d.ts +5 -1
  122. package/es/components/password-input/defs.d.ts.map +1 -1
  123. package/es/components/password-input/defs.js +4 -0
  124. package/es/components/password-input/defs.js.map +1 -1
  125. package/es/components/password-input/password-input.d.ts +1 -1
  126. package/es/components/password-input/password-input.d.ts.map +1 -1
  127. package/es/components/password-input/password-input.js +15 -15
  128. package/es/components/password-input/password-input.js.map +1 -1
  129. package/es/components/password-input/password-input.scss.js +1 -1
  130. package/es/components/password-input/password-input.scss.js.map +1 -1
  131. package/es/components/popover/popover.scss.js +1 -1
  132. package/es/components/progress-indicator/progress-indicator.scss.js +1 -1
  133. package/es/components/radio-button/radio-button.scss.js +1 -1
  134. package/es/components/search/defs.d.ts +28 -0
  135. package/es/components/search/defs.d.ts.map +1 -0
  136. package/es/components/search/defs.js +40 -0
  137. package/es/components/search/defs.js.map +1 -0
  138. package/es/components/search/search-skeleton.d.ts +4 -4
  139. package/es/components/search/search-skeleton.d.ts.map +1 -1
  140. package/es/components/search/search-skeleton.js +9 -9
  141. package/es/components/search/search-skeleton.js.map +1 -1
  142. package/es/components/search/search.d.ts +4 -3
  143. package/es/components/search/search.d.ts.map +1 -1
  144. package/es/components/search/search.js +3 -5
  145. package/es/components/search/search.js.map +1 -1
  146. package/es/components/search/search.scss.js +1 -1
  147. package/es/components/search/search.scss.js.map +1 -1
  148. package/es/components/select/select.d.ts +1 -1
  149. package/es/components/select/select.d.ts.map +1 -1
  150. package/es/components/select/select.js +1 -4
  151. package/es/components/select/select.js.map +1 -1
  152. package/es/components/select/select.scss.js +1 -1
  153. package/es/components/select/select.scss.js.map +1 -1
  154. package/es/components/skip-to-content/skip-to-content.scss.js +1 -1
  155. package/es/components/slider/slider.d.ts.map +1 -1
  156. package/es/components/slider/slider.js +2 -2
  157. package/es/components/slider/slider.js.map +1 -1
  158. package/es/components/slider/slider.scss.js +1 -1
  159. package/es/components/slug/slug.scss.js +1 -1
  160. package/es/components/tabs/stories/tabs-wrapper.d.ts +53 -0
  161. package/es/components/tabs/stories/tabs-wrapper.d.ts.map +1 -0
  162. package/es/components/tabs/stories/tabs-wrapper.js +129 -0
  163. package/es/components/tabs/stories/tabs-wrapper.js.map +1 -0
  164. package/es/components/tabs/tab.d.ts +23 -0
  165. package/es/components/tabs/tab.d.ts.map +1 -1
  166. package/es/components/tabs/tab.js +59 -3
  167. package/es/components/tabs/tab.js.map +1 -1
  168. package/es/components/tabs/tabs.d.ts +14 -0
  169. package/es/components/tabs/tabs.d.ts.map +1 -1
  170. package/es/components/tabs/tabs.js +74 -25
  171. package/es/components/tabs/tabs.js.map +1 -1
  172. package/es/components/tabs/tabs.scss.js +1 -1
  173. package/es/components/tabs/tabs.scss.js.map +1 -1
  174. package/es/components/tag/tag.scss.js +1 -1
  175. package/es/components/text-input/defs.d.ts +5 -1
  176. package/es/components/text-input/defs.d.ts.map +1 -1
  177. package/es/components/text-input/defs.js +4 -0
  178. package/es/components/text-input/defs.js.map +1 -1
  179. package/es/components/text-input/text-input-skeleton.d.ts +5 -0
  180. package/es/components/text-input/text-input-skeleton.d.ts.map +1 -1
  181. package/es/components/text-input/text-input-skeleton.js +10 -3
  182. package/es/components/text-input/text-input-skeleton.js.map +1 -1
  183. package/es/components/text-input/text-input.d.ts +4 -3
  184. package/es/components/text-input/text-input.d.ts.map +1 -1
  185. package/es/components/text-input/text-input.js +15 -11
  186. package/es/components/text-input/text-input.js.map +1 -1
  187. package/es/components/text-input/text-input.scss.js +1 -1
  188. package/es/components/text-input/text-input.scss.js.map +1 -1
  189. package/es/components/textarea/textarea.scss.js +1 -1
  190. package/es/components/tile/selectable-tile.d.ts +1 -1
  191. package/es/components/tile/tile.scss.js +1 -1
  192. package/es/components/time-picker/time-picker.d.ts +2 -1
  193. package/es/components/time-picker/time-picker.d.ts.map +1 -1
  194. package/es/components/time-picker/time-picker.scss.js +1 -1
  195. package/es/components/toggle-tip/toggletip.scss.js +1 -1
  196. package/es/components/tooltip/tooltip.scss.js +1 -1
  197. package/es/components/tooltip/tooltip.scss.js.map +1 -1
  198. package/es/components/tree-view/tree-view.scss.js +1 -1
  199. package/es/components/ui-shell/header.scss.js +1 -1
  200. package/es/globals/directives/spread.d.ts +1 -1
  201. package/es/globals/directives/spread.d.ts.map +1 -1
  202. package/es/globals/internal/icon-loader-utils.d.ts +1 -1
  203. package/es/globals/internal/icon-loader-utils.d.ts.map +1 -1
  204. package/es/globals/mixins/validity.d.ts +2 -1
  205. package/es/globals/mixins/validity.d.ts.map +1 -1
  206. package/es/globals/mixins/validity.js.map +1 -1
  207. package/es/index.js +1 -1
  208. package/es/node_modules/flatpickr/dist/esm/index.js +1516 -0
  209. package/es/node_modules/flatpickr/dist/esm/index.js.map +1 -0
  210. package/es/node_modules/flatpickr/dist/esm/l10n/default.js +99 -0
  211. package/es/node_modules/flatpickr/dist/esm/l10n/default.js.map +1 -0
  212. package/es/node_modules/flatpickr/dist/esm/plugins/rangePlugin.js +130 -0
  213. package/es/node_modules/flatpickr/dist/esm/plugins/rangePlugin.js.map +1 -0
  214. package/es/node_modules/flatpickr/dist/esm/types/options.js +90 -0
  215. package/es/node_modules/flatpickr/dist/esm/types/options.js.map +1 -0
  216. package/es/node_modules/flatpickr/dist/esm/utils/dates.js +118 -0
  217. package/es/node_modules/flatpickr/dist/esm/utils/dates.js.map +1 -0
  218. package/es/node_modules/flatpickr/dist/esm/utils/dom.js +52 -0
  219. package/es/node_modules/flatpickr/dist/esm/utils/dom.js.map +1 -0
  220. package/es/node_modules/flatpickr/dist/esm/utils/formatting.js +181 -0
  221. package/es/node_modules/flatpickr/dist/esm/utils/formatting.js.map +1 -0
  222. package/es/node_modules/flatpickr/dist/esm/utils/index.js +33 -0
  223. package/es/node_modules/flatpickr/dist/esm/utils/index.js.map +1 -0
  224. package/es/node_modules/flatpickr/dist/esm/utils/polyfills.js +26 -0
  225. package/es/node_modules/flatpickr/dist/esm/utils/polyfills.js.map +1 -0
  226. package/es/packages/feature-flags/es/index.js.map +1 -0
  227. package/es-custom/components/ai-label/ai-label.scss.js +1 -1
  228. package/es-custom/components/breadcrumb/breadcrumb.scss.js +1 -1
  229. package/es-custom/components/button/button.scss.js +1 -1
  230. package/es-custom/components/checkbox/checkbox.scss.js +1 -1
  231. package/es-custom/components/code-snippet/code-snippet.scss.js +1 -1
  232. package/es-custom/components/combo-box/combo-box.scss.js +1 -1
  233. package/es-custom/components/combo-button/combo-button.scss.js +1 -1
  234. package/es-custom/components/contained-list/contained-list.scss.js +1 -1
  235. package/es-custom/components/content-switcher/content-switcher.scss.js +1 -1
  236. package/es-custom/components/copy-button/copy-button.scss.js +1 -1
  237. package/es-custom/components/data-table/data-table.scss.js +1 -1
  238. package/es-custom/components/data-table/table-toolbar-search.d.ts +3 -3
  239. package/es-custom/components/data-table/table-toolbar-search.d.ts.map +1 -1
  240. package/es-custom/components/data-table/table-toolbar-search.js +2 -3
  241. package/es-custom/components/data-table/table-toolbar-search.js.map +1 -1
  242. package/es-custom/components/date-picker/date-picker.d.ts +4 -0
  243. package/es-custom/components/date-picker/date-picker.d.ts.map +1 -1
  244. package/es-custom/components/date-picker/date-picker.js +5 -1
  245. package/es-custom/components/date-picker/date-picker.js.map +1 -1
  246. package/es-custom/components/date-picker/date-picker.scss.js +1 -1
  247. package/es-custom/components/date-picker/fix-events-plugin.d.ts.map +1 -1
  248. package/es-custom/components/date-picker/fix-events-plugin.js +0 -6
  249. package/es-custom/components/date-picker/fix-events-plugin.js.map +1 -1
  250. package/es-custom/components/date-picker/range-plugin.d.ts +2 -8
  251. package/es-custom/components/date-picker/range-plugin.d.ts.map +1 -1
  252. package/es-custom/components/date-picker/range-plugin.js +3 -9
  253. package/es-custom/components/date-picker/range-plugin.js.map +1 -1
  254. package/es-custom/components/dialog/dialog.scss.js +1 -1
  255. package/es-custom/components/dropdown/dropdown.d.ts +3 -2
  256. package/es-custom/components/dropdown/dropdown.d.ts.map +1 -1
  257. package/es-custom/components/dropdown/dropdown.js +9 -2
  258. package/es-custom/components/dropdown/dropdown.js.map +1 -1
  259. package/es-custom/components/dropdown/dropdown.scss.js +1 -1
  260. package/es-custom/components/feature-flags/index.js +1 -1
  261. package/es-custom/components/file-uploader/file-uploader.scss.js +1 -1
  262. package/es-custom/components/fluid-combo-box/fluid-combo-box-skeleton.d.ts +18 -0
  263. package/es-custom/components/fluid-combo-box/fluid-combo-box-skeleton.d.ts.map +1 -0
  264. package/es-custom/components/fluid-combo-box/fluid-combo-box-skeleton.js +45 -0
  265. package/es-custom/components/fluid-combo-box/fluid-combo-box-skeleton.js.map +1 -0
  266. package/es-custom/components/fluid-combo-box/fluid-combo-box.d.ts +23 -0
  267. package/es-custom/components/fluid-combo-box/fluid-combo-box.d.ts.map +1 -0
  268. package/es-custom/components/fluid-combo-box/fluid-combo-box.js +53 -0
  269. package/es-custom/components/fluid-combo-box/fluid-combo-box.js.map +1 -0
  270. package/es-custom/components/fluid-combo-box/fluid-combo-box.scss.js +14 -0
  271. package/es-custom/components/fluid-combo-box/fluid-combo-box.scss.js.map +1 -0
  272. package/es-custom/components/fluid-combo-box/index.d.ts +9 -0
  273. package/es-custom/components/fluid-combo-box/index.d.ts.map +1 -0
  274. package/es-custom/components/fluid-combo-box/index.js +9 -0
  275. package/es-custom/components/fluid-dropdown/fluid-dropdown.scss.js +1 -1
  276. package/es-custom/components/fluid-form/fluid-form.d.ts +19 -0
  277. package/es-custom/components/fluid-form/fluid-form.d.ts.map +1 -0
  278. package/es-custom/components/fluid-form/fluid-form.js +44 -0
  279. package/es-custom/components/fluid-form/fluid-form.js.map +1 -0
  280. package/es-custom/components/fluid-form/fluid-form.scss.js +14 -0
  281. package/es-custom/components/fluid-form/fluid-form.scss.js.map +1 -0
  282. package/es-custom/components/fluid-form/index.d.ts +8 -0
  283. package/es-custom/components/fluid-form/index.d.ts.map +1 -0
  284. package/es-custom/components/fluid-form/index.js +8 -0
  285. package/es-custom/components/fluid-multi-select/fluid-multi-select.scss.js +1 -1
  286. package/es-custom/components/fluid-number-input/fluid-number-input.scss.js +1 -1
  287. package/es-custom/components/fluid-number-input/fluid-number-input.scss.js.map +1 -1
  288. package/es-custom/components/fluid-password-input/fluid-password-input.scss.js +1 -1
  289. package/es-custom/components/fluid-password-input/fluid-password-input.scss.js.map +1 -1
  290. package/es-custom/components/fluid-search/fluid-search.scss.js +1 -1
  291. package/es-custom/components/fluid-select/fluid-select.scss.js +1 -1
  292. package/es-custom/components/fluid-select/fluid-select.scss.js.map +1 -1
  293. package/es-custom/components/fluid-text-input/fluid-text-input.scss.js +1 -1
  294. package/es-custom/components/fluid-text-input/fluid-text-input.scss.js.map +1 -1
  295. package/es-custom/components/fluid-textarea/fluid-textarea.scss.js +1 -1
  296. package/es-custom/components/fluid-textarea/fluid-textarea.scss.js.map +1 -1
  297. package/es-custom/components/fluid-time-picker/fluid-time-picker.scss.js +1 -1
  298. package/es-custom/components/form/form-item.scss.js +1 -1
  299. package/es-custom/components/form/form.scss.js +1 -1
  300. package/es-custom/components/form-group/form-group.scss.js +1 -1
  301. package/es-custom/components/grid/column-hang.scss.js +1 -1
  302. package/es-custom/components/grid/grid.d.ts +5 -0
  303. package/es-custom/components/grid/grid.d.ts.map +1 -1
  304. package/es-custom/components/grid/grid.js +11 -1
  305. package/es-custom/components/grid/grid.js.map +1 -1
  306. package/es-custom/components/grid/grid.scss.js +1 -1
  307. package/es-custom/components/grid/grid.scss.js.map +1 -1
  308. package/es-custom/components/icon/icon.d.ts +1 -1
  309. package/es-custom/components/menu/menu-item.d.ts +1 -0
  310. package/es-custom/components/menu/menu-item.d.ts.map +1 -1
  311. package/es-custom/components/menu/menu-item.js +5 -0
  312. package/es-custom/components/menu/menu-item.js.map +1 -1
  313. package/es-custom/components/menu/menu-item.scss.js +1 -1
  314. package/es-custom/components/menu/menu-item.scss.js.map +1 -1
  315. package/es-custom/components/menu-button/menu-button.d.ts.map +1 -1
  316. package/es-custom/components/menu-button/menu-button.js +0 -1
  317. package/es-custom/components/menu-button/menu-button.js.map +1 -1
  318. package/es-custom/components/menu-button/menu-button.scss.js +1 -1
  319. package/es-custom/components/modal/modal.scss.js +1 -1
  320. package/es-custom/components/modal/modal.scss.js.map +1 -1
  321. package/es-custom/components/multi-select/multi-select.d.ts +38 -4
  322. package/es-custom/components/multi-select/multi-select.d.ts.map +1 -1
  323. package/es-custom/components/multi-select/multi-select.js +30 -27
  324. package/es-custom/components/multi-select/multi-select.js.map +1 -1
  325. package/es-custom/components/multi-select/multi-select.scss.js +1 -1
  326. package/es-custom/components/notification/actionable-notification.d.ts +1 -1
  327. package/es-custom/components/notification/actionable-notification.scss.js +1 -1
  328. package/es-custom/components/notification/callout-notification.d.ts +1 -1
  329. package/es-custom/components/notification/inline-notification.d.ts +1 -1
  330. package/es-custom/components/notification/inline-notification.scss.js +1 -1
  331. package/es-custom/components/notification/toast-notification.scss.js +1 -1
  332. package/es-custom/components/number-input/number-input.scss.js +1 -1
  333. package/es-custom/components/overflow-menu/overflow-menu.scss.js +1 -1
  334. package/es-custom/components/page-header/page-header.scss.js +1 -1
  335. package/es-custom/components/pagination/defs.d.ts +25 -0
  336. package/es-custom/components/pagination/defs.d.ts.map +1 -1
  337. package/es-custom/components/pagination/defs.js +27 -1
  338. package/es-custom/components/pagination/defs.js.map +1 -1
  339. package/es-custom/components/pagination/pagination.d.ts +9 -1
  340. package/es-custom/components/pagination/pagination.d.ts.map +1 -1
  341. package/es-custom/components/pagination/pagination.js +7 -2
  342. package/es-custom/components/pagination/pagination.js.map +1 -1
  343. package/es-custom/components/pagination/pagination.scss.js +1 -1
  344. package/es-custom/components/pagination/pagination.scss.js.map +1 -1
  345. package/es-custom/components/pagination-nav/pagination-nav.scss.js +1 -1
  346. package/es-custom/components/password-input/defs.d.ts +5 -1
  347. package/es-custom/components/password-input/defs.d.ts.map +1 -1
  348. package/es-custom/components/password-input/defs.js +4 -0
  349. package/es-custom/components/password-input/defs.js.map +1 -1
  350. package/es-custom/components/password-input/password-input.d.ts +1 -1
  351. package/es-custom/components/password-input/password-input.d.ts.map +1 -1
  352. package/es-custom/components/password-input/password-input.js +15 -15
  353. package/es-custom/components/password-input/password-input.js.map +1 -1
  354. package/es-custom/components/password-input/password-input.scss.js +1 -1
  355. package/es-custom/components/password-input/password-input.scss.js.map +1 -1
  356. package/es-custom/components/popover/popover.scss.js +1 -1
  357. package/es-custom/components/progress-indicator/progress-indicator.scss.js +1 -1
  358. package/es-custom/components/radio-button/radio-button.scss.js +1 -1
  359. package/es-custom/components/search/defs.d.ts +28 -0
  360. package/es-custom/components/search/defs.d.ts.map +1 -0
  361. package/es-custom/components/search/defs.js +40 -0
  362. package/es-custom/components/search/defs.js.map +1 -0
  363. package/es-custom/components/search/search-skeleton.d.ts +4 -4
  364. package/es-custom/components/search/search-skeleton.d.ts.map +1 -1
  365. package/es-custom/components/search/search-skeleton.js +9 -9
  366. package/es-custom/components/search/search-skeleton.js.map +1 -1
  367. package/es-custom/components/search/search.d.ts +4 -3
  368. package/es-custom/components/search/search.d.ts.map +1 -1
  369. package/es-custom/components/search/search.js +3 -5
  370. package/es-custom/components/search/search.js.map +1 -1
  371. package/es-custom/components/search/search.scss.js +1 -1
  372. package/es-custom/components/search/search.scss.js.map +1 -1
  373. package/es-custom/components/select/select.d.ts +1 -1
  374. package/es-custom/components/select/select.d.ts.map +1 -1
  375. package/es-custom/components/select/select.js +1 -4
  376. package/es-custom/components/select/select.js.map +1 -1
  377. package/es-custom/components/select/select.scss.js +1 -1
  378. package/es-custom/components/select/select.scss.js.map +1 -1
  379. package/es-custom/components/skip-to-content/skip-to-content.scss.js +1 -1
  380. package/es-custom/components/slider/slider.d.ts.map +1 -1
  381. package/es-custom/components/slider/slider.js +2 -2
  382. package/es-custom/components/slider/slider.js.map +1 -1
  383. package/es-custom/components/slider/slider.scss.js +1 -1
  384. package/es-custom/components/slug/slug.scss.js +1 -1
  385. package/es-custom/components/tabs/stories/tabs-wrapper.d.ts +53 -0
  386. package/es-custom/components/tabs/stories/tabs-wrapper.d.ts.map +1 -0
  387. package/es-custom/components/tabs/stories/tabs-wrapper.js +129 -0
  388. package/es-custom/components/tabs/stories/tabs-wrapper.js.map +1 -0
  389. package/es-custom/components/tabs/tab.d.ts +23 -0
  390. package/es-custom/components/tabs/tab.d.ts.map +1 -1
  391. package/es-custom/components/tabs/tab.js +59 -3
  392. package/es-custom/components/tabs/tab.js.map +1 -1
  393. package/es-custom/components/tabs/tabs.d.ts +14 -0
  394. package/es-custom/components/tabs/tabs.d.ts.map +1 -1
  395. package/es-custom/components/tabs/tabs.js +74 -25
  396. package/es-custom/components/tabs/tabs.js.map +1 -1
  397. package/es-custom/components/tabs/tabs.scss.js +1 -1
  398. package/es-custom/components/tabs/tabs.scss.js.map +1 -1
  399. package/es-custom/components/tag/tag.scss.js +1 -1
  400. package/es-custom/components/text-input/defs.d.ts +5 -1
  401. package/es-custom/components/text-input/defs.d.ts.map +1 -1
  402. package/es-custom/components/text-input/defs.js +4 -0
  403. package/es-custom/components/text-input/defs.js.map +1 -1
  404. package/es-custom/components/text-input/text-input-skeleton.d.ts +5 -0
  405. package/es-custom/components/text-input/text-input-skeleton.d.ts.map +1 -1
  406. package/es-custom/components/text-input/text-input-skeleton.js +10 -3
  407. package/es-custom/components/text-input/text-input-skeleton.js.map +1 -1
  408. package/es-custom/components/text-input/text-input.d.ts +4 -3
  409. package/es-custom/components/text-input/text-input.d.ts.map +1 -1
  410. package/es-custom/components/text-input/text-input.js +15 -11
  411. package/es-custom/components/text-input/text-input.js.map +1 -1
  412. package/es-custom/components/text-input/text-input.scss.js +1 -1
  413. package/es-custom/components/text-input/text-input.scss.js.map +1 -1
  414. package/es-custom/components/textarea/textarea.scss.js +1 -1
  415. package/es-custom/components/tile/selectable-tile.d.ts +1 -1
  416. package/es-custom/components/tile/tile.scss.js +1 -1
  417. package/es-custom/components/time-picker/time-picker.d.ts +2 -1
  418. package/es-custom/components/time-picker/time-picker.d.ts.map +1 -1
  419. package/es-custom/components/time-picker/time-picker.scss.js +1 -1
  420. package/es-custom/components/toggle-tip/toggletip.scss.js +1 -1
  421. package/es-custom/components/tooltip/tooltip.scss.js +1 -1
  422. package/es-custom/components/tooltip/tooltip.scss.js.map +1 -1
  423. package/es-custom/components/tree-view/tree-view.scss.js +1 -1
  424. package/es-custom/components/ui-shell/header.scss.js +1 -1
  425. package/es-custom/globals/directives/spread.d.ts +1 -1
  426. package/es-custom/globals/directives/spread.d.ts.map +1 -1
  427. package/es-custom/globals/internal/icon-loader-utils.d.ts +1 -1
  428. package/es-custom/globals/internal/icon-loader-utils.d.ts.map +1 -1
  429. package/es-custom/globals/mixins/validity.d.ts +2 -1
  430. package/es-custom/globals/mixins/validity.d.ts.map +1 -1
  431. package/es-custom/globals/mixins/validity.js.map +1 -1
  432. package/es-custom/index.js +1 -1
  433. package/es-custom/node_modules/flatpickr/dist/esm/index.js +1516 -0
  434. package/es-custom/node_modules/flatpickr/dist/esm/index.js.map +1 -0
  435. package/es-custom/node_modules/flatpickr/dist/esm/l10n/default.js +99 -0
  436. package/es-custom/node_modules/flatpickr/dist/esm/l10n/default.js.map +1 -0
  437. package/es-custom/node_modules/flatpickr/dist/esm/plugins/rangePlugin.js +130 -0
  438. package/es-custom/node_modules/flatpickr/dist/esm/plugins/rangePlugin.js.map +1 -0
  439. package/es-custom/node_modules/flatpickr/dist/esm/types/options.js +90 -0
  440. package/es-custom/node_modules/flatpickr/dist/esm/types/options.js.map +1 -0
  441. package/es-custom/node_modules/flatpickr/dist/esm/utils/dates.js +118 -0
  442. package/es-custom/node_modules/flatpickr/dist/esm/utils/dates.js.map +1 -0
  443. package/es-custom/node_modules/flatpickr/dist/esm/utils/dom.js +52 -0
  444. package/es-custom/node_modules/flatpickr/dist/esm/utils/dom.js.map +1 -0
  445. package/es-custom/node_modules/flatpickr/dist/esm/utils/formatting.js +181 -0
  446. package/es-custom/node_modules/flatpickr/dist/esm/utils/formatting.js.map +1 -0
  447. package/es-custom/node_modules/flatpickr/dist/esm/utils/index.js +33 -0
  448. package/es-custom/node_modules/flatpickr/dist/esm/utils/index.js.map +1 -0
  449. package/es-custom/node_modules/flatpickr/dist/esm/utils/polyfills.js +26 -0
  450. package/es-custom/node_modules/flatpickr/dist/esm/utils/polyfills.js.map +1 -0
  451. package/es-custom/packages/feature-flags/es/index.js.map +1 -0
  452. package/lib/components/data-table/table-toolbar-search.d.ts +3 -3
  453. package/lib/components/data-table/table-toolbar-search.d.ts.map +1 -1
  454. package/lib/components/date-picker/date-picker.d.ts +4 -0
  455. package/lib/components/date-picker/date-picker.d.ts.map +1 -1
  456. package/lib/components/date-picker/fix-events-plugin.d.ts.map +1 -1
  457. package/lib/components/date-picker/range-plugin.d.ts +2 -8
  458. package/lib/components/date-picker/range-plugin.d.ts.map +1 -1
  459. package/lib/components/dropdown/dropdown.d.ts +3 -2
  460. package/lib/components/dropdown/dropdown.d.ts.map +1 -1
  461. package/lib/components/fluid-combo-box/fluid-combo-box-skeleton.d.ts +18 -0
  462. package/lib/components/fluid-combo-box/fluid-combo-box-skeleton.d.ts.map +1 -0
  463. package/lib/components/fluid-combo-box/fluid-combo-box.d.ts +23 -0
  464. package/lib/components/fluid-combo-box/fluid-combo-box.d.ts.map +1 -0
  465. package/lib/components/fluid-combo-box/index.d.ts +9 -0
  466. package/lib/components/fluid-combo-box/index.d.ts.map +1 -0
  467. package/lib/components/fluid-form/fluid-form.d.ts +19 -0
  468. package/lib/components/fluid-form/fluid-form.d.ts.map +1 -0
  469. package/lib/components/fluid-form/index.d.ts +8 -0
  470. package/lib/components/fluid-form/index.d.ts.map +1 -0
  471. package/lib/components/grid/grid.d.ts +5 -0
  472. package/lib/components/grid/grid.d.ts.map +1 -1
  473. package/lib/components/icon/icon.d.ts +1 -1
  474. package/lib/components/menu/menu-item.d.ts +1 -0
  475. package/lib/components/menu/menu-item.d.ts.map +1 -1
  476. package/lib/components/menu-button/menu-button.d.ts.map +1 -1
  477. package/lib/components/multi-select/multi-select.d.ts +38 -4
  478. package/lib/components/multi-select/multi-select.d.ts.map +1 -1
  479. package/lib/components/notification/actionable-notification.d.ts +1 -1
  480. package/lib/components/notification/callout-notification.d.ts +1 -1
  481. package/lib/components/notification/inline-notification.d.ts +1 -1
  482. package/lib/components/pagination/defs.d.ts +25 -0
  483. package/lib/components/pagination/defs.d.ts.map +1 -1
  484. package/lib/components/pagination/defs.js +27 -0
  485. package/lib/components/pagination/defs.js.map +1 -1
  486. package/lib/components/pagination/pagination.d.ts +9 -1
  487. package/lib/components/pagination/pagination.d.ts.map +1 -1
  488. package/lib/components/password-input/defs.d.ts +5 -1
  489. package/lib/components/password-input/defs.d.ts.map +1 -1
  490. package/lib/components/password-input/defs.js +4 -0
  491. package/lib/components/password-input/defs.js.map +1 -1
  492. package/lib/components/password-input/password-input.d.ts +1 -1
  493. package/lib/components/password-input/password-input.d.ts.map +1 -1
  494. package/lib/components/search/defs.d.ts +28 -0
  495. package/lib/components/search/defs.d.ts.map +1 -0
  496. package/lib/components/search/defs.js +41 -0
  497. package/lib/components/search/defs.js.map +1 -0
  498. package/lib/components/search/search-skeleton.d.ts +4 -4
  499. package/lib/components/search/search-skeleton.d.ts.map +1 -1
  500. package/lib/components/search/search.d.ts +4 -3
  501. package/lib/components/search/search.d.ts.map +1 -1
  502. package/lib/components/select/select.d.ts +1 -1
  503. package/lib/components/select/select.d.ts.map +1 -1
  504. package/lib/components/slider/slider.d.ts.map +1 -1
  505. package/lib/components/tabs/stories/tabs-wrapper.d.ts +53 -0
  506. package/lib/components/tabs/stories/tabs-wrapper.d.ts.map +1 -0
  507. package/lib/components/tabs/tab.d.ts +23 -0
  508. package/lib/components/tabs/tab.d.ts.map +1 -1
  509. package/lib/components/tabs/tabs.d.ts +14 -0
  510. package/lib/components/tabs/tabs.d.ts.map +1 -1
  511. package/lib/components/text-input/defs.d.ts +5 -1
  512. package/lib/components/text-input/defs.d.ts.map +1 -1
  513. package/lib/components/text-input/defs.js +4 -0
  514. package/lib/components/text-input/defs.js.map +1 -1
  515. package/lib/components/text-input/text-input-skeleton.d.ts +5 -0
  516. package/lib/components/text-input/text-input-skeleton.d.ts.map +1 -1
  517. package/lib/components/text-input/text-input.d.ts +4 -3
  518. package/lib/components/text-input/text-input.d.ts.map +1 -1
  519. package/lib/components/tile/selectable-tile.d.ts +1 -1
  520. package/lib/components/time-picker/time-picker.d.ts +2 -1
  521. package/lib/components/time-picker/time-picker.d.ts.map +1 -1
  522. package/lib/globals/directives/spread.d.ts +1 -1
  523. package/lib/globals/directives/spread.d.ts.map +1 -1
  524. package/lib/globals/internal/icon-loader-utils.d.ts +1 -1
  525. package/lib/globals/internal/icon-loader-utils.d.ts.map +1 -1
  526. package/lib/globals/mixins/validity.d.ts +2 -1
  527. package/lib/globals/mixins/validity.d.ts.map +1 -1
  528. package/package.json +13 -10
  529. package/scss/components/data-table/_table-action.scss +9 -1
  530. package/scss/components/fluid-combo-box/fluid-combo-box.scss +252 -0
  531. package/scss/components/fluid-form/fluid-form.scss +24 -0
  532. package/scss/components/fluid-number-input/fluid-number-input.scss +3 -1
  533. package/scss/components/fluid-password-input/fluid-password-input.scss +1 -16
  534. package/scss/components/fluid-select/fluid-select.scss +3 -1
  535. package/scss/components/fluid-text-input/fluid-text-input.scss +3 -1
  536. package/scss/components/fluid-textarea/fluid-textarea.scss +3 -1
  537. package/scss/components/grid/grid.scss +20 -0
  538. package/scss/components/menu/menu-item.scss +5 -1
  539. package/scss/components/modal/modal.scss +1 -0
  540. package/scss/components/pagination/pagination.scss +3 -7
  541. package/scss/components/password-input/password-input.scss +1 -17
  542. package/scss/components/search/search.scss +20 -53
  543. package/scss/components/select/select.scss +4 -0
  544. package/scss/components/tabs/tabs-story.scss +19 -1
  545. package/scss/components/tabs/tabs.scss +74 -6
  546. package/scss/components/text-input/text-input.scss +7 -9
  547. package/scss/components/tooltip/tooltip.scss +13 -1
  548. package/telemetry.yml +25 -11
  549. package/es/feature-flags/es/index.js.map +0 -1
  550. package/es-custom/feature-flags/es/index.js.map +0 -1
  551. /package/es/{feature-flags → packages/feature-flags}/es/index.js +0 -0
  552. /package/es-custom/{feature-flags → packages/feature-flags}/es/index.js +0 -0
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { css } from "lit";
9
9
  //#region src/components/grid/column-hang.scss?lit
10
- var column_hang_default = css([":root{--cds-grid-gutter:2rem;--cds-grid-columns:4;--cds-grid-margin:0}@media (min-width:42rem){:root{--cds-grid-columns:8;--cds-grid-margin:1rem}}@media (min-width:66rem){:root{--cds-grid-columns:16}}@media (min-width:99rem){:root{--cds-grid-margin:1.5rem}}.cds--css-grid{--cds-grid-gutter-start:calc(var(--cds-grid-gutter)/2);--cds-grid-gutter-end:calc(var(--cds-grid-gutter)/2);--cds-grid-column-hang:calc(var(--cds-grid-gutter)/2);display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--cds-grid-margin)}.cds--css-grid--full-width{max-inline-size:100%}.cds--css-grid-column{--cds-grid-mode-start:var(--cds-grid-gutter-start);--cds-grid-mode-end:var(--cds-grid-gutter-end);margin-inline:var(--cds-grid-gutter-start) var(--cds-grid-gutter-end)}[dir=rtl] .cds--css-grid-column{margin-inline:var(--cds-grid-gutter-end) var(--cds-grid-gutter-start)}.cds--css-grid--narrow{--cds-grid-gutter-start:0rem}.cds--css-grid--condensed{--cds-grid-gutter:0.0625rem;--cds-grid-column-hang:0.96875rem}.cds--css-grid--start{margin-inline-start:0}.cds--css-grid--end{margin-inline-end:0}.cds--subgrid{display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));margin-inline:calc(var(--cds-grid-mode-start)*-1) calc(var(--cds-grid-mode-end)*-1)}[dir=rtl] .cds--subgrid{margin-inline:calc(var(--cds-grid-mode-end)*-1) calc(var(--cds-grid-mode-start)*-1)}.cds--subgrid--wide{--cds-grid-gutter-start:1rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:0}.cds--subgrid--narrow{--cds-grid-gutter-start:0rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:1rem}.cds--subgrid--condensed{--cds-grid-gutter-start:0.03125rem;--cds-grid-gutter-end:0.03125rem;--cds-grid-column-hang:0.96875rem}.cds--grid-column-hang,:host(cds-column-hang){margin-inline-start:var(--cds-grid-column-hang)}[dir=rtl] .cds--grid-column-hang,[dir=rtl] :host(cds-column-hang){margin-inline:initial var(--cds-grid-column-hang)}.cds--col-span-0{display:none}.cds--col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--sm\\:col-span-0{display:none}.cds--sm\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--sm\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--sm\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--sm\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--sm\\:col-span-auto{grid-column:auto}.cds--sm\\:col-span-100{grid-column:1/-1}.cds--sm\\:col-span-75{--cds-grid-columns:3;grid-column:span 3/span 3}.cds--sm\\:col-span-50{--cds-grid-columns:2;grid-column:span 2/span 2}.cds--sm\\:col-span-25{--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--md\\:col-span-0{display:none}.cds--md\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--md\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--md\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--md\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--md\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--md\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--md\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--md\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--md\\:col-span-auto{grid-column:auto}.cds--md\\:col-span-100{grid-column:1/-1}.cds--md\\:col-span-75{--cds-grid-columns:6;grid-column:span 6/span 6}.cds--md\\:col-span-50{--cds-grid-columns:4;grid-column:span 4/span 4}.cds--md\\:col-span-25{--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-0{display:none}.cds--lg\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--lg\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--lg\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--lg\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--lg\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--lg\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--lg\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--lg\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--lg\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--lg\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--lg\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--lg\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--lg\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--lg\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--lg\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--lg\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--lg\\:col-span-auto{grid-column:auto}.cds--lg\\:col-span-100{grid-column:1/-1}.cds--lg\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--lg\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--lg\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-0{display:none}.cds--xlg\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--xlg\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--xlg\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--xlg\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--xlg\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--xlg\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--xlg\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--xlg\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--xlg\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--xlg\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--xlg\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--xlg\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--xlg\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--xlg\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--xlg\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--xlg\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--xlg\\:col-span-auto{grid-column:auto}.cds--xlg\\:col-span-100{grid-column:1/-1}.cds--xlg\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--xlg\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--xlg\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-0{display:none}.cds--max\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--max\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--max\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--max\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--max\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--max\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--max\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--max\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--max\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--max\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--max\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--max\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--max\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--max\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--max\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--max\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--max\\:col-span-auto{grid-column:auto}.cds--max\\:col-span-100{grid-column:1/-1}.cds--max\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--max\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--max\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-span-auto{grid-column:auto}.cds--col-span-100{grid-column:1/-1}.cds--col-span-75{--cds-grid-columns:3;grid-column:span 3/span 3}@media (min-width:42rem){.cds--col-span-75{--cds-grid-columns:6;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}}.cds--col-span-50{--cds-grid-columns:2;grid-column:span 2/span 2}@media (min-width:42rem){.cds--col-span-50{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}}.cds--col-span-25{--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--col-span-25{--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-start-1{grid-column-start:1}.cds--col-start-2{grid-column-start:2}.cds--col-start-3{grid-column-start:3}.cds--col-start-4{grid-column-start:4}.cds--col-start-5{grid-column-start:5}.cds--col-start-6{grid-column-start:6}.cds--col-start-7{grid-column-start:7}.cds--col-start-8{grid-column-start:8}.cds--col-start-9{grid-column-start:9}.cds--col-start-10{grid-column-start:10}.cds--col-start-11{grid-column-start:11}.cds--col-start-12{grid-column-start:12}.cds--col-start-13{grid-column-start:13}.cds--col-start-14{grid-column-start:14}.cds--col-start-15{grid-column-start:15}.cds--col-start-16{grid-column-start:16}.cds--col-end-2{grid-column-end:2}.cds--col-end-3{grid-column-end:3}.cds--col-end-4{grid-column-end:4}.cds--col-end-5{grid-column-end:5}.cds--col-end-6{grid-column-end:6}.cds--col-end-7{grid-column-end:7}.cds--col-end-8{grid-column-end:8}.cds--col-end-9{grid-column-end:9}.cds--col-end-10{grid-column-end:10}.cds--col-end-11{grid-column-end:11}.cds--col-end-12{grid-column-end:12}.cds--col-end-13{grid-column-end:13}.cds--col-end-14{grid-column-end:14}.cds--col-end-15{grid-column-end:15}.cds--col-end-16{grid-column-end:16}.cds--col-end-17{grid-column-end:17}.cds--col-start-auto{grid-column-start:auto}.cds--col-end-auto{grid-column-end:auto}.cds--sm\\:col-start-1{grid-column-start:1}.cds--sm\\:col-start-2{grid-column-start:2}.cds--sm\\:col-start-3{grid-column-start:3}.cds--sm\\:col-start-4{grid-column-start:4}.cds--sm\\:col-start-5{grid-column-start:5}.cds--sm\\:col-start-6{grid-column-start:6}.cds--sm\\:col-start-7{grid-column-start:7}.cds--sm\\:col-start-8{grid-column-start:8}.cds--sm\\:col-start-9{grid-column-start:9}.cds--sm\\:col-start-10{grid-column-start:10}.cds--sm\\:col-start-11{grid-column-start:11}.cds--sm\\:col-start-12{grid-column-start:12}.cds--sm\\:col-start-13{grid-column-start:13}.cds--sm\\:col-start-14{grid-column-start:14}.cds--sm\\:col-start-15{grid-column-start:15}.cds--sm\\:col-start-16{grid-column-start:16}.cds--sm\\:col-end-2{grid-column-end:2}.cds--sm\\:col-end-3{grid-column-end:3}.cds--sm\\:col-end-4{grid-column-end:4}.cds--sm\\:col-end-5{grid-column-end:5}.cds--sm\\:col-end-6{grid-column-end:6}.cds--sm\\:col-end-7{grid-column-end:7}.cds--sm\\:col-end-8{grid-column-end:8}.cds--sm\\:col-end-9{grid-column-end:9}.cds--sm\\:col-end-10{grid-column-end:10}.cds--sm\\:col-end-11{grid-column-end:11}.cds--sm\\:col-end-12{grid-column-end:12}.cds--sm\\:col-end-13{grid-column-end:13}.cds--sm\\:col-end-14{grid-column-end:14}.cds--sm\\:col-end-15{grid-column-end:15}.cds--sm\\:col-end-16{grid-column-end:16}.cds--sm\\:col-end-17{grid-column-end:17}.cds--sm\\:col-start-auto{grid-column-start:auto}.cds--sm\\:col-end-auto{grid-column-end:auto}@media (min-width:42rem){.cds--md\\:col-start-1{grid-column-start:1}.cds--md\\:col-start-2{grid-column-start:2}.cds--md\\:col-start-3{grid-column-start:3}.cds--md\\:col-start-4{grid-column-start:4}.cds--md\\:col-start-5{grid-column-start:5}.cds--md\\:col-start-6{grid-column-start:6}.cds--md\\:col-start-7{grid-column-start:7}.cds--md\\:col-start-8{grid-column-start:8}.cds--md\\:col-start-9{grid-column-start:9}.cds--md\\:col-start-10{grid-column-start:10}.cds--md\\:col-start-11{grid-column-start:11}.cds--md\\:col-start-12{grid-column-start:12}.cds--md\\:col-start-13{grid-column-start:13}.cds--md\\:col-start-14{grid-column-start:14}.cds--md\\:col-start-15{grid-column-start:15}.cds--md\\:col-start-16{grid-column-start:16}.cds--md\\:col-end-2{grid-column-end:2}.cds--md\\:col-end-3{grid-column-end:3}.cds--md\\:col-end-4{grid-column-end:4}.cds--md\\:col-end-5{grid-column-end:5}.cds--md\\:col-end-6{grid-column-end:6}.cds--md\\:col-end-7{grid-column-end:7}.cds--md\\:col-end-8{grid-column-end:8}.cds--md\\:col-end-9{grid-column-end:9}.cds--md\\:col-end-10{grid-column-end:10}.cds--md\\:col-end-11{grid-column-end:11}.cds--md\\:col-end-12{grid-column-end:12}.cds--md\\:col-end-13{grid-column-end:13}.cds--md\\:col-end-14{grid-column-end:14}.cds--md\\:col-end-15{grid-column-end:15}.cds--md\\:col-end-16{grid-column-end:16}.cds--md\\:col-end-17{grid-column-end:17}.cds--md\\:col-start-auto{grid-column-start:auto}.cds--md\\:col-end-auto{grid-column-end:auto}}@media (min-width:66rem){.cds--lg\\:col-start-1{grid-column-start:1}.cds--lg\\:col-start-2{grid-column-start:2}.cds--lg\\:col-start-3{grid-column-start:3}.cds--lg\\:col-start-4{grid-column-start:4}.cds--lg\\:col-start-5{grid-column-start:5}.cds--lg\\:col-start-6{grid-column-start:6}.cds--lg\\:col-start-7{grid-column-start:7}.cds--lg\\:col-start-8{grid-column-start:8}.cds--lg\\:col-start-9{grid-column-start:9}.cds--lg\\:col-start-10{grid-column-start:10}.cds--lg\\:col-start-11{grid-column-start:11}.cds--lg\\:col-start-12{grid-column-start:12}.cds--lg\\:col-start-13{grid-column-start:13}.cds--lg\\:col-start-14{grid-column-start:14}.cds--lg\\:col-start-15{grid-column-start:15}.cds--lg\\:col-start-16{grid-column-start:16}.cds--lg\\:col-end-2{grid-column-end:2}.cds--lg\\:col-end-3{grid-column-end:3}.cds--lg\\:col-end-4{grid-column-end:4}.cds--lg\\:col-end-5{grid-column-end:5}.cds--lg\\:col-end-6{grid-column-end:6}.cds--lg\\:col-end-7{grid-column-end:7}.cds--lg\\:col-end-8{grid-column-end:8}.cds--lg\\:col-end-9{grid-column-end:9}.cds--lg\\:col-end-10{grid-column-end:10}.cds--lg\\:col-end-11{grid-column-end:11}.cds--lg\\:col-end-12{grid-column-end:12}.cds--lg\\:col-end-13{grid-column-end:13}.cds--lg\\:col-end-14{grid-column-end:14}.cds--lg\\:col-end-15{grid-column-end:15}.cds--lg\\:col-end-16{grid-column-end:16}.cds--lg\\:col-end-17{grid-column-end:17}.cds--lg\\:col-start-auto{grid-column-start:auto}.cds--lg\\:col-end-auto{grid-column-end:auto}}@media (min-width:82rem){.cds--xlg\\:col-start-1{grid-column-start:1}.cds--xlg\\:col-start-2{grid-column-start:2}.cds--xlg\\:col-start-3{grid-column-start:3}.cds--xlg\\:col-start-4{grid-column-start:4}.cds--xlg\\:col-start-5{grid-column-start:5}.cds--xlg\\:col-start-6{grid-column-start:6}.cds--xlg\\:col-start-7{grid-column-start:7}.cds--xlg\\:col-start-8{grid-column-start:8}.cds--xlg\\:col-start-9{grid-column-start:9}.cds--xlg\\:col-start-10{grid-column-start:10}.cds--xlg\\:col-start-11{grid-column-start:11}.cds--xlg\\:col-start-12{grid-column-start:12}.cds--xlg\\:col-start-13{grid-column-start:13}.cds--xlg\\:col-start-14{grid-column-start:14}.cds--xlg\\:col-start-15{grid-column-start:15}.cds--xlg\\:col-start-16{grid-column-start:16}.cds--xlg\\:col-end-2{grid-column-end:2}.cds--xlg\\:col-end-3{grid-column-end:3}.cds--xlg\\:col-end-4{grid-column-end:4}.cds--xlg\\:col-end-5{grid-column-end:5}.cds--xlg\\:col-end-6{grid-column-end:6}.cds--xlg\\:col-end-7{grid-column-end:7}.cds--xlg\\:col-end-8{grid-column-end:8}.cds--xlg\\:col-end-9{grid-column-end:9}.cds--xlg\\:col-end-10{grid-column-end:10}.cds--xlg\\:col-end-11{grid-column-end:11}.cds--xlg\\:col-end-12{grid-column-end:12}.cds--xlg\\:col-end-13{grid-column-end:13}.cds--xlg\\:col-end-14{grid-column-end:14}.cds--xlg\\:col-end-15{grid-column-end:15}.cds--xlg\\:col-end-16{grid-column-end:16}.cds--xlg\\:col-end-17{grid-column-end:17}.cds--xlg\\:col-start-auto{grid-column-start:auto}.cds--xlg\\:col-end-auto{grid-column-end:auto}}@media (min-width:99rem){.cds--max\\:col-start-1{grid-column-start:1}.cds--max\\:col-start-2{grid-column-start:2}.cds--max\\:col-start-3{grid-column-start:3}.cds--max\\:col-start-4{grid-column-start:4}.cds--max\\:col-start-5{grid-column-start:5}.cds--max\\:col-start-6{grid-column-start:6}.cds--max\\:col-start-7{grid-column-start:7}.cds--max\\:col-start-8{grid-column-start:8}.cds--max\\:col-start-9{grid-column-start:9}.cds--max\\:col-start-10{grid-column-start:10}.cds--max\\:col-start-11{grid-column-start:11}.cds--max\\:col-start-12{grid-column-start:12}.cds--max\\:col-start-13{grid-column-start:13}.cds--max\\:col-start-14{grid-column-start:14}.cds--max\\:col-start-15{grid-column-start:15}.cds--max\\:col-start-16{grid-column-start:16}.cds--max\\:col-end-2{grid-column-end:2}.cds--max\\:col-end-3{grid-column-end:3}.cds--max\\:col-end-4{grid-column-end:4}.cds--max\\:col-end-5{grid-column-end:5}.cds--max\\:col-end-6{grid-column-end:6}.cds--max\\:col-end-7{grid-column-end:7}.cds--max\\:col-end-8{grid-column-end:8}.cds--max\\:col-end-9{grid-column-end:9}.cds--max\\:col-end-10{grid-column-end:10}.cds--max\\:col-end-11{grid-column-end:11}.cds--max\\:col-end-12{grid-column-end:12}.cds--max\\:col-end-13{grid-column-end:13}.cds--max\\:col-end-14{grid-column-end:14}.cds--max\\:col-end-15{grid-column-end:15}.cds--max\\:col-end-16{grid-column-end:16}.cds--max\\:col-end-17{grid-column-end:17}.cds--max\\:col-start-auto{grid-column-start:auto}.cds--max\\:col-end-auto{grid-column-end:auto}}:host(cds-column-hang){display:block}"]);
10
+ var column_hang_default = css([":root{--cds-grid-gutter:2rem;--cds-grid-columns:4;--cds-grid-margin:0}@media (min-width:42rem){:root{--cds-grid-columns:8;--cds-grid-margin:1rem}}@media (min-width:66rem){:root{--cds-grid-columns:16}}@media (min-width:99rem){:root{--cds-grid-margin:1.5rem}}.cds--css-grid{--cds-grid-gutter-start:calc(var(--cds-grid-gutter)/2);--cds-grid-gutter-end:calc(var(--cds-grid-gutter)/2);--cds-grid-column-hang:calc(var(--cds-grid-gutter)/2);display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--cds-grid-margin)}.cds--css-grid--full-width{max-inline-size:100%}.cds--css-grid-column{--cds-grid-mode-start:var(--cds-grid-gutter-start);--cds-grid-mode-end:var(--cds-grid-gutter-end);margin-inline:var(--cds-grid-gutter-start) var(--cds-grid-gutter-end)}[dir=rtl] .cds--css-grid-column{margin-inline:var(--cds-grid-gutter-end) var(--cds-grid-gutter-start)}.cds--css-grid--narrow{--cds-grid-gutter-start:0rem}.cds--css-grid--condensed{--cds-grid-gutter:0.0625rem;--cds-grid-column-hang:0.96875rem}.cds--css-grid--with-row-gap{row-gap:var(--cds-grid-gutter)}.cds--css-grid--narrow.cds--css-grid--with-row-gap{row-gap:calc(var(--cds-grid-gutter)/2)}.cds--css-grid--start{margin-inline-start:0}.cds--css-grid--end{margin-inline-end:0}.cds--subgrid{display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));margin-inline:calc(var(--cds-grid-mode-start)*-1) calc(var(--cds-grid-mode-end)*-1)}[dir=rtl] .cds--subgrid{margin-inline:calc(var(--cds-grid-mode-end)*-1) calc(var(--cds-grid-mode-start)*-1)}.cds--subgrid--wide{--cds-grid-gutter-start:1rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:0}.cds--subgrid--narrow{--cds-grid-gutter-start:0rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:1rem}.cds--subgrid--condensed{--cds-grid-gutter:0.0625rem;--cds-grid-gutter-start:0.03125rem;--cds-grid-gutter-end:0.03125rem;--cds-grid-column-hang:0.96875rem}.cds--subgrid--with-row-gap{row-gap:2rem}.cds--subgrid--narrow.cds--subgrid--with-row-gap{row-gap:1rem}.cds--subgrid--condensed.cds--subgrid--with-row-gap{row-gap:.0625rem}.cds--grid-column-hang,:host(cds-column-hang){margin-inline-start:var(--cds-grid-column-hang)}[dir=rtl] .cds--grid-column-hang,[dir=rtl] :host(cds-column-hang){margin-inline:initial var(--cds-grid-column-hang)}.cds--col-span-0{display:none}.cds--col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--sm\\:col-span-0{display:none}.cds--sm\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--sm\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--sm\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--sm\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--sm\\:col-span-auto{grid-column:auto}.cds--sm\\:col-span-100{grid-column:1/-1}.cds--sm\\:col-span-75{--cds-grid-columns:3;grid-column:span 3/span 3}.cds--sm\\:col-span-50{--cds-grid-columns:2;grid-column:span 2/span 2}.cds--sm\\:col-span-25{--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--md\\:col-span-0{display:none}.cds--md\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--md\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--md\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--md\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--md\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--md\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--md\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--md\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--md\\:col-span-auto{grid-column:auto}.cds--md\\:col-span-100{grid-column:1/-1}.cds--md\\:col-span-75{--cds-grid-columns:6;grid-column:span 6/span 6}.cds--md\\:col-span-50{--cds-grid-columns:4;grid-column:span 4/span 4}.cds--md\\:col-span-25{--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-0{display:none}.cds--lg\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--lg\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--lg\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--lg\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--lg\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--lg\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--lg\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--lg\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--lg\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--lg\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--lg\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--lg\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--lg\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--lg\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--lg\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--lg\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--lg\\:col-span-auto{grid-column:auto}.cds--lg\\:col-span-100{grid-column:1/-1}.cds--lg\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--lg\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--lg\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-0{display:none}.cds--xlg\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--xlg\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--xlg\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--xlg\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--xlg\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--xlg\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--xlg\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--xlg\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--xlg\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--xlg\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--xlg\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--xlg\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--xlg\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--xlg\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--xlg\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--xlg\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--xlg\\:col-span-auto{grid-column:auto}.cds--xlg\\:col-span-100{grid-column:1/-1}.cds--xlg\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--xlg\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--xlg\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-0{display:none}.cds--max\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--max\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--max\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--max\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--max\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--max\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--max\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--max\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--max\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--max\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--max\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--max\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--max\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--max\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--max\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--max\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--max\\:col-span-auto{grid-column:auto}.cds--max\\:col-span-100{grid-column:1/-1}.cds--max\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--max\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--max\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-span-auto{grid-column:auto}.cds--col-span-100{grid-column:1/-1}.cds--col-span-75{--cds-grid-columns:3;grid-column:span 3/span 3}@media (min-width:42rem){.cds--col-span-75{--cds-grid-columns:6;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}}.cds--col-span-50{--cds-grid-columns:2;grid-column:span 2/span 2}@media (min-width:42rem){.cds--col-span-50{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}}.cds--col-span-25{--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--col-span-25{--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-start-1{grid-column-start:1}.cds--col-start-2{grid-column-start:2}.cds--col-start-3{grid-column-start:3}.cds--col-start-4{grid-column-start:4}.cds--col-start-5{grid-column-start:5}.cds--col-start-6{grid-column-start:6}.cds--col-start-7{grid-column-start:7}.cds--col-start-8{grid-column-start:8}.cds--col-start-9{grid-column-start:9}.cds--col-start-10{grid-column-start:10}.cds--col-start-11{grid-column-start:11}.cds--col-start-12{grid-column-start:12}.cds--col-start-13{grid-column-start:13}.cds--col-start-14{grid-column-start:14}.cds--col-start-15{grid-column-start:15}.cds--col-start-16{grid-column-start:16}.cds--col-end-2{grid-column-end:2}.cds--col-end-3{grid-column-end:3}.cds--col-end-4{grid-column-end:4}.cds--col-end-5{grid-column-end:5}.cds--col-end-6{grid-column-end:6}.cds--col-end-7{grid-column-end:7}.cds--col-end-8{grid-column-end:8}.cds--col-end-9{grid-column-end:9}.cds--col-end-10{grid-column-end:10}.cds--col-end-11{grid-column-end:11}.cds--col-end-12{grid-column-end:12}.cds--col-end-13{grid-column-end:13}.cds--col-end-14{grid-column-end:14}.cds--col-end-15{grid-column-end:15}.cds--col-end-16{grid-column-end:16}.cds--col-end-17{grid-column-end:17}.cds--col-start-auto{grid-column-start:auto}.cds--col-end-auto{grid-column-end:auto}.cds--sm\\:col-start-1{grid-column-start:1}.cds--sm\\:col-start-2{grid-column-start:2}.cds--sm\\:col-start-3{grid-column-start:3}.cds--sm\\:col-start-4{grid-column-start:4}.cds--sm\\:col-start-5{grid-column-start:5}.cds--sm\\:col-start-6{grid-column-start:6}.cds--sm\\:col-start-7{grid-column-start:7}.cds--sm\\:col-start-8{grid-column-start:8}.cds--sm\\:col-start-9{grid-column-start:9}.cds--sm\\:col-start-10{grid-column-start:10}.cds--sm\\:col-start-11{grid-column-start:11}.cds--sm\\:col-start-12{grid-column-start:12}.cds--sm\\:col-start-13{grid-column-start:13}.cds--sm\\:col-start-14{grid-column-start:14}.cds--sm\\:col-start-15{grid-column-start:15}.cds--sm\\:col-start-16{grid-column-start:16}.cds--sm\\:col-end-2{grid-column-end:2}.cds--sm\\:col-end-3{grid-column-end:3}.cds--sm\\:col-end-4{grid-column-end:4}.cds--sm\\:col-end-5{grid-column-end:5}.cds--sm\\:col-end-6{grid-column-end:6}.cds--sm\\:col-end-7{grid-column-end:7}.cds--sm\\:col-end-8{grid-column-end:8}.cds--sm\\:col-end-9{grid-column-end:9}.cds--sm\\:col-end-10{grid-column-end:10}.cds--sm\\:col-end-11{grid-column-end:11}.cds--sm\\:col-end-12{grid-column-end:12}.cds--sm\\:col-end-13{grid-column-end:13}.cds--sm\\:col-end-14{grid-column-end:14}.cds--sm\\:col-end-15{grid-column-end:15}.cds--sm\\:col-end-16{grid-column-end:16}.cds--sm\\:col-end-17{grid-column-end:17}.cds--sm\\:col-start-auto{grid-column-start:auto}.cds--sm\\:col-end-auto{grid-column-end:auto}@media (min-width:42rem){.cds--md\\:col-start-1{grid-column-start:1}.cds--md\\:col-start-2{grid-column-start:2}.cds--md\\:col-start-3{grid-column-start:3}.cds--md\\:col-start-4{grid-column-start:4}.cds--md\\:col-start-5{grid-column-start:5}.cds--md\\:col-start-6{grid-column-start:6}.cds--md\\:col-start-7{grid-column-start:7}.cds--md\\:col-start-8{grid-column-start:8}.cds--md\\:col-start-9{grid-column-start:9}.cds--md\\:col-start-10{grid-column-start:10}.cds--md\\:col-start-11{grid-column-start:11}.cds--md\\:col-start-12{grid-column-start:12}.cds--md\\:col-start-13{grid-column-start:13}.cds--md\\:col-start-14{grid-column-start:14}.cds--md\\:col-start-15{grid-column-start:15}.cds--md\\:col-start-16{grid-column-start:16}.cds--md\\:col-end-2{grid-column-end:2}.cds--md\\:col-end-3{grid-column-end:3}.cds--md\\:col-end-4{grid-column-end:4}.cds--md\\:col-end-5{grid-column-end:5}.cds--md\\:col-end-6{grid-column-end:6}.cds--md\\:col-end-7{grid-column-end:7}.cds--md\\:col-end-8{grid-column-end:8}.cds--md\\:col-end-9{grid-column-end:9}.cds--md\\:col-end-10{grid-column-end:10}.cds--md\\:col-end-11{grid-column-end:11}.cds--md\\:col-end-12{grid-column-end:12}.cds--md\\:col-end-13{grid-column-end:13}.cds--md\\:col-end-14{grid-column-end:14}.cds--md\\:col-end-15{grid-column-end:15}.cds--md\\:col-end-16{grid-column-end:16}.cds--md\\:col-end-17{grid-column-end:17}.cds--md\\:col-start-auto{grid-column-start:auto}.cds--md\\:col-end-auto{grid-column-end:auto}}@media (min-width:66rem){.cds--lg\\:col-start-1{grid-column-start:1}.cds--lg\\:col-start-2{grid-column-start:2}.cds--lg\\:col-start-3{grid-column-start:3}.cds--lg\\:col-start-4{grid-column-start:4}.cds--lg\\:col-start-5{grid-column-start:5}.cds--lg\\:col-start-6{grid-column-start:6}.cds--lg\\:col-start-7{grid-column-start:7}.cds--lg\\:col-start-8{grid-column-start:8}.cds--lg\\:col-start-9{grid-column-start:9}.cds--lg\\:col-start-10{grid-column-start:10}.cds--lg\\:col-start-11{grid-column-start:11}.cds--lg\\:col-start-12{grid-column-start:12}.cds--lg\\:col-start-13{grid-column-start:13}.cds--lg\\:col-start-14{grid-column-start:14}.cds--lg\\:col-start-15{grid-column-start:15}.cds--lg\\:col-start-16{grid-column-start:16}.cds--lg\\:col-end-2{grid-column-end:2}.cds--lg\\:col-end-3{grid-column-end:3}.cds--lg\\:col-end-4{grid-column-end:4}.cds--lg\\:col-end-5{grid-column-end:5}.cds--lg\\:col-end-6{grid-column-end:6}.cds--lg\\:col-end-7{grid-column-end:7}.cds--lg\\:col-end-8{grid-column-end:8}.cds--lg\\:col-end-9{grid-column-end:9}.cds--lg\\:col-end-10{grid-column-end:10}.cds--lg\\:col-end-11{grid-column-end:11}.cds--lg\\:col-end-12{grid-column-end:12}.cds--lg\\:col-end-13{grid-column-end:13}.cds--lg\\:col-end-14{grid-column-end:14}.cds--lg\\:col-end-15{grid-column-end:15}.cds--lg\\:col-end-16{grid-column-end:16}.cds--lg\\:col-end-17{grid-column-end:17}.cds--lg\\:col-start-auto{grid-column-start:auto}.cds--lg\\:col-end-auto{grid-column-end:auto}}@media (min-width:82rem){.cds--xlg\\:col-start-1{grid-column-start:1}.cds--xlg\\:col-start-2{grid-column-start:2}.cds--xlg\\:col-start-3{grid-column-start:3}.cds--xlg\\:col-start-4{grid-column-start:4}.cds--xlg\\:col-start-5{grid-column-start:5}.cds--xlg\\:col-start-6{grid-column-start:6}.cds--xlg\\:col-start-7{grid-column-start:7}.cds--xlg\\:col-start-8{grid-column-start:8}.cds--xlg\\:col-start-9{grid-column-start:9}.cds--xlg\\:col-start-10{grid-column-start:10}.cds--xlg\\:col-start-11{grid-column-start:11}.cds--xlg\\:col-start-12{grid-column-start:12}.cds--xlg\\:col-start-13{grid-column-start:13}.cds--xlg\\:col-start-14{grid-column-start:14}.cds--xlg\\:col-start-15{grid-column-start:15}.cds--xlg\\:col-start-16{grid-column-start:16}.cds--xlg\\:col-end-2{grid-column-end:2}.cds--xlg\\:col-end-3{grid-column-end:3}.cds--xlg\\:col-end-4{grid-column-end:4}.cds--xlg\\:col-end-5{grid-column-end:5}.cds--xlg\\:col-end-6{grid-column-end:6}.cds--xlg\\:col-end-7{grid-column-end:7}.cds--xlg\\:col-end-8{grid-column-end:8}.cds--xlg\\:col-end-9{grid-column-end:9}.cds--xlg\\:col-end-10{grid-column-end:10}.cds--xlg\\:col-end-11{grid-column-end:11}.cds--xlg\\:col-end-12{grid-column-end:12}.cds--xlg\\:col-end-13{grid-column-end:13}.cds--xlg\\:col-end-14{grid-column-end:14}.cds--xlg\\:col-end-15{grid-column-end:15}.cds--xlg\\:col-end-16{grid-column-end:16}.cds--xlg\\:col-end-17{grid-column-end:17}.cds--xlg\\:col-start-auto{grid-column-start:auto}.cds--xlg\\:col-end-auto{grid-column-end:auto}}@media (min-width:99rem){.cds--max\\:col-start-1{grid-column-start:1}.cds--max\\:col-start-2{grid-column-start:2}.cds--max\\:col-start-3{grid-column-start:3}.cds--max\\:col-start-4{grid-column-start:4}.cds--max\\:col-start-5{grid-column-start:5}.cds--max\\:col-start-6{grid-column-start:6}.cds--max\\:col-start-7{grid-column-start:7}.cds--max\\:col-start-8{grid-column-start:8}.cds--max\\:col-start-9{grid-column-start:9}.cds--max\\:col-start-10{grid-column-start:10}.cds--max\\:col-start-11{grid-column-start:11}.cds--max\\:col-start-12{grid-column-start:12}.cds--max\\:col-start-13{grid-column-start:13}.cds--max\\:col-start-14{grid-column-start:14}.cds--max\\:col-start-15{grid-column-start:15}.cds--max\\:col-start-16{grid-column-start:16}.cds--max\\:col-end-2{grid-column-end:2}.cds--max\\:col-end-3{grid-column-end:3}.cds--max\\:col-end-4{grid-column-end:4}.cds--max\\:col-end-5{grid-column-end:5}.cds--max\\:col-end-6{grid-column-end:6}.cds--max\\:col-end-7{grid-column-end:7}.cds--max\\:col-end-8{grid-column-end:8}.cds--max\\:col-end-9{grid-column-end:9}.cds--max\\:col-end-10{grid-column-end:10}.cds--max\\:col-end-11{grid-column-end:11}.cds--max\\:col-end-12{grid-column-end:12}.cds--max\\:col-end-13{grid-column-end:13}.cds--max\\:col-end-14{grid-column-end:14}.cds--max\\:col-end-15{grid-column-end:15}.cds--max\\:col-end-16{grid-column-end:16}.cds--max\\:col-end-17{grid-column-end:17}.cds--max\\:col-start-auto{grid-column-start:auto}.cds--max\\:col-end-auto{grid-column-end:auto}}:host(cds-column-hang){display:block}"]);
11
11
  //#endregion
12
12
  export { column_hang_default as default };
13
13
 
@@ -31,6 +31,11 @@ export { GRID_ALIGNMENT } from './defs';
31
31
  * Remove the default max width that the grid has set
32
32
  */
33
33
  fullWidth: boolean;
34
+ /**
35
+ * Add a row gap to the grid that matches the current gutter size.
36
+ * This is useful when you want consistent vertical spacing between rows.
37
+ */
38
+ withRowGap: boolean;
34
39
  gridContextIn?: GridContext;
35
40
  gridContext: GridContext;
36
41
  render(): import("lit-html").TemplateResult<1>;
@@ -1 +1 @@
1
- {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAK1D,OAAO,EAAE,iBAAiB,EAAiB,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC;;;;GAIG,CAAC,cACE,OAAQ,SAAQ,UAAU;IAC9B;;OAEG;IAEH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,UAAS;IAIX,aAAa,CAAC,EAAE,WAAW,CAAC;IAI5B,WAAW,EAAE,WAAW,CAE7B;IAEF,MAAM;IAsBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAK1D,OAAO,EAAE,iBAAiB,EAAiB,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC;;;;GAIG,CAAC,cACE,OAAQ,SAAQ,UAAU;IAC9B;;OAEG;IAEH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,UAAU,UAAS;IAIZ,aAAa,CAAC,EAAE,WAAW,CAAC;IAI5B,WAAW,EAAE,WAAW,CAE7B;IAEF,MAAM;IA0BN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC"}
@@ -31,6 +31,7 @@ import { consume, provide } from "@lit/context";
31
31
  this.condensed = false;
32
32
  this.narrow = false;
33
33
  this.fullWidth = false;
34
+ this.withRowGap = false;
34
35
  this.gridContext = { subgrid: false };
35
36
  }
36
37
  render() {
@@ -39,7 +40,11 @@ import { consume, provide } from "@lit/context";
39
40
  let subMode = "wide";
40
41
  if (this.narrow) subMode = "narrow";
41
42
  else if (this.condensed) subMode = "condensed";
42
- return html`<div subgrid mode=${subMode} part="grid">
43
+ return html`<div
44
+ subgrid
45
+ mode=${subMode}
46
+ ?with-row-gap=${this.withRowGap}
47
+ part="grid">
43
48
  <slot></slot>
44
49
  </div> `;
45
50
  } else return html`<div grid part="grid">
@@ -67,6 +72,11 @@ __decorate([property({
67
72
  attribute: "full-width",
68
73
  type: Boolean
69
74
  })], CDSGrid.prototype, "fullWidth", void 0);
75
+ __decorate([property({
76
+ reflect: true,
77
+ attribute: "with-row-gap",
78
+ type: Boolean
79
+ })], CDSGrid.prototype, "withRowGap", void 0);
70
80
  __decorate([consume({
71
81
  context: gridContext,
72
82
  subscribe: true
@@ -1 +1 @@
1
- {"version":3,"file":"grid.js","names":["styles","customElement"],"sources":["../../../src/components/grid/grid.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { consume, provide } from '@lit/context';\nimport { GridContext, gridContext } from './grid-context';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './grid.scss?lit';\nimport { GridAlignmentType, SUB_GRID_MODE } from './defs';\nexport { GRID_ALIGNMENT } from './defs';\n/**\n * The grid component.\n *\n * @element cds-grid\n */ @customElement(`${prefix}-grid`)\nclass CDSGrid extends LitElement {\n /**\n * Specify grid alignment. Default is center\n */\n @property({ reflect: true, type: String })\n align?: GridAlignmentType;\n\n /**\n * Collapse the gutter to 1px. Useful for fluid layouts.\n * Rows have 1px of margin between them to match gutter.\n */\n @property({ reflect: true, type: Boolean })\n condensed = false;\n\n /**\n * Container hangs 16px into the gutter. Useful for\n * typographic alignment with and without containers.\n */\n @property({ reflect: true, type: Boolean })\n narrow = false;\n\n /**\n * Remove the default max width that the grid has set\n */\n @property({ reflect: true, attribute: 'full-width', type: Boolean })\n fullWidth = false;\n\n @consume({ context: gridContext, subscribe: true })\n @property({ attribute: false })\n public gridContextIn?: GridContext;\n\n @provide({ context: gridContext })\n @property({ attribute: false })\n public gridContext: GridContext = {\n subgrid: false,\n };\n\n render() {\n this.gridContext = { subgrid: true };\n\n if (this.gridContextIn?.subgrid) {\n let subMode = SUB_GRID_MODE.WIDE;\n if (this.narrow) {\n subMode = SUB_GRID_MODE.NARROW;\n } else if (this.condensed) {\n subMode = SUB_GRID_MODE.CONDENSED;\n }\n return html`<div subgrid mode=${subMode} part=\"grid\">\n <slot></slot>\n </div> `;\n } else {\n // Grid styling added to contained components, allowing CSS Grid\n // to affect its own slot content.\n return html`<div grid part=\"grid\">\n <slot></slot>\n </div> `;\n }\n }\n\n static styles = styles;\n}\n\nexport default CDSGrid;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBI,IAAA,UAAA,MACE,gBAAgB,WAAW;;;mBAYnB;gBAOH;mBAMG;qBAQsB,EAChC,SAAS,OACV;;CAED,SAAS;AACP,OAAK,cAAc,EAAE,SAAS,MAAM;AAEpC,MAAI,KAAK,eAAe,SAAS;GAC/B,IAAI,UAAA;AACJ,OAAI,KAAK,OACP,WAAA;YACS,KAAK,UACd,WAAA;AAEF,UAAO,IAAI,qBAAqB,QAAQ;;;QAMxC,QAAO,IAAI;;;;;gBAMCA;;;YAvDf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAOzC,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,SAAS;CAAM,WAAW;CAAc,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAGnE,QAAQ;CAAE,SAAS;CAAa,WAAW;CAAM,CAAC,EAClD,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,QAAA,WAAA,iBAAA,KAAA,EAAA;YAG9B,QAAQ,EAAE,SAAS,aAAa,CAAC,EACjC,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,QAAA,WAAA,eAAA,KAAA,EAAA;sBAjC5BC,cAAc,WAAiB,CAAA,EAAA,QAAA;AA+DpC,IAAA,eAAe"}
1
+ {"version":3,"file":"grid.js","names":["styles","customElement"],"sources":["../../../src/components/grid/grid.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { consume, provide } from '@lit/context';\nimport { GridContext, gridContext } from './grid-context';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './grid.scss?lit';\nimport { GridAlignmentType, SUB_GRID_MODE } from './defs';\nexport { GRID_ALIGNMENT } from './defs';\n/**\n * The grid component.\n *\n * @element cds-grid\n */ @customElement(`${prefix}-grid`)\nclass CDSGrid extends LitElement {\n /**\n * Specify grid alignment. Default is center\n */\n @property({ reflect: true, type: String })\n align?: GridAlignmentType;\n\n /**\n * Collapse the gutter to 1px. Useful for fluid layouts.\n * Rows have 1px of margin between them to match gutter.\n */\n @property({ reflect: true, type: Boolean })\n condensed = false;\n\n /**\n * Container hangs 16px into the gutter. Useful for\n * typographic alignment with and without containers.\n */\n @property({ reflect: true, type: Boolean })\n narrow = false;\n\n /**\n * Remove the default max width that the grid has set\n */\n @property({ reflect: true, attribute: 'full-width', type: Boolean })\n fullWidth = false;\n\n /**\n * Add a row gap to the grid that matches the current gutter size.\n * This is useful when you want consistent vertical spacing between rows.\n */\n @property({ reflect: true, attribute: 'with-row-gap', type: Boolean })\n withRowGap = false;\n\n @consume({ context: gridContext, subscribe: true })\n @property({ attribute: false })\n public gridContextIn?: GridContext;\n\n @provide({ context: gridContext })\n @property({ attribute: false })\n public gridContext: GridContext = {\n subgrid: false,\n };\n\n render() {\n this.gridContext = { subgrid: true };\n\n if (this.gridContextIn?.subgrid) {\n let subMode = SUB_GRID_MODE.WIDE;\n if (this.narrow) {\n subMode = SUB_GRID_MODE.NARROW;\n } else if (this.condensed) {\n subMode = SUB_GRID_MODE.CONDENSED;\n }\n return html`<div\n subgrid\n mode=${subMode}\n ?with-row-gap=${this.withRowGap}\n part=\"grid\">\n <slot></slot>\n </div> `;\n } else {\n // Grid styling added to contained components, allowing CSS Grid\n // to affect its own slot content.\n return html`<div grid part=\"grid\">\n <slot></slot>\n </div> `;\n }\n }\n\n static styles = styles;\n}\n\nexport default CDSGrid;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBI,IAAA,UAAA,MACE,gBAAgB,WAAW;;;mBAYnB;gBAOH;mBAMG;oBAOC;qBAQqB,EAChC,SAAS,OACV;;CAED,SAAS;AACP,OAAK,cAAc,EAAE,SAAS,MAAM;AAEpC,MAAI,KAAK,eAAe,SAAS;GAC/B,IAAI,UAAA;AACJ,OAAI,KAAK,OACP,WAAA;YACS,KAAK,UACd,WAAA;AAEF,UAAO,IAAI;;eAEF,QAAQ;wBACC,KAAK,WAAW;;;;QAOlC,QAAO,IAAI;;;;;gBAMCA;;;YAlEf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAOzC,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,SAAS;CAAM,WAAW;CAAc,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAOnE,SAAS;CAAE,SAAS;CAAM,WAAW;CAAgB,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,cAAA,KAAA,EAAA;YAGrE,QAAQ;CAAE,SAAS;CAAa,WAAW;CAAM,CAAC,EAClD,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,QAAA,WAAA,iBAAA,KAAA,EAAA;YAG9B,QAAQ,EAAE,SAAS,aAAa,CAAC,EACjC,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,QAAA,WAAA,eAAA,KAAA,EAAA;sBAxC5BC,cAAc,WAAiB,CAAA,EAAA,QAAA;AA0EpC,IAAA,eAAe"}
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { css } from "lit";
9
9
  //#region src/components/grid/grid.scss?lit
10
- var grid_default = css([":root{--cds-grid-gutter:2rem;--cds-grid-columns:4;--cds-grid-margin:0}@media (min-width:42rem){:root{--cds-grid-columns:8;--cds-grid-margin:1rem}}@media (min-width:66rem){:root{--cds-grid-columns:16}}@media (min-width:99rem){:root{--cds-grid-margin:1.5rem}}.cds--css-grid,:host(cds-grid) [grid]{--cds-grid-gutter-start:calc(var(--cds-grid-gutter)/2);--cds-grid-gutter-end:calc(var(--cds-grid-gutter)/2);--cds-grid-column-hang:calc(var(--cds-grid-gutter)/2);display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--cds-grid-margin)}.cds--css-grid--full-width,:host(cds-grid[full-width]) [grid]{max-inline-size:100%}.cds--css-grid-column,:host(cds-grid) ::slotted(cds-column){--cds-grid-mode-start:var(--cds-grid-gutter-start);--cds-grid-mode-end:var(--cds-grid-gutter-end);margin-inline:var(--cds-grid-gutter-start) var(--cds-grid-gutter-end)}:host(cds-grid) [dir=rtl] ::slotted(cds-column),[dir=rtl] .cds--css-grid-column{margin-inline:var(--cds-grid-gutter-end) var(--cds-grid-gutter-start)}.cds--css-grid--narrow,:host(cds-grid[narrow]) [grid]{--cds-grid-gutter-start:0rem}.cds--css-grid--condensed,:host(cds-grid[condensed]) [grid]{--cds-grid-gutter:0.0625rem;--cds-grid-column-hang:0.96875rem}.cds--css-grid--start,:host(cds-grid[align=start]) [grid]{margin-inline-start:0}.cds--css-grid--end,:host(cds-grid[align=end]) [grid]{margin-inline-end:0}.cds--subgrid,:host(cds-grid) [subgrid]{display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));margin-inline:calc(var(--cds-grid-mode-start)*-1) calc(var(--cds-grid-mode-end)*-1)}:host(cds-grid) [dir=rtl] [subgrid],[dir=rtl] .cds--subgrid{margin-inline:calc(var(--cds-grid-mode-end)*-1) calc(var(--cds-grid-mode-start)*-1)}.cds--subgrid--wide,:host(cds-grid) [subgrid][mode=wide]{--cds-grid-gutter-start:1rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:0}.cds--subgrid--narrow,:host(cds-grid) [subgrid][mode=narrow]{--cds-grid-gutter-start:0rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:1rem}.cds--subgrid--condensed,:host(cds-grid) [subgrid][mode=condensed]{--cds-grid-gutter-start:0.03125rem;--cds-grid-gutter-end:0.03125rem;--cds-grid-column-hang:0.96875rem}.cds--grid-column-hang{margin-inline-start:var(--cds-grid-column-hang)}[dir=rtl] .cds--grid-column-hang{margin-inline:initial var(--cds-grid-column-hang)}.cds--col-span-0{display:none}.cds--col-span-1,:host(cds-grid) ::slotted(cds-column[span=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--col-span-2,:host(cds-grid) ::slotted(cds-column[span=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--col-span-3,:host(cds-grid) ::slotted(cds-column[span=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--col-span-4,:host(cds-grid) ::slotted(cds-column[span=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--col-span-5,:host(cds-grid) ::slotted(cds-column[span=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--col-span-6,:host(cds-grid) ::slotted(cds-column[span=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--col-span-7,:host(cds-grid) ::slotted(cds-column[span=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--col-span-8,:host(cds-grid) ::slotted(cds-column[span=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--col-span-9,:host(cds-grid) ::slotted(cds-column[span=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--col-span-10,:host(cds-grid) ::slotted(cds-column[span=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--col-span-11,:host(cds-grid) ::slotted(cds-column[span=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--col-span-12,:host(cds-grid) ::slotted(cds-column[span=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--col-span-13,:host(cds-grid) ::slotted(cds-column[span=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--col-span-14,:host(cds-grid) ::slotted(cds-column[span=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--col-span-15,:host(cds-grid) ::slotted(cds-column[span=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--col-span-16,:host(cds-grid) ::slotted(cds-column[span=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--sm\\:col-span-0,:host(cds-grid) ::slotted(cds-column[sm*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[sm=\"0\"]){display:none}.cds--sm\\:col-span-1,:host(cds-grid) ::slotted(cds-column[sm*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[sm=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--sm\\:col-span-2,:host(cds-grid) ::slotted(cds-column[sm*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[sm=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--sm\\:col-span-3,:host(cds-grid) ::slotted(cds-column[sm*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[sm=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--sm\\:col-span-4,:host(cds-grid) ::slotted(cds-column[sm*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[sm=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--sm\\:col-span-auto{grid-column:auto}.cds--sm\\:col-span-100,:host(cds-grid) ::slotted(cds-column[sm*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"100%\"]){grid-column:1/-1}.cds--sm\\:col-span-75,:host(cds-grid) ::slotted(cds-column[sm*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"75%\"]){--cds-grid-columns:3;grid-column:span 3/span 3}.cds--sm\\:col-span-50,:host(cds-grid) ::slotted(cds-column[sm*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"50%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}.cds--sm\\:col-span-25,:host(cds-grid) ::slotted(cds-column[sm*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"25%\"]){--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--md\\:col-span-0,:host(cds-grid) ::slotted(cds-column[md*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[md=\"0\"]){display:none}}@media (min-width:42rem){.cds--md\\:col-span-1,:host(cds-grid) ::slotted(cds-column[md*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[md=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:42rem){.cds--md\\:col-span-2,:host(cds-grid) ::slotted(cds-column[md*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[md=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:42rem){.cds--md\\:col-span-3,:host(cds-grid) ::slotted(cds-column[md*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[md=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:42rem){.cds--md\\:col-span-4,:host(cds-grid) ::slotted(cds-column[md*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[md=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:42rem){.cds--md\\:col-span-5,:host(cds-grid) ::slotted(cds-column[md*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[md=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:42rem){.cds--md\\:col-span-6,:host(cds-grid) ::slotted(cds-column[md*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[md=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:42rem){.cds--md\\:col-span-7,:host(cds-grid) ::slotted(cds-column[md*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[md=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:42rem){.cds--md\\:col-span-8,:host(cds-grid) ::slotted(cds-column[md*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[md=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:42rem){.cds--md\\:col-span-auto{grid-column:auto}.cds--md\\:col-span-100,:host(cds-grid) ::slotted(cds-column[md*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[md=\"100%\"]){grid-column:1/-1}.cds--md\\:col-span-75,:host(cds-grid) ::slotted(cds-column[md*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[md=\"75%\"]){--cds-grid-columns:6;grid-column:span 6/span 6}.cds--md\\:col-span-50,:host(cds-grid) ::slotted(cds-column[md*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[md=\"50%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}.cds--md\\:col-span-25,:host(cds-grid) ::slotted(cds-column[md*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[md=\"25%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-0,:host(cds-grid) ::slotted(cds-column[lg*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[lg=\"0\"]){display:none}}@media (min-width:66rem){.cds--lg\\:col-span-1,:host(cds-grid) ::slotted(cds-column[lg*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[lg=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:66rem){.cds--lg\\:col-span-2,:host(cds-grid) ::slotted(cds-column[lg*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[lg=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-3,:host(cds-grid) ::slotted(cds-column[lg*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[lg=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:66rem){.cds--lg\\:col-span-4,:host(cds-grid) ::slotted(cds-column[lg*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[lg=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--lg\\:col-span-5,:host(cds-grid) ::slotted(cds-column[lg*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[lg=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:66rem){.cds--lg\\:col-span-6,:host(cds-grid) ::slotted(cds-column[lg*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[lg=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--lg\\:col-span-7,:host(cds-grid) ::slotted(cds-column[lg*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[lg=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:66rem){.cds--lg\\:col-span-8,:host(cds-grid) ::slotted(cds-column[lg*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[lg=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:66rem){.cds--lg\\:col-span-9,:host(cds-grid) ::slotted(cds-column[lg*=\"span:9\"]),:host(cds-grid) ::slotted(cds-column[lg=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}}@media (min-width:66rem){.cds--lg\\:col-span-10,:host(cds-grid) ::slotted(cds-column[lg*=\"span:10\"]),:host(cds-grid) ::slotted(cds-column[lg=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}}@media (min-width:66rem){.cds--lg\\:col-span-11,:host(cds-grid) ::slotted(cds-column[lg*=\"span:11\"]),:host(cds-grid) ::slotted(cds-column[lg=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}}@media (min-width:66rem){.cds--lg\\:col-span-12,:host(cds-grid) ::slotted(cds-column[lg*=\"span:12\"]),:host(cds-grid) ::slotted(cds-column[lg=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}}@media (min-width:66rem){.cds--lg\\:col-span-13,:host(cds-grid) ::slotted(cds-column[lg*=\"span:13\"]),:host(cds-grid) ::slotted(cds-column[lg=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}}@media (min-width:66rem){.cds--lg\\:col-span-14,:host(cds-grid) ::slotted(cds-column[lg*=\"span:14\"]),:host(cds-grid) ::slotted(cds-column[lg=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}}@media (min-width:66rem){.cds--lg\\:col-span-15,:host(cds-grid) ::slotted(cds-column[lg*=\"span:15\"]),:host(cds-grid) ::slotted(cds-column[lg=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}}@media (min-width:66rem){.cds--lg\\:col-span-16,:host(cds-grid) ::slotted(cds-column[lg*=\"span:16\"]),:host(cds-grid) ::slotted(cds-column[lg=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}}@media (min-width:66rem){.cds--lg\\:col-span-auto{grid-column:auto}.cds--lg\\:col-span-100,:host(cds-grid) ::slotted(cds-column[lg*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"100%\"]){grid-column:1/-1}.cds--lg\\:col-span-75,:host(cds-grid) ::slotted(cds-column[lg*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}.cds--lg\\:col-span-50,:host(cds-grid) ::slotted(cds-column[lg*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}.cds--lg\\:col-span-25,:host(cds-grid) ::slotted(cds-column[lg*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-0,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"0\"]){display:none}}@media (min-width:82rem){.cds--xlg\\:col-span-1,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:82rem){.cds--xlg\\:col-span-2,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:82rem){.cds--xlg\\:col-span-3,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:82rem){.cds--xlg\\:col-span-4,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-5,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:82rem){.cds--xlg\\:col-span-6,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:82rem){.cds--xlg\\:col-span-7,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:82rem){.cds--xlg\\:col-span-8,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:82rem){.cds--xlg\\:col-span-9,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:9\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}}@media (min-width:82rem){.cds--xlg\\:col-span-10,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:10\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}}@media (min-width:82rem){.cds--xlg\\:col-span-11,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:11\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}}@media (min-width:82rem){.cds--xlg\\:col-span-12,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:12\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}}@media (min-width:82rem){.cds--xlg\\:col-span-13,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:13\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}}@media (min-width:82rem){.cds--xlg\\:col-span-14,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:14\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}}@media (min-width:82rem){.cds--xlg\\:col-span-15,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:15\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}}@media (min-width:82rem){.cds--xlg\\:col-span-16,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:16\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}}@media (min-width:82rem){.cds--xlg\\:col-span-auto{grid-column:auto}.cds--xlg\\:col-span-100,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"100%\"]){grid-column:1/-1}.cds--xlg\\:col-span-75,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}.cds--xlg\\:col-span-50,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}.cds--xlg\\:col-span-25,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-0,:host(cds-grid) ::slotted(cds-column[max*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[max=\"0\"]){display:none}}@media (min-width:99rem){.cds--max\\:col-span-1,:host(cds-grid) ::slotted(cds-column[max*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[max=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:99rem){.cds--max\\:col-span-2,:host(cds-grid) ::slotted(cds-column[max*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[max=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:99rem){.cds--max\\:col-span-3,:host(cds-grid) ::slotted(cds-column[max*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[max=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:99rem){.cds--max\\:col-span-4,:host(cds-grid) ::slotted(cds-column[max*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[max=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-5,:host(cds-grid) ::slotted(cds-column[max*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[max=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:99rem){.cds--max\\:col-span-6,:host(cds-grid) ::slotted(cds-column[max*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[max=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:99rem){.cds--max\\:col-span-7,:host(cds-grid) ::slotted(cds-column[max*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[max=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:99rem){.cds--max\\:col-span-8,:host(cds-grid) ::slotted(cds-column[max*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[max=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:99rem){.cds--max\\:col-span-9,:host(cds-grid) ::slotted(cds-column[max*=\"span:9\"]),:host(cds-grid) ::slotted(cds-column[max=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}}@media (min-width:99rem){.cds--max\\:col-span-10,:host(cds-grid) ::slotted(cds-column[max*=\"span:10\"]),:host(cds-grid) ::slotted(cds-column[max=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}}@media (min-width:99rem){.cds--max\\:col-span-11,:host(cds-grid) ::slotted(cds-column[max*=\"span:11\"]),:host(cds-grid) ::slotted(cds-column[max=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}}@media (min-width:99rem){.cds--max\\:col-span-12,:host(cds-grid) ::slotted(cds-column[max*=\"span:12\"]),:host(cds-grid) ::slotted(cds-column[max=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}}@media (min-width:99rem){.cds--max\\:col-span-13,:host(cds-grid) ::slotted(cds-column[max*=\"span:13\"]),:host(cds-grid) ::slotted(cds-column[max=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}}@media (min-width:99rem){.cds--max\\:col-span-14,:host(cds-grid) ::slotted(cds-column[max*=\"span:14\"]),:host(cds-grid) ::slotted(cds-column[max=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}}@media (min-width:99rem){.cds--max\\:col-span-15,:host(cds-grid) ::slotted(cds-column[max*=\"span:15\"]),:host(cds-grid) ::slotted(cds-column[max=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}}@media (min-width:99rem){.cds--max\\:col-span-16,:host(cds-grid) ::slotted(cds-column[max*=\"span:16\"]),:host(cds-grid) ::slotted(cds-column[max=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}}@media (min-width:99rem){.cds--max\\:col-span-auto{grid-column:auto}.cds--max\\:col-span-100,:host(cds-grid) ::slotted(cds-column[max*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[max=\"100%\"]){grid-column:1/-1}.cds--max\\:col-span-75,:host(cds-grid) ::slotted(cds-column[max*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[max=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}.cds--max\\:col-span-50,:host(cds-grid) ::slotted(cds-column[max*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[max=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}.cds--max\\:col-span-25,:host(cds-grid) ::slotted(cds-column[max*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[max=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-span-auto{grid-column:auto}.cds--col-span-100,:host(cds-grid) ::slotted(cds-column[span=\"100%\"]){grid-column:1/-1}.cds--col-span-75,:host(cds-grid) ::slotted(cds-column[span=\"75%\"]){--cds-grid-columns:3;grid-column:span 3/span 3}@media (min-width:42rem){.cds--col-span-75,:host(cds-grid) ::slotted(cds-column[span=\"75%\"]){--cds-grid-columns:6;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--col-span-75,:host(cds-grid) ::slotted(cds-column[span=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}}.cds--col-span-50,:host(cds-grid) ::slotted(cds-column[span=\"50%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}@media (min-width:42rem){.cds--col-span-50,:host(cds-grid) ::slotted(cds-column[span=\"50%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--col-span-50,:host(cds-grid) ::slotted(cds-column[span=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}}.cds--col-span-25,:host(cds-grid) ::slotted(cds-column[span=\"25%\"]){--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--col-span-25,:host(cds-grid) ::slotted(cds-column[span=\"25%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--col-span-25,:host(cds-grid) ::slotted(cds-column[span=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-start-1{grid-column-start:1}.cds--col-start-2{grid-column-start:2}.cds--col-start-3{grid-column-start:3}.cds--col-start-4{grid-column-start:4}.cds--col-start-5{grid-column-start:5}.cds--col-start-6{grid-column-start:6}.cds--col-start-7{grid-column-start:7}.cds--col-start-8{grid-column-start:8}.cds--col-start-9{grid-column-start:9}.cds--col-start-10{grid-column-start:10}.cds--col-start-11{grid-column-start:11}.cds--col-start-12{grid-column-start:12}.cds--col-start-13{grid-column-start:13}.cds--col-start-14{grid-column-start:14}.cds--col-start-15{grid-column-start:15}.cds--col-start-16{grid-column-start:16}.cds--col-end-2{grid-column-end:2}.cds--col-end-3{grid-column-end:3}.cds--col-end-4{grid-column-end:4}.cds--col-end-5{grid-column-end:5}.cds--col-end-6{grid-column-end:6}.cds--col-end-7{grid-column-end:7}.cds--col-end-8{grid-column-end:8}.cds--col-end-9{grid-column-end:9}.cds--col-end-10{grid-column-end:10}.cds--col-end-11{grid-column-end:11}.cds--col-end-12{grid-column-end:12}.cds--col-end-13{grid-column-end:13}.cds--col-end-14{grid-column-end:14}.cds--col-end-15{grid-column-end:15}.cds--col-end-16{grid-column-end:16}.cds--col-end-17{grid-column-end:17}.cds--col-start-auto{grid-column-start:auto}.cds--col-end-auto{grid-column-end:auto}.cds--sm\\:col-start-1,:host(cds-grid) ::slotted(cds-column[sm*=\"start:1\"]){grid-column-start:1}.cds--sm\\:col-start-2,:host(cds-grid) ::slotted(cds-column[sm*=\"start:2\"]){grid-column-start:2}.cds--sm\\:col-start-3,:host(cds-grid) ::slotted(cds-column[sm*=\"start:3\"]){grid-column-start:3}.cds--sm\\:col-start-4,:host(cds-grid) ::slotted(cds-column[sm*=\"start:4\"]){grid-column-start:4}.cds--sm\\:col-start-5{grid-column-start:5}.cds--sm\\:col-start-6{grid-column-start:6}.cds--sm\\:col-start-7{grid-column-start:7}.cds--sm\\:col-start-8{grid-column-start:8}.cds--sm\\:col-start-9{grid-column-start:9}.cds--sm\\:col-start-10{grid-column-start:10}.cds--sm\\:col-start-11{grid-column-start:11}.cds--sm\\:col-start-12{grid-column-start:12}.cds--sm\\:col-start-13{grid-column-start:13}.cds--sm\\:col-start-14{grid-column-start:14}.cds--sm\\:col-start-15{grid-column-start:15}.cds--sm\\:col-start-16{grid-column-start:16}.cds--sm\\:col-end-2,:host(cds-grid) ::slotted(cds-column[sm*=\"end:2\"]){grid-column-end:2}.cds--sm\\:col-end-3,:host(cds-grid) ::slotted(cds-column[sm*=\"end:3\"]){grid-column-end:3}.cds--sm\\:col-end-4,:host(cds-grid) ::slotted(cds-column[sm*=\"end:4\"]){grid-column-end:4}.cds--sm\\:col-end-5,:host(cds-grid) ::slotted(cds-column[sm*=\"end:5\"]){grid-column-end:5}.cds--sm\\:col-end-6{grid-column-end:6}.cds--sm\\:col-end-7{grid-column-end:7}.cds--sm\\:col-end-8{grid-column-end:8}.cds--sm\\:col-end-9{grid-column-end:9}.cds--sm\\:col-end-10{grid-column-end:10}.cds--sm\\:col-end-11{grid-column-end:11}.cds--sm\\:col-end-12{grid-column-end:12}.cds--sm\\:col-end-13{grid-column-end:13}.cds--sm\\:col-end-14{grid-column-end:14}.cds--sm\\:col-end-15{grid-column-end:15}.cds--sm\\:col-end-16{grid-column-end:16}.cds--sm\\:col-end-17{grid-column-end:17}.cds--sm\\:col-start-auto{grid-column-start:auto}.cds--sm\\:col-end-auto{grid-column-end:auto}@media (min-width:42rem){.cds--md\\:col-start-1,:host(cds-grid) ::slotted(cds-column[md*=\"start:1\"]){grid-column-start:1}.cds--md\\:col-start-2,:host(cds-grid) ::slotted(cds-column[md*=\"start:2\"]){grid-column-start:2}.cds--md\\:col-start-3,:host(cds-grid) ::slotted(cds-column[md*=\"start:3\"]){grid-column-start:3}.cds--md\\:col-start-4,:host(cds-grid) ::slotted(cds-column[md*=\"start:4\"]){grid-column-start:4}.cds--md\\:col-start-5,:host(cds-grid) ::slotted(cds-column[md*=\"start:5\"]){grid-column-start:5}.cds--md\\:col-start-6,:host(cds-grid) ::slotted(cds-column[md*=\"start:6\"]){grid-column-start:6}.cds--md\\:col-start-7,:host(cds-grid) ::slotted(cds-column[md*=\"start:7\"]){grid-column-start:7}.cds--md\\:col-start-8,:host(cds-grid) ::slotted(cds-column[md*=\"start:8\"]){grid-column-start:8}.cds--md\\:col-start-9{grid-column-start:9}.cds--md\\:col-start-10{grid-column-start:10}.cds--md\\:col-start-11{grid-column-start:11}.cds--md\\:col-start-12{grid-column-start:12}.cds--md\\:col-start-13{grid-column-start:13}.cds--md\\:col-start-14{grid-column-start:14}.cds--md\\:col-start-15{grid-column-start:15}.cds--md\\:col-start-16{grid-column-start:16}.cds--md\\:col-end-2,:host(cds-grid) ::slotted(cds-column[md*=\"end:2\"]){grid-column-end:2}.cds--md\\:col-end-3,:host(cds-grid) ::slotted(cds-column[md*=\"end:3\"]){grid-column-end:3}.cds--md\\:col-end-4,:host(cds-grid) ::slotted(cds-column[md*=\"end:4\"]){grid-column-end:4}.cds--md\\:col-end-5,:host(cds-grid) ::slotted(cds-column[md*=\"end:5\"]){grid-column-end:5}.cds--md\\:col-end-6,:host(cds-grid) ::slotted(cds-column[md*=\"end:6\"]){grid-column-end:6}.cds--md\\:col-end-7,:host(cds-grid) ::slotted(cds-column[md*=\"end:7\"]){grid-column-end:7}.cds--md\\:col-end-8,:host(cds-grid) ::slotted(cds-column[md*=\"end:8\"]){grid-column-end:8}.cds--md\\:col-end-9,:host(cds-grid) ::slotted(cds-column[md*=\"end:9\"]){grid-column-end:9}.cds--md\\:col-end-10{grid-column-end:10}.cds--md\\:col-end-11{grid-column-end:11}.cds--md\\:col-end-12{grid-column-end:12}.cds--md\\:col-end-13{grid-column-end:13}.cds--md\\:col-end-14{grid-column-end:14}.cds--md\\:col-end-15{grid-column-end:15}.cds--md\\:col-end-16{grid-column-end:16}.cds--md\\:col-end-17{grid-column-end:17}.cds--md\\:col-start-auto{grid-column-start:auto}.cds--md\\:col-end-auto{grid-column-end:auto}}@media (min-width:66rem){.cds--lg\\:col-start-1,:host(cds-grid) ::slotted(cds-column[lg*=\"start:1\"]){grid-column-start:1}.cds--lg\\:col-start-2,:host(cds-grid) ::slotted(cds-column[lg*=\"start:2\"]){grid-column-start:2}.cds--lg\\:col-start-3,:host(cds-grid) ::slotted(cds-column[lg*=\"start:3\"]){grid-column-start:3}.cds--lg\\:col-start-4,:host(cds-grid) ::slotted(cds-column[lg*=\"start:4\"]){grid-column-start:4}.cds--lg\\:col-start-5,:host(cds-grid) ::slotted(cds-column[lg*=\"start:5\"]){grid-column-start:5}.cds--lg\\:col-start-6,:host(cds-grid) ::slotted(cds-column[lg*=\"start:6\"]){grid-column-start:6}.cds--lg\\:col-start-7,:host(cds-grid) ::slotted(cds-column[lg*=\"start:7\"]){grid-column-start:7}.cds--lg\\:col-start-8,:host(cds-grid) ::slotted(cds-column[lg*=\"start:8\"]){grid-column-start:8}.cds--lg\\:col-start-9,:host(cds-grid) ::slotted(cds-column[lg*=\"start:9\"]){grid-column-start:9}.cds--lg\\:col-start-10,:host(cds-grid) ::slotted(cds-column[lg*=\"start:10\"]){grid-column-start:10}.cds--lg\\:col-start-11,:host(cds-grid) ::slotted(cds-column[lg*=\"start:11\"]){grid-column-start:11}.cds--lg\\:col-start-12,:host(cds-grid) ::slotted(cds-column[lg*=\"start:12\"]){grid-column-start:12}.cds--lg\\:col-start-13,:host(cds-grid) ::slotted(cds-column[lg*=\"start:13\"]){grid-column-start:13}.cds--lg\\:col-start-14,:host(cds-grid) ::slotted(cds-column[lg*=\"start:14\"]){grid-column-start:14}.cds--lg\\:col-start-15,:host(cds-grid) ::slotted(cds-column[lg*=\"start:15\"]){grid-column-start:15}.cds--lg\\:col-start-16,:host(cds-grid) ::slotted(cds-column[lg*=\"start:16\"]){grid-column-start:16}.cds--lg\\:col-end-2,:host(cds-grid) ::slotted(cds-column[lg*=\"end:2\"]){grid-column-end:2}.cds--lg\\:col-end-3,:host(cds-grid) ::slotted(cds-column[lg*=\"end:3\"]){grid-column-end:3}.cds--lg\\:col-end-4,:host(cds-grid) ::slotted(cds-column[lg*=\"end:4\"]){grid-column-end:4}.cds--lg\\:col-end-5,:host(cds-grid) ::slotted(cds-column[lg*=\"end:5\"]){grid-column-end:5}.cds--lg\\:col-end-6,:host(cds-grid) ::slotted(cds-column[lg*=\"end:6\"]){grid-column-end:6}.cds--lg\\:col-end-7,:host(cds-grid) ::slotted(cds-column[lg*=\"end:7\"]){grid-column-end:7}.cds--lg\\:col-end-8,:host(cds-grid) ::slotted(cds-column[lg*=\"end:8\"]){grid-column-end:8}.cds--lg\\:col-end-9,:host(cds-grid) ::slotted(cds-column[lg*=\"end:9\"]){grid-column-end:9}.cds--lg\\:col-end-10,:host(cds-grid) ::slotted(cds-column[lg*=\"end:10\"]){grid-column-end:10}.cds--lg\\:col-end-11,:host(cds-grid) ::slotted(cds-column[lg*=\"end:11\"]){grid-column-end:11}.cds--lg\\:col-end-12,:host(cds-grid) ::slotted(cds-column[lg*=\"end:12\"]){grid-column-end:12}.cds--lg\\:col-end-13,:host(cds-grid) ::slotted(cds-column[lg*=\"end:13\"]){grid-column-end:13}.cds--lg\\:col-end-14,:host(cds-grid) ::slotted(cds-column[lg*=\"end:14\"]){grid-column-end:14}.cds--lg\\:col-end-15,:host(cds-grid) ::slotted(cds-column[lg*=\"end:15\"]){grid-column-end:15}.cds--lg\\:col-end-16,:host(cds-grid) ::slotted(cds-column[lg*=\"end:16\"]){grid-column-end:16}.cds--lg\\:col-end-17,:host(cds-grid) ::slotted(cds-column[lg*=\"end:17\"]){grid-column-end:17}.cds--lg\\:col-start-auto{grid-column-start:auto}.cds--lg\\:col-end-auto{grid-column-end:auto}}@media (min-width:82rem){.cds--xlg\\:col-start-1,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:1\"]){grid-column-start:1}.cds--xlg\\:col-start-2,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:2\"]){grid-column-start:2}.cds--xlg\\:col-start-3,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:3\"]){grid-column-start:3}.cds--xlg\\:col-start-4,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:4\"]){grid-column-start:4}.cds--xlg\\:col-start-5,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:5\"]){grid-column-start:5}.cds--xlg\\:col-start-6,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:6\"]){grid-column-start:6}.cds--xlg\\:col-start-7,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:7\"]){grid-column-start:7}.cds--xlg\\:col-start-8,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:8\"]){grid-column-start:8}.cds--xlg\\:col-start-9,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:9\"]){grid-column-start:9}.cds--xlg\\:col-start-10,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:10\"]){grid-column-start:10}.cds--xlg\\:col-start-11,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:11\"]){grid-column-start:11}.cds--xlg\\:col-start-12,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:12\"]){grid-column-start:12}.cds--xlg\\:col-start-13,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:13\"]){grid-column-start:13}.cds--xlg\\:col-start-14,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:14\"]){grid-column-start:14}.cds--xlg\\:col-start-15,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:15\"]){grid-column-start:15}.cds--xlg\\:col-start-16,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:16\"]){grid-column-start:16}.cds--xlg\\:col-end-2,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:2\"]){grid-column-end:2}.cds--xlg\\:col-end-3,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:3\"]){grid-column-end:3}.cds--xlg\\:col-end-4,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:4\"]){grid-column-end:4}.cds--xlg\\:col-end-5,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:5\"]){grid-column-end:5}.cds--xlg\\:col-end-6,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:6\"]){grid-column-end:6}.cds--xlg\\:col-end-7,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:7\"]){grid-column-end:7}.cds--xlg\\:col-end-8,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:8\"]){grid-column-end:8}.cds--xlg\\:col-end-9,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:9\"]){grid-column-end:9}.cds--xlg\\:col-end-10,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:10\"]){grid-column-end:10}.cds--xlg\\:col-end-11,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:11\"]){grid-column-end:11}.cds--xlg\\:col-end-12,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:12\"]){grid-column-end:12}.cds--xlg\\:col-end-13,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:13\"]){grid-column-end:13}.cds--xlg\\:col-end-14,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:14\"]){grid-column-end:14}.cds--xlg\\:col-end-15,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:15\"]){grid-column-end:15}.cds--xlg\\:col-end-16,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:16\"]){grid-column-end:16}.cds--xlg\\:col-end-17,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:17\"]){grid-column-end:17}.cds--xlg\\:col-start-auto{grid-column-start:auto}.cds--xlg\\:col-end-auto{grid-column-end:auto}}@media (min-width:99rem){.cds--max\\:col-start-1,:host(cds-grid) ::slotted(cds-column[max*=\"start:1\"]){grid-column-start:1}.cds--max\\:col-start-2,:host(cds-grid) ::slotted(cds-column[max*=\"start:2\"]){grid-column-start:2}.cds--max\\:col-start-3,:host(cds-grid) ::slotted(cds-column[max*=\"start:3\"]){grid-column-start:3}.cds--max\\:col-start-4,:host(cds-grid) ::slotted(cds-column[max*=\"start:4\"]){grid-column-start:4}.cds--max\\:col-start-5,:host(cds-grid) ::slotted(cds-column[max*=\"start:5\"]){grid-column-start:5}.cds--max\\:col-start-6,:host(cds-grid) ::slotted(cds-column[max*=\"start:6\"]){grid-column-start:6}.cds--max\\:col-start-7,:host(cds-grid) ::slotted(cds-column[max*=\"start:7\"]){grid-column-start:7}.cds--max\\:col-start-8,:host(cds-grid) ::slotted(cds-column[max*=\"start:8\"]){grid-column-start:8}.cds--max\\:col-start-9,:host(cds-grid) ::slotted(cds-column[max*=\"start:9\"]){grid-column-start:9}.cds--max\\:col-start-10,:host(cds-grid) ::slotted(cds-column[max*=\"start:10\"]){grid-column-start:10}.cds--max\\:col-start-11,:host(cds-grid) ::slotted(cds-column[max*=\"start:11\"]){grid-column-start:11}.cds--max\\:col-start-12,:host(cds-grid) ::slotted(cds-column[max*=\"start:12\"]){grid-column-start:12}.cds--max\\:col-start-13,:host(cds-grid) ::slotted(cds-column[max*=\"start:13\"]){grid-column-start:13}.cds--max\\:col-start-14,:host(cds-grid) ::slotted(cds-column[max*=\"start:14\"]){grid-column-start:14}.cds--max\\:col-start-15,:host(cds-grid) ::slotted(cds-column[max*=\"start:15\"]){grid-column-start:15}.cds--max\\:col-start-16,:host(cds-grid) ::slotted(cds-column[max*=\"start:16\"]){grid-column-start:16}.cds--max\\:col-end-2,:host(cds-grid) ::slotted(cds-column[max*=\"end:2\"]){grid-column-end:2}.cds--max\\:col-end-3,:host(cds-grid) ::slotted(cds-column[max*=\"end:3\"]){grid-column-end:3}.cds--max\\:col-end-4,:host(cds-grid) ::slotted(cds-column[max*=\"end:4\"]){grid-column-end:4}.cds--max\\:col-end-5,:host(cds-grid) ::slotted(cds-column[max*=\"end:5\"]){grid-column-end:5}.cds--max\\:col-end-6,:host(cds-grid) ::slotted(cds-column[max*=\"end:6\"]){grid-column-end:6}.cds--max\\:col-end-7,:host(cds-grid) ::slotted(cds-column[max*=\"end:7\"]){grid-column-end:7}.cds--max\\:col-end-8,:host(cds-grid) ::slotted(cds-column[max*=\"end:8\"]){grid-column-end:8}.cds--max\\:col-end-9,:host(cds-grid) ::slotted(cds-column[max*=\"end:9\"]){grid-column-end:9}.cds--max\\:col-end-10,:host(cds-grid) ::slotted(cds-column[max*=\"end:10\"]){grid-column-end:10}.cds--max\\:col-end-11,:host(cds-grid) ::slotted(cds-column[max*=\"end:11\"]){grid-column-end:11}.cds--max\\:col-end-12,:host(cds-grid) ::slotted(cds-column[max*=\"end:12\"]){grid-column-end:12}.cds--max\\:col-end-13,:host(cds-grid) ::slotted(cds-column[max*=\"end:13\"]){grid-column-end:13}.cds--max\\:col-end-14,:host(cds-grid) ::slotted(cds-column[max*=\"end:14\"]){grid-column-end:14}.cds--max\\:col-end-15,:host(cds-grid) ::slotted(cds-column[max*=\"end:15\"]){grid-column-end:15}.cds--max\\:col-end-16,:host(cds-grid) ::slotted(cds-column[max*=\"end:16\"]){grid-column-end:16}.cds--max\\:col-end-17,:host(cds-grid) ::slotted(cds-column[max*=\"end:17\"]){grid-column-end:17}.cds--max\\:col-start-auto{grid-column-start:auto}.cds--max\\:col-end-auto{grid-column-end:auto}}:host(cds-grid) [grid]{box-sizing:border-box}:host(cds-grid) [subgrid]{box-sizing:border-box}"]);
10
+ var grid_default = css([":root{--cds-grid-gutter:2rem;--cds-grid-columns:4;--cds-grid-margin:0}@media (min-width:42rem){:root{--cds-grid-columns:8;--cds-grid-margin:1rem}}@media (min-width:66rem){:root{--cds-grid-columns:16}}@media (min-width:99rem){:root{--cds-grid-margin:1.5rem}}.cds--css-grid,:host(cds-grid) [grid]{--cds-grid-gutter-start:calc(var(--cds-grid-gutter)/2);--cds-grid-gutter-end:calc(var(--cds-grid-gutter)/2);--cds-grid-column-hang:calc(var(--cds-grid-gutter)/2);display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--cds-grid-margin)}.cds--css-grid--full-width,:host(cds-grid[full-width]) [grid]{max-inline-size:100%}.cds--css-grid-column,:host(cds-grid) ::slotted(cds-column){--cds-grid-mode-start:var(--cds-grid-gutter-start);--cds-grid-mode-end:var(--cds-grid-gutter-end);margin-inline:var(--cds-grid-gutter-start) var(--cds-grid-gutter-end)}:host(cds-grid) [dir=rtl] ::slotted(cds-column),[dir=rtl] .cds--css-grid-column{margin-inline:var(--cds-grid-gutter-end) var(--cds-grid-gutter-start)}.cds--css-grid--narrow,:host(cds-grid[narrow]) [grid]{--cds-grid-gutter-start:0rem}.cds--css-grid--condensed,:host(cds-grid[condensed]) [grid]{--cds-grid-gutter:0.0625rem;--cds-grid-column-hang:0.96875rem}.cds--css-grid--with-row-gap{row-gap:var(--cds-grid-gutter)}.cds--css-grid--narrow.cds--css-grid--with-row-gap,:host(cds-grid[narrow]) .cds--css-grid--with-row-gap[grid]{row-gap:calc(var(--cds-grid-gutter)/2)}.cds--css-grid--start,:host(cds-grid[align=start]) [grid]{margin-inline-start:0}.cds--css-grid--end,:host(cds-grid[align=end]) [grid]{margin-inline-end:0}.cds--subgrid,:host(cds-grid) [subgrid]{display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));margin-inline:calc(var(--cds-grid-mode-start)*-1) calc(var(--cds-grid-mode-end)*-1)}:host(cds-grid) [dir=rtl] [subgrid],[dir=rtl] .cds--subgrid{margin-inline:calc(var(--cds-grid-mode-end)*-1) calc(var(--cds-grid-mode-start)*-1)}.cds--subgrid--wide,:host(cds-grid) [subgrid][mode=wide]{--cds-grid-gutter-start:1rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:0}.cds--subgrid--narrow,:host(cds-grid) [subgrid][mode=narrow]{--cds-grid-gutter-start:0rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:1rem}.cds--subgrid--condensed,:host(cds-grid) [subgrid][mode=condensed]{--cds-grid-gutter:0.0625rem;--cds-grid-gutter-start:0.03125rem;--cds-grid-gutter-end:0.03125rem;--cds-grid-column-hang:0.96875rem}.cds--subgrid--with-row-gap{row-gap:2rem}.cds--subgrid--narrow.cds--subgrid--with-row-gap,:host(cds-grid) .cds--subgrid--with-row-gap[subgrid][mode=narrow]{row-gap:1rem}.cds--subgrid--condensed.cds--subgrid--with-row-gap,:host(cds-grid) .cds--subgrid--with-row-gap[subgrid][mode=condensed]{row-gap:.0625rem}.cds--grid-column-hang{margin-inline-start:var(--cds-grid-column-hang)}[dir=rtl] .cds--grid-column-hang{margin-inline:initial var(--cds-grid-column-hang)}.cds--col-span-0{display:none}.cds--col-span-1,:host(cds-grid) ::slotted(cds-column[span=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--col-span-2,:host(cds-grid) ::slotted(cds-column[span=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--col-span-3,:host(cds-grid) ::slotted(cds-column[span=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--col-span-4,:host(cds-grid) ::slotted(cds-column[span=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--col-span-5,:host(cds-grid) ::slotted(cds-column[span=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--col-span-6,:host(cds-grid) ::slotted(cds-column[span=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--col-span-7,:host(cds-grid) ::slotted(cds-column[span=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--col-span-8,:host(cds-grid) ::slotted(cds-column[span=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--col-span-9,:host(cds-grid) ::slotted(cds-column[span=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--col-span-10,:host(cds-grid) ::slotted(cds-column[span=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--col-span-11,:host(cds-grid) ::slotted(cds-column[span=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--col-span-12,:host(cds-grid) ::slotted(cds-column[span=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--col-span-13,:host(cds-grid) ::slotted(cds-column[span=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--col-span-14,:host(cds-grid) ::slotted(cds-column[span=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--col-span-15,:host(cds-grid) ::slotted(cds-column[span=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--col-span-16,:host(cds-grid) ::slotted(cds-column[span=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--sm\\:col-span-0,:host(cds-grid) ::slotted(cds-column[sm*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[sm=\"0\"]){display:none}.cds--sm\\:col-span-1,:host(cds-grid) ::slotted(cds-column[sm*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[sm=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--sm\\:col-span-2,:host(cds-grid) ::slotted(cds-column[sm*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[sm=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--sm\\:col-span-3,:host(cds-grid) ::slotted(cds-column[sm*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[sm=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--sm\\:col-span-4,:host(cds-grid) ::slotted(cds-column[sm*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[sm=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--sm\\:col-span-auto{grid-column:auto}.cds--sm\\:col-span-100,:host(cds-grid) ::slotted(cds-column[sm*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"100%\"]){grid-column:1/-1}.cds--sm\\:col-span-75,:host(cds-grid) ::slotted(cds-column[sm*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"75%\"]){--cds-grid-columns:3;grid-column:span 3/span 3}.cds--sm\\:col-span-50,:host(cds-grid) ::slotted(cds-column[sm*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"50%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}.cds--sm\\:col-span-25,:host(cds-grid) ::slotted(cds-column[sm*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[sm=\"25%\"]){--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--md\\:col-span-0,:host(cds-grid) ::slotted(cds-column[md*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[md=\"0\"]){display:none}}@media (min-width:42rem){.cds--md\\:col-span-1,:host(cds-grid) ::slotted(cds-column[md*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[md=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:42rem){.cds--md\\:col-span-2,:host(cds-grid) ::slotted(cds-column[md*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[md=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:42rem){.cds--md\\:col-span-3,:host(cds-grid) ::slotted(cds-column[md*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[md=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:42rem){.cds--md\\:col-span-4,:host(cds-grid) ::slotted(cds-column[md*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[md=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:42rem){.cds--md\\:col-span-5,:host(cds-grid) ::slotted(cds-column[md*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[md=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:42rem){.cds--md\\:col-span-6,:host(cds-grid) ::slotted(cds-column[md*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[md=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:42rem){.cds--md\\:col-span-7,:host(cds-grid) ::slotted(cds-column[md*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[md=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:42rem){.cds--md\\:col-span-8,:host(cds-grid) ::slotted(cds-column[md*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[md=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:42rem){.cds--md\\:col-span-auto{grid-column:auto}.cds--md\\:col-span-100,:host(cds-grid) ::slotted(cds-column[md*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[md=\"100%\"]){grid-column:1/-1}.cds--md\\:col-span-75,:host(cds-grid) ::slotted(cds-column[md*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[md=\"75%\"]){--cds-grid-columns:6;grid-column:span 6/span 6}.cds--md\\:col-span-50,:host(cds-grid) ::slotted(cds-column[md*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[md=\"50%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}.cds--md\\:col-span-25,:host(cds-grid) ::slotted(cds-column[md*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[md=\"25%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-0,:host(cds-grid) ::slotted(cds-column[lg*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[lg=\"0\"]){display:none}}@media (min-width:66rem){.cds--lg\\:col-span-1,:host(cds-grid) ::slotted(cds-column[lg*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[lg=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:66rem){.cds--lg\\:col-span-2,:host(cds-grid) ::slotted(cds-column[lg*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[lg=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-3,:host(cds-grid) ::slotted(cds-column[lg*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[lg=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:66rem){.cds--lg\\:col-span-4,:host(cds-grid) ::slotted(cds-column[lg*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[lg=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--lg\\:col-span-5,:host(cds-grid) ::slotted(cds-column[lg*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[lg=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:66rem){.cds--lg\\:col-span-6,:host(cds-grid) ::slotted(cds-column[lg*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[lg=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--lg\\:col-span-7,:host(cds-grid) ::slotted(cds-column[lg*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[lg=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:66rem){.cds--lg\\:col-span-8,:host(cds-grid) ::slotted(cds-column[lg*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[lg=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:66rem){.cds--lg\\:col-span-9,:host(cds-grid) ::slotted(cds-column[lg*=\"span:9\"]),:host(cds-grid) ::slotted(cds-column[lg=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}}@media (min-width:66rem){.cds--lg\\:col-span-10,:host(cds-grid) ::slotted(cds-column[lg*=\"span:10\"]),:host(cds-grid) ::slotted(cds-column[lg=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}}@media (min-width:66rem){.cds--lg\\:col-span-11,:host(cds-grid) ::slotted(cds-column[lg*=\"span:11\"]),:host(cds-grid) ::slotted(cds-column[lg=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}}@media (min-width:66rem){.cds--lg\\:col-span-12,:host(cds-grid) ::slotted(cds-column[lg*=\"span:12\"]),:host(cds-grid) ::slotted(cds-column[lg=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}}@media (min-width:66rem){.cds--lg\\:col-span-13,:host(cds-grid) ::slotted(cds-column[lg*=\"span:13\"]),:host(cds-grid) ::slotted(cds-column[lg=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}}@media (min-width:66rem){.cds--lg\\:col-span-14,:host(cds-grid) ::slotted(cds-column[lg*=\"span:14\"]),:host(cds-grid) ::slotted(cds-column[lg=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}}@media (min-width:66rem){.cds--lg\\:col-span-15,:host(cds-grid) ::slotted(cds-column[lg*=\"span:15\"]),:host(cds-grid) ::slotted(cds-column[lg=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}}@media (min-width:66rem){.cds--lg\\:col-span-16,:host(cds-grid) ::slotted(cds-column[lg*=\"span:16\"]),:host(cds-grid) ::slotted(cds-column[lg=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}}@media (min-width:66rem){.cds--lg\\:col-span-auto{grid-column:auto}.cds--lg\\:col-span-100,:host(cds-grid) ::slotted(cds-column[lg*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"100%\"]){grid-column:1/-1}.cds--lg\\:col-span-75,:host(cds-grid) ::slotted(cds-column[lg*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}.cds--lg\\:col-span-50,:host(cds-grid) ::slotted(cds-column[lg*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}.cds--lg\\:col-span-25,:host(cds-grid) ::slotted(cds-column[lg*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[lg=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-0,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"0\"]){display:none}}@media (min-width:82rem){.cds--xlg\\:col-span-1,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:82rem){.cds--xlg\\:col-span-2,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:82rem){.cds--xlg\\:col-span-3,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:82rem){.cds--xlg\\:col-span-4,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-5,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:82rem){.cds--xlg\\:col-span-6,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:82rem){.cds--xlg\\:col-span-7,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:82rem){.cds--xlg\\:col-span-8,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:82rem){.cds--xlg\\:col-span-9,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:9\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}}@media (min-width:82rem){.cds--xlg\\:col-span-10,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:10\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}}@media (min-width:82rem){.cds--xlg\\:col-span-11,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:11\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}}@media (min-width:82rem){.cds--xlg\\:col-span-12,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:12\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}}@media (min-width:82rem){.cds--xlg\\:col-span-13,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:13\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}}@media (min-width:82rem){.cds--xlg\\:col-span-14,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:14\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}}@media (min-width:82rem){.cds--xlg\\:col-span-15,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:15\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}}@media (min-width:82rem){.cds--xlg\\:col-span-16,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:16\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}}@media (min-width:82rem){.cds--xlg\\:col-span-auto{grid-column:auto}.cds--xlg\\:col-span-100,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"100%\"]){grid-column:1/-1}.cds--xlg\\:col-span-75,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}.cds--xlg\\:col-span-50,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}.cds--xlg\\:col-span-25,:host(cds-grid) ::slotted(cds-column[xlg*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[xlg=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-0,:host(cds-grid) ::slotted(cds-column[max*=\"span:0\"]),:host(cds-grid) ::slotted(cds-column[max=\"0\"]){display:none}}@media (min-width:99rem){.cds--max\\:col-span-1,:host(cds-grid) ::slotted(cds-column[max*=\"span:1\"]),:host(cds-grid) ::slotted(cds-column[max=\"1\"]){--cds-grid-columns:1;display:block;grid-column:span 1/span 1}}@media (min-width:99rem){.cds--max\\:col-span-2,:host(cds-grid) ::slotted(cds-column[max*=\"span:2\"]),:host(cds-grid) ::slotted(cds-column[max=\"2\"]){--cds-grid-columns:2;display:block;grid-column:span 2/span 2}}@media (min-width:99rem){.cds--max\\:col-span-3,:host(cds-grid) ::slotted(cds-column[max*=\"span:3\"]),:host(cds-grid) ::slotted(cds-column[max=\"3\"]){--cds-grid-columns:3;display:block;grid-column:span 3/span 3}}@media (min-width:99rem){.cds--max\\:col-span-4,:host(cds-grid) ::slotted(cds-column[max*=\"span:4\"]),:host(cds-grid) ::slotted(cds-column[max=\"4\"]){--cds-grid-columns:4;display:block;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-5,:host(cds-grid) ::slotted(cds-column[max*=\"span:5\"]),:host(cds-grid) ::slotted(cds-column[max=\"5\"]){--cds-grid-columns:5;display:block;grid-column:span 5/span 5}}@media (min-width:99rem){.cds--max\\:col-span-6,:host(cds-grid) ::slotted(cds-column[max*=\"span:6\"]),:host(cds-grid) ::slotted(cds-column[max=\"6\"]){--cds-grid-columns:6;display:block;grid-column:span 6/span 6}}@media (min-width:99rem){.cds--max\\:col-span-7,:host(cds-grid) ::slotted(cds-column[max*=\"span:7\"]),:host(cds-grid) ::slotted(cds-column[max=\"7\"]){--cds-grid-columns:7;display:block;grid-column:span 7/span 7}}@media (min-width:99rem){.cds--max\\:col-span-8,:host(cds-grid) ::slotted(cds-column[max*=\"span:8\"]),:host(cds-grid) ::slotted(cds-column[max=\"8\"]){--cds-grid-columns:8;display:block;grid-column:span 8/span 8}}@media (min-width:99rem){.cds--max\\:col-span-9,:host(cds-grid) ::slotted(cds-column[max*=\"span:9\"]),:host(cds-grid) ::slotted(cds-column[max=\"9\"]){--cds-grid-columns:9;display:block;grid-column:span 9/span 9}}@media (min-width:99rem){.cds--max\\:col-span-10,:host(cds-grid) ::slotted(cds-column[max*=\"span:10\"]),:host(cds-grid) ::slotted(cds-column[max=\"10\"]){--cds-grid-columns:10;display:block;grid-column:span 10/span 10}}@media (min-width:99rem){.cds--max\\:col-span-11,:host(cds-grid) ::slotted(cds-column[max*=\"span:11\"]),:host(cds-grid) ::slotted(cds-column[max=\"11\"]){--cds-grid-columns:11;display:block;grid-column:span 11/span 11}}@media (min-width:99rem){.cds--max\\:col-span-12,:host(cds-grid) ::slotted(cds-column[max*=\"span:12\"]),:host(cds-grid) ::slotted(cds-column[max=\"12\"]){--cds-grid-columns:12;display:block;grid-column:span 12/span 12}}@media (min-width:99rem){.cds--max\\:col-span-13,:host(cds-grid) ::slotted(cds-column[max*=\"span:13\"]),:host(cds-grid) ::slotted(cds-column[max=\"13\"]){--cds-grid-columns:13;display:block;grid-column:span 13/span 13}}@media (min-width:99rem){.cds--max\\:col-span-14,:host(cds-grid) ::slotted(cds-column[max*=\"span:14\"]),:host(cds-grid) ::slotted(cds-column[max=\"14\"]){--cds-grid-columns:14;display:block;grid-column:span 14/span 14}}@media (min-width:99rem){.cds--max\\:col-span-15,:host(cds-grid) ::slotted(cds-column[max*=\"span:15\"]),:host(cds-grid) ::slotted(cds-column[max=\"15\"]){--cds-grid-columns:15;display:block;grid-column:span 15/span 15}}@media (min-width:99rem){.cds--max\\:col-span-16,:host(cds-grid) ::slotted(cds-column[max*=\"span:16\"]),:host(cds-grid) ::slotted(cds-column[max=\"16\"]){--cds-grid-columns:16;display:block;grid-column:span 16/span 16}}@media (min-width:99rem){.cds--max\\:col-span-auto{grid-column:auto}.cds--max\\:col-span-100,:host(cds-grid) ::slotted(cds-column[max*=\"span:100%\"]),:host(cds-grid) ::slotted(cds-column[max=\"100%\"]){grid-column:1/-1}.cds--max\\:col-span-75,:host(cds-grid) ::slotted(cds-column[max*=\"span:75%\"]),:host(cds-grid) ::slotted(cds-column[max=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}.cds--max\\:col-span-50,:host(cds-grid) ::slotted(cds-column[max*=\"span:50%\"]),:host(cds-grid) ::slotted(cds-column[max=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}.cds--max\\:col-span-25,:host(cds-grid) ::slotted(cds-column[max*=\"span:25%\"]),:host(cds-grid) ::slotted(cds-column[max=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-span-auto{grid-column:auto}.cds--col-span-100,:host(cds-grid) ::slotted(cds-column[span=\"100%\"]){grid-column:1/-1}.cds--col-span-75,:host(cds-grid) ::slotted(cds-column[span=\"75%\"]){--cds-grid-columns:3;grid-column:span 3/span 3}@media (min-width:42rem){.cds--col-span-75,:host(cds-grid) ::slotted(cds-column[span=\"75%\"]){--cds-grid-columns:6;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--col-span-75,:host(cds-grid) ::slotted(cds-column[span=\"75%\"]){--cds-grid-columns:12;grid-column:span 12/span 12}}.cds--col-span-50,:host(cds-grid) ::slotted(cds-column[span=\"50%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}@media (min-width:42rem){.cds--col-span-50,:host(cds-grid) ::slotted(cds-column[span=\"50%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--col-span-50,:host(cds-grid) ::slotted(cds-column[span=\"50%\"]){--cds-grid-columns:8;grid-column:span 8/span 8}}.cds--col-span-25,:host(cds-grid) ::slotted(cds-column[span=\"25%\"]){--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--col-span-25,:host(cds-grid) ::slotted(cds-column[span=\"25%\"]){--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--col-span-25,:host(cds-grid) ::slotted(cds-column[span=\"25%\"]){--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-start-1{grid-column-start:1}.cds--col-start-2{grid-column-start:2}.cds--col-start-3{grid-column-start:3}.cds--col-start-4{grid-column-start:4}.cds--col-start-5{grid-column-start:5}.cds--col-start-6{grid-column-start:6}.cds--col-start-7{grid-column-start:7}.cds--col-start-8{grid-column-start:8}.cds--col-start-9{grid-column-start:9}.cds--col-start-10{grid-column-start:10}.cds--col-start-11{grid-column-start:11}.cds--col-start-12{grid-column-start:12}.cds--col-start-13{grid-column-start:13}.cds--col-start-14{grid-column-start:14}.cds--col-start-15{grid-column-start:15}.cds--col-start-16{grid-column-start:16}.cds--col-end-2{grid-column-end:2}.cds--col-end-3{grid-column-end:3}.cds--col-end-4{grid-column-end:4}.cds--col-end-5{grid-column-end:5}.cds--col-end-6{grid-column-end:6}.cds--col-end-7{grid-column-end:7}.cds--col-end-8{grid-column-end:8}.cds--col-end-9{grid-column-end:9}.cds--col-end-10{grid-column-end:10}.cds--col-end-11{grid-column-end:11}.cds--col-end-12{grid-column-end:12}.cds--col-end-13{grid-column-end:13}.cds--col-end-14{grid-column-end:14}.cds--col-end-15{grid-column-end:15}.cds--col-end-16{grid-column-end:16}.cds--col-end-17{grid-column-end:17}.cds--col-start-auto{grid-column-start:auto}.cds--col-end-auto{grid-column-end:auto}.cds--sm\\:col-start-1,:host(cds-grid) ::slotted(cds-column[sm*=\"start:1\"]){grid-column-start:1}.cds--sm\\:col-start-2,:host(cds-grid) ::slotted(cds-column[sm*=\"start:2\"]){grid-column-start:2}.cds--sm\\:col-start-3,:host(cds-grid) ::slotted(cds-column[sm*=\"start:3\"]){grid-column-start:3}.cds--sm\\:col-start-4,:host(cds-grid) ::slotted(cds-column[sm*=\"start:4\"]){grid-column-start:4}.cds--sm\\:col-start-5{grid-column-start:5}.cds--sm\\:col-start-6{grid-column-start:6}.cds--sm\\:col-start-7{grid-column-start:7}.cds--sm\\:col-start-8{grid-column-start:8}.cds--sm\\:col-start-9{grid-column-start:9}.cds--sm\\:col-start-10{grid-column-start:10}.cds--sm\\:col-start-11{grid-column-start:11}.cds--sm\\:col-start-12{grid-column-start:12}.cds--sm\\:col-start-13{grid-column-start:13}.cds--sm\\:col-start-14{grid-column-start:14}.cds--sm\\:col-start-15{grid-column-start:15}.cds--sm\\:col-start-16{grid-column-start:16}.cds--sm\\:col-end-2,:host(cds-grid) ::slotted(cds-column[sm*=\"end:2\"]){grid-column-end:2}.cds--sm\\:col-end-3,:host(cds-grid) ::slotted(cds-column[sm*=\"end:3\"]){grid-column-end:3}.cds--sm\\:col-end-4,:host(cds-grid) ::slotted(cds-column[sm*=\"end:4\"]){grid-column-end:4}.cds--sm\\:col-end-5,:host(cds-grid) ::slotted(cds-column[sm*=\"end:5\"]){grid-column-end:5}.cds--sm\\:col-end-6{grid-column-end:6}.cds--sm\\:col-end-7{grid-column-end:7}.cds--sm\\:col-end-8{grid-column-end:8}.cds--sm\\:col-end-9{grid-column-end:9}.cds--sm\\:col-end-10{grid-column-end:10}.cds--sm\\:col-end-11{grid-column-end:11}.cds--sm\\:col-end-12{grid-column-end:12}.cds--sm\\:col-end-13{grid-column-end:13}.cds--sm\\:col-end-14{grid-column-end:14}.cds--sm\\:col-end-15{grid-column-end:15}.cds--sm\\:col-end-16{grid-column-end:16}.cds--sm\\:col-end-17{grid-column-end:17}.cds--sm\\:col-start-auto{grid-column-start:auto}.cds--sm\\:col-end-auto{grid-column-end:auto}@media (min-width:42rem){.cds--md\\:col-start-1,:host(cds-grid) ::slotted(cds-column[md*=\"start:1\"]){grid-column-start:1}.cds--md\\:col-start-2,:host(cds-grid) ::slotted(cds-column[md*=\"start:2\"]){grid-column-start:2}.cds--md\\:col-start-3,:host(cds-grid) ::slotted(cds-column[md*=\"start:3\"]){grid-column-start:3}.cds--md\\:col-start-4,:host(cds-grid) ::slotted(cds-column[md*=\"start:4\"]){grid-column-start:4}.cds--md\\:col-start-5,:host(cds-grid) ::slotted(cds-column[md*=\"start:5\"]){grid-column-start:5}.cds--md\\:col-start-6,:host(cds-grid) ::slotted(cds-column[md*=\"start:6\"]){grid-column-start:6}.cds--md\\:col-start-7,:host(cds-grid) ::slotted(cds-column[md*=\"start:7\"]){grid-column-start:7}.cds--md\\:col-start-8,:host(cds-grid) ::slotted(cds-column[md*=\"start:8\"]){grid-column-start:8}.cds--md\\:col-start-9{grid-column-start:9}.cds--md\\:col-start-10{grid-column-start:10}.cds--md\\:col-start-11{grid-column-start:11}.cds--md\\:col-start-12{grid-column-start:12}.cds--md\\:col-start-13{grid-column-start:13}.cds--md\\:col-start-14{grid-column-start:14}.cds--md\\:col-start-15{grid-column-start:15}.cds--md\\:col-start-16{grid-column-start:16}.cds--md\\:col-end-2,:host(cds-grid) ::slotted(cds-column[md*=\"end:2\"]){grid-column-end:2}.cds--md\\:col-end-3,:host(cds-grid) ::slotted(cds-column[md*=\"end:3\"]){grid-column-end:3}.cds--md\\:col-end-4,:host(cds-grid) ::slotted(cds-column[md*=\"end:4\"]){grid-column-end:4}.cds--md\\:col-end-5,:host(cds-grid) ::slotted(cds-column[md*=\"end:5\"]){grid-column-end:5}.cds--md\\:col-end-6,:host(cds-grid) ::slotted(cds-column[md*=\"end:6\"]){grid-column-end:6}.cds--md\\:col-end-7,:host(cds-grid) ::slotted(cds-column[md*=\"end:7\"]){grid-column-end:7}.cds--md\\:col-end-8,:host(cds-grid) ::slotted(cds-column[md*=\"end:8\"]){grid-column-end:8}.cds--md\\:col-end-9,:host(cds-grid) ::slotted(cds-column[md*=\"end:9\"]){grid-column-end:9}.cds--md\\:col-end-10{grid-column-end:10}.cds--md\\:col-end-11{grid-column-end:11}.cds--md\\:col-end-12{grid-column-end:12}.cds--md\\:col-end-13{grid-column-end:13}.cds--md\\:col-end-14{grid-column-end:14}.cds--md\\:col-end-15{grid-column-end:15}.cds--md\\:col-end-16{grid-column-end:16}.cds--md\\:col-end-17{grid-column-end:17}.cds--md\\:col-start-auto{grid-column-start:auto}.cds--md\\:col-end-auto{grid-column-end:auto}}@media (min-width:66rem){.cds--lg\\:col-start-1,:host(cds-grid) ::slotted(cds-column[lg*=\"start:1\"]){grid-column-start:1}.cds--lg\\:col-start-2,:host(cds-grid) ::slotted(cds-column[lg*=\"start:2\"]){grid-column-start:2}.cds--lg\\:col-start-3,:host(cds-grid) ::slotted(cds-column[lg*=\"start:3\"]){grid-column-start:3}.cds--lg\\:col-start-4,:host(cds-grid) ::slotted(cds-column[lg*=\"start:4\"]){grid-column-start:4}.cds--lg\\:col-start-5,:host(cds-grid) ::slotted(cds-column[lg*=\"start:5\"]){grid-column-start:5}.cds--lg\\:col-start-6,:host(cds-grid) ::slotted(cds-column[lg*=\"start:6\"]){grid-column-start:6}.cds--lg\\:col-start-7,:host(cds-grid) ::slotted(cds-column[lg*=\"start:7\"]){grid-column-start:7}.cds--lg\\:col-start-8,:host(cds-grid) ::slotted(cds-column[lg*=\"start:8\"]){grid-column-start:8}.cds--lg\\:col-start-9,:host(cds-grid) ::slotted(cds-column[lg*=\"start:9\"]){grid-column-start:9}.cds--lg\\:col-start-10,:host(cds-grid) ::slotted(cds-column[lg*=\"start:10\"]){grid-column-start:10}.cds--lg\\:col-start-11,:host(cds-grid) ::slotted(cds-column[lg*=\"start:11\"]){grid-column-start:11}.cds--lg\\:col-start-12,:host(cds-grid) ::slotted(cds-column[lg*=\"start:12\"]){grid-column-start:12}.cds--lg\\:col-start-13,:host(cds-grid) ::slotted(cds-column[lg*=\"start:13\"]){grid-column-start:13}.cds--lg\\:col-start-14,:host(cds-grid) ::slotted(cds-column[lg*=\"start:14\"]){grid-column-start:14}.cds--lg\\:col-start-15,:host(cds-grid) ::slotted(cds-column[lg*=\"start:15\"]){grid-column-start:15}.cds--lg\\:col-start-16,:host(cds-grid) ::slotted(cds-column[lg*=\"start:16\"]){grid-column-start:16}.cds--lg\\:col-end-2,:host(cds-grid) ::slotted(cds-column[lg*=\"end:2\"]){grid-column-end:2}.cds--lg\\:col-end-3,:host(cds-grid) ::slotted(cds-column[lg*=\"end:3\"]){grid-column-end:3}.cds--lg\\:col-end-4,:host(cds-grid) ::slotted(cds-column[lg*=\"end:4\"]){grid-column-end:4}.cds--lg\\:col-end-5,:host(cds-grid) ::slotted(cds-column[lg*=\"end:5\"]){grid-column-end:5}.cds--lg\\:col-end-6,:host(cds-grid) ::slotted(cds-column[lg*=\"end:6\"]){grid-column-end:6}.cds--lg\\:col-end-7,:host(cds-grid) ::slotted(cds-column[lg*=\"end:7\"]){grid-column-end:7}.cds--lg\\:col-end-8,:host(cds-grid) ::slotted(cds-column[lg*=\"end:8\"]){grid-column-end:8}.cds--lg\\:col-end-9,:host(cds-grid) ::slotted(cds-column[lg*=\"end:9\"]){grid-column-end:9}.cds--lg\\:col-end-10,:host(cds-grid) ::slotted(cds-column[lg*=\"end:10\"]){grid-column-end:10}.cds--lg\\:col-end-11,:host(cds-grid) ::slotted(cds-column[lg*=\"end:11\"]){grid-column-end:11}.cds--lg\\:col-end-12,:host(cds-grid) ::slotted(cds-column[lg*=\"end:12\"]){grid-column-end:12}.cds--lg\\:col-end-13,:host(cds-grid) ::slotted(cds-column[lg*=\"end:13\"]){grid-column-end:13}.cds--lg\\:col-end-14,:host(cds-grid) ::slotted(cds-column[lg*=\"end:14\"]){grid-column-end:14}.cds--lg\\:col-end-15,:host(cds-grid) ::slotted(cds-column[lg*=\"end:15\"]){grid-column-end:15}.cds--lg\\:col-end-16,:host(cds-grid) ::slotted(cds-column[lg*=\"end:16\"]){grid-column-end:16}.cds--lg\\:col-end-17,:host(cds-grid) ::slotted(cds-column[lg*=\"end:17\"]){grid-column-end:17}.cds--lg\\:col-start-auto{grid-column-start:auto}.cds--lg\\:col-end-auto{grid-column-end:auto}}@media (min-width:82rem){.cds--xlg\\:col-start-1,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:1\"]){grid-column-start:1}.cds--xlg\\:col-start-2,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:2\"]){grid-column-start:2}.cds--xlg\\:col-start-3,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:3\"]){grid-column-start:3}.cds--xlg\\:col-start-4,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:4\"]){grid-column-start:4}.cds--xlg\\:col-start-5,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:5\"]){grid-column-start:5}.cds--xlg\\:col-start-6,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:6\"]){grid-column-start:6}.cds--xlg\\:col-start-7,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:7\"]){grid-column-start:7}.cds--xlg\\:col-start-8,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:8\"]){grid-column-start:8}.cds--xlg\\:col-start-9,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:9\"]){grid-column-start:9}.cds--xlg\\:col-start-10,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:10\"]){grid-column-start:10}.cds--xlg\\:col-start-11,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:11\"]){grid-column-start:11}.cds--xlg\\:col-start-12,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:12\"]){grid-column-start:12}.cds--xlg\\:col-start-13,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:13\"]){grid-column-start:13}.cds--xlg\\:col-start-14,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:14\"]){grid-column-start:14}.cds--xlg\\:col-start-15,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:15\"]){grid-column-start:15}.cds--xlg\\:col-start-16,:host(cds-grid) ::slotted(cds-column[xlg*=\"start:16\"]){grid-column-start:16}.cds--xlg\\:col-end-2,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:2\"]){grid-column-end:2}.cds--xlg\\:col-end-3,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:3\"]){grid-column-end:3}.cds--xlg\\:col-end-4,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:4\"]){grid-column-end:4}.cds--xlg\\:col-end-5,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:5\"]){grid-column-end:5}.cds--xlg\\:col-end-6,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:6\"]){grid-column-end:6}.cds--xlg\\:col-end-7,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:7\"]){grid-column-end:7}.cds--xlg\\:col-end-8,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:8\"]){grid-column-end:8}.cds--xlg\\:col-end-9,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:9\"]){grid-column-end:9}.cds--xlg\\:col-end-10,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:10\"]){grid-column-end:10}.cds--xlg\\:col-end-11,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:11\"]){grid-column-end:11}.cds--xlg\\:col-end-12,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:12\"]){grid-column-end:12}.cds--xlg\\:col-end-13,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:13\"]){grid-column-end:13}.cds--xlg\\:col-end-14,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:14\"]){grid-column-end:14}.cds--xlg\\:col-end-15,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:15\"]){grid-column-end:15}.cds--xlg\\:col-end-16,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:16\"]){grid-column-end:16}.cds--xlg\\:col-end-17,:host(cds-grid) ::slotted(cds-column[xlg*=\"end:17\"]){grid-column-end:17}.cds--xlg\\:col-start-auto{grid-column-start:auto}.cds--xlg\\:col-end-auto{grid-column-end:auto}}@media (min-width:99rem){.cds--max\\:col-start-1,:host(cds-grid) ::slotted(cds-column[max*=\"start:1\"]){grid-column-start:1}.cds--max\\:col-start-2,:host(cds-grid) ::slotted(cds-column[max*=\"start:2\"]){grid-column-start:2}.cds--max\\:col-start-3,:host(cds-grid) ::slotted(cds-column[max*=\"start:3\"]){grid-column-start:3}.cds--max\\:col-start-4,:host(cds-grid) ::slotted(cds-column[max*=\"start:4\"]){grid-column-start:4}.cds--max\\:col-start-5,:host(cds-grid) ::slotted(cds-column[max*=\"start:5\"]){grid-column-start:5}.cds--max\\:col-start-6,:host(cds-grid) ::slotted(cds-column[max*=\"start:6\"]){grid-column-start:6}.cds--max\\:col-start-7,:host(cds-grid) ::slotted(cds-column[max*=\"start:7\"]){grid-column-start:7}.cds--max\\:col-start-8,:host(cds-grid) ::slotted(cds-column[max*=\"start:8\"]){grid-column-start:8}.cds--max\\:col-start-9,:host(cds-grid) ::slotted(cds-column[max*=\"start:9\"]){grid-column-start:9}.cds--max\\:col-start-10,:host(cds-grid) ::slotted(cds-column[max*=\"start:10\"]){grid-column-start:10}.cds--max\\:col-start-11,:host(cds-grid) ::slotted(cds-column[max*=\"start:11\"]){grid-column-start:11}.cds--max\\:col-start-12,:host(cds-grid) ::slotted(cds-column[max*=\"start:12\"]){grid-column-start:12}.cds--max\\:col-start-13,:host(cds-grid) ::slotted(cds-column[max*=\"start:13\"]){grid-column-start:13}.cds--max\\:col-start-14,:host(cds-grid) ::slotted(cds-column[max*=\"start:14\"]){grid-column-start:14}.cds--max\\:col-start-15,:host(cds-grid) ::slotted(cds-column[max*=\"start:15\"]){grid-column-start:15}.cds--max\\:col-start-16,:host(cds-grid) ::slotted(cds-column[max*=\"start:16\"]){grid-column-start:16}.cds--max\\:col-end-2,:host(cds-grid) ::slotted(cds-column[max*=\"end:2\"]){grid-column-end:2}.cds--max\\:col-end-3,:host(cds-grid) ::slotted(cds-column[max*=\"end:3\"]){grid-column-end:3}.cds--max\\:col-end-4,:host(cds-grid) ::slotted(cds-column[max*=\"end:4\"]){grid-column-end:4}.cds--max\\:col-end-5,:host(cds-grid) ::slotted(cds-column[max*=\"end:5\"]){grid-column-end:5}.cds--max\\:col-end-6,:host(cds-grid) ::slotted(cds-column[max*=\"end:6\"]){grid-column-end:6}.cds--max\\:col-end-7,:host(cds-grid) ::slotted(cds-column[max*=\"end:7\"]){grid-column-end:7}.cds--max\\:col-end-8,:host(cds-grid) ::slotted(cds-column[max*=\"end:8\"]){grid-column-end:8}.cds--max\\:col-end-9,:host(cds-grid) ::slotted(cds-column[max*=\"end:9\"]){grid-column-end:9}.cds--max\\:col-end-10,:host(cds-grid) ::slotted(cds-column[max*=\"end:10\"]){grid-column-end:10}.cds--max\\:col-end-11,:host(cds-grid) ::slotted(cds-column[max*=\"end:11\"]){grid-column-end:11}.cds--max\\:col-end-12,:host(cds-grid) ::slotted(cds-column[max*=\"end:12\"]){grid-column-end:12}.cds--max\\:col-end-13,:host(cds-grid) ::slotted(cds-column[max*=\"end:13\"]){grid-column-end:13}.cds--max\\:col-end-14,:host(cds-grid) ::slotted(cds-column[max*=\"end:14\"]){grid-column-end:14}.cds--max\\:col-end-15,:host(cds-grid) ::slotted(cds-column[max*=\"end:15\"]){grid-column-end:15}.cds--max\\:col-end-16,:host(cds-grid) ::slotted(cds-column[max*=\"end:16\"]){grid-column-end:16}.cds--max\\:col-end-17,:host(cds-grid) ::slotted(cds-column[max*=\"end:17\"]){grid-column-end:17}.cds--max\\:col-start-auto{grid-column-start:auto}.cds--max\\:col-end-auto{grid-column-end:auto}}:host(cds-grid) [grid]{box-sizing:border-box}:host(cds-grid[with-row-gap]) [grid]{row-gap:var(--cds-grid-gutter)}:host(cds-grid[narrow][with-row-gap]) [grid]{row-gap:calc(var(--cds-grid-gutter)/2)}:host(cds-grid) [subgrid]{box-sizing:border-box}:host(cds-grid) [subgrid][with-row-gap]{row-gap:calc(var(--cds-grid-gutter-start) + var(--cds-grid-gutter-end))}:host(cds-grid) [subgrid][mode=narrow][with-row-gap]{row-gap:var(--cds-grid-gutter-end)}:host(cds-grid) [subgrid][mode=condensed][with-row-gap]{row-gap:var(--cds-grid-gutter-start)}"]);
11
11
  //#endregion
12
12
  export { grid_default as default };
13
13
 
@@ -1 +1 @@
1
- {"version":3,"file":"grid.scss.js","names":[],"sources":["../../../src/components/grid/grid.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2024, 2024\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/grid';\n@use './mixin' as *;\n\n$css-grid: #{$prefix}--css-grid;\n:host(#{$prefix}-grid) [grid] {\n @extend .#{$css-grid};\n\n box-sizing: border-box; /* prevent padding leaking out */\n}\n\n:host(#{$prefix}-grid[align='start']) [grid] {\n @extend .#{$css-grid}--start;\n}\n\n:host(#{$prefix}-grid[align='end']) [grid] {\n @extend .#{$css-grid}--end;\n}\n\n:host(#{$prefix}-grid[condensed]) [grid] {\n @extend .#{$css-grid}--condensed;\n}\n\n:host(#{$prefix}-grid[narrow]) [grid] {\n @extend .#{$css-grid}--narrow;\n}\n\n:host(#{$prefix}-grid[full-width]) [grid] {\n @extend .#{$css-grid}--full-width;\n}\n\n/* sub grid styles */\n$sub-grid: #{$prefix}--subgrid;\n:host(#{$prefix}-grid) [subgrid] {\n @extend .#{$sub-grid};\n\n box-sizing: border-box; /* prevent padding leaking out */\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='wide'] {\n @extend .#{$sub-grid}--wide;\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='condensed'] {\n @extend .#{$sub-grid}--condensed;\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='narrow'] {\n @extend .#{$sub-grid}--narrow;\n}\n\n// Column styles\n@include grid-columns(#{$prefix}-grid);\n"],"mappings":""}
1
+ {"version":3,"file":"grid.scss.js","names":[],"sources":["../../../src/components/grid/grid.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2024, 2024\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/grid';\n@use './mixin' as *;\n\n$css-grid: #{$prefix}--css-grid;\n:host(#{$prefix}-grid) [grid] {\n @extend .#{$css-grid};\n\n box-sizing: border-box; /* prevent padding leaking out */\n}\n\n:host(#{$prefix}-grid[align='start']) [grid] {\n @extend .#{$css-grid}--start;\n}\n\n:host(#{$prefix}-grid[align='end']) [grid] {\n @extend .#{$css-grid}--end;\n}\n\n:host(#{$prefix}-grid[condensed]) [grid] {\n @extend .#{$css-grid}--condensed;\n}\n\n:host(#{$prefix}-grid[narrow]) [grid] {\n @extend .#{$css-grid}--narrow;\n}\n\n:host(#{$prefix}-grid[full-width]) [grid] {\n @extend .#{$css-grid}--full-width;\n}\n\n:host(#{$prefix}-grid[with-row-gap]) [grid] {\n row-gap: var(--cds-grid-gutter);\n}\n\n:host(#{$prefix}-grid[narrow][with-row-gap]) [grid] {\n row-gap: calc(var(--cds-grid-gutter) / 2);\n}\n\n/* sub grid styles */\n$sub-grid: #{$prefix}--subgrid;\n:host(#{$prefix}-grid) [subgrid] {\n @extend .#{$sub-grid};\n\n box-sizing: border-box; /* prevent padding leaking out */\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='wide'] {\n @extend .#{$sub-grid}--wide;\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='condensed'] {\n @extend .#{$sub-grid}--condensed;\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='narrow'] {\n @extend .#{$sub-grid}--narrow;\n}\n\n:host(#{$prefix}-grid) [subgrid][with-row-gap] {\n row-gap: calc(var(--cds-grid-gutter-start) + var(--cds-grid-gutter-end));\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='narrow'][with-row-gap] {\n row-gap: var(--cds-grid-gutter-end);\n}\n\n:host(#{$prefix}-grid) [subgrid][mode='condensed'][with-row-gap] {\n row-gap: var(--cds-grid-gutter-start);\n}\n\n// Column styles\n@include grid-columns(#{$prefix}-grid);\n"],"mappings":""}
@@ -29,7 +29,7 @@ declare class CDSIcon extends LitElement {
29
29
  * The aria-label for the icon
30
30
  */
31
31
  ariaLabel: string | null;
32
- render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-svg").UnsafeSVGDirective>;
32
+ render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-svg.js").UnsafeSVGDirective>;
33
33
  }
34
34
  export default CDSIcon;
35
35
  //# sourceMappingURL=icon.d.ts.map
@@ -86,6 +86,7 @@ declare class CDSmenuItem extends CDSmenuItem_base {
86
86
  disconnectedCallback(): void;
87
87
  updated(): void;
88
88
  handleClick(event: MouseEvent): void;
89
+ handleMouseDown(event: MouseEvent): void;
89
90
  handleMouseEnter(): void;
90
91
  handleMouseLeave(): void;
91
92
  handleKeyDown(event: KeyboardEvent): void;
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;AACrC,eAAO,MAAM,qBAAqB,gCAAsC,CAAC;;;;;;;;;;uBAL/B,CAAC;;;;;AAO3C;;;;GAIG;AACH,cACM,WAAY,SAAQ,gBAAgD;IAExE,OAAO,MAAC;IAER,QAAQ,CAAC,gBAAgB,OAAO;IAChC,kBAAkB,MAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,WAAW,CAAwB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAmB;IAE/C;;OAEG;IAEH,KAAK,MAAC;IACN;;OAEG;IAEH,QAAQ,MAAC;IACT;;OAEG;IAEH,QAAQ,MAAC;IAET;;OAEG;IAEH,iBAAiB,SAAY;IAE7B;;OAEG;IAEH,WAAW,UAAS;IAGpB,IAAI,iBAA0B;IAC9B;;OAEG;IAEH,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7B,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC9B,CAAoB;IAGrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAA4C;IAEtE;;OAEG;IAEH,YAAY,MAAC;IACb;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,UAAU,UAAS;IAEb,kBAAkB;IAaxB,OAAO,CAAC,iBAAiB;IAwBzB,YAAY;IA2BZ,oBAAoB;IAIpB,OAAO,IAAI,IAAI;IAWf,WAAW,CAAC,KAAK,EAAE,UAAU;IAK7B,gBAAgB;IAOhB,gBAAgB;IAOhB,aAAa,CAAC,KAAK,EAAE,aAAa;IAIlC,MAAM;IAuDN,YAAY,GAAI,GAAG,UAAU,GAAG,aAAa,KAAG,IAAI,CAoBlD;IACF,iBAAiB,aAIf;IACF,iBAAiB,aAMf;IACF,YAAY,aAcV;IACF,qBAAqB,aAkCnB;IACF,aAAa,aASX;IACF,cAAc,GAAI,GAAG,aAAa,UAUhC;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;AACrC,eAAO,MAAM,qBAAqB,gCAAsC,CAAC;;;;;;;;;;uBAL/B,CAAC;;;;;AAO3C;;;;GAIG;AACH,cACM,WAAY,SAAQ,gBAAgD;IAExE,OAAO,MAAC;IAER,QAAQ,CAAC,gBAAgB,OAAO;IAChC,kBAAkB,MAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,WAAW,CAAwB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAmB;IAE/C;;OAEG;IAEH,KAAK,MAAC;IACN;;OAEG;IAEH,QAAQ,MAAC;IACT;;OAEG;IAEH,QAAQ,MAAC;IAET;;OAEG;IAEH,iBAAiB,SAAY;IAE7B;;OAEG;IAEH,WAAW,UAAS;IAGpB,IAAI,iBAA0B;IAC9B;;OAEG;IAEH,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7B,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC9B,CAAoB;IAGrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAA4C;IAEtE;;OAEG;IAEH,YAAY,MAAC;IACb;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,UAAU,UAAS;IAEb,kBAAkB;IAaxB,OAAO,CAAC,iBAAiB;IAwBzB,YAAY;IA2BZ,oBAAoB;IAIpB,OAAO,IAAI,IAAI;IAWf,WAAW,CAAC,KAAK,EAAE,UAAU;IAK7B,eAAe,CAAC,KAAK,EAAE,UAAU;IAOjC,gBAAgB;IAOhB,gBAAgB;IAOhB,aAAa,CAAC,KAAK,EAAE,aAAa;IAIlC,MAAM;IAuDN,YAAY,GAAI,GAAG,UAAU,GAAG,aAAa,KAAG,IAAI,CAwBlD;IACF,iBAAiB,aAIf;IACF,iBAAiB,aAMf;IACF,YAAY,aAcV;IACF,qBAAqB,aAkCnB;IACF,aAAa,aASX;IACF,cAAc,GAAI,GAAG,aAAa,UAUhC;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,WAAW,CAAC"}
@@ -49,6 +49,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
49
49
  this.isRtl = false;
50
50
  this.hasSubmenu = false;
51
51
  this._handleClick = (e) => {
52
+ if (this.disabled) return;
52
53
  if (this.hasSubmenu) {
53
54
  this._openSubmenu();
54
55
  return;
@@ -192,6 +193,9 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
192
193
  handleClick(event) {
193
194
  this._handleClick(event);
194
195
  }
196
+ handleMouseDown(event) {
197
+ if (this.disabled) event.preventDefault();
198
+ }
195
199
  handleMouseEnter() {
196
200
  if (this.hasSubmenu) this._handleMouseEnter();
197
201
  }
@@ -255,6 +259,7 @@ __decorate([state()], CDSmenuItem.prototype, "submenuEntry", void 0);
255
259
  __decorate([state()], CDSmenuItem.prototype, "isRtl", void 0);
256
260
  __decorate([state()], CDSmenuItem.prototype, "hasSubmenu", void 0);
257
261
  __decorate([HostListener("click", { capture: true })], CDSmenuItem.prototype, "handleClick", null);
262
+ __decorate([HostListener("mousedown")], CDSmenuItem.prototype, "handleMouseDown", null);
258
263
  __decorate([HostListener("mouseenter")], CDSmenuItem.prototype, "handleMouseEnter", null);
259
264
  __decorate([HostListener("mouseleave")], CDSmenuItem.prototype, "handleMouseLeave", null);
260
265
  __decorate([HostListener("keydown")], CDSmenuItem.prototype, "handleKeyDown", null);
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n @consume({ context: MenuContext })\n context;\n\n readonly hoverIntentDelay = 150; // in ms\n hoverIntentTimeout;\n\n /**\n * The parent cds-menu element\n */\n private _parentMenu: CDSMenu | null = null;\n\n /**\n * MutationObserver that observes the parent cds-menu element\n */\n private _parentMenuObserver?: MutationObserver;\n\n /**\n * Label for the menu item.\n */\n @property({ type: String })\n label;\n /**\n * Shortcut for the menu item.\n */\n @property({ type: String })\n shortcut;\n /**\n * Disabled property for the menu item.\n */\n @property({ type: Boolean })\n disabled;\n\n /**\n * Specify the message read by screen readers for the danger menu item variant\n */\n @property({ type: String, attribute: 'danger-description' })\n dangerDescription = 'danger';\n\n /**\n * Whether the menu submen for an item is open or not.\n */\n @property({ type: Boolean })\n submenuOpen = false;\n\n @property()\n kind = MENU_ITEM_KIND.DEFAULT;\n /**\n * Menu boundaries.\n */\n @property()\n boundaries: {\n x: number | [number, number];\n y: number | [number, number];\n } = { x: -1, y: -1 };\n\n @property({ attribute: 'aria-checked' })\n ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n /**\n * Entrypoint.\n */\n @state()\n submenuEntry;\n /**\n * Checks if document direction is rtl.\n */\n @state()\n isRtl = false;\n /**\n * Checks if document direction is rtl.\n */\n @state()\n hasSubmenu = false;\n\n async dispatchIconDetect() {\n const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n if (hasRenderIcon) {\n await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n this.dispatchEvent(\n new CustomEvent('icon-detect', {\n bubbles: true, // Allows event to bubble up the DOM\n composed: true, // Allows event to cross shadow DOM boundary\n })\n );\n }\n }\n\n private _updateAttributes() {\n if (this.disabled && !this.hasSubmenu) {\n this.setAttribute('aria-disabled', this.disabled);\n this.setAttribute('tabindex', '-1');\n } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '-1');\n } else {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '0');\n }\n if (this.hasSubmenu) {\n this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-haspopup');\n }\n if (this.closest(`${prefix}-menu-item-radio-group`)) {\n this.setAttribute('role', 'menuitemradio');\n this.setAttribute('aria-checked', this.ariaChecked + '');\n } else if (!this.getAttribute('role')) {\n this.setAttribute('role', 'menuitem');\n }\n }\n\n firstUpdated() {\n this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n this.dispatchIconDetect();\n this.isRtl = document.dir === 'rtl';\n this._registerSubMenuItems();\n this._parentMenu = this.closest(`${prefix}-menu`);\n\n this._updateAttributes();\n\n this.addEventListener(`${prefix}-menu-closed`, () => {\n this.focus();\n this._closeSubmenu();\n });\n\n if (this._parentMenu) {\n this._parentMenuObserver = new MutationObserver(() => {\n this._updateAttributes();\n });\n\n this._parentMenuObserver.observe(this._parentMenu, {\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n }\n\n disconnectedCallback() {\n this._parentMenuObserver?.disconnect();\n }\n\n updated(): void {\n if (this.hasSubmenu) {\n this.setAttribute('aria-expanded', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-expanded');\n }\n if (this.kind === MENU_ITEM_KIND.DANGER)\n this.classList.toggle(`${prefix}--menu-item--danger`);\n }\n\n @HostListener('click', { capture: true })\n handleClick(event: MouseEvent) {\n this._handleClick(event);\n }\n\n @HostListener('mouseenter')\n handleMouseEnter() {\n if (this.hasSubmenu) {\n this._handleMouseEnter();\n }\n }\n\n @HostListener('mouseleave')\n handleMouseLeave() {\n if (this.hasSubmenu) {\n this._handleMouseLeave();\n }\n }\n\n @HostListener('keydown')\n handleKeyDown(event: KeyboardEvent) {\n this._handleKeyDown(event);\n }\n\n render() {\n const {\n label,\n shortcut,\n submenuOpen,\n boundaries,\n isRtl,\n kind,\n dangerDescription,\n } = this;\n\n const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n const menuClassName = this.context?.hasSelectableItems\n ? `${prefix}--menu--with-selectable-items`\n : '';\n\n return html`\n <div class=\"${prefix}--menu-item__selection-icon\">\n ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n </div>\n\n <div class=\"${prefix}--menu-item__icon\">\n <slot name=\"render-icon\"></slot>\n </div>\n <div class=\"${prefix}--menu-item__label\">${label}</div>\n ${isDanger\n ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n >${dangerDescription}</span\n >`\n : html``}\n ${shortcut && !this.hasSubmenu\n ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n : html``}\n ${this.hasSubmenu\n ? html`\n <div class=\"${prefix}--menu-item__shortcut\">\n ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n </div>\n <cds-menu\n className=${menuClassName}\n size=${this.parentElement?.getAttribute('size') ??\n MENU_SIZE.LARGE}\n ?isChild=\"${this.hasSubmenu}\"\n label=\"${label}\"\n .open=\"${submenuOpen}\"\n .x=\"${boundaries.x}\"\n .y=\"${boundaries.y}\">\n <slot name=\"submenu\"></slot>\n </cds-menu>\n `\n : html``}\n `;\n }\n\n _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n if (this.hasSubmenu) {\n this._openSubmenu();\n return;\n }\n\n if (e.type === 'keydown') {\n this.click();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n bubbles: true,\n composed: true,\n detail: {\n triggerEvent: e,\n },\n })\n );\n };\n _handleMouseEnter = () => {\n this.hoverIntentTimeout = setTimeout(() => {\n this._openSubmenu();\n }, this.hoverIntentDelay);\n };\n _handleMouseLeave = () => {\n if (this.hoverIntentTimeout) {\n clearTimeout(this.hoverIntentTimeout);\n this._closeSubmenu();\n this.focus();\n }\n };\n _openSubmenu = () => {\n const { x, y, width, height } = this.getBoundingClientRect();\n if (this.isRtl) {\n this.boundaries = {\n x: [-x, x - width],\n y: [y, y + height],\n };\n } else {\n this.boundaries = {\n x: [x, x + width],\n y: [y, y + height],\n };\n }\n this.submenuOpen = true;\n };\n _registerSubMenuItems = () => {\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const submenuSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"submenu\"]'\n ) as HTMLSlotElement;\n\n const item = submenuSlot?.assignedElements?.()?.[0];\n if (item) {\n switch (item.tagName) {\n case 'CDS-MENU-ITEM-RADIO-GROUP':\n this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n break;\n case 'CDS-MENU-ITEM-GROUP': {\n const slotElements = item.shadowRoot\n ?.querySelector('slot')\n ?.assignedElements();\n const firstElement = slotElements?.length && slotElements[0];\n this.submenuEntry = firstElement;\n break;\n }\n case 'CDS-MENU-ITEM':\n this.submenuEntry = item;\n break;\n }\n }\n }\n }\n });\n observer.observe(this.shadowRoot as Node, {\n childList: true,\n subtree: true,\n });\n };\n _closeSubmenu = () => {\n this.boundaries = {\n x: -1,\n y: -1,\n };\n this.submenuOpen = false;\n (\n this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n )?.focus();\n };\n _handleKeyDown = (e: KeyboardEvent) => {\n if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n this._openSubmenu();\n setTimeout(() => {\n this.submenuEntry.focus();\n });\n e.stopPropagation();\n } else if (e.key === 'Enter' || e.key === ' ') {\n this._handleClick(e);\n }\n };\n\n static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}
1
+ {"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n @consume({ context: MenuContext })\n context;\n\n readonly hoverIntentDelay = 150; // in ms\n hoverIntentTimeout;\n\n /**\n * The parent cds-menu element\n */\n private _parentMenu: CDSMenu | null = null;\n\n /**\n * MutationObserver that observes the parent cds-menu element\n */\n private _parentMenuObserver?: MutationObserver;\n\n /**\n * Label for the menu item.\n */\n @property({ type: String })\n label;\n /**\n * Shortcut for the menu item.\n */\n @property({ type: String })\n shortcut;\n /**\n * Disabled property for the menu item.\n */\n @property({ type: Boolean })\n disabled;\n\n /**\n * Specify the message read by screen readers for the danger menu item variant\n */\n @property({ type: String, attribute: 'danger-description' })\n dangerDescription = 'danger';\n\n /**\n * Whether the menu submen for an item is open or not.\n */\n @property({ type: Boolean })\n submenuOpen = false;\n\n @property()\n kind = MENU_ITEM_KIND.DEFAULT;\n /**\n * Menu boundaries.\n */\n @property()\n boundaries: {\n x: number | [number, number];\n y: number | [number, number];\n } = { x: -1, y: -1 };\n\n @property({ attribute: 'aria-checked' })\n ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n /**\n * Entrypoint.\n */\n @state()\n submenuEntry;\n /**\n * Checks if document direction is rtl.\n */\n @state()\n isRtl = false;\n /**\n * Checks if document direction is rtl.\n */\n @state()\n hasSubmenu = false;\n\n async dispatchIconDetect() {\n const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n if (hasRenderIcon) {\n await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n this.dispatchEvent(\n new CustomEvent('icon-detect', {\n bubbles: true, // Allows event to bubble up the DOM\n composed: true, // Allows event to cross shadow DOM boundary\n })\n );\n }\n }\n\n private _updateAttributes() {\n if (this.disabled && !this.hasSubmenu) {\n this.setAttribute('aria-disabled', this.disabled);\n this.setAttribute('tabindex', '-1');\n } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '-1');\n } else {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '0');\n }\n if (this.hasSubmenu) {\n this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-haspopup');\n }\n if (this.closest(`${prefix}-menu-item-radio-group`)) {\n this.setAttribute('role', 'menuitemradio');\n this.setAttribute('aria-checked', this.ariaChecked + '');\n } else if (!this.getAttribute('role')) {\n this.setAttribute('role', 'menuitem');\n }\n }\n\n firstUpdated() {\n this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n this.dispatchIconDetect();\n this.isRtl = document.dir === 'rtl';\n this._registerSubMenuItems();\n this._parentMenu = this.closest(`${prefix}-menu`);\n\n this._updateAttributes();\n\n this.addEventListener(`${prefix}-menu-closed`, () => {\n this.focus();\n this._closeSubmenu();\n });\n\n if (this._parentMenu) {\n this._parentMenuObserver = new MutationObserver(() => {\n this._updateAttributes();\n });\n\n this._parentMenuObserver.observe(this._parentMenu, {\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n }\n\n disconnectedCallback() {\n this._parentMenuObserver?.disconnect();\n }\n\n updated(): void {\n if (this.hasSubmenu) {\n this.setAttribute('aria-expanded', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-expanded');\n }\n if (this.kind === MENU_ITEM_KIND.DANGER)\n this.classList.toggle(`${prefix}--menu-item--danger`);\n }\n\n @HostListener('click', { capture: true })\n handleClick(event: MouseEvent) {\n this._handleClick(event);\n }\n\n @HostListener('mousedown')\n handleMouseDown(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n }\n }\n\n @HostListener('mouseenter')\n handleMouseEnter() {\n if (this.hasSubmenu) {\n this._handleMouseEnter();\n }\n }\n\n @HostListener('mouseleave')\n handleMouseLeave() {\n if (this.hasSubmenu) {\n this._handleMouseLeave();\n }\n }\n\n @HostListener('keydown')\n handleKeyDown(event: KeyboardEvent) {\n this._handleKeyDown(event);\n }\n\n render() {\n const {\n label,\n shortcut,\n submenuOpen,\n boundaries,\n isRtl,\n kind,\n dangerDescription,\n } = this;\n\n const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n const menuClassName = this.context?.hasSelectableItems\n ? `${prefix}--menu--with-selectable-items`\n : '';\n\n return html`\n <div class=\"${prefix}--menu-item__selection-icon\">\n ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n </div>\n\n <div class=\"${prefix}--menu-item__icon\">\n <slot name=\"render-icon\"></slot>\n </div>\n <div class=\"${prefix}--menu-item__label\">${label}</div>\n ${isDanger\n ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n >${dangerDescription}</span\n >`\n : html``}\n ${shortcut && !this.hasSubmenu\n ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n : html``}\n ${this.hasSubmenu\n ? html`\n <div class=\"${prefix}--menu-item__shortcut\">\n ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n </div>\n <cds-menu\n className=${menuClassName}\n size=${this.parentElement?.getAttribute('size') ??\n MENU_SIZE.LARGE}\n ?isChild=\"${this.hasSubmenu}\"\n label=\"${label}\"\n .open=\"${submenuOpen}\"\n .x=\"${boundaries.x}\"\n .y=\"${boundaries.y}\">\n <slot name=\"submenu\"></slot>\n </cds-menu>\n `\n : html``}\n `;\n }\n\n _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n if (this.disabled) {\n return;\n }\n\n if (this.hasSubmenu) {\n this._openSubmenu();\n return;\n }\n\n if (e.type === 'keydown') {\n this.click();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n bubbles: true,\n composed: true,\n detail: {\n triggerEvent: e,\n },\n })\n );\n };\n _handleMouseEnter = () => {\n this.hoverIntentTimeout = setTimeout(() => {\n this._openSubmenu();\n }, this.hoverIntentDelay);\n };\n _handleMouseLeave = () => {\n if (this.hoverIntentTimeout) {\n clearTimeout(this.hoverIntentTimeout);\n this._closeSubmenu();\n this.focus();\n }\n };\n _openSubmenu = () => {\n const { x, y, width, height } = this.getBoundingClientRect();\n if (this.isRtl) {\n this.boundaries = {\n x: [-x, x - width],\n y: [y, y + height],\n };\n } else {\n this.boundaries = {\n x: [x, x + width],\n y: [y, y + height],\n };\n }\n this.submenuOpen = true;\n };\n _registerSubMenuItems = () => {\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const submenuSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"submenu\"]'\n ) as HTMLSlotElement;\n\n const item = submenuSlot?.assignedElements?.()?.[0];\n if (item) {\n switch (item.tagName) {\n case 'CDS-MENU-ITEM-RADIO-GROUP':\n this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n break;\n case 'CDS-MENU-ITEM-GROUP': {\n const slotElements = item.shadowRoot\n ?.querySelector('slot')\n ?.assignedElements();\n const firstElement = slotElements?.length && slotElements[0];\n this.submenuEntry = firstElement;\n break;\n }\n case 'CDS-MENU-ITEM':\n this.submenuEntry = item;\n break;\n }\n }\n }\n }\n });\n observer.observe(this.shadowRoot as Node, {\n childList: true,\n subtree: true,\n });\n };\n _closeSubmenu = () => {\n this.boundaries = {\n x: -1,\n y: -1,\n };\n this.submenuOpen = false;\n (\n this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n )?.focus();\n };\n _handleKeyDown = (e: KeyboardEvent) => {\n if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n this._openSubmenu();\n setTimeout(() => {\n this.submenuEntry.focus();\n });\n e.stopPropagation();\n } else if (e.key === 'Enter' || e.key === ' ') {\n this._handleClick(e);\n }\n };\n\n static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}