@duetds/components 6.5.2 → 6.6.0

package/lib/types/components.d.ts

@@ -14,7 +14,8 @@ 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 { DuetChoiceEvent, DuetChoiceType } from "./components/duet-choice/duet-choice";
+import { DuetChoiceType } from "./components/duet-choice/duet-choice";
+import { DuetChoiceEvent, DuetChoiceType as DuetChoiceType1 } 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";
 import { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent";
@@ -545,6 +546,28 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DuetCheckmark {
+        /**
+          * Checked
+         */
+        "center": boolean;
+        /**
+          * Checked
+         */
+        "checked": boolean;
+        /**
+          * Checked
+         */
+        "presentationOnly": boolean;
+        /**
+          * Theme
+         */
+        "theme": DuetTheme;
+        /**
+          * Type
+         */
+        "type": DuetChoiceType;
+    }
     interface DuetChoice {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -652,6 +675,10 @@ export namespace Components {
           * Theme of the choice.
          */
         "theme": DuetTheme;
+        /**
+          * This method toggles the info section.
+         */
+        "toggleInfoMethod": () => Promise<void>;
         /**
           * Type of the choice button. You can set the type of the choice to be either “radio” or “checkbox”. Depending on this selection we convey the selection type to assistive technologies as well. When type “radio” is chosen it is required to place the choices inside Choice Group component.
          */
@@ -1398,6 +1425,10 @@ export namespace Components {
           * Whether the icon changes its size responsively or not.
          */
         "responsive": boolean;
+        /**
+          * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
+         */
+        "shape": "circle" | "brand";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -1662,6 +1693,10 @@ export namespace Components {
           * Sets focus on the specified `duet-link`. Use this method instead of the global `link.focus()`.
          */
         "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Initially visually hidden link, which is shown on focus.
+         */
+        "tabToLink": boolean;
         /**
           * Theme of the button.
          */
@@ -1750,6 +1785,50 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetMenuBarButton {
+        /**
+          * Indicates the id of a related component’s visually focused element.
+         */
+        "accessibleActiveDescendant": string;
+        /**
+          * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.
+         */
+        "accessibleControls": string;
+        /**
+          * Indicates the id of a component that describes the button.
+         */
+        "accessibleDescribedBy": string;
+        /**
+          * Aria description the button
+         */
+        "accessibleDescription": string;
+        /**
+          * Details of the component
+         */
+        "accessibleDetails": string;
+        /**
+          * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+         */
+        "accessibleExpanded": boolean;
+        /**
+          * Adds accessible label for the button 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;
+        /**
+          * String of id's that indicate alternative labels elements
+         */
+        "accessibleLabelledBy": string;
+        /**
+          * Indicates the id of a component owned by the button.
+         */
+        "accessibleOwns": string;
+        /**
+          * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        "accessiblePopup": string;
+        /**
+          * Tells screen reader the element is pressed.
+         */
+        "accessiblePressed": boolean;
         /**
           * Icon
          */
@@ -1764,6 +1843,10 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetMenuBarDropdown {
+        /**
+          * Adds accessible label for the button 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;
         /**
           * Icon
          */
@@ -2204,6 +2287,20 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DuetPageHeading {
+        /**
+          * Icon.
+         */
+        "icon": DuetIconName;
+        /**
+          * Layout.
+         */
+        "layout": "custom" | "fluid" | "narrow";
+        /**
+          * Theme of the hero area.
+         */
+        "theme": DuetTheme;
+    }
     interface DuetPagination {
         /**
           * Described By id
@@ -2740,6 +2837,10 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetSlideoutLink {
+        /**
+          * Adds accessible label for the button 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;
         /**
           * Active
          */
@@ -2761,6 +2862,10 @@ export namespace Components {
           * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot.
          */
         "size": "inherit" | "small" | "medium" | "large";
+        /**
+          * Language of the link. Use this only for language selection links.
+         */
+        "targetLanguage": "en" | "fi" | "sv";
         /**
           * Theme.
          */
@@ -2771,6 +2876,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Background color. Use one of the color tokens.
+         */
+        "backgroundColor": DuetColor;
         /**
           * Icon
          */
@@ -2949,6 +3058,10 @@ export namespace Components {
           * @default null
          */
         "accessibleDescriptionDefault": DuetLangObject | string;
+        /**
+          * Caption for the tab.
+         */
+        "caption": string;
         /**
           * Label for the tab.
          */
@@ -3280,6 +3393,10 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetToolbarDropdownLink {
+        /**
+          * Adds accessible label for the button 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;
         /**
           * Active
          */
@@ -3292,6 +3409,10 @@ export namespace Components {
           * Icon
          */
         "icon": string;
+        /**
+          * Language of the link. Use this only for language selection links.
+         */
+        "targetLanguage": "en" | "fi" | "sv";
         /**
           * Theme.
          */
@@ -3835,6 +3956,12 @@ declare global {
         prototype: HTMLDuetCheckboxElement;
         new (): HTMLDuetCheckboxElement;
     };
+    interface HTMLDuetCheckmarkElement extends Components.DuetCheckmark, HTMLStencilElement {
+    }
+    var HTMLDuetCheckmarkElement: {
+        prototype: HTMLDuetCheckmarkElement;
+        new (): HTMLDuetCheckmarkElement;
+    };
     interface HTMLDuetChoiceElement extends Components.DuetChoice, HTMLStencilElement {
     }
     var HTMLDuetChoiceElement: {
@@ -4045,6 +4172,12 @@ declare global {
         prototype: HTMLDuetNumberInputElement;
         new (): HTMLDuetNumberInputElement;
     };
+    interface HTMLDuetPageHeadingElement extends Components.DuetPageHeading, HTMLStencilElement {
+    }
+    var HTMLDuetPageHeadingElement: {
+        prototype: HTMLDuetPageHeadingElement;
+        new (): HTMLDuetPageHeadingElement;
+    };
     interface HTMLDuetPaginationElement extends Components.DuetPagination, HTMLStencilElement {
     }
     var HTMLDuetPaginationElement: {
@@ -4277,6 +4410,7 @@ declare global {
         "duet-caption": HTMLDuetCaptionElement;
         "duet-card": HTMLDuetCardElement;
         "duet-checkbox": HTMLDuetCheckboxElement;
+        "duet-checkmark": HTMLDuetCheckmarkElement;
         "duet-choice": HTMLDuetChoiceElement;
         "duet-choice-group": HTMLDuetChoiceGroupElement;
         "duet-collapsible": HTMLDuetCollapsibleElement;
@@ -4312,6 +4446,7 @@ declare global {
         "duet-notification": HTMLDuetNotificationElement;
         "duet-notification-drawer": HTMLDuetNotificationDrawerElement;
         "duet-number-input": HTMLDuetNumberInputElement;
+        "duet-page-heading": HTMLDuetPageHeadingElement;
         "duet-pagination": HTMLDuetPaginationElement;
         "duet-paragraph": HTMLDuetParagraphElement;
         "duet-progress": HTMLDuetProgressElement;
@@ -4857,6 +4992,28 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DuetCheckmark {
+        /**
+          * Checked
+         */
+        "center"?: boolean;
+        /**
+          * Checked
+         */
+        "checked"?: boolean;
+        /**
+          * Checked
+         */
+        "presentationOnly"?: boolean;
+        /**
+          * Theme
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Type
+         */
+        "type"?: DuetChoiceType;
+    }
     interface DuetChoice {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -5800,6 +5957,10 @@ declare namespace LocalJSX {
           * Whether the icon changes its size responsively or not.
          */
         "responsive"?: boolean;
+        /**
+          * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
+         */
+        "shape"?: "circle" | "brand";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -6068,6 +6229,10 @@ declare namespace LocalJSX {
           * @default "fi"
          */
         "language"?: DuetLanguage;
+        /**
+          * Initially visually hidden link, which is shown on focus.
+         */
+        "tabToLink"?: boolean;
         /**
           * Theme of the button.
          */
@@ -6152,6 +6317,50 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetMenuBarButton {
+        /**
+          * Indicates the id of a related component’s visually focused element.
+         */
+        "accessibleActiveDescendant"?: string;
+        /**
+          * Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.
+         */
+        "accessibleControls"?: string;
+        /**
+          * Indicates the id of a component that describes the button.
+         */
+        "accessibleDescribedBy"?: string;
+        /**
+          * Aria description the button
+         */
+        "accessibleDescription"?: string;
+        /**
+          * Details of the component
+         */
+        "accessibleDetails"?: string;
+        /**
+          * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+         */
+        "accessibleExpanded"?: boolean;
+        /**
+          * Adds accessible label for the button 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;
+        /**
+          * String of id's that indicate alternative labels elements
+         */
+        "accessibleLabelledBy"?: string;
+        /**
+          * Indicates the id of a component owned by the button.
+         */
+        "accessibleOwns"?: string;
+        /**
+          * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        "accessiblePopup"?: string;
+        /**
+          * Tells screen reader the element is pressed.
+         */
+        "accessiblePressed"?: boolean;
         /**
           * Icon
          */
@@ -6162,6 +6371,10 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetMenuBarDropdown {
+        /**
+          * Adds accessible label for the button 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;
         /**
           * Icon
          */
@@ -6607,6 +6820,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DuetPageHeading {
+        /**
+          * Icon.
+         */
+        "icon"?: DuetIconName;
+        /**
+          * Layout.
+         */
+        "layout"?: "custom" | "fluid" | "narrow";
+        /**
+          * Theme of the hero area.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetPagination {
         /**
           * Described By id
@@ -7168,6 +7395,10 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetSlideoutLink {
+        /**
+          * Adds accessible label for the button 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;
         /**
           * Active
          */
@@ -7188,6 +7419,10 @@ declare namespace LocalJSX {
           * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot.
          */
         "size"?: "inherit" | "small" | "medium" | "large";
+        /**
+          * Language of the link. Use this only for language selection links.
+         */
+        "targetLanguage"?: "en" | "fi" | "sv";
         /**
           * Theme.
          */
@@ -7198,6 +7433,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Background color. Use one of the color tokens.
+         */
+        "backgroundColor"?: DuetColor;
         /**
           * Icon
          */
@@ -7376,6 +7615,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "accessibleDescriptionDefault"?: DuetLangObject | string;
+        /**
+          * Caption for the tab.
+         */
+        "caption"?: string;
         /**
           * Label for the tab.
          */
@@ -7718,6 +7961,10 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetToolbarDropdownLink {
+        /**
+          * Adds accessible label for the button 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;
         /**
           * Active
          */
@@ -7730,6 +7977,10 @@ declare namespace LocalJSX {
           * Icon
          */
         "icon"?: string;
+        /**
+          * Language of the link. Use this only for language selection links.
+         */
+        "targetLanguage"?: "en" | "fi" | "sv";
         /**
           * Theme.
          */
@@ -8122,6 +8373,7 @@ declare namespace LocalJSX {
         "duet-caption": DuetCaption;
         "duet-card": DuetCard;
         "duet-checkbox": DuetCheckbox;
+        "duet-checkmark": DuetCheckmark;
         "duet-choice": DuetChoice;
         "duet-choice-group": DuetChoiceGroup;
         "duet-collapsible": DuetCollapsible;
@@ -8157,6 +8409,7 @@ declare namespace LocalJSX {
         "duet-notification": DuetNotification;
         "duet-notification-drawer": DuetNotificationDrawer;
         "duet-number-input": DuetNumberInput;
+        "duet-page-heading": DuetPageHeading;
         "duet-pagination": DuetPagination;
         "duet-paragraph": DuetParagraph;
         "duet-progress": DuetProgress;
@@ -8209,6 +8462,7 @@ declare module "@stencil/core" {
             "duet-caption": LocalJSX.DuetCaption & JSXBase.HTMLAttributes<HTMLDuetCaptionElement>;
             "duet-card": LocalJSX.DuetCard & JSXBase.HTMLAttributes<HTMLDuetCardElement>;
             "duet-checkbox": LocalJSX.DuetCheckbox & JSXBase.HTMLAttributes<HTMLDuetCheckboxElement>;
+            "duet-checkmark": LocalJSX.DuetCheckmark & JSXBase.HTMLAttributes<HTMLDuetCheckmarkElement>;
             "duet-choice": LocalJSX.DuetChoice & JSXBase.HTMLAttributes<HTMLDuetChoiceElement>;
             "duet-choice-group": LocalJSX.DuetChoiceGroup & JSXBase.HTMLAttributes<HTMLDuetChoiceGroupElement>;
             "duet-collapsible": LocalJSX.DuetCollapsible & JSXBase.HTMLAttributes<HTMLDuetCollapsibleElement>;
@@ -8244,6 +8498,7 @@ declare module "@stencil/core" {
             "duet-notification": LocalJSX.DuetNotification & JSXBase.HTMLAttributes<HTMLDuetNotificationElement>;
             "duet-notification-drawer": LocalJSX.DuetNotificationDrawer & JSXBase.HTMLAttributes<HTMLDuetNotificationDrawerElement>;
             "duet-number-input": LocalJSX.DuetNumberInput & JSXBase.HTMLAttributes<HTMLDuetNumberInputElement>;
+            "duet-page-heading": LocalJSX.DuetPageHeading & JSXBase.HTMLAttributes<HTMLDuetPageHeadingElement>;
             "duet-pagination": LocalJSX.DuetPagination & JSXBase.HTMLAttributes<HTMLDuetPaginationElement>;
             "duet-paragraph": LocalJSX.DuetParagraph & JSXBase.HTMLAttributes<HTMLDuetParagraphElement>;
             "duet-progress": LocalJSX.DuetProgress & JSXBase.HTMLAttributes<HTMLDuetProgressElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.5.2",
+  "version": "6.6.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -50,9 +50,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.30",
-    "@duetds/icons": "3.0.30",
-    "@duetds/tokens": "3.0.30",
+    "@duetds/fonts": "2.0.32",
+    "@duetds/icons": "3.0.32",
+    "@duetds/tokens": "3.0.32",
     "@koa/cors": "3.3.0",
     "@rollup/plugin-replace": "3.1.0",
     "@stencil/core": "2.19.3",
@@ -83,5 +83,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "fbd99bae9a185ca0ad61b69ec54eef20a1939410"
+  "gitHead": "080f6fd8613838ade6b5a51e68f2137b1dd72959"
 }