@duetds/components 6.10.2 → 6.10.3

package/lib/types/components.d.ts

@@ -14,6 +14,7 @@ import { DuetCaptionSize } from "./components/duet-caption/duet-caption";
 import { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card";
 import { DuetBreakpoints } from "./utils/token-utils";
 import { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
+import { DuetChipEvent, DuetChipVariation } from "./components/duet-chip/duet-chip";
 import { DuetChoiceEvent } 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";
@@ -44,6 +45,7 @@ import { DuetRadioEvent } from "./components/duet-radio/duet-radio";
 import { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider";
 import { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper";
 import { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select";
+import { DuetShowMoreToggleEvent } from "./components/duet-show-more/duet-show-more";
 import { DuetSlideoutEventDetails } from "./components/duet-slideout/duet-slideout";
 import { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer";
 import { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner";
@@ -65,6 +67,7 @@ export { DuetCaptionSize } from "./components/duet-caption/duet-caption";
 export { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card";
 export { DuetBreakpoints } from "./utils/token-utils";
 export { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
+export { DuetChipEvent, DuetChipVariation } from "./components/duet-chip/duet-chip";
 export { DuetChoiceEvent } from "./components/duet-choice/duet-choice";
 export { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollapsibleWeight } from "./components/duet-collapsible/duet-collapsible";
 export { DuetComboboxEvent, DuetComboboxItem } from "./components/duet-combobox/duet-combobox";
@@ -95,6 +98,7 @@ export { DuetRadioEvent } from "./components/duet-radio/duet-radio";
 export { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider";
 export { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper";
 export { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select";
+export { DuetShowMoreToggleEvent } from "./components/duet-show-more/duet-show-more";
 export { DuetSlideoutEventDetails } from "./components/duet-slideout/duet-slideout";
 export { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer";
 export { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner";
@@ -692,6 +696,40 @@ export namespace Components {
          */
         "type": DuetChoiceType;
     }
+    interface DuetChip {
+        /**
+          * Adds accessible label for the chip that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "accessibleLabel": string;
+        /**
+          * Checked state of the filter chip.
+         */
+        "checked": boolean;
+        /**
+          * Icon to display to the left of the chip content.
+         */
+        "icon": DuetIconName;
+        /**
+          * Adds a unique identifier for the chip.
+         */
+        "identifier": string;
+        /**
+          * Name attribute of the html input (filter) or button.
+         */
+        "name": string;
+        /**
+          * Theme of the button.
+         */
+        "theme": DuetTheme;
+        /**
+          * The value of the html input when used as filter, or the button's value.
+         */
+        "value": string;
+        /**
+          * Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Input represents items input by the user, and the chip can be removed with a click. WARNING: Input variation is still work-in-progress and subject to change.
+         */
+        "variation": DuetChipVariation;
+    }
     interface DuetChoice {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -742,6 +780,10 @@ export namespace Components {
           * Makes the choice button open a new section underneath it when clicked or tapped. This new section can be used to show more options related to this choice. Please note that this feature can’t be used together with the "info" functionality and that it only accepts plain dom nodes (no shadow dom elements such as duet-paragraph can be used as this will break accessibility)
          */
         "collapsible": boolean;
+        /**
+          * This attribute works only when the 'collapsible' attribute is set to true. It maintains the visibility of the additional content section, regardless of whether the input is checked or not.
+         */
+        "collapsibleForceExpanded": boolean;
         /**
           * Makes the choice component disabled. This prevents users from being able to interact with the choice, and conveys its inactive state to assistive technologies.
          */
@@ -2481,6 +2523,10 @@ export namespace Components {
           * Expands the input to fill 100% of the container width.
          */
         "expand": boolean;
+        /**
+          * Returns a promise which resolves to the current input numeric value.
+         */
+        "getValueAsNumber": () => Promise<number>;
         /**
           * Adds a unique identifier for the input.
          */
@@ -2660,6 +2706,93 @@ export namespace Components {
          */
         "weight": DuetParagraphWeight;
     }
+    interface DuetPopupMenu {
+        /**
+          * Adds accessible label for the menu that is only presented for users of assistive technologies. A popup menu should always have an accessible label that describes the popup's function.
+         */
+        "accessibleLabel": string;
+        /**
+          * Element controlling the opening and closing of the popup menu.
+         */
+        "controller": HTMLElement;
+        /**
+          * Cross axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
+         */
+        "crossAxisOffset": number;
+        /**
+          * Hide.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * isOpen.
+         */
+        "isOpen": () => Promise<boolean>;
+        /**
+          * Main axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal.
+         */
+        "mainAxisOffset": number;
+        /**
+          * Placement of the popup menu relative to its controller. Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
+         */
+        "placement": | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end";
+        /**
+          * Show.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Theme.
+         */
+        "theme": DuetTheme;
+        /**
+          * Toggle.
+         */
+        "toggle": () => Promise<void>;
+    }
+    interface DuetPopupMenuItem {
+        /**
+          * Adds accessible label for the button or link that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "accessibleLabel": string;
+        /**
+          * Is the item currently active (e.g. selected)
+         */
+        "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
+        /**
+          * Left icon.
+         */
+        "leadingIcon": DuetIconName;
+        /**
+          * Theme.
+         */
+        "theme": DuetTheme;
+        /**
+          * Right icon.
+         */
+        "trailingIcon": DuetIconName;
+        /**
+          * Short text to display after the label, e.g. keyboard shortcut.
+         */
+        "trailingText": string;
+        /**
+          * A destination to link to, rendered in the href attribute of a link.
+         */
+        "url": string;
+    }
     interface DuetProgress {
         /**
           * Indicates the id of a component that describes the upload component.
@@ -3152,6 +3285,26 @@ export namespace Components {
          */
         "theme": DuetTheme;
     }
+    interface DuetShowMore {
+        /**
+          * The currently active language. This setting also changes the logo to match the chosen language.
+          * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+          * @default "fi"
+         */
+        "language": DuetLanguage;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin": DuetMargin;
+        /**
+          * Is the component expanded or collapsed.
+         */
+        "open": boolean;
+        /**
+          * Theme.
+         */
+        "theme": DuetTheme;
+    }
     interface DuetSlideout {
         /**
           * Background color. Use one of the color tokens.
@@ -4234,6 +4387,10 @@ export interface DuetCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetCheckboxElement;
 }
+export interface DuetChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDuetChipElement;
+}
 export interface DuetChoiceCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetChoiceElement;
@@ -4310,6 +4467,10 @@ export interface DuetSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetSelectElement;
 }
+export interface DuetShowMoreCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDuetShowMoreElement;
+}
 export interface DuetSlideoutCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetSlideoutElement;
@@ -4411,6 +4572,12 @@ declare global {
         prototype: HTMLDuetCheckmarkElement;
         new (): HTMLDuetCheckmarkElement;
     };
+    interface HTMLDuetChipElement extends Components.DuetChip, HTMLStencilElement {
+    }
+    var HTMLDuetChipElement: {
+        prototype: HTMLDuetChipElement;
+        new (): HTMLDuetChipElement;
+    };
     interface HTMLDuetChoiceElement extends Components.DuetChoice, HTMLStencilElement {
     }
     var HTMLDuetChoiceElement: {
@@ -4645,6 +4812,18 @@ declare global {
         prototype: HTMLDuetParagraphElement;
         new (): HTMLDuetParagraphElement;
     };
+    interface HTMLDuetPopupMenuElement extends Components.DuetPopupMenu, HTMLStencilElement {
+    }
+    var HTMLDuetPopupMenuElement: {
+        prototype: HTMLDuetPopupMenuElement;
+        new (): HTMLDuetPopupMenuElement;
+    };
+    interface HTMLDuetPopupMenuItemElement extends Components.DuetPopupMenuItem, HTMLStencilElement {
+    }
+    var HTMLDuetPopupMenuItemElement: {
+        prototype: HTMLDuetPopupMenuItemElement;
+        new (): HTMLDuetPopupMenuItemElement;
+    };
     interface HTMLDuetProgressElement extends Components.DuetProgress, HTMLStencilElement {
     }
     var HTMLDuetProgressElement: {
@@ -4705,6 +4884,12 @@ declare global {
         prototype: HTMLDuetShapedImageElement;
         new (): HTMLDuetShapedImageElement;
     };
+    interface HTMLDuetShowMoreElement extends Components.DuetShowMore, HTMLStencilElement {
+    }
+    var HTMLDuetShowMoreElement: {
+        prototype: HTMLDuetShowMoreElement;
+        new (): HTMLDuetShowMoreElement;
+    };
     interface HTMLDuetSlideoutElement extends Components.DuetSlideout, HTMLStencilElement {
     }
     var HTMLDuetSlideoutElement: {
@@ -4880,6 +5065,7 @@ declare global {
         "duet-card": HTMLDuetCardElement;
         "duet-checkbox": HTMLDuetCheckboxElement;
         "duet-checkmark": HTMLDuetCheckmarkElement;
+        "duet-chip": HTMLDuetChipElement;
         "duet-choice": HTMLDuetChoiceElement;
         "duet-choice-group": HTMLDuetChoiceGroupElement;
         "duet-collapsible": HTMLDuetCollapsibleElement;
@@ -4919,6 +5105,8 @@ declare global {
         "duet-page-heading": HTMLDuetPageHeadingElement;
         "duet-pagination": HTMLDuetPaginationElement;
         "duet-paragraph": HTMLDuetParagraphElement;
+        "duet-popup-menu": HTMLDuetPopupMenuElement;
+        "duet-popup-menu-item": HTMLDuetPopupMenuItemElement;
         "duet-progress": HTMLDuetProgressElement;
         "duet-promo-card": HTMLDuetPromoCardElement;
         "duet-radio": HTMLDuetRadioElement;
@@ -4929,6 +5117,7 @@ declare global {
         "duet-section-layout": HTMLDuetSectionLayoutElement;
         "duet-select": HTMLDuetSelectElement;
         "duet-shaped-image": HTMLDuetShapedImageElement;
+        "duet-show-more": HTMLDuetShowMoreElement;
         "duet-slideout": HTMLDuetSlideoutElement;
         "duet-slideout-lang": HTMLDuetSlideoutLangElement;
         "duet-slideout-link": HTMLDuetSlideoutLinkElement;
@@ -5551,6 +5740,52 @@ declare namespace LocalJSX {
          */
         "type"?: DuetChoiceType;
     }
+    interface DuetChip {
+        /**
+          * Adds accessible label for the chip that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Checked state of the filter chip.
+         */
+        "checked"?: boolean;
+        /**
+          * Icon to display to the left of the chip content.
+         */
+        "icon"?: DuetIconName;
+        /**
+          * Adds a unique identifier for the chip.
+         */
+        "identifier"?: string;
+        /**
+          * Name attribute of the html input (filter) or button.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the chip loses focus.
+         */
+        "onDuetBlur"?: (event: DuetChipCustomEvent<DuetChipEvent>) => void;
+        /**
+          * Emitted when the checked property has changed (applicable only for the filter variation).
+         */
+        "onDuetChange"?: (event: DuetChipCustomEvent<DuetChipEvent>) => void;
+        /**
+          * Emitted when the chip receives focus.
+         */
+        "onDuetFocus"?: (event: DuetChipCustomEvent<DuetChipEvent>) => void;
+        /**
+          * Theme of the button.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * The value of the html input when used as filter, or the button's value.
+         */
+        "value"?: string;
+        /**
+          * Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Input represents items input by the user, and the chip can be removed with a click. WARNING: Input variation is still work-in-progress and subject to change.
+         */
+        "variation"?: DuetChipVariation;
+    }
     interface DuetChoice {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -5601,6 +5836,10 @@ declare namespace LocalJSX {
           * Makes the choice button open a new section underneath it when clicked or tapped. This new section can be used to show more options related to this choice. Please note that this feature can’t be used together with the "info" functionality and that it only accepts plain dom nodes (no shadow dom elements such as duet-paragraph can be used as this will break accessibility)
          */
         "collapsible"?: boolean;
+        /**
+          * This attribute works only when the 'collapsible' attribute is set to true. It maintains the visibility of the additional content section, regardless of whether the input is checked or not.
+         */
+        "collapsibleForceExpanded"?: boolean;
         /**
           * Makes the choice component disabled. This prevents users from being able to interact with the choice, and conveys its inactive state to assistive technologies.
          */
@@ -7605,6 +7844,77 @@ declare namespace LocalJSX {
          */
         "weight"?: DuetParagraphWeight;
     }
+    interface DuetPopupMenu {
+        /**
+          * Adds accessible label for the menu that is only presented for users of assistive technologies. A popup menu should always have an accessible label that describes the popup's function.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Element controlling the opening and closing of the popup menu.
+         */
+        "controller"?: HTMLElement;
+        /**
+          * Cross axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
+         */
+        "crossAxisOffset"?: number;
+        /**
+          * Main axis positioning offset of the popup menu relative to its controller. For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal.
+         */
+        "mainAxisOffset"?: number;
+        /**
+          * Placement of the popup menu relative to its controller. Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
+         */
+        "placement"?: | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end";
+        /**
+          * Theme.
+         */
+        "theme"?: DuetTheme;
+    }
+    interface DuetPopupMenuItem {
+        /**
+          * Adds accessible label for the button or link that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Is the item currently active (e.g. selected)
+         */
+        "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
+        /**
+          * Left icon.
+         */
+        "leadingIcon"?: DuetIconName;
+        /**
+          * Theme.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Right icon.
+         */
+        "trailingIcon"?: DuetIconName;
+        /**
+          * Short text to display after the label, e.g. keyboard shortcut.
+         */
+        "trailingText"?: string;
+        /**
+          * A destination to link to, rendered in the href attribute of a link.
+         */
+        "url"?: string;
+    }
     interface DuetProgress {
         /**
           * Indicates the id of a component that describes the upload component.
@@ -8118,6 +8428,30 @@ declare namespace LocalJSX {
          */
         "theme"?: DuetTheme;
     }
+    interface DuetShowMore {
+        /**
+          * The currently active language. This setting also changes the logo to match the chosen language.
+          * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+          * @default "fi"
+         */
+        "language"?: DuetLanguage;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin"?: DuetMargin;
+        /**
+          * Event emitted when opened/closed
+         */
+        "onDuetToggle"?: (event: DuetShowMoreCustomEvent<DuetShowMoreToggleEvent>) => void;
+        /**
+          * Is the component expanded or collapsed.
+         */
+        "open"?: boolean;
+        /**
+          * Theme.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetSlideout {
         /**
           * Background color. Use one of the color tokens.
@@ -9201,6 +9535,7 @@ declare namespace LocalJSX {
         "duet-card": DuetCard;
         "duet-checkbox": DuetCheckbox;
         "duet-checkmark": DuetCheckmark;
+        "duet-chip": DuetChip;
         "duet-choice": DuetChoice;
         "duet-choice-group": DuetChoiceGroup;
         "duet-collapsible": DuetCollapsible;
@@ -9240,6 +9575,8 @@ declare namespace LocalJSX {
         "duet-page-heading": DuetPageHeading;
         "duet-pagination": DuetPagination;
         "duet-paragraph": DuetParagraph;
+        "duet-popup-menu": DuetPopupMenu;
+        "duet-popup-menu-item": DuetPopupMenuItem;
         "duet-progress": DuetProgress;
         "duet-promo-card": DuetPromoCard;
         "duet-radio": DuetRadio;
@@ -9250,6 +9587,7 @@ declare namespace LocalJSX {
         "duet-section-layout": DuetSectionLayout;
         "duet-select": DuetSelect;
         "duet-shaped-image": DuetShapedImage;
+        "duet-show-more": DuetShowMore;
         "duet-slideout": DuetSlideout;
         "duet-slideout-lang": DuetSlideoutLang;
         "duet-slideout-link": DuetSlideoutLink;
@@ -9295,6 +9633,7 @@ declare module "@stencil/core" {
             "duet-card": LocalJSX.DuetCard & JSXBase.HTMLAttributes<HTMLDuetCardElement>;
             "duet-checkbox": LocalJSX.DuetCheckbox & JSXBase.HTMLAttributes<HTMLDuetCheckboxElement>;
             "duet-checkmark": LocalJSX.DuetCheckmark & JSXBase.HTMLAttributes<HTMLDuetCheckmarkElement>;
+            "duet-chip": LocalJSX.DuetChip & JSXBase.HTMLAttributes<HTMLDuetChipElement>;
             "duet-choice": LocalJSX.DuetChoice & JSXBase.HTMLAttributes<HTMLDuetChoiceElement>;
             "duet-choice-group": LocalJSX.DuetChoiceGroup & JSXBase.HTMLAttributes<HTMLDuetChoiceGroupElement>;
             "duet-collapsible": LocalJSX.DuetCollapsible & JSXBase.HTMLAttributes<HTMLDuetCollapsibleElement>;
@@ -9334,6 +9673,8 @@ declare module "@stencil/core" {
             "duet-page-heading": LocalJSX.DuetPageHeading & JSXBase.HTMLAttributes<HTMLDuetPageHeadingElement>;
             "duet-pagination": LocalJSX.DuetPagination & JSXBase.HTMLAttributes<HTMLDuetPaginationElement>;
             "duet-paragraph": LocalJSX.DuetParagraph & JSXBase.HTMLAttributes<HTMLDuetParagraphElement>;
+            "duet-popup-menu": LocalJSX.DuetPopupMenu & JSXBase.HTMLAttributes<HTMLDuetPopupMenuElement>;
+            "duet-popup-menu-item": LocalJSX.DuetPopupMenuItem & JSXBase.HTMLAttributes<HTMLDuetPopupMenuItemElement>;
             "duet-progress": LocalJSX.DuetProgress & JSXBase.HTMLAttributes<HTMLDuetProgressElement>;
             "duet-promo-card": LocalJSX.DuetPromoCard & JSXBase.HTMLAttributes<HTMLDuetPromoCardElement>;
             "duet-radio": LocalJSX.DuetRadio & JSXBase.HTMLAttributes<HTMLDuetRadioElement>;
@@ -9344,6 +9685,7 @@ declare module "@stencil/core" {
             "duet-section-layout": LocalJSX.DuetSectionLayout & JSXBase.HTMLAttributes<HTMLDuetSectionLayoutElement>;
             "duet-select": LocalJSX.DuetSelect & JSXBase.HTMLAttributes<HTMLDuetSelectElement>;
             "duet-shaped-image": LocalJSX.DuetShapedImage & JSXBase.HTMLAttributes<HTMLDuetShapedImageElement>;
+            "duet-show-more": LocalJSX.DuetShowMore & JSXBase.HTMLAttributes<HTMLDuetShowMoreElement>;
             "duet-slideout": LocalJSX.DuetSlideout & JSXBase.HTMLAttributes<HTMLDuetSlideoutElement>;
             "duet-slideout-lang": LocalJSX.DuetSlideoutLang & JSXBase.HTMLAttributes<HTMLDuetSlideoutLangElement>;
             "duet-slideout-link": LocalJSX.DuetSlideoutLink & JSXBase.HTMLAttributes<HTMLDuetSlideoutLinkElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.10.2",
+  "version": "6.10.3",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -43,17 +43,22 @@
     "start": "run-p koa stencil:koa",
     "start:dev": "npm run stencil:dev",
     "koa": "lerna exec 'npm run start:dev:watch' --scope '@duetds/server'",
+    "koa:percy": "lerna exec 'npm run start:dev&' --scope '@duetds/server'",
     "koa:ci": "lerna exec 'npm run koa:serve:ci' --scope '@duetds/server'",
-    "duet:build:testsite": "stencil build --serve"
+    "koa:kill": "kill -9 $(lsof -ti:3334)",
+    "duet:build:testsite": "stencil build --serve",
+    "test:percy": "run-s build koa:percy percy-snapshot koa:kill",
+    "percy-snapshot": "npx percy snapshot ./percy.js"
   },
   "dependencies": {
     "@floating-ui/dom": "1.2.9",
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.60",
-    "@duetds/icons": "3.0.60",
-    "@duetds/tokens": "3.0.60",
+    "@duetds/fonts": "2.0.61",
+    "@duetds/icons": "3.0.61",
+    "@duetds/tokens": "3.0.61",
+    "@percy/cli": "1.21.0",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "3.1.0",
     "@stencil/sass": "3.0.0",
@@ -79,5 +84,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "628f4175b4b065e159bed155e11da147735d9a3a"
+  "gitHead": "361c2cf0c4e0df4cec4a582904a095f0b1cb33d2"
 }