@nordhealth/components 3.16.0-alpha.0 → 3.17.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 (86) hide show
  1. package/custom-elements.json +5374 -5397
  2. package/lib/ButtonGroup.js.map +1 -1
  3. package/lib/Checkbox.js +1 -1
  4. package/lib/Checkbox.js.map +1 -1
  5. package/lib/CommandMenu.js +1 -1
  6. package/lib/DatePicker.js +1 -1
  7. package/lib/DatePicker.js.map +1 -1
  8. package/lib/Divider.js.map +1 -1
  9. package/lib/Dropdown.js +1 -1
  10. package/lib/Fieldset.js +1 -1
  11. package/lib/Fieldset.js.map +1 -1
  12. package/lib/Footer.js.map +1 -1
  13. package/lib/FormField-bf5eb166.js +2 -0
  14. package/lib/FormField-bf5eb166.js.map +1 -0
  15. package/lib/Input.js +1 -1
  16. package/lib/Input.js.map +1 -1
  17. package/lib/Layout.js +1 -1
  18. package/lib/LightDismissController-0a66b0a0.js +2 -0
  19. package/lib/LightDismissController-0a66b0a0.js.map +1 -0
  20. package/lib/Message.js.map +1 -1
  21. package/lib/Modal.js +1 -1
  22. package/lib/ModalController.js +1 -1
  23. package/lib/{NavToggle-6b13700e.js → NavToggle-735b5262.js} +1 -1
  24. package/lib/{NavToggle-6b13700e.js.map → NavToggle-735b5262.js.map} +1 -1
  25. package/lib/NavToggle.js +1 -1
  26. package/lib/Notification.js.map +1 -1
  27. package/lib/NotificationGroup.js.map +1 -1
  28. package/lib/Popout-9ea00c67.js +2 -0
  29. package/lib/Popout-9ea00c67.js.map +1 -0
  30. package/lib/Popout.js +1 -1
  31. package/lib/Radio.js +1 -1
  32. package/lib/Radio.js.map +1 -1
  33. package/lib/Range.js +1 -1
  34. package/lib/Range.js.map +1 -1
  35. package/lib/SegmentedControl.js +1 -1
  36. package/lib/SegmentedControl.js.map +1 -1
  37. package/lib/SegmentedControlItem.js +1 -1
  38. package/lib/SegmentedControlItem.js.map +1 -1
  39. package/lib/Select.js +1 -1
  40. package/lib/Select.js.map +1 -1
  41. package/lib/Skeleton.js.map +1 -1
  42. package/lib/Tag.js +1 -1
  43. package/lib/Tag.js.map +1 -1
  44. package/lib/TagGroup.js +1 -1
  45. package/lib/TagGroup.js.map +1 -1
  46. package/lib/Textarea.js +1 -1
  47. package/lib/Textarea.js.map +1 -1
  48. package/lib/Toggle.js +1 -1
  49. package/lib/Toggle.js.map +1 -1
  50. package/lib/TopBar.js.map +1 -1
  51. package/lib/bundle.js +13 -13
  52. package/lib/bundle.js.map +1 -1
  53. package/lib/index.js +1 -1
  54. package/lib/src/button-group/ButtonGroup.d.ts +1 -1
  55. package/lib/src/checkbox/Checkbox.d.ts +2 -0
  56. package/lib/src/common/controllers/LightDismissController.d.ts +1 -1
  57. package/lib/src/date-picker/DatePicker.d.ts +2 -4
  58. package/lib/src/divider/Divider.d.ts +1 -1
  59. package/lib/src/fieldset/Fieldset.d.ts +6 -0
  60. package/lib/src/fieldset/Fieldset.test.d.ts +1 -0
  61. package/lib/src/footer/Footer.d.ts +1 -1
  62. package/lib/src/input/Input.d.ts +1 -0
  63. package/lib/src/message/Message.d.ts +1 -1
  64. package/lib/src/nav-toggle/NavToggle.d.ts +1 -1
  65. package/lib/src/notification/Notification.d.ts +1 -1
  66. package/lib/src/notification-group/NotificationGroup.d.ts +1 -1
  67. package/lib/src/radio/Radio.d.ts +2 -0
  68. package/lib/src/range/Range.d.ts +1 -1
  69. package/lib/src/segmented-control/SegmentedControl.d.ts +2 -4
  70. package/lib/src/segmented-control-item/SegmentedControlItem.d.ts +1 -1
  71. package/lib/src/select/Select.d.ts +1 -0
  72. package/lib/src/skeleton/Skeleton.d.ts +1 -1
  73. package/lib/src/tag/Tag.d.ts +1 -1
  74. package/lib/src/tag-group/TagGroup.d.ts +2 -4
  75. package/lib/src/textarea/Textarea.d.ts +1 -0
  76. package/lib/src/toggle/Toggle.d.ts +2 -0
  77. package/lib/src/top-bar/TopBar.d.ts +1 -0
  78. package/package.json +2 -2
  79. package/lib/DraftComponentMixin-9e4b7b34.js +0 -2
  80. package/lib/DraftComponentMixin-9e4b7b34.js.map +0 -1
  81. package/lib/FormField-87551be2.js +0 -2
  82. package/lib/FormField-87551be2.js.map +0 -1
  83. package/lib/LightDismissController-11ae4745.js +0 -2
  84. package/lib/LightDismissController-11ae4745.js.map +0 -1
  85. package/lib/Popout-b6f0175c.js +0 -2
  86. package/lib/Popout-b6f0175c.js.map +0 -1
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{default as Icon}from"./Icon.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";export{C as Calendar}from"./Calendar-5fbf9d8d.js";export{default as DatePicker}from"./DatePicker.js";export{default as Checkbox}from"./Checkbox.js";export{default as Tooltip}from"./Tooltip.js";export{default as Fieldset}from"./Fieldset.js";export{default as Radio}from"./Radio.js";export{default as Header}from"./Header.js";export{default as Message}from"./Message.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{default as Navigation}from"./Navigation.js";export{default as Layout}from"./Layout.js";export{default as EmptyState}from"./EmptyState.js";export{default as Banner}from"./Banner.js";export{default as Avatar}from"./Avatar.js";export{default as ProgressBar}from"./ProgressBar.js";export{P as Popout}from"./Popout-b6f0175c.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as TabGroup}from"./TabGroup.js";export{default as Tab}from"./Tab.js";export{default as TabPanel}from"./TabPanel.js";export{default as Toggle}from"./Toggle.js";export{default as Modal}from"./Modal.js";export{default as Skeleton}from"./Skeleton.js";export{default as Toast}from"./Toast.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Divider}from"./Divider.js";export{default as Qrcode}from"./Qrcode.js";export{default as Drawer}from"./Drawer.js";export{N as NavToggle}from"./NavToggle-6b13700e.js";export{default as Range}from"./Range.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Notification}from"./Notification.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as TopBar}from"./TopBar.js";export{default as Footer}from"./Footer.js";export{default as Tag}from"./Tag.js";export{default as TagGroup}from"./TagGroup.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./Component-2253424f.js";import"./ref-99418ab4.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./FocusableMixin-d30213b4.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./query-36bfe0e4.js";import"./if-defined-cccde88f.js";import"./class-map-512f0bc1.js";import"./style-map-f8a1c8d5.js";import"./FormAssociatedMixin-3fa55d53.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./TextField-2d778949.js";import"./AutocompleteMixin-5a7e10b2.js";import"./TextSelectableMixin-aac97d82.js";import"./SizeMixin-ab074eff.js";import"./FormField-87551be2.js";import"./DirectionController-f35f5476.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./collection-511dcfac.js";import"./number-c3ab3e95.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./LocalizeController.js";import"./dates-5b651fbe.js";import"./DateSelectEvent.js";import"./interface-close-small-f26b0299.js";import"./date-adapter.js";import"./interface-checked-small-07292940.js";import"./positioning-35c8d434.js";import"./fsm-50373df9.js";import"./LightSlotController-c51e9cf5.js";import"./DropdownItem-32052903.js";import"./Sticky-c34c9b12.js";import"./ScrollbarController-773c79f4.js";import"./ModalController.js";import"./NotificationMixin-207f1f56.js";import"./DraftComponentMixin-9e4b7b34.js";
1
+ export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{default as Icon}from"./Icon.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";export{C as Calendar}from"./Calendar-5fbf9d8d.js";export{default as DatePicker}from"./DatePicker.js";export{default as Checkbox}from"./Checkbox.js";export{default as Tooltip}from"./Tooltip.js";export{default as Fieldset}from"./Fieldset.js";export{default as Radio}from"./Radio.js";export{default as Header}from"./Header.js";export{default as Message}from"./Message.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{default as Navigation}from"./Navigation.js";export{default as Layout}from"./Layout.js";export{default as EmptyState}from"./EmptyState.js";export{default as Banner}from"./Banner.js";export{default as Avatar}from"./Avatar.js";export{default as ProgressBar}from"./ProgressBar.js";export{P as Popout}from"./Popout-9ea00c67.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as TabGroup}from"./TabGroup.js";export{default as Tab}from"./Tab.js";export{default as TabPanel}from"./TabPanel.js";export{default as Toggle}from"./Toggle.js";export{default as Modal}from"./Modal.js";export{default as Skeleton}from"./Skeleton.js";export{default as Toast}from"./Toast.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Divider}from"./Divider.js";export{default as Qrcode}from"./Qrcode.js";export{default as Drawer}from"./Drawer.js";export{N as NavToggle}from"./NavToggle-735b5262.js";export{default as Range}from"./Range.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Notification}from"./Notification.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as TopBar}from"./TopBar.js";export{default as Footer}from"./Footer.js";export{default as Tag}from"./Tag.js";export{default as TagGroup}from"./TagGroup.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./Component-2253424f.js";import"./ref-99418ab4.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./FocusableMixin-d30213b4.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./query-36bfe0e4.js";import"./if-defined-cccde88f.js";import"./class-map-512f0bc1.js";import"./style-map-f8a1c8d5.js";import"./FormAssociatedMixin-3fa55d53.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./TextField-2d778949.js";import"./AutocompleteMixin-5a7e10b2.js";import"./TextSelectableMixin-aac97d82.js";import"./SizeMixin-ab074eff.js";import"./FormField-bf5eb166.js";import"./DirectionController-f35f5476.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./collection-511dcfac.js";import"./number-c3ab3e95.js";import"./LightDismissController-0a66b0a0.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./LocalizeController.js";import"./dates-5b651fbe.js";import"./DateSelectEvent.js";import"./interface-close-small-f26b0299.js";import"./date-adapter.js";import"./interface-checked-small-07292940.js";import"./positioning-35c8d434.js";import"./fsm-50373df9.js";import"./LightSlotController-c51e9cf5.js";import"./DropdownItem-32052903.js";import"./Sticky-c34c9b12.js";import"./ScrollbarController-773c79f4.js";import"./ModalController.js";import"./NotificationMixin-207f1f56.js";
2
2
  //# sourceMappingURL=index.js.map
