@duetds/components 8.3.0 → 8.4.0

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

@@ -0,0 +1,270 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetToolbarItem {
+    constructor() {
+        this.theme = "";
+        this.variation = "default";
+        this.active = false;
+        this.url = undefined;
+        this.leadingIcon = undefined;
+        this.trailingIcon = undefined;
+        this.accessibleLabel = undefined;
+        this.accessibleExpanded = undefined;
+        this.accessiblePopup = "false";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        setTimeout(() => this.itemElement.focus(options), 200);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const TagName = this.url ? "a" : "button";
+        const variation = this.variation === "negative" ? "negative" : "white";
+        return (h(Host, { role: "listitem" }, h(TagName, { ref: element => (this.itemElement = element), class: {
+                "duet-toolbar-item": true,
+                "duet-theme-turva": this.theme === "turva",
+                active: this.active,
+                [variation]: true,
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null), this.trailingIcon && (h("duet-icon", { class: {
+                "trailing-icon": true,
+                rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
+            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : "x-small", color: "currentColor" })))));
+    }
+    static get is() { return "duet-toolbar-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-toolbar-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-toolbar-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "variation": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"default\" | \"negative\"",
+                    "resolved": "\"default\" | \"negative\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active"
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Url"
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left icon."
+                },
+                "attribute": "leading-icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "trailingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Right icon."
+                },
+                "attribute": "trailing-icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "accessibleExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+                },
+                "attribute": "accessible-expanded",
+                "reflect": true
+            },
+            "accessiblePopup": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-haspopup attribute to a button."
+                },
+                "attribute": "accessible-popup",
+                "reflect": true,
+                "defaultValue": "\"false\""
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus. Use this method instead of the global focus().",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.js

