@nordhealth/components 3.3.0 → 3.4.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/custom-elements.json +976 -957
  2. package/lib/Layout.js +1 -1
  3. package/lib/Layout.js.map +1 -1
  4. package/lib/bundle.js +4 -4
  5. package/lib/bundle.js.map +1 -1
  6. package/lib/src/layout/Layout.d.ts +6 -0
  7. package/package.json +2 -2
package/custom-elements.json CHANGED
@@ -828,478 +828,496 @@
828
828
  },
829
829
  {
830
830
  "kind": "javascript-module",
831
- "path": "src/button/Button.ts",
831
+ "path": "src/button-group/ButtonGroup.ts",
832
832
  "declarations": [
833
833
  {
834
834
  "kind": "class",
835
- "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.",
836
- "name": "Button",
835
+ "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
836
+ "name": "ButtonGroup",
837
837
  "cssProperties": [
838
838
  {
839
839
  "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
840
- "name": "--n-button-border-radius",
840
+ "name": "--n-button-group-border-radius",
841
841
  "default": "var(--n-border-radius-s)"
842
842
  },
843
843
  {
844
- "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
845
- "name": "--n-button-gap",
846
- "default": "var(--n-space-s)"
847
- },
848
- {
849
- "description": "Controls the overlayed gradient background on the button.",
850
- "name": "--n-button-gradient",
851
- "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
852
- },
853
- {
854
- "description": "Controls the background color of the button, using our [color tokens](/tokens/#color).",
855
- "name": "--n-button-background-color",
856
- "default": "var(--n-color-button)"
857
- },
858
- {
859
- "description": "Controls the border color of the button, using our [color tokens](/tokens/#color).",
860
- "name": "--n-button-border-color",
861
- "default": "var(--n-color-border-strong)"
862
- },
863
- {
864
- "description": "Controls the text alignment for the text in the button.",
865
- "name": "--n-button-text-align",
866
- "default": "center"
867
- },
868
- {
869
- "description": "Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).",
870
- "name": "--n-button-box-shadow",
844
+ "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
845
+ "name": "--n-button-group-box-shadow",
871
846
  "default": "var(--n-box-shadow)"
872
- },
873
- {
874
- "description": "Controls the color of the text within the button, using our [color tokens](/tokens/#color).",
875
- "name": "--n-button-color",
876
- "default": "var(--n-color-text)"
877
- },
847
+ }
848
+ ],
849
+ "slots": [
878
850
  {
879
- "description": "Controls the inline, or left and right, padding of the button.",
880
- "name": "--n-button-padding-inline",
881
- "default": "calc(var(--n-space-m) / 1.2)"
882
- },
851
+ "description": "The button group content",
852
+ "name": ""
853
+ }
854
+ ],
855
+ "members": [
883
856
  {
884
- "description": "Controls the size of the text within the button, using our [font tokens](/tokens/#font).",
885
- "name": "--n-button-font-size",
886
- "default": "var(--n-font-size-m)"
857
+ "kind": "field",
858
+ "name": "direction",
859
+ "type": {
860
+ "text": "\"vertical\" | \"horizontal\""
861
+ },
862
+ "default": "\"horizontal\"",
863
+ "description": "The direction of the button group.",
864
+ "attribute": "direction",
865
+ "reflects": true
887
866
  },
888
867
  {
889
- "description": "Controls the weight of the text within the button, using our [font tokens](/tokens/#font).",
890
- "name": "--n-button-font-weight",
891
- "default": "var(--n-font-weight)"
892
- },
868
+ "kind": "field",
869
+ "name": "role",
870
+ "type": {
871
+ "text": "string"
872
+ },
873
+ "default": "\"group\"",
874
+ "description": "The appropriate role for the containing element.",
875
+ "attribute": "role",
876
+ "reflects": true
877
+ }
878
+ ],
879
+ "attributes": [
893
880
  {
894
- "description": "Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).",
895
- "name": "--n-button-min-block-size",
896
- "default": "var(--n-space-xl)"
881
+ "name": "direction",
882
+ "type": {
883
+ "text": "\"vertical\" | \"horizontal\""
884
+ },
885
+ "default": "\"horizontal\"",
886
+ "description": "The direction of the button group.",
887
+ "fieldName": "direction"
897
888
  },
898
889
  {
899
- "description": "Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.",
900
- "name": "--n-button-toggle-icon-color",
901
- "default": "var(--n-color-icon)"
890
+ "name": "role",
891
+ "type": {
892
+ "text": "string"
893
+ },
894
+ "default": "\"group\"",
895
+ "description": "The appropriate role for the containing element.",
896
+ "fieldName": "role"
902
897
  }
903
898
  ],
