@duetds/components 6.10.1 → 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.
          */
@@ -883,6 +925,10 @@ export namespace Components {
           * The content for the collapsible heading.
          */
         "heading": string;
+        /**
+          * Makes collapsible heading full width
+         */
+        "headingFullWidth": boolean;
         /**
           * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. only variations of h1-h6 area accepted
          */
@@ -2477,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.
          */
@@ -2656,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.
@@ -3130,6 +3267,10 @@ export namespace Components {
           * Adds accessible label for the image that is only shown for screen readers.
          */
         "accessibleLabel": string;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin": DuetMargin;
         /**
           * Rotation. Note: in 'turva' theme there's no rotation.
           * @default "7"
@@ -3144,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.
@@ -4012,6 +4173,10 @@ export namespace Components {
           * Makes the input component disabled. This prevents users from being able to interact with the upload component, and conveys its inactive state to assistive technologies.
          */
         "disabled": boolean;
+        /**
+          * If link-click-event is set to true then upload component will emit an event on uploaded file link click (check linkClick event).
+         */
+        "emitEvent": boolean;
         /**
           * Display the input in error state along with an error message.
          */
@@ -4222,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;
@@ -4298,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;
@@ -4399,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: {
@@ -4633,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: {
@@ -4693,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: {
@@ -4868,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;
@@ -4907,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;
@@ -4917,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;
@@ -5539,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.
@@ -5589,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.
          */
@@ -5731,6 +5982,10 @@ declare namespace LocalJSX {
           * The content for the collapsible heading.
          */
         "heading"?: string;
+        /**
+          * Makes collapsible heading full width
+         */
+        "headingFullWidth"?: boolean;
         /**
           * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. only variations of h1-h6 area accepted
          */
@@ -7589,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.
@@ -8084,6 +8410,10 @@ declare namespace LocalJSX {
           * Adds accessible label for the image that is only shown for screen readers.
          */
         "accessibleLabel"?: string;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin"?: DuetMargin;
         /**
           * Rotation. Note: in 'turva' theme there's no rotation.
           * @default "7"
@@ -8098,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.
@@ -8955,6 +9309,10 @@ declare namespace LocalJSX {
           * Makes the input component disabled. This prevents users from being able to interact with the upload component, and conveys its inactive state to assistive technologies.
          */
         "disabled"?: boolean;
+        /**
+          * If link-click-event is set to true then upload component will emit an event on uploaded file link click (check linkClick event).
+         */
+        "emitEvent"?: boolean;
         /**
           * Display the input in error state along with an error message.
          */
@@ -9089,6 +9447,10 @@ declare namespace LocalJSX {
           * Emitted when the user clicks the upload button
          */
         "onDuetUpload"?: (event: DuetUploadCustomEvent<DuetUploadEvent>) => void;
+        /**
+          * Emitted when the user clicks the uploaded file link and link-click-event prop is set to true
+         */
+        "onLinkClick"?: (event: DuetUploadCustomEvent<DuetUploadEvent>) => void;
         /**
           * 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.
          */
@@ -9173,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;
@@ -9212,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;
@@ -9222,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;
@@ -9267,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>;
@@ -9306,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>;
@@ -9316,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.1",
+  "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.59",
-    "@duetds/icons": "3.0.59",
-    "@duetds/tokens": "3.0.59",
+    "@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": "0242e1e4f96e14b8f561ba8c373d5f5a856972d2"
+  "gitHead": "361c2cf0c4e0df4cec4a582904a095f0b1cb33d2"
 }

package/lib/duet/p-2ee395b0.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{r as e,c as t,h as o,H as a,g as i}from"./p-e2a64fc4.js";import{a as s}from"./p-115c79b6.js";import{f as l,t as n}from"./p-b519ac77.js";import{i as r}from"./p-4ebf1618.js";import{c}from"./p-c1325e35.js";import{i as p}from"./p-f077c646.js";import{s as d}from"./p-5a9d75e1.js";const h=class{constructor(o){e(this,o),this.duetToggle=t(this,"duetToggle",7),this.id=c("DuetCollapsible"),this.handleKeyDown=e=>{p(e)&&this.handleClick(e)},this.getFontSizeFromTokens=(e=this.headingSize)=>{if(e){const t=e.replace(/-/g,"_");return n[`font_size_${t}`]}return l},this.getEquivalentIconSize=(e=this.headingSize)=>{switch(e){case"x-small":case"small":case"medium":default:return"xx-small";case"large":return"x-small";case"x-large":return"small";case"xx-large":return"medium";case"xxx-large":return"x-large";case"xxxx-large":return"xxx-large"}},this.handleClick=e=>{e.preventDefault(),this.open=!this.open,this.duetToggle.emit({component:"duet-collapsible",originalEvent:e})},this.theme="",this.accessibleLabel=void 0,this.heading="",this.centerHeading=!1,this.headingWeight="semibold",this.headingSize=void 0,this.headingLevel=void 0,this.margin="auto",this.open=!1}componentWillLoad(){r(this),this.hasAfterHeading=!!this.element.querySelector(":scope > [slot='after-heading']")}async setFocus(e){this.nativeButton&&(this.element.classList.add("user-is-tabbing"),this.nativeButton.focus(e))}render(){const e=this.headingLevel?d(this.headingLevel):"div";return o(a,{class:{"duet-m-0":"none"===this.margin}},o(e,null,o("button",{class:{"duet-collapsible-heading":!0,"duet-collapsible-heading-centered":this.centerHeading,"duet-theme-turva":"turva"===this.theme,"duet-collapsible-normal-weight":"normal"===this.headingWeight,"has-after-heading":this.hasAfterHeading},style:{"font-size":this.getFontSizeFromTokens()},role:"button",ref:e=>this.nativeButton=e,"aria-label":this.accessibleLabel,"aria-expanded":this.open?"true":"false","aria-controls":this.id,onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"duet-collapsible-heading-icon"},o("duet-icon",{margin:"none",color:"turva"===this.theme?"secondary-turva":"secondary",size:this.getEquivalentIconSize(),icon:s.svg})),o("div",{class:"duet-collapsible-heading-content",part:"duet-collapsible-heading-content"},this.heading),this.hasAfterHeading&&o("div",null,o("slot",{name:"after-heading"})))),o("div",{id:this.id,class:{"duet-collapsible-content":!0,"duet-theme-turva":"turva"===this.theme},part:"duet-collapsible-content"},o("slot",null)))}get element(){return i(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;margin-bottom:16px !important;display:block;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}:host(.duet-theme-turva){font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:"localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:"turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{flex:0 auto;min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{flex:1 0 auto;margin-left:16px}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(0, 41, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}';export{h as duet_collapsible}

package/lib/duet/p-5b450895.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import{r as a,h as e,H as r}from"./p-e2a64fc4.js";import{i}from"./p-4ebf1618.js";const t=class{constructor(e){a(this,e),this.theme="",this.accessibleLabel=void 0,this.src=void 0,this.rotation=7}componentWillLoad(){i(this)}render(){return e(r,{class:{x:!0}},e("span",{class:{"duet-theme-turva":"turva"===this.theme,"shaped-image":!0},role:"img","aria-label":this.accessibleLabel,style:{"--rotation":`${this.rotation}deg`}},e("span",{class:"shaped-image-mask",role:"presentation"},e("span",{class:"shaped-image-img",role:"presentation",style:{backgroundImage:`url("${this.src}")`}}))))}};t.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;display:inline-block;width:100%;height:100%}.shaped-image{position:relative;display:inline-block;width:100%;height:100%}.shaped-image .shaped-image-mask{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:25%;transform:rotate(var(--rotation))}.shaped-image .shaped-image-mask .shaped-image-img{position:relative;display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.07) rotate(calc(-1 * var(--rotation)));transform-origin:center}.shaped-image.duet-theme-turva .shaped-image-mask{transform:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");mask-repeat:no-repeat}.shaped-image.duet-theme-turva .shaped-image-mask .shaped-image-img{transform:none}';export{t as duet_shaped_image}