@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -1,15 +1,26 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-BGuG-JHD.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DvwKrUS6.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.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>"};
+var actionEdit2;
+var hasRequiredActionEdit2;
+
+function requireActionEdit2 () {
+	if (hasRequiredActionEdit2) return actionEdit2;
+	hasRequiredActionEdit2 = 1;
+	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>"};
+	return actionEdit2;
+}
+
+var actionEdit2Exports = requireActionEdit2();
+var editIcon = /*@__PURE__*/getDefaultExportFromCjs(actionEdit2Exports);
 
 const duetStepCss = "*,*::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}.duet-step{padding:20px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.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\";box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.rounded-top{border-top-left-radius:4px;border-top-right-radius:4px}.duet-step.rounded-bottom{margin-bottom:20px !important;border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-step.rounded-bottom{margin-bottom:0 !important}}@media (min-width: 36em){.duet-step{padding:0 20px 0 0 !important;margin:0 !important;font-size:1.25rem;box-shadow:none !important}}.duet-step-heading{display:flex;align-items:center;border-radius:4px}.duet-step-heading[aria-disabled=false]{cursor:pointer}.duet-step-heading:focus{outline:0}.duet-step-heading:active{opacity:0.75}:host(.user-is-tabbing) .duet-step-heading:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-step-heading:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.is-complete .duet-step-heading:hover .duet-step-counter,.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#005f8f}.duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#9e0a26}.is-current .duet-step-heading{margin-bottom:20px}@media (min-width: 36em){.duet-step-heading{margin-top:8px;margin-bottom:8px !important}:host(:first-of-type) .duet-step-heading{margin-top:0}:host(:last-of-type) .duet-step-heading{margin-bottom:0 !important}}.duet-step-counter{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:30px;color:rgb(255, 255, 255);text-align:center;border-radius:50%;transition:background-color 300ms ease}@media (min-width: 36em){.duet-step-counter{width:40px;height:40px;line-height:40px}}.is-complete .duet-step-counter,.is-current .duet-step-counter,.is-disabled .duet-step-counter{background-color:rgb(0, 119, 179)}.duet-theme-turva.is-complete .duet-step-counter,.duet-theme-turva.is-current .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-counter{background-color:rgb(198, 12, 48)}.is-incomplete .duet-step-counter{background-color:rgb(98, 121, 138)}.duet-theme-turva.is-incomplete .duet-step-counter{background-color:rgb(143, 147, 158)}.duet-step-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 36em){.duet-step-icon{width:20px;height:20px}}.duet-step-icon duet-icon{width:16px;height:16px}@media (min-width: 36em){.duet-step-icon duet-icon{width:20px;height:20px}}@media (min-width: 36em){.duet-step-content-wrapper{min-height:20px;padding-left:40px;margin-left:19px;border-left:2px solid rgb(212, 223, 229)}.duet-theme-turva .duet-step-content-wrapper{border-color:rgb(222, 224, 228)}:host(:last-of-type) .duet-step-content-wrapper{min-height:0;border:transparent}}.duet-step-content{display:none;padding-bottom:16px}@media (min-width: 36em){.duet-step-content{padding-bottom:28px}}.is-current .duet-step-content{display:block}.duet-step-heading-slot{display:none;margin-top:2px}@media (min-width: 48em){.duet-step-heading-slot{display:block}}";
-const DuetStepStyle0 = duetStepCss;
 
 const DuetStep = class {
     constructor(hostRef) {
@@ -17,6 +28,22 @@ 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;
@@ -32,13 +59,6 @@ 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({
@@ -78,7 +98,7 @@ const DuetStep = class {
     }
     renderStepCounter() {
         if (this.state === "complete" || this.state === "disabled") {
-            return (h("div", { class: "duet-step-icon" }, h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: actionEdit2.svg })));
+            return (h("div", { class: "duet-step-icon" }, h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: editIcon.svg })));
         }
         return `${this.stepIndex + 1} `;
     }
@@ -97,7 +117,7 @@ const DuetStep = class {
     }
     get element() { return getElement(this); }
 };
