@duetds/components 6.2.3 → 6.2.5

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

@@ -1,19 +1,19 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e68fe06d.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-14a163e6.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './p-bd779757.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
-import { f as focusElement, F as FocusGuard } from './p-0b8f16f1.js';
+import { f as focusElement, F as FocusGuard } from './p-9986919d.js';
 import { b as isEscapeKey } from './p-d8549efe.js';
 import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$7 } from './p-321dbb74.js';
-import { d as defineCustomElement$6 } from './p-7fca7185.js';
-import { d as defineCustomElement$5 } from './p-bd533ea2.js';
-import { d as defineCustomElement$4 } from './p-f22c141f.js';
-import { d as defineCustomElement$3 } from './p-77e39f63.js';
-import { d as defineCustomElement$2 } from './p-d339505b.js';
+import { d as defineCustomElement$7 } from './p-eb6fc032.js';
+import { d as defineCustomElement$6 } from './p-0cc49790.js';
+import { d as defineCustomElement$5 } from './p-fddad5df.js';
+import { d as defineCustomElement$4 } from './p-25d4fffb.js';
+import { d as defineCustomElement$3 } from './p-354f8a94.js';
+import { d as defineCustomElement$2 } from './p-10feffd3.js';
 
 const duetModalCss = "*,*::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}.duet-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;background:rgba(0, 41, 77, 0.85);opacity:0;transition:300ms ease;transition-delay:200ms}.duet-modal-overlay.duet-theme-turva{background:rgba(23, 28, 58, 0.85)}.duet-modal-overlay.duet-modal-active{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}.duet-modal-overlay.duet-disable-transitions{transition:none}::slotted(img){width:100%}.duet-modal-inner{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){.duet-modal-inner{padding:48px 16px}}@media (max-width: 35.9375em){.duet-modal-inner.duet-modal-large{padding-right:0;padding-left:0}}.duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;background:white;border-radius:4px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}.duet-theme-turva .duet-modal{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-modal-active .duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}.duet-disable-transitions .duet-modal{transition:none}.duet-modal.small{max-width:545px}.duet-modal.large{max-width:100%}@media (min-width: 36em){.duet-modal.large{max-width:1110px}}.duet-modal:focus{outline:0}.duet-modal-body{width:100%;padding:36px 28px}.duet-modal-body.duet-modal-gutter-small{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 36px}@media (max-width: 22.5em){.duet-modal-body{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 28px}}@media (max-width: 35.9375em){.duet-modal-body{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 36px}}@media (min-width: 36em){.duet-modal-body{padding:36px}.duet-modal-body.duet-modal-gutter-large{padding:28px 72px}}@media (min-width: 48em){.duet-modal-body{padding:36px 72px}.duet-modal-body.duet-modal-gutter-large{padding:36px 72px}}@media (min-width: 76.25em){.duet-modal-body{padding:36px 48px 48px}.duet-modal-body.duet-modal-gutter-large{padding:48px 94px}.small .duet-modal-body{padding:36px 48px}}.duet-modal-header{text-align:center}.duet-modal-close{position:absolute;top:12px;right:12px}.duet-modal-heading{width:100%;padding-right:60px;overflow:hidden;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:1.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d;text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}.duet-modal-heading.duet-p-0{padding:0 !important}.duet-modal-heading.duet-m-0{margin:0 !important}";
 
