@duetds/components 8.1.4 → 8.2.0

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

@@ -1,4 +1,4 @@
-import { DuetColor, DuetMargin, DuetTheme } from "../../common-types";
+import { DuetColor, DuetMargin, DuetTextFontWeight, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetLabelSize = "small" | "medium";
 export type DuetLabelMargin = DuetMargin | "small";
@@ -20,6 +20,10 @@ export declare class DuetLabel implements ThemeableComponent {
      * Controls the size of the label.
      */
     size: DuetLabelSize;
+    /**
+     * Controls the weight of the label.
+     */
+    weight: DuetTextFontWeight;
     /**
      * Custom color to be used for text, as a design token entered in camelCase or kebab-case.
      * Example: "color-primary".

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

@@ -3,11 +3,13 @@ import { A11yComponent, ThemeableComponent } from "../../common";
 import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme, DuetVisualHeadingLevel } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
 export type DuetModalSize = "small" | "medium" | "large";
+export type DuetModalVariation = "default" | "slide-up";
 export type DuetModalCloseEvent = {
     originalEvent: Event;
     component: "duet-modal";
 };
 /**
+ * @slot sticky-header - Content will be fixed to the top of the modal when scrolling, typically used with slide-up variation for e.g. a search input
  * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
  */
 export declare class DuetModal implements ThemeableComponent, A11yComponent {
@@ -20,6 +22,7 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
     private modalInnerEl?;
     private buttonEl?;
     private focusedElBeforeOpen;
+    private hasStickyHeader;
     private isAndroidDevice;
     private isSafariBrowser;
     private teleport;
@@ -78,6 +81,10 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
      * Aria description the button
      */
     accessibleDescription: string;
+    /**
+     * Variation of the modal window.
+     */
+    variation: DuetModalVariation;
     /**
      * Size of the modal window's padding.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { DuetLanguage, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetLanguage, DuetMargin, DuetTextFontWeight, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetMultiselectItem = {
     label: string;
@@ -98,6 +98,14 @@ export declare class DuetMultiselect implements ThemeableComponent {
      * Label for the select.
      */
     label: string;
+    /**
+     * Color of the label.
+     */
+    labelColor: string;
+    /**
+     * Font weight of the label.
+     */
+    labelWeight: DuetTextFontWeight;
     /**
      * Indicates the id of a component that describes the input.
      */

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { FocusableComponent, OpenerComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetPopupMenuEvent = {
@@ -7,6 +8,7 @@ export type DuetPopupMenuEvent = {
 };
 export declare class DuetPopupMenu implements ThemeableComponent {
     private teleport;
+    private menuElement;
     /**
      * Reference to host HTML element.
      */
@@ -19,6 +21,10 @@ export declare class DuetPopupMenu implements ThemeableComponent {
      * A popup menu should always have an accessible label that describes the popup's function.
      */
     accessibleLabel: string;
+    /**
+     * Accessible role.
+     */
+    accessibleRole: "menu" | "list";
     /**
      * Theme.
      */
@@ -26,9 +32,7 @@ export declare class DuetPopupMenu implements ThemeableComponent {
     /**
      * Element controlling the opening and closing of the popup menu.
      */
-    controller: HTMLElement | (HTMLElement & {
-        setFocus(): void;
-    });
+    controller: HTMLElement & FocusableComponent & OpenerComponent;
     /**
      * Placement of the popup menu relative to its controller.
      * Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".

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

@@ -19,6 +19,10 @@ export declare class DuetPopupMenuItem implements ThemeableComponent {
      * users who use assistive technology.
      */
     accessibleLabel: string;
+    /**
+     * Accessible role.
+     */
+    accessibleRole: "menuitem" | "listitem";
     /**
      * Theme.
      */

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

@@ -1,5 +1,11 @@
 import { DuetColor, DuetHeadingLevel, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+/**
+ * @slot pre-heading - Slot for pre-heading content.
+ * @slot heading - Slot for heading content. Only span should be used in this slot.
+ * @slot description - Slot for description content. Only span should be used in this slot.
+ * @slot action - Slot for action button.
+ */
 export declare class DuetPromoCard implements ThemeableComponent {
     private hasPreHeadingSlot;
     private hasHeadingSlot;

package/lib/types/components/duet-range-slider/duet-range-slider.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { DuetLocale, DuetMargin, DuetTheme } from "../../common-types";
+import { DuetLocale, DuetMargin, DuetTextFontWeight, DuetTheme } from "../../common-types";
 import { DuetNumericInput } from "../../common/form-components";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetRangeChangeEvent = {
@@ -75,6 +75,14 @@ export declare class DuetRangeSlider implements ThemeableComponent, DuetNumericI
      * Label for the range slider.
      */
     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-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.
@@ -19,9 +22,9 @@ export declare class DuetSlideout implements ThemeableComponent {
     private exitLangObject;
     private topLevelOpenMenuBarLangObject;
     private isSafariBrowser;
-    private intersectionObserver;
     private mutationObserver;
     private teleport;
+    private hasStickyHeaderSlot;
     /**
      * Reference to host HTML element.
      */
@@ -55,29 +58,15 @@ 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;
     disconnectedCallback(): void;
+    handleOpenChange(): void;
+    private setOpenButton;
+    private openButtonEventListener;
     private getOpenPanel;
     private toggleMenu;
     private bgOnClick;
@@ -90,6 +79,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.