-DuetStep.style = DuetStepStyle0;
+DuetStep.style = duetStepCss;
 
 function groupBy(prop, items) {
     const result = {};
@@ -112,16 +132,32 @@ function groupBy(prop, items) {
 }
 
 const duetStepperCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}.duet-stepper{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-stepper{padding:28px !important;padding-top:36px !important;padding-bottom:36px !important;background:rgb(255, 255, 255);border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}}";
-const DuetStepperStyle0 = duetStepperCss;
 
 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) {
@@ -208,6 +244,6 @@ const DuetStepper = class {
         "backDisabled": ["currentStepInvokedDisable"]
     }; }
 };
-DuetStepper.style = DuetStepperStyle0;
+DuetStepper.style = duetStepperCss;
 
 export { DuetStep as duet_step, DuetStepper as duet_stepper };

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

@@ -1,21 +1,38 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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:12px;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none}.duet-submenu-bar-dropdown-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown-link .label-container{display:flex;flex:1;gap:12px;align-items:center;justify-content:flex-start}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.5rem 8px;font-size:1rem;line-height:1.5}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.active .active-check{display: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:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-submenu-bar-dropdown-link.active .label::after{display:none}.duet-submenu-bar-dropdown-link.active .active-check{display:block}.duet-submenu-bar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-submenu-bar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown-link.highlight{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(126, 2, 35)}";
-const DuetSubmenuBarDropdownLinkStyle0 = duetSubmenuBarDropdownLinkCss;
 
 const DuetSubmenuBarDropdownLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * Highlight
+         */
         this.highlight = false;
     }
     /**
@@ -45,6 +62,6 @@ const DuetSubmenuBarDropdownLink = class {
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarDropdownLink.style = DuetSubmenuBarDropdownLinkStyle0;
+DuetSubmenuBarDropdownLink.style = duetSubmenuBarDropdownLinkCss;
 
 export { DuetSubmenuBarDropdownLink as duet_submenu_bar_dropdown_link };

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

@@ -1,13 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { a as media_query_large } from './tokens-84fb2357.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { a as media_query_large } from './tokens-DkXykZBx.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;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:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 75, 129)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(228, 241, 247)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(8, 42, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:16px;height:16px}}.duet-submenu-bar-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(8, 42, 77);visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-submenu-bar-dropdown .items::-webkit-scrollbar{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:93%;z-index:600;min-width:320px;padding:8px;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);transition:none}}.duet-submenu-bar-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.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:rgb(23, 28, 58)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(126, 2, 35)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(222, 224, 228)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
-const DuetSubmenuBarDropdownStyle0 = duetSubmenuBarDropdownCss;
 
 const DuetSubmenuBarDropdown = class {
     constructor(hostRef) {
@@ -17,6 +16,23 @@ const DuetSubmenuBarDropdown = class {
          */
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
+        this.isDesktop = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
         this.checkIsDesktop = () => {
             if (this.mql[0].matches) {
                 this.isDesktop = true;
@@ -40,11 +56,6 @@ const DuetSubmenuBarDropdown = class {
                 this.open = true;
             }
         };
-        this.isDesktop = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -116,6 +127,6 @@ const DuetSubmenuBarDropdown = class {
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarDropdown.style = DuetSubmenuBarDropdownStyle0;
+DuetSubmenuBarDropdown.style = duetSubmenuBarDropdownCss;
 
 export { DuetSubmenuBarDropdown as duet_submenu_bar_dropdown };

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

@@ -1,32 +1,55 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
-import { D as DuetStringsExternalDefaults } from './common-strings-af765cad.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { g as getAccessibleLinkLabel } from './a11y-utils-42080d56.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import './slot-utils-4096ff0d.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { n as newWindowIcon } from './action-new-window-small-EH8_HdAm.js';
+import { D as DuetStringsExternalDefaults } from './common-strings-D6YBFNe9.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { g as getAccessibleLinkLabel } from './a11y-utils-Bdgp_pLF.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import './_commonjsHelpers-DvwKrUS6.js';
+import './slot-utils-B1zQ6tzO.js';
+import './string-utils-C6E9F6QT.js';
 
 const duetSubmenuBarItemCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;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:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-item .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:16px;height:16px}}.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-submenu-bar-item .external-icon{width:10px;height:10px}.duet-submenu-bar-item .trailing-icon{position:absolute;right:12px}.duet-submenu-bar-item[aria-expanded=true]{background:rgb(228, 241, 247)}.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-submenu-bar-item.active{color:rgb(0, 119, 179)}.duet-submenu-bar-item.active.duet-theme-turva{color:rgb(126, 2, 35)}.duet-submenu-bar-item.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-submenu-bar-item.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:rgb(23, 28, 58)}.duet-submenu-bar-item.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item.duet-theme-turva.active::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}";