@@ -51,81 +51,26 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         }, 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 = 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 = 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() {

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

@@ -1,19 +1,19 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-e68fe06d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { b as isEscapeKey, d as isTabKey, c as isEnterKey, h as isArrowLeftKey, e as isArrowUpKey, j as isArrowRightKey, f as isArrowDownKey } from './p-d8549efe.js';
 import { g as getLocaleString } from './p-ede854e1.js';
 import { p as parsePossibleJSON } from './p-5a9d75e1.js';
-import { d as defineCustomElement$8 } from './p-d6e7df61.js';
-import { d as defineCustomElement$7 } from './p-db21a6ca.js';
-import { d as defineCustomElement$6 } from './p-d29accfb.js';
-import { d as defineCustomElement$5 } from './p-bd533ea2.js';
-import { d as defineCustomElement$4 } from './p-2320f4a6.js';
-import { d as defineCustomElement$3 } from './p-fbcece41.js';
-import { d as defineCustomElement$2 } from './p-d339505b.js';
+import { d as defineCustomElement$8 } from './p-d34c42bc.js';
+import { d as defineCustomElement$7 } from './p-db135ec9.js';
+import { d as defineCustomElement$6 } from './p-9fef7d37.js';
+import { d as defineCustomElement$5 } from './p-fddad5df.js';
+import { d as defineCustomElement$4 } from './p-9245c901.js';
+import { d as defineCustomElement$3 } from './p-d2402b45.js';
+import { d as defineCustomElement$2 } from './p-10feffd3.js';
 
 const duetMultiselectCss = "*,*::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:inline-flex;width:100%;max-width:100%;vertical-align:bottom}: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-multiselect-tooltip{position:absolute;top:12px;right:0}@media (min-width: 48em){.duet-multiselect-tooltip{position:relative;top:4px;right:auto}}.duet-multiselect-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:white}.duet-multiselect-container{position:relative;width:100%}.duet-multiselect-wrapper{position:relative;width:100%;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}.duet-theme-turva .duet-multiselect-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-multiselect{display:flex;gap:12px;align-items:center;justify-content:flex-start;width:100%;min-width:8rem;padding:12px 14px !important;overflow:hidden;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.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.duet-multiselect:hover{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-multiselect:hover{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #e02a0d}.duet-multiselect:focus,.duet-multiselect.duet-multiselect-active{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva .duet-multiselect:focus,.duet-theme-turva .duet-multiselect.duet-multiselect-active{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.has-error .duet-multiselect:focus,.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:focus,.duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #e02a0d}.duet-multiselect[disabled]{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva .duet-multiselect[disabled]{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-multiselect>:first-child{flex:1}.duet-multiselect .duet-multiselect-badge{position:absolute;right:3rem}.has-error .duet-multiselect{border-color:#de2362 !important}.has-error .duet-multiselect .duet-multiselect-icon{color:#de2362 !important}.duet-theme-turva.has-error .duet-multiselect{border-color:#e02a0d !important}.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon{color:#e02a0d !important}.duet-theme-turva .duet-multiselect{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;border-color:#747475}.duet-multiselect svg{width:20px;height:20px;color:#00294d;pointer-events:none}.duet-theme-turva .duet-multiselect svg{color:#171c3a}.duet-multiselect svg.duet-multiselect-icon--rotate{transform:rotate(180deg)}.duet-multiselect-checkboxes{position:absolute;z-index:700;width:100%;padding:16px;margin:8px 0 0;visibility:hidden;background:white;border:1px solid #e1e3e6;border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-theme-turva .duet-multiselect-checkboxes{background:white;border-color:#e4e4e6;box-shadow:0 4px 10px 0 rgba(23, 28, 58, 0.15)}.duet-multiselect-checkboxes.duet-multiselect-checkboxes-active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-multiselect-help{display:block;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:#657787;border-radius:4px}.duet-multiselect-help span{display:block;margin-top:8px}.duet-theme-turva .duet-multiselect-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:#747475}.has-error .duet-multiselect-help{color:#de2362}.duet-theme-turva.has-error .duet-multiselect-help{color:#e02a0d}.duet-label-hidden duet-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
@@ -39,64 +39,6 @@ const DuetMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       fi: "valittu",
       sv: "vald",
     };
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.processedItems = [];
-    this.checkboxesVisible = false;
-    this.activeDescendant = "";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Display the select in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Value of multiselect
-     */
-    this.value = [];
-    /**
-     * Theme of the select.
-     */
-    this.theme = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Adds a unique identifier for the select.
-     */
-    this.identifier = createID("DuetMultiselect");
-    /**
-     * Hint text to display.
-     */
-    this.placeholder = "";
-    /**
-     * Makes the select component disabled. This prevents users from being able
-     * to interact with the select, and conveys its inactive state to assistive
-     * technologies.
-     */
-    this.disabled = false;
-    /**
-     * Label for the select.
-     */
-    this.label = "label";
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
     /**
      * Component event handling.
      */
