@duetds/components 6.2.4 → 6.2.6

package/lib/dist-custom-elements/duet-range-slider.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
-import { l as colorPrimaryTurva, o as colorGrayTurva, p as colorPrimary, q as colorGray } from './p-33e00967.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-a1724291.js';
+import { c as colorPrimaryTurva, a as colorGrayTurva, b as colorPrimary, d as colorGray } from './p-55325c49.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isInternetExplorer } from './p-704245ef.js';
-import { d as defineCustomElement$2 } from './p-f51d88cc.js';
+import { d as defineCustomElement$2 } from './p-f4d2face.js';
 
 const duetRangeSliderCss = "*.sc-duet-range-slider,*.sc-duet-range-slider::after,*.sc-duet-range-slider::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-range-slider-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;text-align:left;vertical-align:bottom}.sc-duet-range-slider-h:last-child,.sc-duet-range-slider-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-range-slider-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-range-slider-h{width:100% !important}}.duet-m-0.sc-duet-range-slider-h{margin:0 !important}.duet-range-container.sc-duet-range-slider{position:relative;width:100%}.duet-output.sc-duet-range-slider{position:absolute;top:12px;right:0;z-index:200;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;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d;background:white}.duet-theme-turva.sc-duet-range-slider .duet-output.sc-duet-range-slider{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-range-disabled.sc-duet-range-slider .duet-output.sc-duet-range-slider{color:#909599}.duet-range-disabled.duet-theme-turva.sc-duet-range-slider .duet-output.sc-duet-range-slider{color:#747475}.duet-range.sc-duet-range-slider{position:relative;z-index:100;width:100%;height:4px;background:#cfd2d4;border-radius:4px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider{background:#cfcfd1}.duet-ie.sc-duet-range-slider .duet-range.sc-duet-range-slider{display:block;width:auto;height:26px;background:transparent !important}.duet-range.sc-duet-range-slider::-moz-range-track{height:1px;background:transparent !important;border:0;-moz-appearance:none}.duet-range.sc-duet-range-slider::-ms-track{color:transparent;background:transparent;border:0}.duet-range.sc-duet-range-slider:focus,.duet-range.sc-duet-range-slider:active{outline:0}.user-is-tabbing.sc-duet-range-slider-h .duet-range.sc-duet-range-slider:focus{box-shadow:0 0 0 1px white, 0 0 0 3px rgba(0, 119, 179, 0.75)}.user-is-tabbing.sc-duet-range-slider-h .duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:focus{box-shadow:0 0 0 1px white, 0 0 0 3px #171c3a}.duet-range.sc-duet-range-slider::-webkit-slider-runnable-track{background:transparent}.duet-range.sc-duet-range-slider::-webkit-slider-thumb{position:relative;width:24px;height:24px;cursor:-webkit-grab;background:white;border:1px solid #909599;border-radius:50%;transition:box-shadow 300ms ease;-webkit-appearance:none}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-webkit-slider-thumb{border-color:#747475}.duet-range.sc-duet-range-slider:active::-webkit-slider-thumb{cursor:-webkit-grabbing}.duet-range.sc-duet-range-slider::-moz-range-thumb{position:relative;width:24px;height:24px;cursor:-moz-grab;background:white;border:1px solid #909599;border-radius:50%;appearance:none}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-moz-range-thumb{border-color:#747475}.duet-range.sc-duet-range-slider:active::-moz-range-thumb{cursor:-moz-grabbing}.duet-range.sc-duet-range-slider::-ms-thumb{position:relative;width:24px;height:24px;overflow:visible;background:white;border:1px solid #909599;border-radius:50%}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-thumb{border-color:#747475}.duet-range.sc-duet-range-slider:disabled{background:#cfd2d4 !important}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled{background:#cfcfd1 !important}.duet-range.sc-duet-range-slider:disabled::-webkit-slider-thumb{cursor:default;background:#cfd2d4;border-color:transparent}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled::-webkit-slider-thumb{background:#cfcfd1;border-color:transparent}.duet-range.sc-duet-range-slider:disabled::-moz-range-thumb{cursor:default;background:#cfd2d4;border-color:transparent}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled::-moz-range-thumb{background:#cfcfd1;border-color:transparent}.duet-range.sc-duet-range-slider:disabled::-ms-thumb{cursor:default;background:#cfd2d4;border-color:transparent}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled::-ms-thumb{background:#cfcfd1;border-color:transparent}.duet-range.sc-duet-range-slider::-ms-fill-lower{height:4px;background:#0077b3}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-lower{background:#c60c30}.duet-range.sc-duet-range-slider::-ms-fill-upper{height:4px;background:#cfd2d4}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-upper{background:#cfcfd1}.duet-label-hidden.sc-duet-range-slider duet-label.sc-duet-range-slider,.duet-label-hidden.sc-duet-range-slider output.sc-duet-range-slider{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
