@nordhealth/components 1.0.0-beta.12 → 1.0.0-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/custom-elements.json +720 -720
  2. package/lib/Button.js +1 -1
  3. package/lib/Button.js.map +1 -1
  4. package/lib/bundle.js +1 -1
  5. package/lib/bundle.js.map +1 -1
  6. package/package.json +5 -5
package/custom-elements.json CHANGED
@@ -422,380 +422,372 @@
422
422
  },
423
423
  {
424
424
  "kind": "javascript-module",
425
- "path": "src/banner/Banner.ts",
425
+ "path": "src/button/Button.ts",
426
426
  "declarations": [
427
427
  {
428
428
  "kind": "class",
429
- "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.",
430
- "name": "Banner",
429
+ "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
430
+ "name": "Button",
431
431
  "slots": [
432
432
  {
433
- "description": "default slot",
433
+ "description": "The button content",
434
434
  "name": ""
435
- }
436
- ],
437
- "members": [
435
+ },
438
436
  {
439
- "kind": "field",
440
- "name": "variant",
441
- "type": {
442
- "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
443
- },
444
- "default": "\"info\"",
445
- "description": "The style variant of the banner.",
446
- "attribute": "variant",
447
- "reflects": true
448
- }
449
- ],
450
- "attributes": [
437
+ "description": "Used to place content before button text. Typically used for icons.",
438
+ "name": "before"
439
+ },
451
440
  {
452
- "name": "variant",
453
- "type": {
454
- "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
455
- },
456
- "default": "\"info\"",
457
- "description": "The style variant of the banner.",
458
- "fieldName": "variant"
441
+ "description": "Used to place content after button text. Typically used for icons.",
442
+ "name": "after"
459
443
  }
460
444
  ],
461
- "superclass": {
462
- "name": "LitElement",
463
- "package": "lit"
464
- },
465
- "status": "new",
466
- "category": "feedback",
467
- "tagName": "nord-banner",
468
- "customElement": true
469
- }
470
- ],
471
- "exports": [
472
- {
473
- "kind": "js",
474
- "name": "default",
475
- "declaration": {
476
- "name": "Banner",
477
- "module": "src/banner/Banner.ts"
478
- }
479
- },
480
- {
481
- "kind": "custom-element-definition",
482
- "name": "nord-banner",
483
- "declaration": {
484
- "name": "Banner",
485
- "module": "src/banner/Banner.ts"
486
- }
487
- }
488
- ],
489
- "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"
490
- },
491
- {
492
- "kind": "javascript-module",
493
- "path": "src/calendar/Calendar.ts",
494
- "declarations": [
495
- {
496
- "kind": "class",
497
- "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
498
- "name": "Calendar",
499
445
  "members": [
500
446
  {
501
447
  "kind": "field",
502
- "name": "dialogLabelId",
503
- "type": {
504
- "text": "string"
505
- },
506
- "privacy": "private",
507
- "default": "\"dialog-header\""
508
- },
509
- {
510
- "kind": "field",
511
- "name": "monthSelectNode",
512
- "type": {
513
- "text": "HTMLElement"
514
- },
515
- "privacy": "private"
516
- },
517
- {
518
- "kind": "field",
519
- "name": "focusedDayNode",
520
- "type": {
521
- "text": "HTMLButtonElement"
522
- },
523
- "privacy": "private"
524
- },
525
- {
526
- "kind": "field",
527
- "name": "direction",
528
- "privacy": "private",
529
- "default": "new DirectionController(this)"
530
- },
531
- {
532
- "kind": "field",
533
- "name": "swipe",
534
- "privacy": "private",
535
- "default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
536
- },
537
- {
538
- "kind": "field",
539
- "name": "shortcuts",
448
+ "name": "buttonRef",
540
449
  "privacy": "private"
541
450
  },
542
451
  {
543
452
  "kind": "field",
544
- "name": "dateFormatShort",
545
- "type": {
546
- "text": "Intl.DateTimeFormat"
547
- },
453
+ "name": "lightDom",
548
454
  "privacy": "private",
549
- "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
455
+ "default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
550
456
  },
551
457
  {
552
458
  "kind": "field",
553
- "name": "localization",
459
+ "name": "variant",
554
460
  "type": {
555
- "text": "CalendarLocalizedText"
461
+ "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
556
462
  },
557
- "default": "localization"
463
+ "default": "\"default\"",
464
+ "description": "The style variant of the button.",
465
+ "attribute": "variant",
466
+ "reflects": true
558
467
  },
559
468
  {
560
469
  "kind": "field",
561
- "name": "value",
470
+ "name": "type",
562
471
  "type": {
563
- "text": "string"
472
+ "text": "\"button\" | \"submit\" | \"reset\""
564
473
  },
565
- "default": "\"\"",
566
- "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
567
- "attribute": "value"
474
+ "default": "\"submit\"",
475
+ "description": "The type of the button.",
476
+ "attribute": "type",
477
+ "reflects": true
568
478
  },
569
479
  {
570
480
  "kind": "field",
571
- "name": "firstDayOfWeek",
481
+ "name": "size",
572
482
  "type": {
573
- "text": "DaysOfWeek"
483
+ "text": "\"s\" | \"m\" | \"l\""
574
484
  },
575
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
576
- "attribute": "firstDayOfWeek"
485
+ "default": "\"m\"",
486
+ "description": "The size of the button.\nThis affects font-size and padding.",
487
+ "attribute": "size",
488
+ "reflects": true
577
489
  },
578
490
  {
579
491
  "kind": "field",
580
- "name": "min",
492
+ "name": "href",
581
493
  "type": {
582
- "text": "string"
494
+ "text": "string | undefined"
583
495
  },
584
- "default": "\"\"",
585
- "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
586
- "attribute": "min"
496
+ "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
497
+ "attribute": "href",
498
+ "reflects": true
587
499
  },
588
500
  {
589
501
  "kind": "field",
590
- "name": "max",
502
+ "name": "download",
591
503
  "type": {
592
- "text": "string"
504
+ "text": "boolean"
593
505
  },
594
- "default": "\"\"",
595
- "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
596
- "attribute": "max"
506
+ "default": "false",
507
+ "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
508
+ "attribute": "download"
597
509
  },
598
510
  {
599
511
  "kind": "field",
600
- "name": "isDateDisabled",
512
+ "name": "target",
601
513
  "type": {
602
- "text": "DateDisabledPredicate"
514
+ "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
603
515
  },
604
- "default": "isDateDisabled",
605
- "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
516
+ "default": "\"_self\"",
517
+ "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
518
+ "attribute": "target",
519
+ "reflects": true
606
520
  },
607
521
  {
608
522
  "kind": "field",
609
- "name": "activeFocus",
523
+ "name": "expand",
610
524
  "type": {
611
525
  "text": "boolean"
612
526
  },
613
- "privacy": "private",
614
- "default": "false"
527
+ "default": "false",
528
+ "description": "Controls whether the button expands to fill the width of its container.",
529
+ "attribute": "expand",
530
+ "reflects": true
615
531
  },
616
532
  {
617
- "kind": "field",
618
- "name": "focusedDay",
533
+ "kind": "method",
534
+ "name": "renderLink",
619
535
  "privacy": "private",
620
- "default": "new Date()"
536
+ "parameters": [
537
+ {
538
+ "name": "innards",
539
+ "type": {
540
+ "text": "TemplateResult"
541
+ }
542
+ }
543
+ ],
544
+ "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
621
545
  },
622
546
  {
623
547
  "kind": "method",
624
- "name": "focus",
548
+ "name": "renderButton",
549
+ "privacy": "private",
625
550
  "parameters": [
626
551
  {
627
- "name": "options",
628
- "optional": true,
552
+ "name": "innards",
629
553
  "type": {
630
- "text": "FocusOptions & { target: \"day\" | \"month\" }"
554
+ "text": "TemplateResult"
631
555
  }
632
556
  }
633
557
  ]
634
558
  },
635
559
  {
636
560
  "kind": "method",
637
- "name": "createDateFormatter",
561
+ "name": "renderLightDom",
638
562
  "privacy": "private"
639
563
  },
640
564
  {
641
565
  "kind": "field",
642
- "name": "handleDaySelect",
566
+ "name": "handleOuterClick",
643
567
  "privacy": "private"
644
568
  },
645
569
  {
646
570
  "kind": "method",
647
- "name": "addDays",
571
+ "name": "handleClick",
648
572
  "privacy": "private",
649
573
  "parameters": [
650
574
  {
651
- "name": "days",
575
+ "name": "e",
652
576
  "type": {
653
- "text": "number"
577
+ "text": "Event"
654
578
  }
655
579
  }
656
580
  ]
657
581
  },
658
582
  {
659
- "kind": "method",
660
- "name": "addMonths",
661
- "privacy": "private",
662
- "parameters": [
663
- {
664
- "name": "months",
665
- "type": {
666
- "text": "number"
667
- }
668
- }
669
- ]
583
+ "kind": "field",
584
+ "name": "disabled",
585
+ "type": {
586
+ "text": "boolean"
587
+ },
588
+ "default": "false",
589
+ "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
590
+ "attribute": "disabled",
591
+ "reflects": true,
592
+ "inheritedFrom": {
593
+ "name": "InputMixin",
594
+ "module": "src/common/mixins/InputMixin.ts"
595
+ }
670
596
  },
671
597
  {
672
- "kind": "method",
673
- "name": "addYears",
674
- "privacy": "private",
675
- "parameters": [
676
- {
677
- "name": "years",
678
- "type": {
679
- "text": "number"
680
- }
681
- }
682
- ]
683
- },
598
+ "kind": "field",
599
+ "name": "name",
600
+ "type": {
601
+ "text": "string | undefined"
602
+ },
603
+ "description": "The name of the form component.",
604
+ "attribute": "name",
605
+ "inheritedFrom": {
606
+ "name": "InputMixin",
607
+ "module": "src/common/mixins/InputMixin.ts"
608
+ }
609
+ },
684
610
  {
685
- "kind": "method",
686
- "name": "startOfWeek",
687
- "privacy": "private"
611
+ "kind": "field",
612
+ "name": "value",
613
+ "type": {
614
+ "text": "string"
615
+ },
616
+ "default": "\"\"",
617
+ "description": "The value of the form component.",
618
+ "attribute": "value",
619
+ "inheritedFrom": {
620
+ "name": "InputMixin",
621
+ "module": "src/common/mixins/InputMixin.ts"
622
+ }
688
623
  },
689
624
  {
690
- "kind": "method",
691
- "name": "endOfWeek",
692
- "privacy": "private"
625
+ "kind": "field",
626
+ "name": "form",
627
+ "privacy": "protected",
628
+ "description": "Gets the form, if any, associated with the form element.",
629
+ "inheritedFrom": {
630
+ "name": "InputMixin",
631
+ "module": "src/common/mixins/InputMixin.ts"
632
+ }
693
633
  },
694
634
  {
695
- "kind": "method",
696
- "name": "setMonth",
697
- "privacy": "private",
698
- "parameters": [
699
- {
700
- "name": "month",
701
- "type": {
702
- "text": "number"
703
- }
704
- }
705
- ]
635
+ "kind": "field",
636
+ "name": "focusableRef",
637
+ "privacy": "protected",
638
+ "inheritedFrom": {
639
+ "name": "FocusableMixin",
640
+ "module": "src/common/mixins/FocusableMixin.ts"
641
+ }
706
642
  },
707
643
  {
708
644
  "kind": "method",
709
- "name": "setYear",
710
- "privacy": "private",
645
+ "name": "focus",
711
646
  "parameters": [
712
647
  {
713
- "name": "year",
648
+ "name": "options",
649
+ "optional": true,
714
650
  "type": {
715
- "text": "number"
716
- }
651
+ "text": "FocusOptions"
652
+ },
653
+ "description": "An object which controls aspects of the focusing process."
717
654
  }
718
- ]
655
+ ],
656
+ "description": "Programmatically move focus to the component.",
657
+ "inheritedFrom": {
658
+ "name": "FocusableMixin",
659
+ "module": "src/common/mixins/FocusableMixin.ts"
660
+ }
719
661
  },
720
662
  {
721
663
  "kind": "method",
722
- "name": "setFocusedDay",
723
- "privacy": "private",
724
- "parameters": [
725
- {
726
- "name": "day",
727
- "type": {
728
- "text": "Date"
729
- }
730
- }
731
- ]
664
+ "name": "blur",
665
+ "description": "Programmatically remove focus from the component.",
666
+ "inheritedFrom": {
667
+ "name": "FocusableMixin",
668
+ "module": "src/common/mixins/FocusableMixin.ts"
669
+ }
732
670
  },
733
671
  {
734
- "kind": "field",
735
- "name": "handleMonthSelect",
736
- "privacy": "private"
672
+ "kind": "method",
673
+ "name": "click",
674
+ "description": "Programmatically simulates a click on the component.",
675
+ "inheritedFrom": {
676
+ "name": "FocusableMixin",
677
+ "module": "src/common/mixins/FocusableMixin.ts"
678
+ }
679
+ }
680
+ ],
681
+ "attributes": [
682
+ {
683
+ "name": "variant",
684
+ "type": {
685
+ "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
686
+ },
687
+ "default": "\"default\"",
688
+ "description": "The style variant of the button.",
689
+ "fieldName": "variant"
737
690
  },
738
691
  {
739
- "kind": "field",
740
- "name": "handleYearSelect",
741
- "privacy": "private"
692
+ "name": "type",
693
+ "type": {
694
+ "text": "\"button\" | \"submit\" | \"reset\""
695
+ },
696
+ "default": "\"submit\"",
697
+ "description": "The type of the button.",
698
+ "fieldName": "type"
742
699
  },
743
700
  {
744
- "kind": "field",
745
- "name": "handleNextMonthClick",
746
- "privacy": "private"
701
+ "name": "size",
702
+ "type": {
703
+ "text": "\"s\" | \"m\" | \"l\""
704
+ },
705
+ "default": "\"m\"",
706
+ "description": "The size of the button.\nThis affects font-size and padding.",
707
+ "fieldName": "size"
747
708
  },
748
709
  {
749
- "kind": "field",
750
- "name": "handlePreviousMonthClick",
751
- "privacy": "private"
710
+ "name": "href",
711
+ "type": {
712
+ "text": "string | undefined"
713
+ },
714
+ "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
715
+ "fieldName": "href"
752
716
  },
753
717
  {
754
- "kind": "field",
755
- "name": "enableActiveFocus",
756
- "privacy": "private"
718
+ "name": "download",
719
+ "type": {
720
+ "text": "boolean"
721
+ },
722
+ "default": "false",
723
+ "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
724
+ "fieldName": "download"
757
725
  },
758
726
  {
759
- "kind": "field",
760
- "name": "disableActiveFocus",
761
- "privacy": "private"
762
- }
763
- ],
764
- "attributes": [
727
+ "name": "target",
728
+ "type": {
729
+ "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
730
+ },
731
+ "default": "\"_self\"",
732
+ "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
733
+ "fieldName": "target"
734
+ },
765
735
  {
766
- "name": "value",
736
+ "name": "expand",
767
737
  "type": {
768
- "text": "string"
738
+ "text": "boolean"
769
739
  },
770
- "default": "\"\"",
771
- "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
772
- "fieldName": "value"
740
+ "default": "false",
741
+ "description": "Controls whether the button expands to fill the width of its container.",
742
+ "fieldName": "expand"
773
743
  },
