@nordhealth/components 2.6.0 → 2.6.1

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 (3) hide show
  1. package/custom-elements.json +753 -753
  2. package/lib/src/drawer/Drawer.test.d.ts +1 -0
  3. package/package.json +3 -3
package/custom-elements.json CHANGED
@@ -521,152 +521,157 @@
521
521
  },
522
522
  {
523
523
  "kind": "javascript-module",
524
- "path": "src/calendar/Calendar.ts",
524
+ "path": "src/button/Button.ts",
525
525
  "declarations": [
526
526
  {
527
527
  "kind": "class",
528
- "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.",
529
- "name": "Calendar",
528
+ "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.",
529
+ "name": "Button",
530
530
  "cssProperties": [
531
531
  {
532
- "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
533
- "name": "--n-calendar-border-radius",
534
- "default": "var(--n-border-radius)"
532
+ "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
533
+ "name": "--n-button-border-radius",
534
+ "default": "var(--n-border-radius-s)"
535
535
  },
536
536
  {
537
- "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
538
- "name": "--n-calendar-box-shadow",
539
- "default": "var(--n-box-shadow-popout)"
540
- }
541
- ],
542
- "members": [
537
+ "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
538
+ "name": "--n-button-gap",
539
+ "default": "var(--n-space-s)"
540
+ },
543
541
  {
544
- "kind": "field",
545
- "name": "dialogLabelId",
546
- "type": {
547
- "text": "string"
548
- },
549
- "privacy": "private",
550
- "default": "\"dialog-header\""
542
+ "description": "Controls the overlayed gradient background on the button.",
543
+ "name": "--n-button-gradient",
544
+ "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
551
545
  },
552
546
  {
553
- "kind": "field",
554
- "name": "monthSelectNode",
555
- "type": {
556
- "text": "HTMLElement"
557
- },
558
- "privacy": "private"
547
+ "description": "Controls the background color of the button, using [color tokens](/tokens/#color).",
548
+ "name": "--n-button-background-color",
549
+ "default": "var(--n-color-button)"
559
550
  },
560
551
  {
561
- "kind": "field",
562
- "name": "focusedDayNode",
563
- "type": {
564
- "text": "HTMLButtonElement"
565
- },
566
- "privacy": "private"
552
+ "description": "Controls the border color of the button, using [color tokens](/tokens/#color).",
553
+ "name": "--n-button-border-color",
554
+ "default": "var(--n-color-border-strong)"
567
555
  },
568
556
  {
569
- "kind": "field",
570
- "name": "direction",
571
- "privacy": "private",
572
- "default": "new DirectionController(this)"
557
+ "description": "Controls the text alignment for the text in the button.",
558
+ "name": "--n-button-text-align",
559
+ "default": "center"
560
+ }
561
+ ],
562
+ "slots": [
563
+ {
564
+ "description": "The button content",
565
+ "name": ""
573
566
  },
574
567
  {
575
- "kind": "field",
576
- "name": "swipe",
577
- "privacy": "private",
578
- "default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
568
+ "description": "Used to place content at the start of button text. Typically used for icons.",
569
+ "name": "start"
579
570
  },
571
+ {
572
+ "description": "Used to place content at the end of button text. Typically used for icons.",
573
+ "name": "end"
574
+ }
575
+ ],
576
+ "members": [
580
577
  {
581
578
  "kind": "field",
582
- "name": "shortcuts",
579
+ "name": "buttonRef",
583
580
  "privacy": "private"
584
581
  },
585
582
  {
586
583
  "kind": "field",
587
- "name": "localize",
584
+ "name": "events",
588
585
  "privacy": "private",
589
- "default": "new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })"
586
+ "default": "new EventController(this)"
590
587
  },
591
588
  {
592
589
  "kind": "field",
593
- "name": "dateFormatShort",
594
- "type": {
595
- "text": "Intl.DateTimeFormat"
596
- },
590
+ "name": "lightDom",
597
591
  "privacy": "private",
598
- "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"
592
+ "default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
599
593
  },
600
594
  {
601
595
  "kind": "field",
602
- "name": "monthNames",
596
+ "name": "variant",
603
597
  "type": {
604
- "text": "string[]"
598
+ "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
605
599
  },
606
- "privacy": "private"
600
+ "default": "\"default\"",
601
+ "description": "The style variant of the button.",
602
+ "attribute": "variant",
603
+ "reflects": true
607
604
  },
608
605
  {
609
606
  "kind": "field",
610
- "name": "monthNamesShort",
607
+ "name": "type",
611
608
  "type": {
612
- "text": "string[]"
609
+ "text": "\"button\" | \"submit\" | \"reset\""
613
610
  },
614
- "privacy": "private"
611
+ "default": "\"submit\"",
612
+ "description": "The type of the button.",
613
+ "attribute": "type",
614
+ "reflects": true
615
615
  },
616
616
  {
617
617
  "kind": "field",
618
- "name": "dayNames",
618
+ "name": "size",
619
619
  "type": {
620
- "text": "string[]"
620
+ "text": "\"s\" | \"m\" | \"l\""
621
621
  },
622
- "privacy": "private"
622
+ "default": "\"m\"",
623
+ "description": "The size of the button.\nThis affects font-size and padding.",
624
+ "attribute": "size",
625
+ "reflects": true
623
626
  },
624
627
  {
625
628
  "kind": "field",
626
- "name": "dayNamesShort",
629
+ "name": "accessibleExpanded",
627
630
  "type": {
628
- "text": "string[]"
631
+ "text": "\"true\" | \"false\" | undefined"
629
632
  },
630
- "privacy": "private"
633
+ "privacy": "private",
634
+ "attribute": "aria-expanded"
631
635
  },
632
636
  {
633
637
  "kind": "field",
634
- "name": "value",
638
+ "name": "accessibleHasPopup",
635
639
  "type": {
636
- "text": "string"
640
+ "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
637
641
  },
638
- "default": "\"\"",
639
- "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
640
- "attribute": "value"
642
+ "privacy": "private",
643
+ "attribute": "aria-haspopup"
641
644
  },
642
645
  {
643
646
  "kind": "field",
644
- "name": "firstDayOfWeek",
647
+ "name": "href",
645
648
  "type": {
646
- "text": "DaysOfWeek"
649
+ "text": "string | undefined"
647
650
  },
648
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
649
- "attribute": "firstDayOfWeek"
651
+ "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
652
+ "attribute": "href",
653
+ "reflects": true
650
654
  },
651
655
  {
652
656
  "kind": "field",
653
- "name": "min",
657
+ "name": "download",
654
658
  "type": {
655
- "text": "string"
659
+ "text": "boolean"
656
660
  },
657
- "default": "\"\"",
658
- "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.",
659
- "attribute": "min"
661
+ "default": "false",
662
+ "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
663
+ "attribute": "download"
660
664
  },
661
665
  {
662
666
  "kind": "field",
663
- "name": "max",
667
+ "name": "target",
664
668
  "type": {
665
- "text": "string"
669
+ "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
666
670
  },
667
- "default": "\"\"",
668
- "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.",
669
- "attribute": "max"
671
+ "default": "\"_self\"",
672
+ "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.",
673
+ "attribute": "target",
674
+ "reflects": true
670
675
  },
671
676
  {
672
677
  "kind": "field",
@@ -675,248 +680,316 @@
675
680
  "text": "boolean"
676
681
  },
677
682
  "default": "false",
678
- "description": "Controls whether the calendar expands to fill the width of its container.",
683
+ "description": "Controls whether the button expands to fill the width of its container.",
679
684
  "attribute": "expand",
680
685
  "reflects": true
681
686
  },
682
687
  {
683
688
  "kind": "field",
684
- "name": "isDateDisabled",
685
- "type": {
686
- "text": "DateDisabledPredicate"
687
- },
688
- "default": "isDateDisabled",
689
- "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
690
- },
691
- {
692
- "kind": "field",
693
- "name": "activeFocus",
689
+ "name": "loading",
694
690
  "type": {
695
691
  "text": "boolean"
696
692
  },
697
- "privacy": "private",
698
- "default": "false"
699
- },
700
- {
701
- "kind": "field",
702
- "name": "focusedDay",
703
- "privacy": "private",
704
- "default": "new Date()"
693
+ "default": "false",
694
+ "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
695
+ "attribute": "loading",
696
+ "reflects": true
705
697
  },
706
698
  {
707
699
  "kind": "method",
708
- "name": "focus",
700
+ "name": "renderLink",
701
+ "privacy": "private",
709
702
  "parameters": [
710
703
  {
711
- "name": "options",
712
- "optional": true,
704
+ "name": "innards",
713
705
  "type": {
714
- "text": "FocusOptions & { target: \"day\" | \"month\" }"
715
- },
716
- "description": "An object which controls aspects of the focusing process."
706
+ "text": "TemplateResult"
707
+ }
717
708
  }
718
709
  ],
719
- "description": "Programmatically move focus to the calendar."
720
- },
721
- {
722
- "kind": "method",
723
- "name": "handleValueChange",
724
- "privacy": "protected"
710
+ "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."
725
711
  },
726
712
  {
727
713
  "kind": "method",
728
- "name": "handleFocusedDayChange",
729
- "privacy": "protected"
714
+ "name": "renderButton",
715
+ "privacy": "private",
716
+ "parameters": [
717
+ {
718
+ "name": "innards",
719
+ "type": {
720
+ "text": "TemplateResult"
721
+ }
722
+ }
723
+ ]
730
724
  },
731
725
  {
732
726
  "kind": "method",
733
- "name": "handleLangChange",
727
+ "name": "renderLightDom",
734
728
  "privacy": "private"
735
729
  },
736
730
  {
737
731
  "kind": "field",
738
- "name": "handleDaySelect",
732
+ "name": "handleOuterClick",
739
733
  "privacy": "private"
740
734
  },
741
735
  {
742
736
  "kind": "method",
743
- "name": "addDays",
744
- "privacy": "private",
745
- "parameters": [
746
- {
747
- "name": "days",
748
- "type": {
749
- "text": "number"
750
- }
751
- }
752
- ]
753
- },
754
- {
755
- "kind": "method",
756
- "name": "addMonths",
737
+ "name": "handleClick",
757
738
  "privacy": "private",
758
739
  "parameters": [
759
740
  {
760
- "name": "months",
741
+ "name": "e",
761
742
  "type": {
762
- "text": "number"
743
+ "text": "Event"
763
744
  }
764
745
  }
765
746
  ]
766
747
  },
767
748
  {
768
749
  "kind": "method",
769
- "name": "addYears",
750
+ "name": "handleProxyChange",
770
751
  "privacy": "private",
771
752
  "parameters": [
772
753
  {
773
- "name": "years",
754
+ "name": "e",
774
755
  "type": {
775
- "text": "number"
756
+ "text": "Event"
776
757
  }
777
758
  }
778
- ]
779
- },
780
- {
781
- "kind": "method",
782
- "name": "startOfWeek",
783
- "privacy": "private"
759
+ ],
760
+ "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in."
784
761
  },
