@nordhealth/components 3.6.2 → 3.7.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 (239) hide show
  1. package/custom-elements.json +312 -312
  2. package/lib/AutocompleteMixin-5a7e10b2.js +2 -0
  3. package/lib/{AutocompleteMixin-60503685.js.map → AutocompleteMixin-5a7e10b2.js.map} +1 -1
  4. package/lib/Avatar.js +1 -1
  5. package/lib/Avatar.js.map +1 -1
  6. package/lib/Badge.js +1 -1
  7. package/lib/Badge.js.map +1 -1
  8. package/lib/Banner.js +1 -1
  9. package/lib/Banner.js.map +1 -1
  10. package/lib/Button.js +1 -1
  11. package/lib/Button.js.map +1 -1
  12. package/lib/ButtonGroup.js +1 -1
  13. package/lib/ButtonGroup.js.map +1 -1
  14. package/lib/{Calendar-c68fd0d2.js → Calendar-38b5ce2b.js} +2 -2
  15. package/lib/{Calendar-c68fd0d2.js.map → Calendar-38b5ce2b.js.map} +1 -1
  16. package/lib/Calendar.js +1 -1
  17. package/lib/Card.js +1 -1
  18. package/lib/Card.js.map +1 -1
  19. package/lib/Checkbox.js +1 -1
  20. package/lib/Checkbox.js.map +1 -1
  21. package/lib/CommandMenu.js +1 -1
  22. package/lib/CommandMenu.js.map +1 -1
  23. package/lib/CommandMenuAction.js +1 -1
  24. package/lib/CommandMenuAction.js.map +1 -1
  25. package/lib/{Component-253ecb24.js → Component-2253424f.js} +2 -2
  26. package/lib/Component-2253424f.js.map +1 -0
  27. package/lib/DatePicker.js +1 -1
  28. package/lib/DatePicker.js.map +1 -1
  29. package/lib/DateSelectEvent.js.map +1 -1
  30. package/lib/DirectionController-f35f5476.js.map +1 -1
  31. package/lib/Divider.js +1 -1
  32. package/lib/Divider.js.map +1 -1
  33. package/lib/DraftComponentMixin-9e4b7b34.js.map +1 -1
  34. package/lib/Drawer.js +1 -1
  35. package/lib/Drawer.js.map +1 -1
  36. package/lib/Dropdown.js +1 -1
  37. package/lib/Dropdown.js.map +1 -1
  38. package/lib/DropdownGroup.js +1 -1
  39. package/lib/DropdownGroup.js.map +1 -1
  40. package/lib/{DropdownItem-397cd757.js → DropdownItem-588f5a6b.js} +2 -2
  41. package/lib/DropdownItem-588f5a6b.js.map +1 -0
  42. package/lib/DropdownItem.js +1 -1
  43. package/lib/DropdownItem.js.map +1 -1
  44. package/lib/EmptyState.js +1 -1
  45. package/lib/EmptyState.js.map +1 -1
  46. package/lib/EventController-d99ebeef.js.map +1 -1
  47. package/lib/Fieldset.js +1 -1
  48. package/lib/Fieldset.js.map +1 -1
  49. package/lib/{FocusableMixin-003e1094.js → FocusableMixin-d30213b4.js} +2 -2
  50. package/lib/{FocusableMixin-003e1094.js.map → FocusableMixin-d30213b4.js.map} +1 -1
  51. package/lib/{FormAssociatedMixin-0638b151.js → FormAssociatedMixin-a278fda4.js} +2 -2
  52. package/lib/{FormAssociatedMixin-0638b151.js.map → FormAssociatedMixin-a278fda4.js.map} +1 -1
  53. package/lib/{FormField-0783cb5a.js → FormField-87551be2.js} +2 -2
  54. package/lib/FormField-87551be2.js.map +1 -0
  55. package/lib/Header.js +1 -1
  56. package/lib/Header.js.map +1 -1
  57. package/lib/Icon.js +1 -1
  58. package/lib/Icon.js.map +1 -1
  59. package/lib/IconManager.js +1 -1
  60. package/lib/IconManager.js.map +1 -1
  61. package/lib/Input.js +1 -1
  62. package/lib/Input.js.map +1 -1
  63. package/lib/{InputMixin-87012c5a.js → InputMixin-83b5bd46.js} +2 -2
  64. package/lib/{InputMixin-87012c5a.js.map → InputMixin-83b5bd46.js.map} +1 -1
  65. package/lib/KeyboardController.js.map +1 -1
  66. package/lib/Layout.js +1 -1
  67. package/lib/Layout.js.map +1 -1
  68. package/lib/LightDismissController-a2645ae6.js.map +1 -1
  69. package/lib/{LightDomController-2b7e42a2.js → LightDomController-5388d84c.js} +2 -2
  70. package/lib/{LightDomController-2b7e42a2.js.map → LightDomController-5388d84c.js.map} +1 -1
  71. package/lib/LocalizeController.js.map +1 -1
  72. package/lib/Message.js +1 -1
  73. package/lib/Message.js.map +1 -1
  74. package/lib/Modal.js +1 -1
  75. package/lib/Modal.js.map +1 -1
  76. package/lib/ModalController.js.map +1 -1
  77. package/lib/NavGroup.js +1 -1
  78. package/lib/NavGroup.js.map +1 -1
  79. package/lib/NavItem.js +1 -1
  80. package/lib/NavItem.js.map +1 -1
  81. package/lib/{NavToggle-d39f3c6d.js → NavToggle-cb2c3648.js} +2 -2
  82. package/lib/{NavToggle-d39f3c6d.js.map → NavToggle-cb2c3648.js.map} +1 -1
  83. package/lib/NavToggle.js +1 -1
  84. package/lib/Navigation.js +1 -1
  85. package/lib/Navigation.js.map +1 -1
  86. package/lib/Notification.js +1 -1
  87. package/lib/Notification.js.map +1 -1
  88. package/lib/NotificationGroup.js +1 -1
  89. package/lib/NotificationGroup.js.map +1 -1
  90. package/lib/{NotificationMixin-cea138a7.js → NotificationMixin-207f1f56.js} +2 -2
  91. package/lib/{NotificationMixin-cea138a7.js.map → NotificationMixin-207f1f56.js.map} +1 -1
  92. package/lib/Popout-2220e77b.js +2 -0
  93. package/lib/{Popout-1183c22b.js.map → Popout-2220e77b.js.map} +1 -1
  94. package/lib/Popout.js +1 -1
  95. package/lib/ProgressBar.js +1 -1
  96. package/lib/ProgressBar.js.map +1 -1
  97. package/lib/Qrcode.js +1 -1
  98. package/lib/Qrcode.js.map +1 -1
  99. package/lib/Radio.js +1 -1
  100. package/lib/Radio.js.map +1 -1
  101. package/lib/Range.js +1 -1
  102. package/lib/Range.js.map +1 -1
  103. package/lib/ScrollbarController-773c79f4.js.map +1 -1
  104. package/lib/Select.js +1 -1
  105. package/lib/Select.js.map +1 -1
  106. package/lib/SelectEvent.js.map +1 -1
  107. package/lib/ShortcutController-87615e31.js.map +1 -1
  108. package/lib/SizeMixin-ab074eff.js +2 -0
  109. package/lib/{SizeMixin-bc2098f4.js.map → SizeMixin-ab074eff.js.map} +1 -1
  110. package/lib/Skeleton.js +1 -1
  111. package/lib/Skeleton.js.map +1 -1
  112. package/lib/SlotController-d733c575.js.map +1 -1
  113. package/lib/Spinner.js +1 -1
  114. package/lib/Spinner.js.map +1 -1
  115. package/lib/Stack.js +1 -1
  116. package/lib/Stack.js.map +1 -1
  117. package/lib/{Sticky-220280e0.js → Sticky-c34c9b12.js} +2 -2
  118. package/lib/Sticky-c34c9b12.js.map +1 -0
  119. package/lib/Tab.js +1 -1
  120. package/lib/Tab.js.map +1 -1
  121. package/lib/TabGroup.js +1 -1
  122. package/lib/TabGroup.js.map +1 -1
  123. package/lib/TabPanel.js +1 -1
  124. package/lib/TabPanel.js.map +1 -1
  125. package/lib/Table.js +1 -1
  126. package/lib/Table.js.map +1 -1
  127. package/lib/{TextField-b455a6dd.js → TextField-2d778949.js} +2 -2
  128. package/lib/{TextField-b455a6dd.js.map → TextField-2d778949.js.map} +1 -1
  129. package/lib/Textarea.js +1 -1
  130. package/lib/Textarea.js.map +1 -1
  131. package/lib/Toast.js +1 -1
  132. package/lib/Toast.js.map +1 -1
  133. package/lib/ToastGroup.js +1 -1
  134. package/lib/ToastGroup.js.map +1 -1
  135. package/lib/Toggle.js +1 -1
  136. package/lib/Toggle.js.map +1 -1
  137. package/lib/Tooltip.js +1 -1
  138. package/lib/Tooltip.js.map +1 -1
  139. package/lib/TopBar.js +1 -1
  140. package/lib/TopBar.js.map +1 -1
  141. package/lib/VisuallyHidden.js +1 -1
  142. package/lib/VisuallyHidden.js.map +1 -1
  143. package/lib/bundle.js +35 -18
  144. package/lib/bundle.js.map +1 -1
  145. package/lib/{class-map-4a0dec4a.js → class-map-512f0bc1.js} +2 -2
  146. package/lib/class-map-512f0bc1.js.map +1 -0
  147. package/lib/collection-511dcfac.js +7 -0
  148. package/lib/collection-511dcfac.js.map +1 -0
  149. package/lib/cond-bb9ee891.js +2 -0
  150. package/lib/{cond-77258def.js.map → cond-bb9ee891.js.map} +1 -1
  151. package/lib/{directive-de55b00a.js → directive-e9ce14b4.js} +1 -1
  152. package/lib/directive-e9ce14b4.js.map +1 -0
  153. package/lib/events-d9666e88.js.map +1 -1
  154. package/lib/{if-defined-10508457.js → if-defined-cccde88f.js} +2 -2
  155. package/lib/if-defined-cccde88f.js.map +1 -0
  156. package/lib/index.js +1 -1
  157. package/lib/observe-a9c6dfb6.js.map +1 -1
  158. package/lib/positioning-2346bdd6.js +2 -0
  159. package/lib/positioning-2346bdd6.js.map +1 -0
  160. package/lib/{property-03f59dce.js → property-c78323b1.js} +2 -2
  161. package/lib/property-c78323b1.js.map +1 -0
  162. package/lib/{query-2d22378e.js → query-36bfe0e4.js} +1 -1
  163. package/lib/query-36bfe0e4.js.map +1 -0
  164. package/lib/query-assigned-elements-92ce7494.js +51 -0
  165. package/lib/query-assigned-elements-92ce7494.js.map +1 -0
  166. package/lib/{ref-f75a30b7.js → ref-99418ab4.js} +4 -4
  167. package/lib/ref-99418ab4.js.map +1 -0
  168. package/lib/src/avatar/Avatar.d.ts +3 -3
  169. package/lib/src/badge/Badge.d.ts +1 -1
  170. package/lib/src/banner/Banner.d.ts +1 -1
  171. package/lib/src/button-group/ButtonGroup.d.ts +1 -1
  172. package/lib/src/calendar/Calendar.d.ts +1 -1
  173. package/lib/src/card/Card.d.ts +1 -1
  174. package/lib/src/checkbox/Checkbox.d.ts +1 -1
  175. package/lib/src/command-menu/CommandMenu.d.ts +1 -1
  176. package/lib/src/command-menu/CommandMenuAction.d.ts +1 -1
  177. package/lib/src/date-picker/DatePicker.d.ts +1 -1
  178. package/lib/src/drawer/Drawer.d.ts +1 -1
  179. package/lib/src/dropdown/Dropdown.d.ts +2 -1
  180. package/lib/src/dropdown-group/DropdownGroup.d.ts +1 -1
  181. package/lib/src/empty-state/EmptyState.d.ts +1 -1
  182. package/lib/src/fieldset/Fieldset.d.ts +1 -1
  183. package/lib/src/header/Header.d.ts +1 -1
  184. package/lib/src/icon/Icon.d.ts +1 -1
  185. package/lib/src/input/Input.d.ts +1 -1
  186. package/lib/src/layout/Layout.d.ts +1 -1
  187. package/lib/src/modal/Modal.d.ts +2 -1
  188. package/lib/src/nav-group/NavGroup.d.ts +1 -1
  189. package/lib/src/nav-toggle/NavToggle.d.ts +1 -1
  190. package/lib/src/navigation/Navigation.d.ts +1 -1
  191. package/lib/src/notification/Notification.d.ts +1 -1
  192. package/lib/src/notification-group/NotificationGroup.d.ts +1 -1
  193. package/lib/src/popout/Popout.d.ts +1 -1
  194. package/lib/src/progress-bar/ProgressBar.d.ts +1 -1
  195. package/lib/src/qrcode/Qrcode.d.ts +1 -1
  196. package/lib/src/radio/Radio.d.ts +1 -1
  197. package/lib/src/range/Range.d.ts +1 -1
  198. package/lib/src/select/Select.d.ts +1 -1
  199. package/lib/src/skeleton/Skeleton.d.ts +1 -1
  200. package/lib/src/spinner/Spinner.d.ts +1 -1
  201. package/lib/src/stack/Stack.d.ts +1 -1
  202. package/lib/src/tab/Tab.d.ts +1 -1
  203. package/lib/src/tab-group/TabGroup.d.ts +1 -1
  204. package/lib/src/tab-panel/TabPanel.d.ts +1 -1
  205. package/lib/src/textarea/Textarea.d.ts +1 -1
  206. package/lib/src/toast/Toast.d.ts +1 -1
  207. package/lib/src/toast-group/ToastGroup.d.ts +1 -1
  208. package/lib/src/toggle/Toggle.d.ts +1 -1
  209. package/lib/src/tooltip/Tooltip.d.ts +1 -1
  210. package/lib/src/top-bar/TopBar.d.ts +1 -1
  211. package/lib/src/visually-hidden/VisuallyHidden.d.ts +1 -1
  212. package/lib/{state-70f38ceb.js → state-d31c6912.js} +2 -2
  213. package/lib/state-d31c6912.js.map +1 -0
  214. package/lib/style-map-f8a1c8d5.js +7 -0
  215. package/lib/style-map-f8a1c8d5.js.map +1 -0
  216. package/package.json +3 -3
  217. package/lib/AutocompleteMixin-60503685.js +0 -2
  218. package/lib/Component-253ecb24.js.map +0 -1
  219. package/lib/DropdownItem-397cd757.js.map +0 -1
  220. package/lib/FormField-0783cb5a.js.map +0 -1
  221. package/lib/Popout-1183c22b.js +0 -2
  222. package/lib/SizeMixin-bc2098f4.js +0 -2
  223. package/lib/Sticky-220280e0.js.map +0 -1
  224. package/lib/class-map-4a0dec4a.js.map +0 -1
  225. package/lib/collection-bba319d3.js +0 -7
  226. package/lib/collection-bba319d3.js.map +0 -1
  227. package/lib/cond-77258def.js +0 -2
  228. package/lib/directive-de55b00a.js.map +0 -1
  229. package/lib/if-defined-10508457.js.map +0 -1
  230. package/lib/positioning-a572d126.js +0 -2
  231. package/lib/positioning-a572d126.js.map +0 -1
  232. package/lib/property-03f59dce.js.map +0 -1
  233. package/lib/query-2d22378e.js.map +0 -1
  234. package/lib/query-assigned-elements-2f8275b7.js +0 -34
  235. package/lib/query-assigned-elements-2f8275b7.js.map +0 -1
  236. package/lib/ref-f75a30b7.js.map +0 -1
  237. package/lib/state-70f38ceb.js.map +0 -1
  238. package/lib/style-map-75ce20b3.js +0 -7
  239. package/lib/style-map-75ce20b3.js.map +0 -1
