@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/p-8f69f7ca.js

@@ -0,0 +1,428 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-1ad6b04e.js';
+import { f as formSearch } from './p-d004da5f.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { c as cleanValue, r as resetCursor } from './p-56118313.js';
+import { b as isEscapeKey } from './p-d8549efe.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$5 } from './p-92012dcc.js';
+import { d as defineCustomElement$4 } from './p-4f516732.js';
+import { d as defineCustomElement$3 } from './p-fb6be4e4.js';
+import { d as defineCustomElement$2 } from './p-f1d0dca7.js';
+import { d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+var formEmail={"title":"form-email","tags":"form email","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 23.999c-3.205 0-6.218-1.248-8.484-3.514S.001 15.206.001 12.001s1.248-6.218 3.514-8.485C5.782 1.25 8.795.001 12 .001s6.218 1.248 8.485 3.514A11.92 11.92 0 0 1 24 12v2.25A3.754 3.754 0 0 1 20.25 18a3.77 3.77 0 0 1-3.48-2.365A6.009 6.009 0 0 1 12 18c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6v2.25c0 1.241 1.009 2.25 2.25 2.25s2.25-1.009 2.25-2.25V12c0-2.804-1.092-5.441-3.075-7.424A10.433 10.433 0 0 0 12 1.501c-2.804 0-5.441 1.092-7.424 3.075S1.501 9.196 1.501 12c0 2.805 1.092 5.441 3.075 7.424s4.619 3.074 7.423 3.074c2.257 0 4.494-.746 6.299-2.1a.749.749 0 1 1 .9 1.199A12.049 12.049 0 0 1 12 23.999zM12 7.5c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z\"/></svg>"};
+
+const duetInputCss = "*.sc-duet-input,*.sc-duet-input::after,*.sc-duet-input::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-input-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:bottom}.sc-duet-input-h:last-child,.sc-duet-input-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-input-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-input-h{width:100% !important}.duet-m-0.sc-duet-input-h{margin:0 !important}duet-tooltip.sc-duet-input{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-input{position:relative;top:4px;right:auto}}duet-caption.sc-duet-input:not(:last-of-type){margin-bottom:0}.duet-input-placeholder.sc-duet-input{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:white}.duet-input-icon.sc-duet-input{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;font-size:0;line-height:normal;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input{color:#171c3a}.duet-input-container.sc-duet-input{position:relative;width:100%;height:100%}.duet-input-container.has-clear.sc-duet-input .duet-input-clear-icon.sc-duet-input{position:relative;z-index:250}.duet-input-container.has-clear.sc-duet-input .duet-input-clear-icon.sc-duet-input button.sc-duet-input{position:absolute;top:-24px;right:0;min-width:48px;min-height:48px}.duet-input-container.has-clear.sc-duet-input .duet-input-clear-icon.sc-duet-input button.sc-duet-input:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-input .duet-input-container.has-clear.sc-duet-input .duet-input-clear-icon.sc-duet-input button.sc-duet-input:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-input-container.has-clear.sc-duet-input .duet-input-clear-icon.sc-duet-input button.sc-duet-input:active{opacity:0.75;transition:none}.duet-input-container.has-clear.has-icon.sc-duet-input .duet-input-clear-icon.sc-duet-input{top:-24px;right:24px}.duet-input.sc-duet-input{position:relative;z-index:100;display:block !important;width:100% !important;min-width:8rem;max-width:initial !important;height:auto !important;padding:12px 14px !important;margin:initial !important;margin-bottom:initial !important;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-weight:400 !important;font-variant-numeric:tabular-nums;line-height:1.5 !important;color:#00294d !important;cursor:initial !important;background:white !important;background-clip:initial !important;border:1px solid #909599 !important;border-radius:4px !important;box-shadow:initial !important;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-input.is-number.sc-duet-input{padding-right:112px !important}.duet-input.is-date.sc-duet-input{padding-right:64px !important}.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#de2362 !important}.has-error.sc-duet-input .duet-input.sc-duet-input+.duet-input-icon.sc-duet-input{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input+.duet-input-icon.sc-duet-input{color:#e02a0d !important}.has-icon.sc-duet-input .duet-input.sc-duet-input{padding-right:48px !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a !important;border-color:#747475 !important}.duet-input.sc-duet-input::-ms-clear{display:none}.duet-input.sc-duet-input::-webkit-contacts-auto-fill-button{display:none !important}.duet-input.sc-duet-input::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder{color:#747475}.duet-input.sc-duet-input:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-input.sc-duet-input::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder{color:#747475}.duet-input.sc-duet-input:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus::-moz-placeholder{color:#cfcfd1}.duet-input.sc-duet-input:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder{color:#747475}.duet-input.sc-duet-input:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:-ms-input-placeholder{color:#cfcfd1}.duet-input[disabled].sc-duet-input{color:#00294d !important;cursor:text !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-input .duet-input[disabled].sc-duet-input{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.has-error.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus{border-color:#0077b3 !important;outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus{border-color:#171c3a !important;box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus+.duet-input-icon.sc-duet-input{color:#171c3a}.has-error.sc-duet-input .duet-input.sc-duet-input:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:focus{box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus+.duet-input-icon.sc-duet-input{color:#0077b3}.duet-input[type=search].sc-duet-input:not(:placeholder-shown):focus+.duet-input-icon.sc-duet-input{display:none}.duet-input.sc-duet-input:not(:focus):not(:hover):invalid{box-shadow:none !important}.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button,.duet-input[type=number].sc-duet-input::-webkit-outer-spin-button,.duet-input[type=time].sc-duet-input::-webkit-inner-spin-button,.duet-input[type=time].sc-duet-input::-webkit-outer-spin-button{display:none;margin:0;-webkit-appearance:none}.duet-input.sc-duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-input-help.sc-duet-input{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:#657787;border-radius:4px}.duet-input-help.sc-duet-input span.sc-duet-input{display:block;margin-top:8px}.duet-theme-turva.sc-duet-input .duet-input-help.sc-duet-input{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#747475}.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#e02a0d}.duet-label-hidden.sc-duet-input duet-label.sc-duet-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-input-relative.sc-duet-input{position:relative;width:100%}.duet-input-variation-button.sc-duet-input{position:relative;width:100%}.duet-input-variation-button.sc-duet-input .duet-input-relative.sc-duet-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto}.duet-input-variation-button.sc-duet-input .duet-input-relative.sc-duet-input duet-button.sc-duet-input{z-index:250;margin-bottom:0}.duet-input-variation-button.sc-duet-input .duet-input-relative.sc-duet-input .duet-input.sc-duet-input{border-right-width:0 !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}";
+
+const icons = {
+  search: formSearch,
+  email: formEmail,
+};
+const DuetInput = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetInput = createEvent(this, "duetInput", 7);
+    this.duetChange = createEvent(this, "duetChange", 3);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    this.duetClear = createEvent(this, "duetClear", 7);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    /**
+     * Own Properties
+     */
+    this.inputId = createID("DuetInput");
+    this.clearId = createID("DuetInputClear");
+    this.labelId = createID("DuetLabel");
+    this.topCaptionId = createID("DuetCaptionTop");
+    this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+    this.errorId = createID("DuetError");
+    this.disallowPatternRegex = null;
+    this.clearLabel = getLocaleString({
+      en: "Clear",
+      fi: "Tyhjennä",
+      sv: "Rensa",
+    });
+    this.timeAnnouncement = getLocaleString({
+      en: "Time",
+      fi: "Aika",
+      sv: "Tid",
+    });
+    /**
+     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+     */
+    this.accessibleDescribedBy = "";
+    /**
+     * Indicates value of any popup element associated with the input.
+     */
+    this.accessibleHasPopup = undefined;
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
+     * event after each keystroke.
+     */
+    this.debounce = 0;
+    /**
+     * If set, the input field will display a clear button that can be accessed with tabbing.
+     */
+    this.clear = false;
+    /**
+     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+     */
+    this.echoPlaceholder = false;
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Makes the input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Type of the input.
+     */
+    this.type = "text";
+    /**
+     * Variation of button.
+     */
+    this.variation = "default";
+    /**
+     * Label for the input.
+     */
+    this.label = "label";
+    /**
+     * Display the input in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Enable numeric keyboard for the input.
+     */
+    this.numericKeyboard = false;
+    /**
+     * Used internally in Duet to adjust whether this component acts as e.g. number input.
+     */
+    this.component = "input";
+    /**
+     * Enable or disable automatic completion by the browser
+     */
+    this.autoComplete = "on";
+    /**
+     * A regular expression that matches any characters which should be *disallowed*.
+     * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
+     * e.g. the following will disallow any non-numeric characters `[^0-9]`
+     */
+    this.disallowPattern = null;
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    this.tooltip = "";
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.tooltipDirection = "auto";
+    /**
+     * Component event handling.
+     */
+    this.onInput = (ev) => {
+      if (this.disallowPatternRegex) {
+        cleanValue(this.nativeInput, this.disallowPatternRegex);
+      }
+      this.value = this.nativeInput.value || "";
+      this.duetInput.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-input",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-input",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-input",
+      });
+    };
+    this.onClear = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-input",
+      });
+    };
+    /** Private functions
+     *
+     */
+    this.getDescribedBy = () => {
+      let describedBy = "";
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy = this.topCaptionId;
+        if (this.accessibleDescribedBy) {
+          describedBy += " " + this.accessibleDescribedBy;
+        }
+      }
+      else if (this.accessibleDescribedBy.length > 0) {
+        describedBy = this.accessibleDescribedBy;
+      }
+      else {
+        describedBy = undefined;
+      }
+      return describedBy;
+    };
+    this.handleClearClick = event => {
+      const clearing = this.clearInput();
+      this.onClear(event);
+      return clearing;
+    };
+    this.keyHandler = event => {
+      if (isEscapeKey(event) && this.clear) {
+        this.handleClearClick(event);
+      }
+      return event;
+    };
+  }
+  disallowedPatternChange() {
+    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
+  }
+  valueChanged() {
+    var _a;
+    if (((_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
+      const restoreCursor = resetCursor(this.nativeInput);
+      this.nativeInput.value = this.value;
+      // restore selection position after having set value
+      // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
+      restoreCursor();
+    }
+    this.isCaptionVisible = !!this.caption;
+    const emitEvent = () => this.duetChange.emit({
+      value: this.value,
+      component: "duet-input",
+    });
+    if (this.debounce === 0) {
+      emitEvent();
+    }
+    else {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = setTimeout(emitEvent, this.debounce);
+    }
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.disallowedPatternChange();
+    this.isCaptionVisible = !!this.caption;
+  }
+  /**
+   * Sets focus on the specified `duet-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeInput) {
+      this.nativeInput.focus(options);
+    }
+  }
+  /**
+   * Reset the cursor position on the native element
+   * `input.resetCursor()`.
+   */
+  async resetCursor() {
+    if (this.nativeInput) {
+      const restoreCursor = resetCursor(this.nativeInput);
+      this.nativeInput.value = this.value;
+      restoreCursor();
+    }
+  }
+  /**
+   * Reset the cursor position on the native element
+   * `input.resetCursor()`.
+   */
+  async clearInput() {
+    if (this.nativeInput) {
+      this.nativeInput.value = "";
+      this.value = "";
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.inputId;
+    const inputProps = {};
+    if (this.numericKeyboard) {
+      inputProps.inputmode = "numeric";
+    }
+    // Set validation regexes
+    if (this.pattern && this.type !== "tel") {
+      inputProps.pattern = this.pattern;
+    }
+    else if (!this.pattern && this.type === "tel") {
+      inputProps.pattern = "[0-9+ ]+";
+    }
+    let selectedTime;
+    if (this.value) {
+      selectedTime = new Date();
+      try {
+        selectedTime.setHours(Number(this.value.slice(0, 2)), Number(this.value.slice(3, 5)), 0, 0);
+      }
+      catch (e) {
+        selectedTime = undefined;
+      }
+    }
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
+        "duet-input-container": true,
+        "duet-theme-turva": this.theme === "turva",
+        [`duet-input-variation-${this.variation}`]: true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-input-top-caption-shown": this.isCaptionVisible,
+        "has-icon": !!this.icon ||
+          (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-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-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: {
+        "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.labelId} ${this.errorId} ${this.accessibleLabelledBy}`
+        : `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "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.icon &&
+      this.type !== "text" &&
+      this.type !== "tel" &&
+      this.type !== "password" &&
+      this.type !== "time" &&
+      this.variation !== "button" && (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" }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "xx-small", name: "activity-close", 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-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "disallowPattern": ["disallowedPatternChange"],
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return duetInputCss; }
+}, [6, "duet-input", {
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleAutocomplete": [1, "accessible-autocomplete"],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleExpanded": [1, "accessible-expanded"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleHasPopup": [1, "accessible-has-popup"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "debounce": [2],
+    "clear": [4],
+    "caption": [1],
+    "echoPlaceholder": [4, "echo-placeholder"],
+    "theme": [1025],
+    "expand": [4],
+    "disabled": [516],
+    "identifier": [1],
+    "margin": [1],
+    "required": [4],
+    "type": [1],
+    "variation": [1],
+    "label": [1],
+    "error": [1],
+    "labelHidden": [4, "label-hidden"],
+    "numericKeyboard": [4, "numeric-keyboard"],
+    "name": [1],
+    "pattern": [1],
+    "maxlength": [2],
+    "minlength": [2],
+    "placeholder": [1],
+    "component": [1],
+    "role": [1],
+    "icon": [1],
+    "autoComplete": [1, "auto-complete"],
+    "disallowPattern": [1, "disallow-pattern"],
+    "value": [1025],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "setFocus": [64],
+    "resetCursor": [64],
+    "clearInput": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-input", "duet-caption", "duet-icon", "duet-label", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetInput);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetInput as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-92012dcc.js

@@ -0,0 +1,71 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+
+const duetCaptionCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:flex;flex:0 0 100%;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\";font-size:1rem;font-weight:400;line-height:1.5;color:#657787;vertical-align:top}:host.duet-p-0{padding:0 !important}:host.duet-m-0{margin:0 !important}:host(.duet-caption-small){font-size:0.875rem;line-height:1.25}: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:#747475}:host(.duet-caption-selected){color:#0077b3}:host(.duet-caption-selected.duet-theme-turva){color:#171c3a}:host(.duet-m-0){margin:0 !important}";
+
+const DuetCaption = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the caption.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Selected state of the caption. Used inside Choice component.
+     */
+    this.selected = false;
+    /**
+     * Controls the size of the caption.
+     */
+    this.size = "medium";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-caption": true,
+        "duet-caption-selected": this.selected,
+        "duet-caption-small": this.size === "small",
+        "duet-theme-turva": this.theme === "turva",
+        "duet-m-0": this.margin === "none",
+      } }, h("slot", null)));
+  }
+  static get style() { return duetCaptionCss; }
+}, [1, "duet-caption", {
+    "theme": [1025],
+    "margin": [1],
+    "selected": [4],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCaption);
+      }
+      break;
+  } });
+}
+
+export { DuetCaption as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-9af8e9da.js

@@ -0,0 +1,70 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$1 } from './p-4f516732.js';
+
+const duetEmptyStateCss = "*,*::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%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";
+
+const DuetEmptyState = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * Icon shown in the empty state component.
+     */
+    this.icon = "messaging-question";
+    /**
+     * The size of the empty state message.
+     */
+    this.size = "medium";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "duet-empty-state": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-is-small": this.size === "small",
+      } }, h("duet-icon", { color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", null, h("slot", null)))));
+  }
+  static get style() { return duetEmptyStateCss; }
+}, [1, "duet-empty-state", {
+    "theme": [1025],
+    "icon": [1],
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-empty-state", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-empty-state":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetEmptyState);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetEmptyState as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-a087e30a.js

@@ -0,0 +1,86 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+
+const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;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;line-height:1.5;color:#00294d}.sc-duet-grid-item-h:first-child,.sc-duet-grid-item-h:first-of-type{padding-left:0}.sc-duet-grid-item-h:last-child,.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
+
+const DuetGridItem = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Make the grid item fill the remaining available grid space.
+     */
+    this.fill = false;
+    /**
+     * Theme of the grid item.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * @internal
+     * Enable or disable the automatic responsive behaviour of the grid item.
+     * This property is used internally by Grid, and should not be set by the developer.
+     */
+    this.responsive = false;
+    /**
+     * @internal
+     * Switch the breakpoint used to trigger the content stacking.
+     * This property is used internally by Grid, and should not be set by the developer.
+     */
+    this.breakpoint = "small";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { style: {
+        "min-width": this.minWidth,
+        "max-width": this.maxWidth,
+      }, class: {
+        "duet-m-0": this.margin === "none",
+        "duet-theme-turva": this.theme === "turva",
+        "duet-grid-item": true,
+        "duet-grid-item-fill": this.fill,
+        "duet-grid-item-responsive": this.responsive,
+        "duet-grid-item-br-medium": this.breakpoint === "medium",
+        "duet-grid-item-br-x-large": this.breakpoint === "x-large",
+      } }));
+  }
+  static get style() { return duetGridItemCss; }
+}, [2, "duet-grid-item", {
+    "fill": [4],
+    "maxWidth": [1, "max-width"],
+    "minWidth": [1, "min-width"],
+    "theme": [1025],
+    "margin": [1],
+    "responsive": [4],
+    "breakpoint": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-grid-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-grid-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetGridItem);
+      }
+      break;
+  } });
+}
+
+export { DuetGridItem as D, defineCustomElement as d };