@duetds/components 6.2.4 → 6.2.6

package/lib/esm/duet-section-layout.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as isInternetExplorer } from './is-internet-explorer-62b3bdbd.js';
 
 const duetSectionLayoutCss = "*,*::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;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main{display:block;width:100%}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}";
@@ -9,13 +9,7 @@ const duetSectionLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding
 const DuetSectionLayout = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Align container vertically in the middle when the space allows it.
-     */
     this.middle = false;
   }
   /**

package/lib/esm/duet-select.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { p as parsePossibleJSON } from './string-utils-5954f458.js';
@@ -36,70 +36,6 @@ const DuetSelect = class {
     this.labelId = createID("DuetLabel");
     this.topCaptionId = createID("DuetCaptionTop");
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.processedItems = null;
-    /**
-     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
-     */
-    this.variation = "default";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Display the select in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Theme of the select.
-     */
-    this.theme = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Hint text to display.
-     */
-    this.placeholder = "";
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * Makes the select component disabled. This prevents users from being able
-     * to interact with the select, and conveys its inactive state to assistive
-     * technologies.
-     */
-    this.disabled = false;
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Label for the select.
-     */
-    this.label = "label";
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
     /**
      * Component event handling.
      */
@@ -127,6 +63,30 @@ const DuetSelect = class {
         component: "duet-select",
       });
     };
+    this.processedItems = null;
+    this.variation = "default";
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.margin = "auto";
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.error = "";
+    this.expand = false;
+    this.value = undefined;
+    this.theme = "";
+    this.labelHidden = false;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.placeholder = "";
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.items = undefined;
+    this.disabled = false;
+    this.required = false;
+    this.label = "label";
+    this.role = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   valueChanged() {
     if (this.nativeSelect) {

package/lib/esm/duet-step_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { i as isKeyboardClick } from './keyboard-utils-88ea1007.js';
@@ -16,22 +16,6 @@ const DuetStep = class {
     this.duetStepClick = createEvent(this, "duetStepClick", 7);
     this.buttonId = createID("DuetStepButton");
     this.contentId = createID("DuetStepContent");
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * @internal
-     * Enable/disable rounded top corners (on mobile).
-     * This property is used internally by stepper, and should not be set by the developer.
-     */
-    this.roundedTop = false;
-    /**
-     * @internal
-     * Enable/disable rounded bottom corners (on mobile).
-     * This property is used internally by stepper, and should not be set by the developer.
-     */
-    this.roundedBottom = false;
     this.handleKeyDown = (e) => {
       if (this.isClickDisabled()) {
         return;
@@ -47,6 +31,13 @@ const DuetStep = class {
       }
       this.handleStepClick(e);
     };
+    this.theme = "";
+    this.heading = undefined;
+    this.headingLevel = undefined;
+    this.stepIndex = undefined;
+    this.state = undefined;
+    this.roundedTop = false;
+    this.roundedBottom = false;
   }
   handleStepClick(e) {
     this.duetStepClick.emit({
@@ -121,27 +112,10 @@ const DuetStepper = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.duetStepChange = createEvent(this, "duetStepChange", 7);
-    /**
-     * Theme of the component.
-     */
     this.theme = "";
-    /**
-     * Format of message used to announce current step when navigating between steps.
-     * The string {current} is replaced with current the step number.
-     * The string {total} is replaced with the total number of steps.
-     */
     this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Controls whether navigation back to previous steps is allowed or not.
-     */
     this.backDisabled = false;
-    /**
-     * The index of the current step.
-     */
     this.selected = 0;
   }
   currentStepChanged(nextStep) {

package/lib/esm/duet-submenu-bar-dropdown-link.entry.js

@@ -0,0 +1,39 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
+import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+
+const duetSubmenuBarDropdownLinkCss = "*,*::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;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:0.5rem;align-items:center;justify-content:flex-start;height:100%;padding:0.675rem 16px;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:#00294d;text-align:center;text-decoration:none}.duet-submenu-bar-dropdown-link.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:#171c3a}.duet-submenu-bar-dropdown-link:hover{color:#004d80;background:#f3f9fc}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}.duet-submenu-bar-dropdown-link.highlight{color:#0077b3}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:#c60c30}";
+
+const DuetSubmenuBarDropdownLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = "";
+    this.href = "#";
+    this.icon = undefined;
+    this.caret = false;
+    this.highlight = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("a", { class: {
+        "duet-submenu-bar-dropdown-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        highlight: this.highlight,
+      }, href: this.href, role: "menuitem" }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("slot", null), this.caret && h("duet-icon", { name: "action-arrow-right-small", size: "xxx-small", margin: "none" }))));
+  }
+  get element() { return getElement(this); }
+};
+DuetSubmenuBarDropdownLink.style = duetSubmenuBarDropdownLinkCss;
+
+export { DuetSubmenuBarDropdownLink as duet_submenu_bar_dropdown_link };

package/lib/esm/duet-submenu-bar-dropdown.entry.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
+import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+
+const duetSubmenuBarDropdownCss = "*,*::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;height:100%}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;height:100%;padding:12px 1.5rem;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:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:#004d80;background:#e6f2f8}.duet-submenu-bar-dropdown button:hover.active{color:#0077b3}.duet-submenu-bar-dropdown button.active{color:#0077b3}.duet-submenu-bar-dropdown button.active .caret{transform:rotate(180deg)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:#c60c30}.duet-submenu-bar-dropdown button.active::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(2px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after{background:#c60c30}.duet-submenu-bar-dropdown .items{position:absolute;top:101%;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:320px;color:#00294d;background:white;border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}.duet-submenu-bar-dropdown .items.hidden{display:none}.duet-submenu-bar-dropdown.duet-theme-turva 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:#171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button:hover{color:#940925;background:#e4e4e6}.duet-submenu-bar-dropdown.duet-theme-turva button.active{color:#c60c30}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-submenu-bar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
+
+const DuetSubmenuBarDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onClick = () => {
+      this.open = !this.open;
+    };
+    this.theme = "";
+    this.open = false;
+    this.icon = undefined;
+  }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-submenu-bar-dropdown": true, "duet-theme-turva": this.theme === "turva", active: this.open } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+        hidden: !this.open,
+      } }, h("slot", null)))));
+  }
+  get element() { return getElement(this); }
+};
+DuetSubmenuBarDropdown.style = duetSubmenuBarDropdownCss;
+
+export { DuetSubmenuBarDropdown as duet_submenu_bar_dropdown };

