@duetds/components 9.1.2 → 9.2.1

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

@@ -21,6 +21,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private labelId;
     private topCaptionId;
     private topCaptionPlaceholderId;
+    private chipCountId;
     private errorId;
     private nativeInput?;
     private togglePasswordRevealedButton?;
@@ -33,6 +34,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     private hidePasswordLabel;
     private passwordShownAriaAnnouncement;
     private passwordHiddenAriaAnnouncement;
+    private chipsSelectedDesriptionLabel;
     /**
      * Reference to host HTML element.
      */
@@ -288,7 +290,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     /**
      * Private functions
      */
-    private getDescribedBy;
+    private getAriaDescribedBy;
     private handleClearClick;
     private keyHandler;
     private togglePasswordRevealed;
@@ -309,6 +311,25 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     clearInput(): Promise<void>;
     private getAllChips;
+    private isChipSelected;
+    private getSelectedChip;
+    private clearChipSelection;
+    /**
+     * If input has chips set the last, rightmost chip as selected
+     */
+    private selectLastChip;
+    /**
+     * If input has chips. and one is selected, set the chip next to the left as selected.
+     * If none was selected before, select the last, rightmost chip.
+     * If the first, leftmost chip was selected before, do nothing.
+     */
+    private selectChipToLeft;
+    /**
+     * If input has chips. and one is selected, set the chip next to the right as selected.
+     * If none was selected before, do nothing.
+     * If the last, rightmost chip was selected before, unselect it.
+     */
+    private selectChipToRight;
     /**
      * @internal
      * Add a chip to the input

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

@@ -132,7 +132,6 @@ export declare class DuetLink implements ThemeableComponent {
     private initMediaQuery;
     private destroyMediaQuery;
     private screenTest;
-    private getAccessibleLabel;
     private resolveDownload;
     private renderDefaultContent;
     private renderBlockContent;

package/lib/types/components/duet-menu-bar-item/duet-menu-bar-item.d.ts

@@ -1,5 +1,6 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetMenuBarItem implements ThemeableComponent {
     /**
      * Own Properties.
@@ -45,10 +46,26 @@ export declare class DuetMenuBarItem implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute to a button.
      */
     accessiblePopup: string;
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    external: boolean;
     /**
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Sets focus. Use this method instead of the global focus().
      */

package/lib/types/components/duet-popup-menu/duet-popup-menu.d.ts

@@ -25,7 +25,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     /**
      * Accessible role.
      */
-    accessibleRole: "menu" | "list";
+    accessibleRole: "menu" | "listbox" | "list";
     /**
      * Theme.
      */
@@ -37,7 +37,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     /**
      * Element controlling the opening and closing of the popup menu.
      */
-    controller: string | (HTMLElement & FocusableComponent & OpenerComponent);
+    controller: string | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLDuetInputElement;
     /**
      * Placement of the popup menu relative to its controller.
      * Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
@@ -61,6 +61,11 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      * For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
      */
     crossAxisOffset: number;
+    /**
+     * By default Popup Menu adds "action-arrow-down-small" icon to the controller.
+     * This can be removed with controller-icon="".
+     */
+    controllerIcon: string;
     /**
      * Emitted when the popup menu is opened or closed.
      */

package/lib/types/components/duet-popup-menu-item/duet-popup-menu-item.d.ts