774
744
  {
775
- "name": "firstDayOfWeek",
745
+ "name": "disabled",
776
746
  "type": {
777
- "text": "DaysOfWeek"
747
+ "text": "boolean"
778
748
  },
779
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
780
- "fieldName": "firstDayOfWeek"
749
+ "default": "false",
750
+ "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
751
+ "fieldName": "disabled",
752
+ "inheritedFrom": {
753
+ "name": "InputMixin",
754
+ "module": "src/common/mixins/InputMixin.ts"
755
+ }
781
756
  },
782
757
  {
783
- "name": "min",
758
+ "name": "name",
784
759
  "type": {
785
- "text": "string"
760
+ "text": "string | undefined"
786
761
  },
787
- "default": "\"\"",
788
- "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
789
- "fieldName": "min"
762
+ "description": "The name of the form component.",
763
+ "fieldName": "name",
764
+ "inheritedFrom": {
765
+ "name": "InputMixin",
766
+ "module": "src/common/mixins/InputMixin.ts"
767
+ }
790
768
  },
791
769
  {
792
- "name": "max",
770
+ "name": "value",
793
771
  "type": {
794
772
  "text": "string"
795
773
  },
796
774
  "default": "\"\"",
797
- "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
798
- "fieldName": "max"
775
+ "description": "The value of the form component.",
776
+ "fieldName": "value",
777
+ "inheritedFrom": {
778
+ "name": "InputMixin",
779
+ "module": "src/common/mixins/InputMixin.ts"
780
+ }
781
+ }
782
+ ],
783
+ "mixins": [
784
+ {
785
+ "name": "InputMixin",
786
+ "module": "/src/common/mixins/InputMixin.js"
787
+ },
788
+ {
789
+ "name": "FocusableMixin",
790
+ "module": "/src/common/mixins/FocusableMixin.js"
799
791
  }
800
792
  ],