package/lib/esm/duet-submenu-bar-link.entry.js

@@ -0,0 +1,33 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
+import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+
+const duetSubmenuBarLinkCss = "*,*::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;height:100%}.duet-submenu-bar-link{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;height:100%;padding:12px 1.5rem;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:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}.duet-submenu-bar-link.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:#171c3a}.duet-submenu-bar-link:hover{color:#004d80;background:#e6f2f8}.duet-submenu-bar-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}";
+
+const DuetSubmenuBarLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = "";
+    this.href = "#";
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("slot", null))));
+  }
+  get element() { return getElement(this); }
+};
+DuetSubmenuBarLink.style = duetSubmenuBarLinkCss;
+
+export { DuetSubmenuBarLink as duet_submenu_bar_link };

package/lib/esm/duet-submenu-bar.entry.js

@@ -0,0 +1,31 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
+import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
+
+const duetSubmenuBarCss = "*,*::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;width:100%}.duet-submenu-bar{z-index:1;display:flex;align-items:center;justify-content:center;background:#f3f9fc;border-bottom:1px solid #cde5f1}.duet-submenu-bar.duet-theme-turva{background:#f5f5f7;border-bottom:1px solid #e4e4e6}";
+
+const DuetSubmenuBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("slot", null))));
+  }
+  get element() { return getElement(this); }
+};
+DuetSubmenuBar.style = duetSubmenuBarCss;
+
+export { DuetSubmenuBar as duet_submenu_bar };

