@duetds/components 9.17.0 → 9.19.0

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

@@ -167,6 +167,10 @@ export declare class DuetHero implements ThemeableComponent {
      * Image position.
      */
     imagePosition: "auto" | "center";
+    /**
+     * Alt attribute text for the image. If not provided, image is assigned presentation role.
+     */
+    imageAlt: string;
     /**
      * Style variation of the hero area.
      */

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.d.ts

@@ -252,7 +252,7 @@ export namespace Components {
          */
         "expandingTitle": string;
         /**
-          * Make alert focusable.
+          * @deprecated - if you need to set focus, use a focusable element inside Make alert focusable.
          */
         "focusable": boolean;
         /**
@@ -276,7 +276,7 @@ export namespace Components {
          */
         "position": "below-nav" | "content";
         /**
-          * Sets focus on the specified `duet-alert`. Works only when focusable property is set to true. Use this method instead of the global `button.focus()`.
+          * @deprecated - if you need to set focus, use a focusable element inside
          */
         "setFocus": (options?: FocusOptions) => Promise<void>;
         /**
@@ -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;
     }
@@ -7012,7 +7032,7 @@ declare namespace LocalJSX {
          */
         "expandingTitle"?: string;
         /**
-          * Make alert focusable.
+          * @deprecated - if you need to set focus, use a focusable element inside Make alert focusable.
          */
         "focusable"?: boolean;
         /**
@@ -7092,6 +7112,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 +7415,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 +8692,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 +8806,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 +10381,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 +11122,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 +11130,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;
     }

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

@@ -1,6 +1,7 @@
 export declare const getElementsFromNamedSlot: (element: HTMLElement, slotName: string) => Element[];
 export declare const getElementsFromDefaultSlot: (element: HTMLElement) => Element[];
 export declare const hasSlot: (element: HTMLElement, slotName?: string) => boolean;
+export declare const getSlotTextContent: (element: HTMLElement, slotName?: string, separator?: string) => string;
 /**
  * Check if the slotted element matches the given selector.
  * If not, log a warning, or log a error and remove the element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "9.17.0",
+  "version": "9.19.0",
   "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.51",
-    "@duetds/icons": "4.2.8",
-    "@duetds/tokens": "4.0.109",
+    "@duetds/fonts": "3.0.53",
+    "@duetds/icons": "4.2.10",
+    "@duetds/tokens": "4.1.1",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.23.0",
@@ -62,12 +62,12 @@
     "node-html-parser": "6.1.12",
     "npm-run-all": "4.1.5",
     "postcss-scss": "4.0.9",
-    "prettier": "2.8.4",
+    "prettier": "3.8.1",
     "puppeteer": "23.6.0",
     "sass": "1.59.2",
-    "stylelint": "14.6.1",
-    "stylelint-config-recess-order": "3.0.0",
-    "stylelint-config-sass-guidelines": "9.0.1",
+    "stylelint": "17.6.0",
+    "stylelint-config-recess-order": "7.7.0",
+    "stylelint-config-sass-guidelines": "13.0.0",
     "ts-jest": "29.2.5",
     "typescript": "5.5.4"
   },
@@ -77,5 +77,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "f49b2c4f8ee1425d5cec31cd17c7a549775b0ee4"
+  "gitHead": "b4c031f3c8d08ff78bb3dac0b20142340e3d4e2f"
 }

package/lib/dist-custom-elements/p-495059d2.js

@@ -1,78 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-a1ec8b34.js';
-import { D as DuetStatusLabels } from './p-b7a93f1c.js';
-import { i as inheritGlobalTheme } from './p-3757c660.js';
-import { g as getLocaleString } from './p-d9b2e80e.js';
-import { d as defineCustomElement$1 } from './p-5e60533d.js';
-
-const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{display:inline-block;width:100%;padding:4.4444444444px 12px 5.4444444444px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.75rem;font-style:normal;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fdecc9}.duet-badge.danger{background:#f7d2dc}.duet-badge.danger.duet-theme-turva{background:#f7d2dc}.duet-badge.success{background:#d6e6e1}.duet-badge.success.duet-theme-turva{background:#d6e6e1}.duet-badge.subtle{color:rgb(98, 121, 138);background:none;outline:1px solid rgb(212, 223, 229);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(113, 118, 132);background:none;outline-color:rgb(222, 224, 228)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#f9c153}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.subtle{border-color:rgb(181, 198, 208);outline-color:rgb(8, 42, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(199, 202, 207);outline-color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.default{color:#172a3b;background:#e8eaeb}:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.default{color:rgb(255, 255, 255);background:#172a3b}:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.subtle{outline-color:#172a3b}";
-const DuetBadgeStyle0 = duetBadgeCss;
-
-const DuetBadge = /*@__PURE__*/ proxyCustomElement(class DuetBadge extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.getVariationLabel = () => {
-            if (this.variation === "subtle") {
-                return "";
-            }
-            const variation = ["default", "success", "danger", "warning"].includes(this.variation)
-                ? this.variation
-                : "default";
-            return getLocaleString(DuetStatusLabels[variation]);
-        };
-        this.theme = "";
-        this.variation = "default";
-        this.background = "normal";
-        this.margin = "auto";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one of the class.
-     */
-    render() {
-        const backgroundClass = `background-${this.background}`;
-        return (h(Host, { key: '754fb06eaa60be4bed96d8fc8af86e01d0cbdae2', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: '5585a67dfe38a5169f8e8987e983ea86472dd1a5', class: {
-                "duet-badge": true,
-                [this.variation]: true,
-                [backgroundClass]: true,
-                "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-visually-hidden", { key: '1c2d4cfaa171c9c53929a02c01a7135a42e45e55' }, this.getVariationLabel()), h("slot", { key: 'e54ce9c1b957589d73bd49410b769add59650735' }))));
-    }
-    get element() { return this; }
-    static get style() { return DuetBadgeStyle0; }
-}, [1, "duet-badge", {
-        "theme": [1025],
-        "variation": [1],
-        "background": [1],
-        "margin": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-badge", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetBadge);
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetBadge as D, defineCustomElement as d };