801
793
  "superclass": {
@@ -803,8 +795,8 @@
803
795
  "package": "lit"
804
796
  },
805
797
  "status": "ready",
806
- "category": "list",
807
- "tagName": "nord-calendar",
798
+ "category": "action",
799
+ "tagName": "nord-button",
808
800
  "customElement": true
809
801
  }
810
802
  ],
@@ -813,508 +805,329 @@
813
805
  "kind": "js",
814
806
  "name": "default",
815
807
  "declaration": {
816
- "name": "Calendar",
817
- "module": "src/calendar/Calendar.ts"
808
+ "name": "Button",
809
+ "module": "src/button/Button.ts"
818
810
  }
819
811
  },
820
812
  {
821
813
  "kind": "custom-element-definition",
822
- "name": "nord-calendar",
814
+ "name": "nord-button",
823
815
  "declaration": {
824
- "name": "Calendar",
825
- "module": "src/calendar/Calendar.ts"
816
+ "name": "Button",
817
+ "module": "src/button/Button.ts"
826
818
  }
827
819
  }
828
820
  ],
829
- "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
821
+ "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 clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\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` | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element. |\n| `primary` | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action. |\n| `dashed` | Dashed style should be used for actions that trigger filtering. |\n| `danger` | Danger style should be used for actions that delete data or otherwise make it hard to undo the action. |\n| `plain` | Used for less important or less common actions. Can be also used for linking to other pages. |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
830
822
  },