785
762
  {
786
- "kind": "method",
787
- "name": "endOfWeek",
788
- "privacy": "private"
763
+ "kind": "field",
764
+ "name": "disabled",
765
+ "type": {
766
+ "text": "boolean"
767
+ },
768
+ "default": "false",
769
+ "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
770
+ "attribute": "disabled",
771
+ "reflects": true,
772
+ "inheritedFrom": {
773
+ "name": "InputMixin",
774
+ "module": "src/common/mixins/InputMixin.ts"
775
+ }
776
+ },
777
+ {
778
+ "kind": "field",
779
+ "name": "name",
780
+ "type": {
781
+ "text": "string | undefined"
782
+ },
783
+ "description": "The name of the form component.",
784
+ "attribute": "name",
785
+ "inheritedFrom": {
786
+ "name": "InputMixin",
787
+ "module": "src/common/mixins/InputMixin.ts"
788
+ }
789
+ },
790
+ {
791
+ "kind": "field",
792
+ "name": "value",
793
+ "type": {
794
+ "text": "string"
795
+ },
796
+ "default": "\"\"",
797
+ "description": "The value of the form component.",
798
+ "attribute": "value",
799
+ "inheritedFrom": {
800
+ "name": "InputMixin",
801
+ "module": "src/common/mixins/InputMixin.ts"
802
+ }
803
+ },
804
+ {
805
+ "kind": "field",
806
+ "name": "form",
807
+ "description": "Gets the form, if any, associated with the form element.",
808
+ "inheritedFrom": {
809
+ "name": "InputMixin",
810
+ "module": "src/common/mixins/InputMixin.ts"
811
+ }
812
+ },
813
+ {
814
+ "kind": "field",
815
+ "name": "focusableRef",
816
+ "privacy": "protected",
817
+ "inheritedFrom": {
818
+ "name": "FocusableMixin",
819
+ "module": "src/common/mixins/FocusableMixin.ts"
820
+ }
789
821
  },
790
822
  {
791
823
  "kind": "method",
792
- "name": "setMonth",
793
- "privacy": "private",
824
+ "name": "focus",
794
825
  "parameters": [
795
826
  {
796
- "name": "month",
827
+ "name": "options",
828
+ "optional": true,
797
829
  "type": {
798
- "text": "number"
799
- }
830
+ "text": "FocusOptions"
831
+ },
832
+ "description": "An object which controls aspects of the focusing process."
800
833
  }
801
- ]
834
+ ],
835
+ "description": "Programmatically move focus to the component.",
836
+ "inheritedFrom": {
837
+ "name": "FocusableMixin",
838
+ "module": "src/common/mixins/FocusableMixin.ts"
839
+ }
802
840
  },
803
841
  {
804
842
  "kind": "method",
805
- "name": "setYear",
806
- "privacy": "private",
807
- "parameters": [
808
- {
809
- "name": "year",
810
- "type": {
811
- "text": "number"
812
- }
813
- }
814
- ]
843
+ "name": "blur",
844
+ "description": "Programmatically remove focus from the component.",
845
+ "inheritedFrom": {
846
+ "name": "FocusableMixin",
847
+ "module": "src/common/mixins/FocusableMixin.ts"
848
+ }
815
849
  },