@@ -168,6 +110,23 @@ const DuetMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.getOptionIdentifier = (key) => {
       return `${this.identifier}-option-${key}`;
     };
+    this.processedItems = [];
+    this.checkboxesVisible = false;
+    this.activeDescendant = "";
+    this.margin = "auto";
+    this.error = "";
+    this.expand = false;
+    this.value = [];
+    this.theme = "";
+    this.labelHidden = false;
+    this.identifier = createID("DuetMultiselect");
+    this.placeholder = "";
+    this.caption = undefined;
+    this.items = undefined;
+    this.disabled = false;
+    this.label = "label";
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   handleFocus(e) {
     const isClickOutside = e.composedPath().every(node => node !== this.element);

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-e68fe06d.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 
 const duetNavCss = "*,*::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%}";
@@ -11,10 +11,6 @@ const DuetMenuBar = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Theme.
-     */
-    this.theme = "";
     this.getToolbarDropdowns = () => this.element.querySelectorAll("duet-toolbar-dropdown");
     this.getMenuBarMenus = () => this.element.querySelectorAll("duet-menu-bar-menu");
     this.getActiveMenu = () => this.element.querySelector("duet-menu-bar-menu[active]");
@@ -45,6 +41,7 @@ const DuetMenuBar = /*@__PURE__*/ proxyCustomElement(class extends H {
         }
       });
     };