831
823
  {
832
824
  "kind": "javascript-module",
833
- "path": "src/calendar/DateSelectEvent.ts",
825
+ "path": "src/calendar/Calendar.ts",
834
826
  "declarations": [
835
827
  {
836
828
  "kind": "class",
837
- "description": "",
838
- "name": "DateSelectEvent",
829
+ "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
830
+ "name": "Calendar",
839
831
  "members": [
840
832
  {
841
833
  "kind": "field",
842
- "name": "eventName",
834
+ "name": "dialogLabelId",
843
835
  "type": {
844
836
  "text": "string"
845
837
  },
846
- "static": true,
847
- "default": "\"nord-select\""
838
+ "privacy": "private",
839
+ "default": "\"dialog-header\""
848
840
  },
849
841
  {
850
842
  "kind": "field",
851
- "name": "date",
843
+ "name": "monthSelectNode",
852
844
  "type": {
853
- "text": "Date"
845
+ "text": "HTMLElement"
854
846
  },
855
- "default": "date"
856
- }
857
- ],
858
- "superclass": {
859
- "name": "NordEvent",
860
- "module": "/src/common/events.js"
861
- }
862
- }
863
- ],
864
- "exports": [
865
- {
866
- "kind": "js",
867
- "name": "DateSelectEvent",
868
- "declaration": {
869
- "name": "DateSelectEvent",
870
- "module": "src/calendar/DateSelectEvent.ts"
871
- }
872
- }
873
- ],
874
- "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
875
- },
876
- {
877
- "kind": "javascript-module",
878
- "path": "src/calendar/calendar-localization.ts",
879
- "declarations": [
880
- {
881
- "kind": "variable",
882
- "name": "localization",
883
- "type": {
884
- "text": "CalendarLocalizedText"
885
- },
886
- "default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n calendarHeading: \"Choose a date\",\n dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n monthNames: [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n locale: \"en-GB\",\n}"
887
- }
888
- ],
889
- "exports": [
890
- {
891
- "kind": "js",
892
- "name": "default",
893
- "declaration": {
894
- "name": "localization",
895
- "module": "src/calendar/calendar-localization.ts"
896
- }
897
- }
898
- ],
899
- "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
900
- },
901
- {
902
- "kind": "javascript-module",
903
- "path": "src/calendar/month-view.ts",
904
- "declarations": [
905
- {
906
- "kind": "function",
907
- "name": "dayView",
908
- "parameters": [
909
- {
910
- "name": "{\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}",
911
- "type": {
912
- "text": "DatePickerDayProps"
913
- }
914
- }
915
- ]
916
- },
917
- {
918
- "kind": "function",
919
- "name": "monthView",
920
- "parameters": [
847
+ "privacy": "private"
848
+ },
921
849
  {
922
- "name": "{\n onFocusIn,\n onFocusOut,\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n}",
850
+ "kind": "field",
851
+ "name": "focusedDayNode",
923
852
  "type": {
924
- "text": "MonthViewArgs"
925
- }
926
- }
927
- ]
928
- }
929
- ],
930
- "exports": [
931
- {
932
- "kind": "js",
933
- "name": "dayView",
934
- "declaration": {
935
- "name": "dayView",
936
- "module": "src/calendar/month-view.ts"
937
- }
938
- },
939
- {
940
- "kind": "js",
941
- "name": "monthView",
942
- "declaration": {
943
- "name": "monthView",
944
- "module": "src/calendar/month-view.ts"
945
- }
946
- }
947
- ],
948
- "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
949
- },
950
- {
951
- "kind": "javascript-module",
952
- "path": "src/button/Button.ts",
953
- "declarations": [
954
- {
955
- "kind": "class",
956
- "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
957
- "name": "Button",
958
- "slots": [
959
- {
960
- "description": "The button content",
961
- "name": ""
853
+ "text": "HTMLButtonElement"
854
+ },
855
+ "privacy": "private"
962
856
  },
963
857
  {
964
- "description": "Used to place content before button text. Typically used for icons.",
965
- "name": "before"
858
+ "kind": "field",
859
+ "name": "direction",
860
+ "privacy": "private",
861
+ "default": "new DirectionController(this)"
966
862
  },
967
863
  {
968
- "description": "Used to place content after button text. Typically used for icons.",
969
- "name": "after"
970
- }
971
- ],
972
- "members": [
864
+ "kind": "field",
865
+ "name": "swipe",
866
+ "privacy": "private",
867
+ "default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
868
+ },
973
869
  {
974
870
  "kind": "field",
975
- "name": "buttonRef",
871
+ "name": "shortcuts",
976
872
  "privacy": "private"
977
873
  },
978
874
  {
979
875
  "kind": "field",
980
- "name": "lightDom",
876
+ "name": "dateFormatShort",
877
+ "type": {
878
+ "text": "Intl.DateTimeFormat"
879
+ },
981
880
  "privacy": "private",
982
- "default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
881
+ "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
983
882
  },
984
883
  {
985
884
  "kind": "field",
986
- "name": "variant",
885
+ "name": "localization",
987
886
  "type": {
988
- "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
887
+ "text": "CalendarLocalizedText"
989
888
  },
990
- "default": "\"default\"",
991
- "description": "The style variant of the button.",
992
- "attribute": "variant",
993
- "reflects": true
889
+ "default": "localization"
994
890
  },
995
891
  {
996
892
  "kind": "field",
997
- "name": "type",
893
+ "name": "value",
998
894
  "type": {
999
- "text": "\"button\" | \"submit\" | \"reset\""
895
+ "text": "string"
1000
896
  },
1001
- "default": "\"submit\"",
1002
- "description": "The type of the button.",
1003
- "attribute": "type",
1004
- "reflects": true
897
+ "default": "\"\"",
898
+ "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
899
+ "attribute": "value"
1005
900
  },
1006
901
  {
1007
902
  "kind": "field",
1008
- "name": "size",
903
+ "name": "firstDayOfWeek",
1009
904
  "type": {
1010
- "text": "\"s\" | \"m\" | \"l\""
905
+ "text": "DaysOfWeek"
1011
906
  },
1012
- "default": "\"m\"",
1013
- "description": "The size of the button.\nThis affects font-size and padding.",
1014
- "attribute": "size",
1015
- "reflects": true
907
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
908
+ "attribute": "firstDayOfWeek"
1016
909
  },
1017
910
  {
1018
911
  "kind": "field",
1019
- "name": "href",
912
+ "name": "min",
1020
913
  "type": {
1021
- "text": "string | undefined"
914
+ "text": "string"
1022
915
  },
1023
- "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1024
- "attribute": "href",
1025
- "reflects": true
916
+ "default": "\"\"",
917
+ "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
918
+ "attribute": "min"
1026
919
  },
1027
920
  {
1028
921
  "kind": "field",
1029
- "name": "download",
922
+ "name": "max",
1030
923
  "type": {
1031
- "text": "boolean"
924
+ "text": "string"
1032
925
  },
1033
- "default": "false",
1034
- "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1035
- "attribute": "download"
926
+ "default": "\"\"",
927
+ "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
928
+ "attribute": "max"
1036
929
  },
1037
930
  {
1038
931
  "kind": "field",
1039
- "name": "target",
932
+ "name": "isDateDisabled",
1040
933
  "type": {
1041
- "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
934
+ "text": "DateDisabledPredicate"
1042
935
  },
1043
- "default": "\"_self\"",
1044
- "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
1045
- "attribute": "target",
1046
- "reflects": true
936
+ "default": "isDateDisabled",
937
+ "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
1047
938
  },
1048
939
  {
1049
940
  "kind": "field",
1050
- "name": "expand",
941
+ "name": "activeFocus",
1051
942
  "type": {
1052
943
  "text": "boolean"
1053
944
  },
1054
- "default": "false",
1055
- "description": "Controls whether the button expands to fill the width of its container.",
1056
- "attribute": "expand",
1057
- "reflects": true
945
+ "privacy": "private",
946
+ "default": "false"
1058
947
  },
1059
948
  {
1060
- "kind": "method",
1061
- "name": "renderLink",
949
+ "kind": "field",
950
+ "name": "focusedDay",
1062
951
  "privacy": "private",
1063
- "parameters": [
1064
- {
1065
- "name": "innards",
1066
- "type": {
1067
- "text": "TemplateResult"
1068
- }
1069
- }
1070
- ],
1071
- "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
952
+ "default": "new Date()"
1072
953
  },
1073
954
  {
1074
955
  "kind": "method",
1075
- "name": "renderButton",
1076
- "privacy": "private",
956
+ "name": "focus",
1077
957
  "parameters": [
1078
958
  {
1079
- "name": "innards",
959
+ "name": "options",
960
+ "optional": true,
1080
961
  "type": {
1081
- "text": "TemplateResult"
962
+ "text": "FocusOptions & { target: \"day\" | \"month\" }"
1082
963
  }
1083
964
  }
1084
965
  ]
1085
966
  },
1086
967
  {
1087
968
  "kind": "method",
1088
- "name": "renderLightDom",
969
+ "name": "createDateFormatter",
1089
970
  "privacy": "private"
1090
971
  },
1091
972
  {
1092
973
  "kind": "field",
1093
- "name": "handleOuterClick",
974
+ "name": "handleDaySelect",
1094
975
  "privacy": "private"
1095
976
  },
1096
977
  {
1097
978
  "kind": "method",
1098
- "name": "handleClick",
979
+ "name": "addDays",
1099
980
  "privacy": "private",
1100
981
  "parameters": [
1101
982
  {
1102
- "name": "e",
983
+ "name": "days",
1103
984
  "type": {
1104
- "text": "Event"
985
+ "text": "number"
1105
986
  }
1106
987
  }
1107
988
  ]
1108
989
  },
1109
990
  {
1110
- "kind": "field",
1111
- "name": "disabled",
1112
- "type": {
1113
- "text": "boolean"
1114
- },
1115
- "default": "false",
1116
- "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1117
- "attribute": "disabled",
1118
- "reflects": true,
1119
- "inheritedFrom": {
1120
- "name": "InputMixin",
1121
- "module": "src/common/mixins/InputMixin.ts"
1122
- }
1123
- },
1124
- {
1125
- "kind": "field",
1126
- "name": "name",
1127
- "type": {
1128
- "text": "string | undefined"
1129
- },
1130
- "description": "The name of the form component.",
1131
- "attribute": "name",
1132
- "inheritedFrom": {
1133
- "name": "InputMixin",
1134
- "module": "src/common/mixins/InputMixin.ts"
1135
- }
991
+ "kind": "method",
992
+ "name": "addMonths",
993
+ "privacy": "private",
994
+ "parameters": [
995
+ {
996
+ "name": "months",
997
+ "type": {
998
+ "text": "number"
999
+ }
1000
+ }
1001
+ ]
1136
1002
  },
1137
1003
  {
1138
- "kind": "field",
1139
- "name": "value",
1140
- "type": {
1141
- "text": "string"
1142
- },
1143
- "default": "\"\"",
1144
- "description": "The value of the form component.",
1145
- "attribute": "value",
1146
- "inheritedFrom": {
1147
- "name": "InputMixin",
1148
- "module": "src/common/mixins/InputMixin.ts"
1149
- }
1004
+ "kind": "method",
1005
+ "name": "addYears",
1006
+ "privacy": "private",
1007
+ "parameters": [
1008
+ {
1009
+ "name": "years",
1010
+ "type": {
1011
+ "text": "number"
1012
+ }
1013
+ }
1014
+ ]
1150
1015
  },
1151
1016
  {
1152
- "kind": "field",
1153
- "name": "form",
1154
- "privacy": "protected",
1155
- "description": "Gets the form, if any, associated with the form element.",
1156
- "inheritedFrom": {
1157
- "name": "InputMixin",
1158
- "module": "src/common/mixins/InputMixin.ts"
1159
- }
1017
+ "kind": "method",
1018
+ "name": "startOfWeek",
1019
+ "privacy": "private"
1160
1020
  },
1161
1021
  {
1162
- "kind": "field",
1163
- "name": "focusableRef",
1164
- "privacy": "protected",
1165
- "inheritedFrom": {
1166
- "name": "FocusableMixin",
1167
- "module": "src/common/mixins/FocusableMixin.ts"
1168
- }
1022
+ "kind": "method",
1023
+ "name": "endOfWeek",
1024
+ "privacy": "private"
1169
1025
  },
1170
1026
  {
1171
1027
  "kind": "method",
1172
- "name": "focus",
1028
+ "name": "setMonth",
1029
+ "privacy": "private",
1173
1030
  "parameters": [
1174
1031
  {
1175
- "name": "options",
1176
- "optional": true,
1032
+ "name": "month",
1177
1033
  "type": {
1178
- "text": "FocusOptions"
1179
- },
1180
- "description": "An object which controls aspects of the focusing process."
1034
+ "text": "number"
1035
+ }
1181
1036
  }
1182
- ],
1183
- "description": "Programmatically move focus to the component.",
1184
- "inheritedFrom": {
1185
- "name": "FocusableMixin",
1186
- "module": "src/common/mixins/FocusableMixin.ts"
1187
- }
1037
+ ]
1188
1038
  },
