@duetds/components 6.5.3 → 6.6.1

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

@@ -221,6 +221,10 @@ export declare class DuetChoice implements ThemeableComponent, InputComponent, A
    * `input.focus()`.
    */
   setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * This method toggles the info section.
+   */
+  toggleInfoMethod(): Promise<void>;
   /**
    * Local methods
    */

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-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/duet-menu-bar.d.ts

@@ -1,6 +1,15 @@
+import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLogoSize } from "../duet-logo/duet-logo";
+export declare type DuetMenuBarChangeEvent = {
+  originalEvent: Event;
+  name: "logoClick";
+  data: {
+    logoHref: string;
+  };
+  component: "duet-menu-bar";
+};
 /**
  * @slot center - Slot for content in center.
  * @slot right - Slot for content in right side.
@@ -31,6 +40,15 @@ export declare class DuetMenuBar implements ThemeableComponent {
    * Logo href.
    */
   logoHref: string;
+  /**
+   * General event stream for the following events:
+   * logoClick
+   * You can prevent
+   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+   * inside your listener. Additionally, the passed data is available via
+   * **event.detail.data**.
+   */
+  duetEvent: EventEmitter<DuetMenuBarChangeEvent>;
   /**
    * Component lifecycle events.
    */
@@ -41,6 +59,7 @@ export declare class DuetMenuBar implements ThemeableComponent {
   private scrollbarCheck;
   private scrollToActive;
   private changeLogoSize;
+  private handleLogoClick;
   /**
    * render() function
    * Always the last one in the class.

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: "narrow" | "fluid";
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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-slideout-panel-dropdown/duet-slideout-panel-dropdown.d.ts

@@ -12,6 +12,10 @@ export declare class DuetSlideoutPanelDropdown implements ThemeableComponent {
    * Theme.
    */
   theme: DuetTheme;
+  /**
+   * Active
+   */
+  active: boolean;
   /**
    * Open
    */

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.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";
@@ -34,6 +35,7 @@ import { DuetLabelMargin, DuetLabelSize } from "./components/duet-label/duet-lab
 import { DuetLayoutStickyDistance } from "./components/duet-layout/duet-layout";
 import { DuetListBreakpoint, 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 { DuetMultiselectEvent, DuetMultiselectItem } from "./components/duet-multiselect/duet-multiselect";
 import { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer";
@@ -545,6 +547,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 +676,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 +1426,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 +1694,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.
          */
@@ -2252,6 +2288,20 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DuetPageHeading {
+        /**
+          * Icon.
+         */
+        "icon": DuetIconName;
+        /**
+          * Layout.
+         */
+        "layout": "narrow" | "fluid";
+        /**
+          * Theme of the hero area.
+         */
+        "theme": DuetTheme;
+    }
     interface DuetPagination {
         /**
           * Described By id
@@ -2827,6 +2877,10 @@ export namespace Components {
           * Active
          */
         "active": boolean;
+        /**
+          * Background color. Use one of the color tokens.
+         */
+        "backgroundColor": DuetColor;
         /**
           * Icon
          */
@@ -2845,6 +2899,10 @@ export namespace Components {
         "theme": DuetTheme;
     }
     interface DuetSlideoutPanelDropdown {
+        /**
+          * Active
+         */
+        "active": boolean;
         /**
           * Icon
          */
@@ -3005,6 +3063,10 @@ export namespace Components {
           * @default null
          */
         "accessibleDescriptionDefault": DuetLangObject | string;
+        /**
+          * Caption for the tab.
+         */
+        "caption": string;
         /**
           * Label for the tab.
          */
@@ -3784,6 +3846,10 @@ export interface DuetInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetInputElement;
 }
+export interface DuetMenuBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDuetMenuBarElement;
+}
 export interface DuetModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDuetModalElement;
@@ -3899,6 +3965,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: {
@@ -4109,6 +4181,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: {
@@ -4341,6 +4419,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;
@@ -4376,6 +4455,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;
@@ -4921,6 +5001,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.
@@ -5864,6 +5966,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.
          */
@@ -6132,6 +6238,10 @@ declare namespace LocalJSX {
           * @default "fi"
          */
         "language"?: DuetLanguage;
+        /**
+          * Initially visually hidden link, which is shown on focus.
+         */
+        "tabToLink"?: boolean;
         /**
           * Theme of the button.
          */
@@ -6210,6 +6320,10 @@ declare namespace LocalJSX {
           * Logo href.
          */
         "logoHref"?: string;
+        /**
+          * General event stream for the following events: logoClick You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside your listener. Additionally, the passed data is available via **event.detail.data**.
+         */
+        "onDuetEvent"?: (event: DuetMenuBarCustomEvent<DuetMenuBarChangeEvent>) => void;
         /**
           * Theme.
          */
@@ -6719,6 +6833,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DuetPageHeading {
+        /**
+          * Icon.
+         */
+        "icon"?: DuetIconName;
+        /**
+          * Layout.
+         */
+        "layout"?: "narrow" | "fluid";
+        /**
+          * Theme of the hero area.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetPagination {
         /**
           * Described By id
@@ -7318,6 +7446,10 @@ declare namespace LocalJSX {
           * Active
          */
         "active"?: boolean;
+        /**
+          * Background color. Use one of the color tokens.
+         */
+        "backgroundColor"?: DuetColor;
         /**
           * Icon
          */
@@ -7336,6 +7468,10 @@ declare namespace LocalJSX {
         "theme"?: DuetTheme;
     }
     interface DuetSlideoutPanelDropdown {
+        /**
+          * Active
+         */
+        "active"?: boolean;
         /**
           * Icon
          */
@@ -7496,6 +7632,10 @@ declare namespace LocalJSX {
           * @default null
          */
         "accessibleDescriptionDefault"?: DuetLangObject | string;
+        /**
+          * Caption for the tab.
+         */
+        "caption"?: string;
         /**
           * Label for the tab.
          */
@@ -8250,6 +8390,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;
@@ -8285,6 +8426,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;
@@ -8337,6 +8479,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>;
@@ -8372,6 +8515,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.3",
+  "version": "6.6.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.31",
-    "@duetds/icons": "3.0.31",
-    "@duetds/tokens": "3.0.31",
+    "@duetds/fonts": "2.0.33",
+    "@duetds/icons": "3.0.33",
+    "@duetds/tokens": "3.0.33",
     "@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": "0e50c6e2904f63d833c73093eedd72df8cf3d834"
+  "gitHead": "6c4fbcb2025025b8f513c191a8228997a039753b"
 }