904
- "slots": [
905
- {
906
- "description": "The button content",
907
- "name": ""
908
- },
899
+ "superclass": {
900
+ "name": "LitElement",
901
+ "package": "lit"
902
+ },
903
+ "localization": [],
904
+ "status": "new",
905
+ "category": "structure",
906
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
907
+ "examples": [],
908
+ "dependencies": [],
909
+ "tagName": "nord-button-group",
910
+ "customElement": true
911
+ }
912
+ ],
913
+ "exports": [
914
+ {
915
+ "kind": "js",
916
+ "name": "default",
917
+ "declaration": {
918
+ "name": "ButtonGroup",
919
+ "module": "src/button-group/ButtonGroup.ts"
920
+ }
921
+ },
922
+ {
923
+ "kind": "custom-element-definition",
924
+ "name": "nord-button-group",
925
+ "declaration": {
926
+ "name": "ButtonGroup",
927
+ "module": "src/button-group/ButtonGroup.ts"
928
+ }
929
+ }
930
+ ]
931
+ },
932
+ {
933
+ "kind": "javascript-module",
934
+ "path": "src/calendar/Calendar.ts",
935
+ "declarations": [
936
+ {
937
+ "kind": "class",
938
+ "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.",
939
+ "name": "Calendar",
940
+ "cssProperties": [
909
941
  {
910
- "description": "Used to place content at the start of button text. Typically used for icons.",
911
- "name": "start"
942
+ "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
943
+ "name": "--n-calendar-border-radius",
944
+ "default": "var(--n-border-radius)"
912
945
  },
913
946
  {
914
- "description": "Used to place content at the end of button text. Typically used for icons.",
915
- "name": "end"
947
+ "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
948
+ "name": "--n-calendar-box-shadow",
949
+ "default": "var(--n-box-shadow-popout)"
916
950
  }
917
951
  ],
918
952
  "members": [
919
953
  {
920
954
  "kind": "field",
921
- "name": "defaultSlot",
922
- "privacy": "private",
923
- "default": "new SlotController(this)"
955
+ "name": "monthSelectNode",
956
+ "type": {
957
+ "text": "HTMLElement"
958
+ },
959
+ "privacy": "private"
924
960
  },
925
961
  {
926
962
  "kind": "field",
927
- "name": "buttonRef",
963
+ "name": "focusedDayNode",
964
+ "type": {
965
+ "text": "HTMLButtonElement"
966
+ },
928
967
  "privacy": "private"
929
968
  },
930
969
  {
931
970
  "kind": "field",
932
- "name": "events",
971
+ "name": "direction",
933
972
  "privacy": "private",
934
- "default": "new EventController(this)"
973
+ "default": "new DirectionController(this)"
935
974
  },
936
975
  {
937
976
  "kind": "field",
938
- "name": "lightDom",
977
+ "name": "swipe",
939
978
  "privacy": "private",
940
- "default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
979
+ "default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
941
980
  },
942
981
  {
943
982
  "kind": "field",
944
- "name": "variant",
945
- "type": {
946
- "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
947
- },
948
- "default": "\"default\"",
949
- "description": "The style variant of the button.",
950
- "attribute": "variant",
951
- "reflects": true
983
+ "name": "shortcuts",
984
+ "privacy": "private"
952
985
  },
953
986
  {
954
987
  "kind": "field",
955
- "name": "type",
956
- "type": {
957
- "text": "\"button\" | \"submit\" | \"reset\""
958
- },
959
- "default": "\"submit\"",
960
- "description": "The type of the button.",
961
- "attribute": "type",
962
- "reflects": true
988
+ "name": "localize",
989
+ "privacy": "private",
990
+ "default": "new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })"
963
991
  },
964
992
  {
965
993
  "kind": "field",
966
- "name": "size",
994
+ "name": "dateFormatShort",
967
995
  "type": {
968
- "text": "\"s\" | \"m\" | \"l\""
996
+ "text": "Intl.DateTimeFormat"
969
997
  },
970
- "default": "\"m\"",
971
- "description": "The size of the button.\nThis affects font-size and padding.",
972
- "attribute": "size",
973
- "reflects": true
998
+ "privacy": "private",
999
+ "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"
974
1000
  },
975
1001
  {
976
1002
  "kind": "field",
977
- "name": "accessibleExpanded",
1003
+ "name": "monthNames",
978
1004
  "type": {
979
- "text": "\"true\" | \"false\" | undefined"
1005
+ "text": "string[]"
980
1006
  },
981
- "privacy": "private",
982
- "attribute": "aria-expanded"
1007
+ "privacy": "private"
983
1008
  },
984
1009
  {
985
1010
  "kind": "field",
986
- "name": "accessibleHasPopup",
1011
+ "name": "monthNamesShort",
987
1012
  "type": {
988
- "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
1013
+ "text": "string[]"
989
1014
  },
990
- "privacy": "private",
991
- "attribute": "aria-haspopup"
1015
+ "privacy": "private"
992
1016
  },
993
1017
  {
994
1018
  "kind": "field",
995
- "name": "href",
1019
+ "name": "dayNames",
996
1020
  "type": {
997
- "text": "string | undefined"
1021
+ "text": "string[]"
998
1022
  },
999
- "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1000
- "attribute": "href",
1001
- "reflects": true
1023
+ "privacy": "private"
1002
1024
  },
1003
1025
  {
1004
1026
  "kind": "field",
1005
- "name": "download",
1027
+ "name": "dayNamesShort",
1006
1028
  "type": {
1007
- "text": "boolean"
1029
+ "text": "string[]"
1008
1030
  },
1009
- "default": "false",
1010
- "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1011
- "attribute": "download"
1031
+ "privacy": "private"
1012
1032
  },
1013
1033
  {
1014
1034
  "kind": "field",
1015
- "name": "target",
1035
+ "name": "value",
1016
1036
  "type": {
1017
- "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1037
+ "text": "string"
1018
1038
  },
1019
- "default": "\"_self\"",
1020
- "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.",
1021
- "attribute": "target"
1039
+ "default": "\"\"",
1040
+ "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1041
+ "attribute": "value"
1022
1042
  },
1023
1043
  {
1024
1044
  "kind": "field",
1025
- "name": "expand",
1045
+ "name": "firstDayOfWeek",
1026
1046
  "type": {
1027
- "text": "boolean"
1047
+ "text": "DaysOfWeek"
1048
+ },
1049
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1050
+ "attribute": "firstDayOfWeek"
1051
+ },
1052
+ {
1053
+ "kind": "field",
1054
+ "name": "min",
1055
+ "type": {
1056
+ "text": "string"
1057
+ },
1058
+ "default": "\"\"",
1059
+ "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.",
1060
+ "attribute": "min"
1061
+ },
1062
+ {
1063
+ "kind": "field",
1064
+ "name": "max",
1065
+ "type": {
1066
+ "text": "string"
1067
+ },
1068
+ "default": "\"\"",
1069
+ "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.",
1070
+ "attribute": "max"
1071
+ },
1072
+ {
1073
+ "kind": "field",
1074
+ "name": "expand",
1075
+ "type": {
1076
+ "text": "boolean"
1028
1077
  },
1029
1078
  "default": "false",
1030
- "description": "Controls whether the button expands to fill the width of its container.",
1079
+ "description": "Controls whether the calendar expands to fill the width of its container.",
1031
1080
  "attribute": "expand",
1032
1081
  "reflects": true
1033
1082
  },
1034
1083
  {
1035
1084
  "kind": "field",
1036
- "name": "loading",
1085
+ "name": "isDateDisabled",
1086
+ "type": {
1087
+ "text": "DatePredicate"
1088
+ },
1089
+ "default": "isDateDisabled",
1090
+ "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
1091
+ },
1092
+ {
1093
+ "kind": "field",
1094
+ "name": "isDateHighlighted",
1095
+ "type": {
1096
+ "text": "(date: Date) => string | boolean"
1097
+ },
1098
+ "default": "isDateHighlighted",
1099
+ "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
1100
+ },
1101
+ {
1102
+ "kind": "field",
1103
+ "name": "activeFocus",
1037
1104
  "type": {
1038
1105
  "text": "boolean"
1039
1106
  },
1040
- "default": "false",
1041
- "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.",
1042
- "attribute": "loading",
1043
- "reflects": true
1107
+ "privacy": "private",
1108
+ "default": "false"
1109
+ },
1110
+ {
1111
+ "kind": "field",
1112
+ "name": "focusedDay",
1113
+ "privacy": "private",
1114
+ "default": "new Date()"
1044
1115
  },
1045
1116
  {
1046
1117
  "kind": "method",
1047
- "name": "renderLink",
1118
+ "name": "focus",
1119
+ "parameters": [
1120
+ {
1121
+ "name": "options",
1122
+ "optional": true,
1123
+ "type": {
1124
+ "text": "FocusOptions & { target: \"day\" | \"month\" }"
1125
+ },
1126
+ "description": "An object which controls aspects of the focusing process."
1127
+ }
1128
+ ],
1129
+ "description": "Programmatically move focus to the calendar."
1130
+ },
1131
+ {
1132
+ "kind": "method",
1133
+ "name": "handleValueChange",
1134
+ "privacy": "protected"
1135
+ },
1136
+ {
1137
+ "kind": "method",
1138
+ "name": "handleFocusedDayChange",
1139
+ "privacy": "protected"
1140
+ },
1141
+ {
1142
+ "kind": "method",
1143
+ "name": "handleLangChange",
1144
+ "privacy": "private"
1145
+ },
1146
+ {
1147
+ "kind": "field",
1148
+ "name": "handleDaySelect",
1149
+ "privacy": "private"
1150
+ },
1151
+ {
1152
+ "kind": "method",
1153
+ "name": "addDays",
1048
1154
  "privacy": "private",
1049
1155
  "parameters": [
1050
1156
  {
1051
- "name": "innards",
1157
+ "name": "days",
1052
1158
  "type": {
1053
- "text": "TemplateResult"
1159
+ "text": "number"
1054
1160
  }
1055
1161
  }
1056
- ],
1057
- "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."
1162
+ ]
1058
1163
  },
1059
1164
  {
1060
1165
  "kind": "method",
1061
- "name": "renderButton",
1166
+ "name": "addMonths",
1062
1167
  "privacy": "private",
1063
1168
  "parameters": [
1064
1169
  {
1065
- "name": "innards",
1170
+ "name": "months",
1066
1171
  "type": {
1067
- "text": "TemplateResult"
1172
+ "text": "number"
1068
1173
  }
1069
1174
  }
1070
1175
  ]
1071
1176
  },
1072
1177
  {
1073
1178
  "kind": "method",
1074
- "name": "renderLightDom",
1179
+ "name": "addYears",
1180
+ "privacy": "private",
1181
+ "parameters": [
1182
+ {
1183
+ "name": "years",
1184
+ "type": {
1185
+ "text": "number"
1186
+ }
1187
+ }
1188
+ ]
1189
+ },
1190
+ {
1191
+ "kind": "method",
1192
+ "name": "startOfWeek",
1075
1193
  "privacy": "private"
1076
1194
  },
1077
1195
  {
1078
- "kind": "field",
1079
- "name": "handleOuterClick",
1196
+ "kind": "method",
1197
+ "name": "endOfWeek",
1080
1198
  "privacy": "private"
1081
1199
  },
1082
1200
  {
1083
1201
  "kind": "method",
1084
- "name": "handleClick",
1202
+ "name": "setMonth",
1085
1203
  "privacy": "private",
1086
1204
  "parameters": [
1087
1205
  {
1088
- "name": "e",
1206
+ "name": "month",
1089
1207
  "type": {
1090
- "text": "Event"
1208
+ "text": "number"
1091
1209
  }
1092
1210
  }
1093
1211
  ]
1094
1212
  },
1095
1213
  {
1096
1214
  "kind": "method",
1097
- "name": "handleProxyChange",
1215
+ "name": "setYear",
1098
1216
  "privacy": "private",
1099
1217
  "parameters": [
1100
1218
  {
1101
- "name": "e",
1219
+ "name": "year",
1102
1220
  "type": {
1103
- "text": "Event"
1221
+ "text": "number"
1104
1222
  }
1105
1223
  }
1106
- ],
1107
- "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."
1224
+ ]
1225
+ },
1226
+ {
1227
+ "kind": "method",
1228
+ "name": "setFocusedDay",
1229
+ "privacy": "private",
1230
+ "parameters": [
1231
+ {
1232
+ "name": "day",
1233
+ "type": {
1234
+ "text": "Date"
1235
+ }
1236
+ }
1237
+ ]
1108
1238
  },
1109
1239
  {
1110
1240
  "kind": "field",
1111
- "name": "disabled",
1112
- "type": {
1113
- "text": "boolean"
1114
- },
1115
- "default": "false",
1116
- "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1117
- "attribute": "disabled",
1118
- "reflects": true,
1119
- "inheritedFrom": {
1120
- "name": "InputMixin",
1121
- "module": "src/common/mixins/InputMixin.ts"
1122
- }
1241
+ "name": "handleMonthSelect",
1242
+ "privacy": "private"
1123
1243
  },
1124
1244
  {
1125
1245
  "kind": "field",
1126
- "name": "name",
1246
+ "name": "handleYearSelect",
1247
+ "privacy": "private"
1248
+ },
1249
+ {
1250
+ "kind": "field",
1251
+ "name": "handleNextMonthClick",
1252
+ "privacy": "private"
1253
+ },
1254
+ {
1255
+ "kind": "field",
1256
+ "name": "handlePreviousMonthClick",
1257
+ "privacy": "private"
1258
+ },
1259
+ {
1260
+ "kind": "field",
1261
+ "name": "enableActiveFocus",
1262
+ "privacy": "private"
1263
+ },
1264
+ {
1265
+ "kind": "field",
1266
+ "name": "disableActiveFocus",
1267
+ "privacy": "private"
1268
+ }
1269
+ ],
1270
+ "events": [
1271
+ {
1272
+ "name": "nord-focus-date",
1127
1273
  "type": {
1128
- "text": "string | undefined"
1274
+ "text": "DateSelectEvent"
1129
1275
  },
1130
- "description": "The name of the form component.",
1131
- "attribute": "name",
1132
- "inheritedFrom": {
1133
- "name": "InputMixin",
1134
- "module": "src/common/mixins/InputMixin.ts"
1135
- }
1276
+ "description": "Dispatched when the calendar's focused date changes."
1136
1277
  },
1137
1278
  {
1138
- "kind": "field",
1279
+ "type": {
1280
+ "text": "DateSelectEvent"
1281
+ },
1282
+ "description": "Dispatched when a date is selected and the value changes.",
1283
+ "name": "change"
1284
+ }
1285
+ ],
1286
+ "attributes": [
1287
+ {
1139
1288
  "name": "value",
1140
1289
  "type": {
1141
1290
  "text": "string"
1142
1291
  },
1143
1292
  "default": "\"\"",
1144
- "description": "The value of the form component.",
1145
- "attribute": "value",
1146
- "inheritedFrom": {
1147
- "name": "InputMixin",
1148
- "module": "src/common/mixins/InputMixin.ts"
1149
- }
1293
+ "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1294
+ "fieldName": "value"
1150
1295
  },
1151
1296
  {
1152
- "kind": "field",
1153
- "name": "formAncestor",
1297
+ "name": "firstDayOfWeek",
1154
1298
  "type": {
1155
- "text": "HTMLFormElement | null"
1299
+ "text": "DaysOfWeek"
1156
1300
  },
1157
- "privacy": "private",
1158
- "default": "null",
1159
- "inheritedFrom": {
1160
- "name": "InputMixin",
1161
- "module": "src/common/mixins/InputMixin.ts"
1162
- }
1301
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1302
+ "fieldName": "firstDayOfWeek"
1163
1303
  },
1164
1304
  {
1165
- "kind": "field",
1166
- "name": "_formId",
1305
+ "name": "min",
1167
1306
  "type": {
1168
- "text": "string | undefined"
1307
+ "text": "string"
1169
1308
  },
1170
- "privacy": "protected",
1171
- "inheritedFrom": {
1172
- "name": "InputMixin",
1173
- "module": "src/common/mixins/InputMixin.ts"
1174
- }
1309
+ "default": "\"\"",
1310
+ "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.",
1311
+ "fieldName": "min"
1175
1312
  },
1176
1313
  {
1177
- "kind": "field",
1178
- "name": "form",
1179
- "type": {
1180
- "text": "HTMLFormElement | null"
1181
- },
1182
- "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
1183
- "attribute": "form",
1184
- "inheritedFrom": {
1185
- "name": "InputMixin",
1186
- "module": "src/common/mixins/InputMixin.ts"
1187
- }
1188
- },
1189
- {
1190
- "kind": "field",
1191
- "name": "focusableRef",
1192
- "privacy": "protected",
1193
- "inheritedFrom": {
1194
- "name": "FocusableMixin",
1195
- "module": "src/common/mixins/FocusableMixin.ts"
1196
- }
1197
- },
1198
- {
1199
- "kind": "method",
1200
- "name": "focus",
1201
- "parameters": [
1202
- {
1203
- "name": "options",
1204
- "optional": true,
1205
- "type": {
1206
- "text": "FocusOptions"
1207
- },
1208
- "description": "An object which controls aspects of the focusing process."
1209
- }
1210
- ],
1211
- "description": "Programmatically move focus to the component.",
1212
- "inheritedFrom": {
1213
- "name": "FocusableMixin",
1214
- "module": "src/common/mixins/FocusableMixin.ts"
1215
- }
1216
- },
1217
- {
1218
- "kind": "method",
1219
- "name": "blur",
1220
- "description": "Programmatically remove focus from the component.",
1221
- "inheritedFrom": {
1222
- "name": "FocusableMixin",
1223
- "module": "src/common/mixins/FocusableMixin.ts"
1224
- }
1225
- },
1226
- {
1227
- "kind": "method",
1228
- "name": "click",
1229
- "description": "Programmatically simulates a click on the component.",
1230
- "inheritedFrom": {
1231
- "name": "FocusableMixin",
1232
- "module": "src/common/mixins/FocusableMixin.ts"
1233
- }
1234
- }
1235
- ],
1236
- "attributes": [
1237
- {
1238
- "name": "variant",
1239
- "type": {
1240
- "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
1241
- },
1242
- "default": "\"default\"",
1243
- "description": "The style variant of the button.",
1244
- "fieldName": "variant"
1245
- },
1246
- {
1247
- "name": "type",
1248
- "type": {
1249
- "text": "\"button\" | \"submit\" | \"reset\""
1250
- },
1251
- "default": "\"submit\"",
1252
- "description": "The type of the button.",
1253
- "fieldName": "type"
1254
- },
1255
- {
1256
- "name": "size",
1257
- "type": {
1258
- "text": "\"s\" | \"m\" | \"l\""
1259
- },
1260
- "default": "\"m\"",
1261
- "description": "The size of the button.\nThis affects font-size and padding.",
1262
- "fieldName": "size"
1263
- },
1264
- {
1265
- "name": "aria-expanded",
1266
- "type": {
1267
- "text": "\"true\" | \"false\" | undefined"
1268
- },
1269
- "fieldName": "accessibleExpanded"
1270
- },
1271
- {
1272
- "name": "aria-haspopup",
1273
- "type": {
1274
- "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
1275
- },
1276
- "fieldName": "accessibleHasPopup"
1277
- },
1278
- {
1279
- "name": "href",
1280
- "type": {
1281
- "text": "string | undefined"
1282
- },
1283
- "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1284
- "fieldName": "href"
1285
- },
1286
- {
1287
- "name": "download",
1288
- "type": {
1289
- "text": "boolean"
1290
- },
1291
- "default": "false",
1292
- "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1293
- "fieldName": "download"
1294
- },
1295
- {
1296
- "name": "target",
1314
+ "name": "max",
1297
1315
  "type": {
1298
- "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1316
+ "text": "string"
1299
1317
  },
1300
- "default": "\"_self\"",
1301
- "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.",
1302
- "fieldName": "target"
1318
+ "default": "\"\"",
1319
+ "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.",
1320
+ "fieldName": "max"
1303
1321
  },
1304
1322
  {
1305
1323
  "name": "expand",
@@ -1307,92 +1325,42 @@
1307
1325
  "text": "boolean"
1308
1326
  },
1309
1327
  "default": "false",
1310
- "description": "Controls whether the button expands to fill the width of its container.",
1328
+ "description": "Controls whether the calendar expands to fill the width of its container.",
1311
1329
  "fieldName": "expand"
1312
- },
1313
- {
1314
- "name": "loading",
1315
- "type": {
1316
- "text": "boolean"
1317
- },
1318
- "default": "false",
1319
- "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.",
1320
- "fieldName": "loading"
1321
- },
1322
- {
1323
- "name": "disabled",
1324
- "type": {
1325
- "text": "boolean"
1326
- },
1327
- "default": "false",
1328
- "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1329
- "fieldName": "disabled",
1330
- "inheritedFrom": {
1331
- "name": "InputMixin",
1332
- "module": "src/common/mixins/InputMixin.ts"
1333
- }
1334
- },
1330
+ }
1331
+ ],
1332
+ "superclass": {
1333
+ "name": "LitElement",
1334
+ "package": "lit"
1335
+ },
1336
+ "localization": [
1335
1337
  {
1336
- "name": "name",
1337
- "type": {
1338
- "text": "string | undefined"
1339
- },
1340
- "description": "The name of the form component.",
1341
- "fieldName": "name",
1342
- "inheritedFrom": {
1343
- "name": "InputMixin",
1344
- "module": "src/common/mixins/InputMixin.ts"
1345
- }
1338
+ "name": "prevMonthLabel",
1339
+ "description": "Accessible label for the previous month button."
1346
1340
  },
1347
1341
  {
1348
- "name": "value",
1349
- "type": {
1350
- "text": "string"
1351
- },
1352
- "default": "\"\"",
1353
- "description": "The value of the form component.",
1354
- "fieldName": "value",
1355
- "inheritedFrom": {
1356
- "name": "InputMixin",
1357
- "module": "src/common/mixins/InputMixin.ts"
1358
- }
1342
+ "name": "nextMonthLabel",
1343
+ "description": "Accessible label for the next month button."
1359
1344
  },
1360
1345
  {
1361
- "name": "form",
1362
- "type": {
1363
- "text": "HTMLFormElement | null"
1364
- },
1365
- "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
1366
- "fieldName": "form",
1367
- "inheritedFrom": {
1368
- "name": "InputMixin",
1369
- "module": "src/common/mixins/InputMixin.ts"
1370
- }
1371
- }
1372
- ],
1373
- "mixins": [
1374
- {
1375
- "name": "InputMixin",
1376
- "module": "/src/common/mixins/InputMixin.js"
1346
+ "name": "monthSelectLabel",
1347
+ "description": "Accessible label for the month select."
1377
1348
  },
1378
1349
  {
1379
- "name": "FocusableMixin",
1380
- "module": "/src/common/mixins/FocusableMixin.js"
1350
+ "name": "yearSelectLabel",
1351
+ "description": "Accessible label for the year select."
1381
1352
  }
1382
1353
  ],
