@duetds/components 6.2.4 → 6.2.6

package/lib/cjs/duet-input_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const formSearch = require('./form-search-d61b2843.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
@@ -50,111 +50,6 @@ const DuetInput = class {
       fi: "Aika",
       sv: "Tid",
     });
-    /**
-     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
-     */
-    this.accessibleDescribedBy = "";
-    /**
-     * Indicates value of any popup element associated with the input.
-     */
-    this.accessibleHasPopup = undefined;
-    /**
-     * 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;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
-     * event after each keystroke.
-     */
-    this.debounce = 0;
-    /**
-     * If set, the input field will display a clear button that can be accessed with tabbing.
-     */
-    this.clear = false;
-    /**
-     * 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;
-    /**
-     * Theme of the input.
-     */
-    this.theme = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = 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;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * 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;
-    /**
-     * Type of the input.
-     */
-    this.type = "text";
-    /**
-     * Variation of button.
-     */
-    this.variation = "default";
-    /**
-     * Label for the input.
-     */
-    this.label = "label";
-    /**
-     * Display the input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Enable numeric keyboard for the input.
-     */
-    this.numericKeyboard = false;
-    /**
-     * Used internally in Duet to adjust whether this component acts as e.g. number input.
-     */
-    this.component = "input";
-    /**
-     * Enable or disable automatic completion by the browser
-     */
-    this.autoComplete = "on";
-    /**
-     * 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;
-    /**
-     * 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.
      */
@@ -220,6 +115,45 @@ const DuetInput = class {
       }
       return event;
     };
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleAutocomplete = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleExpanded = undefined;
+    this.accessibleDescribedBy = "";
+    this.accessibleHasPopup = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.debounce = 0;
+    this.clear = false;
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.theme = "";
+    this.expand = false;
+    this.disabled = false;
+    this.identifier = undefined;
+    this.margin = "auto";
+    this.required = false;
+    this.type = "text";
+    this.variation = "default";
+    this.label = "label";
+    this.error = "";
+    this.labelHidden = false;
+    this.numericKeyboard = false;
+    this.name = undefined;
+    this.pattern = undefined;
+    this.maxlength = undefined;
+    this.minlength = undefined;
+    this.placeholder = undefined;
+    this.component = "input";
+    this.role = undefined;
+    this.icon = undefined;
+    this.autoComplete = "on";
+    this.disallowPattern = null;
+    this.value = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
@@ -348,17 +282,9 @@ const duetLabelCss = "*.sc-duet-label,*.sc-duet-label::after,*.sc-duet-label::be
 const DuetLabel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Theme of the label.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
+    this.for = undefined;
     this.margin = "auto";
-    /**
-     * Controls the size of the label.
-     */
     this.size = "medium";
   }
   /**

package/lib/cjs/duet-layout.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetLayoutCss = "*,*::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 (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@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,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";
@@ -18,35 +18,12 @@ const DuetLayout = class {
      */
     this.hasSidebar = false;
     this.hasTop = false;
-    /**
-     * Makes the sidebar stick to the top of the window when scrolling down.
-     */
     this.sticky = false;
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Adjust sticky sidebar’s distance to duet navigation component using this property.
-     */
     this.stickyDistance = "with-links";
-    /**
-     * Center align all direct children of this component.
-     */
     this.center = false;
-    /**
-     * If set to true, the sidebar position will be adjusted to take tabs inside main content
-     * area into account.
-     */
     this.tabs = false;
-    /**
-     * Align container vertically in the middle when the space allows it.
-     */
     this.middle = false;
-    /**
-     * Breakpoint used to remove padding. These match to
-     * similar media query tokens: $media-query-small and $media-query-medium.
-     */
     this.paddingBreakpoint = undefined;
   }
   /**

package/lib/cjs/duet-list_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 
@@ -14,34 +14,12 @@ const duetListCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin
 const DuetList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Theme of the list.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
     this.padding = "auto";
-    /**
-     * Adjusts the alignment of the list items on mobile breakpoint.
-     */
     this.mobile = "left";
