@duetds/components 10.6.0 → 10.8.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";
@@ -386,6 +388,10 @@ export namespace Components {
           * @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"
@@ -730,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"
@@ -1292,7 +1302,7 @@ export namespace Components {
     interface DuetCombobox {
         /**
           * Defaults for the accessible labels for the select items
-          * @default {     en: {       heading: "Select:",       item: "{name}",       itemFiltered: "{name}, {hiddenItems} filtered",     },     fi: {       heading: "Valitse:",       item: "{name}",       itemFiltered: "{name}, {hiddenItems} suodatettu",     },     sv: {       heading: "Välj:",       item: "{name}",       itemFiltered: "{name}, {hiddenItems} filtrerade",     },   }
+          * @default {     en: {       heading: "Select:",       item: "{name}",       activeItemLabel: "{name}, {current} / {total}",       optionsFound: "{optionCount} options found",       noOptionsFound: "No options found",     },     fi: {       heading: "Valitse:",       item: "{name}",       activeItemLabel: "{name}, {current} / {total}",       optionsFound: "{optionCount}, valintaa löydetty", // extra comma to prevent unwanted conjugation       noOptionsFound: "Yhtään valintaa ei löydy",     },     sv: {       heading: "Välj:",       item: "{name}",       activeItemLabel: "{name}, {current} / {total}",       optionsFound: "{optionCount} val hittades",       noOptionsFound: "Inget val hittades",     },   }
          */
         "accessibleLabelDefaults": DuetLangObject | string;
         /**
@@ -1386,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"
@@ -1453,8 +1467,8 @@ export namespace Components {
          */
         "direction": DuetDatePickerDirection;
         /**
-          * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
-          * @default false
+          * @deprecated changed from opt-out to opt-in with attribute `enable-built-in-errors`
+          * @default true
          */
         "disableBuiltInErrors": boolean;
         /**
@@ -1482,6 +1496,11 @@ export namespace Components {
           * @default false
          */
         "echoPlaceholder": boolean;
+        /**
+          * Date picker can use built-in error messages for invalid or missing entries if the application does not handle those.
+          * @default false
+         */
+        "enableBuiltInErrors": boolean;
         /**
           * Display the date picker input in error state along with an error message.
           * @default ""
@@ -1867,7 +1886,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"
@@ -2180,6 +2200,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"
@@ -2431,7 +2456,7 @@ export namespace Components {
          */
         "echoPlaceholder": boolean;
         /**
-          * Display the input in error state along with an error message.
+          * Display the input in error state along with an error message. If input is disabled or readonly, error is ignored.
           * @default ""
          */
         "error": string;
@@ -2534,6 +2559,11 @@ export namespace Components {
           * Hint text to display.
          */
         "placeholder": string;
+        /**
+          * Makes the input component not mutable, meaning the user cannot edit the control. The user can otherwise interact, e.g. by selecting the content and copying it. Due to differences in different browsers' and screen readers' implementations it is strongly advisable to use this only with type="text".
+          * @default false
+         */
+        "readonly": boolean;
         /**
           * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
           * @default false
@@ -3512,6 +3542,10 @@ export namespace Components {
           * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
          */
         "accessibleSubtractDefaults": DuetLangObject | string;
+        /**
+          * Caption shown below label, also included in aria-describedby
+         */
+        "caption": string;
         /**
           * Makes the number input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
           * @default false
@@ -4214,6 +4248,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"
@@ -5544,6 +5582,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.
@@ -5615,7 +5720,7 @@ export namespace Components {
          */
         "echoPlaceholder": boolean;
         /**
-          * Display the textarea in error state along with an error message.
+          * Display the textarea in error state along with an error message. If the textarea is disabled or readonly, the error is ignored.
           * @default ""
          */
         "error": string;
@@ -5667,6 +5772,11 @@ export namespace Components {
           * Hint text to display.
          */
         "placeholder": string;
+        /**
+          * Makes the textarea component not mutable, meaning the user cannot edit the control. The user can otherwise interact, e.g. by selecting the content and copying it.
+          * @default false
+         */
+        "readonly": boolean;
         /**
           * Set whether the textarea is required or not. Please note that this is required for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
           * @default false
@@ -7672,6 +7782,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;
@@ -7911,6 +8027,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;
@@ -8169,6 +8286,10 @@ declare namespace LocalJSX {
           * @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"
@@ -8517,6 +8638,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"
@@ -9093,7 +9218,7 @@ declare namespace LocalJSX {
     interface DuetCombobox {
         /**
           * Defaults for the accessible labels for the select items
-          * @default {     en: {       heading: "Select:",       item: "{name}",       itemFiltered: "{name}, {hiddenItems} filtered",     },     fi: {       heading: "Valitse:",       item: "{name}",       itemFiltered: "{name}, {hiddenItems} suodatettu",     },     sv: {       heading: "Välj:",       item: "{name}",       itemFiltered: "{name}, {hiddenItems} filtrerade",     },   }
+          * @default {     en: {       heading: "Select:",       item: "{name}",       activeItemLabel: "{name}, {current} / {total}",       optionsFound: "{optionCount} options found",       noOptionsFound: "No options found",     },     fi: {       heading: "Valitse:",       item: "{name}",       activeItemLabel: "{name}, {current} / {total}",       optionsFound: "{optionCount}, valintaa löydetty", // extra comma to prevent unwanted conjugation       noOptionsFound: "Yhtään valintaa ei löydy",     },     sv: {       heading: "Välj:",       item: "{name}",       activeItemLabel: "{name}, {current} / {total}",       optionsFound: "{optionCount} val hittades",       noOptionsFound: "Inget val hittades",     },   }
          */
         "accessibleLabelDefaults"?: DuetLangObject | string;
         /**
@@ -9186,6 +9311,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"
@@ -9257,8 +9386,8 @@ declare namespace LocalJSX {
          */
         "direction"?: DuetDatePickerDirection;
         /**
-          * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
-          * @default false
+          * @deprecated changed from opt-out to opt-in with attribute `enable-built-in-errors`
+          * @default true
          */
         "disableBuiltInErrors"?: boolean;
         /**
@@ -9286,6 +9415,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "echoPlaceholder"?: boolean;
+        /**
+          * Date picker can use built-in error messages for invalid or missing entries if the application does not handle those.
+          * @default false
+         */
+        "enableBuiltInErrors"?: boolean;
         /**
           * Display the date picker input in error state along with an error message.
           * @default ""
@@ -9695,7 +9829,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"
@@ -10036,6 +10171,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"
@@ -10271,7 +10411,7 @@ declare namespace LocalJSX {
          */
         "echoPlaceholder"?: boolean;
         /**
-          * Display the input in error state along with an error message.
+          * Display the input in error state along with an error message. If input is disabled or readonly, error is ignored.
           * @default ""
          */
         "error"?: string;
@@ -10382,6 +10522,11 @@ declare namespace LocalJSX {
           * Hint text to display.
          */
         "placeholder"?: string;
+        /**
+          * Makes the input component not mutable, meaning the user cannot edit the control. The user can otherwise interact, e.g. by selecting the content and copying it. Due to differences in different browsers' and screen readers' implementations it is strongly advisable to use this only with type="text".
+          * @default false
+         */
+        "readonly"?: boolean;
         /**
           * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
           * @default false
@@ -11302,6 +11447,10 @@ declare namespace LocalJSX {
           * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"}
          */
         "accessibleSubtractDefaults"?: DuetLangObject | string;
+        /**
+          * Caption shown below label, also included in aria-describedby
+         */
+        "caption"?: string;
         /**
           * Makes the number input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.
           * @default false
@@ -12011,6 +12160,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"
@@ -13293,6 +13446,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.
@@ -13364,7 +13580,7 @@ declare namespace LocalJSX {
          */
         "echoPlaceholder"?: boolean;
         /**
-          * Display the textarea in error state along with an error message.
+          * Display the textarea in error state along with an error message. If the textarea is disabled or readonly, the error is ignored.
           * @default ""
          */
         "error"?: string;
@@ -13432,6 +13648,11 @@ declare namespace LocalJSX {
           * Hint text to display.
          */
         "placeholder"?: string;
+        /**
+          * Makes the textarea component not mutable, meaning the user cannot edit the control. The user can otherwise interact, e.g. by selecting the content and copying it.
+          * @default false
+         */
+        "readonly"?: boolean;
         /**
           * Set whether the textarea is required or not. Please note that this is required for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
           * @default false
@@ -14399,6 +14620,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;
@@ -14511,6 +14733,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/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.6.0",
+  "version": "10.8.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.68",
-    "@duetds/icons": "4.3.10",
-    "@duetds/tokens": "5.1.3",
+    "@duetds/fonts": "3.0.70",
+    "@duetds/icons": "4.3.12",
+    "@duetds/tokens": "5.1.5",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.36.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "572d3c821f7c9a3d07ebba40c15cf13221523411"
+  "gitHead": "412579b44346f339a127c6e63b60236ff2dec291"
 }