@duetds/components 6.2.4 → 6.2.6

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -1,21 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetEmptyState {
   constructor() {
-    /**
-     * Theme of the empty state component.
-     */
     this.theme = "";
-    /**
-     * Icon shown in the empty state component.
-     */
     this.icon = "messaging-question";
-    /**
-     * The size of the empty state message.
-     */
     this.size = "medium";
   }
   /**
@@ -29,92 +20,94 @@ export class DuetEmptyState {
    * 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)))));
+    return (h(Host, null, h("div", { class: {
+        "duet-empty-state": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-is-small": this.size === "small",
+      } }, h("duet-icon", { color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", null, h("slot", null)))));
   }
   static get is() { return "duet-empty-state"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-empty-state.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-empty-state.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-empty-state.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-empty-state.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the empty state component."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the empty state component."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon shown in the empty state component."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon shown in the empty state component."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"messaging-question\""
       },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "\"messaging-question\""
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetEmptyStateSize",
-        "resolved": "\"medium\" | \"small\"",
-        "references": {
-          "DuetEmptyStateSize": {
-            "location": "local"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetEmptyStateSize",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {
+            "DuetEmptyStateSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the empty state message."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "\"medium\""
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the empty state message."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      }
+    };
+  }
 }

package/lib/collection/components/duet-fieldset/duet-fieldset.css

@@ -30,6 +30,8 @@
 }
 
 fieldset {
+  width: 100%;
+  min-width: 0;
   border: 0;
 }
 

package/lib/collection/components/duet-fieldset/duet-fieldset.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 /**
@@ -12,22 +12,16 @@ export class DuetFieldset {
   constructor() {
     this.errorId = createID("DuetError");
     this.labelId = createID("DuetLabel");
+    this.checkHasTooltip = () => {
+      this.hasTooltip = !!this.element.querySelector("[slot='tooltip']");
+    };
     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.caption = undefined;
+    this.label = undefined;
+    this.error = undefined;
     this.labelHidden = false;
-    this.checkHasTooltip = () => {
-      this.hasTooltip = !!this.element.querySelector("[slot='tooltip']");
-    };
   }
   /**
    * Component lifecycle events.
@@ -41,155 +35,151 @@ export class DuetFieldset {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h("fieldset", { "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-errormessage": this.error ? this.errorId : null, 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-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-errormessage": this.error ? this.errorId : null, 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-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-fieldset"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-fieldset.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-fieldset.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-fieldset.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-fieldset.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the fieldset."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the fieldset."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Additional caption to show next to the label."
+        },
+        "attribute": "caption",
+        "reflect": false
       },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label/legend displayed for the fieldset."
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Additional caption to show next to the label."
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An error message to be shown next to the label."
+        },
+        "attribute": "error",
+        "reflect": false
       },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label/legend displayed for the fieldset."
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An error message to be shown next to the label."
-      },
-      "attribute": "error",
-      "reflect": false
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasTooltip": {}
-  }; }
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the label, but still show it to screen readers."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasTooltip": {}
+    };
+  }
   static get elementRef() { return "element"; }
 }