+    this.theme = "";
   }
   /**
    * Component lifecycle events.

package/lib/dist-custom-elements/duet-notification-drawer.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-e68fe06d.js';
+import { p as proxyCustomElement, H, h } from './p-14a163e6.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$4 } from './p-d01deae4.js';
-import { d as defineCustomElement$3 } from './p-bd533ea2.js';
-import { d as defineCustomElement$2 } from './p-00d8bf80.js';
+import { d as defineCustomElement$4 } from './p-88d217a7.js';
+import { d as defineCustomElement$3 } from './p-fddad5df.js';
+import { d as defineCustomElement$2 } from './p-82fec063.js';
 
 const duetNotificationDrawerCss = "*,*::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;width:100%}.duet-drawer{position:relative}@media (min-width: 62em){.duet-drawer{display:inline-block}}.duet-drawer-toggle{position:relative;display:flex;align-items:center;width:100%;height:48px;padding:0 20px;overflow:hidden;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:48px;color:#00294d;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:white;border-bottom:1px solid #e1e3e6;border-radius:0;-webkit-appearance:none;appearance:none}@media (min-width: 62em){.duet-drawer-toggle{z-index:200;width:auto;max-width:200px;padding:0 30px 0 12px;overflow:hidden;font-size:0.875rem;line-height:4rem;border:0;border-radius:4px;transition:border 300ms ease}}.duet-theme-turva .duet-drawer-toggle{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;background-color:white;border-color:#e4e4e6}.duet-drawer-toggle:active{opacity:0.75}.duet-drawer-toggle:focus{outline:0}:host(.user-is-tabbing) .duet-drawer-toggle: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-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-drawer-toggle:hover{color:#004d80}.duet-theme-turva .duet-drawer-toggle:hover{color:#444445}.duet-drawer-toggle::after{display:none !important}@media (min-width: 62em){.duet-drawer-toggle::after{position:absolute;top:auto;bottom:0;left:0;display:block !important;width:100%;height:3px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(3px)}.duet-theme-turva .duet-drawer-toggle::after{background:#c60c30}}.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{color:#004d80;border-bottom:1px solid #f5f8fa;border-radius:0}.duet-theme-turva .duet-drawer-toggle[aria-expanded=true],.duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover{color:#444445;border-color:#f5f5f7}@media (min-width: 62em){.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{border:0}.duet-drawer-toggle[aria-expanded=true]::after,.duet-drawer-toggle[aria-expanded=true]:hover::after{left:0;width:100%;transform:translateY(0)}}.duet-drawer-icon{position:relative;display:inline-flex;min-width:12px;margin-right:12px;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-drawer-icon{margin-right:8px}}.duet-drawer-label{line-height:1}.duet-drawer-caret{position:absolute;top:50%;right:20px;display:flex;width:10px;height:10px;margin-left:8px;line-height:normal;pointer-events:none;transition:300ms ease;transform:translateY(-50%);transform-origin:50% 50%}@media (min-width: 62em){.duet-drawer-caret{right:16px;width:7px;height:7px}}.duet-drawer-caret duet-icon{width:10px}.duet-drawer-toggle[aria-expanded=true] .duet-drawer-caret{transform:translateY(-50%) rotate(180deg)}.duet-drawer-badge{position:absolute;top:0;right:0;display:inline-block;width:6px;height:6px;background:#f7b228;border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-drawer-badge{background:#faa40f}.duet-drawer-content{display:none;background-color:white;border-bottom:1px solid #e1e3e6}.duet-drawer-content:focus{outline:0}.duet-theme-turva .duet-drawer-content{background-color:white;border-color:#e1e3e6}@media (min-width: 62em){.duet-drawer-content{position:absolute;top:100%;z-index:600;display:block;width:450px;max-height:420px;padding-left:0;overflow-y:auto;visibility:hidden;background-color:white;border:1px solid #e1e3e6;border-radius:4px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:300ms ease;transform:scale(0.95) translateZ(0) translateY(-10px);transform-origin:50% 0;scrollbar-width:none}.duet-drawer-content::-webkit-scrollbar{display:none}.duet-theme-turva .duet-drawer-content{background-color:white}.duet-drawer-content.duet-drawer-left{right:0}.duet-drawer-content.duet-drawer-right{left:0}}.duet-drawer-content.duet-drawer-open{display:block}@media (min-width: 62em){.duet-drawer-content.duet-drawer-open{visibility:visible;opacity:1;transform:scale(1) translateZ(0) translateY(0)}}";
 
@@ -17,50 +17,6 @@ const DuetNotificationDrawer$1 = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.isOpen = false;
-    /**
-     * Icon to display to the left of the drawer button.
-     */
-    this.icon = "";
-    /**
-     * Label for the drawer button.
-     */
-    this.label = "Label";
-    /**
-     * The currently active language.
-     * Used to determine the message displayed when there are no notifications.
-     */
-    this.language = getLanguage();
-    /**
-     * Defaults for accessibleLabelNotifications
-     * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
-     */
-    this.accessibleLabelNotificationsDefaults = {
-      en: "No notifications",
-      fi: "Ei ilmoituksia",
-      sv: "Inga notifikationer",
-    };
-    /**
-     * Adds accessible label for tooltip that is shown for notifications
-     * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
-     */
-    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
-    /**
-     * Show a badge that indicates something has changed.
-     */
-    this.badge = false;
-    /**
-     * Theme of the notification drawer.
-     */
-    this.theme = "";
-    /**
-     * Which direction should the drawer open in?
-     */
-    this.direction = "left";
     /**
      * Component event handling.
      */
@@ -77,6 +33,20 @@ const DuetNotificationDrawer$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.updateNotificationState = () => {
       this.hasNotifications = this.element.children.length > 0;
     };
