@duetds/components 8.0.2 → 8.0.4

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -174,7 +174,7 @@ export class DuetTabGroup {
     this.tabs = this.getTabs();
     this.tabs.forEach((tab, index) => {
       tab.id = this.getTabId(index);
-      tab.setAttribute("aria-labelledby", this.getButtonId(index));
+      tab.setAttribute("accessible-labelled-by", this.getButtonId(index));
       if (tab.selected) {
         if (this.selected === undefined) {
           this.selected = index;
@@ -320,7 +320,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
             }
           }
@@ -561,7 +561,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
@@ -582,7 +582,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
@@ -603,7 +603,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
@@ -626,7 +626,7 @@ export class DuetTabGroup {
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           },

package/lib/collection/components/duet-table/duet-table.a11y.e2e.js

@@ -0,0 +1,35 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-table", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-table>
+          <table>
+            <thead>
+              <tr>
+                <th>Eläkeaika, v</th>
+                <th>Tavoite-eläke/kk</th>
+                <th>Eläkearvio/kk</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>55–65</td>
+                <td>1&nbsp;660,24&nbsp;€</td>
+                <td>1&nbsp;433,95&nbsp;€</td>
+              </tr>
+              <tr>
+                <td>65–75</td>
+                <td>553,42&nbsp;€</td>
+                <td>477,99&nbsp;€</td>
+              </tr>
+            </tbody>
+          </table>
+        </duet-table>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-textarea/duet-textarea.a11y.e2e.js

@@ -0,0 +1,28 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-textarea", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-textarea expand label="Textarea label" placeholder="Placeholder text"> </duet-textarea>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with input characters counter", async () => {
+    const result = await testWithAxe(`
+          <duet-textarea
+            expand
+            label="Textarea label"
+            placeholder="Placeholder text"
+            maxlength="100"
+            counter-label="Merkkejä jäljellä"
+            counter
+          >
+          </duet-textarea>
+          `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-textarea/duet-textarea.js

@@ -612,7 +612,7 @@ export class DuetTextarea {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "string | null",
           "resolved": "string",
           "references": {}
         },
@@ -757,7 +757,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
               "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
@@ -778,7 +778,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
               "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
@@ -799,7 +799,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
               "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }
@@ -820,7 +820,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
               "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
             }
           }

package/lib/collection/components/duet-toggle/duet-toggle.a11y.e2e.js

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-toggle", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-toggle label="Checked toggle" value="Some value" checked></duet-toggle>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-toggle/duet-toggle.js

@@ -402,7 +402,7 @@ export class DuetToggle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "string | null",
           "resolved": "string",
           "references": {}
         },
@@ -434,7 +434,7 @@ export class DuetToggle {
           "references": {
             "DuetToggleChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx",
               "id": "src/components/duet-toggle/duet-toggle.tsx::DuetToggleChangeEvent"
             }
           }

package/lib/collection/components/duet-toolbar/duet-toolbar.a11y.e2e.js

@@ -0,0 +1,31 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-toolbar", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-toolbar>
+          <div slot="left">
+            <duet-toolbar-link active>Henkilöasiakkaat</duet-toolbar-link>
+            <duet-toolbar-link href="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-link>
+            <duet-toolbar-dropdown icon="navigation-language">
+              <span slot="label">Yhtiöryhmä</span>
+              <duet-toolbar-dropdown-link>Valinta</duet-toolbar-dropdown-link>
+              <duet-toolbar-dropdown-link>Valinta</duet-toolbar-dropdown-link>
+            </duet-toolbar-dropdown>
+          </div>
+          <div slot="right">
+            <duet-toolbar-link id="search" href="#search" icon="form-search">Hae</duet-toolbar-link>
+            <duet-toolbar-dropdown icon="navigation-language">
+              <span slot="label">FI</span>
+              <duet-toolbar-dropdown-link active>Suomeksi</duet-toolbar-dropdown-link>
+              <duet-toolbar-dropdown-link>På Svenska</duet-toolbar-dropdown-link>
+            </duet-toolbar-dropdown>
+          </div>
+        </duet-toolbar>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-tooltip/duet-tooltip.a11y.e2e.js

@@ -0,0 +1,34 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, mergeRules, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+const disabledRules = {
+  // The component has a dedicated focus trap element
+  "aria-hidden-focus": { enabled: false },
+  // ShadowDOM isolates identifiers (needed for aria-controls) https://github.com/w3c/aria/issues/864
+  "aria-valid-attr-value": { enabled: false },
+};
+describe("[a11y] duet-tooltip", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-tooltip active>
+          Hello, I’m a tooltip! To close me you can hit ESC key, click the close button, or click the X button.
+        </duet-tooltip>
+      `, mergeRules(axeRunOptions, disabledRules));
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component in the input", async () => {
+    const result = await testWithAxe(`
+       <duet-input
+          label="Katuosoite"
+          placeholder="Kadunnimi 1 A 2"
+          tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
+          required
+          expand
+        ></duet-input>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-tooltip/duet-tooltip.js

@@ -409,7 +409,7 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
               "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
             }
           }

package/lib/collection/components/duet-tray/duet-tray.a11y.e2e.js

@@ -0,0 +1,22 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-tray", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-tray responsive="false" active>
+        <duet-grid alignment="center">
+          <duet-grid-item margin="none" fill>
+            <duet-paragraph size="small" margin="none">Hinta yhteensä</duet-paragraph>
+          </duet-grid-item>
+          <duet-grid-item margin="none">
+            <span class="duet-font-size-m duet-font-weight-semi-bold">189,90&nbsp;€</span>
+          </duet-grid-item>
+        </duet-grid>
+      </duet-tray>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-upload/duet-upload.js

@@ -991,7 +991,7 @@ export class DuetUpload {
           "references": {
             "XHRInternalMiddleWare": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::XHRInternalMiddleWare"
             }
           }
@@ -1377,7 +1377,7 @@ export class DuetUpload {
           "references": {
             "StringMap": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::StringMap"
             }
           }
@@ -1923,7 +1923,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadTableGroupName": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadTableGroupName"
             }
           }
