@duetds/components 6.5.0 → 6.5.2

package/lib/collection/components/duet-input/duet-input.css

@@ -388,4 +388,70 @@ duet-caption:not(:last-of-type) {
   border-right-width: 0 !important;
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
+}
+
+.duet-input-variation-revealable {
+  position: relative;
+  width: 100%;
+}
+.duet-input-variation-revealable ::-ms-reveal {
+  display: none;
+}
+.duet-input-variation-revealable .duet-input-relative {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+  border: 1px solid #909599;
+  border-radius: 4px;
+  box-shadow: initial;
+  transition: box-shadow 150ms ease, border 150ms ease;
+}
+.duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
+  border-color: #747475;
+}
+.duet-input-variation-revealable .duet-input-relative duet-button {
+  z-index: 250;
+  margin-bottom: 0;
+}
+.duet-input-variation-revealable .duet-input-relative .duet-input {
+  border-width: 0 !important;
+}
+.duet-input-variation-revealable .duet-input-relative .duet-input:focus, .duet-input-variation-revealable .duet-input-relative .duet-input:hover {
+  border-width: 0 !important;
+  box-shadow: none !important;
+}
+.duet-input-variation-revealable.disabled .duet-input-relative {
+  background: #f5f8fa;
+  border-color: #e1e3e6;
+  box-shadow: none;
+}
+.duet-input-variation-revealable.has-error .duet-input-relative {
+  border-color: #de2362;
+}
+.duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative {
+  border-color: #e02a0d;
+}
+.duet-input-variation-revealable.has-focus .duet-input-relative {
+  border-color: #0077b3;
+  box-shadow: 0 0 0 1px #0077b3;
+}
+.duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
+  border-color: #171c3a;
+  box-shadow: 0 0 0 1px #171c3a;
+}
+.duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #909599;
+}
+.duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #747475;
+}
+.duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #de2362;
+}
+.duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #e02a0d;
 }

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
-import { isEscapeKey } from "../../utils/keyboard-utils";
+import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
 const icons = {
   search: searchIcon,
@@ -35,6 +35,26 @@ export class DuetInput {
       fi: "Aika",
       sv: "Tid",
     });
+    this.showPasswordLabel = getLocaleString({
+      en: "Show password",
+      fi: "Näytä salasana",
+      sv: "Visa lösenord",
+    });
+    this.hidePasswordLabel = getLocaleString({
+      en: "Hide password",
+      fi: "Piilota salasana",
+      sv: "Dölj lösenord",
+    });
+    this.passwordShownAriaAnnouncement = getLocaleString({
+      en: "Password is shown",
+      fi: "Salasana näytetään",
+      sv: "Lösenordet visas",
+    });
+    this.passwordHiddenAriaAnnouncement = getLocaleString({
+      en: "Password is hidden",
+      fi: "Salasana on piilotettu",
+      sv: "Lösenordet är dolt",
+    });
     /**
      * Component event handling.
      */
