@duetds/components 6.5.2 → 6.6.0

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

@@ -10,6 +10,7 @@ export declare type DuetCollapsibleToggleEvent = {
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-content - piercing selector for styling the content
+ * @slot after-heading - Content after the heading can be for example badges.
  */
 export declare class DuetCollapsible implements ThemeableComponent {
   /**
@@ -17,6 +18,7 @@ export declare class DuetCollapsible implements ThemeableComponent {
    */
   private nativeButton?;
   private id;
+  private hasAfterHeading?;
   /**
    * Reference to host HTML element.
    */

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

@@ -57,6 +57,10 @@ export declare class DuetIcon implements ThemeableComponent {
    * Example: "color-primary".
    */
   outline: DuetColor;
+  /**
+   * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
+   */
+  shape: "circle" | "brand";
   /**
    * Component lifecycle events.
    */

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

@@ -20,6 +20,7 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
   private topCaptionPlaceholderId;
   private errorId;
   private nativeInput?;
+  private togglePasswordRevealedButton?;
   private isCaptionVisible;
   private timeoutId;
   private disallowPatternRegex;

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

@@ -47,6 +47,10 @@ export declare class DuetLink implements ThemeableComponent {
    * Forces URL to open in a new browser tab. Used together with URL prop.
    */
   external: boolean;
+  /**
+   * Initially visually hidden link, which is shown on focus.
+   */
+  tabToLink: boolean;
   /**
    * Component lifecycle events.
    */

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

@@ -1,7 +1,8 @@
+import { A11yComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetIconSize } from "../duet-icon/duet-icon";
-export declare class DuetMenuBarButton implements ThemeableComponent {
+export declare class DuetMenuBarButton implements ThemeableComponent, A11yComponent {
   /**
    * Own Properties.
    */
@@ -13,6 +14,55 @@ export declare class DuetMenuBarButton implements ThemeableComponent {
    * Reference to host HTML element.
    */
   element: HTMLElement;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+   */
+  accessiblePopup: string;
+  /**
+   * Indicates the id of a related component’s visually focused element.
+   */
+  accessibleActiveDescendant: string;
+  /**
+   * Indicates the id of a component owned by the button.
+   */
+  accessibleOwns: string;
+  /**
+   * Indicates the id of a component that describes the button.
+   */
+  accessibleDescribedBy: string;
+  /**
+   * Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: 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;
+  /**
+   * Tells screen reader the element is pressed.
+   */
+  accessiblePressed: boolean;
   /**
    * Theme.
    */

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

@@ -8,6 +8,12 @@ export declare class DuetMenuBarDropdown implements ThemeableComponent {
    * Reference to host HTML element.
    */
   element: HTMLElement;
+  /**
+   * 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;
   /**
    * Theme.
    */

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

@@ -1,5 +1,10 @@
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
+/**
+ * @slot default - Slot for keyboard accessible initially hidden links. Use duet-link with tab-to-link attribute.
+ * @slot mobile - Slot for navigation in small viewports (less than 992px wide).
+ * @slot desktop - Slot for navigation in large viewports (992px wide or more).
+ */
 export declare class DuetMenuBar implements ThemeableComponent {
   /**
    * Own Properties.

package/lib/types/components/duet-page-heading/duet-page-heading.d.ts

@@ -0,0 +1,32 @@
+import { DuetIconName, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
+/**
+ * @slot heading - This is a slot for heading content.
+ */
+export declare class DuetPageHeading implements ThemeableComponent {
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Theme of the hero area.
+   */
+  theme: DuetTheme;
+  /**
+   * Icon.
+   */
+  icon: DuetIconName;
+  /**
+   * Layout.
+   */
+  layout: "custom" | "fluid" | "narrow";
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

@@ -8,10 +8,20 @@ export declare class DuetSlideoutLink implements ThemeableComponent {
    * Reference to host HTML element.
    */
   element: HTMLElement;
+  /**
+   * 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;
   /**
    * Theme.
    */
   theme: DuetTheme;
+  /**
+   * Language of the link. Use this only for language selection links.
+   */
+  targetLanguage: "en" | "fi" | "sv";
   /**
    * Active
    */

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

@@ -1,4 +1,4 @@
-import { DuetTheme } from "../../common-types";
+import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetSlideoutPanel implements ThemeableComponent {
   /**
@@ -32,6 +32,10 @@ export declare class DuetSlideoutPanel implements ThemeableComponent {
    * Size. Small, medium or large.
    */
   labelSize: "small" | "medium" | "large";
+  /**
+   * Background color. Use one of the color tokens.
+   */
+  backgroundColor: DuetColor;
   /**
    * Component lifecycle events.
    */

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

@@ -5,6 +5,10 @@ export declare class DuetTab implements ComponentInterface {
    * Label for the tab.
    */
   label: string;
+  /**
+   * Caption for the tab.
+   */
+  caption: string;
   /**
    * Selected state of the tab.
    */

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

@@ -6,7 +6,7 @@ export declare type DuetTabGroupEvent = {
   component: "duet-tab-group";
   value: number;
 };
-export declare type DuetTabVariation = "default" | "plain";
+export declare type DuetTabVariation = "default" | "plain" | "checked";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button
@@ -17,6 +17,7 @@ export declare class DuetTabGroup implements ThemeableComponent {
    */
   private mutationO?;
   private id;
+  private tabsContainer;
   /**
    * Reference to host HTML element.
    */
@@ -100,6 +101,7 @@ export declare class DuetTabGroup implements ThemeableComponent {
   connectedCallback(): Promise<void>;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   /**
    * Component event handling.
    */
@@ -109,6 +111,7 @@ export declare class DuetTabGroup implements ThemeableComponent {
    * passing the index of the tab. Please note that index starts from zero.
    */
   openTab(tabIndex: number): Promise<void>;
+  private scrollToActive;
   /**
    * This method used to refresh the contents of the tab group
    * but is now deprecated as this is done automatically.

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

@@ -8,10 +8,20 @@ export declare class DuetToolbarDropdownLink implements ThemeableComponent {
    * Reference to host HTML element.
    */
   element: HTMLElement;
+  /**
+   * 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;
   /**
    * Theme.
    */
   theme: DuetTheme;
+  /**
+   * Language of the link. Use this only for language selection links.
+   */
+  targetLanguage: "en" | "fi" | "sv";
   /**
    * Href
    */