@duetds/components 8.1.4 → 8.2.0

package/lib/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 import { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 import { DuetLangObject } from "./utils/language-utils";
 import { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -36,12 +36,13 @@ import { DuetLayoutStickyDistance } from "./components/duet-layout/duet-layout";
 import { DuetListLabelWidth, DuetListMobileAlignment, DuetListVariation } from "./components/duet-list/duet-list";
 import { DuetLogoSize } from "./components/duet-logo/duet-logo";
 import { DuetMenuBarChangeEvent } from "./components/duet-menu-bar/duet-menu-bar";
-import { DuetModalCloseEvent, DuetModalSize } from "./components/duet-modal/duet-modal";
+import { DuetModalCloseEvent, DuetModalSize, DuetModalVariation } from "./components/duet-modal/duet-modal";
 import { DuetMultiselectEvent, DuetMultiselectItem } from "./components/duet-multiselect/duet-multiselect";
 import { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer";
 import { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input";
 import { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination";
 import { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
+import { FocusableComponent, OpenerComponent } from "./common";
 import { DuetPopupMenuEvent } from "./components/duet-popup-menu/duet-popup-menu";
 import { DuetPopupMenuItemEvent } from "./components/duet-popup-menu-item/duet-popup-menu-item";
 import { DuetRadioEvent } from "./components/duet-radio/duet-radio";
@@ -64,7 +65,7 @@ import { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils";
 import { DuetFileListItem, DuetUploadEvent as DuetUploadEvent1 } from "./components/duet-upload/duet-upload";
 import { ItemType } from "./components/duet-upload-item/duet-upload-item";
 import { EventEmitter } from "./stencil-public-runtime";
-export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetIconSize, DuetLanguage, DuetLinkVariation, DuetListBreakpoint, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTextFontWeight, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 export { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 export { DuetLangObject } from "./utils/language-utils";
 export { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -95,12 +96,13 @@ export { DuetLayoutStickyDistance } from "./components/duet-layout/duet-layout";
 export { DuetListLabelWidth, DuetListMobileAlignment, DuetListVariation } from "./components/duet-list/duet-list";
 export { DuetLogoSize } from "./components/duet-logo/duet-logo";
 export { DuetMenuBarChangeEvent } from "./components/duet-menu-bar/duet-menu-bar";
-export { DuetModalCloseEvent, DuetModalSize } from "./components/duet-modal/duet-modal";
+export { DuetModalCloseEvent, DuetModalSize, DuetModalVariation } from "./components/duet-modal/duet-modal";
 export { DuetMultiselectEvent, DuetMultiselectItem } from "./components/duet-multiselect/duet-multiselect";
 export { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer";
 export { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input";
 export { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination";
 export { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
+export { FocusableComponent, OpenerComponent } from "./common";
 export { DuetPopupMenuEvent } from "./components/duet-popup-menu/duet-popup-menu";
 export { DuetPopupMenuItemEvent } from "./components/duet-popup-menu-item/duet-popup-menu-item";
 export { DuetRadioEvent } from "./components/duet-radio/duet-radio";
@@ -739,10 +741,18 @@ export namespace Components {
         "type": DuetChoiceType;
     }
     interface DuetChip {
+        /**
+          * If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+         */
+        "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.
          */
         "accessibleLabel": string;
+        /**
+          * Use this property to add an aria-haspopup attribute.
+         */
+        "accessiblePopup": string;
         /**
           * Checked state of the filter chip.
          */
@@ -1908,10 +1918,18 @@ export namespace Components {
           * Label for the input.
          */
         "label": string;
+        /**
+          * Color of the label.
+         */
+        "labelColor": string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden": boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight": DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -2002,6 +2020,10 @@ export namespace Components {
           * Theme of the label.
          */
         "theme": DuetTheme;
+        /**
+          * Controls the weight of the label.
+         */
+        "weight": DuetTextFontWeight;
     }
     interface DuetLayout {
         /**
@@ -2404,6 +2426,10 @@ export namespace Components {
           * Theme of the modal.
          */
         "theme": DuetTheme;
+        /**
+          * Variation of the modal window.
+         */
+        "variation": DuetModalVariation;
     }
     interface DuetMultiselect {
         /**
@@ -2446,10 +2472,18 @@ export namespace Components {
           * Label for the select.
          */
         "label": string;
+        /**
+          * Color of the label.
+         */
+        "labelColor": string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden": boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight": DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -2845,10 +2879,14 @@ export namespace Components {
           * 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;
+        /**
+          * Accessible role.
+         */
+        "accessibleRole": "menu" | "list";
         /**
           * Element controlling the opening and closing of the popup menu.
          */
-        "controller": HTMLElement | (HTMLElement & { setFocus(): void });
+        "controller": HTMLElement & FocusableComponent & OpenerComponent;
         /**
           * 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.
          */
@@ -2902,6 +2940,10 @@ export namespace Components {
           * 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;
+        /**
+          * Accessible role.
+         */
+        "accessibleRole": "menuitem" | "listitem";
         /**
           * Is the item currently active (e.g. selected)
          */
@@ -3208,10 +3250,18 @@ export namespace Components {
           * Label for the range slider.
          */
         "label": string;
+        /**
+          * Color of the label.
+         */
+        "labelColor": string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden": boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight": DuetTextFontWeight;
         /**
           * Locale used to format the entered value.
          */
@@ -3379,10 +3429,18 @@ export namespace Components {
           * Label for the select.
          */
         "label": string;
+        /**
+          * Color of the label.
+         */
+        "labelColor": string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden": boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight": DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -4008,10 +4066,18 @@ export namespace Components {
           * Label for the textarea.
          */
         "label": string;
+        /**
+          * Color of the label.
+         */
+        "labelColor": string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden": boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight": DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -4106,10 +4172,18 @@ export namespace Components {
           * Label for the toggle.
          */
         "label": string;
+        /**
+          * Color of the label.
+         */
+        "labelColor": string;
         /**
           * Position of the label
          */
         "labelPosition": "top" | "right" | "left";
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight": DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -4236,6 +4310,10 @@ export namespace Components {
         "variation": "default" | "negative";
     }
     interface DuetTooltip {
+        /**
+          * String to add after the accessibleLabel to give more context to the tooltip. Preposition "about" is added between the strings. In Finnish, the preposition is "aiheesta" and in Swedish "om".
+         */
+        "accessibleAboutLabel": string;
         /**
           * Adds accessible label for the close icon that is only shown for screen readers. This property is always required to create an accessibly interface!
           * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
@@ -6601,10 +6679,18 @@ declare namespace LocalJSX {
         "type"?: DuetChoiceType;
     }
     interface DuetChip {
+        /**
+          * If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+         */
+        "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.
          */
         "accessibleLabel"?: string;
+        /**
+          * Use this property to add an aria-haspopup attribute.
+         */
+        "accessiblePopup"?: string;
         /**
           * Checked state of the filter chip.
          */
@@ -7860,10 +7946,18 @@ declare namespace LocalJSX {
           * Label for the input.
          */
         "label"?: string;
+        /**
+          * Color of the label.
+         */
+        "labelColor"?: string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden"?: boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight"?: DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -7966,6 +8060,10 @@ declare namespace LocalJSX {
           * Theme of the label.
          */
         "theme"?: DuetTheme;
+        /**
+          * Controls the weight of the label.
+         */
+        "weight"?: DuetTextFontWeight;
     }
     interface DuetLayout {
         /**
@@ -8358,6 +8456,10 @@ declare namespace LocalJSX {
           * Theme of the modal.
          */
         "theme"?: DuetTheme;
+        /**
+          * Variation of the modal window.
+         */
+        "variation"?: DuetModalVariation;
     }
     interface DuetMultiselect {
         /**
@@ -8400,10 +8502,18 @@ declare namespace LocalJSX {
           * Label for the select.
          */
         "label"?: string;
+        /**
+          * Color of the label.
+         */
+        "labelColor"?: string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden"?: boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight"?: DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -8800,10 +8910,14 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Accessible role.
+         */
+        "accessibleRole"?: "menu" | "list";
         /**
           * Element controlling the opening and closing of the popup menu.
          */
-        "controller"?: HTMLElement | (HTMLElement & { setFocus(): void });
+        "controller"?: HTMLElement & FocusableComponent & OpenerComponent;
         /**
           * 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.
          */
@@ -8845,6 +8959,10 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Accessible role.
+         */
+        "accessibleRole"?: "menuitem" | "listitem";
         /**
           * Is the item currently active (e.g. selected)
          */
@@ -9156,10 +9274,18 @@ declare namespace LocalJSX {
           * Label for the range slider.
          */
         "label"?: string;
+        /**
+          * Color of the label.
+         */
+        "labelColor"?: string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden"?: boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight"?: DuetTextFontWeight;
         /**
           * Locale used to format the entered value.
          */
@@ -9335,10 +9461,18 @@ declare namespace LocalJSX {
           * Label for the select.
          */
         "label"?: string;
+        /**
+          * Color of the label.
+         */
+        "labelColor"?: string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden"?: boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight"?: DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -9950,10 +10084,18 @@ declare namespace LocalJSX {
           * Label for the textarea.
          */
         "label"?: string;
+        /**
+          * Color of the label.
+         */
+        "labelColor"?: string;
         /**
           * Visually hide the label, but still show it to screen readers.
          */
         "labelHidden"?: boolean;
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight"?: DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -10060,10 +10202,18 @@ declare namespace LocalJSX {
           * Label for the toggle.
          */
         "label"?: string;
+        /**
+          * Color of the label.
+         */
+        "labelColor"?: string;
         /**
           * Position of the label
          */
         "labelPosition"?: "top" | "right" | "left";
+        /**
+          * Font weight of the label.
+         */
+        "labelWeight"?: DuetTextFontWeight;
         /**
           * Controls the margin of the component.
          */
@@ -10186,6 +10336,10 @@ declare namespace LocalJSX {
         "variation"?: "default" | "negative";
     }
     interface DuetTooltip {
+        /**
+          * String to add after the accessibleLabel to give more context to the tooltip. Preposition "about" is added between the strings. In Finnish, the preposition is "aiheesta" and in Swedish "om".
+         */
+        "accessibleAboutLabel"?: string;
         /**
           * Adds accessible label for the close icon that is only shown for screen readers. This property is always required to create an accessibly interface!
           * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}

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

@@ -0,0 +1,2 @@
+import { ComponentInterface } from "../stencil-public-runtime";
+export declare const slotElementCheck: (evt: Event, component: ComponentInterface, requiredTagName: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "8.1.4",
+  "version": "8.2.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -35,7 +35,7 @@
     "prepare-vizdif": "node -e 'require(\"./prepare-vizdif\").prepare()'",
     "clear-vizdif": "node -e 'require(\"./prepare-vizdif\").clear()'",
     "test:percy": "run-s -c build prepare-vizdif koa:test percy-snapshot koa:kill clear-vizdif",
-    "percy-snapshot": "npx percy snapshot ./percy.js",
+    "percy-snapshot": "percy snapshot ./percy.js",
     "version": "npm run build"
   },
   "dependencies": {
@@ -43,10 +43,10 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.29",
-    "@duetds/icons": "4.0.29",
-    "@duetds/tokens": "4.0.29",
-    "@percy/cli": "1.21.0",
+    "@duetds/fonts": "3.0.31",
+    "@duetds/icons": "4.0.31",
+    "@duetds/tokens": "4.0.31",
+    "@percy/cli": "1.28.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.10.0",
     "@stencil/sass": "3.0.0",
@@ -74,5 +74,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "95f5263174a4a28f18c7a643d8b7118d4d2a7195"
+  "gitHead": "49460065a488a7834a6567d1bb4878c714a4b2e1"
 }