1383
- "superclass": {
1384
- "name": "LitElement",
1385
- "package": "lit"
1386
- },
1387
- "localization": [],
1388
1354
  "status": "ready",
1389
- "category": "action",
1390
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- 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\n---\n\n## Icon usage in button\n\nIllustrative icons should be always positioned in the `start` slot:\n\n<img src=\"/img/components/button/start-slot.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button with icon in start slot\" />\n\nWhen a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](/nordicons/) is automatically placed in the `end` slot:\n\n<img src=\"/img/components/button/dropdown.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Dropdown button\" />\n\nEach button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n<img src=\"/img/components/button/icon-sizes.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button icon sizes\" />\n\nUse `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/):\n\n<img src=\"/img/components/button/create.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Create/add type primary action with icon\" />\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",
1355
+ "category": "list",
1356
+ "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",
1391
1357
  "examples": [],
1392
1358
  "dependencies": [
1393
- "spinner"
1359
+ "button",
1360
+ "visually-hidden",
1361
+ "icon"
1394
1362
  ],
1395
- "tagName": "nord-button",
1363
+ "tagName": "nord-calendar",
1396
1364
  "customElement": true
1397
1365
  }
1398
1366
  ],
@@ -1401,159 +1369,262 @@
1401
1369
  "kind": "js",
1402
1370
  "name": "default",
