@duetds/components 8.0.6 → 8.1.1

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

@@ -0,0 +1,53 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function restores cursor position after changing input
+ *
+ * @example
+ * const resetCursor = storeAndResetCursor(this.input.selectionStart,this.input.selectionEnd)
+ * this.input.changeValueAndForceUpdateOfCursoPosition()
+ * resetCursor()
+ */
+function resetCursor(domElement) {
+    if (domElement && domElement.selectionStart) {
+        const start = domElement.selectionStart;
+        const end = domElement.selectionEnd;
+        return function () {
+            if (start === end) {
+                domElement.selectionStart = start;
+                domElement.selectionEnd = end;
+            }
+            else {
+                domElement.setSelectionRange(start, end);
+            }
+        };
+    }
+    return () => true;
+}
+/**
+ * Given an input and a regex, remove any characters from the input's value
+ * which match the regex, *whilst* maintaining cursor position.
+ *
+ * In effect, this prevent users from entering specific characters.
+ *
+ * @example
+ * input.value = "foo123"
+ * cleanValue(input, /[^0-9]/g)
+ * input.value === "123"
+ */
+function cleanValue(input, regex) {
+    const value = input.value;
+    const cursor = input.selectionStart;
+    const beforeCursor = value.slice(0, cursor);
+    const afterCursor = value.slice(cursor, value.length);
+    const filteredBeforeCursor = beforeCursor.replace(regex, "");
+    const filterAfterCursor = afterCursor.replace(regex, "");
+    const newValue = filteredBeforeCursor + filterAfterCursor;
+    const newCursor = filteredBeforeCursor.length;
+    input.value = newValue;
+    input.selectionStart = input.selectionEnd = newCursor;
+    return newValue;
+}
+
+export { cleanValue as c, resetCursor as r };

package/lib/dist-custom-elements/{p-3ccd454b.js → p-e034dfea.js}

@@ -1,55 +1,55 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-7247d0b2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
 
 const duetSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.duet-spacer-horizontal){display:inline-block;height:100% !important}:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.duet-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.duet-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.small){width:12px;min-width:12px}}:host(.duet-spacer-horizontal.medium){height:100%}:host(.duet-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.large){width:20px;min-width:20px}}:host(.duet-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.duet-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.duet-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.duet-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.duet-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.duet-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.duet-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.duet-spacer-vertical.small){height:12px;min-height:12px}}:host(.duet-spacer-vertical.medium){width:100%}:host(.duet-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.duet-spacer-vertical.large){height:20px;min-height:20px}}:host(.duet-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.duet-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.duet-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.duet-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.duet-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}@media (min-width: 36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}@media (min-width: 48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}@media (min-width: 62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.duet-spacer-xx-large){display:block}}";
 
 const DuetSpacer = /*@__PURE__*/ proxyCustomElement(class DuetSpacer extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = "medium";
-    this.direction = "vertical";
-    this.breakpoint = "";
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, { class: {
-        "duet-spacer": true,
-        "duet-spacer-xx-small": this.breakpoint === "xx-small",
-        "duet-spacer-x-small": this.breakpoint === "x-small",
-        "duet-spacer-small": this.breakpoint === "small",
-        "duet-spacer-medium": this.breakpoint === "medium",
-        "duet-spacer-large": this.breakpoint === "large",
-        "duet-spacer-x-large": this.breakpoint === "x-large",
-        "duet-spacer-xx-large": this.breakpoint === "xx-large",
-        [this.size]: true,
-        [`duet-spacer-${this.direction}`]: true,
-      } }));
-  }
-  static get style() { return duetSpacerCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = "medium";
+        this.direction = "vertical";
+        this.breakpoint = "";
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, { class: {
+                "duet-spacer": true,
+                "duet-spacer-xx-small": this.breakpoint === "xx-small",
+                "duet-spacer-x-small": this.breakpoint === "x-small",
+                "duet-spacer-small": this.breakpoint === "small",
+                "duet-spacer-medium": this.breakpoint === "medium",
+                "duet-spacer-large": this.breakpoint === "large",
+                "duet-spacer-x-large": this.breakpoint === "x-large",
+                "duet-spacer-xx-large": this.breakpoint === "xx-large",
+                [this.size]: true,
+                [`duet-spacer-${this.direction}`]: true,
+            } }));
+    }
+    static get style() { return duetSpacerCss; }
 }, [1, "duet-spacer", {
-    "size": [1],
-    "direction": [1],
-    "breakpoint": [1]
-  }]);
+        "size": [1],
+        "direction": [1],
+        "breakpoint": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-spacer"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-spacer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetSpacer);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-spacer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-spacer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetSpacer);
+            }
+            break;
+    } });
 }
 
 export { DuetSpacer as D, defineCustomElement as d };

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