1189
1039
  {
1190
1040
  "kind": "method",
1191
- "name": "blur",
1192
- "description": "Programmatically remove focus from the component.",
1193
- "inheritedFrom": {
1194
- "name": "FocusableMixin",
1195
- "module": "src/common/mixins/FocusableMixin.ts"
1196
- }
1041
+ "name": "setYear",
1042
+ "privacy": "private",
1043
+ "parameters": [
1044
+ {
1045
+ "name": "year",
1046
+ "type": {
1047
+ "text": "number"
1048
+ }
1049
+ }
1050
+ ]
1197
1051
  },
1198
1052
  {
1199
1053
  "kind": "method",
1200
- "name": "click",
1201
- "description": "Programmatically simulates a click on the component.",
1202
- "inheritedFrom": {
1203
- "name": "FocusableMixin",
1204
- "module": "src/common/mixins/FocusableMixin.ts"
1205
- }
1206
- }
1207
- ],
1208
- "attributes": [
1209
- {
1210
- "name": "variant",
1211
- "type": {
1212
- "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
1213
- },
1214
- "default": "\"default\"",
1215
- "description": "The style variant of the button.",
1216
- "fieldName": "variant"
1054
+ "name": "setFocusedDay",
1055
+ "privacy": "private",
1056
+ "parameters": [
1057
+ {
1058
+ "name": "day",
1059
+ "type": {
1060
+ "text": "Date"
1061
+ }
1062
+ }
1063
+ ]
1217
1064
  },
1218
1065
  {
1219
- "name": "type",
1220
- "type": {
1221
- "text": "\"button\" | \"submit\" | \"reset\""
1222
- },
1223
- "default": "\"submit\"",
1224
- "description": "The type of the button.",
1225
- "fieldName": "type"
1066
+ "kind": "field",
1067
+ "name": "handleMonthSelect",
1068
+ "privacy": "private"
1226
1069
  },
1227
1070
  {
1228
- "name": "size",
1229
- "type": {
1230
- "text": "\"s\" | \"m\" | \"l\""
1231
- },
1232
- "default": "\"m\"",
1233
- "description": "The size of the button.\nThis affects font-size and padding.",
1234
- "fieldName": "size"
1071
+ "kind": "field",
1072
+ "name": "handleYearSelect",
1073
+ "privacy": "private"
1235
1074
  },
1236
1075
  {
1237
- "name": "href",
1238
- "type": {
1239
- "text": "string | undefined"
1240
- },
1241
- "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1242
- "fieldName": "href"
1076
+ "kind": "field",
1077
+ "name": "handleNextMonthClick",
1078
+ "privacy": "private"
1243
1079
  },
1244
1080
  {
1245
- "name": "download",
1246
- "type": {
1247
- "text": "boolean"
1248
- },
1249
- "default": "false",
1250
- "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1251
- "fieldName": "download"
1081
+ "kind": "field",
1082
+ "name": "handlePreviousMonthClick",
1083
+ "privacy": "private"
1252
1084
  },
1253
1085
  {
1254
- "name": "target",
1255
- "type": {
1256
- "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1257
- },
1258
- "default": "\"_self\"",
1259
- "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
1260
- "fieldName": "target"
1086
+ "kind": "field",
1087
+ "name": "enableActiveFocus",
1088
+ "privacy": "private"
1261
1089
  },
1262
1090
  {
1263
- "name": "expand",
1091
+ "kind": "field",
1092
+ "name": "disableActiveFocus",
1093
+ "privacy": "private"
1094
+ }
1095
+ ],
1096
+ "attributes": [
1097
+ {
1098
+ "name": "value",
1264
1099
  "type": {
1265
- "text": "boolean"
1100
+ "text": "string"
1266
1101
  },
1267
- "default": "false",
1268
- "description": "Controls whether the button expands to fill the width of its container.",
1269
- "fieldName": "expand"
1102
+ "default": "\"\"",
1103
+ "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1104
+ "fieldName": "value"
1270
1105
  },
1271
1106
  {
1272
- "name": "disabled",
1107
+ "name": "firstDayOfWeek",
1273
1108
  "type": {
1274
- "text": "boolean"
1109
+ "text": "DaysOfWeek"
1275
1110
  },
1276
- "default": "false",
1277
- "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1278
- "fieldName": "disabled",
1279
- "inheritedFrom": {
1280
- "name": "InputMixin",
1281
- "module": "src/common/mixins/InputMixin.ts"
1282
- }
1111
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1112
+ "fieldName": "firstDayOfWeek"
1283
1113
  },
1284
1114
  {
1285
- "name": "name",
1115
+ "name": "min",
1286
1116
  "type": {
1287
- "text": "string | undefined"
1117
+ "text": "string"
1288
1118
  },
1289
- "description": "The name of the form component.",
1290
- "fieldName": "name",
1291
- "inheritedFrom": {
1292
- "name": "InputMixin",
1293
- "module": "src/common/mixins/InputMixin.ts"
1294
- }
1119
+ "default": "\"\"",
1120
+ "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
1121
+ "fieldName": "min"
1295
1122
  },
1296
1123
  {
1297
- "name": "value",
1124
+ "name": "max",
1298
1125
  "type": {
1299
1126
  "text": "string"
1300
1127
  },
1301
1128
  "default": "\"\"",
1302
- "description": "The value of the form component.",
1303
- "fieldName": "value",
1304
- "inheritedFrom": {
1305
- "name": "InputMixin",
1306
- "module": "src/common/mixins/InputMixin.ts"
1307
- }
1308
- }
1309
- ],
1310
- "mixins": [
1311
- {
1312
- "name": "InputMixin",
1313
- "module": "/src/common/mixins/InputMixin.js"
1314
- },
1315
- {
1316
- "name": "FocusableMixin",
1317
- "module": "/src/common/mixins/FocusableMixin.js"
1129
+ "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
1130
+ "fieldName": "max"
1318
1131
  }
1319
1132
  ],
