@duetds/components 8.1.3 → 8.1.5

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetMargin, DuetTextFontWeight, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { InputComponent } from "../../common/form-components";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetSelectOption = {
@@ -136,6 +136,14 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
      * Label for the select.
      */
     label: string;
+    /**
+     * Color of the label.
+     */
+    labelColor: string;
+    /**
+     * Font weight of the label.
+     */
+    labelWeight: DuetTextFontWeight;
     /**
      * Defines a specific role attribute for the select.
      */

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

@@ -9,6 +9,9 @@ export type DuetSlideoutEventDetails = {
     };
     component: "duet-slideout";
 };
+/**
+ * @slot sticky-header - Content will be fixed to the top of the modal when scrolling.
+ */
 export declare class DuetSlideout implements ThemeableComponent {
     /**
      * Own Properties.
@@ -22,6 +25,7 @@ export declare class DuetSlideout implements ThemeableComponent {
     private intersectionObserver;
     private mutationObserver;
     private teleport;
+    private hasStickyHeaderSlot;
     /**
      * Reference to host HTML element.
      */
@@ -33,6 +37,10 @@ export declare class DuetSlideout implements ThemeableComponent {
      * Theme.
      */
     theme: DuetTheme;
+    /**
+     * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems.
+     */
+    accessibleRole: string;
     /**
      * Open
      */
@@ -51,29 +59,16 @@ export declare class DuetSlideout implements ThemeableComponent {
      * inside your listener. Additionally, the passed data is available via **event.detail.data**.
      */
     duetSlideoutEvent: EventEmitter<DuetSlideoutEventDetails>;
-    /**
-     * Toggles the slideout.
-     */
-    toggle(): Promise<void>;
-    /**
-     * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
-     * the slideout so that focus can be moved back to this specific element when
-     * the slideout dialog is closed.
-     */
-    show(): Promise<void>;
-    /**
-     * Hides the slideout dialog and puts focus back to the original element
-     * that triggered the slideout (if we’re still in the same view).
-     */
-    hide(): Promise<void>;
     /**
      * Component lifecycle events.
      */
     componentWillLoad(): void;
-    componentDidLoad(): Promise<void>;
-    private handleBodyScrolling;
     connectedCallback(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
+    private handleBodyScrolling;
+    private setOpenButton;
+    private openButtonEventListener;
     private getOpenPanel;
     private toggleMenu;
     private bgOnClick;
@@ -86,6 +81,21 @@ export declare class DuetSlideout implements ThemeableComponent {
      * Sets focus. Use this method instead of the global focus().
      */
     setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Toggles the slideout.
+     */
+    toggle(): Promise<void>;
+    /**
+     * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
+     * the slideout so that focus can be moved back to this specific element when
+     * the slideout dialog is closed.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the slideout dialog and puts focus back to the original element
+     * that triggered the slideout (if we’re still in the same view).
+     */
+    hide(): Promise<void>;
     /**
      * render() function
      * Always the last one in the class.

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
-import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetMargin, DuetTextFontWeight, DuetTheme, DuetTooltipDirection } from "../../common-types";
 export type DuetTextareaEvent = {
     originalEvent?: Event;
     component: "duet-textarea";
@@ -97,6 +97,14 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      * Label for the textarea.
      */
     label: string;
+    /**
+     * Color of the label.
+     */
+    labelColor: string;
+    /**
+     * Font weight of the label.
+     */
+    labelWeight: DuetTextFontWeight;
     /**
      * Visually hide the label, but still show it to screen readers.
      */

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
-import { DuetMargin, DuetTheme } from "../../common-types";
+import { DuetMargin, DuetTextFontWeight, DuetTheme } from "../../common-types";
 export type DuetToggleChangeEvent = {
     component: "duet-toggle";
     checked: boolean;
@@ -57,6 +57,14 @@ export declare class DuetToggle implements ThemeableComponent, InputComponent, A
      * Label for the toggle.
      */
     label: string;
+    /**
+     * Color of the label.
+     */
+    labelColor: string;
+    /**
+     * Font weight of the label.
+     */
+    labelWeight: DuetTextFontWeight;
     /**
      * Position of the label
      */

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

@@ -16,6 +16,7 @@ export declare class DuetTooltip implements ThemeableComponent {
     private focusTarget;
     private resizeTimer;
     private intersectionObserver;
+    private aboutString;
     /**
      * Reference to host HTML element.
      */
@@ -51,6 +52,11 @@ export declare class DuetTooltip implements ThemeableComponent {
      * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
      */
     accessibleLabel: string;
+    /**
+     * 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;
     /**
      * @internal
      * Adds a prefix to the accessible label.

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,7 +36,7 @@ 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";
@@ -64,7 +64,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,7 +95,7 @@ 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";
@@ -494,7 +494,7 @@ export namespace Components {
          */
         "negative": boolean;
         /**
-          * Controls the padding of the component.
+          * Controls the padding of the plain variation button - has no effect for other variations.
          */
         "padding": DuetPadding;
         /**
@@ -1623,7 +1623,7 @@ export namespace Components {
         /**
           * The actual heading level used in the HTML markup.
          */
-        "level": DuetHeadingLevel;
+        "level": DuetHeadingLevel | "div";
         /**
           * Controls the margin of the component.
          */
@@ -1908,10 +1908,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.
          */
@@ -1982,6 +1990,10 @@ export namespace Components {
         "variation": DuetVariationType;
     }
     interface DuetLabel {
+        /**
+          * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
+         */
+        "color": DuetColor;
         /**
           * ID of the component that the label is labelling.
          */
@@ -1998,6 +2010,10 @@ export namespace Components {
           * Theme of the label.
          */
         "theme": DuetTheme;
+        /**
+          * Controls the weight of the label.
+         */
+        "weight": DuetTextFontWeight;
     }
     interface DuetLayout {
         /**
@@ -2400,6 +2416,10 @@ export namespace Components {
           * Theme of the modal.
          */
         "theme": DuetTheme;
+        /**
+          * Variation of the modal window.
+         */
+        "variation": DuetModalVariation;
     }
     interface DuetMultiselect {
         /**
@@ -2442,10 +2462,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.
          */
@@ -2914,6 +2942,10 @@ export namespace Components {
           * Left icon.
          */
         "leadingIcon": DuetIconName;
+        /**
+          * Left icon color.
+         */
+        "leadingIconColor": DuetIconColor;
         /**
           * Sets focus. Use this method instead of the global focus().
          */
@@ -3200,10 +3232,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.
          */
@@ -3371,10 +3411,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.
          */
@@ -3504,6 +3552,10 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetSlideout {
+        /**
+          * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems.
+         */
+        "accessibleRole": string;
         /**
           * Background color. Use one of the color tokens.
          */
@@ -3996,10 +4048,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.
          */
@@ -4094,10 +4154,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.
          */
@@ -4224,6 +4292,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"}
@@ -6340,7 +6412,7 @@ declare namespace LocalJSX {
          */
         "onDuetFocus"?: (event: DuetButtonCustomEvent<any>) => void;
         /**
-          * Controls the padding of the component.
+          * Controls the padding of the plain variation button - has no effect for other variations.
          */
         "padding"?: DuetPadding;
         /**
@@ -7561,7 +7633,7 @@ declare namespace LocalJSX {
         /**
           * The actual heading level used in the HTML markup.
          */
-        "level"?: DuetHeadingLevel;
+        "level"?: DuetHeadingLevel | "div";
         /**
           * Controls the margin of the component.
          */
@@ -7848,10 +7920,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.
          */
@@ -7934,6 +8014,10 @@ declare namespace LocalJSX {
         "variation"?: DuetVariationType;
     }
     interface DuetLabel {
+        /**
+          * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
+         */
+        "color"?: DuetColor;
         /**
           * ID of the component that the label is labelling.
          */
@@ -7950,6 +8034,10 @@ declare namespace LocalJSX {
           * Theme of the label.
          */
         "theme"?: DuetTheme;
+        /**
+          * Controls the weight of the label.
+         */
+        "weight"?: DuetTextFontWeight;
     }
     interface DuetLayout {
         /**
@@ -8342,6 +8430,10 @@ declare namespace LocalJSX {
           * Theme of the modal.
          */
         "theme"?: DuetTheme;
+        /**
+          * Variation of the modal window.
+         */
+        "variation"?: DuetModalVariation;
     }
     interface DuetMultiselect {
         /**
@@ -8384,10 +8476,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.
          */
@@ -8841,6 +8941,10 @@ declare namespace LocalJSX {
           * Left icon.
          */
         "leadingIcon"?: DuetIconName;
+        /**
+          * Left icon color.
+         */
+        "leadingIconColor"?: DuetIconColor;
         /**
           * Emitted when the item loses focus.
          */
@@ -9136,10 +9240,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.
          */
@@ -9315,10 +9427,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.
          */
@@ -9460,6 +9580,10 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetSlideout {
+        /**
+          * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems.
+         */
+        "accessibleRole"?: string;
         /**
           * Background color. Use one of the color tokens.
          */
@@ -9926,10 +10050,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.
          */
@@ -10036,10 +10168,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.
          */
@@ -10162,6 +10302,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "8.1.3",
+  "version": "8.1.5",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -43,9 +43,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.28",
-    "@duetds/icons": "4.0.28",
-    "@duetds/tokens": "4.0.28",
+    "@duetds/fonts": "3.0.30",
+    "@duetds/icons": "4.0.30",
+    "@duetds/tokens": "4.0.30",
     "@percy/cli": "1.21.0",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.10.0",
@@ -74,5 +74,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "7daf05bad8df8be14b6602dc05116c33ce5d438f"
+  "gitHead": "c4c0184521cbc873431e45bbb825549433724fb0"
 }