@@ -30,67 +30,6 @@ const DuetRangeSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
      * Own Properties
      */
     this.rangeId = createID("DuetRange");
-    /**
-     * Theme of the input.
-     */
-    this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = 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;
-    /**
-     * 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;
-    /**
-     * Minimum value.
-     */
-    this.min = 0;
-    /**
-     * Label for the range slider.
-     */
-    this.label = "label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Unit for the range slider.
-     */
-    this.unit = "";
-    /**
-     * Maximum value.
-     */
-    this.max = 100;
-    /**
-     * Step amount.
-     */
-    this.step = 1;
-    /**
-     * Locale used to format the entered value.
-     */
-    this.locale = "fi-FI";
-    /**
-     * Value of the input.
-     */
-    this.value = 0;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
-     * event after each keystroke.
-     */
-    this.debounce = 0;
     /**
      * Component event handling.
      */
@@ -119,6 +58,26 @@ const DuetRangeSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         });
       }, this.debounce);
     };
+    this.theme = "";
+    this.margin = "auto";
+    this.expand = false;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.required = false;
+    this.disabled = false;
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.min = 0;
+    this.label = "label";
+    this.labelHidden = false;
+    this.unit = "";
+    this.max = 100;
+    this.step = 1;
+    this.locale = "fi-FI";
+    this.value = 0;
+    this.debounce = 0;
   }
   /**
    * Component lifecycle events.

package/lib/dist-custom-elements/duet-range-stepper.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { h as isArrowLeftKey, e as isArrowUpKey, n as isMinusKey, l as isArrowKey, j as isArrowRightKey, f as isArrowDownKey, o as isPlusKey } from './p-d8549efe.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$4 } from './p-f674e164.js';
-import { d as defineCustomElement$3 } from './p-908c1151.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$4 } from './p-076044f7.js';
+import { d as defineCustomElement$3 } from './p-91098fd5.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 const duetRangeStepperCss = "*,*::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-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}.duet-range-stepper{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:#00294d}.duet-range-stepper ::part(button){border:0}";
 
@@ -20,28 +20,16 @@ const DuetRangeStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.duetRangeStepUpdate = createEvent(this, "duetRangeStepUpdate", 7);
     this.leftBn = createID("duetRangeStepper-left");
     this.rightBn = createID("duetRangeStepper-right");
-    /**
-     * Theme of the component.
-     */
+    this.handleClick = (e, direction) => {
+      e.preventDefault();
+      this.stepIndex += direction;
+      this.clampStepIndex();
+      this.handleStepClick(e);
+    };
     this.theme = "";
-    /**
-     * Start value
-     * @default 1
-     */
     this.stepIndex = 1;
-    /**
-     * How big is the step
-     * @default 50
-     */
     this.stepSize = 50;
-    /**
-     * Total of
-     * @default undefined
-     */
     this.total = 1000;
-    /**
-     * Default range stepper labels
-     */
     this.ariaLabelsDefaults = {
       en: {
         next_increment: "Next range increment",
@@ -59,20 +47,8 @@ const DuetRangeStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         x_of_y: "{0}–{1} av {2}",
       },
     };
-    /**
-     * Default pagination labels
-     */
     this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
-    /**
-     * Used to indicate which dom element with ID this element controls
-     */
     this.ariaControls = "";
-    this.handleClick = (e, direction) => {
-      e.preventDefault();
-      this.stepIndex += direction;
-      this.clampStepIndex();
-      this.handleStepClick(e);
-    };
   }
   watchStepIndexStateHandler(newValue) {
     if (this.element.shadowRoot.childElementCount > 0) {

package/lib/dist-custom-elements/duet-scrollable.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetScrollable$1, d as defineCustomElement$1 } from './p-4bb2e37b.js';
+import { D as DuetScrollable$1, d as defineCustomElement$1 } from './p-db985827.js';
 
 const DuetScrollable = DuetScrollable$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-section-layout.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
 import { i as isInternetExplorer } from './p-704245ef.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}}";
@@ -11,13 +11,7 @@ const DuetSectionLayout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * 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/dist-custom-elements/duet-select.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetSelect$1, d as defineCustomElement$1 } from './p-6e81048c.js';
+import { D as DuetSelect$1, d as defineCustomElement$1 } from './p-88b72658.js';
 
 const DuetSelect = DuetSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-spacer.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetSpacer$1, d as defineCustomElement$1 } from './p-e987e04b.js';
+import { D as DuetSpacer$1, d as defineCustomElement$1 } from './p-d188f26e.js';
 
 const DuetSpacer = DuetSpacer$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-spinner.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetSpinner$1, d as defineCustomElement$1 } from './p-862c60cc.js';
