@duetds/components 5.0.3 → 5.1.0

package/lib/html.html-data.json

@@ -1176,6 +1176,49 @@
         }
       ]
     },
+    {
+      "name": "duet-combobox",
+      "description": {
+        "kind": "markdown",
+        "value": "---\ntitle: Combobox\nname: duet-combobox\nstatus: prototype\nreleased: 5.0.2\nplatforms: Web only\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nssr: Supported\ncategory: Text\nintro: ComboBox is used as an alternative to a select box, where many items must be chosen from\nexamples:\n  - name: ComboBox\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Default ComboBox\n    file: fixtures/duet-combobox.html  \n  - name: Passing values as string to ComboBox\n    file: fixtures/duet-combobox-values-as-json.html\n  - name: Combobox with categories, forced selection and custom formatter\n    file: fixtures/duet-combobox-custom-formatter.html\n  - name: Combobox with error checking\n    file: fixtures/duet-combobox-custom-formatter-with-errorchecking.html\ntags:\n      - docs-components\n\n---\n\n<!-- usage -->"
+      },
+      "attributes": [
+        {
+          "name": "accessible-label-defaults",
+          "description": "Placeholder defaults"
+        },
+        {
+          "name": "force",
+          "description": "Force the user to make a selection (typing things in the input field will only be used for list search)"
+        },
+        {
+          "name": "items",
+          "description": "Array of item objects."
+        },
+        {
+          "name": "theme",
+          "description": "Theme of the combobox.",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "turva"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Object containing selected item/s"
+        }
+      ],
+      "references": [
+        {
+          "name": "Source code",
+          "url": "./https:/lt-devtool.visualstudio.com/_git/Duet%20Design%20System?path=/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+        }
+      ]
+    },
     {
       "name": "duet-cookie-consent",
       "description": {
@@ -1211,7 +1254,7 @@
       "name": "duet-date-picker",
       "description": {
         "kind": "markdown",
-        "value": "---\ntitle: Date Picker\nname: duet-date-picker\nstatus: ready\nplatforms: Web only\nssr: Supported\nreleased: 4.4.2\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nintro: Date Picker component lets user pick a single date or a date range using\n  a special calendar like date picker interface. There’s also <a\n  href=\"https://github.com/duetds/date-picker\">open source version</a> of this\n  component available.\ndescription: \"Date Picker allows you to set a minimum and a maximum allowed\n  date. These settings can be combined or used alone, depending on the need.\n  Please note that the date values must be passed in IS0-8601 format:\n  <code>YYYY-MM-DD</code>.\"\nexample_height: 540px\nexamples:\n  - name: date-picker\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic date picker usage\n    file: fixtures/duet-date-picker_basic_date_picker_usage.html\n  - name: Date picker using min and max values\n    file: fixtures/duet-date-picker_date_picker_using_min_and_max_values.html\n  - name: Date picker with validation error messages\n    file: fixtures/duet-date-picker_date_picker_with_validation_error_messages.html\n  - name: Date range using date picker\n    file: fixtures/duet-date-picker_date_range_using_date_picker.html\n  - name: Date picker using expand property\n    file: fixtures/duet-date-picker_date_picker_using_expand_property.html\n  - name: Disabled date picker\n    file: fixtures/duet-date-picker_disabled_date_picker.html\n  - name: Date picker with an error\n    file: fixtures/duet-date-picker_date_picker_with_an_error.html\n  - name: Date picker with a tooltip\n    file: fixtures/duet-date-picker_date_picker_with_a_tooltip.html\n  - name: Date picker using english\n    file: fixtures/duet-date-picker_date_picker_using_english.html\n  - name: Date picker using swedish\n    file: fixtures/duet-date-picker_date_picker_using_swedish.html\n  - name: Showing the date picker using the provided method\n    file: fixtures/duet-date-picker_showing_the_date_picker_using_the_provided_method.html\n  - name: Showing the date picker with caption and echoing placeholder\n    file: fixtures/duet-date-picker_caption_and_echoing_placeholder.html \ntags:\n  - docs-components\n---\n\n<!-- usage -->"
+        "value": "---\ntitle: Date Picker\nname: duet-date-picker\nstatus: ready\nplatforms: Web only\nssr: Supported\nreleased: 4.4.2\ninternationalization: Supported\naccessibility: Keyboard, Screen Reader\nintro: Date Picker component lets user pick a single date or a date range using\n  a special calendar like date picker interface. There’s also <a\n  href=\"https://github.com/duetds/date-picker\">open source version</a> of this\n  component available.\ndescription: \"Date Picker allows you to set a minimum and a maximum allowed\n  date. These settings can be combined or used alone, depending on the need.\n  Please note that the date values must be passed in IS0-8601 format:\n  <code>YYYY-MM-DD</code>.\"\nexample_height: 540px\nexamples:\n  - name: date-picker\n    code: This first example creates the actual URL and DOCS, hence it needs to be\n      here.\n  - name: Basic date picker usage\n    file: fixtures/duet-date-picker_basic_date_picker_usage.html  \n  - name: Date picker with large increment\n    file: fixtures/duet-date-picker_with_large_increment.html\n  - name: Date picker using min and max values\n    file: fixtures/duet-date-picker_date_picker_using_min_and_max_values.html\n  - name: Date picker with validation error messages\n    file: fixtures/duet-date-picker_date_picker_with_validation_error_messages.html\n  - name: Date range using date picker\n    file: fixtures/duet-date-picker_date_range_using_date_picker.html\n  - name: Date picker using expand property\n    file: fixtures/duet-date-picker_date_picker_using_expand_property.html\n  - name: Disabled date picker\n    file: fixtures/duet-date-picker_disabled_date_picker.html\n  - name: Date picker with an error\n    file: fixtures/duet-date-picker_date_picker_with_an_error.html\n  - name: Date picker with a tooltip\n    file: fixtures/duet-date-picker_date_picker_with_a_tooltip.html\n  - name: Date picker using english\n    file: fixtures/duet-date-picker_date_picker_using_english.html\n  - name: Date picker using swedish\n    file: fixtures/duet-date-picker_date_picker_using_swedish.html\n  - name: Showing the date picker using the provided method\n    file: fixtures/duet-date-picker_showing_the_date_picker_using_the_provided_method.html\n  - name: Showing the date picker with caption and echoing placeholder\n    file: fixtures/duet-date-picker_caption_and_echoing_placeholder.html \ntags:\n  - docs-components\n---\n\n<!-- usage -->"
       },
       "attributes": [
         {
@@ -1266,6 +1309,10 @@
           "name": "identifier",
           "description": "Adds a unique identifier for the date picker input."
         },
+        {
+          "name": "increment",
+          "description": "Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100"
+        },
         {
           "name": "label",
           "description": "Label for the date picker input."
@@ -2405,6 +2452,14 @@
           "name": "accessible-described-by",
           "description": "Indicates the id of a component that describes the input."
         },
+        {
+          "name": "accessible-expanded",
+          "description": "Expanded state of the element, if needed"
+        },
+        {
+          "name": "accessible-has-popup",
+          "description": "Indicates value of any popup element associated with the input."
+        },
         {
           "name": "accessible-owns",
           "description": "Indicates the id of a component owned by the input."

package/lib/types/components/duet-combobox/duet-combobox-select-single.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetComboboxItem } from "./duet-combobox";
+export interface DuetComboboxSelectSingleProps {
+  item: DuetComboboxItem;
+  search: string;
+  selected: boolean;
+}
+export declare const SelectSingle: FunctionalComponent<DuetComboboxSelectSingleProps>;

package/lib/types/components/duet-combobox/duet-combobox-select.d.ts

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DuetComboboxItem } from "./duet-combobox";
+interface DuetComboboxSelect {
+  item: DuetComboboxItem;
+  active: boolean;
+  search: string;
+  total: number;
+  clickHandler?: any;
+  keyHandler?: any;
+  label?: string;
+  selected: boolean;
+}
+export declare const DuetComboBoxSelect: FunctionalComponent<DuetComboboxSelect>;
+export {};

package/lib/types/components/duet-combobox/duet-combobox.d.ts

@@ -0,0 +1,131 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetComboboxEvent = {
+  originalEvent?: Event;
+  component: "duet-combobox";
+  value: any;
+  item: DuetComboboxItem;
+};
+export declare type DuetComboboxItem = {
+  id?: number;
+  value: any;
+  name: string;
+  html?: string;
+  tags?: string[];
+};
+export declare class DuetCombobox implements ThemeableComponent {
+  private input?;
+  private listElement;
+  private listContainer;
+  private isSafari;
+  private resizeObserver;
+  element: HTMLDivElement;
+  processedItems: DuetComboboxItem[];
+  inputWidth: number;
+  inputValue: string;
+  selectionMsg: string;
+  listOpen: boolean;
+  selectedItems?: Set<number>;
+  activeItem?: number;
+  activeItemHandler(state: any): void;
+  /**
+   * Placeholder defaults
+   * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+   */
+  accessibleLabelDefaults: DuetLangObject | string;
+  /**
+   * Hint text to display before the user types into the date picker input.
+   * @default   {
+   * heading: "Valitse:",
+   * item: "{0}, ({1}/{2})",
+   * itemFiltered: "{0}, ({1}/{2} - {3} suodatettu"
+   * }
+   */
+  accessibleLabels: Record<string, string>;
+  /**
+   * Theme of the combobox.
+   */
+  theme: DuetTheme;
+  /**
+   * Force the user to make a selection (typing things in the input field will only be used for list search)
+   */
+  force: boolean;
+  /**
+   * Array of item objects.
+   */
+  items: any;
+  /**
+   * A hook to overwrite how the values are displayed in the input field after a User select an item
+   * @example (item) => `${item.name} (${item.value})`
+   * @default undefined
+   */
+  formatter: (item: DuetComboboxItem) => string;
+  /**
+   * Object containing selected item/s
+   */
+  value: string;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  duetChange: EventEmitter<DuetComboboxEvent>;
+  handleDocumentClick(e: MouseEvent): void;
+  /**
+   * Exposes a formatter function to format the item value displayed after a user selects an item
+   * @param item: DuetComboboxItem
+   */
+  formatItem(item: DuetComboboxItem): Promise<string>;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param event - event
+   *'param item: DuetComboboxItem - the item that was selected
+   */
+  private onListClick;
+  /**
+   * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
+   * TODO: this should be disabled in multiple mode
+   */
+  private shouldListBeFiltered;
+  /**
+   * Helper function that return correct collection depending on filter status returend by shouldListBeFiltered
+   */
+  private returnFilteredOrNonFiltered;
+  /**
+   * Updates the selected items based on the item id.
+   * @param id
+   * @private
+   */
+  private updateSelectedItems;
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param bool -override to clear if invoked by "click outside"
+   */
+  private updateInputText;
+  private updateInputValue;
+  private handleInputKeyDownEvent;
+  private selectActiveItem;
+  private announceActive;
+  private scrollToActive;
+  private formatLabel;
+  /**
+   * Filter the items based on the input value
+   */
+  private getFilteredItems;
+  /**
+   * Sort the return from getFilteredItems so that any item with and item.id that matches this.selectedItems is placed first
+   */
+  private sortFilteredItems;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

package/lib/types/components/duet-date-picker/duet-date-picker.d.ts

@@ -152,6 +152,10 @@ export declare class DuetDatePicker implements ThemeableComponent, InputComponen
    * This setting can be used alone or together with the min property.
    */
   max: string;
+  /**
+   * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+   */
+  incrementYears: number;
   /**
    * This offers information relating to the current validity of the component.
    * It follow as closely as possible the behaviour of the native date input.

package/lib/types/components/duet-footer/duet-footer.d.ts

@@ -19,6 +19,10 @@ export declare type DuetFooterChangeEvent = {
   originalEvent: Event;
 };
 export declare type DuetFooterAnalyticsEvent = DuetAnalyticsEvent<"duet-footer">;
+/**
+ * @part top - piercing selector for styling the top part of the footer
+ * @part menu - piercing selector for styling the menu section of the footer
+ */
 export declare class DuetFooter implements ThemeableComponent {
   /**
    * Reference to host HTML element.

package/lib/types/components/duet-header/duet-header.d.ts

@@ -23,6 +23,10 @@ export declare type DuetHeaderLanguageItem = DuetHeaderItem & {
 };
 export declare type DuetHeaderSession = DuetHeaderItem & {
   type: "login" | "logout";
+  sessionItems?: [{
+    label: string | undefined;
+    items: DuetHeaderItem[];
+  }];
 };
 export declare type DuetHeaderSearch = DuetHeaderItem;
 export declare type DuetHeaderChangeEvent = {
@@ -52,6 +56,8 @@ export declare class DuetHeader implements ThemeableComponent {
   private hasLanguageChanged;
   private languageItemsEl;
   private languageItemsButtonEl;
+  private sessionItemsEl;
+  private sessionItemsButtonEl;
   private segmentItemsEl;
   private segmentItemsButtonEl;
   private navigationEl;
@@ -68,6 +74,7 @@ export declare class DuetHeader implements ThemeableComponent {
    */
   isContactOpen: boolean;
   isLanguageOpen: boolean;
+  isSessionOpen: boolean;
   isSlideOutOpen: boolean;
   isSegmentOpen: boolean;
   openMenu: string;
@@ -312,6 +319,7 @@ export declare class DuetHeader implements ThemeableComponent {
   private handleLanguageClick;
   private handleClick;
   private handleSessionClick;
+  private handleSessionItemClick;
   private handleSearchClick;
   private handleUserClick;
   private handleBackClick;

package/lib/types/components/duet-input/duet-input.d.ts

@@ -43,10 +43,18 @@ export declare class DuetInput implements ThemeableComponent, InputComponent {
    * Indicates the id of a component owned by the input.
    */
   accessibleOwns: string;
+  /**
+   * Expanded state of the element, if needed
+   */
+  accessibleExpanded: string;
   /**
    * Indicates the id of a component that describes the input.
    */
   accessibleDescribedBy: string;
+  /**
+   * Indicates value of any popup element associated with the input.
+   */
+  accessibleHasPopup: string;
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the duetChange
    * event after each keystroke.
@@ -195,11 +203,20 @@ export declare class DuetInput implements ThemeableComponent, InputComponent {
   private onInput;
   private onBlur;
   private onFocus;
+  /** Private functions
+   *
+   */
+  private getDescribedBy;
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
    */
   setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Reset the cursor position on the native element
+   * `input.resetCursor()`.
+   */
+  resetCursor(): Promise<void>;
   /**
    * render() function
    * Always the last one in the class.

package/lib/types/components.d.ts

@@ -15,6 +15,7 @@ import { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./compo
 import { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
 import { DuetChoiceEvent, DuetChoiceType } from "./components/duet-choice/duet-choice";
 import { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollapsibleWeight } from "./components/duet-collapsible/duet-collapsible";
+import { DuetComboboxEvent, DuetComboboxItem } from "./components/duet-combobox/duet-combobox";
 import { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent";
 import { DuetDatePickerChangeEvent, DuetDatePickerDirection, DuetDatePickerFocusEvent } from "./components/duet-date-picker/duet-date-picker";
 import { DuetDividerMargin } from "./components/duet-divider/duet-divider";
@@ -688,6 +689,45 @@ export namespace Components {
          */
         "theme": DuetTheme;
     }
+    interface DuetCombobox {
+        /**
+          * Placeholder defaults
+          * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        "accessibleLabelDefaults": DuetLangObject | string;
+        /**
+          * Hint text to display before the user types into the date picker input.
+          * @default { heading: "Valitse:", item: "{0}, ({1}/{2})", itemFiltered: "{0}, ({1}/{2} - {3} suodatettu" }
+         */
+        "accessibleLabels": Record<string, string>;
+        /**
+          * Force the user to make a selection (typing things in the input field will only be used for list search)
+         */
+        "force": boolean;
+        /**
+          * Exposes a formatter function to format the item value displayed after a user selects an item
+          * @param item : DuetComboboxItem
+         */
+        "formatItem": (item: DuetComboboxItem) => Promise<string>;
+        /**
+          * A hook to overwrite how the values are displayed in the input field after a User select an item
+          * @example (item) => `${item.name} (${item.value})`
+          * @default undefined
+         */
+        "formatter": (item: DuetComboboxItem) => string;
+        /**
+          * Array of item objects.
+         */
+        "items": any;
+        /**
+          * Theme of the combobox.
+         */
+        "theme": DuetTheme;
+        /**
+          * Object containing selected item/s
+         */
+        "value": string;
+    }
     interface DuetCookieConsent {
         /**
           * Adds accessible label for the cookie consent ok button.
@@ -747,6 +787,10 @@ export namespace Components {
           * Adds a unique identifier for the date picker input.
          */
         "identifier": string;
+        /**
+          * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+         */
+        "incrementYears": number;
         /**
           * Label for the date picker input.
          */
@@ -1312,6 +1356,14 @@ export namespace Components {
           * Indicates the id of a component that describes the input.
          */
         "accessibleDescribedBy": string;
+        /**
+          * Expanded state of the element, if needed
+         */
+        "accessibleExpanded": string;
+        /**
+          * Indicates value of any popup element associated with the input.
+         */
+        "accessibleHasPopup": string;
         /**
           * Indicates the id of a component owned by the input.
          */
@@ -1400,6 +1452,10 @@ export namespace Components {
           * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
          */
         "required": boolean;
+        /**
+          * Reset the cursor position on the native element `input.resetCursor()`.
+         */
+        "resetCursor": () => Promise<void>;
         /**
           * Defines a specific role attribute for the input.
          */
@@ -3098,6 +3154,12 @@ declare global {
         prototype: HTMLDuetCollapsibleElement;
         new (): HTMLDuetCollapsibleElement;
     };
+    interface HTMLDuetComboboxElement extends Components.DuetCombobox, HTMLStencilElement {
+    }
+    var HTMLDuetComboboxElement: {
+        prototype: HTMLDuetComboboxElement;
+        new (): HTMLDuetComboboxElement;
+    };
     interface HTMLDuetCookieConsentElement extends Components.DuetCookieConsent, HTMLStencilElement {
     }
     var HTMLDuetCookieConsentElement: {
@@ -3393,6 +3455,7 @@ declare global {
         "duet-choice": HTMLDuetChoiceElement;
         "duet-choice-group": HTMLDuetChoiceGroupElement;
         "duet-collapsible": HTMLDuetCollapsibleElement;
+        "duet-combobox": HTMLDuetComboboxElement;
         "duet-cookie-consent": HTMLDuetCookieConsentElement;
         "duet-date-picker": HTMLDuetDatePickerElement;
         "duet-divider": HTMLDuetDividerElement;
@@ -4101,6 +4164,44 @@ declare namespace LocalJSX {
          */
         "theme"?: DuetTheme;
     }
+    interface DuetCombobox {
+        /**
+          * Placeholder defaults
+          * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        "accessibleLabelDefaults"?: DuetLangObject | string;
+        /**
+          * Hint text to display before the user types into the date picker input.
+          * @default { heading: "Valitse:", item: "{0}, ({1}/{2})", itemFiltered: "{0}, ({1}/{2} - {3} suodatettu" }
+         */
+        "accessibleLabels"?: Record<string, string>;
+        /**
+          * Force the user to make a selection (typing things in the input field will only be used for list search)
+         */
+        "force"?: boolean;
+        /**
+          * A hook to overwrite how the values are displayed in the input field after a User select an item
+          * @example (item) => `${item.name} (${item.value})`
+          * @default undefined
+         */
+        "formatter"?: (item: DuetComboboxItem) => string;
+        /**
+          * Array of item objects.
+         */
+        "items"?: any;
+        /**
+          * Emitted when a keyboard input occurred.
+         */
+        "onDuetChange"?: (event: CustomEvent<DuetComboboxEvent>) => void;
+        /**
+          * Theme of the combobox.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Object containing selected item/s
+         */
+        "value"?: string;
+    }
     interface DuetCookieConsent {
         /**
           * Adds accessible label for the cookie consent ok button.
@@ -4160,6 +4261,10 @@ declare namespace LocalJSX {
           * Adds a unique identifier for the date picker input.
          */
         "identifier"?: string;
+        /**
+          * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+         */
+        "incrementYears"?: number;
         /**
           * Label for the date picker input.
          */
@@ -4799,6 +4904,14 @@ declare namespace LocalJSX {
           * Indicates the id of a component that describes the input.
          */
         "accessibleDescribedBy"?: string;
+        /**
+          * Expanded state of the element, if needed
+         */
+        "accessibleExpanded"?: string;
+        /**
+          * Indicates value of any popup element associated with the input.
+         */
+        "accessibleHasPopup"?: string;
         /**
           * Indicates the id of a component owned by the input.
          */
@@ -6576,6 +6689,7 @@ declare namespace LocalJSX {
         "duet-choice": DuetChoice;
         "duet-choice-group": DuetChoiceGroup;
         "duet-collapsible": DuetCollapsible;
+        "duet-combobox": DuetCombobox;
         "duet-cookie-consent": DuetCookieConsent;
         "duet-date-picker": DuetDatePicker;
         "duet-divider": DuetDivider;
@@ -6641,6 +6755,7 @@ declare module "@stencil/core" {
             "duet-choice": LocalJSX.DuetChoice & JSXBase.HTMLAttributes<HTMLDuetChoiceElement>;
             "duet-choice-group": LocalJSX.DuetChoiceGroup & JSXBase.HTMLAttributes<HTMLDuetChoiceGroupElement>;
             "duet-collapsible": LocalJSX.DuetCollapsible & JSXBase.HTMLAttributes<HTMLDuetCollapsibleElement>;
+            "duet-combobox": LocalJSX.DuetCombobox & JSXBase.HTMLAttributes<HTMLDuetComboboxElement>;
             "duet-cookie-consent": LocalJSX.DuetCookieConsent & JSXBase.HTMLAttributes<HTMLDuetCookieConsentElement>;
             "duet-date-picker": LocalJSX.DuetDatePicker & JSXBase.HTMLAttributes<HTMLDuetDatePickerElement>;
             "duet-divider": LocalJSX.DuetDivider & JSXBase.HTMLAttributes<HTMLDuetDividerElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -48,15 +48,14 @@
     "copy:vscode": "copyfiles --flat \"./lib/html.html-data.json\" \"../vscode\""
   },
   "dependencies": {
-    "body-scroll-lock": "3.1.5",
-    "kill-process-by-name": "1.0.5"
+    "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "1.4.20",
-    "@duetds/icons": "2.2.21",
+    "@duetds/fonts": "1.4.22",
+    "@duetds/icons": "2.2.23",
     "@duetds/stencil-angular-output-target": "0.0.2",
     "@duetds/stencil-react-output-target": "0.0.10",
-    "@duetds/tokens": "2.4.16",
+    "@duetds/tokens": "2.5.5",
     "@koa/cors": "3.3.0",
     "@rollup/plugin-replace": "3.1.0",
     "@stencil/core": "2.15.0",
@@ -73,6 +72,7 @@
     "jest-environment-node": "26.6.2",
     "jest-image-snapshot": "4.5.1",
     "jest-junit": "12.3.0",
+    "kill-process-by-name": "1.0.5",
     "npm-run-all": "4.1.5",
     "onchange": "7.1.0",
     "prettier": "2.6.1",
@@ -88,5 +88,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "870f91d9e42999bbd807e374cf2408d2ffd50f98"
+  "gitHead": "67efc168275e7621103c2c83ff6a1c3e0d9c5570"
 }

package/lib/cjs/themeable-component-0c1be552.js

@@ -1,12 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-const inheritGlobalTheme = (component) => {
-  if (component.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
-    component.theme = "turva";
-  }
-};
-
-exports.inheritGlobalTheme = inheritGlobalTheme;