@duetds/components 10.5.0 → 10.7.0

package/lib/types/components.d.ts

@@ -63,6 +63,7 @@ import { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-s
 import { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
 import { IndicatorVariation as IndicatorVariation1 } from "./components/duet-indicator/duet-indicator";
 import { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
+import { DuetTeaserHeadingVisualLevel } from "./components/duet-teaser/duet-teaser";
 import { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
 import { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
 import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
@@ -131,6 +132,7 @@ export { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-s
 export { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
 export { IndicatorVariation as IndicatorVariation1 } from "./components/duet-indicator/duet-indicator";
 export { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
+export { DuetTeaserHeadingVisualLevel } from "./components/duet-teaser/duet-teaser";
 export { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
 export { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
 export { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
@@ -381,6 +383,15 @@ export namespace Components {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt": string;
+        /**
+          * Will the image cover the whole image area (possibly getting cropped), or will it be contained without any cropping (possibly not filling the whole area).
+          * @default "cover"
+         */
+        "imageFit": "cover" | "contain";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -392,7 +403,7 @@ export namespace Components {
          */
         "size": bannerSize;
         /**
-          * Array of sources for responsive images. Sources have the properties of <source> element. This is an experimental feature and might be changed without notice.
+          * Array of sources for responsive images. Sources have the properties of <source> element.
          */
         "sources": DuetSource[] | string;
         /**
@@ -544,7 +555,7 @@ export namespace Components {
          */
         "external": boolean;
         /**
-          * Keep the button fixed width even on mobile viewports.
+          * Keep the button fixed width even on mobile viewports. Fixed width is always used for variation plain.
           * @default false
          */
         "fixed": boolean;
@@ -725,6 +736,10 @@ export namespace Components {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -754,6 +769,10 @@ export namespace Components {
           * @default undefined
          */
         "shadowBreakpoint"?: DuetBreakpoints;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources": DuetSource[] | string;
         /**
           * Theme of the card.
           * @default ""
@@ -904,12 +923,17 @@ export namespace Components {
         "type": DuetChoiceType;
     }
     interface DuetChip {
+        /**
+          * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+          * @default ""
+         */
+        "accessibleDescribedBy": string;
         /**
           * If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
          */
         "accessibleExpanded": boolean;
         /**
-          * Adds accessible label for the chip that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. With input variation this is not used, as the accessible label is automatically generated.
+          * Adds accessible label for the chip that is used by screen readers and other assistive technology. Has effect only with "button" variation as for the other variations the accessible label is automatically generated.
          */
         "accessibleLabel": string;
         /**
@@ -941,7 +965,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Id of the DuetPopupMenu that is controlled by the chip.
+          * Id of the DuetPopupMenu that is controlled by the chip. Works only with "filter" variation.
          */
         "popup": string;
         /**
@@ -973,7 +997,7 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Input represents items input by the user, and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+          * Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Filter can also be used with a popup-menu - then the initial text describes the type of category of filtering, and the selection from the popup-menu sets the filter value. Input represents items input by the user, and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group, and it should be used with a value and name.
           * @default "button"
          */
         "variation": DuetChipVariation;
@@ -1372,6 +1396,10 @@ export namespace Components {
           * Image.
          */
         "image": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -1385,6 +1413,10 @@ export namespace Components {
           * Phone.
          */
         "phone": string;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources": DuetSource[] | string;
         /**
           * Theme.
           * @default ""
@@ -1444,6 +1476,21 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Disallow selecting Finnish bank holidays, including Easter-based dates and Midsummer Eve.
+          * @default false
+         */
+        "disallowBankHolidays": boolean;
+        /**
+          * Disallow selecting Saturdays and Sundays.
+          * @default false
+         */
+        "disallowWeekends": boolean;
+        /**
+          * Disallow selecting specific dates. Accepts an array of ISO-8601 (YYYY-MM-DD) dates, or a comma-separated string of the same when set as an HTML attribute.
+          * @default []
+         */
+        "disallowedDates": string | string[];
         /**
           * If form input field has a placeholder text, and user types anything (causing the text to dissapear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
           * @default false
@@ -1552,7 +1599,7 @@ export namespace Components {
          */
         "tooltipDirection": DuetTooltipDirection;
         /**
-          * This offers information relating to the current validity of the component. It follow as closely as possible the behaviour of the native date input. Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
+          * This offers information relating to the current validity of the component. It follow as closely as possible the behaviour of the native date input. Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow. For disallowed dates property customError is set true.
           * @readonly
          */
         "validity": ValidityState;
@@ -1834,7 +1881,8 @@ export namespace Components {
     | "sidebar-left"
     | "two-columns"
     | "three-columns"
-    | "button-grid";
+    | "button-grid"
+    | "teaser";
         /**
           * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first is row-gap and the second column-gap. Does not apply to button-grid.
           * @default "auto"
@@ -2147,6 +2195,11 @@ export namespace Components {
           * @default "auto"
          */
         "imagePosition": "auto" | "center";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+          * @default "high"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Image sizing.
           * @default "auto"
@@ -2182,6 +2235,10 @@ export namespace Components {
           * @default ""
          */
         "preHeading": string;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources": DuetSource[] | string;
         /**
           * The level of the heading. Only usable with campaign, section variations.
           * @default "h2"
@@ -3834,6 +3891,11 @@ export namespace Components {
           * @default undefined
          */
         "accessibleLabelledBy": string;
+        /**
+          * Set the type of automatic completion by the browser. Must include "tel", may also include token "home", "work" or "mobile". If you must disable automatic completion (not recommended) use "off"
+          * @default "tel"
+         */
+        "autoComplete": string;
         /**
           * Caption (underneath label) that can be set as a way of adding extra information
          */
@@ -4172,6 +4234,10 @@ export namespace Components {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -4181,6 +4247,10 @@ export namespace Components {
           * Sets focus on underlying a element. Available only when url attribute is used. Use this method instead of the native `focus()`.
          */
         "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element. This is an experimental feature and might be changed without notice.
+         */
+        "sources": DuetSource[] | string;
         /**
           * Text color.
           * @default "secondary"
@@ -5498,6 +5568,73 @@ export namespace Components {
          */
         "variation": DuetTableVariant;
     }
+    interface DuetTeaser {
+        /**
+          * Description text shown below the heading.
+         */
+        "description": string;
+        /**
+          * The heading text.
+         */
+        "heading": string;
+        /**
+          * The actual heading level used in the HTML markup.
+          * @default "h3"
+         */
+        "headingLevel": DuetHeadingLevel;
+        /**
+          * Controls the visual size of the heading. Headings longer than 60 characters always use "h5" visually, regardless of this setting.
+          * @default "h3"
+         */
+        "headingVisualLevel": DuetTeaserHeadingVisualLevel;
+        /**
+          * Icon to display when no image is set. Not used if the image property is given.
+         */
+        "icon": DuetIconName;
+        /**
+          * Background color for the icon
+          * @default "color-background-accent-secondary"
+         */
+        "iconBackground": DuetColor;
+        /**
+          * Color for the icon
+          * @default "color-foreground-accent-secondary"
+         */
+        "iconColor": DuetIconColor;
+        /**
+          * Image URL. If provided, the icon property is ignored.
+         */
+        "image": string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
+        /**
+          * Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it.
+         */
+        "meta": string;
+        /**
+          * Sets focus on underlying a element. Available only when url attribute is used. Use this method instead of the native `focus()`.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources": DuetSource[] | string;
+        /**
+          * Theme.
+          * @default ""
+         */
+        "theme": DuetTheme;
+        /**
+          * A destination to link to, rendered in the href attribute of a link. Makes the whole teaser act as a link and disables the links slot.
+         */
+        "url": string;
+    }
     interface DuetTextarea {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -7626,6 +7763,12 @@ declare global {
         prototype: HTMLDuetTableElement;
         new (): HTMLDuetTableElement;
     };
+    interface HTMLDuetTeaserElement extends Components.DuetTeaser, HTMLStencilElement {
+    }
+    var HTMLDuetTeaserElement: {
+        prototype: HTMLDuetTeaserElement;
+        new (): HTMLDuetTeaserElement;
+    };
     interface HTMLDuetTextareaElementEventMap {
         "duetInput": DuetTextareaEvent;
         "duetChange": DuetTextareaEvent;
@@ -7865,6 +8008,7 @@ declare global {
         "duet-tab": HTMLDuetTabElement;
         "duet-tab-group": HTMLDuetTabGroupElement;
         "duet-table": HTMLDuetTableElement;
+        "duet-teaser": HTMLDuetTeaserElement;
         "duet-textarea": HTMLDuetTextareaElement;
         "duet-toggle": HTMLDuetToggleElement;
         "duet-toolbar": HTMLDuetToolbarElement;
@@ -8118,6 +8262,15 @@ declare namespace LocalJSX {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt"?: string;
+        /**
+          * Will the image cover the whole image area (possibly getting cropped), or will it be contained without any cropping (possibly not filling the whole area).
+          * @default "cover"
+         */
+        "imageFit"?: "cover" | "contain";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -8129,7 +8282,7 @@ declare namespace LocalJSX {
          */
         "size"?: bannerSize;
         /**
-          * Array of sources for responsive images. Sources have the properties of <source> element. This is an experimental feature and might be changed without notice.
+          * Array of sources for responsive images. Sources have the properties of <source> element.
          */
         "sources"?: DuetSource[] | string;
         /**
@@ -8281,7 +8434,7 @@ declare namespace LocalJSX {
          */
         "external"?: boolean;
         /**
-          * Keep the button fixed width even on mobile viewports.
+          * Keep the button fixed width even on mobile viewports. Fixed width is always used for variation plain.
           * @default false
          */
         "fixed"?: boolean;
@@ -8466,6 +8619,10 @@ declare namespace LocalJSX {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -8495,6 +8652,10 @@ declare namespace LocalJSX {
           * @default undefined
          */
         "shadowBreakpoint"?: DuetBreakpoints;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources"?: DuetSource[] | string;
         /**
           * Theme of the card.
           * @default ""
@@ -8653,12 +8814,17 @@ declare namespace LocalJSX {
         "type"?: DuetChoiceType;
     }
     interface DuetChip {
+        /**
+          * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+          * @default ""
+         */
+        "accessibleDescribedBy"?: string;
         /**
           * If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
          */
         "accessibleExpanded"?: boolean;
         /**
-          * Adds accessible label for the chip that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. With input variation this is not used, as the accessible label is automatically generated.
+          * Adds accessible label for the chip that is used by screen readers and other assistive technology. Has effect only with "button" variation as for the other variations the accessible label is automatically generated.
          */
         "accessibleLabel"?: string;
         /**
@@ -8706,7 +8872,7 @@ declare namespace LocalJSX {
          */
         "onDuetRemove"?: (event: DuetChipCustomEvent<DuetChipEvent>) => void;
         /**
-          * Id of the DuetPopupMenu that is controlled by the chip.
+          * Id of the DuetPopupMenu that is controlled by the chip. Works only with "filter" variation.
          */
         "popup"?: string;
         /**
@@ -8724,7 +8890,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Input represents items input by the user, and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+          * Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Filter can also be used with a popup-menu - then the initial text describes the type of category of filtering, and the selection from the popup-menu sets the filter value. Input represents items input by the user, and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group, and it should be used with a value and name.
           * @default "button"
          */
         "variation"?: DuetChipVariation;
@@ -9126,6 +9292,10 @@ declare namespace LocalJSX {
           * Image.
          */
         "image"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -9139,6 +9309,10 @@ declare namespace LocalJSX {
           * Phone.
          */
         "phone"?: string;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources"?: DuetSource[] | string;
         /**
           * Theme.
           * @default ""
@@ -9202,6 +9376,21 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Disallow selecting Finnish bank holidays, including Easter-based dates and Midsummer Eve.
+          * @default false
+         */
+        "disallowBankHolidays"?: boolean;
+        /**
+          * Disallow selecting Saturdays and Sundays.
+          * @default false
+         */
+        "disallowWeekends"?: boolean;
+        /**
+          * Disallow selecting specific dates. Accepts an array of ISO-8601 (YYYY-MM-DD) dates, or a comma-separated string of the same when set as an HTML attribute.
+          * @default []
+         */
+        "disallowedDates"?: string | string[];
         /**
           * If form input field has a placeholder text, and user types anything (causing the text to dissapear), settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
           * @default false
@@ -9310,7 +9499,7 @@ declare namespace LocalJSX {
          */
         "tooltipDirection"?: DuetTooltipDirection;
         /**
-          * This offers information relating to the current validity of the component. It follow as closely as possible the behaviour of the native date input. Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
+          * This offers information relating to the current validity of the component. It follow as closely as possible the behaviour of the native date input. Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow. For disallowed dates property customError is set true.
           * @readonly
          */
         "validity"?: ValidityState;
@@ -9616,7 +9805,8 @@ declare namespace LocalJSX {
     | "sidebar-left"
     | "two-columns"
     | "three-columns"
-    | "button-grid";
+    | "button-grid"
+    | "teaser";
         /**
           * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first is row-gap and the second column-gap. Does not apply to button-grid.
           * @default "auto"
@@ -9957,6 +10147,11 @@ declare namespace LocalJSX {
           * @default "auto"
          */
         "imagePosition"?: "auto" | "center";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+          * @default "high"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Image sizing.
           * @default "auto"
@@ -10000,6 +10195,10 @@ declare namespace LocalJSX {
           * @default ""
          */
         "preHeading"?: string;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources"?: DuetSource[] | string;
         /**
           * The level of the heading. Only usable with campaign, section variations.
           * @default "h2"
@@ -11590,6 +11789,11 @@ declare namespace LocalJSX {
           * @default undefined
          */
         "accessibleLabelledBy"?: string;
+        /**
+          * Set the type of automatic completion by the browser. Must include "tel", may also include token "home", "work" or "mobile". If you must disable automatic completion (not recommended) use "off"
+          * @default "tel"
+         */
+        "autoComplete"?: string;
         /**
           * Caption (underneath label) that can be set as a way of adding extra information
          */
@@ -11923,11 +12127,19 @@ declare namespace LocalJSX {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
          */
         "margin"?: DuetMargin;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element. This is an experimental feature and might be changed without notice.
+         */
+        "sources"?: DuetSource[] | string;
         /**
           * Text color.
           * @default "secondary"
@@ -13201,6 +13413,69 @@ declare namespace LocalJSX {
          */
         "variation"?: DuetTableVariant;
     }
+    interface DuetTeaser {
+        /**
+          * Description text shown below the heading.
+         */
+        "description"?: string;
+        /**
+          * The heading text.
+         */
+        "heading"?: string;
+        /**
+          * The actual heading level used in the HTML markup.
+          * @default "h3"
+         */
+        "headingLevel"?: DuetHeadingLevel;
+        /**
+          * Controls the visual size of the heading. Headings longer than 60 characters always use "h5" visually, regardless of this setting.
+          * @default "h3"
+         */
+        "headingVisualLevel"?: DuetTeaserHeadingVisualLevel;
+        /**
+          * Icon to display when no image is set. Not used if the image property is given.
+         */
+        "icon"?: DuetIconName;
+        /**
+          * Background color for the icon
+          * @default "color-background-accent-secondary"
+         */
+        "iconBackground"?: DuetColor;
+        /**
+          * Color for the icon
+          * @default "color-foreground-accent-secondary"
+         */
+        "iconColor"?: DuetIconColor;
+        /**
+          * Image URL. If provided, the icon property is ignored.
+         */
+        "image"?: string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
+        /**
+          * Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it.
+         */
+        "meta"?: string;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources"?: DuetSource[] | string;
+        /**
+          * Theme.
+          * @default ""
+         */
+        "theme"?: DuetTheme;
+        /**
+          * A destination to link to, rendered in the href attribute of a link. Makes the whole teaser act as a link and disables the links slot.
+         */
+        "url"?: string;
+    }
     interface DuetTextarea {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -14307,6 +14582,7 @@ declare namespace LocalJSX {
         "duet-tab": DuetTab;
         "duet-tab-group": DuetTabGroup;
         "duet-table": DuetTable;
+        "duet-teaser": DuetTeaser;
         "duet-textarea": DuetTextarea;
         "duet-toggle": DuetToggle;
         "duet-toolbar": DuetToolbar;
@@ -14419,6 +14695,7 @@ declare module "@stencil/core" {
             "duet-tab": LocalJSX.DuetTab & JSXBase.HTMLAttributes<HTMLDuetTabElement>;
             "duet-tab-group": LocalJSX.DuetTabGroup & JSXBase.HTMLAttributes<HTMLDuetTabGroupElement>;
             "duet-table": LocalJSX.DuetTable & JSXBase.HTMLAttributes<HTMLDuetTableElement>;
+            "duet-teaser": LocalJSX.DuetTeaser & JSXBase.HTMLAttributes<HTMLDuetTeaserElement>;
             "duet-textarea": LocalJSX.DuetTextarea & JSXBase.HTMLAttributes<HTMLDuetTextareaElement>;
             "duet-toggle": LocalJSX.DuetToggle & JSXBase.HTMLAttributes<HTMLDuetToggleElement>;
             "duet-toolbar": LocalJSX.DuetToolbar & JSXBase.HTMLAttributes<HTMLDuetToolbarElement>;

package/lib/types/utils/keyboard-utils.d.ts

@@ -14,6 +14,7 @@ export declare const isQuestionKey: (e: KeyboardEvent) => boolean;
 export declare const isEnterKey: (e: KeyboardEvent) => boolean;
 export declare const isKeyboardClick: (e: KeyboardEvent) => boolean;
 export declare const isNumber: (e: KeyboardEvent) => boolean;
+export declare const isCharacterInsertKey: (e: KeyboardEvent) => boolean;
 export declare const subscribeTabbingChange: (component: any) => void;
 export declare const unsubscribeTabbingChange: (component: any) => void;
 export declare const enableUserIsTabbing: () => void;

package/lib/types/utils/picture-utils.d.ts

@@ -7,9 +7,13 @@ export type DuetSource = {
 };
 export type DuetImg = {
     src: string;
+    class?: string;
     alt?: string;
     width?: string | number;
     height?: string | number;
+    role?: string;
+    loading?: "eager" | "lazy";
+    fetchpriority?: "high" | "low";
 };
 export type DuetPictureSource = {
     sources: DuetSource[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "10.5.0",
+  "version": "10.7.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -67,9 +67,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.67",
-    "@duetds/icons": "4.3.9",
-    "@duetds/tokens": "5.1.2",
+    "@duetds/fonts": "3.0.69",
+    "@duetds/icons": "4.3.11",
+    "@duetds/tokens": "5.1.4",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.36.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "136213c9d5eb4ccc8a2d492c8122e0572c665dc3"
+  "gitHead": "8d551fabdfe64b18b16ba0e247f6fbd99fc1f6aa"
 }