@@ -1966,7 +1966,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -1987,7 +1987,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2008,7 +2008,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2029,7 +2029,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2050,7 +2050,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2071,7 +2071,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2092,7 +2092,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2113,7 +2113,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2134,7 +2134,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2155,7 +2155,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }
@@ -2176,7 +2176,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
               "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
             }
           }

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -142,7 +142,7 @@ export class DuetUploadItem {
           "references": {
             "ItemType": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
               "id": "src/components/duet-upload-item/duet-upload-item.tsx::ItemType"
             }
           }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.a11y.e2e.js

@@ -0,0 +1,15 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-visually-hidden", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-visually-hidden>
+          <duet-label>Visually hidden label</duet-label>
+        </duet-visually-hidden>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/utils/axe-core-utils.js

@@ -0,0 +1,37 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "./test-utils";
+const axeCorePath = require.resolve("axe-core");
+export const options = {
+  rules: {
+    "document-title": { enabled: false },
+    "html-has-lang": { enabled: false },
+    "landmark-one-main": { enabled: false },
+    "page-has-heading-one": { enabled: false },
+    region: { enabled: false },
+  },
+};
+export function formatViolations(violations = []) {
+  return violations.map(({ id, impact, description }) => ({
+    id,
+    impact,
+    description,
+  }));
+}
+export function mergeRules(axeRunOptions = {}, rules) {
+  return rules
+    ? {
+      rules: Object.assign(Object.assign({}, axeRunOptions.rules), rules),
+    }
+    : axeRunOptions;
+}
+export async function testWithAxe(markup, axeRunOptions = {}) {
+  const page = await createPage(markup);
+  await page.addScriptTag({ path: axeCorePath });
+  await new Promise(process.nextTick);
+  return page.evaluate(async (options) => {
+    // @ts-ignore
+    return await axe.run(options);
+  }, axeRunOptions);
+}