@@ -741,91 +741,6 @@
741
741
  }
742
742
  ]
743
743
  },
744
- {
745
- "kind": "javascript-module",
746
- "path": "src/banner/Banner.ts",
747
- "declarations": [
748
- {
749
- "kind": "class",
750
- "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
751
- "name": "Banner",
752
- "cssProperties": [
753
- {
754
- "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
755
- "name": "--n-banner-border-radius",
756
- "default": "var(--n-border-radius)"
757
- },
758
- {
759
- "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
760
- "name": "--n-banner-box-shadow",
761
- "default": "var(--n-box-shadow-card)"
762
- }
763
- ],
764
- "slots": [
765
- {
766
- "description": "default slot",
767
- "name": ""
768
- }
769
- ],
770
- "members": [
771
- {
772
- "kind": "field",
773
- "name": "variant",
774
- "type": {
775
- "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
776
- },
777
- "default": "\"info\"",
778
- "description": "The style variant of the banner.",
779
- "attribute": "variant",
780
- "reflects": true
781
- }
782
- ],
783
- "attributes": [
784
- {
785
- "name": "variant",
786
- "type": {
787
- "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
788
- },
789
- "default": "\"info\"",
790
- "description": "The style variant of the banner.",
791
- "fieldName": "variant"
792
- }
793
- ],
794
- "superclass": {
795
- "name": "LitElement",
796
- "package": "lit"
797
- },
798
- "localization": [],
799
- "status": "ready",
800
- "category": "feedback",
801
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
802
- "examples": [],
803
- "dependencies": [
804
- "icon"
805
- ],
806
- "tagName": "nord-banner",
807
- "customElement": true
808
- }
809
- ],
810
- "exports": [
811
- {
812
- "kind": "js",
813
- "name": "default",
814
- "declaration": {
815
- "name": "Banner",
816
- "module": "src/banner/Banner.ts"
817
- }
818
- },
819
- {
820
- "kind": "custom-element-definition",
821
- "name": "nord-banner",
822
- "declaration": {
823
- "name": "Banner",
824
- "module": "src/banner/Banner.ts"
825
- }
826
- }
827
- ]
828
- },
829
744
  {
830
745
  "kind": "javascript-module",
831
746
  "path": "src/button/Button.ts",
@@ -1417,78 +1332,52 @@
1417
1332
  },