816
850
  {
817
851
  "kind": "method",
818
- "name": "setFocusedDay",
819
- "privacy": "private",
820
- "parameters": [
821
- {
822
- "name": "day",
823
- "type": {
824
- "text": "Date"
825
- }
826
- }
827
- ]
852
+ "name": "click",
853
+ "description": "Programmatically simulates a click on the component.",
854
+ "inheritedFrom": {
855
+ "name": "FocusableMixin",
856
+ "module": "src/common/mixins/FocusableMixin.ts"
857
+ }
858
+ }
859
+ ],
860
+ "attributes": [
861
+ {
862
+ "name": "variant",
863
+ "type": {
864
+ "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
865
+ },
866
+ "default": "\"default\"",
867
+ "description": "The style variant of the button.",
868
+ "fieldName": "variant"
828
869
  },
829
870
  {
830
- "kind": "field",
831
- "name": "handleMonthSelect",
832
- "privacy": "private"
871
+ "name": "type",
872
+ "type": {
873
+ "text": "\"button\" | \"submit\" | \"reset\""
874
+ },
875
+ "default": "\"submit\"",
876
+ "description": "The type of the button.",
877
+ "fieldName": "type"
833
878
  },
834
879
  {
835
- "kind": "field",
836
- "name": "handleYearSelect",
837
- "privacy": "private"
880
+ "name": "size",
881
+ "type": {
882
+ "text": "\"s\" | \"m\" | \"l\""
883
+ },
884
+ "default": "\"m\"",
885
+ "description": "The size of the button.\nThis affects font-size and padding.",
886
+ "fieldName": "size"
838
887
  },
839
888
  {
840
- "kind": "field",
841
- "name": "handleNextMonthClick",
842
- "privacy": "private"
889
+ "name": "aria-expanded",
890
+ "type": {
891
+ "text": "\"true\" | \"false\" | undefined"
892
+ },
893
+ "fieldName": "accessibleExpanded"
843
894
  },
844
895
  {
845
- "kind": "field",
846
- "name": "handlePreviousMonthClick",
847
- "privacy": "private"
896
+ "name": "aria-haspopup",
897
+ "type": {
898
+ "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
899
+ },
900
+ "fieldName": "accessibleHasPopup"
848
901
  },
849
902
  {
850
- "kind": "field",
851
- "name": "enableActiveFocus",
852
- "privacy": "private"
903
+ "name": "href",
904
+ "type": {
905
+ "text": "string | undefined"
906
+ },
907
+ "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
908
+ "fieldName": "href"
853
909
  },
854
910
  {
855
- "kind": "field",
856
- "name": "disableActiveFocus",
857
- "privacy": "private"
858
- }
859
- ],
860
- "events": [
911
+ "name": "download",
912
+ "type": {
913
+ "text": "boolean"
914
+ },
915
+ "default": "false",
916
+ "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
917
+ "fieldName": "download"
918
+ },
861
919
  {
862
- "name": "nord-focus-date",
920
+ "name": "target",
863
921
  "type": {
864
- "text": "DateSelectEvent"
922
+ "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
865
923
  },
866
- "description": "Dispatched when the calendar's focused date changes."
924
+ "default": "\"_self\"",
925
+ "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.",
926
+ "fieldName": "target"
867
927
  },
868
928
  {
929
+ "name": "expand",
869
930
  "type": {
870
- "text": "DateSelectEvent"
931
+ "text": "boolean"
871
932
  },
872
- "description": "Dispatched when a date is selected and the value changes.",
873
- "name": "change"
874
- }
875
- ],
876
- "attributes": [
933
+ "default": "false",
934
+ "description": "Controls whether the button expands to fill the width of its container.",
935
+ "fieldName": "expand"
936
+ },
877
937
  {
878
- "name": "value",
938
+ "name": "loading",
879
939
  "type": {
880
- "text": "string"
940
+ "text": "boolean"
881
941
  },
882
- "default": "\"\"",
883
- "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
884
- "fieldName": "value"
942
+ "default": "false",
943
+ "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
944
+ "fieldName": "loading"
885
945
  },
886
946
  {
887
- "name": "firstDayOfWeek",
947
+ "name": "disabled",
888
948
  "type": {
889
- "text": "DaysOfWeek"
949
+ "text": "boolean"
890
950
  },
891
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
892
- "fieldName": "firstDayOfWeek"
951
+ "default": "false",
952
+ "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
953
+ "fieldName": "disabled",
954
+ "inheritedFrom": {
955
+ "name": "InputMixin",
956
+ "module": "src/common/mixins/InputMixin.ts"
957
+ }
893
958
  },
894
959
  {
895
- "name": "min",
960
+ "name": "name",
896
961
  "type": {
897
- "text": "string"
962
+ "text": "string | undefined"
898
963
  },
899
- "default": "\"\"",
900
- "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.",
901
- "fieldName": "min"
964
+ "description": "The name of the form component.",
965
+ "fieldName": "name",
966
+ "inheritedFrom": {
967
+ "name": "InputMixin",
968
+ "module": "src/common/mixins/InputMixin.ts"
969
+ }
902
970
  },
903
971
  {
904
- "name": "max",
972
+ "name": "value",
905
973
  "type": {
906
974
  "text": "string"
907
975
  },
908
976
  "default": "\"\"",
909
- "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.",
910
- "fieldName": "max"
977
+ "description": "The value of the form component.",
978
+ "fieldName": "value",
979
+ "inheritedFrom": {
980
+ "name": "InputMixin",
981
+ "module": "src/common/mixins/InputMixin.ts"
982
+ }
983
+ }
984
+ ],
985
+ "mixins": [
986
+ {
987
+ "name": "InputMixin",
988
+ "module": "/src/common/mixins/InputMixin.js"
911
989
  },
912
990
  {
913
- "name": "expand",
914
- "type": {
915
- "text": "boolean"
916
- },
917
- "default": "false",
918
- "description": "Controls whether the calendar expands to fill the width of its container.",
919
- "fieldName": "expand"
991
+ "name": "FocusableMixin",
992
+ "module": "/src/common/mixins/FocusableMixin.js"
920
993
  }
921
994
  ],
922
995
  "superclass": {
@@ -924,10 +997,10 @@
924
997
  "package": "lit"
925
998
  },
926
999
  "status": "ready",
927
- "category": "list",
1000
+ "category": "action",
928
1001
  "displayName": null,
929
1002
  "examples": [],
930
- "tagName": "nord-calendar",
1003
+ "tagName": "nord-button",
931
1004
  "customElement": true
932
1005
  }
933
1006
  ],
@@ -936,275 +1009,169 @@
936
1009
  "kind": "js",
937
1010
  "name": "default",
938
1011
  "declaration": {
939
- "name": "Calendar",
940
- "module": "src/calendar/Calendar.ts"
1012
+ "name": "Button",
1013
+ "module": "src/button/Button.ts"
941
1014
  }
942
1015
  },