-    /**
-     * Switch the breakpoint used to trigger the content stacking. These match to
-     * similar media query tokens: $media-query-small and $media-query-large.
-     */
     this.breakpoint = "small";
-    /**
-     * Style variation of the list.
-     */
     this.variation = "default";
-    /**
-     * Set the column width of the first column in percentages.
-     */
     this.labelWidth = "30";
   }
   /**

package/lib/cjs/duet-menu-bar-dropdown-link.cjs.entry.js

@@ -5,26 +5,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
-const duetMenuBarDropdownLinkCss = "*,*::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-menu-bar-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-menu-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-menu-bar-dropdown-link:hover{background:#e6f2f8}.duet-menu-bar-dropdown-link:hover.duet-theme-turva{background:#e4e4e6}";
+const duetMenuBarDropdownLinkCss = "*,*::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-menu-bar-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-menu-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-menu-bar-dropdown-link--slot-right:hover{background:#e6f2f8}.duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva{background:#e4e4e6}.duet-menu-bar-dropdown-link--slot-below:hover{color:#004d80;background:#f3f9fc}.duet-menu-bar-dropdown-link--slot-below:hover.duet-theme-turva{color:#940925;background:#e4e4e6}";
 
 const DuetMenuBarDropdownLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Theme.
-     */
+    this.getVariant = () => {
+      const slot = this.element.parentElement.parentElement.getAttribute("slot");
+      switch (slot) {
+        case "center":
+          return "right";
+        case "right":
+          return "right";
+        default:
+          return "right";
+      }
+    };
     this.theme = "";
-    /**
-     * Href
-     */
     this.href = "#";
-    /**
-     * Icon
-     */
     this.icon = undefined;
+    this.caret = false;
   }
   /**
    * Component lifecycle events.
@@ -39,6 +42,7 @@ const DuetMenuBarDropdownLink = class {
   render() {
     return (index.h(index.Host, null, index.h("a", { class: {
         "duet-menu-bar-dropdown-link": true,
+        [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
         "duet-theme-turva": this.theme === "turva",
       }, href: this.href, role: "menuitem" }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("slot", null))));
   }

package/lib/cjs/duet-menu-bar-dropdown.cjs.entry.js

@@ -5,40 +5,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
-const duetMenuBarDropdownCss = "*,*::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-menu-bar-dropdown{position:relative;height:100%}.duet-menu-bar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;min-height:5rem;padding:0 12px;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}@media (min-width: 62em){.duet-menu-bar-dropdown button{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-dropdown button{padding:0 28px}}.duet-menu-bar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-menu-bar-dropdown button:hover{color:#0077b3}.duet-menu-bar-dropdown button.active{color:#0077b3}.duet-menu-bar-dropdown button.active .caret{transform:rotate(180deg)}.duet-theme-turva .duet-menu-bar-dropdown button.active{color:#c60c30}.duet-menu-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-menu-bar-dropdown button.active::after{background:#c60c30}.duet-menu-bar-dropdown .items{position:absolute;right:0%;left:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:225px;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-menu-bar-dropdown .items.hidden{display:none}.duet-menu-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:#940925}.duet-menu-bar-dropdown.duet-theme-turva button:hover{color:#c60c30}.duet-menu-bar-dropdown.duet-theme-turva button.active{color:#c60c30}.duet-menu-bar-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-menu-bar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
+const duetMenuBarDropdownCss = "*,*::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-menu-bar-dropdown{position:relative;height:100%}.duet-menu-bar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;min-height:5rem;padding:0 12px;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}@media (min-width: 62em){.duet-menu-bar-dropdown button{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-dropdown button{padding:0 28px}}.duet-menu-bar-dropdown button:hover{color:#0077b3}.duet-menu-bar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-menu-bar-dropdown button.active{color:#0077b3}.duet-menu-bar-dropdown button.active .caret{transform:rotate(180deg)}.duet-theme-turva .duet-menu-bar-dropdown button.active{color:#c60c30}.duet-menu-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-menu-bar-dropdown button.active::after{background:#c60c30}.duet-menu-bar-dropdown .items{position:absolute;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:225px;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-menu-bar-dropdown .items.hidden{display:none}.duet-menu-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:#940925}.duet-menu-bar-dropdown.duet-theme-turva button:hover{color:#c60c30}.duet-menu-bar-dropdown.duet-theme-turva button.active{color:#c60c30}.duet-menu-bar-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-menu-bar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
 
 const DuetMenuBarDropdown = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.duetMenuBarDropdownEvent = index.createEvent(this, "duetMenuBarDropdownEvent", 7);
-    /**
-     * Theme.
-     */
+    this.onClick = () => {
+      this.open = !this.open;
+    };
+    this.getVariant = () => {
+      const slot = this.element.parentElement.getAttribute("slot");
+      switch (slot) {
+        case "center":
+          return "right";
+        case "right":
+          return "right";
+        default:
+          return "right";
+      }
+    };
     this.theme = "";