1418
1333
  {
1419
1334
  "kind": "javascript-module",
1420
- "path": "src/button-group/ButtonGroup.ts",
1335
+ "path": "src/banner/Banner.ts",
1421
1336
  "declarations": [
1422
1337
  {
1423
1338
  "kind": "class",
1424
- "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
1425
- "name": "ButtonGroup",
1339
+ "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
1340
+ "name": "Banner",
1426
1341
  "cssProperties": [
1427
1342
  {
1428
- "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
1429
- "name": "--n-button-group-border-radius",
1430
- "default": "var(--n-border-radius-s)"
1343
+ "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
1344
+ "name": "--n-banner-border-radius",
1345
+ "default": "var(--n-border-radius)"
1431
1346
  },
1432
1347
  {
1433
1348
  "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
1434
- "name": "--n-button-group-box-shadow",
1435
- "default": "var(--n-box-shadow)"
1349
+ "name": "--n-banner-box-shadow",
1350
+ "default": "var(--n-box-shadow-card)"
1436
1351
  }
1437
1352
  ],
1438
1353
  "slots": [
1439
1354
  {
1440
- "description": "The button group content",
1355
+ "description": "default slot",
1441
1356
  "name": ""
1442
1357
  }
1443
1358
  ],
1444
1359
  "members": [
1445
1360
  {
1446
1361
  "kind": "field",
1447
- "name": "dirController",
1448
- "privacy": "private",
1449
- "default": "new DirectionController(this)"
1450
- },
1451
- {
1452
- "kind": "field",
1453
- "name": "direction",
1454
- "type": {
1455
- "text": "\"vertical\" | \"horizontal\""
1456
- },
1457
- "default": "\"horizontal\"",
1458
- "description": "The direction of the button group.",
1459
- "attribute": "direction",
1460
- "reflects": true
1461
- },
1462
- {
1463
- "kind": "field",
1464
- "name": "role",
1362
+ "name": "variant",
1465
1363
  "type": {
1466
- "text": "string"
1364
+ "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
1467
1365
  },
1468
- "default": "\"group\"",
1469
- "description": "The appropriate role for the containing element.",
1470
- "attribute": "role",
1366
+ "default": "\"info\"",
1367
+ "description": "The style variant of the banner.",
1368
+ "attribute": "variant",
1471
1369
  "reflects": true
1472
1370
  }
1473
1371
  ],
1474
1372
  "attributes": [
1475
1373
  {
1476
- "name": "direction",
1477
- "type": {
1478
- "text": "\"vertical\" | \"horizontal\""
1479
- },
1480
- "default": "\"horizontal\"",
1481
- "description": "The direction of the button group.",
1482
- "fieldName": "direction"
1483
- },
1484
- {
1485
- "name": "role",
1374
+ "name": "variant",
1486
1375
  "type": {
1487
- "text": "string"
1376
+ "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
1488
1377
  },
1489
- "default": "\"group\"",
1490
- "description": "The appropriate role for the containing element.",
1491
- "fieldName": "role"
1378
+ "default": "\"info\"",
1379
+ "description": "The style variant of the banner.",
1380
+ "fieldName": "variant"
1492
1381
  }
1493
1382
  ],
1494
1383
  "superclass": {
@@ -1496,12 +1385,14 @@
1496
1385
  "package": "lit"
1497
1386
  },
1498
1387
  "localization": [],
1499
- "status": "new",
1500
- "category": "structure",
1501
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
1388
+ "status": "ready",
1389
+ "category": "feedback",
1390
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
1502
1391
  "examples": [],
1503
- "dependencies": [],
1504
- "tagName": "nord-button-group",
1392
+ "dependencies": [
1393
+ "icon"
1394
+ ],
1395
+ "tagName": "nord-banner",
1505
1396
  "customElement": true
1506
1397
  }
1507
1398
  ],
@@ -1510,16 +1401,16 @@
1510
1401
  "kind": "js",
1511
1402
  "name": "default",
1512
1403
  "declaration": {
1513
- "name": "ButtonGroup",
1514
- "module": "src/button-group/ButtonGroup.ts"
1404
+ "name": "Banner",
1405
+ "module": "src/banner/Banner.ts"
1515
1406
  }
1516
1407
  },