1320
1133
  "superclass": {
@@ -1322,8 +1135,8 @@
1322
1135
  "package": "lit"
1323
1136
  },
1324
1137
  "status": "ready",
1325
- "category": "action",
1326
- "tagName": "nord-button",
1138
+ "category": "list",
1139
+ "tagName": "nord-calendar",
1327
1140
  "customElement": true
1328
1141
  }
1329
1142
  ],
@@ -1332,86 +1145,185 @@
1332
1145
  "kind": "js",
1333
1146
  "name": "default",
1334
1147
  "declaration": {
1335
- "name": "Button",
1336
- "module": "src/button/Button.ts"
1148
+ "name": "Calendar",
1149
+ "module": "src/calendar/Calendar.ts"
1337
1150
  }
1338
1151
  },
1339
1152
  {
1340
1153
  "kind": "custom-element-definition",
1341
- "name": "nord-button",
1154
+ "name": "nord-calendar",
1342
1155
  "declaration": {
1343
- "name": "Button",
1344
- "module": "src/button/Button.ts"
1156
+ "name": "Calendar",
1157
+ "module": "src/calendar/Calendar.ts"
1345
1158
  }
1346
1159
  }
1347
1160
  ],
1348
- "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 clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\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` | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element. |\n| `primary` | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action. |\n| `dashed` | Dashed style should be used for actions that trigger filtering. |\n| `danger` | Danger style should be used for actions that delete data or otherwise make it hard to undo the action. |\n| `plain` | Used for less important or less common actions. Can be also used for linking to other pages. |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
1161
+ "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
1349
1162
  },