1403
1371
  "declaration": {
1404
- "name": "Button",
1405
- "module": "src/button/Button.ts"
1372
+ "name": "Calendar",
1373
+ "module": "src/calendar/Calendar.ts"
1406
1374
  }
1407
1375
  },
1408
1376
  {
1409
1377
  "kind": "custom-element-definition",
1410
- "name": "nord-button",
1378
+ "name": "nord-calendar",
1411
1379
  "declaration": {
1412
- "name": "Button",
1413
- "module": "src/button/Button.ts"
1380
+ "name": "Calendar",
1381
+ "module": "src/calendar/Calendar.ts"
1414
1382
  }
1415
1383
  }
1416
1384
  ]
1417
1385
  },
1418
1386
  {
1419
1387
  "kind": "javascript-module",
1420
- "path": "src/calendar/Calendar.ts",
1388
+ "path": "src/calendar/DateSelectEvent.ts",
1421
1389
  "declarations": [
1422
1390
  {
1423
1391
  "kind": "class",
1424
- "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.",
1425
- "name": "Calendar",
1392
+ "description": "",
1393
+ "name": "DateSelectEvent",
1394
+ "superclass": {
1395
+ "name": "NordEvent",
1396
+ "module": "/src/common/events.js"
1397
+ }
1398
+ }
1399
+ ],
1400
+ "exports": [
1401
+ {
1402
+ "kind": "js",
1403
+ "name": "DateSelectEvent",
1404
+ "declaration": {
1405
+ "name": "DateSelectEvent",
1406
+ "module": "src/calendar/DateSelectEvent.ts"
1407
+ }
1408
+ }
1409
+ ]
1410
+ },
1411
+ {
1412
+ "kind": "javascript-module",
1413
+ "path": "src/calendar/localization.ts",
1414
+ "declarations": [
1415
+ {
1416
+ "kind": "variable",
1417
+ "name": "calendarLocalization",
1418
+ "type": {
1419
+ "text": "object"
1420
+ },
1421
+ "default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n}"
1422
+ }
1423
+ ],
1424
+ "exports": [
1425
+ {
1426
+ "kind": "js",
1427
+ "name": "default",
1428
+ "declaration": {
1429
+ "name": "calendarLocalization",
1430
+ "module": "src/calendar/localization.ts"
1431
+ }
1432
+ }
1433
+ ]
1434
+ },
1435
+ {
1436
+ "kind": "javascript-module",
1437
+ "path": "src/button/Button.ts",
1438
+ "declarations": [
1439
+ {
1440
+ "kind": "class",
1441
+ "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.",
1442
+ "name": "Button",
1426
1443
  "cssProperties": [
1427
1444
  {
1428
- "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
1429
- "name": "--n-calendar-border-radius",
1430
- "default": "var(--n-border-radius)"
1445
+ "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
1446
+ "name": "--n-button-border-radius",
1447
+ "default": "var(--n-border-radius-s)"
1431
1448
  },
1432
1449
  {
1433
- "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
1434
- "name": "--n-calendar-box-shadow",
1435
- "default": "var(--n-box-shadow-popout)"
1450
+ "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
1451
+ "name": "--n-button-gap",
1452
+ "default": "var(--n-space-s)"
1453
+ },
1454
+ {
1455
+ "description": "Controls the overlayed gradient background on the button.",
1456
+ "name": "--n-button-gradient",
1457
+ "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
1458
+ },
1459
+ {
1460
+ "description": "Controls the background color of the button, using our [color tokens](/tokens/#color).",
1461
+ "name": "--n-button-background-color",
1462
+ "default": "var(--n-color-button)"
1463
+ },
1464
+ {
1465
+ "description": "Controls the border color of the button, using our [color tokens](/tokens/#color).",
1466
+ "name": "--n-button-border-color",
1467
+ "default": "var(--n-color-border-strong)"
1468
+ },
1469
+ {
1470
+ "description": "Controls the text alignment for the text in the button.",
1471
+ "name": "--n-button-text-align",
1472
+ "default": "center"
1473
+ },
1474
+ {
1475
+ "description": "Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).",
1476
+ "name": "--n-button-box-shadow",
1477
+ "default": "var(--n-box-shadow)"
1478
+ },
1479
+ {
1480
+ "description": "Controls the color of the text within the button, using our [color tokens](/tokens/#color).",
1481
+ "name": "--n-button-color",
1482
+ "default": "var(--n-color-text)"
1483
+ },
1484
+ {
1485
+ "description": "Controls the inline, or left and right, padding of the button.",
1486
+ "name": "--n-button-padding-inline",
1487
+ "default": "calc(var(--n-space-m) / 1.2)"
1488
+ },
1489
+ {
1490
+ "description": "Controls the size of the text within the button, using our [font tokens](/tokens/#font).",
1491
+ "name": "--n-button-font-size",
1492
+ "default": "var(--n-font-size-m)"
1493
+ },
1494
+ {
1495
+ "description": "Controls the weight of the text within the button, using our [font tokens](/tokens/#font).",
1496
+ "name": "--n-button-font-weight",
1497
+ "default": "var(--n-font-weight)"
1498
+ },
1499
+ {
1500
+ "description": "Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).",
1501
+ "name": "--n-button-min-block-size",
1502
+ "default": "var(--n-space-xl)"
1503
+ },
1504
+ {
1505
+ "description": "Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.",
1506
+ "name": "--n-button-toggle-icon-color",
1507
+ "default": "var(--n-color-icon)"
1436
1508
  }
1437
1509
  ],
1438
- "members": [
1510
+ "slots": [
1439
1511
  {
1440
- "kind": "field",
1441
- "name": "monthSelectNode",
1442
- "type": {
1443
- "text": "HTMLElement"
1444
- },
1445
- "privacy": "private"
1512
+ "description": "The button content",
1513
+ "name": ""
1446
1514
  },
1447
1515
  {
1448
- "kind": "field",
1449
- "name": "focusedDayNode",
1450
- "type": {
1451
- "text": "HTMLButtonElement"
1452
- },
1453
- "privacy": "private"
1516
+ "description": "Used to place content at the start of button text. Typically used for icons.",
1517
+ "name": "start"
1454
1518
  },
1455
1519
  {
1456
- "kind": "field",
1457
- "name": "direction",
1458
- "privacy": "private",
1459
- "default": "new DirectionController(this)"
1460
- },
1520
+ "description": "Used to place content at the end of button text. Typically used for icons.",
1521
+ "name": "end"
1522
+ }
1523
+ ],
1524
+ "members": [
1461
1525
  {
1462
1526
  "kind": "field",
1463
- "name": "swipe",
1527
+ "name": "defaultSlot",
1464
1528
  "privacy": "private",
1465
- "default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
1529
+ "default": "new SlotController(this)"
1466
1530
  },
1467
1531
  {
1468
1532
  "kind": "field",
1469
- "name": "shortcuts",
1533
+ "name": "buttonRef",
1470
1534
  "privacy": "private"
1471
1535
  },
1472
1536
  {
1473
1537
  "kind": "field",
1474
- "name": "localize",
1538
+ "name": "events",
1475
1539
  "privacy": "private",
1476
- "default": "new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })"
1540
+ "default": "new EventController(this)"
1477
1541
  },
1478
1542
  {
1479
1543
  "kind": "field",
1480
- "name": "dateFormatShort",
1481
- "type": {
1482
- "text": "Intl.DateTimeFormat"
1483
- },
1544
+ "name": "lightDom",
1484
1545
  "privacy": "private",
1485
- "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"
1546
+ "default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
1486
1547
  },
1487
1548
  {
1488
1549
  "kind": "field",
1489
- "name": "monthNames",
1550
+ "name": "variant",
1490
1551
  "type": {
1491
- "text": "string[]"
1552
+ "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
1492
1553
  },
1493
- "privacy": "private"
1554
+ "default": "\"default\"",
1555
+ "description": "The style variant of the button.",
1556
+ "attribute": "variant",
1557
+ "reflects": true
1494
1558
  },
1495
1559
  {
1496
1560
  "kind": "field",
1497
- "name": "monthNamesShort",
1561
+ "name": "type",
1498
1562
  "type": {
1499
- "text": "string[]"
1563
+ "text": "\"button\" | \"submit\" | \"reset\""
1500
1564
  },
1501
- "privacy": "private"
1565
+ "default": "\"submit\"",
1566
+ "description": "The type of the button.",
1567
+ "attribute": "type",
1568
+ "reflects": true
1502
1569
  },
1503
1570
  {
1504
1571
  "kind": "field",
1505
- "name": "dayNames",
1572
+ "name": "size",
1506
1573
  "type": {
1507
- "text": "string[]"
1574
+ "text": "\"s\" | \"m\" | \"l\""
1508
1575
  },
1509
- "privacy": "private"
1576
+ "default": "\"m\"",
1577
+ "description": "The size of the button.\nThis affects font-size and padding.",
1578
+ "attribute": "size",
1579
+ "reflects": true
1510
1580
  },
1511
1581
  {
1512
1582
  "kind": "field",
1513
- "name": "dayNamesShort",
1583
+ "name": "accessibleExpanded",
1514
1584
  "type": {
1515
- "text": "string[]"
1585
+ "text": "\"true\" | \"false\" | undefined"
1516
1586
  },
1517
- "privacy": "private"
1587
+ "privacy": "private",
1588
+ "attribute": "aria-expanded"
1518
1589
  },
1519
1590
  {
1520
1591
  "kind": "field",
1521
- "name": "value",
1592
+ "name": "accessibleHasPopup",
1522
1593
  "type": {
1523
- "text": "string"
1594
+ "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
1524
1595
  },
1525
- "default": "\"\"",
1526
- "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1527
- "attribute": "value"
1596
+ "privacy": "private",
1597
+ "attribute": "aria-haspopup"
1528
1598
  },
1529
1599
  {
1530
1600
  "kind": "field",
1531
- "name": "firstDayOfWeek",
1601
+ "name": "href",
1532
1602
  "type": {
1533
- "text": "DaysOfWeek"
1603
+ "text": "string | undefined"
1534
1604
  },
1535
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1536
- "attribute": "firstDayOfWeek"
1605
+ "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1606
+ "attribute": "href",
1607
+ "reflects": true
1537
1608
  },
1538
1609
  {
1539
1610
  "kind": "field",
1540
- "name": "min",
1611
+ "name": "download",
1541
1612
  "type": {
1542
- "text": "string"
1613
+ "text": "boolean"
1543
1614
  },
1544
- "default": "\"\"",
1545
- "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.",
1546
- "attribute": "min"
1615
+ "default": "false",
1616
+ "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1617
+ "attribute": "download"
1547
1618
  },
1548
1619
  {
1549
1620
  "kind": "field",
1550
- "name": "max",
1621
+ "name": "target",
1551
1622
  "type": {
1552
- "text": "string"
1623
+ "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1553
1624
  },
1554
- "default": "\"\"",
1555
- "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.",
1556
- "attribute": "max"
1625
+ "default": "\"_self\"",
1626
+ "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.",
1627
+ "attribute": "target"
1557
1628
  },
1558
1629
  {
1559
1630
  "kind": "field",
@@ -1562,430 +1633,357 @@
1562
1633
  "text": "boolean"
1563
1634
  },
1564
1635
  "default": "false",
1565
- "description": "Controls whether the calendar expands to fill the width of its container.",
1636
+ "description": "Controls whether the button expands to fill the width of its container.",
1566
1637
  "attribute": "expand",
1567
1638
  "reflects": true
1568
1639
  },
1569
1640
  {
1570
1641
  "kind": "field",
1571
- "name": "isDateDisabled",
1572
- "type": {
1573
- "text": "DatePredicate"
1574
- },
1575
- "default": "isDateDisabled",
1576
- "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
1577
- },
1578
- {
1579
- "kind": "field",
1580
- "name": "isDateHighlighted",
1581
- "type": {
1582
- "text": "(date: Date) => string | boolean"
1583
- },
1584
- "default": "isDateHighlighted",
1585
- "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
1586
- },
1587
- {
1588
- "kind": "field",
1589
- "name": "activeFocus",
1642
+ "name": "loading",
1590
1643
  "type": {
1591
1644
  "text": "boolean"
1592
1645
  },
1593
- "privacy": "private",
1594
- "default": "false"
1595
- },
1596
- {
1597
- "kind": "field",
1598
- "name": "focusedDay",
1599
- "privacy": "private",
1600
- "default": "new Date()"
1601
- },
1602
- {
1603
- "kind": "method",
1604
- "name": "focus",
1605
- "parameters": [
1606
- {
1607
- "name": "options",
1608
- "optional": true,
1609
- "type": {
1610
- "text": "FocusOptions & { target: \"day\" | \"month\" }"
1611
- },
1612
- "description": "An object which controls aspects of the focusing process."
1613
- }
1614
- ],
1615
- "description": "Programmatically move focus to the calendar."
1616
- },
1617
- {
1618
- "kind": "method",
1619
- "name": "handleValueChange",
1620
- "privacy": "protected"
1621
- },
1622
- {
1623
- "kind": "method",
1624
- "name": "handleFocusedDayChange",
1625
- "privacy": "protected"
1626
- },
1627
- {
1628
- "kind": "method",
1629
- "name": "handleLangChange",
1630
- "privacy": "private"
1631
- },
1632
- {
1633
- "kind": "field",
1634
- "name": "handleDaySelect",
1635
- "privacy": "private"
1636
- },
1637
- {
1638
- "kind": "method",
1639
- "name": "addDays",
1640
- "privacy": "private",
1641
- "parameters": [
1642
- {
1643
- "name": "days",
1644
- "type": {
1645
- "text": "number"
1646
- }
1647
- }
1648
- ]
1646
+ "default": "false",
1647
+ "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.",
1648
+ "attribute": "loading",
1649
+ "reflects": true
1649
1650
  },
1650
1651
  {
1651
1652
  "kind": "method",
1652
- "name": "addMonths",
1653
+ "name": "renderLink",
1653
1654
  "privacy": "private",
1654
1655
  "parameters": [
1655
1656
  {
1656
- "name": "months",
1657
+ "name": "innards",
1657
1658
  "type": {
1658
- "text": "number"
1659
+ "text": "TemplateResult"
1659
1660
  }
1660
1661
  }
1661
- ]
1662
+ ],
1663
+ "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."
1662
1664
  },
1663
1665
  {
1664
1666
  "kind": "method",
1665
- "name": "addYears",
1667
+ "name": "renderButton",
1666
1668
  "privacy": "private",
1667
1669
  "parameters": [
1668
1670
  {
1669
- "name": "years",
1671
+ "name": "innards",
1670
1672
  "type": {
1671
- "text": "number"
1673
+ "text": "TemplateResult"
1672
1674
  }
1673
1675
  }
1674
1676
  ]
1675
1677
  },
1676
1678
  {
1677
1679
  "kind": "method",
1678
- "name": "startOfWeek",
1680
+ "name": "renderLightDom",
1679
1681
  "privacy": "private"
1680
1682
  },
1681
1683
  {
1682
- "kind": "method",
1683
- "name": "endOfWeek",
1684
+ "kind": "field",
1685
+ "name": "handleOuterClick",
1684
1686
  "privacy": "private"
1685
1687
  },
1686
1688
  {
1687
1689
  "kind": "method",
1688
- "name": "setMonth",
1690
+ "name": "handleClick",
1689
1691
  "privacy": "private",
1690
1692
  "parameters": [
1691
1693
  {
1692
- "name": "month",
1694
+ "name": "e",
1693
1695
  "type": {
1694
- "text": "number"
1696
+ "text": "Event"
1695
1697
  }
1696
1698
  }
1697
1699
  ]
1698
1700
  },
1699
1701
  {
1700
1702
  "kind": "method",
1701
- "name": "setYear",
1703
+ "name": "handleProxyChange",
1702
1704
  "privacy": "private",
1703
1705
  "parameters": [
1704
1706
  {
1705
- "name": "year",
1707
+ "name": "e",
1706
1708
  "type": {
1707
- "text": "number"
1709
+ "text": "Event"
1708
1710
  }
1709
1711
  }
1710
- ]
1712
+ ],
1713
+ "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."
1711
1714
  },
1712
1715
  {
1713
- "kind": "method",
1714
- "name": "setFocusedDay",
1715
- "privacy": "private",
1716
- "parameters": [
1717
- {
1718
- "name": "day",
1719
- "type": {
1720
- "text": "Date"
1721
- }
1722
- }
1723
- ]
1716
+ "kind": "field",
1717
+ "name": "disabled",
1718
+ "type": {
1719
+ "text": "boolean"
1720
+ },
1721
+ "default": "false",
1722
+ "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1723
+ "attribute": "disabled",
1724
+ "reflects": true,
1725
+ "inheritedFrom": {
1726
+ "name": "InputMixin",
1727
+ "module": "src/common/mixins/InputMixin.ts"
1728
+ }
1729
+ },
1730
+ {
1731
+ "kind": "field",
1732
+ "name": "name",
1733
+ "type": {
1734
+ "text": "string | undefined"
1735
+ },
1736
+ "description": "The name of the form component.",
1737
+ "attribute": "name",
1738
+ "inheritedFrom": {
1739
+ "name": "InputMixin",
1740
+ "module": "src/common/mixins/InputMixin.ts"
1741
+ }
1742
+ },
1743
+ {
1744
+ "kind": "field",
1745
+ "name": "value",
1746
+ "type": {
1747
+ "text": "string"
1748
+ },
1749
+ "default": "\"\"",
1750
+ "description": "The value of the form component.",
1751
+ "attribute": "value",
1752
+ "inheritedFrom": {
1753
+ "name": "InputMixin",
1754
+ "module": "src/common/mixins/InputMixin.ts"
1755
+ }
1756
+ },
1757
+ {
1758
+ "kind": "field",
1759
+ "name": "formAncestor",
1760
+ "type": {
1761
+ "text": "HTMLFormElement | null"
1762
+ },
1763
+ "privacy": "private",
1764
+ "default": "null",
1765
+ "inheritedFrom": {
1766
+ "name": "InputMixin",
1767
+ "module": "src/common/mixins/InputMixin.ts"
1768
+ }
1724
1769
  },
1725
1770
  {
1726
1771
  "kind": "field",
1727
- "name": "handleMonthSelect",
1728
- "privacy": "private"
1772
+ "name": "_formId",
1773
+ "type": {
1774
+ "text": "string | undefined"
1775
+ },
1776
+ "privacy": "protected",
1777
+ "inheritedFrom": {
1778
+ "name": "InputMixin",
1779
+ "module": "src/common/mixins/InputMixin.ts"
1780
+ }
1729
1781
  },
1730
1782
  {
1731
1783
  "kind": "field",
1732
- "name": "handleYearSelect",
1733
- "privacy": "private"
1784
+ "name": "form",
1785
+ "type": {
1786
+ "text": "HTMLFormElement | null"
1787
+ },
1788
+ "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
1789
+ "attribute": "form",
1790
+ "inheritedFrom": {
1791
+ "name": "InputMixin",
1792
+ "module": "src/common/mixins/InputMixin.ts"
1793
+ }
1734
1794
  },
1735
1795
  {
1736
1796
  "kind": "field",
1737
- "name": "handleNextMonthClick",
1738
- "privacy": "private"
1797
+ "name": "focusableRef",
1798
+ "privacy": "protected",
1799
+ "inheritedFrom": {
1800
+ "name": "FocusableMixin",
1801
+ "module": "src/common/mixins/FocusableMixin.ts"
1802
+ }
1739
1803
  },
1740
1804
  {
1741
- "kind": "field",
1742
- "name": "handlePreviousMonthClick",
1743
- "privacy": "private"
1805
+ "kind": "method",
1806
+ "name": "focus",
1807
+ "parameters": [
1808
+ {
1809
+ "name": "options",
1810
+ "optional": true,
1811
+ "type": {
1812
+ "text": "FocusOptions"
1813
+ },
1814
+ "description": "An object which controls aspects of the focusing process."
1815
+ }
1816
+ ],
1817
+ "description": "Programmatically move focus to the component.",
1818
+ "inheritedFrom": {
1819
+ "name": "FocusableMixin",
1820
+ "module": "src/common/mixins/FocusableMixin.ts"
1821
+ }
1744
1822
  },
1745
1823
  {
1746
- "kind": "field",
1747
- "name": "enableActiveFocus",
1748
- "privacy": "private"
1824
+ "kind": "method",
1825
+ "name": "blur",
1826
+ "description": "Programmatically remove focus from the component.",
1827
+ "inheritedFrom": {
1828
+ "name": "FocusableMixin",
1829
+ "module": "src/common/mixins/FocusableMixin.ts"
1830
+ }
1749
1831
  },
1750
1832
  {
1751
- "kind": "field",
1752
- "name": "disableActiveFocus",
1753
- "privacy": "private"
1833
+ "kind": "method",
1834
+ "name": "click",
1835
+ "description": "Programmatically simulates a click on the component.",
1836
+ "inheritedFrom": {
1837
+ "name": "FocusableMixin",
1838
+ "module": "src/common/mixins/FocusableMixin.ts"
1839
+ }
1754
1840
  }
1755
1841
  ],
