@duetds/components 6.10.2 → 6.10.4

package/lib/dist-custom-elements/p-84a78894.js

@@ -0,0 +1,187 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
+import { a as media_query_large, m as media_query_medium, b as media_query_small } from './p-b519ac77.js';
+import { w as watchForOptions, a as watchForElement } from './p-12721178.js';
+
+const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-grid-variation-flex.sc-duet-grid-h{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}@media (max-width: 22.5em){.duet-grid-variation-flex.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}}.duet-grid-variation-flex.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-grid-variation-flex.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse.sc-duet-grid-h{flex-direction:row-reverse !important}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-variation-flex.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:center !important}.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:stretch !important}.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 62em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-variation-flex.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-variation-flex.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-variation-flex.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-variation-flex.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-variation-flex.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-variation-flex.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-variation-flex.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-variation-flex.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}.duet-grid-variation-grid.sc-duet-grid-h{display:grid;grid-template-rows:repeat(1, 1fr);grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;align-items:flex-start;justify-content:center;margin:0 20px}@media (min-width: 36em){.duet-grid-variation-grid.sc-duet-grid-h{gap:24px;margin:0 40px}}@media (min-width: 48em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(8, 55px);gap:24px 32px;margin:0 auto}}@media (min-width: 62em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(12, minmax(0, 1fr));margin:0 64px}}@media (min-width: 76.25em){.duet-grid-variation-grid.sc-duet-grid-h{grid-template-columns:repeat(12, 55px);gap:40px;margin:0 auto}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-small.sc-duet-grid-s>*{grid-column:3/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-medium.sc-duet-grid-s>*{grid-column:2/span 10}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-large.sc-duet-grid-s>*{grid-column:1/span 12}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-right.sc-duet-grid-s>:nth-child(2){grid-column:9/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-sidebar-left.sc-duet-grid-s>:nth-child(2){grid-column:5/span 8}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 6}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:5/span 4}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-two-columns.sc-duet-grid-s>:nth-child(2){grid-column:7/span 6}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(1){grid-column:1/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(2){grid-column:5/span 4}}.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:1/span 4}@media (min-width: 48em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:1/span 8}}@media (min-width: 62em){.sc-duet-grid-h.duet-grid-variation-grid.duet-grid-template-three-columns.sc-duet-grid-s>:nth-child(3){grid-column:9/span 4}}";
+
+function isGridItem(element) {
+  return element.tagName.toLowerCase() === "duet-grid-item";
+}
+const DuetGrid = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_small.replace(/'/g, "")),
+    ];
+    this.distributeFormElement = false;
+    this.responsive = false;
+    this.breakpoint = "small";
+    this.direction = "horizontal";
+    this.rowReverse = false;
+    this.alignment = "top";
+    this.distribution = "default";
+    this.mobile = "";
+    this.gridTemplate = null;
+  }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  async connectedCallback() {
+    const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
+    this.mutationO = watchForOptions(el, "duet-grid-item", () => {
+      this.updateGridItems();
+    });
+    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+      // listen for potential mediaquery changes and reset layout
+      for (let i = 0; i < this.mql.length; i++) {
+        // addEventListener is not available in Stencil hydrate
+        if (this.mql[i].addEventListener) {
+          this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+        }
+      }
+    }
+    this.updateGridItems();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
+    // listen for potential mediaquery changes and reset layout
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+      }
+    }
+  }
+  /**
+   * Local methods
+   */
+  async updateGridItems() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    items.forEach(item => {
+      item.responsive = this.responsive;
+      item.breakpoint = this.breakpoint;
+      item.direction = this.direction;
+    });
+  }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    // if layout changes to columns instead of row, remove all padding
+    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight && !hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight || hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-grid": true,
+        "duet-no-stacking": !this.responsive,
+        "duet-grid-align-top": this.alignment === "top",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
+        "duet-grid-align-center": this.alignment === "center",
+        "duet-grid-align-stretch": this.alignment === "stretch",
+        "duet-grid-align-baseline": this.alignment === "baseline",
+        "duet-grid-distribution-left": this.distribution === "left",
+        "duet-grid-distribution-right": this.distribution === "right",
+        "duet-grid-distribution-center": this.distribution === "center",
+        "duet-grid-distribution-between": this.distribution === "space-between",
+        "duet-grid-distribution-around": this.distribution === "space-around",
+        "duet-grid-distribution-evenly": this.distribution === "space-evenly",
+        "duet-grid-mobile-left": this.mobile === "left",
+        "duet-grid-mobile-center": this.mobile === "center",
+        "duet-grid-mobile-right": this.mobile === "right",
+        "duet-grid-direction-horizontal": this.direction === "horizontal",
+        "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-breakpoint-x-small": this.breakpoint === "x-small",
+        "duet-grid-breakpoint-small": this.breakpoint === "small",
+        "duet-grid-breakpoint-medium": this.breakpoint === "medium",
+        "duet-grid-breakpoint-large": this.breakpoint === "large",
+        "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
+        "duet-grid-row-reverse": this.rowReverse,
+        [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
+        [`duet-grid-template-${this.gridTemplate}`]: true,
+      } }, h("slot", null)));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "responsive": ["updateGridItems"],
+    "breakpoint": ["updateGridItems"],
+    "direction": ["updateGridItems"]
+  }; }
+  static get style() { return duetGridCss; }
+}, [6, "duet-grid", {
+    "responsive": [4],
+    "breakpoint": [1],
+    "direction": [1],
+    "rowReverse": [4, "row-reverse"],
+    "alignment": [1],
+    "distribution": [1],
+    "mobile": [1],
+    "gridTemplate": [1, "grid-template"],
+    "distributeFormElement": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetGrid);
+      }
+      break;
+  } });
+}
+
+export { DuetGrid as D, defineCustomElement as d };