@@ -24,7 +24,7 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, null, h("a", { class: {
+        return (h(Host, { role: "listitem" }, h("a", { class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,

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

@@ -110,12 +110,12 @@ export class DuetTooltip {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.buttonActive = this.active;
     }
     async componentDidLoad() {
         if (Build.isServer) {
             return;
         }
-        this.buttonActive = this.active;
         this.arrowEl = await this.popupElement.getArrowElement();
         this.contentEl = await this.popupElement.getContentElement();
         this.updatePlacement();

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

@@ -38,12 +38,14 @@ function listenMouse() {
     window.removeEventListener("mousedown", listenMouse);
     window.addEventListener("keydown", listenKeys, false);
 }
-// start listening for tabbing (and mouse clicking through that) only if window is defined (i.e. not on server)
+// start listening for mouse clicking (and tabbing through that) only if window is defined (i.e. not on server)
 if (typeof window !== "undefined") {
-    window.addEventListener("keydown", listenKeys, false);
+    window.addEventListener("mousedown", listenMouse, false);
+    window.addEventListener("blur", () => notifySubscribers(true));
 }
 export const subscribeTabbingChange = component => {
     tabbingChangeSubscribers.add(component);
+    component.element.classList.add("user-is-tabbing");
 };
 export const unsubscribeTabbingChange = component => {
     tabbingChangeSubscribers.delete(component);

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

@@ -1,16 +1,47 @@
 /*!
  * Built with Duet Design System
  */
-export const slotElementCheck = (evt, component, requiredTagName) => {
-    var _a;
-    const slot = evt.target;
-    const slotDescription = slot.name ? `slot ${slot.name}` : "default slot";
-    const slotElement = slot.assignedElements()[0];
-    const slotTagName = slotElement === null || slotElement === void 0 ? void 0 : slotElement.tagName.toLowerCase();
-    const componentTagName = (_a = component.element) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase();
-    if (slotTagName && slotTagName !== requiredTagName) {
-        console.warn(`Duet warning:
-      Only <${requiredTagName}> should be used in <${componentTagName}> ${slotDescription}.
-      Found: <${slotTagName}>`);
+import { Build } from "@stencil/core";
+export const getElementsFromNamedSlot = (element, slotName) => {
+    const childElements = Array.from(Build.isServer ? element.children : element.querySelectorAll(":scope > *"));
+    return childElements.filter(el => el.matches(`[slot='${slotName}']`));
+};
+export const hasSlot = (element, slotName) => {
+    return getElementsFromNamedSlot(element, slotName).length > 0;
+};
+/**
+ * Check if the slotted element matches the given selector.
+ * If not, log a warning, or log a error and remove the element.
+ * This function only works with named slots.
+ *
+ * @param hostElement Host element
+ * @param slotName Name of the slot to check.
+ * @param selector Css selector the slotted element should match
+ * @param maxChildren Maximum number of children allowed in the slot. For no limit use 0. Default is 0.
+ * @param remove If true, remove the elements that don't match. Default is false.
+ */
+export const checkNamedSlotElement = (hostElement, slotName, selector, maxChildren = 0, remove = false) => {
+    const warnOrError = remove ? "error" : "warn";
+    const errors = [];
+    const slottedElements = getElementsFromNamedSlot(hostElement, slotName);
+    const nonRemovedElements = slottedElements.filter(el => {
+        if (el.matches(selector)) {
+            return true;
+        }
+        errors.push(`Only elements matcing selector "${selector}" may be used in slot ${slotName}, found:\n${el.outerHTML}`);
+        if (remove) {
+            el.remove();
+            return false;
+        }
+        return true;
+    });
+    if (maxChildren && nonRemovedElements.length > maxChildren) {
+        errors.push(`Only ${maxChildren} element${maxChildren > 1 ? "s" : ""} may be used in slot ${slotName}, found ${slottedElements.length}.`);
+        if (remove) {
+            nonRemovedElements.slice(maxChildren).forEach(el => el.remove());
+        }
+    }
+    if (errors.length > 0) {
+        console[warnOrError](`Duet ${warnOrError} in ${hostElement.tagName.toLowerCase()}:\n${errors.join("\n")}${remove ? `\nElement${errors.length > 1 ? "s" : ""} removed.` : ""}`);
     }
 };

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-96a8a294.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-f38ed7fe.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-5b8774b6.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-604f5020.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-2bc31f8b.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-e47bf090.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-5df55152.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-85712a7c.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { h } from './p-62c7d9d4.js';
-import { s as slotElementCheck } from './p-bb24a019.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-796edee6.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
 import { g as getColorByName } from './p-cbac9ed5.js';
-import { d as defineCustomElement$3 } from './p-997c1c72.js';
-import { d as defineCustomElement$2 } from './p-73904865.js';
+import { d as defineCustomElement$3 } from './p-b9f613f5.js';
+import { d as defineCustomElement$2 } from './p-0e584f41.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,
@@ -41,9 +41,10 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
-        this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
-        this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        this.hasDescriptionSlot = hasSlot(this.element, "description");
+        this.hasActionSlot = hasSlot(this.element, "action");
+        checkNamedSlotElement(this.element, "heading", "span");
     }
     /**
      * render() function
@@ -64,7 +65,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.size]: true,
-            }, 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("span", null, h$1("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasDescriptionSlot && (h$1("div", { class: "description", style: { color } }, h$1("slot", { name: "description" }))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("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("span", null, h$1("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { class: "description", style: { color } }, 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; }

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-5df55152.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-85712a7c.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-55634a0b.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-bec3a15c.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
-import { d as defineCustomElement$3 } from './p-73904865.js';
-import { d as defineCustomElement$2 } from './p-afe568e9.js';
+import { d as defineCustomElement$3 } from './p-0e584f41.js';
+import { d as defineCustomElement$2 } from './p-0b90bbc2.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>"};
 

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-5df55152.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-85712a7c.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { g as getLocaleString } from './p-2e36d5bf.js';
 import { g as getColorByName } from './p-cbac9ed5.js';

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

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

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-5df55152.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-85712a7c.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { s as slotElementCheck } from './p-bb24a019.js';
-import { d as defineCustomElement$2 } from './p-73904865.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-796edee6.js';
+import { d as defineCustomElement$2 } from './p-0e584f41.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.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-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 
@@ -22,7 +22,8 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class DuetCallout extends
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
+        this.hasAuthorSlot = hasSlot(this.element, "author");
+        checkNamedSlotElement(this.element, "author", "span");
     }
     /**
      * render() function
@@ -37,7 +38,7 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class DuetCallout extends
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { class: "container" }, h("duet-icon", { class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", null, h("slot", null)), this.hasAuthorSlot && (h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("slot", { name: "author", onSlotchange: ev => slotElementCheck(ev, this, "span") })))))));
+            } }, h("figure", { class: "container" }, h("duet-icon", { class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", null, h("slot", null)), this.hasAuthorSlot && (h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("slot", { name: "author" })))))));
     }
     get element() { return this; }
     static get style() { return duetCalloutCss; }

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-0233383b.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-54a40cbc.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-5df55152.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-85712a7c.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-55634a0b.js';
+import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-bec3a15c.js';
 import { s as sanitizeString } from './p-0e052642.js';
 import { g as getColorByName } from './p-cbac9ed5.js';
-import { d as defineCustomElement$3 } from './p-73904865.js';
-import { d as defineCustomElement$2 } from './p-afe568e9.js';
+import { d as defineCustomElement$3 } from './p-0e584f41.js';
+import { d as defineCustomElement$2 } from './p-0b90bbc2.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";
@@ -86,8 +86,9 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
         }
     }
     /**
-     * Sets focus on the specified `duet-card`. Use this method instead of the global
-     * `card.focus()`.
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
      */
     async setFocus(options) {
         if (this.nativeCard) {

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

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

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

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

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

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5df55152.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-85712a7c.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-55634a0b.js';
-import { d as defineCustomElement$2 } from './p-73904865.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-bec3a15c.js';
+import { d as defineCustomElement$2 } from './p-0e584f41.js';
 
 const duetChipCss = "*,*::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:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(207, 210, 212);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(207, 207, 209)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(101, 119, 135) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:8px 14px;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.875rem;font-weight:600;line-height:1rem;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{padding:0 !important;background:rgb(230, 242, 248);border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(205, 229, 241)}.duet-chip-container.duet-chip-filter-checked.chip-has-icon button,.duet-chip-container.duet-chip-filter-checked.chip-has-icon label,.duet-chip-container.duet-chip-radio-checked.chip-has-icon button,.duet-chip-container.duet-chip-radio-checked.chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(228, 228, 230)}.duet-chip-container .duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container .duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";