1517
1408
  {
1518
1409
  "kind": "custom-element-definition",
1519
- "name": "nord-button-group",
1410
+ "name": "nord-banner",
1520
1411
  "declaration": {
1521
- "name": "ButtonGroup",
1522
- "module": "src/button-group/ButtonGroup.ts"
1412
+ "name": "Banner",
1413
+ "module": "src/banner/Banner.ts"
1523
1414
  }
1524
1415
  }
1525
1416
  ]
@@ -2029,79 +1920,311 @@
2029
1920
  },
2030
1921
  {
2031
1922
  "kind": "javascript-module",
2032
- "path": "src/checkbox/Checkbox.ts",
1923
+ "path": "src/button-group/ButtonGroup.ts",
2033
1924
  "declarations": [
2034
1925
  {
2035
1926
  "kind": "class",
2036
- "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
2037
- "name": "Checkbox",
2038
- "slots": [
1927
+ "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
1928
+ "name": "ButtonGroup",
1929
+ "cssProperties": [
2039
1930
  {
2040
- "description": "Use when a label requires more than plain text.",
2041
- "name": "label"
1931
+ "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
1932
+ "name": "--n-button-group-border-radius",
1933
+ "default": "var(--n-border-radius-s)"
2042
1934
  },
2043
1935
  {
2044
- "description": "Optional slot that holds hint text for the input.",
2045
- "name": "hint"
2046
- },
1936
+ "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
1937
+ "name": "--n-button-group-box-shadow",
1938
+ "default": "var(--n-box-shadow)"
1939
+ }
1940
+ ],
1941
+ "slots": [
2047
1942
  {
2048
- "description": "Optional slot that holds error text for the input.",
2049
- "name": "error"
1943
+ "description": "The button group content",
1944
+ "name": ""
2050
1945
  }
2051
1946
  ],
2052
1947
  "members": [
2053
1948
  {
2054
1949
  "kind": "field",
2055
- "name": "formValue",
2056
- "privacy": "protected",
2057
- "readonly": true,
2058
- "inheritedFrom": {
2059
- "name": "FormAssociatedMixin",
2060
- "module": "src/common/mixins/FormAssociatedMixin.ts"
2061
- }
1950
+ "name": "dirController",
1951
+ "privacy": "private",
1952
+ "default": "new DirectionController(this)"
2062
1953
  },
2063
1954
  {
2064
1955
  "kind": "field",
2065
- "name": "indeterminate",
1956
+ "name": "direction",
2066
1957
  "type": {
2067
- "text": "boolean"
1958
+ "text": "\"vertical\" | \"horizontal\""
2068
1959
  },
2069
- "default": "false",
2070
- "description": "Controls whether the checkbox is in an indeterminate state.",
2071
- "attribute": "indeterminate"
1960
+ "default": "\"horizontal\"",
1961
+ "description": "The direction of the button group.",
1962
+ "attribute": "direction",
1963
+ "reflects": true
2072
1964
  },
2073
1965
  {
2074
1966
  "kind": "field",
2075
- "name": "checked",
1967
+ "name": "role",
2076
1968
  "type": {
2077
- "text": "boolean"
1969
+ "text": "string"
2078
1970
  },
2079
- "default": "false",
2080
- "description": "Controls whether the checkbox is checked or not.",
2081
- "attribute": "checked"
2082
- },
1971
+ "default": "\"group\"",
1972
+ "description": "The appropriate role for the containing element.",
1973
+ "attribute": "role",
1974
+ "reflects": true
1975
+ }
1976
+ ],
1977
+ "attributes": [
2083
1978
  {
2084
- "kind": "method",
2085
- "name": "handleChange",
2086
- "privacy": "protected",
2087
- "parameters": [
2088
- {
2089
- "name": "e",
2090
- "type": {
2091
- "text": "Event"
2092
- }
2093
- }
2094
- ],
2095
- "return": {
2096
- "type": {
2097
- "text": "void"
2098
- }
1979
+ "name": "direction",
1980
+ "type": {
1981
+ "text": "\"vertical\" | \"horizontal\""
2099
1982
  },
2100
- "inheritedFrom": {
2101
- "name": "FormAssociatedMixin",
2102
- "module": "src/common/mixins/FormAssociatedMixin.ts"
2103
- }
2104
- },
1983
+ "default": "\"horizontal\"",
1984
+ "description": "The direction of the button group.",
1985
+ "fieldName": "direction"
1986
+ },
1987
+ {
1988
+ "name": "role",
1989
+ "type": {
1990
+ "text": "string"
1991
+ },
1992
+ "default": "\"group\"",
1993
+ "description": "The appropriate role for the containing element.",
1994
+ "fieldName": "role"
1995
+ }
1996
+ ],
1997
+ "superclass": {
1998
+ "name": "LitElement",
1999
+ "package": "lit"
2000
+ },
2001
+ "localization": [],
2002
+ "status": "new",
2003
+ "category": "structure",
2004
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
2005
+ "examples": [],
2006
+ "dependencies": [],
2007
+ "tagName": "nord-button-group",
2008
+ "customElement": true
2009
+ }
2010
+ ],
2011
+ "exports": [
2012
+ {
2013
+ "kind": "js",
2014
+ "name": "default",
2015
+ "declaration": {
2016
+ "name": "ButtonGroup",
2017
+ "module": "src/button-group/ButtonGroup.ts"
2018
+ }
2019
+ },
2020
+ {
2021
+ "kind": "custom-element-definition",
2022
+ "name": "nord-button-group",
2023
+ "declaration": {
2024
+ "name": "ButtonGroup",
2025
+ "module": "src/button-group/ButtonGroup.ts"
2026
+ }
2027
+ }
2028
+ ]
2029
+ },
2030
+ {
2031
+ "kind": "javascript-module",
2032
+ "path": "src/card/Card.ts",
2033
+ "declarations": [
2034
+ {
2035
+ "kind": "class",
2036
+ "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
2037
+ "name": "Card",
2038
+ "cssProperties": [
2039
+ {
2040
+ "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
2041
+ "name": "--n-card-border-radius",
2042
+ "default": "var(--n-border-radius)"
2043
+ },
2044
+ {
2045
+ "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
2046
+ "name": "--n-card-box-shadow",
2047
+ "default": "var(--n-box-shadow-popout)"
2048
+ },
2049
+ {
2050
+ "description": "Controls the padding on all sides of the card.",
2051
+ "name": "--n-card-padding",
2052
+ "default": "var(--n-space-m)"
2053
+ },
2054
+ {
2055
+ "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
2056
+ "name": "--n-card-slot-padding",
2057
+ "default": "var(--n-space-m)"
2058
+ }
2059
+ ],
2060
+ "slots": [
2061
+ {
2062
+ "description": "The card content.",
2063
+ "name": ""
2064
+ },
2065
+ {
2066
+ "description": "Optional slot that holds a header for the card.",
2067
+ "name": "header"
2068
+ },
2069
+ {
2070
+ "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
2071
+ "name": "header-end"
2072
+ },
2073
+ {
2074
+ "description": "Optional slot that holds footer content for the card.",
2075
+ "name": "footer"
2076
+ }
2077
+ ],
2078
+ "members": [
2079
+ {
2080
+ "kind": "field",
2081
+ "name": "headerSlot",
2082
+ "privacy": "private",
2083
+ "default": "new SlotController(this, \"header\")"
2084
+ },
2085
+ {
2086
+ "kind": "field",
2087
+ "name": "headerEndSlot",
2088
+ "privacy": "private",
2089
+ "default": "new SlotController(this, \"header-end\")"
2090
+ },
2091
+ {
2092
+ "kind": "field",
2093
+ "name": "footerSlot",
2094
+ "privacy": "private",
2095
+ "default": "new SlotController(this, \"footer\")"
2096
+ },
2097
+ {
2098
+ "kind": "field",
2099
+ "name": "padding",
2100
+ "type": {
2101
+ "text": "\"m\" | \"l\" | \"none\""
2102
+ },
2103
+ "default": "\"m\"",
2104
+ "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
2105
+ "attribute": "padding",
2106
+ "reflects": true
2107
+ }
2108
+ ],
2109
+ "attributes": [
2110
+ {
2111
+ "name": "padding",
2112
+ "type": {
2113
+ "text": "\"m\" | \"l\" | \"none\""
2114
+ },
2115
+ "default": "\"m\"",
2116
+ "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
2117
+ "fieldName": "padding"
2118
+ }
2119
+ ],
2120
+ "superclass": {
2121
+ "name": "LitElement",
2122
+ "package": "lit"
2123
+ },
2124
+ "localization": [],
2125
+ "status": "ready",
2126
+ "category": "structure",
2127
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
2128
+ "examples": [],
2129
+ "dependencies": [],
2130
+ "tagName": "nord-card",
2131
+ "customElement": true
2132
+ }
2133
+ ],
2134
+ "exports": [
2135
+ {
2136
+ "kind": "js",
2137
+ "name": "default",
2138
+ "declaration": {
2139
+ "name": "Card",
2140
+ "module": "src/card/Card.ts"
2141
+ }
2142
+ },
2143
+ {
2144
+ "kind": "custom-element-definition",
2145
+ "name": "nord-card",
2146
+ "declaration": {
2147
+ "name": "Card",
2148
+ "module": "src/card/Card.ts"
2149
+ }
2150
+ }
2151
+ ]
2152
+ },
2153
+ {
2154
+ "kind": "javascript-module",
2155
+ "path": "src/checkbox/Checkbox.ts",
2156
+ "declarations": [
2157
+ {
2158
+ "kind": "class",
2159
+ "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
2160
+ "name": "Checkbox",
2161
+ "slots": [
2162
+ {
2163
+ "description": "Use when a label requires more than plain text.",
2164
+ "name": "label"
2165
+ },
2166
+ {
2167
+ "description": "Optional slot that holds hint text for the input.",
2168
+ "name": "hint"
2169
+ },
2170
+ {
2171
+ "description": "Optional slot that holds error text for the input.",
2172
+ "name": "error"
2173
+ }
2174
+ ],
2175
+ "members": [
2176
+ {
2177
+ "kind": "field",
2178
+ "name": "formValue",
2179
+ "privacy": "protected",
2180
+ "readonly": true,
2181
+ "inheritedFrom": {
2182
+ "name": "FormAssociatedMixin",
2183
+ "module": "src/common/mixins/FormAssociatedMixin.ts"
2184
+ }
2185
+ },
2186
+ {
2187
+ "kind": "field",
2188
+ "name": "indeterminate",
2189
+ "type": {
2190
+ "text": "boolean"
2191
+ },
2192
+ "default": "false",
2193
+ "description": "Controls whether the checkbox is in an indeterminate state.",
2194
+ "attribute": "indeterminate"
2195
+ },
2196
+ {
2197
+ "kind": "field",
2198
+ "name": "checked",
2199
+ "type": {
2200
+ "text": "boolean"
2201
+ },
2202
+ "default": "false",
2203
+ "description": "Controls whether the checkbox is checked or not.",
2204
+ "attribute": "checked"
2205
+ },
2206
+ {
2207
+ "kind": "method",
2208
+ "name": "handleChange",
2209
+ "privacy": "protected",
2210
+ "parameters": [
2211
+ {
2212
+ "name": "e",
2213
+ "type": {
2214
+ "text": "Event"
2215
+ }
2216
+ }
2217
+ ],
2218
+ "return": {
2219
+ "type": {
2220
+ "text": "void"
2221
+ }
2222
+ },
2223
+ "inheritedFrom": {
2224
+ "name": "FormAssociatedMixin",
2225
+ "module": "src/common/mixins/FormAssociatedMixin.ts"
2226
+ }
2227
+ },
2105
2228
  {
2106
2229
  "kind": "field",
2107
2230
  "name": "size",
@@ -2748,129 +2871,6 @@
2748
2871
  }
2749
2872
  ]
2750
2873
  },
2751
- {
2752
- "kind": "javascript-module",
2753
- "path": "src/card/Card.ts",
2754
- "declarations": [
2755
- {
2756
- "kind": "class",
2757
- "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
2758
- "name": "Card",
2759
- "cssProperties": [
2760
- {
2761
- "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
2762
- "name": "--n-card-border-radius",
2763
- "default": "var(--n-border-radius)"
2764
- },
2765
- {
2766
- "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
2767
- "name": "--n-card-box-shadow",
2768
- "default": "var(--n-box-shadow-popout)"
2769
- },
2770
- {
2771
- "description": "Controls the padding on all sides of the card.",
2772
- "name": "--n-card-padding",
2773
- "default": "var(--n-space-m)"
2774
- },
2775
- {
2776
- "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
2777
- "name": "--n-card-slot-padding",
2778
- "default": "var(--n-space-m)"
2779
- }
2780
- ],
2781
- "slots": [
2782
- {
2783
- "description": "The card content.",
2784
- "name": ""
2785
- },
2786
- {
2787
- "description": "Optional slot that holds a header for the card.",
2788
- "name": "header"
2789
- },
2790
- {
2791
- "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
2792
- "name": "header-end"
2793
- },
2794
- {
2795
- "description": "Optional slot that holds footer content for the card.",
2796
- "name": "footer"
2797
- }
2798
- ],
2799
- "members": [
2800
- {
2801
- "kind": "field",
2802
- "name": "headerSlot",
2803
- "privacy": "private",
2804
- "default": "new SlotController(this, \"header\")"
2805
- },
2806
- {
2807
- "kind": "field",
2808
- "name": "headerEndSlot",
2809
- "privacy": "private",
2810
- "default": "new SlotController(this, \"header-end\")"
2811
- },
2812
- {
2813
- "kind": "field",
2814
- "name": "footerSlot",
2815
- "privacy": "private",
2816
- "default": "new SlotController(this, \"footer\")"
2817
- },
2818
- {
2819
- "kind": "field",
2820
- "name": "padding",
2821
- "type": {
2822
- "text": "\"m\" | \"l\" | \"none\""
2823
- },
2824
- "default": "\"m\"",
2825
- "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
2826
- "attribute": "padding",
2827
- "reflects": true
2828
- }
2829
- ],
2830
- "attributes": [
2831
- {
2832
- "name": "padding",
2833
- "type": {
2834
- "text": "\"m\" | \"l\" | \"none\""
2835
- },
2836
- "default": "\"m\"",
2837
- "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
2838
- "fieldName": "padding"
2839
- }
2840
- ],
2841
- "superclass": {
2842
- "name": "LitElement",
2843
- "package": "lit"
2844
- },
2845
- "localization": [],
2846
- "status": "ready",
2847
- "category": "structure",
2848
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
2849
- "examples": [],
2850
- "dependencies": [],
2851
- "tagName": "nord-card",
2852
- "customElement": true
2853
- }
2854
- ],
2855
- "exports": [
2856
- {
2857
- "kind": "js",
2858
- "name": "default",
2859
- "declaration": {
2860
- "name": "Card",
2861
- "module": "src/card/Card.ts"
2862
- }
2863
- },
2864
- {
2865
- "kind": "custom-element-definition",
2866
- "name": "nord-card",
2867
- "declaration": {
2868
- "name": "Card",
2869
- "module": "src/card/Card.ts"
2870
- }
2871
- }
2872
- ]
2873
- },
2874
2874
  {
2875
2875
  "kind": "javascript-module",
2876
2876
  "path": "src/command-menu/CommandMenu.ts",