@duetds/components 6.2.4 → 6.2.5

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
-import { d as defineCustomElement$6 } from './p-c4165359.js';
-import { d as defineCustomElement$5 } from './p-1fef1f90.js';
-import { d as defineCustomElement$4 } from './p-908c1151.js';
-import { d as defineCustomElement$3 } from './p-8c0cf877.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$6 } from './p-db135ec9.js';
+import { d as defineCustomElement$5 } from './p-65ee8608.js';
+import { d as defineCustomElement$4 } from './p-fddad5df.js';
+import { d as defineCustomElement$3 } from './p-d2402b45.js';
+import { d as defineCustomElement$2 } from './p-10feffd3.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
 
@@ -18,49 +18,6 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.choiceGroupName = "duet-choice-group";
-    /**
-     * Direction of the choice group.
-     */
-    this.direction = "vertical";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Theme of the choice group.
-     */
-    this.theme = "";
-    /**
-     * Display choice group in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Legend displayed for the choice buttons in this group.
-     */
-    this.label = "Label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Additional caption to show inside the label of the choice group.
-     */
-    this.caption = undefined;
-    /**
-     * Tooltip to display next to the label of the choice group.
-     */
-    this.tooltip = undefined;
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
-    /**
-     * Enable or disable the automatic responsive behaviour of the choice group
-     * component when horizontal setting is used. Setting this option to "true"
-     * makes sure that contents are stacked vertically on mobile.
-     */
-    this.responsive = false;
     this.getChoices = () => {
       return Array.from(this.element.querySelectorAll(duetChoiceSelector));
     };
@@ -82,6 +39,19 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       // this group is a sub-group of another choice group.
       ev.cancelBubble = true;
     };
+    this.direction = "vertical";
+    this.margin = "auto";
+    this.theme = "";
+    this.error = "";
+    this.name = undefined;
+    this.label = "Label";
+    this.labelHidden = false;
+    this.caption = undefined;
+    this.tooltip = undefined;
+    this.tooltipDirection = "auto";
+    this.responsive = false;
+    this.value = undefined;
+    this.disabled = undefined;
   }
   /**
    * Component lifecycle events.

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

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
 import { c as createID } from './p-c1325e35.js';
-import { F as FocusGuard } from './p-0b8f16f1.js';
+import { F as FocusGuard } from './p-9986919d.js';
 import { i as isKeyboardClick, a as isQuestionKey, b as isEscapeKey } from './p-d8549efe.js';
 import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
-import { d as defineCustomElement$5 } from './p-c4165359.js';
-import { d as defineCustomElement$4 } from './p-908c1151.js';
-import { d as defineCustomElement$3 } from './p-e987e04b.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$5 } from './p-db135ec9.js';
+import { d as defineCustomElement$4 } from './p-fddad5df.js';
+import { d as defineCustomElement$3 } from './p-25d4fffb.js';
+import { d as defineCustomElement$2 } from './p-10feffd3.js';
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 
@@ -29,113 +29,6 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.expandId = createID("DuetChoiceExpand");
     this.headerId = createID("DuetChoiceHeader");
     this.infoButtonId = createID("DuetChoiceInfoButton");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.isHovering = false;
-    this.isInfoOpen = false;
-    this.isBlurred = false;
-    /**
-     * Theme of the choice.
-     */
-    this.theme = "";
-    /**
-     * Label for the choice button.
-     */
-    this.label = "label";
-    /**
-     * Property to change accessibleLabelInfoButton defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelInfoButton when needed
-     */
-    this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
-    /**
-     * Accessible label that is read for screen reader users in the info toggle trigger button.
-     * Not visible for normal users.
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
-    this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
-    /**
-     * 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;
-    /**
-     * Additional caption to show inside the label of the choice button.
-     */
-    this.caption = "";
-    /**
-     * Type of the choice button. You can set the type of the choice to be either
-     * “radio” or “checkbox”. Depending on this selection we convey the selection
-     * type to assistive technologies as well. When type “radio” is chosen it is
-     * required to place the choices inside Choice Group component.
-     */
-    this.type = "checkbox";
-    /**
-     * Checked state of the choice button.
-     */
-    this.checked = false;
-    /**
-     * Makes the choice button open a new section underneath it when clicked or
-     * tapped. This new section can be used to show more options related to this
-     * choice. Please note that this feature can’t be used together with the "info"
-     * functionality and that it only accepts plain dom nodes (no shadow dom elements
-     * such as duet-paragraph can be used as this will break accessibility)
-     */
-    this.collapsible = false;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Icon to display to the left of the choice button label.
-     */
-    this.icon = "";
-    /**
-     * Expands the choice button to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Controls the padding of the component.
-     */
-    this.padding = "auto";
-    /**
-     * Makes the choice component disabled. This prevents users from being able to
-     * interact with the choice, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Placeholder defaults
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
-    this.infoLabelDefaults = {
-      fi: "Lisätietoja",
-      en: "More information about",
-      sv: "Mera information om",
-    };
-    /**
-     * Hint text to display before the user types into the date picker input.
-     * @default  {
-     *     fi: "Lisätietoja",
-     *     en: "More information about",
-     *     sv: "Mera information om",
-     *   }
-     */
-    this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
     this.onMouseEnter = () => {
       this.isHovering = true;
     };
