@nordhealth/components 3.22.0 → 4.0.0-alpha.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.
- package/custom-elements.json +622 -622
- package/lib/bundle.js +96 -2
- package/lib/bundle.js.map +1 -1
- package/package.json +5 -5
package/custom-elements.json
CHANGED
|
@@ -673,208 +673,6 @@
|
|
|
673
673
|
}
|
|
674
674
|
]
|
|
675
675
|
},
|
|
676
|
-
{
|
|
677
|
-
"kind": "javascript-module",
|
|
678
|
-
"path": "src/badge/Badge.ts",
|
|
679
|
-
"declarations": [
|
|
680
|
-
{
|
|
681
|
-
"kind": "class",
|
|
682
|
-
"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.",
|
|
683
|
-
"name": "Badge",
|
|
684
|
-
"slots": [
|
|
685
|
-
{
|
|
686
|
-
"description": "The badge content.",
|
|
687
|
-
"name": ""
|
|
688
|
-
},
|
|
689
|
-
{
|
|
690
|
-
"description": "Used to place an icon at the start of badge.",
|
|
691
|
-
"name": "icon"
|
|
692
|
-
}
|
|
693
|
-
],
|
|
694
|
-
"members": [
|
|
695
|
-
{
|
|
696
|
-
"kind": "field",
|
|
697
|
-
"name": "type",
|
|
698
|
-
"type": {
|
|
699
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
700
|
-
},
|
|
701
|
-
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
702
|
-
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
703
|
-
"default": "\"neutral\"",
|
|
704
|
-
"attribute": "type",
|
|
705
|
-
"reflects": true
|
|
706
|
-
},
|
|
707
|
-
{
|
|
708
|
-
"kind": "field",
|
|
709
|
-
"name": "variant",
|
|
710
|
-
"type": {
|
|
711
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
|
|
712
|
-
},
|
|
713
|
-
"description": "The style variant of the badge.\nDetermines the background color of the badge.",
|
|
714
|
-
"default": "\"neutral\"",
|
|
715
|
-
"attribute": "variant",
|
|
716
|
-
"reflects": true
|
|
717
|
-
},
|
|
718
|
-
{
|
|
719
|
-
"kind": "field",
|
|
720
|
-
"name": "strong",
|
|
721
|
-
"type": {
|
|
722
|
-
"text": "boolean"
|
|
723
|
-
},
|
|
724
|
-
"default": "false",
|
|
725
|
-
"description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
|
|
726
|
-
"attribute": "strong",
|
|
727
|
-
"reflects": true
|
|
728
|
-
}
|
|
729
|
-
],
|
|
730
|
-
"attributes": [
|
|
731
|
-
{
|
|
732
|
-
"name": "type",
|
|
733
|
-
"type": {
|
|
734
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
735
|
-
},
|
|
736
|
-
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
737
|
-
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
738
|
-
"default": "\"neutral\"",
|
|
739
|
-
"fieldName": "type"
|
|
740
|
-
},
|
|
741
|
-
{
|
|
742
|
-
"name": "variant",
|
|
743
|
-
"type": {
|
|
744
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
|
|
745
|
-
},
|
|
746
|
-
"description": "The style variant of the badge.\nDetermines the background color of the badge.",
|
|
747
|
-
"default": "\"neutral\"",
|
|
748
|
-
"fieldName": "variant"
|
|
749
|
-
},
|
|
750
|
-
{
|
|
751
|
-
"name": "strong",
|
|
752
|
-
"type": {
|
|
753
|
-
"text": "boolean"
|
|
754
|
-
},
|
|
755
|
-
"default": "false",
|
|
756
|
-
"description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
|
|
757
|
-
"fieldName": "strong"
|
|
758
|
-
}
|
|
759
|
-
],
|
|
760
|
-
"superclass": {
|
|
761
|
-
"name": "LitElement",
|
|
762
|
-
"package": "lit"
|
|
763
|
-
},
|
|
764
|
-
"localization": [],
|
|
765
|
-
"status": "ready",
|
|
766
|
-
"category": "text",
|
|
767
|
-
"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 easy 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- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\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",
|
|
768
|
-
"examples": [],
|
|
769
|
-
"dependencies": [],
|
|
770
|
-
"tagName": "nord-badge",
|
|
771
|
-
"customElement": true
|
|
772
|
-
}
|
|
773
|
-
],
|
|
774
|
-
"exports": [
|
|
775
|
-
{
|
|
776
|
-
"kind": "js",
|
|
777
|
-
"name": "default",
|
|
778
|
-
"declaration": {
|
|
779
|
-
"name": "Badge",
|
|
780
|
-
"module": "src/badge/Badge.ts"
|
|
781
|
-
}
|
|
782
|
-
},
|
|
783
|
-
{
|
|
784
|
-
"kind": "custom-element-definition",
|
|
785
|
-
"name": "nord-badge",
|
|
786
|
-
"declaration": {
|
|
787
|
-
"name": "Badge",
|
|
788
|
-
"module": "src/badge/Badge.ts"
|
|
789
|
-
}
|
|
790
|
-
}
|
|
791
|
-
]
|
|
792
|
-
},
|
|
793
|
-
{
|
|
794
|
-
"kind": "javascript-module",
|
|
795
|
-
"path": "src/banner/Banner.ts",
|
|
796
|
-
"declarations": [
|
|
797
|
-
{
|
|
798
|
-
"kind": "class",
|
|
799
|
-
"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.",
|
|
800
|
-
"name": "Banner",
|
|
801
|
-
"cssProperties": [
|
|
802
|
-
{
|
|
803
|
-
"description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
|
|
804
|
-
"name": "--n-banner-border-radius",
|
|
805
|
-
"default": "var(--n-border-radius)"
|
|
806
|
-
},
|
|
807
|
-
{
|
|
808
|
-
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
809
|
-
"name": "--n-banner-box-shadow",
|
|
810
|
-
"default": "var(--n-box-shadow-card)"
|
|
811
|
-
}
|
|
812
|
-
],
|
|
813
|
-
"slots": [
|
|
814
|
-
{
|
|
815
|
-
"description": "default slot",
|
|
816
|
-
"name": ""
|
|
817
|
-
}
|
|
818
|
-
],
|
|
819
|
-
"members": [
|
|
820
|
-
{
|
|
821
|
-
"kind": "field",
|
|
822
|
-
"name": "variant",
|
|
823
|
-
"type": {
|
|
824
|
-
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
825
|
-
},
|
|
826
|
-
"default": "\"info\"",
|
|
827
|
-
"description": "The style variant of the banner.",
|
|
828
|
-
"attribute": "variant",
|
|
829
|
-
"reflects": true
|
|
830
|
-
}
|
|
831
|
-
],
|
|
832
|
-
"attributes": [
|
|
833
|
-
{
|
|
834
|
-
"name": "variant",
|
|
835
|
-
"type": {
|
|
836
|
-
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
837
|
-
},
|
|
838
|
-
"default": "\"info\"",
|
|
839
|
-
"description": "The style variant of the banner.",
|
|
840
|
-
"fieldName": "variant"
|
|
841
|
-
}
|
|
842
|
-
],
|
|
843
|
-
"superclass": {
|
|
844
|
-
"name": "LitElement",
|
|
845
|
-
"package": "lit"
|
|
846
|
-
},
|
|
847
|
-
"localization": [],
|
|
848
|
-
"status": "ready",
|
|
849
|
-
"category": "feedback",
|
|
850
|
-
"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",
|
|
851
|
-
"examples": [],
|
|
852
|
-
"dependencies": [
|
|
853
|
-
"icon"
|
|
854
|
-
],
|
|
855
|
-
"tagName": "nord-banner",
|
|
856
|
-
"customElement": true
|
|
857
|
-
}
|
|
858
|
-
],
|
|
859
|
-
"exports": [
|
|
860
|
-
{
|
|
861
|
-
"kind": "js",
|
|
862
|
-
"name": "default",
|
|
863
|
-
"declaration": {
|
|
864
|
-
"name": "Banner",
|
|
865
|
-
"module": "src/banner/Banner.ts"
|
|
866
|
-
}
|
|
867
|
-
},
|
|
868
|
-
{
|
|
869
|
-
"kind": "custom-element-definition",
|
|
870
|
-
"name": "nord-banner",
|
|
871
|
-
"declaration": {
|
|
872
|
-
"name": "Banner",
|
|
873
|
-
"module": "src/banner/Banner.ts"
|
|
874
|
-
}
|
|
875
|
-
}
|
|
876
|
-
]
|
|
877
|
-
},
|
|
878
676
|
{
|
|
879
677
|
"kind": "javascript-module",
|
|
880
678
|
"path": "src/button/Button.ts",
|
|
@@ -1488,124 +1286,52 @@
|
|
|
1488
1286
|
},
|
|
1489
1287
|
{
|
|
1490
1288
|
"kind": "javascript-module",
|
|
1491
|
-
"path": "src/
|
|
1289
|
+
"path": "src/banner/Banner.ts",
|
|
1492
1290
|
"declarations": [
|
|
1493
1291
|
{
|
|
1494
1292
|
"kind": "class",
|
|
1495
|
-
"description": "
|
|
1496
|
-
"name": "
|
|
1293
|
+
"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.",
|
|
1294
|
+
"name": "Banner",
|
|
1497
1295
|
"cssProperties": [
|
|
1498
1296
|
{
|
|
1499
|
-
"description": "Controls
|
|
1500
|
-
"name": "--n-
|
|
1501
|
-
"default": "var(--n-border-radius
|
|
1297
|
+
"description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
|
|
1298
|
+
"name": "--n-banner-border-radius",
|
|
1299
|
+
"default": "var(--n-border-radius)"
|
|
1502
1300
|
},
|
|
1503
1301
|
{
|
|
1504
|
-
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).
|
|
1505
|
-
"name": "--n-
|
|
1506
|
-
"default": "var(--n-box-shadow)"
|
|
1302
|
+
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
1303
|
+
"name": "--n-banner-box-shadow",
|
|
1304
|
+
"default": "var(--n-box-shadow-card)"
|
|
1507
1305
|
}
|
|
1508
1306
|
],
|
|
1509
1307
|
"slots": [
|
|
1510
1308
|
{
|
|
1511
|
-
"description": "
|
|
1309
|
+
"description": "default slot",
|
|
1512
1310
|
"name": ""
|
|
1513
1311
|
}
|
|
1514
1312
|
],
|
|
1515
1313
|
"members": [
|
|
1516
|
-
{
|
|
1517
|
-
"kind": "field",
|
|
1518
|
-
"name": "defaultSlot",
|
|
1519
|
-
"privacy": "private",
|
|
1520
|
-
"default": "new SlotController(this)"
|
|
1521
|
-
},
|
|
1522
|
-
{
|
|
1523
|
-
"kind": "field",
|
|
1524
|
-
"name": "dirController",
|
|
1525
|
-
"privacy": "private",
|
|
1526
|
-
"default": "new DirectionController(this)"
|
|
1527
|
-
},
|
|
1528
1314
|
{
|
|
1529
1315
|
"kind": "field",
|
|
1530
1316
|
"name": "variant",
|
|
1531
1317
|
"type": {
|
|
1532
|
-
"text": "\"
|
|
1318
|
+
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
1533
1319
|
},
|
|
1534
|
-
"default": "\"
|
|
1535
|
-
"description": "The style variant of the
|
|
1320
|
+
"default": "\"info\"",
|
|
1321
|
+
"description": "The style variant of the banner.",
|
|
1536
1322
|
"attribute": "variant",
|
|
1537
1323
|
"reflects": true
|
|
1538
|
-
}
|
|
1324
|
+
}
|
|
1325
|
+
],
|
|
1326
|
+
"attributes": [
|
|
1539
1327
|
{
|
|
1540
|
-
"
|
|
1541
|
-
"name": "direction",
|
|
1328
|
+
"name": "variant",
|
|
1542
1329
|
"type": {
|
|
1543
|
-
"text": "\"
|
|
1330
|
+
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
1544
1331
|
},
|
|
1545
|
-
"default": "\"
|
|
1546
|
-
"description": "The
|
|
1547
|
-
"attribute": "direction",
|
|
1548
|
-
"reflects": true
|
|
1549
|
-
},
|
|
1550
|
-
{
|
|
1551
|
-
"kind": "field",
|
|
1552
|
-
"name": "wrap",
|
|
1553
|
-
"type": {
|
|
1554
|
-
"text": "boolean"
|
|
1555
|
-
},
|
|
1556
|
-
"default": "false",
|
|
1557
|
-
"description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
|
|
1558
|
-
"attribute": "wrap",
|
|
1559
|
-
"reflects": true
|
|
1560
|
-
},
|
|
1561
|
-
{
|
|
1562
|
-
"kind": "field",
|
|
1563
|
-
"name": "role",
|
|
1564
|
-
"type": {
|
|
1565
|
-
"text": "string"
|
|
1566
|
-
},
|
|
1567
|
-
"default": "\"group\"",
|
|
1568
|
-
"description": "The appropriate role for the containing element.",
|
|
1569
|
-
"attribute": "role",
|
|
1570
|
-
"reflects": true
|
|
1571
|
-
}
|
|
1572
|
-
],
|
|
1573
|
-
"attributes": [
|
|
1574
|
-
{
|
|
1575
|
-
"name": "variant",
|
|
1576
|
-
"type": {
|
|
1577
|
-
"text": "\"default\" | \"spaced\""
|
|
1578
|
-
},
|
|
1579
|
-
"default": "\"default\"",
|
|
1580
|
-
"description": "The style variant of the button group.",
|
|
1332
|
+
"default": "\"info\"",
|
|
1333
|
+
"description": "The style variant of the banner.",
|
|
1581
1334
|
"fieldName": "variant"
|
|
1582
|
-
},
|
|
1583
|
-
{
|
|
1584
|
-
"name": "direction",
|
|
1585
|
-
"type": {
|
|
1586
|
-
"text": "\"vertical\" | \"horizontal\""
|
|
1587
|
-
},
|
|
1588
|
-
"default": "\"horizontal\"",
|
|
1589
|
-
"description": "The direction of the button group.",
|
|
1590
|
-
"fieldName": "direction"
|
|
1591
|
-
},
|
|
1592
|
-
{
|
|
1593
|
-
"name": "wrap",
|
|
1594
|
-
"type": {
|
|
1595
|
-
"text": "boolean"
|
|
1596
|
-
},
|
|
1597
|
-
"default": "false",
|
|
1598
|
-
"description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
|
|
1599
|
-
"fieldName": "wrap"
|
|
1600
|
-
},
|
|
1601
|
-
{
|
|
1602
|
-
"name": "role",
|
|
1603
|
-
"type": {
|
|
1604
|
-
"text": "string"
|
|
1605
|
-
},
|
|
1606
|
-
"default": "\"group\"",
|
|
1607
|
-
"description": "The appropriate role for the containing element.",
|
|
1608
|
-
"fieldName": "role"
|
|
1609
1335
|
}
|
|
1610
1336
|
],
|
|
1611
1337
|
"superclass": {
|
|
@@ -1614,11 +1340,13 @@
|
|
|
1614
1340
|
},
|
|
1615
1341
|
"localization": [],
|
|
1616
1342
|
"status": "ready",
|
|
1617
|
-
"category": "
|
|
1618
|
-
"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
|
|
1343
|
+
"category": "feedback",
|
|
1344
|
+
"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",
|
|
1619
1345
|
"examples": [],
|
|
1620
|
-
"dependencies": [
|
|
1621
|
-
|
|
1346
|
+
"dependencies": [
|
|
1347
|
+
"icon"
|
|
1348
|
+
],
|
|
1349
|
+
"tagName": "nord-banner",
|
|
1622
1350
|
"customElement": true
|
|
1623
1351
|
}
|
|
1624
1352
|
],
|
|
@@ -1627,16 +1355,16 @@
|
|
|
1627
1355
|
"kind": "js",
|
|
1628
1356
|
"name": "default",
|
|
1629
1357
|
"declaration": {
|
|
1630
|
-
"name": "
|
|
1631
|
-
"module": "src/
|
|
1358
|
+
"name": "Banner",
|
|
1359
|
+
"module": "src/banner/Banner.ts"
|
|
1632
1360
|
}
|
|
1633
1361
|
},
|
|
1634
1362
|
{
|
|
1635
1363
|
"kind": "custom-element-definition",
|
|
1636
|
-
"name": "nord-
|
|
1364
|
+
"name": "nord-banner",
|
|
1637
1365
|
"declaration": {
|
|
1638
|
-
"name": "
|
|
1639
|
-
"module": "src/
|
|
1366
|
+
"name": "Banner",
|
|
1367
|
+
"module": "src/banner/Banner.ts"
|
|
1640
1368
|
}
|
|
1641
1369
|
}
|
|
1642
1370
|
]
|
|
@@ -2143,6 +1871,129 @@
|
|
|
2143
1871
|
}
|
|
2144
1872
|
]
|
|
2145
1873
|
},
|
|
1874
|
+
{
|
|
1875
|
+
"kind": "javascript-module",
|
|
1876
|
+
"path": "src/card/Card.ts",
|
|
1877
|
+
"declarations": [
|
|
1878
|
+
{
|
|
1879
|
+
"kind": "class",
|
|
1880
|
+
"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.",
|
|
1881
|
+
"name": "Card",
|
|
1882
|
+
"cssProperties": [
|
|
1883
|
+
{
|
|
1884
|
+
"description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
|
|
1885
|
+
"name": "--n-card-border-radius",
|
|
1886
|
+
"default": "var(--n-border-radius)"
|
|
1887
|
+
},
|
|
1888
|
+
{
|
|
1889
|
+
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
1890
|
+
"name": "--n-card-box-shadow",
|
|
1891
|
+
"default": "var(--n-box-shadow-popout)"
|
|
1892
|
+
},
|
|
1893
|
+
{
|
|
1894
|
+
"description": "Controls the padding on all sides of the card.",
|
|
1895
|
+
"name": "--n-card-padding",
|
|
1896
|
+
"default": "var(--n-space-m)"
|
|
1897
|
+
},
|
|
1898
|
+
{
|
|
1899
|
+
"description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
|
|
1900
|
+
"name": "--n-card-slot-padding",
|
|
1901
|
+
"default": "var(--n-space-m)"
|
|
1902
|
+
}
|
|
1903
|
+
],
|
|
1904
|
+
"slots": [
|
|
1905
|
+
{
|
|
1906
|
+
"description": "The card content.",
|
|
1907
|
+
"name": ""
|
|
1908
|
+
},
|
|
1909
|
+
{
|
|
1910
|
+
"description": "Optional slot that holds a header for the card.",
|
|
1911
|
+
"name": "header"
|
|
1912
|
+
},
|
|
1913
|
+
{
|
|
1914
|
+
"description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
|
|
1915
|
+
"name": "header-end"
|
|
1916
|
+
},
|
|
1917
|
+
{
|
|
1918
|
+
"description": "Optional slot that holds footer content for the card.",
|
|
1919
|
+
"name": "footer"
|
|
1920
|
+
}
|
|
1921
|
+
],
|
|
1922
|
+
"members": [
|
|
1923
|
+
{
|
|
1924
|
+
"kind": "field",
|
|
1925
|
+
"name": "headerSlot",
|
|
1926
|
+
"privacy": "private",
|
|
1927
|
+
"default": "new SlotController(this, \"header\")"
|
|
1928
|
+
},
|
|
1929
|
+
{
|
|
1930
|
+
"kind": "field",
|
|
1931
|
+
"name": "headerEndSlot",
|
|
1932
|
+
"privacy": "private",
|
|
1933
|
+
"default": "new SlotController(this, \"header-end\")"
|
|
1934
|
+
},
|
|
1935
|
+
{
|
|
1936
|
+
"kind": "field",
|
|
1937
|
+
"name": "footerSlot",
|
|
1938
|
+
"privacy": "private",
|
|
1939
|
+
"default": "new SlotController(this, \"footer\")"
|
|
1940
|
+
},
|
|
1941
|
+
{
|
|
1942
|
+
"kind": "field",
|
|
1943
|
+
"name": "padding",
|
|
1944
|
+
"type": {
|
|
1945
|
+
"text": "\"m\" | \"l\" | \"none\""
|
|
1946
|
+
},
|
|
1947
|
+
"default": "\"m\"",
|
|
1948
|
+
"description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
|
|
1949
|
+
"attribute": "padding",
|
|
1950
|
+
"reflects": true
|
|
1951
|
+
}
|
|
1952
|
+
],
|
|
1953
|
+
"attributes": [
|
|
1954
|
+
{
|
|
1955
|
+
"name": "padding",
|
|
1956
|
+
"type": {
|
|
1957
|
+
"text": "\"m\" | \"l\" | \"none\""
|
|
1958
|
+
},
|
|
1959
|
+
"default": "\"m\"",
|
|
1960
|
+
"description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
|
|
1961
|
+
"fieldName": "padding"
|
|
1962
|
+
}
|
|
1963
|
+
],
|
|
1964
|
+
"superclass": {
|
|
1965
|
+
"name": "LitElement",
|
|
1966
|
+
"package": "lit"
|
|
1967
|
+
},
|
|
1968
|
+
"localization": [],
|
|
1969
|
+
"status": "ready",
|
|
1970
|
+
"category": "structure",
|
|
1971
|
+
"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",
|
|
1972
|
+
"examples": [],
|
|
1973
|
+
"dependencies": [],
|
|
1974
|
+
"tagName": "nord-card",
|
|
1975
|
+
"customElement": true
|
|
1976
|
+
}
|
|
1977
|
+
],
|
|
1978
|
+
"exports": [
|
|
1979
|
+
{
|
|
1980
|
+
"kind": "js",
|
|
1981
|
+
"name": "default",
|
|
1982
|
+
"declaration": {
|
|
1983
|
+
"name": "Card",
|
|
1984
|
+
"module": "src/card/Card.ts"
|
|
1985
|
+
}
|
|
1986
|
+
},
|
|
1987
|
+
{
|
|
1988
|
+
"kind": "custom-element-definition",
|
|
1989
|
+
"name": "nord-card",
|
|
1990
|
+
"declaration": {
|
|
1991
|
+
"name": "Card",
|
|
1992
|
+
"module": "src/card/Card.ts"
|
|
1993
|
+
}
|
|
1994
|
+
}
|
|
1995
|
+
]
|
|
1996
|
+
},
|
|
2146
1997
|
{
|
|
2147
1998
|
"kind": "javascript-module",
|
|
2148
1999
|
"path": "src/checkbox/Checkbox.ts",
|
|
@@ -2883,92 +2734,241 @@
|
|
|
2883
2734
|
},
|
|
2884
2735
|
{
|
|
2885
2736
|
"kind": "javascript-module",
|
|
2886
|
-
"path": "src/
|
|
2737
|
+
"path": "src/badge/Badge.ts",
|
|
2887
2738
|
"declarations": [
|
|
2888
2739
|
{
|
|
2889
2740
|
"kind": "class",
|
|
2890
|
-
"description": "
|
|
2891
|
-
"name": "
|
|
2892
|
-
"cssProperties": [
|
|
2893
|
-
{
|
|
2894
|
-
"description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
|
|
2895
|
-
"name": "--n-card-border-radius",
|
|
2896
|
-
"default": "var(--n-border-radius)"
|
|
2897
|
-
},
|
|
2898
|
-
{
|
|
2899
|
-
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
2900
|
-
"name": "--n-card-box-shadow",
|
|
2901
|
-
"default": "var(--n-box-shadow-popout)"
|
|
2902
|
-
},
|
|
2903
|
-
{
|
|
2904
|
-
"description": "Controls the padding on all sides of the card.",
|
|
2905
|
-
"name": "--n-card-padding",
|
|
2906
|
-
"default": "var(--n-space-m)"
|
|
2907
|
-
},
|
|
2908
|
-
{
|
|
2909
|
-
"description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
|
|
2910
|
-
"name": "--n-card-slot-padding",
|
|
2911
|
-
"default": "var(--n-space-m)"
|
|
2912
|
-
}
|
|
2913
|
-
],
|
|
2741
|
+
"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.",
|
|
2742
|
+
"name": "Badge",
|
|
2914
2743
|
"slots": [
|
|
2915
2744
|
{
|
|
2916
|
-
"description": "The
|
|
2745
|
+
"description": "The badge content.",
|
|
2917
2746
|
"name": ""
|
|
2918
2747
|
},
|
|
2919
2748
|
{
|
|
2920
|
-
"description": "
|
|
2921
|
-
"name": "
|
|
2922
|
-
},
|
|
2923
|
-
{
|
|
2924
|
-
"description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
|
|
2925
|
-
"name": "header-end"
|
|
2926
|
-
},
|
|
2927
|
-
{
|
|
2928
|
-
"description": "Optional slot that holds footer content for the card.",
|
|
2929
|
-
"name": "footer"
|
|
2749
|
+
"description": "Used to place an icon at the start of badge.",
|
|
2750
|
+
"name": "icon"
|
|
2930
2751
|
}
|
|
2931
2752
|
],
|
|
2932
2753
|
"members": [
|
|
2933
2754
|
{
|
|
2934
2755
|
"kind": "field",
|
|
2935
|
-
"name": "
|
|
2936
|
-
"
|
|
2937
|
-
|
|
2756
|
+
"name": "type",
|
|
2757
|
+
"type": {
|
|
2758
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
2759
|
+
},
|
|
2760
|
+
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
2761
|
+
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
2762
|
+
"default": "\"neutral\"",
|
|
2763
|
+
"attribute": "type",
|
|
2764
|
+
"reflects": true
|
|
2938
2765
|
},
|
|
2939
2766
|
{
|
|
2940
2767
|
"kind": "field",
|
|
2941
|
-
"name": "
|
|
2768
|
+
"name": "variant",
|
|
2769
|
+
"type": {
|
|
2770
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
|
|
2771
|
+
},
|
|
2772
|
+
"description": "The style variant of the badge.\nDetermines the background color of the badge.",
|
|
2773
|
+
"default": "\"neutral\"",
|
|
2774
|
+
"attribute": "variant",
|
|
2775
|
+
"reflects": true
|
|
2776
|
+
},
|
|
2777
|
+
{
|
|
2778
|
+
"kind": "field",
|
|
2779
|
+
"name": "strong",
|
|
2780
|
+
"type": {
|
|
2781
|
+
"text": "boolean"
|
|
2782
|
+
},
|
|
2783
|
+
"default": "false",
|
|
2784
|
+
"description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
|
|
2785
|
+
"attribute": "strong",
|
|
2786
|
+
"reflects": true
|
|
2787
|
+
}
|
|
2788
|
+
],
|
|
2789
|
+
"attributes": [
|
|
2790
|
+
{
|
|
2791
|
+
"name": "type",
|
|
2792
|
+
"type": {
|
|
2793
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
2794
|
+
},
|
|
2795
|
+
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
2796
|
+
"deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.",
|
|
2797
|
+
"default": "\"neutral\"",
|
|
2798
|
+
"fieldName": "type"
|
|
2799
|
+
},
|
|
2800
|
+
{
|
|
2801
|
+
"name": "variant",
|
|
2802
|
+
"type": {
|
|
2803
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\" | undefined"
|
|
2804
|
+
},
|
|
2805
|
+
"description": "The style variant of the badge.\nDetermines the background color of the badge.",
|
|
2806
|
+
"default": "\"neutral\"",
|
|
2807
|
+
"fieldName": "variant"
|
|
2808
|
+
},
|
|
2809
|
+
{
|
|
2810
|
+
"name": "strong",
|
|
2811
|
+
"type": {
|
|
2812
|
+
"text": "boolean"
|
|
2813
|
+
},
|
|
2814
|
+
"default": "false",
|
|
2815
|
+
"description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.",
|
|
2816
|
+
"fieldName": "strong"
|
|
2817
|
+
}
|
|
2818
|
+
],
|
|
2819
|
+
"superclass": {
|
|
2820
|
+
"name": "LitElement",
|
|
2821
|
+
"package": "lit"
|
|
2822
|
+
},
|
|
2823
|
+
"localization": [],
|
|
2824
|
+
"status": "ready",
|
|
2825
|
+
"category": "text",
|
|
2826
|
+
"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 easy 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- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\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",
|
|
2827
|
+
"examples": [],
|
|
2828
|
+
"dependencies": [],
|
|
2829
|
+
"tagName": "nord-badge",
|
|
2830
|
+
"customElement": true
|
|
2831
|
+
}
|
|
2832
|
+
],
|
|
2833
|
+
"exports": [
|
|
2834
|
+
{
|
|
2835
|
+
"kind": "js",
|
|
2836
|
+
"name": "default",
|
|
2837
|
+
"declaration": {
|
|
2838
|
+
"name": "Badge",
|
|
2839
|
+
"module": "src/badge/Badge.ts"
|
|
2840
|
+
}
|
|
2841
|
+
},
|
|
2842
|
+
{
|
|
2843
|
+
"kind": "custom-element-definition",
|
|
2844
|
+
"name": "nord-badge",
|
|
2845
|
+
"declaration": {
|
|
2846
|
+
"name": "Badge",
|
|
2847
|
+
"module": "src/badge/Badge.ts"
|
|
2848
|
+
}
|
|
2849
|
+
}
|
|
2850
|
+
]
|
|
2851
|
+
},
|
|
2852
|
+
{
|
|
2853
|
+
"kind": "javascript-module",
|
|
2854
|
+
"path": "src/button-group/ButtonGroup.ts",
|
|
2855
|
+
"declarations": [
|
|
2856
|
+
{
|
|
2857
|
+
"kind": "class",
|
|
2858
|
+
"description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
|
|
2859
|
+
"name": "ButtonGroup",
|
|
2860
|
+
"cssProperties": [
|
|
2861
|
+
{
|
|
2862
|
+
"description": "Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.",
|
|
2863
|
+
"name": "--n-button-group-border-radius",
|
|
2864
|
+
"default": "var(--n-border-radius-s)"
|
|
2865
|
+
},
|
|
2866
|
+
{
|
|
2867
|
+
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.",
|
|
2868
|
+
"name": "--n-button-group-box-shadow",
|
|
2869
|
+
"default": "var(--n-box-shadow)"
|
|
2870
|
+
}
|
|
2871
|
+
],
|
|
2872
|
+
"slots": [
|
|
2873
|
+
{
|
|
2874
|
+
"description": "The button group content",
|
|
2875
|
+
"name": ""
|
|
2876
|
+
}
|
|
2877
|
+
],
|
|
2878
|
+
"members": [
|
|
2879
|
+
{
|
|
2880
|
+
"kind": "field",
|
|
2881
|
+
"name": "defaultSlot",
|
|
2942
2882
|
"privacy": "private",
|
|
2943
|
-
"default": "new SlotController(this
|
|
2883
|
+
"default": "new SlotController(this)"
|
|
2944
2884
|
},
|
|
2945
2885
|
{
|
|
2946
2886
|
"kind": "field",
|
|
2947
|
-
"name": "
|
|
2887
|
+
"name": "dirController",
|
|
2948
2888
|
"privacy": "private",
|
|
2949
|
-
"default": "new
|
|
2889
|
+
"default": "new DirectionController(this)"
|
|
2950
2890
|
},
|
|
2951
2891
|
{
|
|
2952
2892
|
"kind": "field",
|
|
2953
|
-
"name": "
|
|
2893
|
+
"name": "variant",
|
|
2954
2894
|
"type": {
|
|
2955
|
-
"text": "\"
|
|
2895
|
+
"text": "\"default\" | \"spaced\""
|
|
2956
2896
|
},
|
|
2957
|
-
"default": "\"
|
|
2958
|
-
"description": "
|
|
2959
|
-
"attribute": "
|
|
2897
|
+
"default": "\"default\"",
|
|
2898
|
+
"description": "The style variant of the button group.",
|
|
2899
|
+
"attribute": "variant",
|
|
2900
|
+
"reflects": true
|
|
2901
|
+
},
|
|
2902
|
+
{
|
|
2903
|
+
"kind": "field",
|
|
2904
|
+
"name": "direction",
|
|
2905
|
+
"type": {
|
|
2906
|
+
"text": "\"vertical\" | \"horizontal\""
|
|
2907
|
+
},
|
|
2908
|
+
"default": "\"horizontal\"",
|
|
2909
|
+
"description": "The direction of the button group.",
|
|
2910
|
+
"attribute": "direction",
|
|
2911
|
+
"reflects": true
|
|
2912
|
+
},
|
|
2913
|
+
{
|
|
2914
|
+
"kind": "field",
|
|
2915
|
+
"name": "wrap",
|
|
2916
|
+
"type": {
|
|
2917
|
+
"text": "boolean"
|
|
2918
|
+
},
|
|
2919
|
+
"default": "false",
|
|
2920
|
+
"description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
|
|
2921
|
+
"attribute": "wrap",
|
|
2922
|
+
"reflects": true
|
|
2923
|
+
},
|
|
2924
|
+
{
|
|
2925
|
+
"kind": "field",
|
|
2926
|
+
"name": "role",
|
|
2927
|
+
"type": {
|
|
2928
|
+
"text": "string"
|
|
2929
|
+
},
|
|
2930
|
+
"default": "\"group\"",
|
|
2931
|
+
"description": "The appropriate role for the containing element.",
|
|
2932
|
+
"attribute": "role",
|
|
2960
2933
|
"reflects": true
|
|
2961
2934
|
}
|
|
2962
2935
|
],
|
|
2963
2936
|
"attributes": [
|
|
2964
2937
|
{
|
|
2965
|
-
"name": "
|
|
2938
|
+
"name": "variant",
|
|
2966
2939
|
"type": {
|
|
2967
|
-
"text": "\"
|
|
2940
|
+
"text": "\"default\" | \"spaced\""
|
|
2968
2941
|
},
|
|
2969
|
-
"default": "\"
|
|
2970
|
-
"description": "
|
|
2971
|
-
"fieldName": "
|
|
2942
|
+
"default": "\"default\"",
|
|
2943
|
+
"description": "The style variant of the button group.",
|
|
2944
|
+
"fieldName": "variant"
|
|
2945
|
+
},
|
|
2946
|
+
{
|
|
2947
|
+
"name": "direction",
|
|
2948
|
+
"type": {
|
|
2949
|
+
"text": "\"vertical\" | \"horizontal\""
|
|
2950
|
+
},
|
|
2951
|
+
"default": "\"horizontal\"",
|
|
2952
|
+
"description": "The direction of the button group.",
|
|
2953
|
+
"fieldName": "direction"
|
|
2954
|
+
},
|
|
2955
|
+
{
|
|
2956
|
+
"name": "wrap",
|
|
2957
|
+
"type": {
|
|
2958
|
+
"text": "boolean"
|
|
2959
|
+
},
|
|
2960
|
+
"default": "false",
|
|
2961
|
+
"description": "Defines whether the buttons are forced in a single line\nor can be flowed into multiple lines (only applied when variant is set to `spaced`).",
|
|
2962
|
+
"fieldName": "wrap"
|
|
2963
|
+
},
|
|
2964
|
+
{
|
|
2965
|
+
"name": "role",
|
|
2966
|
+
"type": {
|
|
2967
|
+
"text": "string"
|
|
2968
|
+
},
|
|
2969
|
+
"default": "\"group\"",
|
|
2970
|
+
"description": "The appropriate role for the containing element.",
|
|
2971
|
+
"fieldName": "role"
|
|
2972
2972
|
}
|
|
2973
2973
|
],
|
|
2974
2974
|
"superclass": {
|
|
@@ -2978,10 +2978,10 @@
|
|
|
2978
2978
|
"localization": [],
|
|
2979
2979
|
"status": "ready",
|
|
2980
2980
|
"category": "structure",
|
|
2981
|
-
"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
|
|
2981
|
+
"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\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| `default` | The default variant renders a group of segmented buttons to emphasize that they’re thematically-related. |\n| `spaced` | The spaced variant renders a gap between the buttons to space them out evenly. |\n",
|
|
2982
2982
|
"examples": [],
|
|
2983
2983
|
"dependencies": [],
|
|
2984
|
-
"tagName": "nord-
|
|
2984
|
+
"tagName": "nord-button-group",
|
|
2985
2985
|
"customElement": true
|
|
2986
2986
|
}
|
|
2987
2987
|
],
|
|
@@ -2990,16 +2990,16 @@
|
|
|
2990
2990
|
"kind": "js",
|
|
2991
2991
|
"name": "default",
|
|
2992
2992
|
"declaration": {
|
|
2993
|
-
"name": "
|
|
2994
|
-
"module": "src/
|
|
2993
|
+
"name": "ButtonGroup",
|
|
2994
|
+
"module": "src/button-group/ButtonGroup.ts"
|
|
2995
2995
|
}
|
|
2996
2996
|
},
|
|
2997
2997
|
{
|
|
2998
2998
|
"kind": "custom-element-definition",
|
|
2999
|
-
"name": "nord-
|
|
2999
|
+
"name": "nord-button-group",
|
|
3000
3000
|
"declaration": {
|
|
3001
|
-
"name": "
|
|
3002
|
-
"module": "src/
|
|
3001
|
+
"name": "ButtonGroup",
|
|
3002
|
+
"module": "src/button-group/ButtonGroup.ts"
|
|
3003
3003
|
}
|
|
3004
3004
|
}
|
|
3005
3005
|
]
|
|
@@ -14546,6 +14546,114 @@
|
|
|
14546
14546
|
}
|
|
14547
14547
|
]
|
|
14548
14548
|
},
|
|
14549
|
+
{
|
|
14550
|
+
"kind": "javascript-module",
|
|
14551
|
+
"path": "src/spinner/Spinner.ts",
|
|
14552
|
+
"declarations": [
|
|
14553
|
+
{
|
|
14554
|
+
"kind": "class",
|
|
14555
|
+
"description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
|
|
14556
|
+
"name": "Spinner",
|
|
14557
|
+
"cssProperties": [
|
|
14558
|
+
{
|
|
14559
|
+
"description": "Controls the color the spinner.",
|
|
14560
|
+
"name": "--n-spinner-color",
|
|
14561
|
+
"default": "var(--n-color-accent)"
|
|
14562
|
+
}
|
|
14563
|
+
],
|
|
14564
|
+
"members": [
|
|
14565
|
+
{
|
|
14566
|
+
"kind": "field",
|
|
14567
|
+
"name": "size",
|
|
14568
|
+
"type": {
|
|
14569
|
+
"text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
14570
|
+
},
|
|
14571
|
+
"default": "\"m\"",
|
|
14572
|
+
"description": "The size of the spinner.",
|
|
14573
|
+
"attribute": "size",
|
|
14574
|
+
"reflects": true
|
|
14575
|
+
},
|
|
14576
|
+
{
|
|
14577
|
+
"kind": "field",
|
|
14578
|
+
"name": "color",
|
|
14579
|
+
"type": {
|
|
14580
|
+
"text": "string | undefined"
|
|
14581
|
+
},
|
|
14582
|
+
"description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
|
|
14583
|
+
"attribute": "color",
|
|
14584
|
+
"reflects": true
|
|
14585
|
+
},
|
|
14586
|
+
{
|
|
14587
|
+
"kind": "field",
|
|
14588
|
+
"name": "label",
|
|
14589
|
+
"type": {
|
|
14590
|
+
"text": "string | undefined"
|
|
14591
|
+
},
|
|
14592
|
+
"description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
|
|
14593
|
+
"attribute": "label",
|
|
14594
|
+
"reflects": true
|
|
14595
|
+
}
|
|
14596
|
+
],
|
|
14597
|
+
"attributes": [
|
|
14598
|
+
{
|
|
14599
|
+
"name": "size",
|
|
14600
|
+
"type": {
|
|
14601
|
+
"text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
14602
|
+
},
|
|
14603
|
+
"default": "\"m\"",
|
|
14604
|
+
"description": "The size of the spinner.",
|
|
14605
|
+
"fieldName": "size"
|
|
14606
|
+
},
|
|
14607
|
+
{
|
|
14608
|
+
"name": "color",
|
|
14609
|
+
"type": {
|
|
14610
|
+
"text": "string | undefined"
|
|
14611
|
+
},
|
|
14612
|
+
"description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
|
|
14613
|
+
"fieldName": "color"
|
|
14614
|
+
},
|
|
14615
|
+
{
|
|
14616
|
+
"name": "label",
|
|
14617
|
+
"type": {
|
|
14618
|
+
"text": "string | undefined"
|
|
14619
|
+
},
|
|
14620
|
+
"description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
|
|
14621
|
+
"fieldName": "label"
|
|
14622
|
+
}
|
|
14623
|
+
],
|
|
14624
|
+
"superclass": {
|
|
14625
|
+
"name": "LitElement",
|
|
14626
|
+
"package": "lit"
|
|
14627
|
+
},
|
|
14628
|
+
"localization": [],
|
|
14629
|
+
"status": "ready",
|
|
14630
|
+
"category": "feedback",
|
|
14631
|
+
"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 for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
|
|
14632
|
+
"examples": [],
|
|
14633
|
+
"dependencies": [],
|
|
14634
|
+
"tagName": "nord-spinner",
|
|
14635
|
+
"customElement": true
|
|
14636
|
+
}
|
|
14637
|
+
],
|
|
14638
|
+
"exports": [
|
|
14639
|
+
{
|
|
14640
|
+
"kind": "js",
|
|
14641
|
+
"name": "default",
|
|
14642
|
+
"declaration": {
|
|
14643
|
+
"name": "Spinner",
|
|
14644
|
+
"module": "src/spinner/Spinner.ts"
|
|
14645
|
+
}
|
|
14646
|
+
},
|
|
14647
|
+
{
|
|
14648
|
+
"kind": "custom-element-definition",
|
|
14649
|
+
"name": "nord-spinner",
|
|
14650
|
+
"declaration": {
|
|
14651
|
+
"name": "Spinner",
|
|
14652
|
+
"module": "src/spinner/Spinner.ts"
|
|
14653
|
+
}
|
|
14654
|
+
}
|
|
14655
|
+
]
|
|
14656
|
+
},
|
|
14549
14657
|
{
|
|
14550
14658
|
"kind": "javascript-module",
|
|
14551
14659
|
"path": "src/skeleton/Skeleton.ts",
|
|
@@ -14877,114 +14985,6 @@
|
|
|
14877
14985
|
}
|
|
14878
14986
|
]
|
|
14879
14987
|
},
|
|
14880
|
-
{
|
|
14881
|
-
"kind": "javascript-module",
|
|
14882
|
-
"path": "src/spinner/Spinner.ts",
|
|
14883
|
-
"declarations": [
|
|
14884
|
-
{
|
|
14885
|
-
"kind": "class",
|
|
14886
|
-
"description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
|
|
14887
|
-
"name": "Spinner",
|
|
14888
|
-
"cssProperties": [
|
|
14889
|
-
{
|
|
14890
|
-
"description": "Controls the color the spinner.",
|
|
14891
|
-
"name": "--n-spinner-color",
|
|
14892
|
-
"default": "var(--n-color-accent)"
|
|
14893
|
-
}
|
|
14894
|
-
],
|
|
14895
|
-
"members": [
|
|
14896
|
-
{
|
|
14897
|
-
"kind": "field",
|
|
14898
|
-
"name": "size",
|
|
14899
|
-
"type": {
|
|
14900
|
-
"text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
14901
|
-
},
|
|
14902
|
-
"default": "\"m\"",
|
|
14903
|
-
"description": "The size of the spinner.",
|
|
14904
|
-
"attribute": "size",
|
|
14905
|
-
"reflects": true
|
|
14906
|
-
},
|
|
14907
|
-
{
|
|
14908
|
-
"kind": "field",
|
|
14909
|
-
"name": "color",
|
|
14910
|
-
"type": {
|
|
14911
|
-
"text": "string | undefined"
|
|
14912
|
-
},
|
|
14913
|
-
"description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
|
|
14914
|
-
"attribute": "color",
|
|
14915
|
-
"reflects": true
|
|
14916
|
-
},
|
|
14917
|
-
{
|
|
14918
|
-
"kind": "field",
|
|
14919
|
-
"name": "label",
|
|
14920
|
-
"type": {
|
|
14921
|
-
"text": "string | undefined"
|
|
14922
|
-
},
|
|
14923
|
-
"description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
|
|
14924
|
-
"attribute": "label",
|
|
14925
|
-
"reflects": true
|
|
14926
|
-
}
|
|
14927
|
-
],
|
|
14928
|
-
"attributes": [
|
|
14929
|
-
{
|
|
14930
|
-
"name": "size",
|
|
14931
|
-
"type": {
|
|
14932
|
-
"text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
14933
|
-
},
|
|
14934
|
-
"default": "\"m\"",
|
|
14935
|
-
"description": "The size of the spinner.",
|
|
14936
|
-
"fieldName": "size"
|
|
14937
|
-
},
|
|
14938
|
-
{
|
|
14939
|
-
"name": "color",
|
|
14940
|
-
"type": {
|
|
14941
|
-
"text": "string | undefined"
|
|
14942
|
-
},
|
|
14943
|
-
"description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.\nTakes precedence over the `--n-spinner-color` CSS custom property.",
|
|
14944
|
-
"fieldName": "color"
|
|
14945
|
-
},
|
|
14946
|
-
{
|
|
14947
|
-
"name": "label",
|
|
14948
|
-
"type": {
|
|
14949
|
-
"text": "string | undefined"
|
|
14950
|
-
},
|
|
14951
|
-
"description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
|
|
14952
|
-
"fieldName": "label"
|
|
14953
|
-
}
|
|
14954
|
-
],
|
|
14955
|
-
"superclass": {
|
|
14956
|
-
"name": "LitElement",
|
|
14957
|
-
"package": "lit"
|
|
14958
|
-
},
|
|
14959
|
-
"localization": [],
|
|
14960
|
-
"status": "ready",
|
|
14961
|
-
"category": "feedback",
|
|
14962
|
-
"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 for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n",
|
|
14963
|
-
"examples": [],
|
|
14964
|
-
"dependencies": [],
|
|
14965
|
-
"tagName": "nord-spinner",
|
|
14966
|
-
"customElement": true
|
|
14967
|
-
}
|
|
14968
|
-
],
|
|
14969
|
-
"exports": [
|
|
14970
|
-
{
|
|
14971
|
-
"kind": "js",
|
|
14972
|
-
"name": "default",
|
|
14973
|
-
"declaration": {
|
|
14974
|
-
"name": "Spinner",
|
|
14975
|
-
"module": "src/spinner/Spinner.ts"
|
|
14976
|
-
}
|
|
14977
|
-
},
|
|
14978
|
-
{
|
|
14979
|
-
"kind": "custom-element-definition",
|
|
14980
|
-
"name": "nord-spinner",
|
|
14981
|
-
"declaration": {
|
|
14982
|
-
"name": "Spinner",
|
|
14983
|
-
"module": "src/spinner/Spinner.ts"
|
|
14984
|
-
}
|
|
14985
|
-
}
|
|
14986
|
-
]
|
|
14987
|
-
},
|
|
14988
14988
|
{
|
|
14989
14989
|
"kind": "javascript-module",
|
|
14990
14990
|
"path": "src/tab-group/TabGroup.ts",
|
|
@@ -15223,10 +15223,58 @@
|
|
|
15223
15223
|
},
|
|
15224
15224
|
{
|
|
15225
15225
|
"kind": "custom-element-definition",
|
|
15226
|
-
"name": "nord-tab-group",
|
|
15226
|
+
"name": "nord-tab-group",
|
|
15227
|
+
"declaration": {
|
|
15228
|
+
"name": "TabGroup",
|
|
15229
|
+
"module": "src/tab-group/TabGroup.ts"
|
|
15230
|
+
}
|
|
15231
|
+
}
|
|
15232
|
+
]
|
|
15233
|
+
},
|
|
15234
|
+
{
|
|
15235
|
+
"kind": "javascript-module",
|
|
15236
|
+
"path": "src/tab-panel/TabPanel.ts",
|
|
15237
|
+
"declarations": [
|
|
15238
|
+
{
|
|
15239
|
+
"kind": "class",
|
|
15240
|
+
"description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
|
|
15241
|
+
"name": "TabPanel",
|
|
15242
|
+
"slots": [
|
|
15243
|
+
{
|
|
15244
|
+
"description": "The tab panel content.",
|
|
15245
|
+
"name": ""
|
|
15246
|
+
}
|
|
15247
|
+
],
|
|
15248
|
+
"members": [],
|
|
15249
|
+
"superclass": {
|
|
15250
|
+
"name": "LitElement",
|
|
15251
|
+
"package": "lit"
|
|
15252
|
+
},
|
|
15253
|
+
"localization": [],
|
|
15254
|
+
"status": "ready",
|
|
15255
|
+
"category": "navigation",
|
|
15256
|
+
"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 the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab 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 tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
|
|
15257
|
+
"examples": [],
|
|
15258
|
+
"dependencies": [],
|
|
15259
|
+
"tagName": "nord-tab-panel",
|
|
15260
|
+
"customElement": true
|
|
15261
|
+
}
|
|
15262
|
+
],
|
|
15263
|
+
"exports": [
|
|
15264
|
+
{
|
|
15265
|
+
"kind": "js",
|
|
15266
|
+
"name": "default",
|
|
15267
|
+
"declaration": {
|
|
15268
|
+
"name": "TabPanel",
|
|
15269
|
+
"module": "src/tab-panel/TabPanel.ts"
|
|
15270
|
+
}
|
|
15271
|
+
},
|
|
15272
|
+
{
|
|
15273
|
+
"kind": "custom-element-definition",
|
|
15274
|
+
"name": "nord-tab-panel",
|
|
15227
15275
|
"declaration": {
|
|
15228
|
-
"name": "
|
|
15229
|
-
"module": "src/tab-
|
|
15276
|
+
"name": "TabPanel",
|
|
15277
|
+
"module": "src/tab-panel/TabPanel.ts"
|
|
15230
15278
|
}
|
|
15231
15279
|
}
|
|
15232
15280
|
]
|
|
@@ -15377,54 +15425,6 @@
|
|
|
15377
15425
|
}
|
|
15378
15426
|
]
|
|
15379
15427
|
},
|
|
15380
|
-
{
|
|
15381
|
-
"kind": "javascript-module",
|
|
15382
|
-
"path": "src/tab-panel/TabPanel.ts",
|
|
15383
|
-
"declarations": [
|
|
15384
|
-
{
|
|
15385
|
-
"kind": "class",
|
|
15386
|
-
"description": "The panel which contains content that can be revealed using a tab\nin the tab group component.",
|
|
15387
|
-
"name": "TabPanel",
|
|
15388
|
-
"slots": [
|
|
15389
|
-
{
|
|
15390
|
-
"description": "The tab panel content.",
|
|
15391
|
-
"name": ""
|
|
15392
|
-
}
|
|
15393
|
-
],
|
|
15394
|
-
"members": [],
|
|
15395
|
-
"superclass": {
|
|
15396
|
-
"name": "LitElement",
|
|
15397
|
-
"package": "lit"
|
|
15398
|
-
},
|
|
15399
|
-
"localization": [],
|
|
15400
|
-
"status": "ready",
|
|
15401
|
-
"category": "navigation",
|
|
15402
|
-
"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 the tab panel component within the tab group component.\n- Use both non-interactive and interactive elements within the contents of the tab panel.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don't use the tab panel component outside of the tab group component.\n- Don't obscure important information within a tab panel that isn't revealed by default.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab 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 tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular tab panel you wish to show out of order of the tabs UI itself consider using the `selected` option on the related tab component to select the tab but prevent the order of the tabs being affected.\n",
|
|
15403
|
-
"examples": [],
|
|
15404
|
-
"dependencies": [],
|
|
15405
|
-
"tagName": "nord-tab-panel",
|
|
15406
|
-
"customElement": true
|
|
15407
|
-
}
|
|
15408
|
-
],
|
|
15409
|
-
"exports": [
|
|
15410
|
-
{
|
|
15411
|
-
"kind": "js",
|
|
15412
|
-
"name": "default",
|
|
15413
|
-
"declaration": {
|
|
15414
|
-
"name": "TabPanel",
|
|
15415
|
-
"module": "src/tab-panel/TabPanel.ts"
|
|
15416
|
-
}
|
|
15417
|
-
},
|
|
15418
|
-
{
|
|
15419
|
-
"kind": "custom-element-definition",
|
|
15420
|
-
"name": "nord-tab-panel",
|
|
15421
|
-
"declaration": {
|
|
15422
|
-
"name": "TabPanel",
|
|
15423
|
-
"module": "src/tab-panel/TabPanel.ts"
|
|
15424
|
-
}
|
|
15425
|
-
}
|
|
15426
|
-
]
|
|
15427
|
-
},
|
|
15428
15428
|
{
|
|
15429
15429
|
"kind": "javascript-module",
|
|
15430
15430
|
"path": "src/tag/Tag.ts",
|
|
@@ -17603,6 +17603,106 @@
|
|
|
17603
17603
|
}
|
|
17604
17604
|
]
|
|
17605
17605
|
},
|
|
17606
|
+
{
|
|
17607
|
+
"kind": "javascript-module",
|
|
17608
|
+
"path": "src/top-bar/TopBar.ts",
|
|
17609
|
+
"declarations": [
|
|
17610
|
+
{
|
|
17611
|
+
"kind": "class",
|
|
17612
|
+
"description": "Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",
|
|
17613
|
+
"name": "TopBar",
|
|
17614
|
+
"slots": [
|
|
17615
|
+
{
|
|
17616
|
+
"description": "Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.",
|
|
17617
|
+
"name": ""
|
|
17618
|
+
},
|
|
17619
|
+
{
|
|
17620
|
+
"description": "Optional slot for menus, buttons, toggles, etc.",
|
|
17621
|
+
"name": "end"
|
|
17622
|
+
}
|
|
17623
|
+
],
|
|
17624
|
+
"members": [],
|
|
17625
|
+
"superclass": {
|
|
17626
|
+
"name": "LitElement",
|
|
17627
|
+
"package": "lit"
|
|
17628
|
+
},
|
|
17629
|
+
"localization": [],
|
|
17630
|
+
"status": "ready",
|
|
17631
|
+
"category": "structure",
|
|
17632
|
+
"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- Applications that utilize the top bar can allow users to customize the color of the top bar to match their preference. [View an example](/components/top-bar/?example=color).\n- If your application allows it, include search to help users find resources and navigate.\n- Include a user menu in the end slot of the top bar.\n- Use the [layout component](/components/layout/?example=top-bar) to provide structure for the top bar component. We’ve also created [an example which shows full theming capabilities](/components/layout/?example=theming).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for global navigation. Use the [navigation component](/components/navigation/) instead.\n- Don’t allow the user to set a top bar color that doesn’t provide enough contrast with the content.\n- Don’t allow the user to freely pick a hex code as the top bar color. Instead, offer a choice from a predefined palette of colors which provides sufficient contrast with the content. [View an example](/components/top-bar/?example=color).\n\n</div>\n\n---\n\n## Theming\n\nPlease see the [Top Bar theming](/themes/#top-bar-theming) section in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#top-bar-theming\">Theming Guidelines</nord-button>\n",
|
|
17633
|
+
"examples": [],
|
|
17634
|
+
"dependencies": [],
|
|
17635
|
+
"tagName": "nord-top-bar",
|
|
17636
|
+
"customElement": true
|
|
17637
|
+
}
|
|
17638
|
+
],
|
|
17639
|
+
"exports": [
|
|
17640
|
+
{
|
|
17641
|
+
"kind": "js",
|
|
17642
|
+
"name": "default",
|
|
17643
|
+
"declaration": {
|
|
17644
|
+
"name": "TopBar",
|
|
17645
|
+
"module": "src/top-bar/TopBar.ts"
|
|
17646
|
+
}
|
|
17647
|
+
},
|
|
17648
|
+
{
|
|
17649
|
+
"kind": "custom-element-definition",
|
|
17650
|
+
"name": "nord-top-bar",
|
|
17651
|
+
"declaration": {
|
|
17652
|
+
"name": "TopBar",
|
|
17653
|
+
"module": "src/top-bar/TopBar.ts"
|
|
17654
|
+
}
|
|
17655
|
+
}
|
|
17656
|
+
]
|
|
17657
|
+
},
|
|
17658
|
+
{
|
|
17659
|
+
"kind": "javascript-module",
|
|
17660
|
+
"path": "src/visually-hidden/VisuallyHidden.ts",
|
|
17661
|
+
"declarations": [
|
|
17662
|
+
{
|
|
17663
|
+
"kind": "class",
|
|
17664
|
+
"description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
|
|
17665
|
+
"name": "VisuallyHidden",
|
|
17666
|
+
"slots": [
|
|
17667
|
+
{
|
|
17668
|
+
"description": "The visually hidden content.",
|
|
17669
|
+
"name": ""
|
|
17670
|
+
}
|
|
17671
|
+
],
|
|
17672
|
+
"members": [],
|
|
17673
|
+
"superclass": {
|
|
17674
|
+
"name": "LitElement",
|
|
17675
|
+
"package": "lit"
|
|
17676
|
+
},
|
|
17677
|
+
"localization": [],
|
|
17678
|
+
"status": "ready",
|
|
17679
|
+
"category": "text",
|
|
17680
|
+
"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 hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding interactive content.\n\n</div>\n",
|
|
17681
|
+
"examples": [],
|
|
17682
|
+
"dependencies": [],
|
|
17683
|
+
"tagName": "nord-visually-hidden",
|
|
17684
|
+
"customElement": true
|
|
17685
|
+
}
|
|
17686
|
+
],
|
|
17687
|
+
"exports": [
|
|
17688
|
+
{
|
|
17689
|
+
"kind": "js",
|
|
17690
|
+
"name": "default",
|
|
17691
|
+
"declaration": {
|
|
17692
|
+
"name": "VisuallyHidden",
|
|
17693
|
+
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
17694
|
+
}
|
|
17695
|
+
},
|
|
17696
|
+
{
|
|
17697
|
+
"kind": "custom-element-definition",
|
|
17698
|
+
"name": "nord-visually-hidden",
|
|
17699
|
+
"declaration": {
|
|
17700
|
+
"name": "VisuallyHidden",
|
|
17701
|
+
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
17702
|
+
}
|
|
17703
|
+
}
|
|
17704
|
+
]
|
|
17705
|
+
},
|
|
17606
17706
|
{
|
|
17607
17707
|
"kind": "javascript-module",
|
|
17608
17708
|
"path": "src/toggle/Toggle.ts",
|
|
@@ -18327,106 +18427,6 @@
|
|
|
18327
18427
|
}
|
|
18328
18428
|
]
|
|
18329
18429
|
},
|
|
18330
|
-
{
|
|
18331
|
-
"kind": "javascript-module",
|
|
18332
|
-
"path": "src/visually-hidden/VisuallyHidden.ts",
|
|
18333
|
-
"declarations": [
|
|
18334
|
-
{
|
|
18335
|
-
"kind": "class",
|
|
18336
|
-
"description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
|
|
18337
|
-
"name": "VisuallyHidden",
|
|
18338
|
-
"slots": [
|
|
18339
|
-
{
|
|
18340
|
-
"description": "The visually hidden content.",
|
|
18341
|
-
"name": ""
|
|
18342
|
-
}
|
|
18343
|
-
],
|
|
18344
|
-
"members": [],
|
|
18345
|
-
"superclass": {
|
|
18346
|
-
"name": "LitElement",
|
|
18347
|
-
"package": "lit"
|
|
18348
|
-
},
|
|
18349
|
-
"localization": [],
|
|
18350
|
-
"status": "ready",
|
|
18351
|
-
"category": "text",
|
|
18352
|
-
"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 hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding interactive content.\n\n</div>\n",
|
|
18353
|
-
"examples": [],
|
|
18354
|
-
"dependencies": [],
|
|
18355
|
-
"tagName": "nord-visually-hidden",
|
|
18356
|
-
"customElement": true
|
|
18357
|
-
}
|
|
18358
|
-
],
|
|
18359
|
-
"exports": [
|
|
18360
|
-
{
|
|
18361
|
-
"kind": "js",
|
|
18362
|
-
"name": "default",
|
|
18363
|
-
"declaration": {
|
|
18364
|
-
"name": "VisuallyHidden",
|
|
18365
|
-
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
18366
|
-
}
|
|
18367
|
-
},
|
|
18368
|
-
{
|
|
18369
|
-
"kind": "custom-element-definition",
|
|
18370
|
-
"name": "nord-visually-hidden",
|
|
18371
|
-
"declaration": {
|
|
18372
|
-
"name": "VisuallyHidden",
|
|
18373
|
-
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
18374
|
-
}
|
|
18375
|
-
}
|
|
18376
|
-
]
|
|
18377
|
-
},
|
|
18378
|
-
{
|
|
18379
|
-
"kind": "javascript-module",
|
|
18380
|
-
"path": "src/top-bar/TopBar.ts",
|
|
18381
|
-
"declarations": [
|
|
18382
|
-
{
|
|
18383
|
-
"kind": "class",
|
|
18384
|
-
"description": "Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.",
|
|
18385
|
-
"name": "TopBar",
|
|
18386
|
-
"slots": [
|
|
18387
|
-
{
|
|
18388
|
-
"description": "Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.",
|
|
18389
|
-
"name": ""
|
|
18390
|
-
},
|
|
18391
|
-
{
|
|
18392
|
-
"description": "Optional slot for menus, buttons, toggles, etc.",
|
|
18393
|
-
"name": "end"
|
|
18394
|
-
}
|
|
18395
|
-
],
|
|
18396
|
-
"members": [],
|
|
18397
|
-
"superclass": {
|
|
18398
|
-
"name": "LitElement",
|
|
18399
|
-
"package": "lit"
|
|
18400
|
-
},
|
|
18401
|
-
"localization": [],
|
|
18402
|
-
"status": "ready",
|
|
18403
|
-
"category": "structure",
|
|
18404
|
-
"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- Applications that utilize the top bar can allow users to customize the color of the top bar to match their preference. [View an example](/components/top-bar/?example=color).\n- If your application allows it, include search to help users find resources and navigate.\n- Include a user menu in the end slot of the top bar.\n- Use the [layout component](/components/layout/?example=top-bar) to provide structure for the top bar component. We’ve also created [an example which shows full theming capabilities](/components/layout/?example=theming).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for global navigation. Use the [navigation component](/components/navigation/) instead.\n- Don’t allow the user to set a top bar color that doesn’t provide enough contrast with the content.\n- Don’t allow the user to freely pick a hex code as the top bar color. Instead, offer a choice from a predefined palette of colors which provides sufficient contrast with the content. [View an example](/components/top-bar/?example=color).\n\n</div>\n\n---\n\n## Theming\n\nPlease see the [Top Bar theming](/themes/#top-bar-theming) section in our theming documentation for detailed guidelines.\n\n<nord-button variant=\"primary\" href=\"/themes/#top-bar-theming\">Theming Guidelines</nord-button>\n",
|
|
18405
|
-
"examples": [],
|
|
18406
|
-
"dependencies": [],
|
|
18407
|
-
"tagName": "nord-top-bar",
|
|
18408
|
-
"customElement": true
|
|
18409
|
-
}
|
|
18410
|
-
],
|
|
18411
|
-
"exports": [
|
|
18412
|
-
{
|
|
18413
|
-
"kind": "js",
|
|
18414
|
-
"name": "default",
|
|
18415
|
-
"declaration": {
|
|
18416
|
-
"name": "TopBar",
|
|
18417
|
-
"module": "src/top-bar/TopBar.ts"
|
|
18418
|
-
}
|
|
18419
|
-
},
|
|
18420
|
-
{
|
|
18421
|
-
"kind": "custom-element-definition",
|
|
18422
|
-
"name": "nord-top-bar",
|
|
18423
|
-
"declaration": {
|
|
18424
|
-
"name": "TopBar",
|
|
18425
|
-
"module": "src/top-bar/TopBar.ts"
|
|
18426
|
-
}
|
|
18427
|
-
}
|
|
18428
|
-
]
|
|
18429
|
-
},
|
|
18430
18430
|
{
|
|
18431
18431
|
"kind": "javascript-module",
|
|
18432
18432
|
"path": "src/common/controllers/BroadcastChannelController.ts",
|