943
1016
  {
944
1017
  "kind": "custom-element-definition",
945
- "name": "nord-calendar",
946
- "declaration": {
947
- "name": "Calendar",
948
- "module": "src/calendar/Calendar.ts"
949
- }
950
- }
951
- ],
952
- "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"
953
- },
954
- {
955
- "kind": "javascript-module",
956
- "path": "src/calendar/DateSelectEvent.ts",
957
- "declarations": [
958
- {
959
- "kind": "class",
960
- "description": "",
961
- "name": "DateSelectEvent",
962
- "superclass": {
963
- "name": "NordEvent",
964
- "module": "/src/common/events.js"
965
- },
966
- "examples": []
967
- }
968
- ],
969
- "exports": [
970
- {
971
- "kind": "js",
972
- "name": "DateSelectEvent",
973
- "declaration": {
974
- "name": "DateSelectEvent",
975
- "module": "src/calendar/DateSelectEvent.ts"
976
- }
977
- }
978
- ],
979
- "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"
980
- },
981
- {
982
- "kind": "javascript-module",
983
- "path": "src/calendar/localization.ts",
984
- "declarations": [
985
- {
986
- "kind": "variable",
987
- "name": "calendarLocalization",
988
- "type": {
989
- "text": "object"
990
- },
991
- "default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n}"
992
- }
993
- ],
994
- "exports": [
995
- {
996
- "kind": "js",
997
- "name": "default",
998
- "declaration": {
999
- "name": "calendarLocalization",
1000
- "module": "src/calendar/localization.ts"
1001
- }
1002
- }
1003
- ],
1004
- "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"
1005
- },
1006
- {
1007
- "kind": "javascript-module",
1008
- "path": "src/calendar/month-view.ts",
1009
- "declarations": [
1010
- {
1011
- "kind": "function",
1012
- "name": "dayView",
1013
- "parameters": [
1014
- {
1015
- "name": "{\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}",
1016
- "type": {
1017
- "text": "DatePickerDayProps"
1018
- }
1019
- }
1020
- ]
1021
- },
1022
- {
1023
- "kind": "function",
1024
- "name": "monthView",
1025
- "parameters": [
1026
- {
1027
- "name": "{\n onFocusIn,\n onFocusOut,\n selectedDate,\n focusedDate,\n labelledById,\n dayNames,\n dayNamesShort,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n}",
1028
- "type": {
1029
- "text": "MonthViewArgs"
1030
- }
1031
- }
1032
- ]
1033
- }
1034
- ],
1035
- "exports": [
1036
- {
1037
- "kind": "js",
1038
- "name": "dayView",
1039
- "declaration": {
1040
- "name": "dayView",
1041
- "module": "src/calendar/month-view.ts"
1042
- }
1043
- },
1044
- {
1045
- "kind": "js",
1046
- "name": "monthView",
1018
+ "name": "nord-button",
1047
1019
  "declaration": {
1048
- "name": "monthView",
1049
- "module": "src/calendar/month-view.ts"
1020
+ "name": "Button",
1021
+ "module": "src/button/Button.ts"
1050
1022
  }
1051
1023
  }
1052
1024
  ],
1053
- "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"
1025
+ "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- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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| `switch` | Switch style is reserved for the clinic switcher in the top left corner of an application. |\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"
1054
1026
  },