@@ -203,6 +96,42 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.toggleInfo = () => {
       this.isInfoOpen = !this.isInfoOpen;
     };
+    this.isHovering = false;
+    this.isInfoOpen = false;
+    this.isBlurred = false;
+    this.theme = "";
+    this.label = "label";
+    this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
+    this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.caption = "";
+    this.value = undefined;
+    this.type = "checkbox";
+    this.name = undefined;
+    this.checked = false;
+    this.collapsible = false;
+    this.margin = "auto";
+    this.icon = "";
+    this.expand = false;
+    this.padding = "auto";
+    this.identifier = undefined;
+    this.groupDirection = undefined;
+    this.groupDisabled = undefined;
+    this.groupResponsive = undefined;
+    this.disabled = false;
+    this.required = false;
+    this.infoLabelDefaults = {
+      fi: "Lisätietoja",
+      en: "More information about",
+      sv: "Mera information om",
+    };
+    this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
   }
   /**
    * Component lifecycle events.

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

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-14a163e6.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
-import { f as font_size_medium, t as tokens } from './p-c4d8cad0.js';
+import { f as font_size_medium, t as tokens } from './p-738bd3c5.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
-import { d as defineCustomElement$2 } from './p-908c1151.js';
+import { d as defineCustomElement$2 } from './p-fddad5df.js';
 
 const duetCollapsibleCss = "*.sc-duet-collapsible,*.sc-duet-collapsible::after,*.sc-duet-collapsible::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-collapsible-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;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:1rem;font-weight:600;line-height:1.5;color:#00294d}.duet-theme-turva.sc-duet-collapsible-h{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-m-0.sc-duet-collapsible-h{margin:0 !important}.duet-collapsible-content.sc-duet-collapsible{display:none;padding-left:18px;margin-top:8px;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;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}@media (max-width: 35.9375em){.duet-collapsible-content.sc-duet-collapsible{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva.sc-duet-collapsible{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}[open].sc-duet-collapsible-h .duet-collapsible-content.sc-duet-collapsible{display:block}.duet-collapsible-heading.sc-duet-collapsible{-webkit-user-select:none;user-select:none;display:flex;align-items:center;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.5;color:#00294d;cursor:pointer;border-radius:4px}.duet-collapsible-heading.duet-collapsible-normal-weight.sc-duet-collapsible{font-weight:400}.duet-collapsible-heading.duet-theme-turva.sc-duet-collapsible{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-collapsible-heading.sc-duet-collapsible .duet-collapsible-heading-content.sc-duet-collapsible{flex:1}.duet-collapsible-heading.sc-duet-collapsible:focus{outline:0}.user-is-tabbing.sc-duet-collapsible-h .duet-collapsible-heading.sc-duet-collapsible:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-collapsible-h .duet-collapsible-heading.sc-duet-collapsible:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon.sc-duet-collapsible{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:#00294d;transition:transform 300ms ease}.duet-collapsible-heading-icon.sc-duet-collapsible:last-child,.duet-collapsible-heading-icon.sc-duet-collapsible:last-of-type{margin-right:0 !important}[aria-expanded=true].sc-duet-collapsible .duet-collapsible-heading-icon.sc-duet-collapsible{transform:rotate(180deg)}";
 
@@ -18,46 +18,6 @@ const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.__registerHost();
     this.duetToggle = createEvent(this, "duetToggle", 7);
     this.id = createID("DuetCollapsible");
-    /**
-     * Theme of the collapsible.
-     */
-    this.theme = "";
-    /**
-     * The content for the collapsible heading.
-     */
-    this.heading = "";
-    /**
-     * The font weight of the heading
-     */
-    this.headingWeight = "semibold";
-    /**
-     * Custom headingSize to be used for font size of heading, as a design token entered
-     * in kebab-case x-small -> font-size-x-small.
-     * Example:
-     * # 12px (0.75rem)  ------  +2px   (x-small)
-     * # 14px (0.875rem) ------  +2px   (small)
-     * # 16px (1rem)     ------  +2px   (medium)
-     * # 20px (1.25rem)  ------  +4px   (large)
-     * # 24px (1.5rem)   ------  +4px   (x-large)
-     * # 36px (2.25rem)  ------  +12px  (xx-large)
-     * # 48px (3rem)     ------  +12px  (xxx-large)
-     * # 72px (4.5rem)   ------  +24px  (xxxx-large)
-     */
-    this.headingSize = undefined;
-    /**
-     * The actual heading level used for the heading in html markup. This setting
-     * exists for accessibility reasons. It doesn’t change the style visually.
-     * only variations of h1-h6 area accepted
-     */
-    this.headingLevel = undefined;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Is the component expanded or collapsed.
-     */
-    this.open = false;
     this.handleKeyDown = (e) => {
       if (isKeyboardClick(e)) {
         this.handleClick(e);
@@ -104,6 +64,13 @@ const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         originalEvent: e,
       });
     };
