@duetds/components 6.7.1 → 6.8.1

package/lib/types/common-types.d.ts

@@ -5,13 +5,14 @@ export type DuetTheme = "" | "default" | "turva" // empty string means inherit g
 export type DuetTooltipDirection = "left" | "auto" | "right"
 export type DuetIconName = string
 export type DuetColor = string
+export type DuetBlock = "div"
 export type DuetHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
 export type DuetVisualHeadingLevel = "h0" | DuetHeadingLevel
 export type DuetLanguage = "fi" | "en" | "sv"
 export type DuetLanguageWithUs = "fi" | "en" | "sv" | "us"
 export type DuetStatus = "default" | "success" | "danger" | "warning"
 export type DuetAnalyticsEvent<T extends string> = { analyticsId: string; component: T }
-export type DuetGridBreakpoint = "small" | "medium" | "x-large"
+export type DuetGridBreakpoint = "x-small" | "small" | "medium" | "large" | "x-large"
 export type DuetLocale = "fi-FI" | "sv-SE" | "en-GB" | "en-US"
 export type DuetChoiceType = "radio" | "checkbox"
 export type DuetTableBreakpoint =
@@ -33,3 +34,6 @@ export type StatusMessage = {
   file: string
   files: string
 }
+export type DuetCardHeadingLevel = DuetHeadingLevel | DuetBlock
+export type DuetLinkVariation = "default" | "block"
+export type DuetChoiceGroupBreakpoint = "x-small" | "small" | "medium" | "large" | "x-large"

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { ThemeableComponent } from "../../common";
-import { DuetColor, DuetHeadingLevel, DuetIconName, DuetMargin, DuetTheme } from "../../common-types";
+import { DuetCardHeadingLevel, DuetColor, DuetIconName, DuetMargin, DuetTheme } from "../../common-types";
 import { DuetBreakpoints } from "../../utils/token-utils";
 export type DuetCardVariation = "default" | "info" | "plain";
 export type DuetCardPadding = "x-large" | "large" | "medium" | "small" | "x-small" | "xx-small" | "none";