package/lib/esm/duet-textarea.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { c as cleanValue } from './input-utils-de45e099.js';
@@ -33,84 +33,6 @@ const DuetTextarea = class {
     this.labelId = createID("DuetLabel");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Aria Details of the component
-     */
-    this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
-    this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
-    this.accessibleDescription = undefined;
-    /**
-     * Theme of the textarea.
-     */
-    this.theme = "";
-    /**
-     * Expands the textarea to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Makes the textarea component disabled. This prevents users from being able
-     * to interact with the textarea, and conveys its inactive state to assistive
-     * technologies.
-     */
-    this.disabled = false;
-    /**
-     * Set whether the textarea is required or not. Please note that this is required for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Label for the textarea.
-     */
-    this.label = "label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * Display the textarea in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
-    /**
-     * Value of the textarea.
-     */
-    this.value = "";
-    /**
-     * A regular expression that matches any characters which should be *disallowed*.
-     * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
-     * e.g. the following will disallow any non-numeric characters `[^0-9]`
-     */
-    this.disallowPattern = null;
-    /**
-     * Display character counter. Must be used in conjunction with
-     * **maxlength** and **counterLabel** properties.
-     */
-    this.counter = false;
     /**
      * Component event handling.
      */
@@ -148,6 +70,36 @@ const DuetTextarea = class {
         component: "duet-textarea",
       });
     };
+    this.margin = "auto";
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleAutocomplete = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.theme = "";
+    this.expand = false;
+    this.disabled = false;
+    this.identifier = undefined;
+    this.required = false;
+    this.label = "label";
+    this.labelHidden = false;
+    this.name = undefined;
+    this.placeholder = undefined;
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.maxlength = undefined;
+    this.minlength = undefined;
+    this.error = "";
+    this.role = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
+    this.value = "";
+    this.disallowPattern = null;
+    this.counter = false;
+    this.counterLabel = undefined;
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;