+    this.theme = "";
+    this.heading = "";
+    this.headingWeight = "semibold";
+    this.headingSize = undefined;
+    this.headingLevel = undefined;
+    this.margin = "auto";
+    this.open = false;
   }
   /**
    * Component lifecycle events.

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

@@ -1,15 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { d as debounce } from './p-0b3f675e.js';
 import { c as isEnterKey, b as isEscapeKey, d as isTabKey, e as isArrowUpKey, f as isArrowDownKey } from './p-d8549efe.js';
 import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
 import { p as parsePossibleJSON } from './p-5a9d75e1.js';
-import { h, F as Fragment } from './p-b9058029.js';
-import { d as defineCustomElement$3 } from './p-908c1151.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { h, F as Fragment } from './p-e4a60f42.js';
+import { d as defineCustomElement$2 } from './p-fddad5df.js';
 
 const SelectSingle = ({ item, search = "", selected }) => {
   const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;
@@ -35,17 +34,13 @@ const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined,
       h(SelectSingle, { item: item, search: search, selected: selected }))));
 };
 
-const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;width:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#00294d}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);display:none;overflow:hidden;background:white;border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-combobox-list.open.sc-duet-combobox{z-index:700;display:block}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:#cde5f1}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:white;background:#0077b3}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:#e1e3e6}";
+const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;width:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#00294d}.sc-duet-combobox-h a.sc-duet-combobox{color:#00294d;transition:none}.duet-theme-turva.sc-duet-combobox-h{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-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:#171c3a}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:#747475}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:#f4cfd6}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:white;background:#c60c30}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:white}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:white}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);height:0;overflow:hidden;background:white;border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1);opacity:0}.duet-combobox-list.open.sc-duet-combobox{z-index:700;display:block;height:auto;opacity:1}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:#909599}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:#cde5f1}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:#909599}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:white;background:#0077b3}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:white}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:white}";
 
 const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   constructor() {
     super();
     this.__registerHost();
     this.duetChange = createEvent(this, "duetChange", 3);
-    // Safari doesnt properly support aria-activedecendatn, the code associated with this bool is a workaround for that,
-    // this should be removed when Safari fixes the issue
-    // see: https://a11ysupport.io/tests/apg__aria-1-2-combobox-with-list-autocomplete-example#assertion-aria-aria-activedescendant_attribute-convey_value-aria-combobox_role-vo_macos-safari
-    this.isSafari = false;
     this.resizeObserver = new ResizeObserver(debounce(entries => {
       var _a, _b;
       // otherwise, something is wrong, expecting 1 element only
@@ -60,14 +55,8 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.inputValue = "";
     this.selectionMsg = "";
     this.listOpen = false;
-    // the selected item is based upon the DuetComboboxItem.id value
     this.selectedItems = new Set();
-    // the activeItem number is based upon the array.index of the array stored in processedItems
     this.activeItem = undefined;
-    /**
-     * Placeholder defaults
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
     this.accessibleLabelDefaults = {
       en: {
         heading: "Select:",
@@ -85,29 +74,12 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
       },
     };
-    /**
-     * Hint text to display before the user types into the date picker input.
-     * @default   {
-     * heading: "Valitse:",
-     * item: "{0}, ({1}/{2})",
-     * itemFiltered: "{0}, ({1}/{2} - {3} suodatettu"
-     * }
-     */
     this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), getLanguage());
-    /**
-     * Theme of the combobox.
-     */
     this.theme = "";
-    /**
-     * Force the user to make a selection (typing things in the input field will only be used for list search)
-     */
     this.force = false;
-    /**
-     * A hook to overwrite how the values are displayed in the input field after a User select an item
-     * @example (item) => `${item.name} (${item.value})`
-     * @default undefined
-     */
+    this.items = undefined;
     this.formatter = (item) => item && item.name ? item.name : "";
+    this.value = undefined;
   }
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
@@ -135,9 +107,6 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
-      this.isSafari = true;
-    }
     this.items = this.processedItems = parsePossibleJSON(this.items);
     this.input = this.element.querySelector("duet-input");
     this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
