@nordhealth/components 3.11.1 → 3.12.0

package/lib/index.js

@@ -1,2 +1,2 @@
-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-1517347e.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-2f9d860d.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{isTranslationRegistered,registerTranslation}from"./translation.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-b54db654.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";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"./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"./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"./dates-5b651fbe.js";import"./DateSelectEvent.js";import"./interface-close-small-f26b0299.js";import"./date-adapter.js";import"./interface-checked-small-07292940.js";import"./positioning-2346bdd6.js";import"./fsm-50373df9.js";import"./DropdownItem-588f5a6b.js";import"./Sticky-c34c9b12.js";import"./ScrollbarController-773c79f4.js";import"./ModalController.js";import"./NotificationMixin-207f1f56.js";
+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-2f9d860d.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"./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-2346bdd6.js";import"./fsm-50373df9.js";import"./LightSlotController-c51e9cf5.js";import"./DropdownItem-588f5a6b.js";import"./Sticky-c34c9b12.js";import"./ScrollbarController-773c79f4.js";import"./ModalController.js";import"./NotificationMixin-207f1f56.js";import"./DraftComponentMixin-9e4b7b34.js";
 //# sourceMappingURL=index.js.map

package/lib/src/button-group/ButtonGroup.d.ts

@@ -6,9 +6,8 @@ import { LitElement } from "lit";
  * @category structure
  * @slot - The button group content
  *
- * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.
+ * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.
  * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.
-
  */
 export default class ButtonGroup extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -24,7 +23,7 @@ export default class ButtonGroup extends LitElement {
     direction: "vertical" | "horizontal";
     /**
      * Defines whether the buttons are forced in a single line
-     * or can be flowed into multiple lines (only relevant when variant is set to `spaced`).
+     * or can be flowed into multiple lines (only applied when variant is set to `spaced`).
      */
     wrap: boolean;
     /**

package/lib/src/index.d.ts

@@ -1,3 +1,5 @@
+export { registerTranslation, isTranslationRegistered } from "./localization/translation.js";
+export type { Translation } from "./localization/translation.js";
 export { default as Badge } from "./badge/Badge.js";
 export { default as Button } from "./button/Button.js";
 export { default as Card } from "./card/Card.js";
@@ -31,8 +33,6 @@ export { default as Popout } from "./popout/Popout.js";
 export { default as Dropdown } from "./dropdown/Dropdown.js";
 export { default as DropdownItem } from "./dropdown-item/DropdownItem.js";
 export { default as DropdownGroup } from "./dropdown-group/DropdownGroup.js";
-export { registerTranslation, isTranslationRegistered } from "./localization/translation.js";
-export type { Translation } from "./localization/translation.js";
 export { default as TabGroup } from "./tab-group/TabGroup.js";
 export { default as Tab } from "./tab/Tab.js";
 export { default as TabPanel } from "./tab-panel/TabPanel.js";
@@ -52,3 +52,6 @@ export { default as NotificationGroup } from "./notification-group/NotificationG
 export { default as TopBar } from "./top-bar/TopBar.js";
 export { default as Footer } from "./footer/Footer.js";
 export { default as Tag } from "./tag/Tag.js";
+export { default as TagGroup } from "./tag-group/TagGroup.js";
+export { default as SegmentedControl } from "./segmented-control/SegmentedControl.js";
+export { default as SegmentedControlItem } from "./segmented-control-item/SegmentedControlItem.js";

package/lib/src/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+declare const SegmentedControl_base: typeof LitElement;
+/**
+ * Segmented control is used to pick one choice from a set of
+ * closely related choices, and immediately apply that selection.
+ *
+ * @status draft
+ * @category action
+ * @slot - Default slot.
+ *
+ */
+export default class SegmentedControl extends SegmentedControl_base {
+    static styles: import("lit").CSSResult[];
+    private defaultSlot;
+    /**
+     * Controls whether the segmented control expands to fill the width of its container.
+     */
+    expand: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-segmented-control": SegmentedControl;
+    }
+}
+export {};

package/lib/src/segmented-control/SegmentedControl.test.d.ts

@@ -0,0 +1,8 @@
+import "../segmented-control-item/SegmentedControlItem.js";
+import "../visually-hidden/VisuallyHidden.js";
+import "../divider/Divider.js";
+import "../button/Button.js";
+import "../select/Select.js";
+import "../input/Input.js";
+import "../stack/Stack.js";
+import "../icon/Icon.js";