1055
1027
  {
1056
1028
  "kind": "javascript-module",
1057
- "path": "src/button/Button.ts",
1029
+ "path": "src/calendar/Calendar.ts",
1058
1030
  "declarations": [
1059
1031
  {
1060
1032
  "kind": "class",
1061
- "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.",
1062
- "name": "Button",
1033
+ "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.",
1034
+ "name": "Calendar",
1063
1035
  "cssProperties": [
1064
1036
  {
1065
- "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
1066
- "name": "--n-button-border-radius",
1067
- "default": "var(--n-border-radius-s)"
1037
+ "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
1038
+ "name": "--n-calendar-border-radius",
1039
+ "default": "var(--n-border-radius)"
1068
1040
  },
1069
1041
  {
1070
- "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
1071
- "name": "--n-button-gap",
1072
- "default": "var(--n-space-s)"
1073
- },
1042
+ "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
1043
+ "name": "--n-calendar-box-shadow",
1044
+ "default": "var(--n-box-shadow-popout)"
1045
+ }
1046
+ ],
1047
+ "members": [
1074
1048
  {
1075
- "description": "Controls the overlayed gradient background on the button.",
1076
- "name": "--n-button-gradient",
1077
- "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
1049
+ "kind": "field",
1050
+ "name": "dialogLabelId",
1051
+ "type": {
1052
+ "text": "string"
1053
+ },
1054
+ "privacy": "private",
1055
+ "default": "\"dialog-header\""
1078
1056
  },
1079
1057
  {
1080
- "description": "Controls the background color of the button, using [color tokens](/tokens/#color).",
1081
- "name": "--n-button-background-color",
1082
- "default": "var(--n-color-button)"
1058
+ "kind": "field",
1059
+ "name": "monthSelectNode",
1060
+ "type": {
1061
+ "text": "HTMLElement"
1062
+ },
1063
+ "privacy": "private"
1083
1064
  },
1084
1065
  {
1085
- "description": "Controls the border color of the button, using [color tokens](/tokens/#color).",
1086
- "name": "--n-button-border-color",
1087
- "default": "var(--n-color-border-strong)"
1066
+ "kind": "field",
1067
+ "name": "focusedDayNode",
1068
+ "type": {
1069
+ "text": "HTMLButtonElement"
1070
+ },
1071
+ "privacy": "private"
1088
1072
  },
1089
1073
  {
1090
- "description": "Controls the text alignment for the text in the button.",
1091
- "name": "--n-button-text-align",
1092
- "default": "center"
1093
- }
1094
- ],
1095
- "slots": [
1096
- {
1097
- "description": "The button content",
1098
- "name": ""
1074
+ "kind": "field",
1075
+ "name": "direction",
1076
+ "privacy": "private",
1077
+ "default": "new DirectionController(this)"
1099
1078
  },
1100
1079
  {
1101
- "description": "Used to place content at the start of button text. Typically used for icons.",
1102
- "name": "start"
1080
+ "kind": "field",
1081
+ "name": "swipe",
1082
+ "privacy": "private",
1083
+ "default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
1103
1084
  },
1104
- {
1105
- "description": "Used to place content at the end of button text. Typically used for icons.",
1106
- "name": "end"
1107
- }
1108
- ],
1109
- "members": [
1110
1085
  {
1111
1086
  "kind": "field",
1112
- "name": "buttonRef",
1087
+ "name": "shortcuts",
1113
1088
  "privacy": "private"
1114
1089
  },
1115
1090
  {
1116
1091
  "kind": "field",
1117
- "name": "events",
1092
+ "name": "localize",
1118
1093
  "privacy": "private",
1119
- "default": "new EventController(this)"
1094
+ "default": "new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })"
1120
1095
  },
1121
1096
  {
1122
1097
  "kind": "field",
1123
- "name": "lightDom",
1098
+ "name": "dateFormatShort",
1099
+ "type": {
1100
+ "text": "Intl.DateTimeFormat"
1101
+ },
1124
1102
  "privacy": "private",
1125
- "default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
1103
+ "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"
1126
1104
  },
1127
1105
  {
1128
1106
  "kind": "field",
1129
- "name": "variant",
1107
+ "name": "monthNames",
1130
1108
  "type": {
1131
- "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
1109
+ "text": "string[]"
1132
1110
  },
1133
- "default": "\"default\"",
1134
- "description": "The style variant of the button.",
1135
- "attribute": "variant",
1136
- "reflects": true
1111
+ "privacy": "private"
1137
1112
  },
1138
1113
  {
1139
1114
  "kind": "field",
1140
- "name": "type",
1141
- "type": {
1142
- "text": "\"button\" | \"submit\" | \"reset\""
1143
- },
1144
- "default": "\"submit\"",
1145
- "description": "The type of the button.",
1146
- "attribute": "type",
1147
- "reflects": true
1115
+ "name": "monthNamesShort",
1116
+ "type": {
1117
+ "text": "string[]"
1118
+ },
1119
+ "privacy": "private"
1148
1120
  },
1149
1121
  {
1150
1122
  "kind": "field",
1151
- "name": "size",
1123
+ "name": "dayNames",
1152
1124
  "type": {
1153
- "text": "\"s\" | \"m\" | \"l\""
1125
+ "text": "string[]"
1154
1126
  },
1155
- "default": "\"m\"",
1156
- "description": "The size of the button.\nThis affects font-size and padding.",
1157
- "attribute": "size",
1158
- "reflects": true
1127
+ "privacy": "private"
1159
1128
  },
1160
1129
  {
1161
1130
  "kind": "field",
1162
- "name": "accessibleExpanded",
1131
+ "name": "dayNamesShort",
1163
1132
  "type": {
1164
- "text": "\"true\" | \"false\" | undefined"
1133
+ "text": "string[]"
1165
1134
  },
1166
- "privacy": "private",
1167
- "attribute": "aria-expanded"
1135
+ "privacy": "private"
1168
1136
  },
1169
1137
  {
1170
1138
  "kind": "field",
1171
- "name": "accessibleHasPopup",
1139
+ "name": "value",
1172
1140
  "type": {
1173
- "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
1141
+ "text": "string"
1174
1142
  },
1175
- "privacy": "private",
1176
- "attribute": "aria-haspopup"
1143
+ "default": "\"\"",
1144
+ "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1145
+ "attribute": "value"
1177
1146
  },
1178
1147
  {
1179
1148
  "kind": "field",
1180
- "name": "href",
1149
+ "name": "firstDayOfWeek",
1181
1150
  "type": {
1182
- "text": "string | undefined"
1151
+ "text": "DaysOfWeek"
1183
1152
  },
1184
- "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1185
- "attribute": "href",
1186
- "reflects": true
1153
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1154
+ "attribute": "firstDayOfWeek"
1187
1155
  },
1188
1156
  {
1189
1157
  "kind": "field",
1190
- "name": "download",
1158
+ "name": "min",
1191
1159
  "type": {
1192
- "text": "boolean"
1160
+ "text": "string"
1193
1161
  },
1194
- "default": "false",
1195
- "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1196
- "attribute": "download"
1162
+ "default": "\"\"",
1163
+ "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.",
1164
+ "attribute": "min"
1197
1165
  },
1198
1166
  {
1199
1167
  "kind": "field",
1200
- "name": "target",
1168
+ "name": "max",
1201
1169
  "type": {
1202
- "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1170
+ "text": "string"
1203
1171
  },
1204
- "default": "\"_self\"",
1205
- "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.",
1206
- "attribute": "target",
1207
- "reflects": true
1172
+ "default": "\"\"",
1173
+ "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.",
1174
+ "attribute": "max"
1208
1175
  },
1209
1176
  {
1210
1177
  "kind": "field",
@@ -1213,316 +1180,248 @@
1213
1180
  "text": "boolean"
1214
1181
  },
1215
1182
  "default": "false",
1216
- "description": "Controls whether the button expands to fill the width of its container.",
1183
+ "description": "Controls whether the calendar expands to fill the width of its container.",
1217
1184
  "attribute": "expand",
1218
1185
  "reflects": true
1219
1186
  },
1220
1187
  {
1221
1188
  "kind": "field",
1222
- "name": "loading",
1189
+ "name": "isDateDisabled",
1190
+ "type": {
1191
+ "text": "DateDisabledPredicate"
1192
+ },
1193
+ "default": "isDateDisabled",
1194
+ "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
1195
+ },
1196
+ {
1197
+ "kind": "field",
1198
+ "name": "activeFocus",
1223
1199
  "type": {
1224
1200
  "text": "boolean"
1225
1201
  },
1226
- "default": "false",
1227
- "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
1228
- "attribute": "loading",
1229
- "reflects": true
1202
+ "privacy": "private",
1203
+ "default": "false"
1230
1204
  },
1231
1205
  {
1232
- "kind": "method",
1233
- "name": "renderLink",
1206
+ "kind": "field",
1207
+ "name": "focusedDay",
1234
1208
  "privacy": "private",
1209
+ "default": "new Date()"
1210
+ },
1211
+ {
1212
+ "kind": "method",
1213
+ "name": "focus",
1235
1214
  "parameters": [
1236
1215
  {
1237
- "name": "innards",
1216
+ "name": "options",
1217
+ "optional": true,
1238
1218
  "type": {
1239
- "text": "TemplateResult"
1240
- }
1219
+ "text": "FocusOptions & { target: \"day\" | \"month\" }"
1220
+ },
1221
+ "description": "An object which controls aspects of the focusing process."
1241
1222
  }
1242
1223
  ],
1243
- "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."
1224
+ "description": "Programmatically move focus to the calendar."
1244
1225
  },
1245
1226
  {
1246
1227
  "kind": "method",
1247
- "name": "renderButton",
1248
- "privacy": "private",
1249
- "parameters": [
1250
- {
1251
- "name": "innards",
1252
- "type": {
1253
- "text": "TemplateResult"
1254
- }
1255
- }
1256
- ]
1228
+ "name": "handleValueChange",
1229
+ "privacy": "protected"
1257
1230
  },
1258
1231
  {
1259
1232
  "kind": "method",
1260
- "name": "renderLightDom",
1233
+ "name": "handleFocusedDayChange",
1234
+ "privacy": "protected"
1235
+ },
1236
+ {
1237
+ "kind": "method",
1238
+ "name": "handleLangChange",
1261
1239
  "privacy": "private"
1262
1240
  },
1263
1241
  {
1264
1242
  "kind": "field",
1265
- "name": "handleOuterClick",
1243
+ "name": "handleDaySelect",
1266
1244
  "privacy": "private"
1267
1245
  },
1268
1246
  {
1269
1247
  "kind": "method",
1270
- "name": "handleClick",
1248
+ "name": "addDays",
1271
1249
  "privacy": "private",
1272
1250
  "parameters": [
1273
1251
  {
1274
- "name": "e",
1252
+ "name": "days",
1275
1253
  "type": {
1276
- "text": "Event"
1254
+ "text": "number"
1277
1255
  }
1278
1256
  }
1279
1257
  ]
1280
1258
  },
1281
1259
  {
1282
1260
  "kind": "method",
1283
- "name": "handleProxyChange",
1261
+ "name": "addMonths",
1284
1262
  "privacy": "private",
1285
1263
  "parameters": [
1286
1264
  {
1287
- "name": "e",
1265
+ "name": "months",
1288
1266
  "type": {
1289
- "text": "Event"
1267
+ "text": "number"
1290
1268
  }
1291
1269
  }
1292
- ],
1293
- "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in."
1294
- },
1295
- {
1296
- "kind": "field",
1297
- "name": "disabled",
1298
- "type": {
1299
- "text": "boolean"
1300
- },
1301
- "default": "false",
1302
- "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1303
- "attribute": "disabled",
1304
- "reflects": true,
1305
- "inheritedFrom": {
1306
- "name": "InputMixin",
1307
- "module": "src/common/mixins/InputMixin.ts"
1308
- }
1309
- },
1310
- {
1311
- "kind": "field",
1312
- "name": "name",
1313
- "type": {
1314
- "text": "string | undefined"
1315
- },
1316
- "description": "The name of the form component.",
1317
- "attribute": "name",
1318
- "inheritedFrom": {
1319
- "name": "InputMixin",
1320
- "module": "src/common/mixins/InputMixin.ts"
1321
- }
1270
+ ]
1322
1271
  },
