@duetds/components 9.18.0 → 9.19.1

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

@@ -1,5 +1,7 @@
+import { DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 export type IndicatorVariation = "new" | "change" | "error" | "success";
-export declare class DuetIndicator {
+export declare class DuetIndicator implements ThemeableComponent {
     private defaultLabels;
     element: HTMLElement;
     /**
@@ -12,6 +14,11 @@ export declare class DuetIndicator {
      * property.
      */
     accessibleLabel: string;
+    /**
+     * Theme of the component
+     */
+    theme: DuetTheme;
+    componentWillLoad(): void;
     private getAccessibleLabel;
     render(): any;
 }

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

@@ -56,5 +56,6 @@ export declare class DuetNotification implements ThemeableComponent {
      * @param options
      */
     setFocus(options?: FocusOptions): Promise<void>;
+    private getAriaLabelText;
     render(): any;
 }

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

@@ -33,6 +33,10 @@ export declare class DuetPromoCard implements ThemeableComponent {
      * Image. Example image is 512x341;
      */
     image: string;
+    /**
+     * Alt attribute text for the image. If not provided, image is assigned presentation role.
+     */
+    imageAlt: string;
     /**
      * The actual heading level used in the HTML markup.
      */

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

@@ -12,6 +12,10 @@ export declare class DuetSpinner implements ThemeableComponent {
      * Example: "color-primary". This property can also be set to "currentColor"
      * which forces the icon to use the CSS text color of parent element instead.
      * Useful when you want to control the color in stylesheet instead.
+     * Note that in earlier versions the color has defaulted to "gray-lightest", but
+     * in a future release it will change to undefined, so that the color will be
+     * the theme's primary. If you have relied on not defining color to result in
+     * white, it is advisable to update your code to explicitly define it.
      */
     color: DuetColor;
     /**
@@ -19,9 +23,7 @@ export declare class DuetSpinner implements ThemeableComponent {
      */
     size: DuetSpinnerSize;
     /**
-     * Theme of the spinner. When used this will override the color setting and
-     * use "primary" or "primary-turva" as the color depending on which theme
-     * is chosen.
+     * Theme of the spinner.
      */
     theme: DuetTheme;
     /**

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, DuetTextFontWeight, DuetTheme, DuetTooltipDirection } from "../../common-types";
+import { DuetLanguage, DuetMargin, DuetTextFontWeight, DuetTheme, DuetTooltipDirection } from "../../common-types";
 export type DuetTextareaEvent = {
     originalEvent?: Event;
     component: "duet-textarea";
@@ -19,11 +19,13 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
     private labelId;
     private errorId;
     private characterCountId;
+    private visuallyHiddenCounterDebounceMS;
     private nativeInput;
-    private hiddenCounterLabel;
     private isCaptionVisible;
     private disallowPatternRegex;
-    private counterLabelDefaults;
+    private charactersRemainingLabel;
+    language: DuetLanguage;
+    visuallyHiddenCounterText: string;
     /**
      * Reference to host HTML element.
      */
@@ -163,6 +165,7 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      * Value of the textarea.
      */
     value: string;
+    valueChange(newValue: string, oldValue: string): void;
     /**
      * A regular expression that matches any characters which should be *disallowed*.
      * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
@@ -175,8 +178,7 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      */
     counter: boolean;
     /**
-     * Accessible label for character counter.
-     * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+     * @deprecated, the visually hidden counter label is no longer changeable
      */
     counterLabel: string;
     /**
@@ -199,8 +201,7 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
      * Component lifecycle events.
      */
     componentWillLoad(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private updateVisuallyHiddenCounterText;
     /**
      * Component event handling.
      */
@@ -208,6 +209,11 @@ export declare class DuetTextarea implements ThemeableComponent, InputComponent,
     private handleChange;
     private handleBlur;
     private handleFocus;
+    /**
+     * When the character limit has been reached and key is pressed, switch the
+     * visually hidden label temprorily to empty so it is re-read.
+     */
+    private handleKeyDown;
     private getDescribedBy;
     /**
      * Sets focus on the specified `duet-textarea`. Use this method instead of the global

package/lib/types/components.d.ts

@@ -336,6 +336,10 @@ export namespace Components {
           * Image. Example image is 512x341;
          */
         "image": string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt": string;
         /**
           * Controls the margin of the component.
          */
@@ -631,6 +635,10 @@ export namespace Components {
           * Image to display in the card. The image aspect ratio can be anything as images are resized to fit 100% width of the card. Example: "https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg"
          */
         "image": string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt": string;
         /**
           * Controls the margin of the component.
          */
@@ -1819,6 +1827,10 @@ export namespace Components {
           * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of Hero Area the required image size is 1200x1200px (1:1 ratio). If this property is left empty, image will be hidden.
          */
         "image": string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt": string;
         /**
           * Image position.
          */
@@ -1923,6 +1935,10 @@ export namespace Components {
           * Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this property.
          */
         "accessibleLabel": string;
+        /**
+          * Theme of the component
+         */
+        "theme": DuetTheme;
         /**
           * The variation of the indicator. Typically "change" and "new" are used; "error" and "success" should be used only in special cases, as errors and succeses normally require a more prominent message.
          */
@@ -3534,6 +3550,10 @@ export namespace Components {
           * Image. Example image is 512x341;
          */
         "image": string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt": string;
         /**
           * Controls the margin of the component.
          */
@@ -4277,7 +4297,7 @@ export namespace Components {
          */
         "accessibleLabel": string;
         /**
-          * Color of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead.
+          * Color of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. Note that in earlier versions the color has defaulted to "gray-lightest", but in a future release it will change to undefined, so that the color will be the theme's primary. If you have relied on not defining color to result in white, it is advisable to update your code to explicitly define it.
          */
         "color": DuetColor;
         /**
@@ -4285,7 +4305,7 @@ export namespace Components {
          */
         "size": DuetSpinnerSize;
         /**
-          * Theme of the spinner. When used this will override the color setting and use "primary" or "primary-turva" as the color depending on which theme is chosen.
+          * Theme of the spinner.
          */
         "theme": DuetTheme;
     }
@@ -4704,8 +4724,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * Accessible label for character counter.
-          * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+          * @deprecated , the visually hidden counter label is no longer changeable
          */
         "counterLabel": string;
         /**
@@ -7092,6 +7111,10 @@ declare namespace LocalJSX {
           * Image. Example image is 512x341;
          */
         "image"?: string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt"?: string;
         /**
           * Controls the margin of the component.
          */
@@ -7391,6 +7414,10 @@ declare namespace LocalJSX {
           * Image to display in the card. The image aspect ratio can be anything as images are resized to fit 100% width of the card. Example: "https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg"
          */
         "image"?: string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt"?: string;
         /**
           * Controls the margin of the component.
          */
@@ -8664,6 +8691,10 @@ declare namespace LocalJSX {
           * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of Hero Area the required image size is 1200x1200px (1:1 ratio). If this property is left empty, image will be hidden.
          */
         "image"?: string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt"?: string;
         /**
           * Image position.
          */
@@ -8774,6 +8805,10 @@ declare namespace LocalJSX {
           * Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this property.
          */
         "accessibleLabel"?: string;
+        /**
+          * Theme of the component
+         */
+        "theme"?: DuetTheme;
         /**
           * The variation of the indicator. Typically "change" and "new" are used; "error" and "success" should be used only in special cases, as errors and succeses normally require a more prominent message.
          */
@@ -10345,6 +10380,10 @@ declare namespace LocalJSX {
           * Image. Example image is 512x341;
          */
         "image"?: string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt"?: string;
         /**
           * Controls the margin of the component.
          */
@@ -11082,7 +11121,7 @@ declare namespace LocalJSX {
          */
         "accessibleLabel"?: string;
         /**
-          * Color of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead.
+          * Color of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. Note that in earlier versions the color has defaulted to "gray-lightest", but in a future release it will change to undefined, so that the color will be the theme's primary. If you have relied on not defining color to result in white, it is advisable to update your code to explicitly define it.
          */
         "color"?: DuetColor;
         /**
@@ -11090,7 +11129,7 @@ declare namespace LocalJSX {
          */
         "size"?: DuetSpinnerSize;
         /**
-          * Theme of the spinner. When used this will override the color setting and use "primary" or "primary-turva" as the color depending on which theme is chosen.
+          * Theme of the spinner.
          */
         "theme"?: DuetTheme;
     }
@@ -11496,8 +11535,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * Accessible label for character counter.
-          * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+          * @deprecated , the visually hidden counter label is no longer changeable
          */
         "counterLabel"?: string;
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.18.0",
+  "version": "9.19.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -44,9 +44,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.52",
-    "@duetds/icons": "4.2.9",
-    "@duetds/tokens": "4.1.0",
+    "@duetds/fonts": "3.0.54",
+    "@duetds/icons": "4.2.11",
+    "@duetds/tokens": "4.1.2",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.23.0",
@@ -77,5 +77,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "5e8c35b57a90ad96ddca74b16ab0627e9b01da51"
+  "gitHead": "5273ead3d960248c9455812e9dc012cf8d15fc6f"
 }