-const DuetSubmenuBarItemStyle0 = duetSubmenuBarItemCss;
 
 const DuetSubmenuBarItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
-        this.url = undefined;
+        /**
+         * Left icon.
+         */
         this.leadingIcon = undefined;
+        /**
+         * Right icon.
+         */
         this.trailingIcon = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleExpanded = undefined;
+        /**
+         * Use this property to add an aria-haspopup attribute to a button.
+         */
         this.accessiblePopup = "false";
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
     }
     /**
@@ -69,10 +92,10 @@ const DuetSubmenuBarItem = class {
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? actionNewWindowSmall.title : "", margin: "none", size: "auto", color: "currentColor" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }))))));
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarItem.style = DuetSubmenuBarItemStyle0;
+DuetSubmenuBarItem.style = duetSubmenuBarItemCss;
 
 export { DuetSubmenuBarItem as duet_submenu_bar_item };

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

@@ -1,19 +1,30 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-link{display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;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:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-submenu-bar-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-link:focus,.duet-submenu-bar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-link .submenu-bar-link-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-link .submenu-bar-link-icon{width:16px;height:16px}}@media (min-width: 62em){.duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:rgb(0, 75, 129)}}@media (min-width: 62em){.duet-submenu-bar-link.active{color:rgb(0, 119, 179)}.duet-submenu-bar-link.active.duet-theme-turva{color:rgb(126, 2, 35)}}.duet-submenu-bar-link.active .label{position:relative}.duet-submenu-bar-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-link.active .label::after{display:none}.duet-submenu-bar-link.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}}.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:rgb(23, 28, 58)}.duet-submenu-bar-link.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-link.duet-theme-turva.active::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-link:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}}";
-const DuetSubmenuBarLinkStyle0 = duetSubmenuBarLinkCss;
 
 const DuetSubmenuBarLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
     }
     /**
@@ -38,6 +49,6 @@ const DuetSubmenuBarLink = class {
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarLink.style = DuetSubmenuBarLinkStyle0;
+DuetSubmenuBarLink.style = duetSubmenuBarLinkCss;
 
 export { DuetSubmenuBarLink as duet_submenu_bar_link };

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

@@ -1,13 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { a as media_query_large } from './tokens-84fb2357.js';
-import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-ecbf187e.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { a as media_query_large } from './tokens-DkXykZBx.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-B1B-PPrh.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.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%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;top:0;z-index:1;background:rgb(240, 247, 250);transition:top 0.4s}.duet-submenu-bar.hidden{top:-200px}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(198, 225, 238)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(240, 247, 250);border-bottom:1px solid rgb(181, 198, 208)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(181, 198, 208)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 247, 250)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
-const DuetSubmenuBarStyle0 = duetSubmenuBarCss;
 
 const DuetSubmenuBar = class {
     constructor(hostRef) {
@@ -15,6 +14,22 @@ const DuetSubmenuBar = class {
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
         this.previousYScroll = 0;
+        this.hidden = false;
+        this.mobile = true;
+        this.bodyScroll = true;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Makes the submenu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
+        /**
+         * Open
+         */
+        this.open = false;
         this.handleMobileView = () => {
             if (this.mql[0].matches) {
                 this.mobile = false;
@@ -52,13 +67,6 @@ const DuetSubmenuBar = class {
             const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
             return hasDropdownLinks || hasLinks || hasItems;
         };
-        this.hidden = false;
-        this.mobile = true;
-        this.bodyScroll = true;
-        this.theme = "";
-        this.hideOnScroll = false;
-        this.open = false;
-        this.accessibleLabel = undefined;
     }
     watchOpenStateHandler(newValue) {
         const open = newValue;
@@ -146,6 +154,6 @@ const DuetSubmenuBar = class {
         "open": ["watchOpenStateHandler"]
     }; }
 };
