@duetds/components 6.6.1 → 6.7.0

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetDirection, DuetMargin, DuetTheme } from "../../common-types";
-export declare type DuetRadioEvent = {
+export type DuetRadioEvent = {
   originalEvent?: Event;
   checked: boolean;
   value: string;

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.
          */
@@ -1364,6 +1366,10 @@ export namespace Components {
           * @default "fi"
          */
         "language": DuetLanguage;
+        /**
+          * Layout.
+         */
+        "layout": "narrow" | "fluid";
         /**
           * Forces all items in the header to be leftAligned This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices or allways leftAligned (you must manually switch this parameter if you need special breakpoints) this nullifies textCenter prop
          */
@@ -2815,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
          */
@@ -5896,6 +5902,10 @@ declare namespace LocalJSX {
           * @default "fi"
          */
         "language"?: DuetLanguage;
+        /**
+          * Layout.
+         */
+        "layout"?: "narrow" | "fluid";
         /**
           * Forces all items in the header to be leftAligned This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices or allways leftAligned (you must manually switch this parameter if you need special breakpoints) this nullifies textCenter prop
          */
@@ -7385,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.1",
+  "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.33",
-    "@duetds/icons": "3.0.33",
-    "@duetds/tokens": "3.0.33",
-    "@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": "6c4fbcb2025025b8f513c191a8228997a039753b"
+  "gitHead": "ac5739affdb6be57292896335b4d2f21c454a0f3"
 }