package/lib/collection/utils/picture-utils.js

@@ -0,0 +1,8 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetPicture = ({ img, sources }) => {
+  return (h("picture", null, sources &&
+    sources.map(source => (h("source", { srcSet: source.srcset, media: source.media, type: source.type, sizes: source.sizes }))), h("img", Object.assign({}, img))));
+};

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-0059a17c.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-8647adfe.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-2729945f.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-c35effa1.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-c0a4a783.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-b1f13be3.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,12 +1,21 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1db9b4e0.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-64c4e84f.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
+import { h } from './p-62c7d9d4.js';
+import { p as parsePossibleJSON } from './p-1a395a8d.js';
 import { g as getColorByName } from './p-e19d1e27.js';
-import { d as defineCustomElement$4 } from './p-5f426542.js';
-import { d as defineCustomElement$3 } from './p-95a50166.js';
-import { d as defineCustomElement$2 } from './p-c9499905.js';
+import { d as defineCustomElement$4 } from './p-6aed45b9.js';
+import { d as defineCustomElement$3 } from './p-d8d221c7.js';
+import { d as defineCustomElement$2 } from './p-0334f215.js';
+
+const DuetPicture = ({ img, sources }) => {
+  return (h("picture", null,
+    sources &&
+      sources.map(source => (h("source", { srcSet: source.srcset, media: source.media, type: source.type, sizes: source.sizes }))),
+    h("img", Object.assign({}, img))));
+};
 
 const duetBannerCss = "*,*::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:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 
@@ -23,6 +32,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
     this.textColor = "secondary";
     this.size = "auto";
     this.image = "";
+    this.sources = undefined;
     this.icon = "";
     this.headingLevel = "h2";
   }
@@ -45,11 +55,15 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
     const bannerStyles = {
       backgroundColor,
     };
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("aside", { class: {
+    const pictureSource = {
+      img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
+      sources: parsePossibleJSON(this.sources),
+    };
+    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("aside", { class: {
         "duet-banner": true,
         "duet-theme-turva": this.theme === "turva",
         [this.size]: true,
-      }, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" })), this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: "xx-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h2", margin: "none", color: this.textColor }, h("slot", { name: "heading" })))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("slot", { name: "description" })))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
+      }, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h$1("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: "xx-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h$1("div", { class: "content" }, this.hasHeadingSlot && (h$1("div", { class: "heading" }, h$1("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h2", margin: "none", color: this.textColor }, h$1("slot", { name: "heading" })))), this.hasDescriptionSlot && (h$1("div", { class: "description" }, h$1("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h$1("slot", { name: "description" })))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("slot", { name: "action" })))))));
   }
   get element() { return this; }
   static get style() { return duetBannerCss; }
@@ -62,6 +76,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
     "textColor": [1, "text-color"],
     "size": [1],
     "image": [1],
+    "sources": [1],
     "icon": [1],
     "headingLevel": [1, "heading-level"]
   }]);

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1db9b4e0.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-64c4e84f.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-4883df66.js';
-import { d as defineCustomElement$2 } from './p-95a50166.js';
+import { d as defineCustomElement$2 } from './p-d8d221c7.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 
-const duetBreadcrumbCss = "*,*::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;display:list-item;width:auto}.container{display:flex;gap:8px;align-items:center}.hide{display:none}.duet-breadrumbs-arrow{display:block;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;line-height:1.25;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
+const duetBreadcrumbCss = "*,*::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;display:list-item;width:auto}.container{display:flex;gap:8px;align-items:center}.hide{display:none}.duet-breadrumbs-arrow{display:block;align-items:center;justify-content:center;width:0.375rem;min-width:0.375rem;height:0.375rem;min-height:0.375rem}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;line-height:1.25;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 
 const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb extends H {
   constructor() {