+import { D as DuetSpinner$1, d as defineCustomElement$1 } from './p-7b1b2eef.js';
 
 const DuetSpinner = DuetSpinner$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-step.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
-import { d as defineCustomElement$4 } from './p-ca2b02bc.js';
-import { d as defineCustomElement$3 } from './p-908c1151.js';
-import { d as defineCustomElement$2 } from './p-e987e04b.js';
+import { d as defineCustomElement$4 } from './p-fe5341bf.js';
+import { d as defineCustomElement$3 } from './p-91098fd5.js';
+import { d as defineCustomElement$2 } from './p-d188f26e.js';
 
 var actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
 
@@ -20,22 +20,6 @@ const DuetStep$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     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;
@@ -51,6 +35,13 @@ const DuetStep$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       }
       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({

package/lib/dist-custom-elements/duet-stepper.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$2 } from './p-2d3fc462.js';
 
 function groupBy(prop, items) {
   const result = {};
@@ -25,27 +25,10 @@ const DuetStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.__registerHost();
     this.__attachShadow();
     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/dist-custom-elements/duet-submenu-bar-dropdown-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetSubmenuBarDropdownLink extends Components.DuetSubmenuBarDropdownLink, HTMLElement {}
+export const DuetSubmenuBarDropdownLink: {
+  prototype: DuetSubmenuBarDropdownLink;
+  new (): DuetSubmenuBarDropdownLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-submenu-bar-dropdown-link.js

@@ -0,0 +1,69 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$2 } from './p-91098fd5.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$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return duetSubmenuBarDropdownLinkCss; }
+}, [1, "duet-submenu-bar-dropdown-link", {
+    "theme": [1025],
+    "href": [1025],
+    "icon": [1537],
+    "caret": [1028],
+    "highlight": [1028]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-submenu-bar-dropdown-link", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-submenu-bar-dropdown-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSubmenuBarDropdownLink$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetSubmenuBarDropdownLink = DuetSubmenuBarDropdownLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetSubmenuBarDropdownLink, defineCustomElement };

package/lib/dist-custom-elements/duet-submenu-bar-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetSubmenuBarDropdown extends Components.DuetSubmenuBarDropdown, HTMLElement {}
+export const DuetSubmenuBarDropdown: {
+  prototype: DuetSubmenuBarDropdown;
+  new (): DuetSubmenuBarDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-submenu-bar-dropdown.js

@@ -0,0 +1,75 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$2 } from './p-91098fd5.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$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return duetSubmenuBarDropdownCss; }
+}, [1, "duet-submenu-bar-dropdown", {
+    "theme": [1025],
+    "open": [1540],
+    "icon": [1537]
+  }, [[8, "click", "handleFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-submenu-bar-dropdown", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-submenu-bar-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSubmenuBarDropdown$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetSubmenuBarDropdown = DuetSubmenuBarDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetSubmenuBarDropdown, defineCustomElement };

package/lib/dist-custom-elements/{duet-menu-bar-menu-link.d.ts → duet-submenu-bar-link.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface DuetMenuBarMenuLink extends Components.DuetMenuBarMenuLink, HTMLElement {}
-export const DuetMenuBarMenuLink: {
-  prototype: DuetMenuBarMenuLink;
-  new (): DuetMenuBarMenuLink;
+interface DuetSubmenuBarLink extends Components.DuetSubmenuBarLink, HTMLElement {}
+export const DuetSubmenuBarLink: {
+  prototype: DuetSubmenuBarLink;
+  new (): DuetSubmenuBarLink;
 };
 /**
  * Used to define this component and all nested components recursively.

package/lib/dist-custom-elements/duet-submenu-bar-link.js

@@ -0,0 +1,61 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$2 } from './p-91098fd5.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$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return duetSubmenuBarLinkCss; }
+}, [1, "duet-submenu-bar-link", {
+    "theme": [1025],
+    "href": [1025],
+    "icon": [1537]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-submenu-bar-link", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-submenu-bar-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSubmenuBarLink$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetSubmenuBarLink = DuetSubmenuBarLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetSubmenuBarLink, defineCustomElement };

package/lib/dist-custom-elements/{duet-menu-bar-menu.d.ts → duet-submenu-bar.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface DuetMenuBarMenu extends Components.DuetMenuBarMenu, HTMLElement {}
-export const DuetMenuBarMenu: {
-  prototype: DuetMenuBarMenu;
-  new (): DuetMenuBarMenu;
+interface DuetSubmenuBar extends Components.DuetSubmenuBar, HTMLElement {}
+export const DuetSubmenuBar: {
+  prototype: DuetSubmenuBar;
+  new (): DuetSubmenuBar;
 };
 /**
  * Used to define this component and all nested components recursively.