+    this.isOpen = false;
+    this.hasNotifications = undefined;
+    this.icon = "";
+    this.label = "Label";
+    this.language = getLanguage();
+    this.accessibleLabelNotificationsDefaults = {
+      en: "No notifications",
+      fi: "Ei ilmoituksia",
+      sv: "Inga notifikationer",
+    };
+    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
+    this.badge = false;
+    this.theme = "";
+    this.direction = "left";
   }
   /**
    * Component lifecycle events.

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-e68fe06d.js';
+import { p as proxyCustomElement, H, h } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$2 } from './p-d339505b.js';
+import { d as defineCustomElement$2 } from './p-10feffd3.js';
 
 const duetNotificationCss = "*,*::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;width:100%}.duet-notification{display:block;padding:16px;color:#00294d;cursor:pointer;border-bottom:1px solid #e1e3e6;transition:300ms ease}:host(:last-of-type) .duet-notification{border-bottom:0}.duet-notification.duet-theme-turva{color:#171c3a;border-bottom-color:#e4e4e6}.duet-notification.duet-notification-highlight{font-weight:600;background:#f3f9fc}.duet-notification.duet-notification-highlight.duet-theme-turva{background:#fcf3f4}@media (min-width: 62em){.duet-notification:hover{background:#f3f9fc}.duet-notification:hover.duet-theme-turva{background:#fcf3f4}}.duet-notification a{text-decoration:none}.duet-notification a:focus{outline:0}:host(.user-is-tabbing) .duet-notification:focus-within{z-index:1;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-notification-container{position:relative;display:flex}.duet-notification-badge-container{position:relative;width:16px}.duet-notification-badge{position:absolute;top:6px;left:-2px;width:8px;height:8px;background:#0077b3;border-radius:50%}.duet-theme-turva .duet-notification-badge{background:#c60c30}.duet-notification-content{flex:1}.duet-notification-date{position:absolute;top:2px;right:0;width:96px;font-size:0.75rem;font-weight:600;line-height:1.25;color:#657787;text-align:right;text-transform:uppercase}@media (max-width: 35.9375em){.duet-notification-date{width:auto}}.duet-theme-turva .duet-notification-date{color:#444445}::slotted(duet-heading){padding-right:80px !important}::slotted(duet-paragraph){margin-bottom:2px !important}";
 
@@ -13,46 +13,17 @@ const DuetNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * The currently active language.
-     * Used for announcing unread notifications to screen readers.
-     * @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 = getLanguage();
-    /**
-     * Property to change accessibleLabelUnread defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelUnread when needed
-     */
     this.accessibleLabelUnreadDefaults = {
       en: "Unread",
       fi: "Lukematon",
       sv: "Oläst",
     };
-    /**
-     * Adds accessible label for tooltip that is shown over unread counter
-     * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
-     */
     this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
-    /**
-     * The url to open on notification click.
-     */
     this.url = "#";
-    /**
-     * The date of the notification.
-     */
     this.date = "";
-    /**
-     * Should the notification be visually highlighted?
-     */
     this.highlight = false;
-    /**
-     * Should the link open in a new window?
-     */
     this.external = false;