1323
1272
  {
1324
- "kind": "field",
1325
- "name": "value",
1326
- "type": {
1327
- "text": "string"
1328
- },
1329
- "default": "\"\"",
1330
- "description": "The value of the form component.",
1331
- "attribute": "value",
1332
- "inheritedFrom": {
1333
- "name": "InputMixin",
1334
- "module": "src/common/mixins/InputMixin.ts"
1335
- }
1273
+ "kind": "method",
1274
+ "name": "addYears",
1275
+ "privacy": "private",
1276
+ "parameters": [
1277
+ {
1278
+ "name": "years",
1279
+ "type": {
1280
+ "text": "number"
1281
+ }
1282
+ }
1283
+ ]
1336
1284
  },
1337
1285
  {
1338
- "kind": "field",
1339
- "name": "form",
1340
- "description": "Gets the form, if any, associated with the form element.",
1341
- "inheritedFrom": {
1342
- "name": "InputMixin",
1343
- "module": "src/common/mixins/InputMixin.ts"
1344
- }
1286
+ "kind": "method",
1287
+ "name": "startOfWeek",
1288
+ "privacy": "private"
1345
1289
  },
1346
1290
  {
1347
- "kind": "field",
1348
- "name": "focusableRef",
1349
- "privacy": "protected",
1350
- "inheritedFrom": {
1351
- "name": "FocusableMixin",
1352
- "module": "src/common/mixins/FocusableMixin.ts"
1353
- }
1291
+ "kind": "method",
1292
+ "name": "endOfWeek",
1293
+ "privacy": "private"
1354
1294
  },
1355
1295
  {
1356
1296
  "kind": "method",
1357
- "name": "focus",
1297
+ "name": "setMonth",
1298
+ "privacy": "private",
1358
1299
  "parameters": [
1359
1300
  {
1360
- "name": "options",
1361
- "optional": true,
1301
+ "name": "month",
1362
1302
  "type": {
1363
- "text": "FocusOptions"
1364
- },
1365
- "description": "An object which controls aspects of the focusing process."
1303
+ "text": "number"
1304
+ }
1366
1305
  }
1367
- ],
1368
- "description": "Programmatically move focus to the component.",
1369
- "inheritedFrom": {
1370
- "name": "FocusableMixin",
1371
- "module": "src/common/mixins/FocusableMixin.ts"
1372
- }
1306
+ ]
1373
1307
  },
1374
1308
  {
1375
1309
  "kind": "method",
1376
- "name": "blur",
1377
- "description": "Programmatically remove focus from the component.",
1378
- "inheritedFrom": {
1379
- "name": "FocusableMixin",
1380
- "module": "src/common/mixins/FocusableMixin.ts"
1381
- }
1310
+ "name": "setYear",
1311
+ "privacy": "private",
1312
+ "parameters": [
1313
+ {
1314
+ "name": "year",
1315
+ "type": {
1316
+ "text": "number"
1317
+ }
1318
+ }
1319
+ ]
1382
1320
  },
1383
1321
  {
1384
1322
  "kind": "method",
1385
- "name": "click",
1386
- "description": "Programmatically simulates a click on the component.",
1387
- "inheritedFrom": {
1388
- "name": "FocusableMixin",
1389
- "module": "src/common/mixins/FocusableMixin.ts"
1390
- }
1391
- }
1392
- ],
1393
- "attributes": [
1394
- {
1395
- "name": "variant",
1396
- "type": {
1397
- "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
1398
- },
1399
- "default": "\"default\"",
1400
- "description": "The style variant of the button.",
1401
- "fieldName": "variant"
1323
+ "name": "setFocusedDay",
1324
+ "privacy": "private",
1325
+ "parameters": [
1326
+ {
1327
+ "name": "day",
1328
+ "type": {
1329
+ "text": "Date"
1330
+ }
1331
+ }
1332
+ ]
1402
1333
  },
1403
1334
  {
1404
- "name": "type",
1405
- "type": {
1406
- "text": "\"button\" | \"submit\" | \"reset\""
1407
- },
1408
- "default": "\"submit\"",
1409
- "description": "The type of the button.",
1410
- "fieldName": "type"
1335
+ "kind": "field",
1336
+ "name": "handleMonthSelect",
1337
+ "privacy": "private"
1411
1338
  },
1412
1339
  {
1413
- "name": "size",
1414
- "type": {
1415
- "text": "\"s\" | \"m\" | \"l\""
1416
- },
1417
- "default": "\"m\"",
1418
- "description": "The size of the button.\nThis affects font-size and padding.",
1419
- "fieldName": "size"
1340
+ "kind": "field",
1341
+ "name": "handleYearSelect",
1342
+ "privacy": "private"
1420
1343
  },
1421
1344
  {
1422
- "name": "aria-expanded",
1423
- "type": {
1424
- "text": "\"true\" | \"false\" | undefined"
1425
- },
1426
- "fieldName": "accessibleExpanded"
1345
+ "kind": "field",
1346
+ "name": "handleNextMonthClick",
1347
+ "privacy": "private"
1427
1348
  },
1428
1349
  {
1429
- "name": "aria-haspopup",
1430
- "type": {
1431
- "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
1432
- },
1433
- "fieldName": "accessibleHasPopup"
1350
+ "kind": "field",
1351
+ "name": "handlePreviousMonthClick",
1352
+ "privacy": "private"
1434
1353
  },
1435
1354
  {
1436
- "name": "href",
1437
- "type": {
1438
- "text": "string | undefined"
1439
- },
1440
- "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1441
- "fieldName": "href"
1355
+ "kind": "field",
1356
+ "name": "enableActiveFocus",
1357
+ "privacy": "private"
1442
1358
  },
1443
1359
  {
1444
- "name": "download",
1445
- "type": {
1446
- "text": "boolean"
1447
- },
1448
- "default": "false",
1449
- "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1450
- "fieldName": "download"
1451
- },
1360
+ "kind": "field",
1361
+ "name": "disableActiveFocus",
1362
+ "privacy": "private"
1363
+ }
1364
+ ],
1365
+ "events": [
1452
1366
  {
1453
- "name": "target",
1367
+ "name": "nord-focus-date",
1454
1368
  "type": {
1455
- "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1369
+ "text": "DateSelectEvent"
1456
1370
  },
1457
- "default": "\"_self\"",
1458
- "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.",
1459
- "fieldName": "target"
1371
+ "description": "Dispatched when the calendar's focused date changes."
1460
1372
  },
1461
1373
  {
1462
- "name": "expand",
1463
1374
  "type": {
1464
- "text": "boolean"
1375
+ "text": "DateSelectEvent"
1465
1376
  },
1466
- "default": "false",
1467
- "description": "Controls whether the button expands to fill the width of its container.",
1468
- "fieldName": "expand"
1469
- },
1377
+ "description": "Dispatched when a date is selected and the value changes.",
1378
+ "name": "change"
1379
+ }
1380
+ ],
1381
+ "attributes": [
1470
1382
  {
1471
- "name": "loading",
1383
+ "name": "value",
1472
1384
  "type": {
1473
- "text": "boolean"
1385
+ "text": "string"
1474
1386
  },
1475
- "default": "false",
1476
- "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.",
1477
- "fieldName": "loading"
1387
+ "default": "\"\"",
1388
+ "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1389
+ "fieldName": "value"
1478
1390
  },
1479
1391
  {
1480
- "name": "disabled",
1392
+ "name": "firstDayOfWeek",
1481
1393
  "type": {
1482
- "text": "boolean"
1394
+ "text": "DaysOfWeek"
1483
1395
  },
1484
- "default": "false",
1485
- "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1486
- "fieldName": "disabled",
1487
- "inheritedFrom": {
1488
- "name": "InputMixin",
1489
- "module": "src/common/mixins/InputMixin.ts"
1490
- }
1396
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1397
+ "fieldName": "firstDayOfWeek"
1491
1398
  },
1492
1399
  {
1493
- "name": "name",
1400
+ "name": "min",
1494
1401
  "type": {
1495
- "text": "string | undefined"
1402
+ "text": "string"
1496
1403
  },
1497
- "description": "The name of the form component.",
1498
- "fieldName": "name",
1499
- "inheritedFrom": {
1500
- "name": "InputMixin",
1501
- "module": "src/common/mixins/InputMixin.ts"
1502
- }
1404
+ "default": "\"\"",
1405
+ "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.",
1406
+ "fieldName": "min"
1503
1407
  },
1504
1408
  {
1505
- "name": "value",
1409
+ "name": "max",
1506
1410
  "type": {
1507
1411
  "text": "string"
1508
1412
  },
1509
1413
  "default": "\"\"",
1510
- "description": "The value of the form component.",
1511
- "fieldName": "value",
1512
- "inheritedFrom": {
1513
- "name": "InputMixin",
1514
- "module": "src/common/mixins/InputMixin.ts"
1515
- }
1516
- }
1517
- ],
1518
- "mixins": [
1519
- {
1520
- "name": "InputMixin",
1521
- "module": "/src/common/mixins/InputMixin.js"
1414
+ "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.",
1415
+ "fieldName": "max"
1522
1416
  },
1523
1417
  {
1524
- "name": "FocusableMixin",
1525
- "module": "/src/common/mixins/FocusableMixin.js"
1418
+ "name": "expand",
1419
+ "type": {
1420
+ "text": "boolean"
1421
+ },
1422
+ "default": "false",
1423
+ "description": "Controls whether the calendar expands to fill the width of its container.",
1424
+ "fieldName": "expand"
1526
1425
  }
1527
1426
  ],