1756
- "events": [
1842
+ "attributes": [
1757
1843
  {
1758
- "name": "nord-focus-date",
1844
+ "name": "variant",
1759
1845
  "type": {
1760
- "text": "DateSelectEvent"
1846
+ "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
1761
1847
  },
1762
- "description": "Dispatched when the calendar's focused date changes."
1848
+ "default": "\"default\"",
1849
+ "description": "The style variant of the button.",
1850
+ "fieldName": "variant"
1763
1851
  },
1764
1852
  {
1853
+ "name": "type",
1765
1854
  "type": {
1766
- "text": "DateSelectEvent"
1855
+ "text": "\"button\" | \"submit\" | \"reset\""
1767
1856
  },
1768
- "description": "Dispatched when a date is selected and the value changes.",
1769
- "name": "change"
1770
- }
1771
- ],
1772
- "attributes": [
1857
+ "default": "\"submit\"",
1858
+ "description": "The type of the button.",
1859
+ "fieldName": "type"
1860
+ },
1773
1861
  {
1774
- "name": "value",
1862
+ "name": "size",
1775
1863
  "type": {
1776
- "text": "string"
1864
+ "text": "\"s\" | \"m\" | \"l\""
1777
1865
  },
1778
- "default": "\"\"",
1779
- "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
1780
- "fieldName": "value"
1866
+ "default": "\"m\"",
1867
+ "description": "The size of the button.\nThis affects font-size and padding.",
1868
+ "fieldName": "size"
1781
1869
  },
1782
1870
  {
1783
- "name": "firstDayOfWeek",
1871
+ "name": "aria-expanded",
1784
1872
  "type": {
1785
- "text": "DaysOfWeek"
1873
+ "text": "\"true\" | \"false\" | undefined"
1786
1874
  },
1787
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1788
- "fieldName": "firstDayOfWeek"
1875
+ "fieldName": "accessibleExpanded"
1789
1876
  },
1790
1877
  {
1791
- "name": "min",
1878
+ "name": "aria-haspopup",
1792
1879
  "type": {
1793
- "text": "string"
1880
+ "text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
1794
1881
  },
1795
- "default": "\"\"",
1796
- "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.",
1797
- "fieldName": "min"
1882
+ "fieldName": "accessibleHasPopup"
1798
1883
  },
1799
1884
  {
1800
- "name": "max",
1885
+ "name": "href",
1801
1886
  "type": {
1802
- "text": "string"
1887
+ "text": "string | undefined"
1803
1888
  },
1804
- "default": "\"\"",
1805
- "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.",
1806
- "fieldName": "max"
1889
+ "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
1890
+ "fieldName": "href"
1807
1891
  },
1808
1892
  {
1809
- "name": "expand",
1893
+ "name": "download",
1810
1894
  "type": {
1811
1895
  "text": "boolean"
1812
1896
  },
1813
1897
  "default": "false",
1814
- "description": "Controls whether the calendar expands to fill the width of its container.",
1815
- "fieldName": "expand"
1816
- }
1817
- ],
1818
- "superclass": {
1819
- "name": "LitElement",
1820
- "package": "lit"
1821
- },
1822
- "localization": [
1823
- {
1824
- "name": "prevMonthLabel",
1825
- "description": "Accessible label for the previous month button."
1826
- },
1827
- {
1828
- "name": "nextMonthLabel",
1829
- "description": "Accessible label for the next month button."
1830
- },
1831
- {
1832
- "name": "monthSelectLabel",
1833
- "description": "Accessible label for the month select."
1834
- },
1835
- {
1836
- "name": "yearSelectLabel",
1837
- "description": "Accessible label for the year select."
1838
- }
1839
- ],
1840
- "status": "ready",
1841
- "category": "list",
1842
- "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",
1843
- "examples": [],
1844
- "dependencies": [
1845
- "button",
1846
- "visually-hidden",
1847
- "icon"
1848
- ],
1849
- "tagName": "nord-calendar",
1850
- "customElement": true
1851
- }
1852
- ],
1853
- "exports": [
1854
- {
1855
- "kind": "js",
1856
- "name": "default",
1857
- "declaration": {
1858
- "name": "Calendar",
1859
- "module": "src/calendar/Calendar.ts"
1860
- }
1861
- },
1862
- {
1863
- "kind": "custom-element-definition",
1864
- "name": "nord-calendar",
1865
- "declaration": {
1866
- "name": "Calendar",
1867
- "module": "src/calendar/Calendar.ts"
1868
- }
1869
- }
1870
- ]
1871
- },
1872
- {
1873
- "kind": "javascript-module",
1874
- "path": "src/calendar/DateSelectEvent.ts",
1875
- "declarations": [
1876
- {
1877
- "kind": "class",
1878
- "description": "",
1879
- "name": "DateSelectEvent",
1880
- "superclass": {
1881
- "name": "NordEvent",
1882
- "module": "/src/common/events.js"
1883
- }
1884
- }
1885
- ],
1886
- "exports": [
1887
- {
1888
- "kind": "js",
1889
- "name": "DateSelectEvent",
1890
- "declaration": {
1891
- "name": "DateSelectEvent",
1892
- "module": "src/calendar/DateSelectEvent.ts"
1893
- }
1894
- }
1895
- ]
1896
- },
1897
- {
1898
- "kind": "javascript-module",
1899
- "path": "src/calendar/localization.ts",
1900
- "declarations": [
1901
- {
1902
- "kind": "variable",
1903
- "name": "calendarLocalization",
1904
- "type": {
1905
- "text": "object"
1906
- },
1907
- "default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n}"
1908
- }
1909
- ],
1910
- "exports": [
1911
- {
1912
- "kind": "js",
1913
- "name": "default",
1914
- "declaration": {
1915
- "name": "calendarLocalization",
1916
- "module": "src/calendar/localization.ts"
1917
- }
1918
- }
1919
- ]
1920
- },
1921
- {
1922
- "kind": "javascript-module",
1923
- "path": "src/button-group/ButtonGroup.ts",
1924
- "declarations": [
1925
- {
1926
- "kind": "class",
1927
- "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
1928
- "name": "ButtonGroup",
1929
- "cssProperties": [
1930
- {
1931
- "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
1932
- "name": "--n-button-group-border-radius",
1933
- "default": "var(--n-border-radius-s)"
1898
+ "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
1899
+ "fieldName": "download"
1934
1900
  },
1935
1901
  {
1936
- "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
1937
- "name": "--n-button-group-box-shadow",
1938
- "default": "var(--n-box-shadow)"
1939
- }
1940
- ],
1941
- "slots": [
1902
+ "name": "target",
1903
+ "type": {
1904
+ "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
1905
+ },
1906
+ "default": "\"_self\"",
1907
+ "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.",
1908
+ "fieldName": "target"
1909
+ },
1942
1910
  {
1943
- "description": "The button group content",
1944
- "name": ""
1945
- }
1946
- ],
1947
- "members": [
1911
+ "name": "expand",
1912
+ "type": {
1913
+ "text": "boolean"
1914
+ },
1915
+ "default": "false",
1916
+ "description": "Controls whether the button expands to fill the width of its container.",
1917
+ "fieldName": "expand"
1918
+ },
1948
1919
  {
1949
- "kind": "field",
1950
- "name": "direction",
1920
+ "name": "loading",
1951
1921
  "type": {
1952
- "text": "\"vertical\" | \"horizontal\""
1922
+ "text": "boolean"
1953
1923
  },
1954
- "default": "\"horizontal\"",
1955
- "description": "The direction of the button group.",
1956
- "attribute": "direction",
1957
- "reflects": true
1924
+ "default": "false",
1925
+ "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.",
1926
+ "fieldName": "loading"
1958
1927
  },
1959
1928
  {
1960
- "kind": "field",
1961
- "name": "role",
1929
+ "name": "disabled",
1962
1930
  "type": {
1963
- "text": "string"
1931
+ "text": "boolean"
1964
1932
  },
1965
- "default": "\"group\"",
1966
- "description": "The appropriate role for the containing element.",
1967
- "attribute": "role",
1968
- "reflects": true
1969
- }
1970
- ],
1971
- "attributes": [
1933
+ "default": "false",
1934
+ "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
1935
+ "fieldName": "disabled",
1936
+ "inheritedFrom": {
1937
+ "name": "InputMixin",
1938
+ "module": "src/common/mixins/InputMixin.ts"
1939
+ }
1940
+ },
1972
1941
  {
1973
- "name": "direction",
1942
+ "name": "name",
1974
1943
  "type": {
1975
- "text": "\"vertical\" | \"horizontal\""
1944
+ "text": "string | undefined"
1976
1945
  },
1977
- "default": "\"horizontal\"",
1978
- "description": "The direction of the button group.",
1979
- "fieldName": "direction"
1946
+ "description": "The name of the form component.",
1947
+ "fieldName": "name",
1948
+ "inheritedFrom": {
1949
+ "name": "InputMixin",
1950
+ "module": "src/common/mixins/InputMixin.ts"
1951
+ }
1980
1952
  },
1981
1953
  {
1982
- "name": "role",
1954
+ "name": "value",
1983
1955
  "type": {
1984
1956
  "text": "string"
1985
1957
  },
1986
- "default": "\"group\"",
1987
- "description": "The appropriate role for the containing element.",
1988
- "fieldName": "role"
1958
+ "default": "\"\"",
1959
+ "description": "The value of the form component.",
1960
+ "fieldName": "value",
1961
+ "inheritedFrom": {
1962
+ "name": "InputMixin",
1963
+ "module": "src/common/mixins/InputMixin.ts"
1964
+ }
1965
+ },
1966
+ {
1967
+ "name": "form",
1968
+ "type": {
1969
+ "text": "HTMLFormElement | null"
1970
+ },
1971
+ "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",
1972
+ "fieldName": "form",
1973
+ "inheritedFrom": {
1974
+ "name": "InputMixin",
1975
+ "module": "src/common/mixins/InputMixin.ts"
1976
+ }
1977
+ }
1978
+ ],
1979
+ "mixins": [
1980
+ {
1981
+ "name": "InputMixin",
1982
+ "module": "/src/common/mixins/InputMixin.js"
1983
+ },
1984
+ {
1985
+ "name": "FocusableMixin",
1986
+ "module": "/src/common/mixins/FocusableMixin.js"
1989
1987
  }
1990
1988
  ],
