@duetds/components 6.0.2 → 6.0.4

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

@@ -0,0 +1,341 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-3fc2d124.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-7739604d.js';
+import { d as defineCustomElement$2 } from './p-3d987b87.js';
+import { d as defineCustomElement$1 } from './p-b08e57cf.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-e4d5fbc0.js

@@ -0,0 +1,87 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { d as defineCustomElement$1 } from './p-e5c8a58f.js';
+
+const duetFieldsetCss = "*,*::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:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{border:0}legend{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}.duet-legend-wrapper{position:relative;display:block;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:600;line-height:1.5;color:#00294d;text-align:left;background:transparent}.duet-theme-turva .duet-legend-wrapper{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-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{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:#de2362;border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{color:#e02a0d}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const DuetFieldset = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.errorId = createID("DuetError");
+    this.labelId = createID("DuetLabel");
+    this.hasTooltip = false;
+    /**
+     * Theme of the fieldset.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    this.checkHasTooltip = () => {
+      this.hasTooltip = !!this.element.querySelector("[slot='tooltip']");
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.checkHasTooltip();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": `${this.labelId} ${this.errorId}`, class: {
+        "duet-fieldset": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("legend", { id: this.labelId }, h("span", null, this.label), this.caption && h("span", null, this.caption)), h("div", { class: {
+        "duet-legend-wrapper": true,
+        "duet-legend-has-caption": !!this.caption,
+        "duet-legend-has-tooltip": this.hasTooltip,
+        "duet-legend-hidden": this.labelHidden,
+      } }, h("div", { class: "duet-fieldset-label" }, h("span", { "aria-hidden": "true" }, this.label), h("slot", { onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { margin: "none" }, this.caption)))), h("slot", null), h("span", { class: "duet-fieldset-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+  }
+  get element() { return this; }
+  static get style() { return duetFieldsetCss; }
+}, [1, "duet-fieldset", {
+    "theme": [1025],
+    "margin": [1],
+    "caption": [1],
+    "label": [1],
+    "error": [1],
+    "labelHidden": [4, "label-hidden"],
+    "hasTooltip": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-fieldset", "duet-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-fieldset":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetFieldset);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetFieldset as D, defineCustomElement as d };

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

@@ -0,0 +1,71 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.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-ede854e1.js

@@ -0,0 +1,92 @@
+/*!
+ * Built with Duet Design System
+ */
+import { c as convertHtmlQuotes } from './p-5a9d75e1.js';
+
+const localeLookUpTable = {
+  fi: "fi-FI",
+  en: "en-GB",
+  us: "en-US",
+  sv: "sv-SE",
+};
+const localeMonetarySignifierLookUpTable = {
+  fi: "€",
+  en: "£",
+  us: "$",
+  sv: "€",
+};
+const defLanguageArray = ["fi", "en", "sv"];
+const defaultLanguage = "fi";
+const getCurrentLanguage = () => {
+  return document.documentElement.lang ? document.documentElement.lang.toLowerCase() : defaultLanguage;
+};
+const isOfTypeLanguage = (keyInput) => {
+  return defLanguageArray.includes(keyInput);
+};
+const checkForLanguage = (languageString = getCurrentLanguage()) => {
+  if (isOfTypeLanguage(languageString)) {
+    return languageString;
+  }
+  else {
+    return defaultLanguage;
+  }
+};
+/**
+ * Returns the current language as a string representation (taken from html lang attribute)
+ * If language is not fi|sv|en it will default to "fi"
+ * @param {string} lang=fi - "fi" | "sv" | "en"
+ * @default {string} "fi"
+ */
+const getLanguage = (languageString = getCurrentLanguage()) => checkForLanguage(languageString);
+/**
+ * Returns the current language and locale
+ * If language is not fi|sv|en it will default to "fi"
+ * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
+ * @param {string} lang="fi" - "fi" | "sv" | "en" | "us"
+ * @default {object} {locale: "fi-FI", money: "€"}
+ */
+const getLocale = (lang) => {
+  const returnObj = {
+    locale: localeLookUpTable[lang],
+    money: localeMonetarySignifierLookUpTable[lang],
+  };
+  if (returnObj.locale && returnObj.money) {
+    return returnObj;
+  }
+  throw new Error(`Locale for "${lang}" not found`);
+};
+/**
+ * Takes any json object that is passed and/or htmlencoded and converts it to proper json
+ */
+const sanitizeString = (string) => {
+  const argIsString = typeof string === "string";
+  if (argIsString) {
+    try {
+      return JSON.parse(convertHtmlQuotes(string));
+    }
+    catch (e) {
+      console.log("sanitizeString received a string, that didnt parse to json object", string, e);
+    }
+  }
+  return string;
+};
+/**
+ * Returns the current string / object from a given translation object
+ * If language is not fi|sv|en it will default to "fi"
+ * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
+ * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"} | string will get JSON.parsed
+ * @param {boolean} languageOverride = false - in case you want to override the actual language set in html tag
+ * @default {object} {locale: "fi-FI", money: "€"}
+ * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
+ */
+const getLocaleString = (langObject, languageOverride) => {
+  const obj = sanitizeString(langObject);
+  if (languageOverride) {
+    return obj[checkForLanguage(languageOverride)];
+  }
+  else {
+    return obj[getLanguage()];
+  }
+};
+
+export { getLanguage as a, getLocale as b, getLocaleString as g, sanitizeString as s };