@duetds/components 6.9.5 → 6.9.6

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

@@ -0,0 +1,51 @@
+: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 .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 {
+  color: rgb(23, 28, 58);
+}
+.duet-callout.duet-m-0 {
+  margin: 0 !important;
+}

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

@@ -0,0 +1,98 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+/**
+ * @slot default - Slot for text.
+ * @slot author - Slot for author information.
+ */
+export class DuetCallout {
+  constructor() {
+    this.theme = "";
+    this.margin = "auto";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
+    </svg>
+    `;
+    return (h(Host, null, h("div", { class: {
+        "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" }), h("blockquote", null, h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none" }, h("slot", null))), h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("span", null, h("slot", { name: "author" })))))));
+  }
+  static get is() { return "duet-callout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-callout.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-callout.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the caption."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      }
+    };
+  }
+}

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

@@ -103,7 +103,7 @@
   border-radius: 4px;
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-:host(.user-is-tabbing.duet-theme-turva) .duet-collapsible-heading:focus {
+:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 

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

@@ -3,7 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getColorByName } from "../../utils/token-utils";
+import { getColorByName, rgbaColorFromRgb } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
   constructor() {
@@ -16,6 +16,8 @@ export class DuetIcon {
     this.responsive = true;
     this.color = "";
     this.background = "";
+    this.backgroundOpacity = 1;
+    this.backgroundRotation = 0;
     this.size = "medium";
     this.outline = "";
     this.shape = "circle";
@@ -57,11 +59,20 @@ export class DuetIcon {
     const color = this.color === "currentColor"
       ? "currentColor"
       : getColorByName(this.color, this.theme) || getColorByName(this.outline, this.theme);
-    const styles = {
-      color,
-      background: getColorByName(this.background, this.theme),
-      "border-color": getColorByName(this.outline, this.theme),
-    };
+    const backgroundRotationStyles = this.backgroundRotation
+      ? {
+        transform: `rotate(${this.backgroundRotation}deg)`,
+        "transform-origin": "center center",
+      }
+      : {};
+    const styles = Object.assign({ color, background: rgbaColorFromRgb(getColorByName(this.background, this.theme), this.backgroundOpacity), "border-color": getColorByName(this.outline, this.theme) }, backgroundRotationStyles);
+    const iconRotationStyles = this.backgroundRotation
+      ? {
+        transform: `rotate(-${this.backgroundRotation}deg)`,
+        "transform-origin": "center center",
+      }
+      : {};
+    const iconStyles = Object.assign({}, iconRotationStyles);
     const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",
@@ -77,7 +88,7 @@ export class DuetIcon {
         [shapeStyle]: true,
         rotated: this.shape === "brand-rotated" && this.theme !== "turva",
         "duet-icon-not-responsive": !this.responsive,
-      } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent }))));
+      } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent, style: iconStyles }))));
   }
   static get is() { return "duet-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -260,6 +271,48 @@ export class DuetIcon {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "backgroundOpacity": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Opacity of the background. Possible value in between 0-1. For example 0.75."
+            }],
+          "text": ""
+        },
+        "attribute": "background-opacity",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "backgroundRotation": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Rotation of the background. Possible value in between 0-360. For example 30."
+            }],
+          "text": ""
+        },
+        "attribute": "background-rotation",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "size": {
         "type": "string",
         "mutable": false,

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -28,6 +28,12 @@
   align-items: center;
   justify-content: center;
   background: rgb(255, 255, 255);
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar {
+    box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
+  }
 }
 .duet-menu-bar .top {
   display: none;
@@ -148,6 +154,12 @@
 }
 .duet-menu-bar.duet-theme-turva {
   background: rgb(255, 255, 255);
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar.duet-theme-turva {
+    box-shadow: 0 3px 6px 0 rgba(117, 117, 117, 0.15);
+  }
 }
 
 .center {

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -92,11 +92,29 @@
     display: none;
   }
 }
-.duet-submenu-bar .items {
+.duet-submenu-bar .menu-container {
   position: absolute;
   z-index: 399;
   width: 100%;
-  max-height: 1000px;
+}
+.duet-submenu-bar .menu-container.hidden {
+  max-height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar .menu-container, .duet-submenu-bar .menu-container.hidden {
+    position: static;
+    z-index: auto;
+    max-height: unset;
+    overflow: visible;
+    visibility: visible;
+  }
+}
+.duet-submenu-bar .items {
+  width: 100%;
+  height: 70vh;
+  overflow-y: scroll;
   visibility: visible;
   background: rgb(243, 249, 252);
   border-bottom: 1px solid rgb(207, 210, 212);
@@ -124,11 +142,22 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    height: auto;
     max-height: unset;
     overflow: visible;
     visibility: visible;
     border: 0;
-    transition: none;
+  }
+}
+.duet-submenu-bar .mobile-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 41, 77, 0.6);
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar .mobile-background {
+    display: none;
   }
 }
 .duet-submenu-bar.duet-theme-turva {
@@ -140,4 +169,15 @@
 }
 .duet-submenu-bar.duet-theme-turva .items {
   background: rgb(245, 245, 247);
+}
+.duet-submenu-bar.duet-theme-turva .mobile-background {
+  background: rgba(23, 28, 58, 0.6);
+}
+.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
+    box-shadow: 0 3px 6px 0 rgba(117, 117, 117, 0.15);
+  }
 }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -3,6 +3,7 @@
  */
 import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetSubmenuBar {
   constructor() {
@@ -11,15 +12,29 @@ export class DuetSubmenuBar {
     this.changeAriaProperties = () => {
       if (this.mql[0].matches) {
         this.mobile = false;
+        enableBodyScroll(this.element);
       }
       else {
         this.mobile = true;
+        if (!this.bodyScroll) {
+          disableBodyScroll(this.element, { reserveScrollBarGap: true });
+        }
       }
     };
     this.onClick = () => {
-      this.open = !this.open;
+      const open = this.open;
+      if (!open) {
+        this.bodyScroll = false;
+        disableBodyScroll(this.element, { reserveScrollBarGap: true });
+      }
+      else {
+        enableBodyScroll(this.element);
+        this.bodyScroll = true;
+      }
+      this.open = !open;
     };
     this.mobile = true;
+    this.bodyScroll = false;
     this.theme = "";
     this.open = false;
     this.accessibleLabel = undefined;
@@ -67,10 +82,13 @@ export class DuetSubmenuBar {
   render() {
     return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("div", { class: "shadow-container", role: "presentation" }, h("div", { class: "top-shadow" })), h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { class: {
+        "menu-container": true,
+        hidden: !this.open,
+      }, role: "presentation" }, h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
         items: true,
         hidden: !this.open,
-      } }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null))))));
+      } }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null))), h("div", { class: "mobile-background" })))));
   }
   static get is() { return "duet-submenu-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -148,7 +166,8 @@ export class DuetSubmenuBar {
   }
   static get states() {
     return {
-      "mobile": {}
+      "mobile": {},
+      "bodyScroll": {}
     };
   }
   static get methods() {

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

@@ -130,6 +130,9 @@ export class DuetUpload {
         const fileItem = this.files.get(item);
         fileItem[key] = value;
         this.files.set(item, fileItem);
+        if (this.external && key !== "url") {
+          this.trackProgress(item, key === "uploaded");
+        }
       }
       catch (e) {
         // if a users tries to update entries on a file that doesn't exist,

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

@@ -103,6 +103,14 @@ export function getFontSizeByName(name) {
 export function getFontWeightByName(name) {
   return getTokenByName("fontWeight", name);
 }
+export function rgbaColorFromRgb(color, opacity) {
+  if (!color || (opacity !== 0 && !opacity)) {
+    return undefined;
+  }
+  const f = color.split(",");
+  const R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);
+  return `rgba(${R},${G},${B},${opacity})`;
+}
 export function shadeRGBColor(color, percent) {
   const f = color.split(","), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent;
   let R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);

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-00622251.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-f9c288b5.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-57b9edb8.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-70ef0e9d.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-b385a866.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-f5252ae4.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, d as Host } from './p-2ff017a8.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-a1863bda.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-a6f793fc.js';
+import { d as defineCustomElement$2 } from './p-f5d77e8e.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;font-weight:inherit;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 rgb(0, 119, 179)}: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 rgb(23, 28, 58)}";
 

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, d as Host } from './p-2ff017a8.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-a1863bda.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLocaleString } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-a6f793fc.js';
+import { d as defineCustomElement$2 } from './p-f5d77e8e.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-a81b913d.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-6f0966d2.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetCallout extends Components.DuetCallout, HTMLElement {}
+export const DuetCallout: {
+  prototype: DuetCallout;
+  new (): DuetCallout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,72 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-a1863bda.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$3 } from './p-f5d77e8e.js';
+import { d as defineCustomElement$2 } from './p-5962ecc8.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 .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{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
+
+const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.theme = "";
+    this.margin = "auto";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
+    </svg>
+    `;
+    return (h(Host, null, h("div", { class: {
+        "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" }), h("blockquote", null, h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none" }, h("slot", null))), h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("span", null, h("slot", { name: "author" })))))));
+  }
+  static get style() { return duetCalloutCss; }
+}, [1, "duet-callout", {
+    "theme": [1025],
+    "margin": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-callout", "duet-icon", "duet-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-callout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCallout$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCallout = DuetCallout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCallout, defineCustomElement };

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-aacb3b95.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-c638adb2.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-2ff017a8.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-a1863bda.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-68024252.js';
-import { d as defineCustomElement$3 } from './p-a6f793fc.js';
-import { d as defineCustomElement$2 } from './p-27efb5f6.js';
+import { g as getColorByName } from './p-890d1070.js';
+import { d as defineCustomElement$3 } from './p-f5d77e8e.js';
+import { d as defineCustomElement$2 } from './p-4a060f56.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

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-7ccd5f61.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-d54ecc52.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-95f8531c.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-087e9427.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;