1991
1989
  "superclass": {
@@ -1993,12 +1991,14 @@
1993
1991
  "package": "lit"
1994
1992
  },
1995
1993
  "localization": [],
1996
- "status": "new",
1997
- "category": "structure",
1998
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n",
1994
+ "status": "ready",
1995
+ "category": "action",
1996
+ "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\n---\n\n## Icon usage in button\n\nIllustrative icons should be always positioned in the `start` slot:\n\n<img src=\"/img/components/button/start-slot.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button with icon in start slot\" />\n\nWhen a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](/nordicons/) is automatically placed in the `end` slot:\n\n<img src=\"/img/components/button/dropdown.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Dropdown button\" />\n\nEach button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n<img src=\"/img/components/button/icon-sizes.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button icon sizes\" />\n\nUse `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/):\n\n<img src=\"/img/components/button/create.png\" class=\"n-border n-border-radius\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Create/add type primary action with icon\" />\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",
1999
1997
  "examples": [],
2000
- "dependencies": [],
2001
- "tagName": "nord-button-group",
1998
+ "dependencies": [
1999
+ "spinner"
2000
+ ],
2001
+ "tagName": "nord-button",
2002
2002
  "customElement": true
2003
2003
  }
2004
2004
  ],
@@ -2007,16 +2007,16 @@
2007
2007
  "kind": "js",