package/lib/esm/duet-toggle.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 
@@ -16,53 +16,30 @@ const DuetToggle = class {
      */
     this.toggleId = createID("DuetToggle");
     /**
-     * Theme of the card.
+     * Component event handling.
      */
+    this.onClick = (ev) => {
+      ev.preventDefault();
+      this.setFocus();
+      this.checked = !this.checked;
+    };
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Aria Details of the component
-     */
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
     this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Label for the toggle.
-     */
     this.label = "label";
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
     this.required = false;
-    /**
-     * Makes the input component disabled. This prevents users from being able to
-     * interact with the input, and conveys its inactive state to assistive technologies.
-     */
     this.disabled = false;
-    /**
-     * Check state of the checkbox.
-     */
     this.checked = false;
-    /**
-     * Component event handling.
-     */
-    this.onClick = (ev) => {
-      ev.preventDefault();
-      this.setFocus();
-      this.checked = !this.checked;
-    };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.role = undefined;
   }
   checkedChanged(isChecked) {
     this.duetChange.emit({

package/lib/esm/duet-toolbar-dropdown-link.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 
 const duetToolbarDropdownLinkCss = "*,*::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;width:100%;height:100%}.duet-toolbar-dropdown-link{display:flex;flex-direction:row;gap:0.5rem;align-items:center;justify-content:flex-start;height:100%;padding:0.5rem 20px;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:#00294d;text-align:center;text-decoration:none}.duet-toolbar-dropdown-link.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:#171c3a}.duet-toolbar-dropdown-link.active,.duet-toolbar-dropdown-link.active:hover{color:white;background:#0077b3}.duet-toolbar-dropdown-link.active.duet-theme-turva,.duet-toolbar-dropdown-link.active:hover.duet-theme-turva{color:white;background:#c60c30}.duet-toolbar-dropdown-link:hover{background:#e6f2f8}.duet-toolbar-dropdown-link:hover.duet-theme-turva{background:#e4e4e6}";
@@ -9,21 +9,9 @@ const duetToolbarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;p
 const DuetToolbarDropdownLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Theme.
-     */
     this.theme = "";
-    /**
-     * Href
-     */
     this.href = "#";
-    /**
-     * Icon
-     */
     this.icon = undefined;
-    /**
-     * Active
-     */
     this.active = false;
   }
   /**

package/lib/esm/duet-toolbar-dropdown.entry.js

@@ -1,44 +1,27 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-adbabdb3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f74e4d6a.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 
-const duetToolbarDropdownCss = "*,*::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;height:100%}.duet-toolbar-dropdown{position:relative;z-index:1;height:100%}.duet-toolbar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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:#004d80;text-align:center;text-decoration:none;cursor:pointer}.duet-toolbar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-toolbar-dropdown button:hover{color:#00294d;background:#f3f9fc}.duet-toolbar-dropdown button.open .caret{transform:rotate(180deg)}.duet-toolbar-dropdown button.active,.duet-toolbar-dropdown button.open{color:#00294d}.duet-toolbar-dropdown button.active::after,.duet-toolbar-dropdown button.open::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(1px)}.duet-toolbar-dropdown .items{position:absolute;top:102%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:175px;padding:1rem 0;color:#00294d;background:#f3f9fc;border-radius:0 0 8px 8px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}.duet-toolbar-dropdown .items.hidden{display:none}.duet-toolbar-dropdown.right .items{right:auto;left:0%}.duet-toolbar-dropdown.duet-theme-turva 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:#940925}.duet-toolbar-dropdown.duet-theme-turva button:hover{color:#171c3a;background:#f5f5f7}.duet-toolbar-dropdown.duet-theme-turva button.active{color:#171c3a}.duet-toolbar-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-toolbar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
+const duetToolbarDropdownCss = "*,*::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;height:100%}.duet-toolbar-dropdown{position:relative;height:100%}.duet-toolbar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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:#004d80;text-align:center;text-decoration:none;cursor:pointer}.duet-toolbar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-toolbar-dropdown button:hover{color:#00294d;background:#f3f9fc}.duet-toolbar-dropdown button.open .caret{transform:rotate(180deg)}.duet-toolbar-dropdown button.active,.duet-toolbar-dropdown button.open{color:#00294d}.duet-toolbar-dropdown button.active::after,.duet-toolbar-dropdown button.open::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(1px)}.duet-toolbar-dropdown .items{position:absolute;top:102%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:175px;padding:1rem 0;color:#00294d;background:#f3f9fc;border-radius:0 0 8px 8px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}.duet-toolbar-dropdown .items.hidden{display:none}.duet-toolbar-dropdown.right .items{right:auto;left:0%}.duet-toolbar-dropdown.duet-theme-turva 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:#940925}.duet-toolbar-dropdown.duet-theme-turva button:hover{color:#171c3a;background:#f5f5f7}.duet-toolbar-dropdown.duet-theme-turva button.active,.duet-toolbar-dropdown.duet-theme-turva button.open{color:#171c3a}.duet-toolbar-dropdown.duet-theme-turva button.active::after,.duet-toolbar-dropdown.duet-theme-turva button.open::after{background:#c60c30}.duet-toolbar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
 
 const DuetToolbarDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.duetToolbarDropdownEvent = createEvent(this, "duetToolbarDropdownEvent", 7);
-    /**
-     * Theme.
-     */
+    this.onClick = () => {
+      this.open = !this.open;
+    };
     this.theme = "";
-    /**
-     * Active
-     */
     this.active = false;
-    /**
-     * Open
-     */
     this.open = false;
-    /**
-     * Icon
-     */
     this.icon = undefined;
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetToolbarDropdownEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-toolbar-dropdown",
-      });
-    };
-    this.onClick = (e) => {
-      this.toggleMenu(e);
-      e.stopImmediatePropagation();
-    };
+  }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.open = false;
+    }
   }
   /**
    * Component lifecycle events.