@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/p-4c52333e.js

@@ -0,0 +1,341 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { g as getColorByName } from './p-86faf728.js';
+import { d as defineCustomElement$3 } from './p-4f516732.js';
+import { d as defineCustomElement$2 } from './p-6cae0682.js';
+import { d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+const duetButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.input-button){z-index:250}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;min-width:8rem;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:600;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#0077b3 !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button:not(.input-button-primary,.input-button-secondary){font-variant-numeric:tabular-nums}.duet-button.duet-button-text-center{text-align:center !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){padding:9px 19px 10px !important;min-width:5.3333333333rem;font-size:0.875rem}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}.duet-theme-turva .duet-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30 !important}.duet-button .duet-button-contents{position:relative;display:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button:active{opacity:0.75;transition:none}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{color:#c60c30 !important;border-color:#e4e4e6}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.default.duet-button-negative{background-color:white}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:#e4e4e6 !important}.duet-button.default.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.primary,.duet-button.input-button-primary{color:white !important;background:#0077b3;border-color:#0077b3}.duet-theme-turva .duet-button.primary,.duet-theme-turva .duet-button.input-button-primary{color:white !important;background:#c60c30;border-color:#c60c30}.duet-button.primary:hover,.duet-button.input-button-primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover,.duet-theme-turva .duet-button.input-button-primary:hover{background:#940925;border-color:#940925}.duet-button.primary:focus,.duet-button.input-button-primary:focus{outline:0;box-shadow:0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus,.duet-theme-turva .duet-button.input-button-primary:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}.duet-button.secondary,.duet-button.input-button-secondary{color:#00294d !important;background:transparent;border-color:#00294d}.duet-theme-turva .duet-button.secondary,.duet-theme-turva .duet-button.input-button-secondary{color:#171c3a !important;border-color:#171c3a}.duet-button.secondary:hover,.duet-button.input-button-secondary:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary:hover,.duet-theme-turva .duet-button.input-button-secondary:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.secondary.duet-button-negative,.duet-button.input-button-secondary.duet-button-negative{color:#e1e3e6 !important;border-color:white}.duet-theme-turva .duet-button.secondary.duet-button-negative,.duet-theme-turva .duet-button.input-button-secondary.duet-button-negative{color:#e4e4e6 !important}.duet-button.secondary.duet-button-negative:hover,.duet-button.input-button-secondary.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover,.duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.negative{color:#00294d !important;background:white;border-color:white}.duet-theme-turva .duet-button.negative{color:#171c3a !important}.duet-button.negative:hover{color:white !important;background:transparent;border-color:white}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:white !important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive-primary{color:white !important;background:#e02a0d;border-color:#e02a0d}.duet-button.destructive-primary:hover{background:#b21c4e;border-color:#b21c4e;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:white !important;background:#b3220a;border-color:#b3220a}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:#c60c30 !important;background:transparent;border-color:transparent}.duet-button.plain.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:#657787 !important;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}.duet-button.plain:hover{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:#940925 !important}.duet-button.plain.duet-button-negative{color:white !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:#e4e4e6 !important}.duet-button.plain.duet-button-negative:hover{color:#0077b3 !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:#c60c30 !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button.duet-button.input-button-primary,.duet-button.duet-button.input-button-secondary{box-sizing:content-box;min-width:48px;min-height:48px;padding:0 !important;border-width:1px;border-top-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:0}.duet-button.duet-button.input-button-primary .duet-button-contents,.duet-button.duet-button.input-button-secondary .duet-button-contents{position:static}.duet-button.duet-button.input-button-primary .duet-button-icon.left.large,.duet-button.duet-button.input-button-primary .duet-button-icon.left.medium,.duet-button.duet-button.input-button-primary .duet-button-icon.left.small,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.large,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.medium,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:#657787 !important;background:#e1e3e6 !important;border-color:#e1e3e6 !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-button-is-loading.primary,.duet-button-is-loading.input-button-primary{color:white}.duet-button-is-loading.default{color:#0077b3}.duet-button-is-loading.default.duet-theme-turva{color:#c60c30}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
+
+const DuetButton = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    /**
+     * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+     */
+    this.accessiblePopup = "false";
+    /**
+     * 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;
+    /**
+     * Loading state of the button
+     */
+    this.loading = false;
+    /**
+     * Style variation of the button.
+     * @negative - value is deprecated and should be used in combination with negative prop in the future
+     * @destructive - value is deprecated and should be replace with destructive-secondary
+     */
+    this.variation = "default";
+    /**
+     * Negative variation, can be combined with Variation to produce negative versions
+     */
+    this.negative = false;
+    /**
+     * Theme of the button.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * Centers the text of a button
+     */
+    this.centerText = false;
+    /**
+     * Controls the text wrapping.
+     */
+    this.wrapping = "auto";
+    /**
+     * Expands the button to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Keep the button fixed width even on mobile viewports.
+     */
+    this.fixed = false;
+    /**
+     * Makes the button component disabled. This prevents users from being able to
+     * interact with the button, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Allows the button to submit a form.
+     */
+    this.submit = false;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    this.external = false;
+    /**
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Property to change accessibleLabelExternal defaults on the component.
+     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    /**
+     * Icon to display to the left of the button content.
+     * This is ignored/overridden when button is used as an external link.
+     */
+    this.icon = "";
+    /**
+     * Custom color to be used for text, as a design token entered in camelCase or
+     * kebab-case. Example: "color-primary".
+     */
+    this.color = "";
+    /**
+     * Show icon on the right side of the button content.
+     */
+    this.iconRight = false;
+    /**
+     * Icon size.
+     */
+    this.iconSize = "medium";
+    /**
+     * Button’s size.
+     */
+    this.size = "medium";
+    /**
+     * Whether this button should use styles meant for displaying just an icon.
+     */
+    this.iconOnly = false;
+    /**
+     * Component event handling.
+     */
+    this.handleClick = (ev) => {
+      // If this button wants to specifically submit a form
+      // climb up the dom to see if we're in a <form>
+      // and if so, then use JS to submit it.
+      // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
+      if (!this.url && this.element.closest("form")) {
+        ev.preventDefault();
+        this.proxyButton.click();
+      }
+    };
+    this.onFocus = () => {
+      this.duetFocus.emit();
+    };
+    this.onBlur = () => {
+      this.duetBlur.emit();
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    if (this.url && this.external && this.icon) {
+      console.warn("[DUET]: Button used as an external link will override any icon that is set");
+    }
+  }
+  connectedCallback() {
+    this.proxyButton = document.createElement("button");
+    this.proxyButton.style.display = "none";
+    this.syncToProxyButton();
+    if (!this.url && this.element.closest("form")) {
+      this.element.insertAdjacentElement("beforebegin", this.proxyButton);
+    }
+  }
+  disconnectedCallback() {
+    this.proxyButton.remove();
+    this.proxyButton = null;
+  }
+  syncToProxyButton() {
+    this.proxyButton.type = this.getButtonType();
+    this.proxyButton.disabled = this.disabled;
+    // attributes should be removed in cases where name/value is not set
+    if (this.name != null) {
+      this.proxyButton.name = this.name;
+    }
+    else {
+      this.proxyButton.removeAttribute("name");
+    }
+    if (this.value != null) {
+      this.proxyButton.value = this.value;
+    }
+    else {
+      this.proxyButton.removeAttribute("value");
+    }
+  }
+  getButtonType() {
+    return this.submit ? "submit" : "button";
+  }
+  /**
+   * Sets focus on the specified `duet-button`. Use this method instead of the global
+   * `button.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeButton) {
+      this.nativeButton.focus(options);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    const isExternalLink = this.external && this.url;
+    // enforce consistency for external links
+    const icon = isExternalLink ? "action-new-window" : this.icon;
+    const iconRight = isExternalLink ? true : this.iconRight;
+    const commonChildren = (h("span", { class: "duet-button-contents", style: { color: getColorByName(this.color) } }, icon && (h("div", { "aria-hidden": "true", class: {
+        "duet-button-icon": true,
+        left: !iconRight,
+        right: iconRight,
+        [this.iconSize]: true,
+      } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("slot", null)));
+    const commonProps = {
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      ref: button => (this.nativeButton = button),
+      id: this.identifier,
+      class: {
+        "duet-m-0": this.margin === "none",
+        "duet-p-0": this.padding === "none",
+        "duet-no-wrap": this.wrapping === "none",
+        "duet-button": true,
+        "duet-button-is-small": this.size === "small",
+        "duet-button-icon-only": this.iconOnly,
+        "duet-button-text-center": this.centerText,
+        "duet-button-negative": this.negative || this.variation === "negative",
+        [this.variation]: true,
+        disabled: this.disabled,
+        icon: !!icon,
+        "icon-right": iconRight,
+        [this.iconSize]: true,
+      },
+      "aria-controls": this.accessibleControls,
+      "aria-label": this.accessibleLabel,
+      "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined,
+      "aria-activedescendant": this.accessibleActiveDescendant,
+      "aria-owns": this.accessibleOwns,
+      "aria-describedby": this.accessibleDescribedBy,
+      "aria-labelledby": this.accessibleLabelledBy,
+      "aria-details": this.accessibleDetails,
+      "aria-description": this.accessibleDescription,
+    };
+    return (h(Host, { onClick: this.handleClick, class: {
+        "duet-m-0": this.margin === "none",
+        "duet-small": this.size === "small",
+        "duet-fixed": this.fixed,
+        "duet-expand": this.expand,
+        "input-button": this.variation === "input-button-primary" || this.variation === "input-button-secondary",
+      } }, h("div", { class: {
+        "duet-button-container": true,
+        "duet-button-is-loading": this.loading,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-button-negative": this.negative || this.variation === "negative",
+        [this.variation]: true,
+      } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }), commonChildren)), this.loading && h("duet-spinner", { color: "currentColor" }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "disabled": ["syncToProxyButton"],
+    "submit": ["syncToProxyButton"],
+    "value": ["syncToProxyButton"],
+    "name": ["syncToProxyButton"]
+  }; }
+  static get style() { return duetButtonCss; }
+}, [1, "duet-button", {
+    "accessibleLabel": [1, "accessible-label"],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessiblePopup": [1, "accessible-popup"],
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleExpanded": [4, "accessible-expanded"],
+    "accessiblePressed": [4, "accessible-pressed"],
+    "loading": [4],
+    "variation": [1],
+    "negative": [4],
+    "theme": [1025],
+    "margin": [1],
+    "padding": [1],
+    "centerText": [4, "center-text"],
+    "wrapping": [1],
+    "expand": [4],
+    "fixed": [4],
+    "disabled": [516],
+    "name": [1],
+    "value": [1],
+    "identifier": [1],
+    "submit": [516],
+    "external": [4],
+    "language": [1],
+    "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
+    "accessibleLabelExternal": [1, "accessible-label-external"],
+    "icon": [1],
+    "color": [1],
+    "iconRight": [4, "icon-right"],
+    "iconSize": [1, "icon-size"],
+    "size": [1],
+    "iconOnly": [4, "icon-only"],
+    "url": [513],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-button", "duet-icon", "duet-spinner", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetButton);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetButton as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-4ebf1618.js

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+const inheritGlobalTheme = (component) => {
+  // this minor change enables duet-theme-XXXXX instead of just duet-theme-turva
+  const classList = Array.from(document.documentElement.classList).join(" ") || "";
+  const theme = /(duet-theme-)([a-z]*)/gis.exec(classList);
+  if (theme && theme[1] === "duet-theme-") {
+    component.theme = theme[2] === "default" ? "" : theme[2];
+  }
+};
+
+export { inheritGlobalTheme as i };

package/lib/dist-custom-elements/p-4f516732.js

@@ -0,0 +1,214 @@
+/*!
+ * Built with Duet Design System
+ */
+import { E as Env, p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { g as getColorByName } from './p-86faf728.js';
+
+const cleanupSvg = (svgContent) => {
+  if (typeof document === "undefined" || !svgContent) {
+    return;
+  }
+  const div = document.createElement("div");
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    const child = div.childNodes[i];
+    if (child.nodeName.toLowerCase() !== "svg") {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  return div.firstElementChild;
+};
+const isValid = (elm) => {
+  if (elm.nodeName.toLowerCase() === "script") {
+    return false;
+  }
+  for (let i = 0; i < elm.attributes.length; i++) {
+    const attribute = elm.attributes[i];
+    if (attribute.name.toLowerCase().indexOf("on") === 0) {
+      return false;
+    }
+  }
+  if (elm.children) {
+    for (let i = 0; i < elm.children.length; i++) {
+      if (!isValid(elm.children[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+const buildIconUrl = (iconName) => {
+  // under normal operations the Icons should always be loaded from the CDN
+  {
+    return `${Env.cdnURIProd}/icons/${Env.duetIconVersion}/lib/assets/${iconName}.svg`;
+  }
+};
+const iconCache = {};
+function fetchIconByUrl(url) {
+  if (iconCache[url]) {
+    return iconCache[url];
+  }
+  // we create a function that covers all the fetching, cleanup, validation etc,
+  // this way we can perform that work just once, and then return the same promise in future.
+  async function doFetch() {
+    const res = await fetch(url);
+    if (!res.ok) {
+      throw new Error(`SVG request failed: ${res.status} ${res.statusText}`);
+    }
+    const responseText = await res.text();
+    const svgElement = cleanupSvg(responseText);
+    if (!isValid(svgElement)) {
+      throw new Error("SVG validation failed");
+    }
+    // OuterHTML does not unfortunately work here with IE11
+    // was previously: resolve(svgElement.outerHTML)
+    const div = document.createElement("div");
+    div.appendChild(svgElement);
+    return div.innerHTML;
+  }
+  // we do not `await` the fetch, as we only care about initiating the work,
+  // it's the responsibility of the calling code to wait for the response.
+  const req = doFetch();
+  // cache for the repeat requests
+  return (iconCache[url] = req);
+}
+
+const duetIconCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){:host(.duet-icon-has-outline){margin-bottom:0 !important}}@media (max-width: 35.9375em){:host(.duet-icon-has-background){margin-bottom:0 !important}}:host(.duet-m-0){margin:0 !important}@media (max-width: 35.9375em){:host(.duet-m-0){margin:0 !important}}.duet-icon{-webkit-user-select:none;user-select:none;width:100%;height:100%;transform-origin:top center}.duet-icon.duet-icon-has-outline{padding:12px;border-style:solid;border-width:1px;border-radius:50%}@media (max-width: 35.9375em){.duet-icon.duet-icon-has-outline{outline:1px solid transparent;transform:scale(0.8)}}.duet-icon.duet-icon-has-background{padding:16px;color:white;border-radius:50%}@media (max-width: 35.9375em){.duet-icon.duet-icon-has-background{outline:1px solid transparent;transform:scale(0.8)}}.duet-icon.duet-icon-has-background.duet-theme-turva,.duet-icon.duet-icon-has-background.duet-theme-default{color:white}.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg,.duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg{width:10px;height:10px}.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg,.duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg{width:16px;height:16px}@media (max-width: 35.9375em){.duet-icon.duet-icon-not-responsive{transform:scale(1) !important}}.duet-icon.duet-theme-default{color:#0077b3}.duet-icon.duet-theme-turva{color:#c60c30}.duet-icon.auto .duet-icon-svg{width:100%;height:100%}.duet-icon.xxx-small .duet-icon-svg{width:7px;height:7px}.duet-icon.duet-icon-has-background.xxx-small{padding:6px}.duet-icon.duet-icon-has-outline.xxx-small{padding:4px}.duet-icon.xx-small .duet-icon-svg{width:10px;height:10px}.duet-icon.duet-icon-has-background.xx-small{padding:8px}.duet-icon.duet-icon-has-outline.xx-small{padding:7px}.duet-icon.x-small .duet-icon-svg{width:16px;height:16px}.duet-icon.duet-icon-has-outline.x-small{padding:10px}.duet-icon.duet-icon-has-background.x-small{padding:12px}.duet-icon.small .duet-icon-svg{width:20px;height:20px}.duet-icon.duet-icon-has-background.small{padding:14px}.duet-icon.large .duet-icon-svg{width:30px;height:30px}.duet-icon.x-large .duet-icon-svg{width:36px;height:36px}.duet-icon.xx-large .duet-icon-svg{width:48px;height:48px}.duet-icon.xxx-large .duet-icon-svg{width:48px;height:48px}@media (min-width: 48em){.duet-icon.xxx-large .duet-icon-svg{width:72px;height:72px}}.duet-icon .duet-icon-svg{display:block;width:24px;min-width:100%;height:24px;font-size:0}.duet-icon svg{width:100%;min-width:100%;fill:currentColor}";
+
+const DuetIcon = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme of the icon. This setting will be overridden when you set the color
+     * property
+     */
+    this.theme = "";
+    /**
+     * Icon name from Duet to display.
+     */
+    this.name = "action-add";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Whether the icon changes its size responsively or not.
+     */
+    this.responsive = true;
+    /**
+     * Custom color to be used for the icon, as a design token entered in camelCase
+     * or kebab-case. Example: "color-primary". This property can also be set to
+     * "currentColor" which forces the icon to use the CSS text color of parent
+     * element instead. Useful when you want to control the color in stylesheet
+     * instead.
+     */
+    this.color = "";
+    /**
+     * Custom color to be used for a circular background, as a design token entered
+     * in camelCase or kebab-case. Using this option the icon will always be resized
+     * to $size-icon-medium on mobile viewports. Example: "color-primary".
+     */
+    this.background = "";
+    /**
+     * Icon size. Entered as one of the icon size design tokens.
+     */
+    this.size = "medium";
+    /**
+     * Custom color to be used for a circular border and icon outline, as a design
+     * token entered in camelCase or kebab-case. Using this option the icon will
+     * always be resized to $size-icon-medium on mobile viewports.
+     * Example: "color-primary".
+     */
+    this.outline = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    if (this.src && this.icon) {
+      console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
+    }
+    this.loadIcon();
+  }
+  async loadIcon() {
+    // static icon known at build-time, so we can set it synchronously
+    if (this.icon) {
+      this.svgContent = this.icon;
+      return;
+    }
+    // dynamically load icon from url
+    const src = this.src ? this.src : buildIconUrl(this.name);
+    try {
+      this.svgContent = await fetchIconByUrl(src);
+    }
+    catch (e) {
+      console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG from URL: ${src}.`, e);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    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),
+    };
+    return (h(Host, { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-icon-has-outline": !!this.outline,
+        "duet-icon-has-background": !!this.background,
+      } }, h("div", { "aria-hidden": "true", style: styles, class: {
+        "duet-icon": true,
+        [this.size]: true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+        "duet-icon-has-outline": !!this.outline,
+        "duet-icon-has-background": !!this.background,
+        "duet-icon-not-responsive": !this.responsive,
+      } }, h("span", { "aria-hidden": "true", class: "duet-icon-svg", innerHTML: this.svgContent }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "src": ["loadIcon"],
+    "icon": ["loadIcon"],
+    "name": ["loadIcon"]
+  }; }
+  static get style() { return duetIconCss; }
+}, [1, "duet-icon", {
+    "theme": [1025],
+    "icon": [1],
+    "src": [1],
+    "name": [1],
+    "margin": [1],
+    "responsive": [4],
+    "color": [513],
+    "background": [1],
+    "size": [1],
+    "outline": [1],
+    "svgContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetIcon);
+      }
+      break;
+  } });
+}
+
+export { DuetIcon as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-53a0c93d.js

@@ -0,0 +1,37 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+
+const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";
+
+const DuetVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: "duet-visually-hidden" }, h("slot", null)));
+  }
+  static get style() { return duetVisuallyHiddenCss; }
+}, [1, "duet-visually-hidden"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetVisuallyHidden);
+      }
+      break;
+  } });
+}
+
+export { DuetVisuallyHidden as D, defineCustomElement as d };