1528
1427
  "superclass": {
@@ -1530,10 +1429,10 @@
1530
1429
  "package": "lit"
1531
1430
  },
1532
1431
  "status": "ready",
1533
- "category": "action",
1432
+ "category": "list",
1534
1433
  "displayName": null,
1535
1434
  "examples": [],
1536
- "tagName": "nord-button",
1435
+ "tagName": "nord-calendar",
1537
1436
  "customElement": true
1538
1437
  }
1539
1438
  ],
@@ -1542,20 +1441,121 @@
1542
1441
  "kind": "js",
1543
1442
  "name": "default",
1544
1443
  "declaration": {
1545
- "name": "Button",
1546
- "module": "src/button/Button.ts"
1444
+ "name": "Calendar",
1445
+ "module": "src/calendar/Calendar.ts"
1446
+ }
1447
+ },
1448
+ {
1449
+ "kind": "custom-element-definition",
1450
+ "name": "nord-calendar",
1451
+ "declaration": {
1452
+ "name": "Calendar",
1453
+ "module": "src/calendar/Calendar.ts"
1454
+ }
1455
+ }
1456
+ ],
1457
+ "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"
1458
+ },
1459
+ {
1460
+ "kind": "javascript-module",
1461
+ "path": "src/calendar/DateSelectEvent.ts",
1462
+ "declarations": [
1463
+ {
1464
+ "kind": "class",
1465
+ "description": "",
1466
+ "name": "DateSelectEvent",
1467
+ "superclass": {
1468
+ "name": "NordEvent",
1469
+ "module": "/src/common/events.js"
1470
+ },
1471
+ "examples": []
1472
+ }
1473
+ ],
1474
+ "exports": [
1475
+ {
1476
+ "kind": "js",
1477
+ "name": "DateSelectEvent",
1478
+ "declaration": {
1479
+ "name": "DateSelectEvent",
1480
+ "module": "src/calendar/DateSelectEvent.ts"
1481
+ }
1482
+ }
1483
+ ],
1484
+ "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"
1485
+ },
1486
+ {
1487
+ "kind": "javascript-module",
1488
+ "path": "src/calendar/localization.ts",
1489
+ "declarations": [
1490
+ {
1491
+ "kind": "variable",
1492
+ "name": "calendarLocalization",
1493
+ "type": {
1494
+ "text": "object"
1495
+ },
1496
+ "default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n}"
1497
+ }
1498
+ ],
1499
+ "exports": [
1500
+ {
1501
+ "kind": "js",
1502
+ "name": "default",
1503
+ "declaration": {
1504
+ "name": "calendarLocalization",
1505
+ "module": "src/calendar/localization.ts"
1506
+ }
1507
+ }
1508
+ ],
1509
+ "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"
1510
+ },
1511
+ {
1512
+ "kind": "javascript-module",
1513
+ "path": "src/calendar/month-view.ts",
1514
+ "declarations": [
1515
+ {
1516
+ "kind": "function",
1517
+ "name": "dayView",
1518
+ "parameters": [
1519
+ {
1520
+ "name": "{\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}",
1521
+ "type": {
1522
+ "text": "DatePickerDayProps"
1523
+ }
1524
+ }
1525
+ ]
1526
+ },
1527
+ {
1528
+ "kind": "function",
1529
+ "name": "monthView",
1530
+ "parameters": [
1531
+ {
1532
+ "name": "{\n onFocusIn,\n onFocusOut,\n selectedDate,\n focusedDate,\n labelledById,\n dayNames,\n dayNamesShort,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n}",
1533
+ "type": {
1534
+ "text": "MonthViewArgs"
1535
+ }
1536
+ }
1537
+ ]
1538
+ }
1539
+ ],
1540
+ "exports": [
1541
+ {
1542
+ "kind": "js",
1543
+ "name": "dayView",
1544
+ "declaration": {
1545
+ "name": "dayView",
1546
+ "module": "src/calendar/month-view.ts"
1547
1547
  }
1548
1548
  },
1549
1549
  {
1550
- "kind": "custom-element-definition",
1551
- "name": "nord-button",
1550
+ "kind": "js",
1551
+ "name": "monthView",
1552
1552
  "declaration": {
1553
- "name": "Button",
1554
- "module": "src/button/Button.ts"
1553
+ "name": "monthView",
1554
+ "module": "src/calendar/month-view.ts"
1555
1555
  }
1556
1556
  }
1557
1557
  ],
1558
- "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- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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| `switch` | Switch style is reserved for the clinic switcher in the top left corner of an application. |\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"
1558
+ "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"
1559
1559
  },
1560
1560
  {
1561
1561
  "kind": "javascript-module",
@@ -1639,93 +1639,6 @@
1639
1639
  ],
1640
1640
  "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"
1641
1641
  },