-    /**
-     * Theme of the notification.
-     */
     this.theme = "";
   }
   /**

package/lib/dist-custom-elements/duet-number-input.js

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-e68fe06d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { j as isArrowRightKey, e as isArrowUpKey, f as isArrowDownKey, h as isArrowLeftKey, k as isBackspaceKey } from './p-d8549efe.js';
 import { a as getLanguage, b as getLocale, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$7 } from './p-db21a6ca.js';
-import { d as defineCustomElement$6 } from './p-bd533ea2.js';
-import { d as defineCustomElement$5 } from './p-c2d5ef52.js';
-import { d as defineCustomElement$4 } from './p-2320f4a6.js';
-import { d as defineCustomElement$3 } from './p-fbcece41.js';
-import { d as defineCustomElement$2 } from './p-d339505b.js';
+import { d as defineCustomElement$7 } from './p-db135ec9.js';
+import { d as defineCustomElement$6 } from './p-fddad5df.js';
+import { d as defineCustomElement$5 } from './p-737dd784.js';
+import { d as defineCustomElement$4 } from './p-9245c901.js';
+import { d as defineCustomElement$3 } from './p-d2402b45.js';
+import { d as defineCustomElement$2 } from './p-10feffd3.js';
 
 var actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
 
@@ -102,147 +102,6 @@ const DuetNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.duetBlur = createEvent(this, "duetBlur", 7);
     this.duetFocus = createEvent(this, "duetFocus", 7);
     this.inputId = createID("DuetInput");
-    /**
-     * The currently active language. This setting changes the accessible labels 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 = getLanguage();
-    /**
-     * Locale used to format the entered value.
-     */
-    this.locale = getLocale(this.language).locale;
-    /**
-     * Unit for the number input.
-     */
-    this.unit = getLocale(this.language).money;
-    /**
-     * 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;
-    /**
-     * Defaults for accessibleLive
-     * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
-     */
-    this.accessibleLiveDefaults = {
-      fi: "{current} euroa valittuna",
-      en: "{current} euros selected",
-      sv: "{current} euro valt",
-    };
-    /**
-     * Format of message used to announce current amount when switching between amounts.
-     * The string {current} is replaced with the current amount.
-     * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
-     */
-    this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
-    /**
-     * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead.
-     */
-    this.accessibleLiveEnabled = true;
-    /**
-     * Defaults for accessibleAdd
-     * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
-     */
-    this.accessibleAddDefaults = {
-      fi: "Lisää summaan",
-      en: "Add to the amount",
-      sv: "Lägg till beloppet",
-    };
-    /**
-     * Accessible label for the add button that is read for screen reader users.
-     * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
-     */
-    this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
-    /**
-     * Defaults for accessibleSubtract
-     * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
-     */
-    this.accessibleSubtractDefaults = {
-      fi: "Vähennä summasta",
-      en: "Subtract from the amount",
-      sv: "Dra från beloppet",
-    };
-    /**
-     * Accessible label for the subtract button that is read for screen reader users.
-     * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
-     */
-    this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
-    /**
-     * 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;
-    /**
-     * Minimum value.
-     */
-    this.min = 0;
-    /**
-     * Defaults for Label
-     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
-     */
-    this.labelDefaults = {
-      fi: "Nimilappu",
-      en: "Label",
-      sv: "Etikett",
-    };
-    /**
-     * Label for the number input.
-     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
-     */
-    this.label = getLocaleString(this.labelDefaults, this.language);
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Maximum value.
-     */
-    this.max = 1000000;
-    /**
-     * Display the input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * Step amount.
-     */
-    this.step = 5000;
-    /**
-     * Controls whether or not value gets rounded to the nearest
-     * multiple of a step on blur. Set to "false" to disable this behaviour.
-     */
-    this.rounding = true;
-    /**
-     * Makes the number 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;
-    /**
-     * Set whether the input 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;
     /**
      * Component event handling.
      */
@@ -382,6 +241,58 @@ const DuetNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       this.value = this.localizeValue(newValue);
       this.emitChange(ev);
     };
+    this.language = getLanguage();
+    this.locale = getLocale(this.language).locale;
+    this.unit = getLocale(this.language).money;
+    this.focusedValue = undefined;
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.accessibleLiveDefaults = {
+      fi: "{current} euroa valittuna",
+      en: "{current} euros selected",
+      sv: "{current} euro valt",
+    };
+    this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
+    this.accessibleLiveEnabled = true;
+    this.accessibleAddDefaults = {
+      fi: "Lisää summaan",
+      en: "Add to the amount",
+      sv: "Lägg till beloppet",
+    };
+    this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
+    this.accessibleSubtractDefaults = {
+      fi: "Vähennä summasta",
+      en: "Subtract from the amount",
+      sv: "Dra från beloppet",
+    };
+    this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
+    this.theme = "";
+    this.margin = "auto";
+    this.expand = false;
+    this.identifier = undefined;
+    this.min = 0;
+    this.labelDefaults = {
+      fi: "Nimilappu",
+      en: "Label",
+      sv: "Etikett",
+    };
+    this.label = getLocaleString(this.labelDefaults, this.language);
+    this.labelHidden = false;
+    this.max = 1000000;
+    this.name = undefined;
+    this.error = "";
+    this.tooltip = "";
+    this.step = 5000;
+    this.rounding = true;
+    this.role = undefined;
+    this.disabled = false;
+    this.required = false;
+    this.value = undefined;
   }
   /**
    * Component lifecycle events.