@@ -234,7 +203,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         component: "duet-combobox",
       });
     }
-    else if (isBlurred && this.selectedItems.size === 0) {
+    if (isBlurred && this.selectedItems.size === 0) {
       //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
       if (this.force) {
         this.inputValue = "";
@@ -257,6 +226,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     if (isEnterKey(e)) {
       e.preventDefault();
       this.selectActiveItem();
+      this.updateInputText(false);
       this.listOpen = false;
       return;
     }
@@ -310,7 +280,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
       return;
     }
     const item = items[this.activeItem];
-    this.selectionMsg = this.formatLabel(item, items.length, this.items.length);
+    this.selectionMsg = structuredClone(this.formatLabel(item, items.length, this.items.length));
   }
   //function that scrolls to the li element with the class "active"
   scrollToActive() {
@@ -338,14 +308,17 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
    */
   getFilteredItems() {
     // filter items based on user inputs
-    const filteredItems = this.processedItems.filter(item => 
-    // filter by name and value
-    // if value contains inputvalue
-    String(item.value).toLowerCase().includes(this.inputValue.toLowerCase()) ||
-      // if name contains input value
-      String(item.name).toLowerCase().includes(this.inputValue.toLowerCase()) ||
-      // if the item is selected
-      this.selectedItems.has(item.id));
+    const filteredItems = this.processedItems.filter(item => {
+      var _a, _b, _c, _d;
+      // filter by name and value
+      // if value contains inputvalue
+      return ((_a = String(item.value)) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith((_b = this.inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase())) ||
+        (
+        // if name contains input value
+        (_c = String(item.name)) === null || _c === void 0 ? void 0 : _c.toLowerCase().startsWith((_d = this.inputValue) === null || _d === void 0 ? void 0 : _d.toLowerCase())) ||
+        // if the item is selected
+        this.selectedItems.has(item.id);
+    });
     return this.sortFilteredItems(filteredItems);
   }
   /**
@@ -369,16 +342,18 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
    */
   render() {
     const selectElements = this.returnFilteredOrNonFiltered();
-    return (h$1(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+    return (h$1(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": "duet-combobox-list-element", "aria-haspopup": "listbox", class: {
         "duet-combobox": true,
         [`duet-theme-${this.theme}`]: true,
-      } }, h$1("slot", null), this.isSafari && (h$1("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)), h$1("div", { role: "list", class: {
+      } }, h$1("slot", null), h$1("div", { role: "list", class: {
         "duet-combobox-list": true,
         open: this.listOpen,
-      }, ref: el => (this.listContainer = el) }, h$1("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
-      selectElements.map((item, index) => {
-        return (h$1(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, this.returnFilteredOrNonFiltered().length, this.items.length) }));
-      })))));
+      }, ref: el => (this.listContainer = el) }, h$1("ul", { class: {
+        "duet-combobox-listbox-open": this.listOpen,
+        "duet-combobox-listbox": true,
+      }, role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element" }, selectElements.map((item, index) => {
+      return (h$1(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, this.returnFilteredOrNonFiltered().length, this.items.length) }));
+    })))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -406,7 +381,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["duet-combobox", "duet-icon", "duet-visually-hidden"];
+  const components = ["duet-combobox", "duet-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "duet-combobox":
       if (!customElements.get(tagName)) {
@@ -414,11 +389,6 @@ function defineCustomElement$1() {
       }
       break;
     case "duet-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "duet-visually-hidden":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/lib/dist-custom-elements/duet-cookie-consent.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-14a163e6.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$6 } from './p-b4b809ff.js';
-import { d as defineCustomElement$5 } from './p-908c1151.js';
-import { d as defineCustomElement$4 } from './p-e987e04b.js';
-import { d as defineCustomElement$3 } from './p-862c60cc.js';
-import { d as defineCustomElement$2 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$6 } from './p-eb6fc032.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 duetCookieConsentCss = "*,*::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;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;color:white !important;background-color:rgba(0, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(0, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.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\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:white !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 
@@ -17,18 +17,12 @@ const DuetCookieConsent$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.__registerHost();
     this.__attachShadow();
     this.duetCookieConsent = createEvent(this, "duetCookieConsent", 7);
-    /**
-     * Adds accessible label for the cookie consent ok button.
-     */
-    this.accessibleLabel = "Hyväksyn evästeiden käytön";
-    /**
-     * Theme of the cookie consent banner.
-     */
-    this.theme = "";
     this.handleClick = e => {
       e.preventDefault();
       this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
     };
+    this.accessibleLabel = "Hyväksyn evästeiden käytön";
+    this.theme = "";
   }
   /**
    * Component lifecycle events.