1642
- {
1643
- "kind": "javascript-module",
1644
- "path": "src/badge/Badge.ts",
1645
- "declarations": [
1646
- {
1647
- "kind": "class",
1648
- "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.",
1649
- "name": "Badge",
1650
- "slots": [
1651
- {
1652
- "description": "The badge content.",
1653
- "name": ""
1654
- }
1655
- ],
1656
- "members": [
1657
- {
1658
- "kind": "field",
1659
- "name": "type",
1660
- "type": {
1661
- "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
1662
- },
1663
- "default": "\"neutral\"",
1664
- "description": "The type of badge.\nDetermines the background color of the badge.",
1665
- "attribute": "type",
1666
- "reflects": true
1667
- },
1668
- {
1669
- "kind": "field",
1670
- "name": "progress",
1671
- "type": {
1672
- "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
1673
- },
1674
- "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
1675
- "attribute": "progress"
1676
- }
1677
- ],
1678
- "attributes": [
1679
- {
1680
- "name": "type",
1681
- "type": {
1682
- "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
1683
- },
1684
- "default": "\"neutral\"",
1685
- "description": "The type of badge.\nDetermines the background color of the badge.",
1686
- "fieldName": "type"
1687
- },
1688
- {
1689
- "name": "progress",
1690
- "type": {
1691
- "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
1692
- },
1693
- "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
1694
- "fieldName": "progress"
1695
- }
1696
- ],
1697
- "superclass": {
1698
- "name": "LitElement",
1699
- "package": "lit"
1700
- },
1701
- "status": "ready",
1702
- "category": "text",
1703
- "displayName": null,
1704
- "examples": [],
1705
- "tagName": "nord-badge",
1706
- "customElement": true
1707
- }
1708
- ],
1709
- "exports": [
1710
- {
1711
- "kind": "js",
1712
- "name": "default",
1713
- "declaration": {
1714
- "name": "Badge",
1715
- "module": "src/badge/Badge.ts"
1716
- }
1717
- },
1718
- {
1719
- "kind": "custom-element-definition",
1720
- "name": "nord-badge",
1721
- "declaration": {
1722
- "name": "Badge",
1723
- "module": "src/badge/Badge.ts"
1724
- }
1725
- }
1726
- ],
1727
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral` | The default style variant. |\n| `info` | Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n| `progress` | Used to convey something that’s in progress. |\n"
1728
- },
1729
1642
  {
1730
1643
  "kind": "javascript-module",
1731
1644
  "path": "src/card/Card.ts",
@@ -1848,6 +1761,93 @@
1848
1761
  ],
1849
1762
  "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 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"
1850
1763
  },
1764
+ {
1765
+ "kind": "javascript-module",
1766
+ "path": "src/badge/Badge.ts",
1767
+ "declarations": [
1768
+ {
1769
+ "kind": "class",
1770
+ "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.",
1771
+ "name": "Badge",
1772
+ "slots": [
1773
+ {
1774
+ "description": "The badge content.",
1775
+ "name": ""
1776
+ }
1777
+ ],
1778
+ "members": [
1779
+ {
1780
+ "kind": "field",
1781
+ "name": "type",
1782
+ "type": {
1783
+ "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
1784
+ },
1785
+ "default": "\"neutral\"",
1786
+ "description": "The type of badge.\nDetermines the background color of the badge.",
1787
+ "attribute": "type",
1788
+ "reflects": true
1789
+ },
1790
+ {
1791
+ "kind": "field",
1792
+ "name": "progress",
1793
+ "type": {
1794
+ "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
1795
+ },
1796
+ "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
1797
+ "attribute": "progress"
1798
+ }
1799
+ ],
1800
+ "attributes": [
1801
+ {
1802
+ "name": "type",
1803
+ "type": {
1804
+ "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
1805
+ },
1806
+ "default": "\"neutral\"",
1807
+ "description": "The type of badge.\nDetermines the background color of the badge.",
1808
+ "fieldName": "type"
1809
+ },
1810
+ {
1811
+ "name": "progress",
1812
+ "type": {
1813
+ "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
1814
+ },
1815
+ "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
1816
+ "fieldName": "progress"
1817
+ }
1818
+ ],
1819
+ "superclass": {
1820
+ "name": "LitElement",
1821
+ "package": "lit"
1822
+ },
1823
+ "status": "ready",
1824
+ "category": "text",
1825
+ "displayName": null,
1826
+ "examples": [],
1827
+ "tagName": "nord-badge",
1828
+ "customElement": true
1829
+ }
1830
+ ],
1831
+ "exports": [
1832
+ {
1833
+ "kind": "js",
1834
+ "name": "default",
1835
+ "declaration": {
1836
+ "name": "Badge",
1837
+ "module": "src/badge/Badge.ts"
1838
+ }
1839
+ },
1840
+ {
1841
+ "kind": "custom-element-definition",
1842
+ "name": "nord-badge",
1843
+ "declaration": {
1844
+ "name": "Badge",
1845
+ "module": "src/badge/Badge.ts"
1846
+ }
1847
+ }
1848
+ ],
1849
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral` | The default style variant. |\n| `info` | Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n| `progress` | Used to convey something that’s in progress. |\n"
1850
+ },
1851
1851
  {
1852
1852
  "kind": "javascript-module",
1853
1853
  "path": "src/checkbox/Checkbox.ts",
@@ -13164,41 +13164,6 @@
13164
13164
  ],
13165
13165
  "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"
13166
13166
  },
13167
- {
13168
- "kind": "javascript-module",
13169
- "path": "src/common/decorators/observe.ts",
13170
- "declarations": [
13171
- {
13172
- "kind": "function",
13173
- "name": "observe",
13174
- "parameters": [
13175
- {
13176
- "name": "propertyName",
13177
- "type": {
13178
- "text": "string"
13179
- }
13180
- },
13181
- {
13182
- "name": "lifecycle",
13183
- "default": "\"update\"",
13184
- "type": {
13185
- "text": "ObserveLifecycle"
13186
- }
13187
- }
13188
- ]
13189
- }
13190
- ],
13191
- "exports": [
13192
- {
13193
- "kind": "js",
13194
- "name": "observe",
13195
- "declaration": {
13196
- "name": "observe",
13197
- "module": "src/common/decorators/observe.ts"
13198
- }
13199
- }
13200
- ]
13201
- },
13202
13167
  {
13203
13168
  "kind": "javascript-module",
13204
13169
  "path": "src/common/controllers/DirectionController.ts",
@@ -14231,6 +14196,41 @@
14231
14196
  }
14232
14197
  ]
14233
14198
  },
14199
+ {
14200
+ "kind": "javascript-module",
14201
+ "path": "src/common/decorators/observe.ts",
14202
+ "declarations": [
14203
+ {
14204
+ "kind": "function",
14205
+ "name": "observe",
14206
+ "parameters": [
14207
+ {
14208
+ "name": "propertyName",
14209
+ "type": {
14210
+ "text": "string"
14211
+ }
14212
+ },
14213
+ {
14214
+ "name": "lifecycle",
14215
+ "default": "\"update\"",
14216
+ "type": {
14217
+ "text": "ObserveLifecycle"
14218
+ }
14219
+ }
14220
+ ]
14221
+ }
14222
+ ],
14223
+ "exports": [
14224
+ {
14225
+ "kind": "js",
14226
+ "name": "observe",
14227
+ "declaration": {
14228
+ "name": "observe",
14229
+ "module": "src/common/decorators/observe.ts"
14230
+ }
14231
+ }
14232
+ ]
14233
+ },
14234
14234
  {
14235
14235
  "kind": "javascript-module",
14236
14236
  "path": "src/common/directives/cond.ts",