1350
1163
  {
1351
1164
  "kind": "javascript-module",
1352
- "path": "src/card/Card.ts",
1165
+ "path": "src/calendar/DateSelectEvent.ts",
1353
1166
  "declarations": [
1354
1167
  {
1355
1168
  "kind": "class",
1356
- "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.",
1357
- "name": "Card",
1358
- "slots": [
1359
- {
1360
- "description": "The card content.",
1361
- "name": ""
1362
- },
1169
+ "description": "",
1170
+ "name": "DateSelectEvent",
1171
+ "members": [
1363
1172
  {
1364
- "description": "Optional slot that holds a header for the card.",
1365
- "name": "header"
1173
+ "kind": "field",
1174
+ "name": "eventName",
1175
+ "type": {
1176
+ "text": "string"
1177
+ },
1178
+ "static": true,
1179
+ "default": "\"nord-select\""
1366
1180
  },
1367
1181
  {
1368
- "description": "Optional slot that holds footer content for the card.",
1369
- "name": "footer"
1182
+ "kind": "field",
1183
+ "name": "date",
1184
+ "type": {
1185
+ "text": "Date"
1186
+ },
1187
+ "default": "date"
1370
1188
  }
1371
1189
  ],
1372
- "members": [
1190
+ "superclass": {
1191
+ "name": "NordEvent",
1192
+ "module": "/src/common/events.js"
1193
+ }
1194
+ }
1195
+ ],
1196
+ "exports": [
1197
+ {
1198
+ "kind": "js",
1199
+ "name": "DateSelectEvent",
1200
+ "declaration": {
1201
+ "name": "DateSelectEvent",
1202
+ "module": "src/calendar/DateSelectEvent.ts"
1203
+ }
1204
+ }
1205
+ ],
1206
+ "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
1207
+ },
1208
+ {
1209
+ "kind": "javascript-module",
1210
+ "path": "src/calendar/calendar-localization.ts",
1211
+ "declarations": [
1212
+ {
1213
+ "kind": "variable",
1214
+ "name": "localization",
1215
+ "type": {
1216
+ "text": "CalendarLocalizedText"
1217
+ },
1218
+ "default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n calendarHeading: \"Choose a date\",\n dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n monthNames: [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n locale: \"en-GB\",\n}"
1219
+ }
1220
+ ],
1221
+ "exports": [
1222
+ {
1223
+ "kind": "js",
1224
+ "name": "default",
1225
+ "declaration": {
1226
+ "name": "localization",
1227
+ "module": "src/calendar/calendar-localization.ts"
1228
+ }
1229
+ }
1230
+ ],
1231
+ "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
1232
+ },
1233
+ {
1234
+ "kind": "javascript-module",
1235
+ "path": "src/calendar/month-view.ts",
1236
+ "declarations": [
1237
+ {
1238
+ "kind": "function",
1239
+ "name": "dayView",
1240
+ "parameters": [
1373
1241
  {
1374
- "kind": "field",
1375
- "name": "headerSlot",
1376
- "privacy": "private",
1377
- "default": "new SlotController(this, \"header\")"
1378
- },
1242
+ "name": "{\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}",
1243
+ "type": {
1244
+ "text": "DatePickerDayProps"
1245
+ }
1246
+ }
1247
+ ]
1248
+ },
1249
+ {
1250
+ "kind": "function",
1251
+ "name": "monthView",
1252
+ "parameters": [
1379
1253
  {
1380
- "kind": "field",
1381
- "name": "footerSlot",
1382
- "privacy": "private",
1383
- "default": "new SlotController(this, \"footer\")"
1384
- },
1254
+ "name": "{\n onFocusIn,\n onFocusOut,\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n}",
1255
+ "type": {
1256
+ "text": "MonthViewArgs"
1257
+ }
1258
+ }
1259
+ ]
1260
+ }
1261
+ ],
1262
+ "exports": [
1263
+ {
1264
+ "kind": "js",
1265
+ "name": "dayView",
1266
+ "declaration": {
1267
+ "name": "dayView",
1268
+ "module": "src/calendar/month-view.ts"
1269
+ }
1270
+ },
1271
+ {
1272
+ "kind": "js",
1273
+ "name": "monthView",
1274
+ "declaration": {
1275
+ "name": "monthView",
1276
+ "module": "src/calendar/month-view.ts"
1277
+ }
1278
+ }
1279
+ ],
1280
+ "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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
1281
+ },
1282
+ {
1283
+ "kind": "javascript-module",
1284
+ "path": "src/banner/Banner.ts",
1285
+ "declarations": [
1286
+ {
1287
+ "kind": "class",
1288
+ "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.",
1289
+ "name": "Banner",
1290
+ "slots": [
1291
+ {
1292
+ "description": "default slot",
1293
+ "name": ""
1294
+ }
1295
+ ],
1296
+ "members": [
1385
1297
  {
1386
1298
  "kind": "field",
1387
- "name": "padding",
1299
+ "name": "variant",
1388
1300
  "type": {
1389
- "text": "\"m\" | \"l\" | \"none\""
1301
+ "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
1390
1302
  },
1391
- "default": "\"m\"",
1392
- "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
1393
- "attribute": "padding",
1303
+ "default": "\"info\"",
1304
+ "description": "The style variant of the banner.",
1305
+ "attribute": "variant",
1394
1306
  "reflects": true
1395
1307
  }
1396
1308
  ],
1397
1309
  "attributes": [
1398
1310
  {
1399
- "name": "padding",
1311
+ "name": "variant",
1400
1312
  "type": {
1401
- "text": "\"m\" | \"l\" | \"none\""
1313
+ "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
1402
1314
  },
1403
- "default": "\"m\"",
1404
- "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
1405
- "fieldName": "padding"
1315
+ "default": "\"info\"",
1316
+ "description": "The style variant of the banner.",
1317
+ "fieldName": "variant"
1406
1318
  }
1407
1319
  ],
1408
1320
  "superclass": {
1409
1321
  "name": "LitElement",
1410
1322
  "package": "lit"
1411
- },
1412
- "status": "ready",
1413
- "category": "structure",
1414
- "tagName": "nord-card",
1323
+ },
1324
+ "status": "new",
1325
+ "category": "feedback",
1326
+ "tagName": "nord-banner",
1415
1327
  "customElement": true
1416
1328
  }
1417
1329
  ],
@@ -1420,20 +1332,20 @@
1420
1332
  "kind": "js",
1421
1333
  "name": "default",
1422
1334
  "declaration": {
1423
- "name": "Card",
1424
- "module": "src/card/Card.ts"
1335
+ "name": "Banner",
1336
+ "module": "src/banner/Banner.ts"
1425
1337
  }
1426
1338
  },
1427
1339
  {
1428
1340
  "kind": "custom-element-definition",
1429
- "name": "nord-card",
1341
+ "name": "nord-banner",
1430
1342
  "declaration": {
1431
- "name": "Card",
1432
- "module": "src/card/Card.ts"
1343
+ "name": "Banner",
1344
+ "module": "src/banner/Banner.ts"
1433
1345
  }
1434
1346
  }
1435
1347
  ],
1436
- "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\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\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"
1348
+ "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"
1437
1349
  },
1438
1350
  {
1439
1351
  "kind": "javascript-module",
@@ -2049,6 +1961,94 @@
2049
1961
  ],
2050
1962
  "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 making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox 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\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
2051
1963
  },