2008
2008
  "name": "default",
2009
2009
  "declaration": {
2010
- "name": "ButtonGroup",
2011
- "module": "src/button-group/ButtonGroup.ts"
2010
+ "name": "Button",
2011
+ "module": "src/button/Button.ts"
2012
2012
  }
2013
2013
  },
2014
2014
  {
2015
2015
  "kind": "custom-element-definition",
2016
- "name": "nord-button-group",
2016
+ "name": "nord-button",
2017
2017
  "declaration": {
2018
- "name": "ButtonGroup",
2019
- "module": "src/button-group/ButtonGroup.ts"
2018
+ "name": "Button",
2019
+ "module": "src/button/Button.ts"
2020
2020
  }
2021
2021
  }
2022
2022
  ]
@@ -8219,6 +8219,16 @@
8219
8219
  "attribute": "nav-open",
8220
8220
  "reflects": true
8221
8221
  },
8222
+ {
8223
+ "kind": "field",
8224
+ "name": "persistNavState",
8225
+ "type": {
8226
+ "text": "boolean"
8227
+ },
8228
+ "default": "false",
8229
+ "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
8230
+ "attribute": "persist-nav-state"
8231
+ },
8222
8232
  {
8223
8233
  "kind": "field",
8224
8234
  "name": "padding",
@@ -8442,6 +8452,15 @@
8442
8452
  "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
8443
8453
  "fieldName": "navOpen"
8444
8454
  },
8455
+ {
8456
+ "name": "persist-nav-state",
8457
+ "type": {
8458
+ "text": "boolean"
8459
+ },
8460
+ "default": "false",
8461
+ "description": "Controls whether the navigation's open/closed state is persisted across page loads.\nThis is useful for multi-page apps, where clicks on links trigger a full page load.",
8462
+ "fieldName": "persistNavState"
8463
+ },
8445
8464
  {
8446
8465
  "name": "padding",
8447
8466
  "type": {
@@ -9894,42 +9913,177 @@
9894
9913
  "name": "header"
9895
9914
  },
9896
9915
  {
9897
- "description": "The bottom section of the sidebar.",
9898
- "name": "footer"
9916
+ "description": "The bottom section of the sidebar.",
9917
+ "name": "footer"
9918
+ }
9919
+ ],
9920
+ "members": [
9921
+ {
9922
+ "kind": "field",
9923
+ "name": "headerSlot",
9924
+ "privacy": "private",
9925
+ "default": "new SlotController(this, \"header\")"
9926
+ },
9927
+ {
9928
+ "kind": "field",
9929
+ "name": "events",
9930
+ "privacy": "private",
9931
+ "default": "new EventController(this)"
9932
+ },
9933
+ {
9934
+ "kind": "field",
9935
+ "name": "handleActivate",
9936
+ "privacy": "private"
9937
+ }
9938
+ ],
9939
+ "superclass": {
9940
+ "name": "LitElement",
9941
+ "package": "lit"
9942
+ },
9943
+ "localization": [],
9944
+ "status": "ready",
9945
+ "category": "navigation",
9946
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item 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 item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
9947
+ "examples": [],
9948
+ "dependencies": [
9949
+ "nav-item"
9950
+ ],
9951
+ "tagName": "nord-navigation",
9952
+ "customElement": true
9953
+ }
9954
+ ],
9955
+ "exports": [
9956
+ {
9957
+ "kind": "js",
9958
+ "name": "default",
9959
+ "declaration": {
9960
+ "name": "Navigation",
9961
+ "module": "src/navigation/Navigation.ts"
9962
+ }
9963
+ },
9964
+ {
9965
+ "kind": "custom-element-definition",
9966
+ "name": "nord-navigation",
9967
+ "declaration": {
9968
+ "name": "Navigation",
9969
+ "module": "src/navigation/Navigation.ts"
9970
+ }
9971
+ }
9972
+ ]
9973
+ },
9974
+ {
9975
+ "kind": "javascript-module",
9976
+ "path": "src/notification/Notification.ts",
9977
+ "declarations": [
9978
+ {
9979
+ "kind": "class",
9980
+ "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
9981
+ "name": "Notification",
9982
+ "slots": [
9983
+ {
9984
+ "description": "Default slot used for the notification text/message.",
9985
+ "name": ""
9986
+ },
9987
+ {
9988
+ "description": "Slot used for the notification icon.",
9989
+ "name": "icon"
9990
+ }
9991
+ ],
9992
+ "members": [
9993
+ {
9994
+ "kind": "field",
9995
+ "name": "localize",
9996
+ "privacy": "private",
9997
+ "default": "new LocalizeController<\"nord-notification\">(this)"
9998
+ },
9999
+ {
10000
+ "kind": "field",
10001
+ "name": "notificationRef",
10002
+ "privacy": "protected",
10003
+ "inheritedFrom": {
10004
+ "name": "NotificationMixin",
10005
+ "module": "src/common/mixins/NotificationMixin.ts"
10006
+ }
10007
+ },
10008
+ {
10009
+ "kind": "field",
10010
+ "name": "dismissed",
10011
+ "type": {
10012
+ "text": "boolean"
10013
+ },
10014
+ "privacy": "protected",
10015
+ "default": "false",
10016
+ "inheritedFrom": {
10017
+ "name": "NotificationMixin",
10018
+ "module": "src/common/mixins/NotificationMixin.ts"
10019
+ }
10020
+ },
10021
+ {
10022
+ "kind": "method",
10023
+ "name": "dismiss",
10024
+ "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
10025
+ "inheritedFrom": {
10026
+ "name": "NotificationMixin",
10027
+ "module": "src/common/mixins/NotificationMixin.ts"
10028
+ }
10029
+ },
10030
+ {
10031
+ "kind": "field",
10032
+ "name": "_warningLogged",
10033
+ "type": {
10034
+ "text": "boolean"
10035
+ },
10036
+ "privacy": "private",
10037
+ "static": true,
10038
+ "default": "false",
10039
+ "inheritedFrom": {
10040
+ "name": "DraftComponentMixin",
10041
+ "module": "src/common/mixins/DraftComponentMixin.ts"
10042
+ }
9899
10043
  }
9900
10044
  ],
9901
- "members": [
10045
+ "events": [
9902
10046
  {
9903
- "kind": "field",
9904
- "name": "headerSlot",
9905
- "privacy": "private",
9906
- "default": "new SlotController(this, \"header\")"
9907
- },
10047
+ "name": "dismiss",
10048
+ "type": {
10049
+ "text": "NordEvent"
10050
+ },
10051
+ "description": "Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
10052
+ "inheritedFrom": {
10053
+ "name": "NotificationMixin",
10054
+ "module": "src/common/mixins/NotificationMixin.ts"
10055
+ }
10056
+ }
10057
+ ],
10058
+ "mixins": [
9908
10059
  {
9909
- "kind": "field",
9910
- "name": "events",
9911
- "privacy": "private",
9912
- "default": "new EventController(this)"
10060
+ "name": "NotificationMixin",
10061
+ "module": "/src/common/mixins/NotificationMixin.js"
9913
10062
  },
9914
10063
  {
9915
- "kind": "field",
9916
- "name": "handleActivate",
9917
- "privacy": "private"
10064
+ "name": "DraftComponentMixin",
10065
+ "module": "/src/common/mixins/DraftComponentMixin.js"
9918
10066
  }
9919
10067
  ],
9920
10068
  "superclass": {
9921
10069
  "name": "LitElement",
9922
10070
  "package": "lit"
9923
10071
  },
9924
- "localization": [],
9925
- "status": "ready",
9926
- "category": "navigation",
9927
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item 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 item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
10072
+ "localization": [
10073
+ {
10074
+ "name": "dismissLabel",
10075
+ "description": "Accessible label for the dismiss button."
10076
+ }
10077
+ ],
10078
+ "status": "draft",
10079
+ "category": "feedback",
10080
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification 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\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link 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",
9928
10081
  "examples": [],
9929
10082
  "dependencies": [
9930
- "nav-item"
10083
+ "stack",
10084
+ "icon"
9931
10085
  ],
9932
- "tagName": "nord-navigation",
10086
+ "tagName": "nord-notification",
9933
10087
  "customElement": true
9934
10088
  }
9935
10089
  ],
@@ -9938,16 +10092,40 @@
9938
10092
  "kind": "js",
9939
10093
  "name": "default",
9940
10094
  "declaration": {
9941
- "name": "Navigation",
9942
- "module": "src/navigation/Navigation.ts"
10095
+ "name": "Notification",
10096
+ "module": "src/notification/Notification.ts"
9943
10097
  }
9944
10098
  },