-    /**
-     * Open
-     */
     this.open = false;
-    /**
-     * Icon
-     */
     this.icon = undefined;
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetMenuBarDropdownEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-menu-bar-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.
@@ -51,7 +48,12 @@ const DuetMenuBarDropdown = class {
    * Always the last one in the class.
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: { "duet-menu-bar-dropdown": true, "duet-theme-turva": this.theme === "turva", active: this.open } }, index.h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "duet-menu-bar-dropdown": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+        [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
+      } }, index.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 && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), index.h("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,

package/lib/cjs/duet-menu-bar-link.cjs.entry.js

@@ -5,25 +5,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
-const duetMenuBarLinkCss = "*,*::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-menu-bar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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}@media (min-width: 62em){.duet-menu-bar-link{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-link{padding:0 28px}}.duet-menu-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:#940925}.duet-menu-bar-link:hover{color:#0077b3}.duet-menu-bar-link:hover.duet-theme-turva{color:#c60c30}";
+const duetMenuBarLinkCss = "*,*::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-menu-bar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";text-align:center;text-decoration:none}@media (min-width: 62em){.duet-menu-bar-link{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-link{padding:0 28px}}.duet-menu-bar-link.active{color:#0077b3}.duet-theme-turva .duet-menu-bar-link.active{color:#c60c30}.duet-menu-bar-link.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-menu-bar-link--slot-center{font-size:1rem;font-weight:600;line-height:1.25;color:#00294d}.duet-menu-bar-link--slot-center.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:#940925}.duet-menu-bar-link--slot-center.active.duet-theme-turva::after{background:#c60c30}.duet-menu-bar-link--slot-center:hover{color:#0077b3}.duet-menu-bar-link--slot-center:hover.duet-theme-turva{color:#c60c30}.duet-menu-bar-link--slot-right{font-size:0.875rem;font-weight:400;line-height:1.25;color:#004d80}.duet-menu-bar-link--slot-right.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:#940925}.duet-menu-bar-link--slot-right:hover{color:#0077b3}.duet-menu-bar-link--slot-right:hover.duet-theme-turva{color:#c60c30}";
 
 const DuetMenuBarLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Theme.
-     */
+    this.getVariant = () => {
+      const slot = this.element.parentElement.getAttribute("slot");
+      switch (slot) {
+        case "center":
+          return "center";
+        case "right":
+          return "right";
+        case "below":
+          return "below";
+        default:
+          return "center";
+      }
+    };
     this.theme = "";
-    /**
-     * Href
-     */
+    this.active = false;
     this.href = "#";
-    /**
-     * Icon
-     */
     this.icon = undefined;
   }
   /**
@@ -37,7 +42,12 @@ const DuetMenuBarLink = class {
    * Always the last one in the class.
    */
   render() {
-    return (index.h(index.Host, null, index.h("a", { class: { "duet-menu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href }, this.icon && index.h("duet-icon", { size: "x-small", name: this.icon, margin: "none" }), index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("a", { class: {
+        "duet-menu-bar-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [`duet-menu-bar-link--slot-${this.getVariant()}`]: true,
+      }, href: this.href }, this.icon && index.h("duet-icon", { size: "x-small", name: this.icon, margin: "none" }), index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-menu-bar.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const tokens = require('./tokens-21b244ee.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
-const duetMenuBarCss = "*,*::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-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:5rem;padding:0 28px;background:white;border-top:1px solid #e1e3e6;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}.duet-menu-bar>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:white}";
+const duetMenuBarCss = "*,*::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-menu-bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;height:5rem;padding:0 8px 0 20px;background:white;border-top:1px solid #e1e3e6;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}@media ((min-width: 62em)){.duet-menu-bar{padding:0 28px}}.duet-menu-bar>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:white}";
 
 const DuetMenuBar = class {
   constructor(hostRef) {
@@ -22,11 +22,6 @@ const DuetMenuBar = class {
       window.matchMedia(tokens.media_query_xx_large.replace(/'/g, "")),
     ];
     this.boundMqlFunctions = [];
-    this.logoSize = "large";
-    /**
-     * Theme.
-     */
-    this.theme = "";
     this.changeLogoSize = () => {
       if (this.mql[1].matches) {
         this.logoSize = "large";
@@ -35,6 +30,9 @@ const DuetMenuBar = class {
         this.logoSize = "medium";
       }
     };
+    this.logoSize = "large";
+    this.theme = "";
+    this.logoHref = undefined;
   }
   /**
    * Component lifecycle events.
@@ -67,7 +65,7 @@ const DuetMenuBar = class {
    * Always the last one in the class.
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, index.h("duet-logo", { size: this.logoSize, margin: "none" }), index.h("slot", { name: "center" }), index.h("slot", { name: "right" }))));
+    return (index.h(index.Host, null, index.h("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, index.h("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref }), index.h("slot", { name: "center" }), index.h("slot", { name: "right" }))));
   }
   get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-modal.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-25247ce1.js');
+const focusUtils = require('./focus-utils-0d18f24e.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 require('./string-utils-5cadd058.js');
@@ -48,81 +48,26 @@ const DuetModal = class {
         }, 100);
       }
     };
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
     this.open = false;
-    /**
-     * The currently active language. This setting also changes the logo to match
-     * the chosen language.
-     * @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 = languageUtils.getLanguage();
-    /**
-     * Defaults for accessibleCloseLabel
-     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
-     */
     this.accessibleCloseLabelDefaults = {
       fi: "Sulje ikkuna",
       sv: "Stäng fönstret",
       en: "Close the dialog",
     };
-    /**
-     * Adds accessible label for the close icon that is only shown for screen
-     * readers. This property is always required to create an accessibly interface!
-     * Swedish translation for this property is “Stäng fönstret”.
-     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
-     */
     this.accessibleCloseLabel = languageUtils.getLocaleString(this.accessibleCloseLabelDefaults, this.language);
-    /**
-     * Size of the modal window.
-     */
     this.size = "medium";
-    /**
-     * Details of the component
-     */
+    this.accessibleDescribedBy = undefined;
+    this.accessibleLabelledBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Size of the modal window.
-     */
     this.gutterSize = "medium";
-    /**
-     * Theme of the modal.
-     */
     this.theme = "";
-    /**
-     * Accessible heading displayed in the modal. The modal marks this as the
-     * label of the modal when used. This helps screen reader users which is
-     * why this is a required property.
-     */
     this.heading = "";
-    /**
-     * Accessible heading size
-     */
     this.headingLevel = "h3";
-    /**
-     * Icon to display above the heading (from Duet’s icons). Example:
-     * "form-location"
-     */
     this.icon = "";
-    /**
-     * Custom color to be used for the icon, as a design token entered in camelCase
-     * or kebab-case. Example: "primary".
-     */
     this.color = "";
-    /**
-     * Use this property when you need to have the modal dialog initially active.
-     */
     this.active = false;
-    /**
-     * Use this property when you want the modal to close when clicked outside of modal.
-     */
     this.closeOnBlur = false;
   }
   openChanged() {