@@ -0,0 +1,62 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { d as defineCustomElement$1 } from './p-65d472d7.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:rgb(0, 41, 77);text-align:center;background:rgb(245, 248, 250);border-radius:4px}.duet-empty-state.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}";
+
+const DuetEmptyState = /*@__PURE__*/ proxyCustomElement(class DuetEmptyState extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.theme = "";
+        this.icon = "messaging-question";
+        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)))));
+    }
+    get element() { return this; }
+    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-eef66341.js

@@ -0,0 +1,18 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from './p-62c7d9d4.js';
+
+const focusElement = (element) => {
+    if ("setFocus" in element) {
+        element.setFocus();
+    }
+    else {
+        element.focus();
+    }
+};
+const FocusGuard = ({ moveFocusTo }) => {
+    return h("div", { class: "duet-focus-guard", "aria-hidden": "true", tabIndex: 0, onFocus: () => focusElement(moveFocusTo) });
+};
+
+export { FocusGuard as F, focusElement as f };

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

@@ -0,0 +1,206 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { c as createID } from './p-5e59e970.js';
+import { d as debounce } from './p-9e371678.js';
+import { i as isKeyboardClick } from './p-8f253845.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2e36d5bf.js';
+import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-57a1cba9.js';
+import { d as defineCustomElement$2 } from './p-65d472d7.js';
+import { d as defineCustomElement$1 } from './p-68bd36c7.js';
+
+const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(0, 41, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9e9eb}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#ddddde !important}.duet-action-button:disabled{color:rgb(144, 149, 153);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(116, 116, 117);background:rgb(245, 245, 247)}";
+
+const DuetActionButton = /*@__PURE__*/ proxyCustomElement(class DuetActionButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.duetActionEvent = createEvent(this, "duetActionEvent", 6);
+        this.listId = createID("duet-action-button");
+        /**
+         * Private methods.
+         */
+        //helper to emit relevant page events
+        this.emitPageEvent = debounce(e => {
+            this.duetActionEvent.emit({
+                component: "duet-action-button",
+                originalEvent: e,
+                action: this.actionId,
+                name: this.actionName,
+                meta: this.actionMeta,
+                id: this.listId,
+            });
+        });
+        this.numbersStore = "";
+        this.theme = "";
+        this.iconName = "action-arrow-left-small";
+        this.iconColor = "currentColor";
+        this.iconSize = "xx-small";
+        this.actionName = "default-action";
+        this.actionId = undefined;
+        this.actionMeta = undefined;
+        this.disabled = false;
+        this.color = "";
+        this.background = "";
+        this.accessibleTitle = true;
+        this.accessibleDescribedBy = undefined;
+        this.accessibleDetails = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleDescription = undefined;
+        this.accessibleLabelsDefaults = {
+            en: "Click to activate action",
+            fi: "Klikkaa aktivoidaksesi toiminto",
+            sv: "Klicka för att aktivera åtgärd",
+        };
+        this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
+        this.accessibleControls = "";
+        this.url = undefined;
+    }
+    //handle a11y keyboard navigation events
+    async onKeyboardDown(e) {
+        if (isKeyboardClick(e)) {
+            this.emitPageEvent(e);
+        }
+    }
+    //return readable title for the action-button
+    getTitle() {
+        let titleString = "";
+        if (typeof this.accessibleTitle === "string") {
+            titleString = this.accessibleTitle;
+        }
+        if (this.accessibleTitle === true) {
+            titleString = capitalizeFirstLetter(`${this.actionName}`);
+        }
+        return titleString;
+    }
+    async onMouseHandler(e) {
+        e.preventDefault();
+        this.duetActionEvent.emit({
+            component: "duet-action-button",
+            originalEvent: e,
+            action: this.actionName,
+            id: this.actionId,
+            meta: this.actionMeta,
+        });
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelsDefaults" });
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
+    /**
+     * Sets focus on the specified `duet-action-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 color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+        const backgroundColor = getColorByName(this.background, this.theme);
+        const backgroundHoverColor = backgroundColor ? shadeRGBColor(backgroundColor, -0.1) : backgroundColor;
+        const backgroundStyles = backgroundColor
+            ? `
+          button.duet-action-button {
+            background: ${backgroundColor} !important;
+          }
+          button.duet-action-button:not(:disabled):hover {
+            background: ${backgroundHoverColor} !important;
+          }
+        `
+            : "";
+        const styles = {
+            color,
+            "border-color": getColorByName(this.iconColor, this.theme),
+            "border-width": "1px",
+            "border-style": "solid",
+        };
+        const commonProps = {
+            ref: button => (this.nativeButton = button),
+            part: "button",
+            style: styles,
+            disabled: this.disabled,
+            id: this.listId,
+            type: "button",
+            "aria-label": this.accessibleLabel,
+            "aria-labelledby": this.accessibleLabelledBy,
+            "aria-description": this.accessibleDescription,
+            "aria-describedby": this.accessibleDescribedBy,
+            "aria-details": this.accessibleDetails,
+            "aria-controls": this.accessibleControls,
+            title: this.getTitle(),
+            class: {
+                "duet-action-button": true,
+                "duet-action-button--disabled": this.disabled,
+                [`duet-action-button--${this.theme}`]: this.theme !== "",
+                "duet-theme-turva": this.theme === "turva",
+            },
+        };
+        return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("style", { innerHTML: backgroundStyles }), this.url && !this.disabled ? (h("a", Object.assign({}, commonProps, { href: this.url }), h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }))) : (h("button", Object.assign({}, commonProps, { onClick: e => this.onMouseHandler(e) }), h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h("duet-visually-hidden", null, h("slot", null))))));
+    }
+    get element() { return this; }
+    static get style() { return duetActionButtonCss; }
+}, [1, "duet-action-button", {
+        "theme": [1025],
+        "iconName": [1, "icon-name"],
+        "iconColor": [1, "icon-color"],
+        "iconSize": [1, "icon-size"],
+        "actionName": [1, "action-name"],
+        "actionId": [1, "action-id"],
+        "actionMeta": [1, "action-meta"],
+        "disabled": [4],
+        "color": [513],
+        "background": [1],
+        "accessibleTitle": [8, "title"],
+        "accessibleDescribedBy": [1, "accessible-described-by"],
+        "accessibleDetails": [1, "accessible-details"],
+        "accessibleLabelledBy": [1, "accessible-labelled-by"],
+        "accessibleDescription": [1, "accessible-description"],
+        "accessibleLabelsDefaults": [16],
+        "accessibleLabel": [1025, "accessible-label"],
+        "accessibleControls": [1, "accessible-controls"],
+        "url": [513],
+        "numbersStore": [32],
+        "setFocus": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-action-button", "duet-icon", "duet-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-action-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetActionButton);
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DuetActionButton as D, defineCustomElement as d };

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

@@ -0,0 +1,93 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { h as hasSlot } from './p-11230037.js';
+import { c as createID } from './p-5e59e970.js';
+import { d as defineCustomElement$1 } from './p-435c14fe.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{position:relative;width:100%;min-width:0;border:0}fieldset 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:rgb(0, 41, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.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:rgb(23, 28, 58)}.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:rgb(222, 35, 98);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(224, 42, 13)}::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 DuetFieldset extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.errorId = createID("DuetError");
+        this.labelId = createID("DuetLabel");
+        this.checkHasTooltip = () => {
+            this.hasTooltip = hasSlot(this.element, "tooltip");
+        };
+        this.hasTooltip = false;
+        this.theme = "";
+        this.margin = "auto";
+        this.caption = undefined;
+        this.label = undefined;
+        this.compactLabel = false;
+        this.error = undefined;
+        this.accessibleLiveError = "polite";
+        this.labelHeadingLevel = "h3";
+        this.labelHidden = false;
+    }
+    /**
+     * 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, "aria-describedby": this.error ? this.errorId : null,
+            // NVDA and VoiceOver do not yet support aria-errormessage
+            // once they do, we can remove errors from the aria-describedby
+            // aria-errormessage={this.error ? this.errorId : null}
+            class: {
+                "duet-fieldset": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("legend", { id: this.labelId }, h(this.labelHeadingLevel, 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,
+                "duet-legend-compact": this.compactLabel,
+            } }, 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-atomic": "true", "aria-live": this.accessibleLiveError, "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],
+        "compactLabel": [4, "compact-label"],
+        "error": [1],
+        "accessibleLiveError": [1, "accessible-live-error"],
+        "labelHeadingLevel": [1, "label-heading-level"],
+        "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 };