9945
10099
  {
9946
10100
  "kind": "custom-element-definition",
9947
- "name": "nord-navigation",
10101
+ "name": "nord-notification",
9948
10102
  "declaration": {
9949
- "name": "Navigation",
9950
- "module": "src/navigation/Navigation.ts"
10103
+ "name": "Notification",
10104
+ "module": "src/notification/Notification.ts"
10105
+ }
10106
+ }
10107
+ ]
10108
+ },
10109
+ {
10110
+ "kind": "javascript-module",
10111
+ "path": "src/notification/localization.ts",
10112
+ "declarations": [
10113
+ {
10114
+ "kind": "variable",
10115
+ "name": "localization",
10116
+ "type": {
10117
+ "text": "object"
10118
+ },
10119
+ "default": "{\n dismissLabel: \"Dismiss notification\",\n}"
10120
+ }
10121
+ ],
10122
+ "exports": [
10123
+ {
10124
+ "kind": "js",
10125
+ "name": "default",
10126
+ "declaration": {
10127
+ "name": "localization",
10128
+ "module": "src/notification/localization.ts"
9951
10129
  }
9952
10130
  }
9953
10131
  ]
@@ -14965,165 +15143,6 @@
14965
15143
  }
14966
15144
  ]
14967
15145
  },
14968
- {
14969
- "kind": "javascript-module",
14970
- "path": "src/notification/Notification.ts",
14971
- "declarations": [
14972
- {
14973
- "kind": "class",
14974
- "description": "Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",
14975
- "name": "Notification",
14976
- "slots": [
14977
- {
14978
- "description": "Default slot used for the notification text/message.",
14979
- "name": ""
14980
- },
14981
- {
14982
- "description": "Slot used for the notification icon.",
14983
- "name": "icon"
14984
- }
14985
- ],
14986
- "members": [
14987
- {
14988
- "kind": "field",
14989
- "name": "localize",
14990
- "privacy": "private",
14991
- "default": "new LocalizeController<\"nord-notification\">(this)"
14992
- },
14993
- {
14994
- "kind": "field",
14995
- "name": "notificationRef",
14996
- "privacy": "protected",
14997
- "inheritedFrom": {
14998
- "name": "NotificationMixin",
14999
- "module": "src/common/mixins/NotificationMixin.ts"
15000
- }
15001
- },
15002
- {
15003
- "kind": "field",
15004
- "name": "dismissed",
15005
- "type": {
15006
- "text": "boolean"
15007
- },
15008
- "privacy": "protected",
15009
- "default": "false",
15010
- "inheritedFrom": {
15011
- "name": "NotificationMixin",
15012
- "module": "src/common/mixins/NotificationMixin.ts"
15013
- }
15014
- },
15015
- {
15016
- "kind": "method",
15017
- "name": "dismiss",
15018
- "description": "Programmatically dismiss the notification.\nThe returned promise resolves when notification's exit animation is complete.",
15019
- "inheritedFrom": {
15020
- "name": "NotificationMixin",
15021
- "module": "src/common/mixins/NotificationMixin.ts"
15022
- }
15023
- },
15024
- {
15025
- "kind": "field",
15026
- "name": "_warningLogged",
15027
- "type": {
15028
- "text": "boolean"
15029
- },
15030
- "privacy": "private",
15031
- "static": true,
15032
- "default": "false",
15033
- "inheritedFrom": {
15034
- "name": "DraftComponentMixin",
15035
- "module": "src/common/mixins/DraftComponentMixin.ts"
15036
- }
15037
- }
15038
- ],
15039
- "events": [
15040
- {
15041
- "name": "dismiss",
15042
- "type": {
15043
- "text": "NordEvent"
15044
- },
15045
- "description": "Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.",
15046
- "inheritedFrom": {
15047
- "name": "NotificationMixin",
15048
- "module": "src/common/mixins/NotificationMixin.ts"
15049
- }
15050
- }
15051
- ],
15052
- "mixins": [
15053
- {
15054
- "name": "NotificationMixin",
15055
- "module": "/src/common/mixins/NotificationMixin.js"
15056
- },
15057
- {
15058
- "name": "DraftComponentMixin",
15059
- "module": "/src/common/mixins/DraftComponentMixin.js"
15060
- }
15061
- ],
15062
- "superclass": {
15063
- "name": "LitElement",
15064
- "package": "lit"
15065
- },
15066
- "localization": [
15067
- {
15068
- "name": "dismissLabel",
15069
- "description": "Accessible label for the dismiss button."
15070
- }
15071
- ],
15072
- "status": "draft",
15073
- "category": "feedback",
15074
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that describe the purpose of the notification.\n- Use for important updates that require user action/attention.\n- Provide a single call to action within the notification.\n- Use in combination with [Notification group](../notification-group/) so that notifications get styled and positioned correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for transient or unimportant messages. Consider using a [Toast](/components/toast) instead.\n- Don't remove a notification until a user has explicitly dismissed, or acted on the notification.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nNotification content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Patient arrived</div>\n\nWhen writing the notification content, be concise. Keep content to 1 to 2 sentence:\n\n<div class=\"n-usage n-usage-do\">You’ve reached the limit of 30 users included in your plan. Upgrade to add more.</div>\n<div class=\"n-usage n-usage-dont\">You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.</div>\n\nWhen writing the notification 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\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen Arrived To Clinic With Pixie Cat.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Ariel Salminen arrived to clinic with Pixie cat.</div>\n<div class=\"n-usage n-usage-dont\">Ariel Salminen arrived to clinic with Pixie cat</div>\n\nAction link labels in notifications 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing action link 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\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Start Consultation</div>\n\nAvoid unnecessary words and articles in action link 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",
15075
- "examples": [],
15076
- "dependencies": [
15077
- "stack",
15078
- "icon"
15079
- ],
15080
- "tagName": "nord-notification",
15081
- "customElement": true
15082
- }
15083
- ],
15084
- "exports": [
15085
- {
15086
- "kind": "js",
15087
- "name": "default",
15088
- "declaration": {
15089
- "name": "Notification",
15090
- "module": "src/notification/Notification.ts"
15091
- }
15092
- },
15093
- {
15094
- "kind": "custom-element-definition",
15095
- "name": "nord-notification",
15096
- "declaration": {
15097
- "name": "Notification",
15098
- "module": "src/notification/Notification.ts"
15099
- }
15100
- }
15101
- ]
15102
- },
15103
- {
15104
- "kind": "javascript-module",
15105
- "path": "src/notification/localization.ts",
15106
- "declarations": [
15107
- {
15108
- "kind": "variable",
15109
- "name": "localization",
15110
- "type": {
15111
- "text": "object"
15112
- },
15113
- "default": "{\n dismissLabel: \"Dismiss notification\",\n}"
15114
- }
15115
- ],
15116
- "exports": [
15117
- {
15118
- "kind": "js",
15119
- "name": "default",
15120
- "declaration": {
15121
- "name": "localization",
15122
- "module": "src/notification/localization.ts"
15123
- }
15124
- }
15125
- ]
15126
- },
15127
15146
  {
15128
15147
  "kind": "javascript-module",
15129
15148
  "path": "src/toast-group/ToastGroup.ts",