@@ -60,8 +60,16 @@ export declare class DuetCard implements ThemeableComponent {
   /**
    * The actual heading level used for the heading in html markup. This setting
    * exists for accessibility reasons. It doesn’t change the style visually.
+   * This setting is only used if the heading property is set.
+   * If you provide your own heading(s) in the slot, you should set this to neutral "div"
+   * in order to avoid nested headings.
    */
-  headingLevel: DuetHeadingLevel;
+  headingLevel: DuetCardHeadingLevel;
+  /**
+   * Custom color to be used for the card's heading background, as a design token entered in
+   * camelCase or kebab-case. Example: "primary".
+   */
+  headingBackground: DuetColor | undefined;
   /**
    * Icon to display on the left side of heading. Example: "form-location"
    */

package/lib/types/components/duet-choice-group/duet-choice-group.d.ts

@@ -1,4 +1,4 @@
-import { DuetDirection, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetChoiceGroupBreakpoint, DuetDirection, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetChoiceGroup implements ThemeableComponent {
   /**
@@ -57,6 +57,11 @@ export declare class DuetChoiceGroup implements ThemeableComponent {
    * makes sure that contents are stacked vertically on mobile.
    */
   responsive: boolean;
+  /**
+   * Switch the breakpoint used to trigger the content stacking. These match to
+   * similar media query tokens eg.: $media-query-small, $media-query-medium.
+   */
+  breakpoint: DuetChoiceGroupBreakpoint;
   /**
    * The value of the selected choice button.
    */

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

@@ -27,6 +27,12 @@ export declare class DuetCollapsible implements ThemeableComponent {
    * Theme of the collapsible.
    */
   theme: DuetTheme;
+  /**
+   * Adds accessible label for the collapsible 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;
   /**
    * The content for the collapsible heading.
    */

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

@@ -69,6 +69,10 @@ export declare class DuetCombobox implements ThemeableComponent {
    * Defines minimum number of characters that must be given to show search results
    */
   minCharacters: number;
+  /**
+   * Defines if items list should always open after clicking on input
+   */
+  openListOnClick: boolean;
   /**
    * Emitted when a keyboard input occurred.
    */

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

@@ -60,7 +60,7 @@ export declare class DuetIcon implements ThemeableComponent {
   /**
    * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
    */
-  shape: "circle" | "brand";
+  shape: "circle" | "brand" | "brand-rotated";
   /**
    * Component lifecycle events.
    */

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

@@ -1,4 +1,4 @@
-import { DuetLanguage, DuetTheme } from "../../common-types";
+import { DuetIconName, DuetLanguage, DuetLinkVariation, DuetPadding, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
 /**
@@ -6,6 +6,10 @@ import { DuetLangObject } from "../../utils/language-utils";
  */
 export declare class DuetLink implements ThemeableComponent {
   private nativeLink;
+  /**
+   * Style variation of the link.
+   */
+  variation: DuetLinkVariation;
   /**
    * 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
@@ -51,6 +55,14 @@ export declare class DuetLink implements ThemeableComponent {
    * Initially visually hidden link, which is shown on focus.
    */
   tabToLink: boolean;
+  /**
+   * Icon to display on the left side of the ink text. (only with variations other than "default")
+   */
+  icon: DuetIconName;
+  /**
+   * Controls the padding of the component (only with variations other than "default")
+   */
+  padding: DuetPadding;
   /**
    * Component lifecycle events.
    */
@@ -60,6 +72,8 @@ export declare class DuetLink implements ThemeableComponent {
    * `link.focus()`.
    */
   setFocus(options?: FocusOptions): Promise<void>;
+  private renderContent;
+  private renderGrid;
   /**
    * render() function
    * Always the last one in the class.

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

@@ -1,6 +1,6 @@
 import { DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export type DuetListVariation = "default" | "striped";
+export type DuetListVariation = "default" | "striped" | "bordered" | "inner-bordered";
 export type DuetListMobileAlignment = "left" | "center";
 export type DuetListLabelWidth = "30" | "50" | "70";
 export type DuetListBreakpoint = "small" | "large";

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

@@ -1,9 +1,13 @@
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetIconSize } from "../duet-icon/duet-icon";
 export declare class DuetMenuBarDropdown implements ThemeableComponent {
   /**
    * Own Properties.
    */
+  private mql;
+  private boundMqlFunctions;
+  iconSize: DuetIconSize;
   /**
    * Reference to host HTML element.
    */
@@ -31,6 +35,9 @@ export declare class DuetMenuBarDropdown implements ThemeableComponent {
    * Component lifecycle events.
    */
   componentWillLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private changeIconSize;
   private onClick;
   private getVariant;
   /**

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

@@ -17,6 +17,7 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
   private modalId;
   private slotDefaultId;
   private modalEl?;
+  private modalInnerEl?;
   private buttonEl?;
   private focusedElBeforeOpen;
   private isAndroidDevice;
@@ -63,6 +64,11 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
    * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
    */
   accessibleLabelledBy: string;
+  /**
+   * By default the heading is used as target for aria-labelledby, and it overrides this label.
+   * If you wish to skip the heading, you must set this label.
+   */
+  accessibleLabel: string;
   /**
    * Details of the component
    */
@@ -72,9 +78,9 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
    */
   accessibleDescription: string;
   /**
-   * Size of the modal window.
+   * Size of the modal window's padding.
    */
-  gutterSize: DuetModalSize;
+  gutterSize: DuetModalSize | "none";
   /**
    * Theme of the modal.
    */

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

@@ -55,6 +55,10 @@ export declare class DuetTable implements ThemeableComponent {
    * this is useful for comparison tables where it's important to maintain column and row layout.
    */
   breakpoint: DuetTableBreakpoint;
+  /**
+   * Hide a thead section visually. The content is still available to screen readers.
+   */
+  hideHeadVisually: boolean;
   handleMediaQueryChange: (mq: MediaQueryListEvent | MediaQueryList) => void;
   connectedCallback(): void;
   componentWillLoad(): void;

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 { DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLinkVariation, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, 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";
@@ -56,7 +56,7 @@ import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
 import { DuetUploadEvent, DuetUploadTableGroupName, StringMap, XHRInternalMiddleWare } from "./components/duet-upload/duet-upload";
 import { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table";
 import { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils";
-export { DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLinkVariation, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, 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";
@@ -467,9 +467,13 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually.
+          * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
-        "headingLevel": DuetHeadingLevel;
+        "headingBackground": DuetColor | undefined;
+        /**
+          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings.
+         */
+        "headingLevel": DuetCardHeadingLevel;
         /**
           * Icon to display on the left side of heading. Example: "form-location"
          */
@@ -744,6 +748,10 @@ export namespace Components {
         "value": string;
     }
     interface DuetChoiceGroup {
+        /**
+          * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        "breakpoint": DuetChoiceGroupBreakpoint;
         /**
           * Additional caption to show inside the label of the choice group.
          */
@@ -798,6 +806,10 @@ export namespace Components {
         "value": string;
     }
     interface DuetCollapsible {
+        /**
+          * Adds accessible label for the collapsible 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;
         /**
           * The content for the collapsible heading.
          */
@@ -865,6 +877,10 @@ export namespace Components {
           * Defines minimum number of characters that must be given to show search results
          */
         "minCharacters": number;
+        /**
+          * Defines if items list should always open after clicking on input
+         */
+        "openListOnClick": boolean;
         /**
           * Theme of the combobox.
          */
@@ -1529,7 +1545,7 @@ export namespace Components {
         /**
           * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
          */
-        "shape": "circle" | "brand";
+        "shape": "circle" | "brand" | "brand-rotated";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -1780,6 +1796,10 @@ export namespace Components {
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
         "external": boolean;
+        /**
+          * Icon to display on the left side of the ink text. (only with variations other than "default")
+         */
+        "icon": DuetIconName;
         /**
           * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.
          */
@@ -1790,6 +1810,10 @@ export namespace Components {
           * @default "fi"
          */
         "language": DuetLanguage;
+        /**
+          * Controls the padding of the component (only with variations other than "default")
+         */
+        "padding": DuetPadding;
         /**
           * Sets focus on the specified `duet-link`. Use this method instead of the global `link.focus()`.
          */
@@ -1806,6 +1830,10 @@ export namespace Components {
           * A destination to link to, rendered in the href attribute of a link.
          */
         "url": string;
+        /**
+          * Style variation of the link.
+         */
+        "variation": DuetLinkVariation;
     }
     interface DuetList {
         /**
@@ -2016,6 +2044,10 @@ export namespace Components {
           * Details of the component
          */
         "accessibleDetails": string;
+        /**
+          * By default the heading is used as target for aria-labelledby, and it overrides this label. If you wish to skip the heading, you must set this label.
+         */
+        "accessibleLabel": string;
         /**
           * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
          */
@@ -2033,9 +2065,9 @@ export namespace Components {
          */
         "color": DuetColor;
         /**
-          * Size of the modal window.
+          * Size of the modal window's padding.
          */
-        "gutterSize": DuetModalSize;
+        "gutterSize": DuetModalSize | "none";
         /**
           * Accessible heading displayed in the modal. The modal marks this as the label of the modal when used. This helps screen reader users which is why this is a required property.
          */
@@ -3252,6 +3284,10 @@ export namespace Components {
           * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
         "breakpoint": DuetTableBreakpoint;
+        /**
+          * Hide a thead section visually. The content is still available to screen readers.
+         */
+        "hideHeadVisually": boolean;
         /**
           * Controls the margin of the component.
          */
@@ -4970,9 +5006,13 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually.
+          * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
-        "headingLevel"?: DuetHeadingLevel;
+        "headingBackground"?: DuetColor | undefined;
+        /**
+          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings.
+         */
+        "headingLevel"?: DuetCardHeadingLevel;
         /**
           * Icon to display on the left side of heading. Example: "form-location"
          */
@@ -5256,6 +5296,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DuetChoiceGroup {
+        /**
+          * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        "breakpoint"?: DuetChoiceGroupBreakpoint;
         /**
           * Additional caption to show inside the label of the choice group.
          */
@@ -5310,6 +5354,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DuetCollapsible {
+        /**
+          * Adds accessible label for the collapsible 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;
         /**
           * The content for the collapsible heading.
          */
@@ -5376,6 +5424,10 @@ declare namespace LocalJSX {
           * Emitted when a keyboard input occurred.
          */
         "onDuetChange"?: (event: DuetComboboxCustomEvent<DuetComboboxEvent>) => void;
+        /**
+          * Defines if items list should always open after clicking on input
+         */
+        "openListOnClick"?: boolean;
         /**
           * Theme of the combobox.
          */
@@ -6126,7 +6178,7 @@ declare namespace LocalJSX {
         /**
           * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
          */
-        "shape"?: "circle" | "brand";
+        "shape"?: "circle" | "brand" | "brand-rotated";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -6385,6 +6437,10 @@ declare namespace LocalJSX {
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
         "external"?: boolean;
+        /**
+          * Icon to display on the left side of the ink text. (only with variations other than "default")
+         */
+        "icon"?: DuetIconName;
         /**
           * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.
          */
@@ -6395,6 +6451,10 @@ declare namespace LocalJSX {
           * @default "fi"
          */
         "language"?: DuetLanguage;
+        /**
+          * Controls the padding of the component (only with variations other than "default")
+         */
+        "padding"?: DuetPadding;
         /**
           * Initially visually hidden link, which is shown on focus.
          */
@@ -6407,6 +6467,10 @@ declare namespace LocalJSX {
           * A destination to link to, rendered in the href attribute of a link.
          */
         "url"?: string;
+        /**
+          * Style variation of the link.
+         */
+        "variation"?: DuetLinkVariation;
     }
     interface DuetList {
         /**
@@ -6613,6 +6677,10 @@ declare namespace LocalJSX {
           * Details of the component
          */
         "accessibleDetails"?: string;
+        /**
+          * By default the heading is used as target for aria-labelledby, and it overrides this label. If you wish to skip the heading, you must set this label.
+         */
+        "accessibleLabel"?: string;
         /**
           * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
          */
@@ -6630,9 +6698,9 @@ declare namespace LocalJSX {
          */
         "color"?: DuetColor;
         /**
-          * Size of the modal window.
+          * Size of the modal window's padding.
          */
-        "gutterSize"?: DuetModalSize;
+        "gutterSize"?: DuetModalSize | "none";
         /**
           * Accessible heading displayed in the modal. The modal marks this as the label of the modal when used. This helps screen reader users which is why this is a required property.
          */
@@ -7877,6 +7945,10 @@ declare namespace LocalJSX {
           * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
         "breakpoint"?: DuetTableBreakpoint;
+        /**
+          * Hide a thead section visually. The content is still available to screen readers.
+         */
+        "hideHeadVisually"?: boolean;
         /**
           * Controls the margin of the component.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.7.1",
+  "version": "6.8.1",
   "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.36",
-    "@duetds/icons": "3.0.36",
-    "@duetds/tokens": "3.0.36",
+    "@duetds/fonts": "2.0.38",
+    "@duetds/icons": "3.0.38",
+    "@duetds/tokens": "3.0.38",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "3.1.0",
     "@stencil/sass": "3.0.0",
@@ -78,5 +78,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "473da676ecdde00ca544c4317a4afb043d40b915"
+  "gitHead": "55b4dd178992e11bb755c152bec40256f158137a"
 }