@@ -50,6 +70,7 @@ export class DuetInput {
       });
     };
     this.onBlur = (ev) => {
+      this.isFocused = false;
       this.duetBlur.emit({
         originalEvent: ev,
         value: this.value,
@@ -57,6 +78,7 @@ export class DuetInput {
       });
     };
     this.onFocus = (ev) => {
+      this.isFocused = true;
       this.duetFocus.emit({
         originalEvent: ev,
         value: this.value,
@@ -70,8 +92,8 @@ export class DuetInput {
         component: "duet-input",
       });
     };
-    /** Private functions
-     *
+    /**
+     * Private functions
      */
     this.getDescribedBy = () => {
       let describedBy = "";
@@ -98,8 +120,22 @@ export class DuetInput {
       if (isEscapeKey(event) && this.clear) {
         this.handleClearClick(event);
       }
+      if (isEnterKey(event) && this.variation === "revealable") {
+        this.isPasswordRevealed = false;
+      }
       return event;
     };
+    this.togglePasswordRevealed = () => {
+      this.isPasswordRevealed = !this.isPasswordRevealed;
+    };
+    this.getInputType = () => {
+      if (this.variation === "revealable") {
+        return this.isPasswordRevealed ? "text" : "password";
+      }
+      return this.type;
+    };
+    this.isPasswordRevealed = false;
+    this.isFocused = false;
     this.accessibleActiveDescendant = undefined;
     this.accessibleAutocomplete = undefined;
     this.accessibleControls = undefined;
@@ -173,6 +209,13 @@ export class DuetInput {
     this.disallowedPatternChange();
     this.isCaptionVisible = !!this.caption;
   }
+  componentDidLoad() {
+    if (this.variation === "revealable" && this.nativeInput.form) {
+      this.nativeInput.form.addEventListener("submit", () => {
+        this.isPasswordRevealed = false;
+      });
+    }
+  }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -248,19 +291,21 @@ export class DuetInput {
             (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
         "has-error": !!this.error,
         "has-clear": this.clear,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
+        "has-focus": this.isFocused,
+        disabled: this.disabled,
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
         "duet-input": true,
         disabled: this.disabled,
         "is-number": this.component === "number",
         "is-date": this.component === "date",
       }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy
         ? `${this.errorId} ${this.labelId}  ${this.accessibleLabelledBy}`
-        : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
+        : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
         "duet-input-clear-icon": true,
         "duet-input-clear-icon-single": !hasInputIcon,
         "duet-input-clear-icon-double": !!this.icon,
         "duet-input-clear-icon-button": this.variation === "button",
-      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed ? this.hidePasswordLabel : this.showPasswordLabel, margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed ? this.passwordShownAriaAnnouncement : this.passwordHiddenAriaAnnouncement))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }
@@ -666,7 +711,7 @@ export class DuetInput {
         "mutable": false,
         "complexType": {
           "original": "DuetVariationType",
-          "resolved": "\"button\" | \"default\"",
+          "resolved": "\"button\" | \"default\" | \"revealable\"",
           "references": {
             "DuetVariationType": {
               "location": "local"
@@ -677,7 +722,7 @@ export class DuetInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variation of button."
+          "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
         },
         "attribute": "variation",
         "reflect": false,
@@ -997,6 +1042,12 @@ export class DuetInput {
       }
     };
   }
+  static get states() {
+    return {
+      "isPasswordRevealed": {},
+      "isFocused": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetInput",

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

@@ -19,7 +19,6 @@ export class DuetMenuBarDropdownLink {
     this.theme = "";
     this.href = "#";
     this.icon = undefined;
-    this.caret = false;
   }
   /**
    * Component lifecycle events.
@@ -110,24 +109,6 @@ export class DuetMenuBarDropdownLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
-      },
-      "caret": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caret"
-        },
-        "attribute": "caret",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

package/lib/collection/components/duet-slideout/duet-slideout.css

@@ -29,6 +29,11 @@
   opacity: 0;
   transition: top 0.3s ease-in, opacity 0.3s ease-in;
 }
+@media (min-width: 62em) {
+  :host slot:not([name=toggle])::slotted(*) {
+    transition: none;
+  }
+}
 
 :host([open]) slot:not([name=toggle])::slotted(*) {
   top: 0;
@@ -40,6 +45,34 @@
   align-items: center;
   height: 100%;
 }
+.duet-slideout .desktop-bg {
+  display: none;
+}
+@media (min-width: 62em) {
+  .duet-slideout .desktop-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 400;
+    display: block;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    background: rgba(0, 41, 77, 0.6);
+    opacity: 0;
+    transition: 600ms ease;
+  }
+  .duet-slideout .desktop-bg:not(.hidden) {
+    visibility: visible;
+    opacity: 1;
+    transition: 600ms ease;
+  }
+}
+@media (min-width: 62em) {
+  .duet-slideout.duet-theme-turva .desktop-bg {
+    background: rgba(23, 28, 58, 0.6);
+  }
+}
 .duet-slideout .dialog {
   position: fixed;
   top: 0;
@@ -57,15 +90,21 @@
     right: 0;
     left: auto;
     width: 500px;
-    transition: right 600ms ease;
+    transition: right 300ms ease;
+    transition-delay: 0s;
   }
 }
 .duet-slideout .dialog .top {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
 }
+.duet-slideout .dialog .top button {
+  cursor: pointer;
+}
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
 }
@@ -83,7 +122,7 @@
 @media (min-width: 62em) {
   .duet-slideout .dialog.hidden {
     right: -500px;
-    visibility: visible;
+    transition: 300ms ease;
   }
 }
 .duet-slideout.duet-theme-turva button {

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

@@ -4,6 +4,7 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
+import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
     this.toggleMenu = (e) => {
@@ -21,7 +22,7 @@ export class DuetSlideout {
       }
       else {
         setTimeout(() => {
-          this.openButton.focus();
+          this.openButton.setFocus();
         }, 200);
       }
     };
@@ -30,7 +31,7 @@ export class DuetSlideout {
     };
     this.theme = "";
     this.open = false;
-    this.icon = "";
+    this.background = "";
   }
   /**
    * Toggles the slideout.
@@ -71,10 +72,18 @@ export class DuetSlideout {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
+    const styles = {
+      background: getColorByName(this.background, this.theme),
+    };
+    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { class: {
+        "desktop-bg": true,
+        hidden: !this.open,
+      }, onClick: () => {
+        this.open = false;
+      } }), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
         dialog: true,
         hidden: !this.open,
-      } }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
         "slideout-close": true,
         active: this.open,
       }, onClick: this.onClick }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), h("div", { id: "menubar", role: "menubar", class: {
@@ -136,14 +145,14 @@ export class DuetSlideout {
         "reflect": true,
         "defaultValue": "false"
       },
-      "icon": {
+      "background": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "DuetIconName",
+          "original": "DuetColor",
           "resolved": "string",
           "references": {
-            "DuetIconName": {
+            "DuetColor": {
               "location": "import",
               "path": "../../common-types"
             }
@@ -153,9 +162,9 @@ export class DuetSlideout {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon name from Duet to display."
+          "text": "Custom color to be used for a circular background, as a design token entered\nin camelCase or kebab-case.."
         },
-        "attribute": "icon",
+        "attribute": "background",
         "reflect": false,
         "defaultValue": "\"\""
       }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css

@@ -77,4 +77,16 @@
 .duet-slideout-link.large {
   font-size: 1.5rem;
   font-weight: 800;
+}
+
+slot[name=description]::slotted(*) {
+  display: block;
+  padding: 8px 0 0;
+  font-size: 1rem;
+  font-size: 1.25;
+  font-weight: 400;
+  color: #657787;
+}
+.duet-theme-turva slot[name=description]::slotted(*) {
+  color: #444445;
 }

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

@@ -10,6 +10,7 @@ export class DuetSlideoutLink {
     this.href = "#";
     this.icon = undefined;
     this.size = "inherit";
+    this.caret = false;
     this.menuItem = false;
   }
   /**
@@ -28,7 +29,7 @@ export class DuetSlideoutLink {
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
         [this.size]: true,
-      }, href: this.href, role: this.menuItem && "menuitem" }, this.icon && (h("duet-icon", { name: this.icon, color: this.menuItem && "currentColor", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("span", null, h("slot", null)))));
+      }, href: this.href, role: this.menuItem && "menuitem" }, this.icon && (h("duet-icon", { name: this.icon, color: this.menuItem && "currentColor", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && h("duet-icon", { name: "action-arrow-right", color: "primary", size: "x-small", margin: "none" }))));
   }
   static get is() { return "duet-slideout-link"; }
   static get encapsulation() { return "shadow"; }
@@ -133,12 +134,30 @@ export class DuetSlideoutLink {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size. Small, medium or large."
+          "text": "Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot."
         },
         "attribute": "size",
         "reflect": true,
         "defaultValue": "\"inherit\""
       },
+      "caret": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caret"
+        },
+        "attribute": "caret",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "menuItem": {
         "type": "boolean",
         "mutable": false,

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -64,25 +64,25 @@
   justify-content: space-between;
   width: 100%;
 }
-.duet-slideout-panel .link.active .label-text {
-  position: relative;
-}
-.duet-slideout-panel .link.active .label-text.small {
+.duet-slideout-panel .link .label-text.small {
   font-size: 1rem;
   font-weight: 600;
 }
-.duet-slideout-panel .link.active .label-text.small span::after {
-  height: 1px;
-  transform: translateY(1px);
-}
-.duet-slideout-panel .link.active .label-text.medium {
+.duet-slideout-panel .link .label-text.medium {
   font-size: 1.25rem;
   font-weight: 600;
 }
-.duet-slideout-panel .link.active .label-text.large {
+.duet-slideout-panel .link .label-text.large {
   font-size: 1.5rem;
   font-weight: 800;
 }
+.duet-slideout-panel .link.active .label-text {
+  position: relative;
+}
+.duet-slideout-panel .link.active .label-text.small::after {
+  height: 1px;
+  transform: translateY(1px);
+}
 .duet-slideout-panel .link.active .label-text::after {
   position: absolute;
   top: auto;
@@ -162,18 +162,13 @@
   background: #f5f5f7;
 }
 
-slot {
+slot:not([name=label]) {
   --active-height: 1px;
   --active-translate-y: translateY(1px);
   font-size: 1rem;
   font-weight: 600;
   color: #00294d;
 }
-.duet-theme-turva slot {
+.duet-theme-turva slot:not([name=label]) {
   color: #940925;
-}
-
-slot[name=label] {
-  font-size: 1.5rem;
-  font-weight: 800;
 }

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-6f9f5b04.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-a623d58c.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-9038500b.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-c933203e.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-a213fc78.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-68604dde.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-f61f0fcc.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-4cf27349.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-1772b598.js';
+import { d as defineCustomElement$2 } from './p-246bd550.js';
 
 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:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}: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}";
 

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-f61f0fcc.js';
+import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-4cf27349.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$2 } from './p-1772b598.js';
+import { d as defineCustomElement$2 } from './p-246bd550.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-button.js

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

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-86994a58.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-98ae1730.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, b as Host } from './p-f61f0fcc.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-4cf27349.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-535ce3ec.js';
-import { d as defineCustomElement$3 } from './p-1772b598.js';
-import { d as defineCustomElement$2 } from './p-26fb2022.js';
+import { d as defineCustomElement$3 } from './p-246bd550.js';
+import { d as defineCustomElement$2 } from './p-d7d50d4f.js';
 
 var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
 

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-6709c2d5.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-15968e9a.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;