@duetds/components 6.6.2 → 6.7.0

package/lib/types/components/duet-range-slider/duet-range-slider.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetLocale, DuetMargin, DuetTheme } from "../../common-types";
 import { DuetNumericInput } from "../../common/form-components";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetRangeChangeEvent = {
+export type DuetRangeChangeEvent = {
   originalEvent?: Event;
   component: "duet-range-slider";
   value: number;

package/lib/types/components/duet-range-stepper/duet-range-stepper.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { DuetTheme } from "../../common-types";
+import { DuetLanguage, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetRangeStepperUpdateEvent = {
+export type DuetRangeStepperUpdateEvent = {
   originalEvent: KeyboardEvent | MouseEvent;
   component: "duet-range-stepper";
   from: number;
@@ -23,6 +23,11 @@ export declare class DuetRangeStepper implements ThemeableComponent {
    * Reference to host HTML element.
    */
   element: HTMLElement;
+  /**
+   * State() variables
+   */
+  language: DuetLanguage;
+  watchLanguageStateHandler(newValue: DuetLanguage, oldValue: DuetLanguage): void;
   /**
    * Theme of the component.
    */
@@ -63,6 +68,8 @@ export declare class DuetRangeStepper implements ThemeableComponent {
   handleStepClick(e: KeyboardEvent | MouseEvent): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   private clampStepIndex;
   private handleClick;
   private getFrom;

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

@@ -2,19 +2,19 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { InputComponent } from "../../common/form-components";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetSelectOption = {
+export type DuetSelectOption = {
   label: string;
   value: string;
   disabled?: boolean;
 };
-export declare type DuetSelectVariation = "default" | "tiny";
-export declare type DuetSelectOptionGroup = {
+export type DuetSelectVariation = "default" | "tiny";
+export type DuetSelectOptionGroup = {
   label: string;
   options: DuetSelectOption[];
   disabled?: boolean;
 };
-export declare type DuetSelectItems = Array<DuetSelectOptionGroup | DuetSelectOption>;
-export declare type DuetSelectEvent = {
+export type DuetSelectItems = Array<DuetSelectOptionGroup | DuetSelectOption>;
+export type DuetSelectEvent = {
   originalEvent?: Event;
   component: "duet-select";
   value: string;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetSlideoutEventDetails = {
+export type DuetSlideoutEventDetails = {
   originalEvent: Event;
   data: {
     element: HTMLElement;
@@ -28,10 +28,9 @@ export declare class DuetSlideout implements ThemeableComponent {
    */
   open: boolean;
   /**
-   * Custom color to be used for a circular background, as a design token entered
-   * in camelCase or kebab-case..
+   * Background color. Use one of the color tokens.
    */
-  background: DuetColor;
+  backgroundColor: DuetColor;
   /**
    * Event raised when the menu has been opened. You can prevent the
    * default browser functionality by calling **event.detail.originalEvent.preventDefault()**

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

@@ -1,7 +1,7 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 import { DuetDirection } from "../../common-types";
-export declare type DuetSpacerBreakpoint = "" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
-export declare type DuetSpacerSize = "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "xxxx-large";
+export type DuetSpacerBreakpoint = "" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
+export type DuetSpacerSize = "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "xxxx-large";
 export declare class DuetSpacer implements ComponentInterface {
   /**
    * Size variation of the spacer. Can be any of the spacing tokens.

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

@@ -1,6 +1,6 @@
 import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetSpinnerSize = "small" | "medium" | "large";
+export type DuetSpinnerSize = "small" | "medium" | "large";
 export declare class DuetSpinner implements ThemeableComponent {
   /**
    * Adds accessible label for the spinner that is only shown for screen readers.

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetHeadingLevel, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetStepState = "current" | "complete" | "incomplete" | "disabled";
-export declare type DuetStepClickEvent = {
+export type DuetStepState = "current" | "complete" | "incomplete" | "disabled";
+export type DuetStepClickEvent = {
   originalEvent: KeyboardEvent | MouseEvent;
   component: "duet-step";
   stepIndex: number;

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

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetStepClickEvent } from "../duet-step/duet-step";
-export declare type DuetStepChangeEvent = {
+export type DuetStepChangeEvent = {
   component: "duet-stepper";
   fromStep: number;
   toStep: number;

package/lib/types/components/duet-tab-group/duet-tab-group.d.ts

@@ -2,11 +2,11 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { ThemeableComponent } from "../../common";
 import { DuetLanguage, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetTabGroupEvent = {
+export type DuetTabGroupEvent = {
   component: "duet-tab-group";
   value: number;
 };
-export declare type DuetTabVariation = "default" | "plain" | "checked";
+export type DuetTabVariation = "default" | "plain" | "checked" | "plain-scrolling";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button

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

@@ -1,9 +1,9 @@
 import { DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetTableBreakpoint = "none" | "none-scrollable" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large";
-export declare type DuetTableVariant = "striped" | "plain" | "fixed";
-export declare type DuetTableStickyDistance = "with-links" | "without-links" | "none";
-export declare type DuetTableToggleEvent = {
+export type DuetTableBreakpoint = "none" | "none-scrollable" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large";
+export type DuetTableVariant = "striped" | "plain" | "fixed";
+export type DuetTableStickyDistance = "with-links" | "without-links" | "none";
+export type DuetTableToggleEvent = {
   component: "duet-table";
   sort_order?: number;
   direction: 1 | -1;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
-export declare type DuetTextareaEvent = {
+export type DuetTextareaEvent = {
   originalEvent?: Event;
   component: "duet-textarea";
   value: string;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetMargin, DuetTheme } from "../../common-types";
-export declare type DuetToggleChangeEvent = {
+export type DuetToggleChangeEvent = {
   component: "duet-toggle";
   checked: boolean;
   value: string;

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

@@ -1,7 +1,7 @@
 import { ThemeableComponent } from "../../common";
 import { DuetLanguage, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetTooltipBreakpoint = "medium" | "large";
+export type DuetTooltipBreakpoint = "medium" | "large";
 export declare class DuetTooltip implements ThemeableComponent {
   /**
    * Own Properties.

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

@@ -6,13 +6,13 @@ import { DuetEditableTableActions } from "../duet-editable-table/duet-editable-t
 import { StatusMessage } from "../duet-upload-aria-status/duet-upload-aria-status";
 import { DuetUploadErrorCode } from "./errorcodes.utils";
 import { DuetXhrRequest, DuetXhrRequestOptions, failureHandler, progressTracker, successHandler } from "./xhr.helpers";
-export declare type DuetUploadEvent = {
+export type DuetUploadEvent = {
   originalEvent?: Event;
   data?: Record<string, any>;
   metaData?: Record<string, any>;
   component: "duet-upload";
 };
-export declare type DuetFileListItem = {
+export type DuetFileListItem = {
   uid: string;
   item: File | null;
   size: number;
@@ -29,24 +29,24 @@ export declare type DuetFileListItem = {
   status?: number;
   pending?: boolean | undefined;
 };
-export declare type DuetUploadQueueItem = {
+export type DuetUploadQueueItem = {
   uid: string;
   item: File;
   name: string;
   metadata: string;
 };
-export declare type XHRMiddlewareOptions = {
+export type XHRMiddlewareOptions = {
   payload: Record<string, any>;
   options: Partial<DuetXhrRequestOptions>;
   onFailure: failureHandler;
   onSuccess: successHandler;
   onProgress: progressTracker;
 };
-export declare type XHRInternalMiddleWare = (XHRMiddlewareOptions: any) => XHRMiddlewareOptions;
+export type XHRInternalMiddleWare = (XHRMiddlewareOptions: any) => XHRMiddlewareOptions;
 export interface StringMap {
   [key: string]: any;
 }
-export declare type DuetUploadTableGroupName = {
+export type DuetUploadTableGroupName = {
   id: string;
   label: DuetLangObject;
   actionLabel?: DuetLangObject;

package/lib/types/components/duet-upload/errorcodes.utils.d.ts

@@ -1,9 +1,9 @@
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetUploadErrorCode = {
+export type DuetUploadErrorCode = {
   type: string | undefined;
   system_message: string | undefined;
   message: DuetLangObject | undefined;
 };
-export declare type DuetUploadErrorCodes = DuetUploadErrorCode[] | string;
+export type DuetUploadErrorCodes = DuetUploadErrorCode[] | string;
 export declare const getError: (code: string, errorCodes: DuetUploadErrorCodes) => DuetUploadErrorCode;
 export declare const getI18nError: (errorCode: string, errorCodes: DuetUploadErrorCodes) => any;

package/lib/types/components/duet-upload/xhr.helpers.d.ts

@@ -1,14 +1,14 @@
-export declare type DuetXhrRequestOptions = {
+export type DuetXhrRequestOptions = {
   type: "POST" | "DELETE";
   xhr: XMLHttpRequest;
   argument: string | null;
   uri: string;
   headers: Record<string, string> | null;
 };
-export declare type failureHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
-export declare type successHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
-export declare type progressTracker = (name: string) => void;
-export declare type DuetXhrRequest = (payload: Record<string, any>, options: Partial<DuetXhrRequestOptions>, onFailure: failureHandler, onSuccess: successHandler, onProgress: progressTracker) => XMLHttpRequest;
+export type failureHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
+export type successHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
+export type progressTracker = (name: string) => void;
+export type DuetXhrRequest = (payload: Record<string, any>, options: Partial<DuetXhrRequestOptions>, onFailure: failureHandler, onSuccess: successHandler, onProgress: progressTracker) => XMLHttpRequest;
 export declare const makeXhrRequest: ({ payload, options, onFailure, onSuccess, onProgress }: {
   payload: any;
   options: any;

package/lib/types/components/duet-upload-aria-status/duet-upload-aria-status.d.ts

@@ -1,4 +1,4 @@
-export declare type StatusMessage = {
+export type StatusMessage = {
   inProgress: string;
   inProgressWithErrors: string;
   done: string;

package/lib/types/components.d.ts

@@ -159,6 +159,7 @@ export namespace Components {
           * Should a button be rendered to dismiss the alert?
          */
         "dismissible": boolean;
+        "hide": () => Promise<void>;
         /**
           * Icon to display to the left of the content.
          */
@@ -171,6 +172,7 @@ export namespace Components {
           * Controls the padding of the component.
          */
         "padding": DuetPadding;
+        "show": () => Promise<void>;
         /**
           * Theme of the card.
          */
@@ -2819,9 +2821,9 @@ export namespace Components {
     }
     interface DuetSlideout {
         /**
-          * Custom color to be used for a circular background, as a design token entered in camelCase or kebab-case..
+          * Background color. Use one of the color tokens.
          */
-        "background": DuetColor;
+        "backgroundColor": DuetColor;
         /**
           * Open
          */
@@ -7393,9 +7395,9 @@ declare namespace LocalJSX {
     }
     interface DuetSlideout {
         /**
-          * Custom color to be used for a circular background, as a design token entered in camelCase or kebab-case..
+          * Background color. Use one of the color tokens.
          */
-        "background"?: DuetColor;
+        "backgroundColor"?: DuetColor;
         /**
           * Event raised when the menu has been opened. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**.
          */

package/lib/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;

package/lib/types/utils/fixture-utils.d.ts

@@ -1,4 +1,4 @@
-declare type ComponentFixtures = {
+type ComponentFixtures = {
   component: string;
   fixtures: Record<string, string>;
 };

package/lib/types/utils/focus-utils.d.ts

@@ -1,5 +1,5 @@
 import { FunctionalComponent } from "../stencil-public-runtime";
-export declare type Focusable = HTMLElement | {
+export type Focusable = HTMLElement | {
   setFocus(): void;
 };
 export declare const focusElement: (element: Focusable) => void;

package/lib/types/utils/language-utils.d.ts

@@ -1,3 +1,4 @@
+import { ComponentInterface } from "../stencil-public-runtime";
 import { DuetLanguage, DuetLanguageWithUs, DuetLocale } from "../common-types";
 /**
  * These utilities are helpfull in getting languages and returning default strings accordingly
@@ -17,7 +18,7 @@ export interface DuetLangObject {
   us?: any;
   sv: any;
 }
-export declare type DuetMonetaryDefaults = "$" | "€" | "£";
+export type DuetMonetaryDefaults = "$" | "€" | "£";
 export declare const getCurrentLanguage: () => string;
 export declare const isOfTypeLanguage: (keyInput: string) => keyInput is DuetLanguage;
 /**
@@ -52,3 +53,5 @@ export declare const sanitizeString: (string: any) => Record<string, any> | stri
  * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
  */
 export declare const getLocaleString: (langObject: DuetLangObject | string, languageOverride?: string) => any;
+export declare const connectLanguageChangeObserver: (component: ComponentInterface) => void;
+export declare const disconnectLanguageChangeObserver: (component: ComponentInterface) => void;

package/lib/types/utils/test-utils.d.ts

@@ -1,7 +1,7 @@
 import { E2EElement, E2EPage } from "@stencil/core/testing";
 import { Page as PuppeteerPage } from "puppeteer";
-export declare type DuetE2EPage = E2EPage & Pick<PuppeteerPage, "screenshot" | "viewport">;
-declare type DuetE2EPageOptions = {
+export type DuetE2EPage = E2EPage & Pick<PuppeteerPage, "screenshot" | "viewport">;
+type DuetE2EPageOptions = {
   html: string;
   viewportWidth: number;
 };

package/lib/types/utils/token-utils.d.ts

@@ -21,4 +21,4 @@ export declare const breakpointToToken: {
   "xx-large": string;
   "xxx-large": string;
 };
-export declare type DuetBreakpoints = keyof typeof breakpointToToken;
+export type DuetBreakpoints = keyof typeof breakpointToToken;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.6.2",
+  "version": "6.7.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -30,7 +30,7 @@
     "test:stencil:ci": "stencil test --spec --passWithNoTests",
     "test:fixtures:watch": "run-p koa:ci test:stencil:fixtures:watch",
     "test:fixtures:ci": "cross-env-shell CI=true run-p koa:ci test:stencil:fixtures:ci",
-    "test:stencil:fixtures": "cross-env-shell VIZDIF=true stencil test --maxWorkers=50% --e2e -t vizdif",
+    "test:stencil:fixtures": "cross-env-shell VIZDIF=true stencil test --ci --e2e -t vizdif",
     "test:stencil:fixtures:watch": "cross-env-shell VIZDIF=true stencil test --maxWorkers=25% --e2e --watch -t vizdif",
     "test:stencil:fixtures:ci": "cross-env-shell VIZDIF=true stencil test --ci --e2e -t vizdif",
     "version": "npm run build",
@@ -50,29 +50,24 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.34",
-    "@duetds/icons": "3.0.34",
-    "@duetds/tokens": "3.0.34",
-    "@koa/cors": "3.3.0",
-    "@rollup/plugin-replace": "3.1.0",
-    "@stencil/core": "2.19.3",
-    "@stencil/sass": "1.5.2",
-    "@types/jest": "26.0.24",
-    "chalk": "4.1.2",
-    "copyfiles": "2.4.1",
+    "@duetds/fonts": "2.0.35",
+    "@duetds/icons": "3.0.35",
+    "@duetds/tokens": "3.0.35",
+    "@rollup/plugin-replace": "5.0.2",
+    "@stencil/core": "2.22.2",
+    "@stencil/sass": "2.0.4",
+    "@types/jest": "27.0.3",
     "cross-env": "7.0.3",
-    "dotenv": "16.0.0",
-    "find-up": "4.1.0",
-    "jest": "26.6.3",
-    "jest-cli": "26.6.3",
-    "jest-environment-node": "26.6.2",
-    "jest-junit": "12.3.0",
+    "dotenv": "16.0.3",
+    "jest": "27.0.3",
+    "jest-cli": "27.0.3",
+    "jest-environment-node": "27.0.3",
+    "jest-junit": "15.0.0",
     "kill-process-by-name": "1.0.5",
     "npm-run-all": "4.1.5",
-    "onchange": "7.1.0",
-    "prettier": "2.6.1",
+    "prettier": "2.8.4",
     "puppeteer": "19.3.0",
-    "sass": "1.49.10",
+    "sass": "1.59.2",
     "stylelint": "14.6.1",
     "stylelint-config-recess-order": "3.0.0",
     "stylelint-config-sass-guidelines": "9.0.1"
@@ -83,5 +78,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "f05216ef1a1a119d41847cedbf77bec568ec03b6"
+  "gitHead": "ac5739affdb6be57292896335b4d2f21c454a0f3"
 }

package/lib/duet/p-1d3eea4d.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{r as t,c as e,h as i,H as o,g as s}from"./p-6e299197.js";import{i as a}from"./p-4ebf1618.js";import{F as d}from"./p-36f8f697.js";import{g as n}from"./p-79a9746e.js";import"./p-9052b6f5.js";const l=class{constructor(i){t(this,i),this.duetSlideoutEvent=e(this,"duetSlideoutEvent",7),this.toggleMenu=t=>{const e=!this.open;this.open=e,this.duetSlideoutEvent.emit({originalEvent:t,data:{element:this.element,open:this.open},component:"duet-slideout"}),e?setTimeout((()=>{this.closeButton.focus()}),200):setTimeout((()=>{this.openButton.setFocus()}),200)},this.onClick=t=>{this.toggleMenu(t)},this.theme="",this.open=!1,this.background=""}async toggle(){const t=new CustomEvent("toggle");this.toggleMenu(t),setTimeout((()=>{this.closeButton.focus()}),200)}componentWillLoad(){a(this),this.openButton=this.element.querySelector(":scope > [slot='toggle']"),this.openButton&&(this.openButton.setAttribute("aria-haspopup","dialog"),this.openButton.setAttribute("aria-expanded","false"),this.openButton.addEventListener("click",(t=>{t.stopPropagation(),t.preventDefault(),this.onClick(t)})),this.openButton=this.openButton)}render(){const t={background:n(this.background,this.theme)};return i(o,null,i("div",{class:{"duet-slideout":!0,"duet-theme-turva":"turva"===this.theme}},i("slot",{name:"toggle"}),i("div",{class:{"desktop-bg":!0,hidden:!this.open},onClick:()=>{this.open=!1}}),i("div",{tabindex:"-1",role:"dialog",id:"dialog","aria-labelledby":"button","aria-modal":"true","aria-flowto":"menubar",class:{dialog:!0,hidden:!this.open},style:t},i(d,{moveFocusTo:this.closeButton}),i("div",{class:"top"},i("button",{ref:t=>this.closeButton=t,"aria-haspopup":"dialog","aria-controls":"dialog","aria-expanded":this.open?"true":"false",type:"button",class:{"slideout-close":!0,active:this.open},onClick:this.onClick},i("duet-icon",{name:"navigation-close",size:"small",margin:"none"}))),i("div",{id:"menubar",role:"menubar",class:{items:!0}},i("slot",null)),i(d,{moveFocusTo:this.closeButton}))))}get element(){return s(this)}};l.style='*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}:host slot:not([name=toggle])::slotted(*){position:relative;visibility:hidden;opacity:0}:host([open]) slot:not([name=toggle])::slotted(*){visibility:visible;opacity:1}.duet-slideout{display:flex;align-items:center;height:100%}.duet-slideout .desktop-bg{display:none}@media (min-width: 62em){.duet-slideout .desktop-bg{position:fixed;top:0;left:0;z-index:400;display:block;width:100%;height:100%;visibility:hidden;background:rgba(0, 41, 77, 0.6);opacity:0;transition:600ms ease}.duet-slideout .desktop-bg:not(.hidden){visibility:visible;opacity:1;transition:600ms ease}}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgba(23, 28, 58, 0.6)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;overflow-y:auto;background:white;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva button{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#171c3a}.duet-slideout.duet-theme-turva button.active{color:#c60c30}.duet-slideout.duet-theme-turva button.active::after{background:#c60c30}::slotted(*){width:100%}slot{color:#00294d}.duet-theme-turva slot{color:#940925}slot[name=toggle]{color:inherit}';export{l as duet_slideout}

package/lib/duet/p-207a0c1c.system.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-System.register(["./p-3ee4e5c9.system.js","./p-8078b081.system.js","./p-33b3aba4.system.js"],(function(e){"use strict";var t,n,i,a,o,r;return{setters:[function(e){t=e.r;n=e.h;i=e.H;a=e.g},function(e){o=e.m},function(e){r=e.i}],execute:function(){var s='*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-menu-bar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:inherit;text-align:center;text-decoration:none}@media (min-width: 62em){.duet-menu-bar-link{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-link{padding:0 28px}}.duet-menu-bar-link.active{color:#0077b3}.duet-menu-bar-link.active::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:"";background:#0077b3;transition:300ms ease;transform:translateY(2px)}@media (min-width: 64.0625em){.duet-menu-bar-link.active::after{z-index:auto;height:2px}}.duet-menu-bar-link.active.duet-theme-turva{color:#c60c30}.duet-menu-bar-link.active.duet-theme-turva::after{background:#c60c30}@media (min-width: 62em){.duet-menu-bar-link:hover{color:#0077b3}.duet-menu-bar-link:hover.duet-theme-turva{color:#c60c30}}';var c=e("duet_menu_bar_link",function(){function e(e){var n=this;t(this,e);this.mql=[window.matchMedia(o.replace(/'/g,""))];this.boundMqlFunctions=[];this.changeIconSize=function(){if(n.mql[0].matches){n.iconSize="x-small"}else{n.iconSize="small"}};this.iconSize="x-small";this.theme="";this.active=false;this.href="#";this.icon=undefined}e.prototype.componentWillLoad=function(){r(this)};e.prototype.connectedCallback=function(){this.changeIconSize();for(var e=0;e<this.mql.length;e++){if(this.mql[e].addEventListener){var t=this.changeIconSize.bind(this);this.mql[e].addEventListener("change",t);this.boundMqlFunctions[e]=t}}};e.prototype.disconnectedCallback=function(){for(var e=0;e<this.mql.length;e++){if(this.mql[e].removeEventListener){this.mql[e].removeEventListener("change",this.boundMqlFunctions[e])}}this.boundMqlFunctions=[]};e.prototype.render=function(){return n(i,null,n("a",{class:{"duet-menu-bar-link":true,"duet-theme-turva":this.theme==="turva",active:this.active},href:this.href},this.icon&&n("duet-icon",{size:this.iconSize,name:this.icon,margin:"none"}),n("slot",null)))};Object.defineProperty(e.prototype,"element",{get:function(){return a(this)},enumerable:false,configurable:true});return e}());c.style=s}}}));

package/lib/duet/p-23f53cd4.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{r as e,c as t,h as i,H as n,g as o}from"./p-6e299197.js";import{m as a,c as r}from"./p-c4d8cad0.js";import{i as s}from"./p-4ebf1618.js";const h=class{constructor(i){e(this,i),this.duetEvent=t(this,"duetEvent",7),this.mql=[window.matchMedia(a.replace(/'/g,"")),window.matchMedia(r.replace(/'/g,""))],this.boundMqlFunctions=[],this.scrollbarCheck=()=>{this.leftMoreVisible=this.container.scrollLeft>0,this.rightMoreVisible=this.container.scrollLeft!==this.container.scrollWidth-this.container.clientWidth},this.scrollToActive=()=>{const e=this.element.querySelector("[active]");e&&e.offsetLeft&&e.offsetLeft>50&&(this.container.scrollLeft=e.offsetLeft)},this.changeLogoSize=()=>{this.logoSize=this.mql[1].matches?"large":"medium"},this.handleLogoClick=e=>{this.duetEvent.emit({name:"logoClick",component:"duet-menu-bar",data:{logoHref:this.logoHref},originalEvent:e})},this.logoSize="large",this.leftMoreVisible=!1,this.rightMoreVisible=!1,this.theme="",this.logo=!0,this.logoHref=void 0}componentWillLoad(){s(this)}connectedCallback(){this.changeLogoSize();for(let e=0;e<this.mql.length;e++)if(this.mql[e].addEventListener){const t=this.changeLogoSize.bind(this);this.mql[e].addEventListener("change",t),this.boundMqlFunctions[e]=t}}disconnectedCallback(){for(let e=0;e<this.mql.length;e++)this.mql[e].removeEventListener&&this.mql[e].removeEventListener("change",this.boundMqlFunctions[e]);this.boundMqlFunctions=[]}componentDidLoad(){setTimeout((()=>{this.scrollbarCheck(),this.scrollToActive()}),0)}render(){const e=document.querySelectorAll("duet-slideout").length>0;return i(n,null,i("div",{class:{"duet-menu-bar":!0,"duet-theme-turva":"turva"===this.theme,"horizontal-nav":e&&!this.logo},role:"menubar"},i("div",{class:"top"}),i("div",{class:{container:!0},ref:e=>this.container=e,onScroll:()=>this.scrollbarCheck()},this.logo&&i("div",null,i("duet-logo",{size:this.logoSize,margin:"none",theme:this.theme,href:this.logoHref,onClick:this.handleLogoClick})),i("div",{class:"center"},i("div",{class:"more-left",hidden:!this.leftMoreVisible}),i("slot",{name:"center"}),i("div",{class:"more-right",hidden:!this.rightMoreVisible})),i("slot",{name:"right"})),i("div",{class:"bottom"})))}get element(){return o(this)}};h.style='*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}.duet-menu-bar{display:flex;align-items:center;justify-content:center;background:white;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07)}@media (min-width: 62em){.duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}.duet-menu-bar .top{display:none}.duet-menu-bar .bottom{display:none}.duet-menu-bar.horizontal-nav{position:relative}.duet-menu-bar.horizontal-nav .top{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:#f5f8fa}.duet-menu-bar.horizontal-nav .bottom{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:#e1e3e6}.duet-menu-bar.horizontal-nav .more-left{position:absolute;top:0;left:-1px;z-index:1;width:36px;height:49px;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-left{display:none}}.duet-menu-bar.horizontal-nav .more-right{position:absolute;top:0;right:-1px;z-index:1;width:36px;height:49px;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-right{display:none}}@media (pointer: fine){.duet-menu-bar.horizontal-nav{display:none}}@media (pointer: fine) and ((min-width: 62em)){.duet-menu-bar.horizontal-nav{display:flex}}.duet-menu-bar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}.duet-menu-bar .container::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){.duet-menu-bar .container{height:5rem;padding:0 28px;overflow-x:visible}}.duet-menu-bar .container>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar .container>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar .container>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar .container ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:white}slot[name=center]{font-size:1rem;font-weight:600;line-height:1.25;color:#00294d}.duet-theme-turva slot[name=center]{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#940925}slot[name=right]{font-size:0.875rem;font-weight:400;line-height:1.25;color:#004d80}.duet-theme-turva slot[name=right]{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#940925}';export{h as duet_menu_bar}