@nordhealth/components 3.6.1 → 3.6.2
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.
- package/custom-elements.json +246 -240
- package/lib/ButtonGroup.js +1 -1
- package/lib/ButtonGroup.js.map +1 -1
- package/lib/bundle.js +1 -1
- package/lib/bundle.js.map +1 -1
- package/lib/src/button-group/ButtonGroup.d.ts +1 -0
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -628,6 +628,204 @@
|
|
|
628
628
|
}
|
|
629
629
|
]
|
|
630
630
|
},
|
|
631
|
+
{
|
|
632
|
+
"kind": "javascript-module",
|
|
633
|
+
"path": "src/badge/Badge.ts",
|
|
634
|
+
"declarations": [
|
|
635
|
+
{
|
|
636
|
+
"kind": "class",
|
|
637
|
+
"description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
|
|
638
|
+
"name": "Badge",
|
|
639
|
+
"slots": [
|
|
640
|
+
{
|
|
641
|
+
"description": "The badge content.",
|
|
642
|
+
"name": ""
|
|
643
|
+
},
|
|
644
|
+
{
|
|
645
|
+
"description": "Used to place an icon at the start of badge.",
|
|
646
|
+
"name": "icon"
|
|
647
|
+
}
|
|
648
|
+
],
|
|
649
|
+
"members": [
|
|
650
|
+
{
|
|
651
|
+
"kind": "field",
|
|
652
|
+
"name": "type",
|
|
653
|
+
"type": {
|
|
654
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
655
|
+
},
|
|
656
|
+
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
657
|
+
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
658
|
+
"attribute": "type",
|
|
659
|
+
"reflects": true
|
|
660
|
+
},
|
|
661
|
+
{
|
|
662
|
+
"kind": "field",
|
|
663
|
+
"name": "variant",
|
|
664
|
+
"type": {
|
|
665
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
|
|
666
|
+
},
|
|
667
|
+
"description": "The style variant of the badge.\nDetermines the background color of the badge.",
|
|
668
|
+
"attribute": "variant",
|
|
669
|
+
"reflects": true
|
|
670
|
+
},
|
|
671
|
+
{
|
|
672
|
+
"kind": "field",
|
|
673
|
+
"name": "strong",
|
|
674
|
+
"type": {
|
|
675
|
+
"text": "boolean"
|
|
676
|
+
},
|
|
677
|
+
"default": "false",
|
|
678
|
+
"description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
|
|
679
|
+
"attribute": "strong",
|
|
680
|
+
"reflects": true
|
|
681
|
+
}
|
|
682
|
+
],
|
|
683
|
+
"attributes": [
|
|
684
|
+
{
|
|
685
|
+
"name": "type",
|
|
686
|
+
"type": {
|
|
687
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
688
|
+
},
|
|
689
|
+
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
690
|
+
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
691
|
+
"fieldName": "type"
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
"name": "variant",
|
|
695
|
+
"type": {
|
|
696
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
|
|
697
|
+
},
|
|
698
|
+
"description": "The style variant of the badge.\nDetermines the background color of the badge.",
|
|
699
|
+
"fieldName": "variant"
|
|
700
|
+
},
|
|
701
|
+
{
|
|
702
|
+
"name": "strong",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "boolean"
|
|
705
|
+
},
|
|
706
|
+
"default": "false",
|
|
707
|
+
"description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
|
|
708
|
+
"fieldName": "strong"
|
|
709
|
+
}
|
|
710
|
+
],
|
|
711
|
+
"superclass": {
|
|
712
|
+
"name": "LitElement",
|
|
713
|
+
"package": "lit"
|
|
714
|
+
},
|
|
715
|
+
"localization": [],
|
|
716
|
+
"status": "ready",
|
|
717
|
+
"category": "text",
|
|
718
|
+
"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 established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge 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\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral` | The default style variant. |\n| `info` | Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n| `progress` | Used to convey something that’s in progress. |\n",
|
|
719
|
+
"examples": [],
|
|
720
|
+
"dependencies": [],
|
|
721
|
+
"tagName": "nord-badge",
|
|
722
|
+
"customElement": true
|
|
723
|
+
}
|
|
724
|
+
],
|
|
725
|
+
"exports": [
|
|
726
|
+
{
|
|
727
|
+
"kind": "js",
|
|
728
|
+
"name": "default",
|
|
729
|
+
"declaration": {
|
|
730
|
+
"name": "Badge",
|
|
731
|
+
"module": "src/badge/Badge.ts"
|
|
732
|
+
}
|
|
733
|
+
},
|
|
734
|
+
{
|
|
735
|
+
"kind": "custom-element-definition",
|
|
736
|
+
"name": "nord-badge",
|
|
737
|
+
"declaration": {
|
|
738
|
+
"name": "Badge",
|
|
739
|
+
"module": "src/badge/Badge.ts"
|
|
740
|
+
}
|
|
741
|
+
}
|
|
742
|
+
]
|
|
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
|
+
},
|
|
631
829
|
{
|
|
632
830
|
"kind": "javascript-module",
|
|
633
831
|
"path": "src/button/Button.ts",
|
|
@@ -1219,82 +1417,78 @@
|
|
|
1219
1417
|
},
|
|
1220
1418
|
{
|
|
1221
1419
|
"kind": "javascript-module",
|
|
1222
|
-
"path": "src/
|
|
1420
|
+
"path": "src/button-group/ButtonGroup.ts",
|
|
1223
1421
|
"declarations": [
|
|
1224
1422
|
{
|
|
1225
1423
|
"kind": "class",
|
|
1226
|
-
"description": "
|
|
1227
|
-
"name": "
|
|
1228
|
-
"
|
|
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",
|
|
1426
|
+
"cssProperties": [
|
|
1229
1427
|
{
|
|
1230
|
-
"description": "
|
|
1231
|
-
"name": ""
|
|
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)"
|
|
1232
1431
|
},
|
|
1233
1432
|
{
|
|
1234
|
-
"description": "
|
|
1235
|
-
"name": "
|
|
1433
|
+
"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)"
|
|
1436
|
+
}
|
|
1437
|
+
],
|
|
1438
|
+
"slots": [
|
|
1439
|
+
{
|
|
1440
|
+
"description": "The button group content",
|
|
1441
|
+
"name": ""
|
|
1236
1442
|
}
|
|
1237
1443
|
],
|
|
1238
1444
|
"members": [
|
|
1239
1445
|
{
|
|
1240
1446
|
"kind": "field",
|
|
1241
|
-
"name": "
|
|
1242
|
-
"
|
|
1243
|
-
|
|
1244
|
-
},
|
|
1245
|
-
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
1246
|
-
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
1247
|
-
"attribute": "type",
|
|
1248
|
-
"reflects": true
|
|
1447
|
+
"name": "dirController",
|
|
1448
|
+
"privacy": "private",
|
|
1449
|
+
"default": "new DirectionController(this)"
|
|
1249
1450
|
},
|
|
1250
1451
|
{
|
|
1251
1452
|
"kind": "field",
|
|
1252
|
-
"name": "
|
|
1453
|
+
"name": "direction",
|
|
1253
1454
|
"type": {
|
|
1254
|
-
"text": "\"
|
|
1455
|
+
"text": "\"vertical\" | \"horizontal\""
|
|
1255
1456
|
},
|
|
1256
|
-
"
|
|
1257
|
-
"
|
|
1457
|
+
"default": "\"horizontal\"",
|
|
1458
|
+
"description": "The direction of the button group.",
|
|
1459
|
+
"attribute": "direction",
|
|
1258
1460
|
"reflects": true
|
|
1259
1461
|
},
|
|
1260
1462
|
{
|
|
1261
1463
|
"kind": "field",
|
|
1262
|
-
"name": "
|
|
1464
|
+
"name": "role",
|
|
1263
1465
|
"type": {
|
|
1264
|
-
"text": "
|
|
1466
|
+
"text": "string"
|
|
1265
1467
|
},
|
|
1266
|
-
"default": "
|
|
1267
|
-
"description": "
|
|
1268
|
-
"attribute": "
|
|
1468
|
+
"default": "\"group\"",
|
|
1469
|
+
"description": "The appropriate role for the containing element.",
|
|
1470
|
+
"attribute": "role",
|
|
1269
1471
|
"reflects": true
|
|
1270
1472
|
}
|
|
1271
1473
|
],
|
|
1272
1474
|
"attributes": [
|
|
1273
1475
|
{
|
|
1274
|
-
"name": "
|
|
1275
|
-
"type": {
|
|
1276
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
1277
|
-
},
|
|
1278
|
-
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
1279
|
-
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
1280
|
-
"fieldName": "type"
|
|
1281
|
-
},
|
|
1282
|
-
{
|
|
1283
|
-
"name": "variant",
|
|
1476
|
+
"name": "direction",
|
|
1284
1477
|
"type": {
|
|
1285
|
-
"text": "\"
|
|
1478
|
+
"text": "\"vertical\" | \"horizontal\""
|
|
1286
1479
|
},
|
|
1287
|
-
"
|
|
1288
|
-
"
|
|
1480
|
+
"default": "\"horizontal\"",
|
|
1481
|
+
"description": "The direction of the button group.",
|
|
1482
|
+
"fieldName": "direction"
|
|
1289
1483
|
},
|
|
1290
1484
|
{
|
|
1291
|
-
"name": "
|
|
1485
|
+
"name": "role",
|
|
1292
1486
|
"type": {
|
|
1293
|
-
"text": "
|
|
1487
|
+
"text": "string"
|
|
1294
1488
|
},
|
|
1295
|
-
"default": "
|
|
1296
|
-
"description": "
|
|
1297
|
-
"fieldName": "
|
|
1489
|
+
"default": "\"group\"",
|
|
1490
|
+
"description": "The appropriate role for the containing element.",
|
|
1491
|
+
"fieldName": "role"
|
|
1298
1492
|
}
|
|
1299
1493
|
],
|
|
1300
1494
|
"superclass": {
|
|
@@ -1302,97 +1496,12 @@
|
|
|
1302
1496
|
"package": "lit"
|
|
1303
1497
|
},
|
|
1304
1498
|
"localization": [],
|
|
1305
|
-
"status": "
|
|
1306
|
-
"category": "
|
|
1307
|
-
"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
|
|
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",
|
|
1308
1502
|
"examples": [],
|
|
1309
1503
|
"dependencies": [],
|
|
1310
|
-
"tagName": "nord-
|
|
1311
|
-
"customElement": true
|
|
1312
|
-
}
|
|
1313
|
-
],
|
|
1314
|
-
"exports": [
|
|
1315
|
-
{
|
|
1316
|
-
"kind": "js",
|
|
1317
|
-
"name": "default",
|
|
1318
|
-
"declaration": {
|
|
1319
|
-
"name": "Badge",
|
|
1320
|
-
"module": "src/badge/Badge.ts"
|
|
1321
|
-
}
|
|
1322
|
-
},
|
|
1323
|
-
{
|
|
1324
|
-
"kind": "custom-element-definition",
|
|
1325
|
-
"name": "nord-badge",
|
|
1326
|
-
"declaration": {
|
|
1327
|
-
"name": "Badge",
|
|
1328
|
-
"module": "src/badge/Badge.ts"
|
|
1329
|
-
}
|
|
1330
|
-
}
|
|
1331
|
-
]
|
|
1332
|
-
},
|
|
1333
|
-
{
|
|
1334
|
-
"kind": "javascript-module",
|
|
1335
|
-
"path": "src/banner/Banner.ts",
|
|
1336
|
-
"declarations": [
|
|
1337
|
-
{
|
|
1338
|
-
"kind": "class",
|
|
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",
|
|
1341
|
-
"cssProperties": [
|
|
1342
|
-
{
|
|
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)"
|
|
1346
|
-
},
|
|
1347
|
-
{
|
|
1348
|
-
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
1349
|
-
"name": "--n-banner-box-shadow",
|
|
1350
|
-
"default": "var(--n-box-shadow-card)"
|
|
1351
|
-
}
|
|
1352
|
-
],
|
|
1353
|
-
"slots": [
|
|
1354
|
-
{
|
|
1355
|
-
"description": "default slot",
|
|
1356
|
-
"name": ""
|
|
1357
|
-
}
|
|
1358
|
-
],
|
|
1359
|
-
"members": [
|
|
1360
|
-
{
|
|
1361
|
-
"kind": "field",
|
|
1362
|
-
"name": "variant",
|
|
1363
|
-
"type": {
|
|
1364
|
-
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
1365
|
-
},
|
|
1366
|
-
"default": "\"info\"",
|
|
1367
|
-
"description": "The style variant of the banner.",
|
|
1368
|
-
"attribute": "variant",
|
|
1369
|
-
"reflects": true
|
|
1370
|
-
}
|
|
1371
|
-
],
|
|
1372
|
-
"attributes": [
|
|
1373
|
-
{
|
|
1374
|
-
"name": "variant",
|
|
1375
|
-
"type": {
|
|
1376
|
-
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
1377
|
-
},
|
|
1378
|
-
"default": "\"info\"",
|
|
1379
|
-
"description": "The style variant of the banner.",
|
|
1380
|
-
"fieldName": "variant"
|
|
1381
|
-
}
|
|
1382
|
-
],
|
|
1383
|
-
"superclass": {
|
|
1384
|
-
"name": "LitElement",
|
|
1385
|
-
"package": "lit"
|
|
1386
|
-
},
|
|
1387
|
-
"localization": [],
|
|
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",
|
|
1391
|
-
"examples": [],
|
|
1392
|
-
"dependencies": [
|
|
1393
|
-
"icon"
|
|
1394
|
-
],
|
|
1395
|
-
"tagName": "nord-banner",
|
|
1504
|
+
"tagName": "nord-button-group",
|
|
1396
1505
|
"customElement": true
|
|
1397
1506
|
}
|
|
1398
1507
|
],
|
|
@@ -1401,16 +1510,16 @@
|
|
|
1401
1510
|
"kind": "js",
|
|
1402
1511
|
"name": "default",
|
|
1403
1512
|
"declaration": {
|
|
1404
|
-
"name": "
|
|
1405
|
-
"module": "src/
|
|
1513
|
+
"name": "ButtonGroup",
|
|
1514
|
+
"module": "src/button-group/ButtonGroup.ts"
|
|
1406
1515
|
}
|
|
1407
1516
|
},
|
|
1408
1517
|
{
|
|
1409
1518
|
"kind": "custom-element-definition",
|
|
1410
|
-
"name": "nord-
|
|
1519
|
+
"name": "nord-button-group",
|
|
1411
1520
|
"declaration": {
|
|
1412
|
-
"name": "
|
|
1413
|
-
"module": "src/
|
|
1521
|
+
"name": "ButtonGroup",
|
|
1522
|
+
"module": "src/button-group/ButtonGroup.ts"
|
|
1414
1523
|
}
|
|
1415
1524
|
}
|
|
1416
1525
|
]
|
|
@@ -2762,109 +2871,6 @@
|
|
|
2762
2871
|
}
|
|
2763
2872
|
]
|
|
2764
2873
|
},
|
|
2765
|
-
{
|
|
2766
|
-
"kind": "javascript-module",
|
|
2767
|
-
"path": "src/button-group/ButtonGroup.ts",
|
|
2768
|
-
"declarations": [
|
|
2769
|
-
{
|
|
2770
|
-
"kind": "class",
|
|
2771
|
-
"description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
|
|
2772
|
-
"name": "ButtonGroup",
|
|
2773
|
-
"cssProperties": [
|
|
2774
|
-
{
|
|
2775
|
-
"description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
|
|
2776
|
-
"name": "--n-button-group-border-radius",
|
|
2777
|
-
"default": "var(--n-border-radius-s)"
|
|
2778
|
-
},
|
|
2779
|
-
{
|
|
2780
|
-
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
2781
|
-
"name": "--n-button-group-box-shadow",
|
|
2782
|
-
"default": "var(--n-box-shadow)"
|
|
2783
|
-
}
|
|
2784
|
-
],
|
|
2785
|
-
"slots": [
|
|
2786
|
-
{
|
|
2787
|
-
"description": "The button group content",
|
|
2788
|
-
"name": ""
|
|
2789
|
-
}
|
|
2790
|
-
],
|
|
2791
|
-
"members": [
|
|
2792
|
-
{
|
|
2793
|
-
"kind": "field",
|
|
2794
|
-
"name": "direction",
|
|
2795
|
-
"type": {
|
|
2796
|
-
"text": "\"vertical\" | \"horizontal\""
|
|
2797
|
-
},
|
|
2798
|
-
"default": "\"horizontal\"",
|
|
2799
|
-
"description": "The direction of the button group.",
|
|
2800
|
-
"attribute": "direction",
|
|
2801
|
-
"reflects": true
|
|
2802
|
-
},
|
|
2803
|
-
{
|
|
2804
|
-
"kind": "field",
|
|
2805
|
-
"name": "role",
|
|
2806
|
-
"type": {
|
|
2807
|
-
"text": "string"
|
|
2808
|
-
},
|
|
2809
|
-
"default": "\"group\"",
|
|
2810
|
-
"description": "The appropriate role for the containing element.",
|
|
2811
|
-
"attribute": "role",
|
|
2812
|
-
"reflects": true
|
|
2813
|
-
}
|
|
2814
|
-
],
|
|
2815
|
-
"attributes": [
|
|
2816
|
-
{
|
|
2817
|
-
"name": "direction",
|
|
2818
|
-
"type": {
|
|
2819
|
-
"text": "\"vertical\" | \"horizontal\""
|
|
2820
|
-
},
|
|
2821
|
-
"default": "\"horizontal\"",
|
|
2822
|
-
"description": "The direction of the button group.",
|
|
2823
|
-
"fieldName": "direction"
|
|
2824
|
-
},
|
|
2825
|
-
{
|
|
2826
|
-
"name": "role",
|
|
2827
|
-
"type": {
|
|
2828
|
-
"text": "string"
|
|
2829
|
-
},
|
|
2830
|
-
"default": "\"group\"",
|
|
2831
|
-
"description": "The appropriate role for the containing element.",
|
|
2832
|
-
"fieldName": "role"
|
|
2833
|
-
}
|
|
2834
|
-
],
|
|
2835
|
-
"superclass": {
|
|
2836
|
-
"name": "LitElement",
|
|
2837
|
-
"package": "lit"
|
|
2838
|
-
},
|
|
2839
|
-
"localization": [],
|
|
2840
|
-
"status": "new",
|
|
2841
|
-
"category": "structure",
|
|
2842
|
-
"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",
|
|
2843
|
-
"examples": [],
|
|
2844
|
-
"dependencies": [],
|
|
2845
|
-
"tagName": "nord-button-group",
|
|
2846
|
-
"customElement": true
|
|
2847
|
-
}
|
|
2848
|
-
],
|
|
2849
|
-
"exports": [
|
|
2850
|
-
{
|
|
2851
|
-
"kind": "js",
|
|
2852
|
-
"name": "default",
|
|
2853
|
-
"declaration": {
|
|
2854
|
-
"name": "ButtonGroup",
|
|
2855
|
-
"module": "src/button-group/ButtonGroup.ts"
|
|
2856
|
-
}
|
|
2857
|
-
},
|
|
2858
|
-
{
|
|
2859
|
-
"kind": "custom-element-definition",
|
|
2860
|
-
"name": "nord-button-group",
|
|
2861
|
-
"declaration": {
|
|
2862
|
-
"name": "ButtonGroup",
|
|
2863
|
-
"module": "src/button-group/ButtonGroup.ts"
|
|
2864
|
-
}
|
|
2865
|
-
}
|
|
2866
|
-
]
|
|
2867
|
-
},
|
|
2868
2874
|
{
|
|
2869
2875
|
"kind": "javascript-module",
|
|
2870
2876
|
"path": "src/command-menu/CommandMenu.ts",
|
package/lib/ButtonGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,_ as
|
|
1
|
+
import{i as r,_ as t,s as o,x as n,e as i}from"./query-assigned-elements-2f8275b7.js";import{e}from"./property-03f59dce.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as a}from"./Component-253ecb24.js";const s=r`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;max-inline-size:max-content;border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([direction=horizontal]) ::slotted(*){margin-inline-end:-1px}::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-masked)}::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}::slotted(*){border-radius:var(--n-button-border-radius)}.n-ltr ::slotted(:first-child),.n-rtl ::slotted(:last-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}.n-ltr ::slotted(:last-child),.n-rtl ::slotted(:first-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{flex-direction:column}:host([direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([direction=vertical]) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([direction=vertical]) ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}::slotted(nord-button[variant=primary]){position:relative}::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:"";position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let u=class extends o{constructor(){super(...arguments),this.dirController=new d(this),this.direction="horizontal",this.role="group"}render(){return n`<div class="n-button-group n-${this.dirController.dir}"><slot></slot></div>`}};u.styles=[a,s],t([e({reflect:!0})],u.prototype,"direction",void 0),t([e({reflect:!0})],u.prototype,"role",void 0),u=t([i("nord-button-group")],u);var l=u;export{l as default};
|
|
2
2
|
//# sourceMappingURL=ButtonGroup.js.map
|
package/lib/ButtonGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ButtonGroup.css\"\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status new\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n\n */\n@customElement(\"nord-button-group\")\nexport default class ButtonGroup extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The direction of the button group.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n /**\n * The appropriate role for the containing element.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) role: string = \"group\"\n\n render() {\n return html`\n <div class=\"n-button-group\">\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button-group\": ButtonGroup\n }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","direction","role","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ButtonGroup.css\"\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status new\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n\n */\n@customElement(\"nord-button-group\")\nexport default class ButtonGroup extends LitElement {\n static styles = [componentStyle, style]\n\n private dirController = new DirectionController(this)\n\n /**\n * The direction of the button group.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n /**\n * The appropriate role for the containing element.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) role: string = \"group\"\n\n render() {\n return html`\n <div class=\"n-button-group n-${this.dirController.dir}\">\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button-group\": ButtonGroup\n }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","dirController","DirectionController","direction","role","render","html","dir","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"mjFAmBe,IAAMA,EAAN,cAA0BC,EAA1BC,kCAGLC,KAAAC,cAAgB,IAAIC,EAAoBF,MAKnBA,KAASG,UAA8B,aAMvCH,KAAII,KAAW,OAS7C,CAPCC,SACE,OAAOC,CAAI,gCACsBN,KAAKC,cAAcM,0BAIrD,GArBMV,EAAAW,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DhB,EAAAiB,UAAA,iBAAA,GAMnDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BhB,EAAAiB,UAAA,YAAA,GAdhCjB,EAAWc,EAAA,CAD/BI,EAAc,sBACMlB,SAAAA"}
|