1964
+ {
1965
+ "kind": "javascript-module",
1966
+ "path": "src/card/Card.ts",
1967
+ "declarations": [
1968
+ {
1969
+ "kind": "class",
1970
+ "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.",
1971
+ "name": "Card",
1972
+ "slots": [
1973
+ {
1974
+ "description": "The card content.",
1975
+ "name": ""
1976
+ },
1977
+ {
1978
+ "description": "Optional slot that holds a header for the card.",
1979
+ "name": "header"
1980
+ },
1981
+ {
1982
+ "description": "Optional slot that holds footer content for the card.",
1983
+ "name": "footer"
1984
+ }
1985
+ ],
1986
+ "members": [
1987
+ {
1988
+ "kind": "field",
1989
+ "name": "headerSlot",
1990
+ "privacy": "private",
1991
+ "default": "new SlotController(this, \"header\")"
1992
+ },
1993
+ {
1994
+ "kind": "field",
1995
+ "name": "footerSlot",
1996
+ "privacy": "private",
1997
+ "default": "new SlotController(this, \"footer\")"
1998
+ },
1999
+ {
2000
+ "kind": "field",
2001
+ "name": "padding",
2002
+ "type": {
2003
+ "text": "\"m\" | \"l\" | \"none\""
2004
+ },
2005
+ "default": "\"m\"",
2006
+ "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
2007
+ "attribute": "padding",
2008
+ "reflects": true
2009
+ }
2010
+ ],
2011
+ "attributes": [
2012
+ {
2013
+ "name": "padding",
2014
+ "type": {
2015
+ "text": "\"m\" | \"l\" | \"none\""
2016
+ },
2017
+ "default": "\"m\"",
2018
+ "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
2019
+ "fieldName": "padding"
2020
+ }
2021
+ ],
2022
+ "superclass": {
2023
+ "name": "LitElement",
2024
+ "package": "lit"
2025
+ },
2026
+ "status": "ready",
2027
+ "category": "structure",
2028
+ "tagName": "nord-card",
2029
+ "customElement": true
2030
+ }
2031
+ ],
2032
+ "exports": [
2033
+ {
2034
+ "kind": "js",
2035
+ "name": "default",
2036
+ "declaration": {
2037
+ "name": "Card",
2038
+ "module": "src/card/Card.ts"
2039
+ }
2040
+ },
2041
+ {
2042
+ "kind": "custom-element-definition",
2043
+ "name": "nord-card",
2044
+ "declaration": {
2045
+ "name": "Card",
2046
+ "module": "src/card/Card.ts"
2047
+ }
2048
+ }
2049
+ ],
2050
+ "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\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\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"
2051
+ },
2052
2052
  {
2053
2053
  "kind": "javascript-module",
2054
2054
  "path": "src/command-menu/CommandMenu.ts",
@@ -4660,82 +4660,6 @@
4660
4660
  ],
4661
4661
  "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 fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset 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\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\n"
4662
4662
  },
4663
- {
4664
- "kind": "javascript-module",
4665
- "path": "src/header/Header.ts",
4666
- "declarations": [
4667
- {
4668
- "kind": "class",
4669
- "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
4670
- "name": "Header",
4671
- "slots": [
4672
- {
4673
- "description": "The header content.",
4674
- "name": ""
4675
- },
4676
- {
4677
- "description": "Optional slot for buttons, toggles, etc.",
4678
- "name": "action"
4679
- }
4680
- ],
4681
- "members": [
4682
- {
4683
- "kind": "field",
4684
- "name": "actionSlot",
4685
- "privacy": "private",
4686
- "default": "new SlotController(this, \"action\")"
4687
- },
4688
- {
4689
- "kind": "field",
4690
- "name": "_warningLogged",
4691
- "type": {
4692
- "text": "boolean"
4693
- },
4694
- "privacy": "private",
4695
- "static": true,
4696
- "default": "false",
4697
- "inheritedFrom": {
4698
- "name": "DraftComponentMixin",
4699
- "module": "src/common/mixins/DraftComponentMixin.ts"
4700
- }
4701
- }
4702
- ],
4703
- "mixins": [
4704
- {
4705
- "name": "DraftComponentMixin",
4706
- "module": "/src/common/mixins/DraftComponentMixin.js"
4707
- }
4708
- ],
4709
- "superclass": {
4710
- "name": "LitElement",
4711
- "package": "lit"
4712
- },
4713
- "status": "draft",
4714
- "category": "structure",
4715
- "tagName": "nord-header",
4716
- "customElement": true
4717
- }
4718
- ],
4719
- "exports": [
4720
- {
4721
- "kind": "js",
4722
- "name": "default",
4723
- "declaration": {
4724
- "name": "Header",
4725
- "module": "src/header/Header.ts"
4726
- }
4727
- },
4728
- {
4729
- "kind": "custom-element-definition",
4730
- "name": "nord-header",
4731
- "declaration": {
4732
- "name": "Header",
4733
- "module": "src/header/Header.ts"
4734
- }
4735
- }
4736
- ],
4737
- "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 header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
4738
- },
4739
4663
  {
4740
4664
  "kind": "javascript-module",
4741
4665
  "path": "src/icon/Icon.ts",
@@ -4971,6 +4895,82 @@
4971
4895
  ],
4972
4896
  "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 provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n"
4973
4897
  },
4898
+ {
4899
+ "kind": "javascript-module",
4900
+ "path": "src/header/Header.ts",
4901
+ "declarations": [
4902
+ {
4903
+ "kind": "class",
4904
+ "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
4905
+ "name": "Header",
4906
+ "slots": [
4907
+ {
4908
+ "description": "The header content.",
4909
+ "name": ""
4910
+ },
4911
+ {
4912
+ "description": "Optional slot for buttons, toggles, etc.",
4913
+ "name": "action"
4914
+ }
4915
+ ],
4916
+ "members": [
4917
+ {
4918
+ "kind": "field",
4919
+ "name": "actionSlot",
4920
+ "privacy": "private",
4921
+ "default": "new SlotController(this, \"action\")"
4922
+ },
4923
+ {
4924
+ "kind": "field",
4925
+ "name": "_warningLogged",
4926
+ "type": {
4927
+ "text": "boolean"
4928
+ },
4929
+ "privacy": "private",
4930
+ "static": true,
4931
+ "default": "false",
4932
+ "inheritedFrom": {
4933
+ "name": "DraftComponentMixin",
4934
+ "module": "src/common/mixins/DraftComponentMixin.ts"
4935
+ }
4936
+ }
4937
+ ],
4938
+ "mixins": [
4939
+ {
4940
+ "name": "DraftComponentMixin",
4941
+ "module": "/src/common/mixins/DraftComponentMixin.js"
4942
+ }
4943
+ ],
4944
+ "superclass": {
4945
+ "name": "LitElement",
4946
+ "package": "lit"
4947
+ },
4948
+ "status": "draft",
4949
+ "category": "structure",
4950
+ "tagName": "nord-header",
4951
+ "customElement": true
4952
+ }
4953
+ ],
4954
+ "exports": [
4955
+ {
4956
+ "kind": "js",
4957
+ "name": "default",
4958
+ "declaration": {
4959
+ "name": "Header",
4960
+ "module": "src/header/Header.ts"
4961
+ }
4962
+ },
4963
+ {
4964
+ "kind": "custom-element-definition",
4965
+ "name": "nord-header",
4966
+ "declaration": {
4967
+ "name": "Header",
4968
+ "module": "src/header/Header.ts"
4969
+ }
4970
+ }
4971
+ ],
4972
+ "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 header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
4973
+ },
4974
4974
  {
4975
4975
  "kind": "javascript-module",
4976
4976
  "path": "src/input/Input.ts",