package/lib/src/segmented-control-item/SegmentedControlItem.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+import { LightDomController } from "../common/controllers/LightDomController.js";
+import { LightSlotController } from "../common/controllers/LightSlotController.js";
+declare const SegmentedControlItem_base: (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
+/**
+ * Segmented control items populate a segmented control with options.
+ * Every item should be placed inside a segmented control.
+ *
+ * @status draft
+ * @category action
+ * @slot label - Use when a label requires more than plain text.
+ *
+ * @cssprop [--n-segmented-control-item-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).
+ * @cssprop [--n-segmented-control-item-gap=var(--n-space-xs)] - Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).
+ * @cssprop [--n-segmented-control-item-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the item.
+ * @cssprop [--n-segmented-control-item-background-color=var(--n-color-nav-hover)] - Controls the background color of the item, using our [color tokens](/tokens/#color).
+ * @cssprop [--n-segmented-control-item-color=var(--n-color-text-weaker)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).
+ * @cssprop [--n-segmented-control-item-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the item.
+ * @cssprop [--n-segmented-control-item-box-shadow=none] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).
+ * @cssprop [--n-segmented-control-item-font-size=var(--n-font-size-m)] - Controls the size of the text within the item, using our [font tokens](/tokens/#font).
+ * @cssprop [--n-segmented-control-item-font-weight=var(--n-font-weight)] - Controls the weight of the text within the item, using our [font tokens](/tokens/#font).
+ * @cssprop [--n-segmented-control-item-min-block-size=calc(var(--n-space-xl) - 2px)] - Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).
+ * @cssprop [--n-segmented-control-item-inline-size=auto] - Controls the inline size of the item.
+ */
+export default class SegmentedControlItem extends SegmentedControlItem_base {
+    static styles: import("lit").CSSResult[];
+    protected inputId: string;
+    /**
+     * For accessibility reasons, we render the form parts of the component to the light DOM.
+     */
+    protected inputSlot: LightDomController;
+    protected labelSlot: LightSlotController;
+    /**
+     * Controls whether the segmented control item is checked or not.
+     */
+    checked: boolean;
+    /**
+     * The size of the segmented control item.
+     * This affects font-size and padding.
+     */
+    size: "s" | "m" | "l";
+    /**
+     * Label for the segmented control item.
+     */
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+    protected handleCheckedChange(previousChecked: boolean): void;
+    private uncheckSiblings;
+    protected handleChange(e: Event): void;
+    private handleBlur;
+    private handleFocus;
+    protected handleInput(e: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-segmented-control-item": SegmentedControlItem;
+    }
+}
+export {};

package/lib/src/segmented-control-item/SegmentedControlItem.test.d.ts

@@ -0,0 +1,3 @@
+import "../stack/Stack.js";
+import "../icon/Icon.js";
+import "../segmented-control/SegmentedControl.js";

package/lib/src/stack/Stack.d.ts

@@ -14,7 +14,7 @@ export default class Stack extends LitElement {
     /**
      * The space injected between components.
      */
-    gap: "none" | "s" | "m" | "l" | "xl" | "xxl";
+    gap: "none" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
     /**
      * The direction of the stack.
      */

package/lib/src/tag/Tag.d.ts

@@ -29,6 +29,10 @@ export default class Tag extends Tag_base {
      * The size of the tag. This affects the font-size.
      */
     size: "s" | "m";
+    /**
+     * Controls whether the tag expands to fill the width of its container.
+     */
+    expand: boolean;
     protected handleChange(e: Event): void;
     protected handleRemove(): void;
     render(): import("lit").TemplateResult<1>;

package/lib/src/tag-group/TagGroup.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+declare const TagGroup_base: typeof LitElement;
+/**
+ * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.
+ *
+ * @status draft
+ * @category structure
+ * @slot - The tag group content
+ *
+ * @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.
+ * @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.
+ */
+export default class TagGroup extends TagGroup_base {
+    static styles: import("lit").CSSResult[];
+    private dirController;
+    /**
+     * The style variant of the tag group.
+     */
+    variant: "default" | "spaced";
+    /**
+     * The direction of the tag group.
+     */
+    direction: "vertical" | "horizontal";
+    /**
+     * Defines whether the tags are forced in a single line
+     * or can be flowed into multiple lines (only applied when variant is set to `spaced`).
+     */
+    wrap: boolean;
+    /**
+     * The appropriate role for the containing element.
+     */
+    role: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-tag-group": TagGroup;
+    }
+}
+export {};

package/lib/src/tag-group/TagGroup.test.d.ts

@@ -0,0 +1,3 @@
+import "../tag/Tag.js";
+import "../visually-hidden/VisuallyHidden.js";
+import "../stack/Stack.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "3.11.1",
+  "version": "3.12.0",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -184,5 +184,5 @@
       }
     ]
   },
-  "gitHead": "c56f9d37629fd100c685f818813566e4354d6747"
+  "gitHead": "80e9ef35e2b2785fcacbf163e4f64ab637e49492"
 }