-DuetSubmenuBar.style = DuetSubmenuBarStyle0;
+DuetSubmenuBar.style = duetSubmenuBarCss;
 
 export { DuetSubmenuBar as duet_submenu_bar };

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

@@ -1,17 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { D as DuetInternalLabel } from './label-52e2e3f9.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { c as cleanValue } from './input-utils-85681162.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-4096ff0d.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { D as DuetInternalLabel } from './label-BrSxwvH-.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { c as cleanValue } from './input-utils-CLDy7YaM.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-B1zQ6tzO.js';
+import './string-utils-C6E9F6QT.js';
 
 const duetTextareaCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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:rgb(23, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:block;width:100%;max-width:100%;text-align:left}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}duet-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-textarea-container{position:relative;width:100%;height:100%}.duet-textarea-container .duet-input-top-caption{display:none}.duet-textarea-container.duet-input-top-caption-shown .duet-input-top-caption{display:flex !important}.duet-textarea-wrapper{position:relative}.duet-textarea-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);resize:vertical;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.duet-theme-turva .duet-textarea{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(143, 147, 158)}.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-textarea::-webkit-input-placeholder{color:rgb(98, 121, 138);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-textarea::-webkit-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus::-webkit-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea::-moz-placeholder{color:rgb(98, 121, 138);opacity:1 !important}.duet-theme-turva .duet-textarea::-moz-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus::-moz-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-moz-placeholder{color:rgb(199, 202, 207)}.duet-textarea:-ms-input-placeholder{color:rgb(98, 121, 138)}.duet-theme-turva .duet-textarea:-ms-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus:-ms-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus:-ms-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-theme-turva .duet-textarea[disabled]{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important}.duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(8, 42, 77);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]::-moz-placeholder{color:rgb(8, 42, 77);opacity:1 !important}.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]:-ms-input-placeholder{color:rgb(8, 42, 77)}.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e55039}.duet-textarea:focus{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-textarea:focus{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.has-error .duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-textarea:focus{box-shadow:0 0 0 1px #e55039}.duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help{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;line-height:1.25}.duet-textarea-help span{display:block;margin-top:8px}.duet-theme-turva .duet-textarea-help{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(143, 147, 158)}.has-error .duet-textarea-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-textarea-help{color:rgb(214, 28, 82)}.duet-label-hidden .duet-internal-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count{display:block;margin:8px 0 0 auto}";
-const DuetTextareaStyle0 = duetTextareaCss;
 
 const CharacterCount = ({ value, maxlength, label, theme }) => {
     if (maxlength == null) {
@@ -45,6 +44,95 @@ const DuetTextarea = class {
             en: "characters remaining",
             sv: "tecken kvar",
         };
+        /**
+         * 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;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * 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** property.
+         */
+        this.counter = false;
+        /**
+         * Accessible label for character counter.
+         * @default fi: "merkkiä jäljellä", en: "characters remaining", sv: "tecken kvar"
+         */
+        this.counterLabel = getLocaleString(this.counterLabelDefaults);
         /**
          * Component event handling.
          */
@@ -101,39 +189,6 @@ const DuetTextarea = class {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.margin = "auto";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleAutocomplete = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleLiveError = "polite";
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.theme = "";
-        this.expand = false;
-        this.disabled = false;
-        this.identifier = undefined;
-        this.required = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        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 = getLocaleString(this.counterLabelDefaults);
     }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
@@ -194,6 +249,6 @@ const DuetTextarea = class {
         "disallowPattern": ["disallowedPatternChange"]
     }; }
 };
-DuetTextarea.style = DuetTextareaStyle0;
+DuetTextarea.style = duetTextareaCss;
 
 export { DuetTextarea as duet_textarea };