package/lib/dist-custom-elements/{p-62f3b6cb.js → p-8a1632b1.js}

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-2b132855.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-25fa826f.js';
 import { a as actionArrowRight } from './p-6fa39608.js';
 import { a as actionNewWindowSmall } from './p-f11208c3.js';
 import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLanguage, a as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-c202693f.js';
-import { d as defineCustomElement$1 } from './p-beca0ced.js';
+import { d as defineCustomElement$2 } from './p-171c70e8.js';
+import { d as defineCustomElement$1 } from './p-e467de13.js';
 
 const duetLinkCss = "*,*::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:inline}:host(.duet-link-block){display:block}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 119, 179);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-link.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\";color:rgb(198, 12, 48)}.duet-link:hover{color:rgb(0, 77, 128);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(148, 9, 37)}.duet-link:active{opacity:0.75;transition:none}.duet-link-external{position:absolute;width:20px;height:20px;margin-left:-15px}.duet-theme-turva .duet-link-external{margin-left:-12px}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px;font-weight:600;color:rgb(0, 41, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__chevron-icon{transition:300ms ease}.block:hover .block__chevron-icon{transform:translateX(4px)}";
 

package/lib/dist-custom-elements/{p-eb29050b.js → p-a60259d1.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-2b132855.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 
 const duetCheckmarkCss = ".duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(144, 149, 153);border-radius:4px;transition:border 300ms ease}.duet-checkmark-container.center{margin-right:auto}.duet-theme-turva .duet-checkmark-container{border-color:rgb(116, 116, 117)}.checked .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked .duet-checkmark-container{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}[disabled]+label .duet-checkmark-container{border-color:rgb(207, 210, 212) !important}.duet-theme-turva [disabled]+label .duet-checkmark-container{border-color:rgb(207, 207, 209) !important}.checked [disabled]+label .duet-checkmark-container{background:rgb(207, 210, 212) !important}.duet-theme-turva .checked [disabled]+label .duet-checkmark-container{background:rgb(207, 207, 209) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}";

package/lib/dist-custom-elements/{p-227cc94f.js → p-b98f1d2a.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-2b132855.js';
+import { p as proxyCustomElement, H, h } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getColorByName } from './p-de68431d.js';
 

package/lib/dist-custom-elements/{p-6de01596.js → p-c85e7fbd.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-2b132855.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
 
 const duetListItemCss = "*,*::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;flex-direction:column;display:flex;width:100%;overflow:visible;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:1rem;font-style:normal;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(0, 41, 77)}:host dt{padding-bottom:4px}:host dd{padding-top:0}:host dt,:host dd{flex-basis:100%}:host dt,:host dd{width:100%;margin-inline-start:0;-webkit-hyphens:auto;hyphens:auto;text-align:left;word-break:break-all;word-break:break-word}:host dt{font-weight:600}.duet-theme-turva :host dt{font-weight:700}:host dd{margin-left:auto}:host(.duet-list-striped) dt,:host(.duet-list-striped) dd{padding:16px}:host(.duet-list-striped) dt{padding-bottom:4px}:host(.duet-list-striped) dd{padding-top:0}:host(.duet-list-striped.duet-no-stacking) dt,:host(.duet-list-striped.duet-no-stacking) dd{padding:16px}:host(:not(.duet-list-striped)) dt,:host(:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(:not(.duet-list-striped)) dt{padding-bottom:4px}:host(:not(.duet-list-striped)) dd{padding-top:0}:host(:not(.duet-list-striped).duet-no-stacking) dt,:host(:not(.duet-list-striped).duet-no-stacking) dd{padding:8px;padding-inline:0}:host(.duet-p-0) dt,:host(.duet-p-0) dd{padding:0 !important}:host(.duet-list-mobile-center) dt,:host(.duet-list-mobile-center) dd{text-align:center}:host(.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\";color:rgb(23, 28, 58)}:host(.duet-list-striped:nth-child(odd)) dt,:host(.duet-list-striped:nth-child(odd)) dd{background:rgb(245, 248, 250)}:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd{background:rgb(245, 245, 247)}:host(.duet-list-bordered){border-block-start:1px solid rgb(225, 227, 230)}:host(.duet-list-bordered:last-child){border-block-end:1px solid rgb(225, 227, 230)}:host(.duet-list-bordered.duet-theme-turva){border-block-start:1px solid rgb(228, 228, 230)}:host(.duet-list-bordered.duet-theme-turva:last-child){border-block-end:1px solid rgb(228, 228, 230)}:host(.duet-list-inner-bordered:not(:last-child)){border-block-end:1px solid rgb(225, 227, 230)}:host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)){border-block-end:1px solid rgb(228, 228, 230)}:host(.duet-no-stacking){flex-direction:row}:host(.duet-list-mobile-center.duet-no-stacking) dt,:host(.duet-list-mobile-center.duet-no-stacking) dd{text-align:left}:host(.duet-no-stacking.duet-list-width-30) dt{flex-basis:33%}:host(.duet-no-stacking.duet-list-width-30) dd{flex-basis:67%}:host(.duet-no-stacking.duet-list-width-50) dt{flex-basis:47%}:host(.duet-no-stacking.duet-list-width-50) dd{flex-basis:53%}:host(.duet-no-stacking.duet-list-width-70) dt{flex-basis:65%}:host(.duet-no-stacking.duet-list-width-70) dd{flex-basis:35%}:host(.duet-list-item-breakpoint-x-small){flex-direction:row}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd{flex-basis:35%}@media (max-width: 22.5em){:host(.duet-list-item-breakpoint-x-small){flex-direction:column}:host(.duet-list-item-breakpoint-x-small) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt{padding-bottom:4px}:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd{padding-top:0}:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd{text-align:center}:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd{flex-basis:100%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd{flex-basis:100%}:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt,:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd{flex-basis:100%}}@media (min-width: 36em){:host(.duet-list-item-breakpoint-small){flex-direction:row}:host(.duet-list-item-breakpoint-small.duet-list-striped) dt,:host(.duet-list-item-breakpoint-small.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-small.duet-p-0) dt,:host(.duet-list-item-breakpoint-small.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-small.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-small.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-small.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-small.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-small.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-small.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 48em){:host(.duet-list-item-breakpoint-medium){flex-direction:row}:host(.duet-list-item-breakpoint-medium.duet-list-striped) dt,:host(.duet-list-item-breakpoint-medium.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-medium.duet-p-0) dt,:host(.duet-list-item-breakpoint-medium.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-medium.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-medium.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-medium.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-medium.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-medium.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-medium.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 62em){:host(.duet-list-item-breakpoint-large){flex-direction:row}:host(.duet-list-item-breakpoint-large.duet-list-striped) dt,:host(.duet-list-item-breakpoint-large.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-large.duet-p-0) dt,:host(.duet-list-item-breakpoint-large.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-large.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-large.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-large.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-large.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-large.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-large.duet-list-width-70) dd{flex-basis:35%}}@media (min-width: 64.0625em){:host(.duet-list-item-breakpoint-x-large){flex-direction:row}:host(.duet-list-item-breakpoint-x-large.duet-list-striped) dt,:host(.duet-list-item-breakpoint-x-large.duet-list-striped) dd{padding:16px}:host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dt,:host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dd{padding:8px;padding-inline:0}:host(.duet-list-item-breakpoint-x-large.duet-p-0) dt,:host(.duet-list-item-breakpoint-x-large.duet-p-0) dd{padding:0 !important}:host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dt,:host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dd{text-align:left}:host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dt{flex-basis:33%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dd{flex-basis:67%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dt{flex-basis:47%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dd{flex-basis:53%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dt{flex-basis:65%}:host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dd{flex-basis:35%}}";
 

package/lib/dist-custom-elements/{p-6f4b6168.js → p-d5e61aac.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-2b132855.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
 import { s as sizeNavigation, i as sizeHeader } from './p-e8475b3c.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { d as debounce } from './p-0b3f675e.js';

package/lib/dist-custom-elements/{p-a0f68c00.js → p-dbb9df4e.js}

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-2b132855.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-25fa826f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { d as debounce } from './p-0b3f675e.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { g as getLanguage, a as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-076452be.js';
 import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-de68431d.js';
-import { d as defineCustomElement$2 } from './p-c202693f.js';
-import { d as defineCustomElement$1 } from './p-beca0ced.js';
+import { d as defineCustomElement$2 } from './p-171c70e8.js';
+import { d as defineCustomElement$1 } from './p-e467de13.js';
 
 const duetActionButtonCss = "*,*::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:inline-block;margin:0 auto}button.duet-action-button{white-space:nowrap}button.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(0, 41, 77);cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-theme-turva button.duet-action-button{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}button.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){button.duet-action-button{width:32px;height:32px}}button.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-theme-turva button.duet-action-button:not(:disabled):hover{background:#e9e9eb}button.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px rgb(0, 119, 179) !important}.duet-theme-turva button.duet-action-button:focus{box-shadow:0 0 0 2px rgb(23, 28, 58) !important}button.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-theme-turva button.duet-action-button:active:focus{background:#ddddde !important}button.duet-action-button:disabled{color:rgb(144, 149, 153);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-theme-turva button.duet-action-button:disabled{color:rgb(116, 116, 117);background:rgb(245, 245, 247)}";