@@ -2,7 +2,7 @@ import { LitElement } from "lit";
2
2
  /**
3
3
  * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.
4
4
  *
5
- * @status new
5
+ * @status ready
6
6
  * @category structure
7
7
  * @slot - The button group content
8
8
  *
@@ -9,6 +9,8 @@ declare const Checkbox_base: (new (...args: any[]) => import("../common/mixins/S
9
9
  * @slot label - Use when a label requires more than plain text.
10
10
  * @slot hint - Optional slot that holds hint text for the input.
11
11
  * @slot error - Optional slot that holds error text for the input.
12
+ *
13
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
12
14
  */
13
15
  export default class Checkbox extends Checkbox_base {
14
16
  static styles: import("lit").CSSResult[];
@@ -14,5 +14,5 @@ export declare class LightDismissController implements ReactiveController {
14
14
  hostConnected(): void;
15
15
  private handleEsc;
16
16
  private handleMouseDown;
17
- private handleMouseUp;
17
+ private handleClick;
18
18
  }
@@ -26,6 +26,8 @@ declare const DatePicker_base: (new (...args: any[]) => import("../common/mixins
26
26
  * @localization closeLabel - Accessible label for the close button.
27
27
  * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.
28
28
  * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.
29
+ *
30
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
29
31
  */
30
32
  export default class DatePicker extends DatePicker_base {
31
33
  static styles: import("lit").CSSResult[];
@@ -58,10 +60,6 @@ export default class DatePicker extends DatePicker_base {
58
60
  * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.
59
61
  */
60
62
  set valueAsNumber(date: number);
61
- /**
62
- * Exposes the raw value of the input field without date formatting.
63
- */
64
- rawValue?: string;
65
63
  /**
66
64
  * Controls whether date picker dialog is open or not.
67
65
  */
@@ -4,7 +4,7 @@ import { LitElement } from "lit";
4
4
  * content or groups of menu items. Visually, they look like
5
5
  * horizontal or vertical lines.
6
6
  *
7
- * @status new
7
+ * @status ready
8
8
  * @category structure
9
9
  *
10
10
  * @cssprop [--n-divider-color=var(--n-color-border)] - Controls the color of the divider, using our [color tokens](/tokens/#color).
@@ -9,6 +9,8 @@ import { LitElement } from "lit";
9
9
  * @slot label - Use when a label requires more than plain text.
10
10
  * @slot hint - Optional slot that holds hint text for the fieldset.
11
11
  * @slot error - Optional slot that holds error text for the fieldset.
12
+ *
13
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
12
14
  */
13
15
  export default class Fieldset extends LitElement {
14
16
  static styles: import("lit").CSSResult[];
@@ -41,6 +43,10 @@ export default class Fieldset extends LitElement {
41
43
  * Visually hide the label, but still show it to assistive technologies like screen readers.
42
44
  */
43
45
  hideLabel: boolean;
46
+ /**
47
+ * The size of the label.
48
+ */
49
+ size: "s" | "m";
44
50
  render(): import("lit").TemplateResult<1>;
45
51
  protected get hasHint(): boolean;
46
52
  protected get hasError(): boolean;
@@ -1,2 +1,3 @@
1
1
  import "../stack/Stack.js";
2
2
  import "../checkbox/Checkbox.js";
3
+ import "../radio/Radio.js";
@@ -2,7 +2,7 @@ import { LitElement } from "lit";
2
2
  /**
3
3
  * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.
4
4
  *
5
- * @status draft
5
+ * @status new
6
6
  * @category structure
7
7
  * @slot - The footer content.
8
8
  *
@@ -18,6 +18,7 @@ declare const Input_base: (new (...args: any[]) => import("../common/mixins/Size
18
18
  * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).
19
19
  * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).
20
20
  * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.
21
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
21
22
  */
22
23
  export default class Input extends Input_base {
23
24
  static styles: import("lit").CSSResult[];
@@ -5,7 +5,7 @@ declare const Message_base: (new (...args: any[]) => import("../common/mixins/Fo
5
5
  * such as notifications, tasks or conversations. Message
6
6
  * can be placed directly inside a dropdown component.
7
7
  *
8
- * @status new
8
+ * @status ready
9
9
  * @category action
10
10
  * @slot - The message content.
11
11
  * @slot footer - Used to place content after the message. Typically used for a timestamp.
@@ -7,7 +7,7 @@ declare const NavToggle_base: (new (...args: any[]) => import("../common/mixins/
7
7
  * This component is used internally in the Layout component, but can also be
8
8
  * used separate to further customize the behavior.
9
9
  *
10
- * @status new
10
+ * @status ready
11
11
  * @category action
12
12
  *
13
13
  * @localization label - Accessible label for the nav toggle button.
@@ -6,7 +6,7 @@ declare const Notification_base: (new (...args: any[]) => import("../common/mixi
6
6
  * Notifications provide important information that requires action or acknowledgement.
7
7
  * A notification is displayed until the user dismisses it.
8
8
  *
9
- * @status new
9
+ * @status ready
10
10
  * @category feedback
11
11
  * @slot - Default slot used for the notification text/message.
12
12
  * @slot icon - Slot used for the notification icon.
@@ -2,7 +2,7 @@ import { LitElement } from "lit";
2
2
  /**
3
3
  * Notification group is used to position and style a group of notifications.
4
4
  *
5
- * @status new
5
+ * @status ready
6
6
  * @category feedback
7
7
  * @slot - Default slot in which to place notifications.
8
8
  *
@@ -11,6 +11,8 @@ declare const Radio_base: (new (...args: any[]) => import("../common/mixins/Size
11
11
  * @slot label - Use when a label requires more than plain text.
12
12
  * @slot hint - Optional slot that holds hint text for the input.
13
13
  * @slot error - Optional slot that holds error text for the input.
14
+ *
15
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
14
16
  */
15
17
  export default class Radio extends Radio_base {
16
18
  static styles: import("lit").CSSResult[];
@@ -4,7 +4,7 @@ declare const Range_base: (new (...args: any[]) => import("../common/mixins/Form
4
4
  * Range input lets user specify a numeric value using a slider which
5
5
  * must be no less than a given value, and no more than another given value.
6
6
  *
7
- * @status new
7
+ * @status ready
8
8
  * @category form
9
9
  * @slot label - Use when a label requires more than plain text.
10
10
  * @slot hint - Optional slot that holds hint text for the input.
@@ -1,16 +1,15 @@
1
1
  import { LitElement } from "lit";
2
- declare const SegmentedControl_base: typeof LitElement;
3
2
  /**
4
3
  * Segmented control is used to pick one choice from a set of
5
4
  * closely related choices, and immediately apply that selection.
6
5
  *
7
- * @status draft
6
+ * @status new
8
7
  * @category action
9
8
  * @slot - Default slot.
10
9
  *
11
10
  * @fires {NordEvent} change - Fired whenever a segmented control item has been checked.
12
11
  */
13
- export default class SegmentedControl extends SegmentedControl_base {
12
+ export default class SegmentedControl extends LitElement {
14
13
  static styles: import("lit").CSSResult[];
15
14
  private defaultSlot;
16
15
  /**
@@ -24,4 +23,3 @@ declare global {
24
23
  "nord-segmented-control": SegmentedControl;
25
24
  }
26
25
  }
27
- export {};
@@ -6,7 +6,7 @@ declare const SegmentedControlItem_base: (new (...args: any[]) => import("../com
6
6
  * Segmented control items populate a segmented control with options.
7
7
  * Every item should be placed inside a segmented control.
8
8
  *
9
- * @status draft
9
+ * @status new
10
10
  * @category action
11
11
  * @slot label - Use when a label requires more than plain text.
12
12
  *
@@ -14,6 +14,7 @@ declare const Select_base: (new (...args: any[]) => import("../common/mixins/Siz
14
14
  * @slot icon - Used to place an icon at the start of select.
15
15
  *
16
16
  * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).
17
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
17
18
  */
18
19
  export default class Select extends Select_base {
19
20
  static styles: import("lit").CSSResult[];
@@ -4,7 +4,7 @@ import { LitElement } from "lit";
4
4
  * before it appears in a view. This improves the perceived loading time
5
5
  * for our users.
6
6
  *
7
- * @status new
7
+ * @status ready
8
8
  * @category feedback
9
9
  *
10
10
  * @cssprop [--n-skeleton-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).
@@ -5,7 +5,7 @@ declare const Tag_base: (new (...args: any[]) => import("../common/mixins/InputM
5
5
  * Tags represent a set of keywords that help label, categorize,
6
6
  * and organize objects. Commonly used to signify the attributes of an object.
7
7
  *
8
- * @status draft
8
+ * @status new
9
9
  * @category text
10
10
  * @slot - The tag content.
11
11
  *
@@ -1,9 +1,8 @@
1
1
  import { LitElement } from "lit";
2
- declare const TagGroup_base: typeof LitElement;
3
2
  /**
4
3
  * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.
5
4
  *
6
- * @status draft
5
+ * @status new
7
6
  * @category structure
8
7
  * @slot - The tag group content
9
8
  *
@@ -13,7 +12,7 @@ declare const TagGroup_base: typeof LitElement;
13
12
  * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.
14
13
  * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.
15
14
  */
16
- export default class TagGroup extends TagGroup_base {
15
+ export default class TagGroup extends LitElement {
17
16
  static styles: import("lit").CSSResult[];
18
17
  private defaultSlot;
19
18
  private dirController;
@@ -41,4 +40,3 @@ declare global {
41
40
  "nord-tag-group": TagGroup;
42
41
  }
43
42
  }
44
- export {};
@@ -17,6 +17,7 @@ declare const Textarea_base: (new (...args: any[]) => import("../common/mixins/S
17
17
  * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).
18
18
  * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).
19
19
  * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).
20
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
20
21
  *
21
22
  * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.
22
23
  */
@@ -10,6 +10,8 @@ declare const Toggle_base: (new (...args: any[]) => import("../common/mixins/For
10
10
  * @slot label - Use when a label requires more than plain text.
11
11
  * @slot hint - Optional slot that holds hint text for the input.
12
12
  * @slot error - Optional slot that holds error text for the input.
13
+ *
14
+ * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).
13
15
  */
14
16
  export default class Toggle extends Toggle_base {
15
17
  static styles: import("lit").CSSResult[];
@@ -2,6 +2,7 @@ import { LitElement } from "lit";
2
2
  /**
3
3
  * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.
4
4
  *
5
+ * @status ready
5
6
  * @category structure
6
7
  * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.
7
8
  * @slot end - Optional slot for menus, buttons, toggles, etc.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nordhealth/components",
3
- "version": "3.16.0-alpha.0",
3
+ "version": "3.17.0",
4
4
  "description": "This package includes Nord Design System Web Components",
5
5
  "author": "Nordhealth <support@nordhealth.design>",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -187,5 +187,5 @@
187
187
  }
188
188
  ]
189
189
  },
190
- "gitHead": "2a0758b957435d11eea7ccc488349c02d2bffae1"
190
+ "gitHead": "5b41507c9c21422fec87f52e82ed9230685b010b"
191
191
  }
@@ -1,2 +0,0 @@
1
- function n(n){class e extends n{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}export{n as D};
2
- //# sourceMappingURL=DraftComponentMixin-9e4b7b34.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DraftComponentMixin-9e4b7b34.js","sources":["../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T): T {\n class DraftComponent extends superClass {\n private static _warningLogged = false\n\n connectedCallback() {\n super.connectedCallback()\n\n if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n // eslint-disable-next-line no-console\n console.warn(\n `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n \"font-weight:bold\",\n \"font-weight:normal\"\n )\n DraftComponent._warningLogged = true\n }\n }\n }\n\n return DraftComponent\n}\n"],"names":["DraftComponentMixin","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName"],"mappings":"AAIM,SAAUA,EAAyDC,GACvE,MAAMC,UAAuBD,EAG3B,iBAAAE,GACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,EAEnC,EAGH,OAjBiBH,EAAcG,gBAAG,EAiB3BH,CACT"}
@@ -1,2 +0,0 @@
1
- import{i as n}from"./query-assigned-elements-92ce7494.js";const a=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{a as s};
2
- //# sourceMappingURL=FormField-87551be2.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FormField-87551be2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- import{E as s}from"./EventController-d99ebeef.js";import{S as t}from"./ShortcutController-87615e31.js";class o{constructor(o,i){this.host=o,this.options=i,this.isMouseDownOutside=!1,this.handleEsc=s=>{this.options.isOpen()&&this.options.onDismiss(s)},this.handleMouseDown=s=>{var t;if(!this.options.isOpen())return;const o=null!==(t=this.options.isDismissible)&&void 0!==t?t:s=>s!==this.host;this.isMouseDownOutside=s.composedPath().every(o)},this.handleMouseUp=s=>{var t;if(!this.options.isOpen())return;const o=null!==(t=this.options.isDismissible)&&void 0!==t?t:s=>s!==this.host;s.composedPath().every(o)&&this.isMouseDownOutside&&this.options.onDismiss(s)},o.addController(this),this.shortcut=new t(o,{Escape:this.handleEsc}),this.events=new s(o)}hostConnected(){this.events.listen(document,"mousedown",this.handleMouseDown,!0),this.events.listen(document,"mouseup",this.handleMouseUp,!0)}}export{o as L};
2
- //# sourceMappingURL=LightDismissController-11ae4745.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LightDismissController-11ae4745.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\nexport type LightDismissOptions = {\n isOpen: () => boolean\n onDismiss: EventListener\n isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n private shortcut: ShortcutController\n private events: EventController\n\n private isMouseDownOutside = false\n\n constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n host.addController(this)\n this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n this.events = new EventController(host)\n }\n\n hostConnected() {\n this.events.listen(document, \"mousedown\", this.handleMouseDown, true)\n this.events.listen(document, \"mouseup\", this.handleMouseUp, true)\n }\n\n private handleEsc = (e: KeyboardEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n this.options.onDismiss(e)\n }\n\n private handleMouseDown = (e: MouseEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n this.isMouseDownOutside = e.composedPath().every(predicate)\n }\n\n private handleMouseUp = (e: MouseEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n const isMouseUpOutside = e.composedPath().every(predicate)\n\n const isClickOutside = isMouseUpOutside && this.isMouseDownOutside\n\n if (isClickOutside) {\n this.options.onDismiss(e)\n }\n }\n}\n"],"names":["LightDismissController","constructor","host","options","this","isMouseDownOutside","handleEsc","e","isOpen","onDismiss","handleMouseDown","predicate","_a","isDismissible","node","composedPath","every","handleMouseUp","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAMX,WAAAC,CAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAF5DC,KAAkBC,oBAAG,EAarBD,KAAAE,UAAaC,IACdH,KAAKD,QAAQK,UAIlBJ,KAAKD,QAAQM,UAAUF,EAAE,EAGnBH,KAAAM,gBAAmBH,UACzB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KAC7GE,KAAKC,mBAAqBE,EAAEQ,eAAeC,MAAML,EAAU,EAGrDP,KAAAa,cAAiBV,UACvB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KACpFK,EAAEQ,eAAeC,MAAML,IAELP,KAAKC,oBAG9CD,KAAKD,QAAQM,UAAUF,EACxB,EAvCDL,EAAKgB,cAAcd,MACnBA,KAAKe,SAAW,IAAIC,EAAmBlB,EAAM,CAAEmB,OAAQjB,KAAKE,YAC5DF,KAAKkB,OAAS,IAAIC,EAAgBrB,EACnC,CAED,aAAAsB,GACEpB,KAAKkB,OAAOG,OAAOC,SAAU,YAAatB,KAAKM,iBAAiB,GAChEN,KAAKkB,OAAOG,OAAOC,SAAU,UAAWtB,KAAKa,eAAe,EAC7D"}
@@ -1,2 +0,0 @@
1
- import{_ as t,i as e,x as o,e as i,s}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{t as r}from"./state-d31c6912.js";import{i as a}from"./query-36bfe0e4.js";import{c as l,l as p,o as h,f as d,s as c,h as m,a as u}from"./positioning-35c8d434.js";import{L as v}from"./LightDismissController-11ae4745.js";import{S as f}from"./ScrollbarController-773c79f4.js";import{N as g,t as y}from"./events-d9666e88.js";import{s as b}from"./Component-2253424f.js";import{D as w}from"./DirectionController-f35f5476.js";import{o as E}from"./observe-a9c6dfb6.js";import{E as x}from"./EventController-d99ebeef.js";function C(e){class o extends e{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([n({type:Boolean,reflect:!0})],o.prototype,"open",void 0),t([n({reflect:!0})],o.prototype,"align",void 0),t([n({reflect:!0})],o.prototype,"position",void 0),o}const k=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host{position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]){pointer-events:auto;background:var(--n-color-overlay)}:host .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,A=matchMedia("(max-width: 35.9375em)");let P=class extends(C(s)){constructor(){super(...arguments),this.scrollBar=new f(this),this.dismiss=new v(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("mouseup"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new x(this),this.direction=new w(this),this.smallViewport=A.matches,this.id="",this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const{x:e,y:o,placement:i,middlewareData:s}=await l(this.anchorElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[h(8),d(),c({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--_n-popout-position-x",`${e}px`),this.style.setProperty("--_n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{var t;this.smallViewport=A.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),!this.smallViewport&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new g("open")),y(this.popout))}async hide(t=!0){var e,o;return this.open?(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new g("close")),t&&(null===(o=this.targetElement)||void 0===o||o.focus({preventScroll:!0})),y(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(A,"change",this.handleMediaQueryChange)}disconnectedCallback(){var t,e;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(e=this.targetElement)||void 0===e||e.removeAttribute("aria-expanded")}render(){return o`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?(this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)):console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){var t,e;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition)):null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&!this.smallViewport&&this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};P.styles=[b,k],t([a(".n-popout",!0)],P.prototype,"popout",void 0),t([r()],P.prototype,"computedPosition",void 0),t([r()],P.prototype,"smallViewport",void 0),t([n({reflect:!0})],P.prototype,"id",void 0),t([n({reflect:!0})],P.prototype,"anchor",void 0),t([E("id")],P.prototype,"handleIdChange",null),t([E("open")],P.prototype,"handleOpenChange",null),t([E("anchor")],P.prototype,"handleAnchorChange",null),P=t([i("nord-popout")],P);var S=P;export{C as F,S as P};
2
- //# sourceMappingURL=Popout-b6f0175c.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popout-b6f0175c.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { Alignment } from \"@floating-ui/dom\"\nimport { LogicalSide } from \"../positioning.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n open: boolean\n align: Alignment\n position: LogicalSide\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<FloatingMixinInterface> & T {\n class FloatingElement extends superClass {\n /**\n * Controls whether the component is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Set the alignment in relation to the toggle (or anchor) depending on the position.\n * `start` will align it to the left of the toggle (or anchor).\n * `end` will align it to the right of the toggle (or anchor).\n * Setting the `position` to `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom respectively.\n */\n @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n /**\n * Set the position in relation to the toggle (or anchor).\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n }\n\n return FloatingElement\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { NordEvent, transition } from \"../common/events.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private targetElement?: HTMLElement\n private anchorElement?: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n @query(\".n-popout\", true) private popout!: HTMLDivElement\n\n private scrollBar = new ScrollbarController(this)\n\n /**\n * Handle dismissal of the popout, clicking outside the target button and popout.\n */\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"mouseup\"),\n isDismissible: node => node !== this.popout && node !== this.targetElement,\n })\n\n private events = new EventController(this)\n private direction = new DirectionController(this)\n\n @state() private computedPosition?: Placement\n\n @state() private smallViewport = mediaQuery.matches\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * Set an optional anchor element to align against, replacing the triggering element.\n */\n @property({ reflect: true }) anchor?: string\n\n /**\n * Show the popout.\n * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n * If the popout is already open, the promise resolves immediately with `undefined`.\n */\n async show(): Promise<TransitionEvent | void> {\n if (this.open) {\n return Promise.resolve()\n }\n\n this.open = true\n\n // we should only focus once the popout is visible after render is complete\n await this.updateComplete\n\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent(\"open\"))\n\n return transition(this.popout)\n }\n\n /**\n * Hide the popout.\n * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n * If the popout is already closed, the promise resolves immediately with `undefined`.\n * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n */\n async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n if (!this.open) {\n return Promise.resolve()\n }\n\n this.open = false\n\n this.cleanupAutoUpdate?.()\n\n /**\n * Dispatched when the popout is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.targetElement?.focus({ preventScroll: true })\n }\n\n return transition(this.popout)\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n this.targetElement?.removeAttribute(\"aria-expanded\")\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n @transitionend=${this.enableScroll}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n // clean up any old listeners\n this.targetElement?.removeEventListener(\"click\", this.toggleOpen)\n\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n } else {\n this.targetElement = this.getToggle()\n this.anchorElement = this.getAnchor()\n\n this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n }\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement?.setAttribute(\"aria-expanded\", `${this.open}`)\n\n if (this.open) {\n if (this.smallViewport) {\n // hide scrollbar and prevent scroll on body\n this.scrollBar.lockScroll()\n } else if (this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n }\n } else {\n this.cleanupAutoUpdate?.()\n }\n }\n\n @observe(\"anchor\")\n protected handleAnchorChange() {\n this.cleanupAutoUpdate?.()\n this.anchorElement = this.getAnchor()\n\n // if the popout is already open when the anchor changes, we should update its position\n if (this.open && !this.smallViewport && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n }\n }\n\n private enableScroll = () => {\n // scrollbar should only be restored when the backdrop has transitioned\n // that way we avoid awkward double scrollbars.\n if (!this.open) {\n this.scrollBar.unlockScroll()\n }\n }\n\n /**\n * Get the position of the element toggling the popout\n * and position the popout underneath it, taking into account the optional placement.\n */\n private updatePosition = async () => {\n if (!this.anchorElement) {\n return\n }\n\n const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ],\n })\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.setProperty(\"--_n-popout-position-x\", `${x}px`)\n this.style.setProperty(\"--_n-popout-position-y\", `${y}px`)\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else if (!this.smallViewport) {\n this.updatePosition().then(() => this.show())\n } else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n\n private getAnchor() {\n if (!this.anchor) {\n return this.targetElement\n }\n\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n if (anchor instanceof HTMLSlotElement) {\n return anchor.assignedElements()[0] as HTMLElement\n }\n\n return anchor\n }\n\n /**\n * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n * autoUpdate is needed when a viewport gets larger and the popout is open.\n */\n private handleMediaQueryChange = () => {\n this.smallViewport = mediaQuery.matches\n\n this.cleanupAutoUpdate?.()\n\n if (!this.smallViewport && this.open && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n this.scrollBar.unlockScroll()\n } else if (this.open) {\n this.scrollBar.lockScroll()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-popout\": Popout\n }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","matches","id","enableScroll","unlockScroll","updatePosition","async","anchorElement","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","getToggle","getAnchor","console","warn","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}