@@ -22,7 +22,7 @@ export declare class DuetPopupMenuItem implements ThemeableComponent {
     /**
      * Accessible role.
      */
-    accessibleRole: "menuitem" | "listitem";
+    accessibleRole: "menuitem" | "listitem" | "option";
     /**
      * Theme.
      */
@@ -63,6 +63,11 @@ export declare class DuetPopupMenuItem implements ThemeableComponent {
      * Is the item currently active (e.g. selected)
      */
     active: boolean;
+    /**
+     * @internal
+     * Focus simulation when parent element uses aria-activedescendant
+     */
+    activeDescendant: boolean;
     /**
      * Emitted when the item receives focus.
      */

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

@@ -66,6 +66,10 @@ export declare class DuetScrollable implements ThemeableComponent {
      * Private methods.
      */
     private getScrollPaneElements;
+    /**
+     * Check if scrolling is needed.
+     */
+    private checkScrollingNeeded;
     private getLastVisibleElement;
     private getFirstVisibleElement;
     private updateScrollButtons;

package/lib/types/components/duet-submenu-bar-item/duet-submenu-bar-item.d.ts

@@ -1,5 +1,6 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetSubmenuBarItem implements ThemeableComponent {
     /**
      * Own Properties.
@@ -45,10 +46,26 @@ export declare class DuetSubmenuBarItem implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute to a button.
      */
     accessiblePopup: string;
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    external: boolean;
     /**
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private handleEscape;
     /**
      * Sets focus. Use this method instead of the global focus().

package/lib/types/components/duet-toolbar-item/duet-toolbar-item.d.ts

@@ -1,5 +1,6 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetLangObject } from "../../utils/language-utils";
 export declare class DuetToolbarItem implements ThemeableComponent {
     /**
      * Own Properties.
@@ -49,10 +50,26 @@ export declare class DuetToolbarItem implements ThemeableComponent {
      * Use this property to add an aria-haspopup attribute to a button.
      */
     accessiblePopup: string;
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    external: boolean;
     /**
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Sets focus. Use this method instead of the global focus().
      */

package/lib/types/components.d.ts

@@ -768,7 +768,7 @@ export namespace Components {
          */
         "accessibleExpanded": boolean;
         /**
-          * 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.
+          * 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. With input variation this is not used, as the accessible label is automatically generated.
          */
         "accessibleLabel": string;
         /**
@@ -799,6 +799,15 @@ export namespace Components {
           * Id of the DuetPopupMenu that is controlled by the chip.
          */
         "popup": string;
+        /**
+          * Removes input chip. Use this method instead of the native remove() so the component can emit appropriate event
+         */
+        "removeChip": () => Promise<void>;
+        /**
+          * Selected state of the input chip. Deleting the input chip with backspace key should be done only for a selected chip. If a chip is not selected, backspace key should select it.
+         */
+        "selected": boolean;
+        "setDeleteFocus": () => Promise<void>;
         /**
           * Sets focus. Use this method instead of the global focus().
          */
@@ -816,7 +825,7 @@ export namespace Components {
          */
         "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. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name. WARNING: Input variation is still work-in-progress and subject to change.
+          * 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. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
          */
         "variation": DuetChipVariation;
     }
@@ -2431,6 +2440,16 @@ export namespace Components {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
          */
         "accessibleLabel": string;
+        /**
+          * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternal": string;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults": DuetLangObject | string;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -2439,6 +2458,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Left icon.
          */
@@ -3080,11 +3103,15 @@ export namespace Components {
         /**
           * Accessible role.
          */
-        "accessibleRole": "menu" | "list";
+        "accessibleRole": "menu" | "listbox" | "list";
         /**
           * Element controlling the opening and closing of the popup menu.
          */
-        "controller": string | (HTMLElement & FocusableComponent & OpenerComponent);
+        "controller": string | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLDuetInputElement;
+        /**
+          * By default Popup Menu adds "action-arrow-down-small" icon to the controller. This can be removed with controller-icon="".
+         */
+        "controllerIcon": string;
         /**
           * 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.
          */
@@ -3146,11 +3173,12 @@ export namespace Components {
         /**
           * Accessible role.
          */
-        "accessibleRole": "menuitem" | "listitem";
+        "accessibleRole": "menuitem" | "listitem" | "option";
         /**
           * Is the item currently active (e.g. selected)
          */
         "active": boolean;
+        "activeDescendant": boolean;
         /**
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
@@ -4082,6 +4110,16 @@ export namespace Components {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
          */
         "accessibleLabel": string;
+        /**
+          * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternal": string;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults": DuetLangObject | string;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -4090,6 +4128,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Left icon.
          */
@@ -4578,6 +4620,16 @@ export namespace Components {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
          */
         "accessibleLabel": string;
+        /**
+          * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternal": string;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults": DuetLangObject | string;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -4586,6 +4638,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external": boolean;
         /**
           * Left icon.
          */
@@ -7075,7 +7131,7 @@ declare namespace LocalJSX {
          */
         "accessibleExpanded"?: boolean;
         /**
-          * 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.
+          * 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. With input variation this is not used, as the accessible label is automatically generated.
          */
         "accessibleLabel"?: string;
         /**
@@ -7135,7 +7191,7 @@ declare namespace LocalJSX {
          */
         "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. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name. WARNING: Input variation is still work-in-progress and subject to change.
+          * 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. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
          */
         "variation"?: DuetChipVariation;
     }
@@ -8822,6 +8878,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
          */
         "accessibleLabel"?: string;
+        /**
+          * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternal"?: string;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults"?: DuetLangObject | string;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -8830,6 +8896,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Left icon.
          */
@@ -9461,11 +9531,15 @@ declare namespace LocalJSX {
         /**
           * Accessible role.
          */
-        "accessibleRole"?: "menu" | "list";
+        "accessibleRole"?: "menu" | "listbox" | "list";
         /**
           * Element controlling the opening and closing of the popup menu.
          */
-        "controller"?: string | (HTMLElement & FocusableComponent & OpenerComponent);
+        "controller"?: string | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLDuetInputElement;
+        /**
+          * By default Popup Menu adds "action-arrow-down-small" icon to the controller. This can be removed with controller-icon="".
+         */
+        "controllerIcon"?: string;
         /**
           * 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.
          */
@@ -9514,7 +9588,7 @@ declare namespace LocalJSX {
         /**
           * Accessible role.
          */
-        "accessibleRole"?: "menuitem" | "listitem";
+        "accessibleRole"?: "menuitem" | "listitem" | "option";
         /**
           * Is the item currently active (e.g. selected)
          */
@@ -10442,6 +10516,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
          */
         "accessibleLabel"?: string;
+        /**
+          * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternal"?: string;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults"?: DuetLangObject | string;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -10450,6 +10534,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Left icon.
          */
@@ -10941,6 +11029,16 @@ declare namespace LocalJSX {
           * Adds accessible label for the link that is only shown for screen readers. Typically, this label text replaces the visible text on the link for users who use assistive technology.
          */
         "accessibleLabel"?: string;
+        /**
+          * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternal"?: string;
+        /**
+          * Defaults for accessibleLabelExternal
+          * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        "accessibleLabelExternalDefaults"?: DuetLangObject | string;
         /**
           * Use this property to add an aria-haspopup attribute to a button.
          */
@@ -10949,6 +11047,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        "external"?: boolean;
         /**
           * Left icon.
          */

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

@@ -0,0 +1,11 @@
+import { DuetLangObject } from "./language-utils";
+interface A11yLabel {
+    element: HTMLElement;
+    accessibleLabel?: string;
+    external?: boolean;
+    accessibleLabelExternal?: DuetLangObject | string;
+    accessibleLabelDownload?: DuetLangObject | string;
+    download?: string;
+}
+export declare function getAccessibleLinkLabel(component: A11yLabel): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.1.2",
+  "version": "9.2.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@duetds/fonts": "3.0.51",
-    "@duetds/icons": "4.0.68",
-    "@duetds/tokens": "4.0.70",
+    "@duetds/icons": "4.0.70",
+    "@duetds/tokens": "4.0.72",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.22.2",
@@ -76,5 +76,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "f1e7fd9256703ab96e5c0de15c3cd85a5ba4e64b"
+  "gitHead": "be3ffa9bfd70637a4d254c820d651a7c40023e00"
 }