@duetds/components 6.2.3 → 6.2.5

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 import { i as isKeyboardClick } from './keyboard-utils-88ea1007.js';
@@ -18,60 +18,6 @@ const DuetCard = class {
     registerInstance(this, hostRef);
     this.duetToggle = createEvent(this, "duetToggle", 7);
     this.cardId = createID("DuetCard");
-    /**
-     * The content for the card heading. If empty, both heading and collapse
-     * functionality will be hidden.
-     */
-    this.heading = "";
-    /**
-     * Additional content for the card heading. If empty, both heading and collapse
-     * functionality will be hidden.
-     */
-    this.secondaryHeading = "";
-    /**
-     * Style variation of the card.
-     */
-    this.variation = "default";
-    /**
-     * Makes the card expand and collapse when the collapse/expand arrow in the
-     * heading is clicked or tapped. This option only works together with the
-     * heading option, meaning that you also need to set the heading for this
-     * functionality to show up.
-     */
-    this.collapsible = false;
-    /**
-     * If the card is collapsible, this property controls whether the card is open or closed.
-     */
-    this.open = true;
-    /**
-     * The actual heading level used for the heading in html markup. This setting
-     * exists for accessibility reasons. It doesn’t change the style visually.
-     */
-    this.headingLevel = "h2";
-    /**
-     * Custom color to be used for the card background, as a design token entered in
-     * camelCase or kebab-case. Example: "primary".
-     */
-    this.background = "gray-lightest";
-    /**
-     * The padding for the card. Please note that the card padding values don’t directly
-     * translate to similar space token names, but instead the card uses it’s own
-     * derived defaults.
-     */
-    this.padding = "small";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Theme of the card.
-     */
-    this.theme = "";
-    /**
-     * Breakpoint used to remove shadow around card. These match to
-     * similar media query tokens: $media-query-small and $media-query-medium.
-     */
-    this.shadowBreakpoint = undefined;
     /**
      * Local methods.
      */
@@ -88,6 +34,21 @@ const DuetCard = class {
         this.togglePanel(e);
       }
     };
+    this.accessibleLabel = undefined;
+    this.heading = "";
+    this.secondaryHeading = "";
+    this.variation = "default";
+    this.collapsible = false;
+    this.open = true;
+    this.headingLevel = "h2";
+    this.icon = undefined;
+    this.image = undefined;
+    this.background = "gray-lightest";
+    this.padding = "small";
+    this.margin = "auto";
+    this.theme = "";
+    this.url = undefined;
+    this.shadowBreakpoint = undefined;
   }
   /**
    * Component lifecycle events.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { c as createID } from './create-id-981107da.js';
 
@@ -17,54 +17,6 @@ const DuetCheckbox = class {
      * Own Properties.
      */
     this.checkboxId = createID("DuetCheckbox");
-    /**
-     * 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;
-    /**
-     * Aria selected
-     */
-    this.accessibleSelected = undefined;
-    /**
-     * 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;
-    /**
-     * Theme of the checkbox.
-     */
-    this.theme = "";
-    /**
-     * Makes the checkbox component disabled. This prevents users from being able to
-     * interact with the checkbox, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Label for the checkbox
-     */
-    this.label = "label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Check state of the checkbox.
-     */
-    this.checked = false;
     /**
      * Component event handling.
      */
@@ -93,6 +45,26 @@ const DuetCheckbox = class {
         component: "duet-checkbox",
       });
     };
+    this.accessibleActiveDescendant = undefined;
+    this.margin = "auto";
+    this.accessibleControls = undefined;
+    this.accessibleIndex = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.accessibleSelected = undefined;
+    this.required = false;
+    this.theme = "";
+    this.disabled = false;
+    this.identifier = undefined;
+    this.label = "label";
+    this.labelHidden = false;
+    this.name = undefined;
+    this.role = undefined;
+    this.checked = false;
+    this.value = undefined;
   }
   /**
    * Component lifecycle events.

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

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-97e04e4b.js';
 import { c as createID } from './create-id-981107da.js';
-import { F as FocusGuard } from './focus-utils-9787b47f.js';
+import { F as FocusGuard } from './focus-utils-abaea1e6.js';
 import { i as isKeyboardClick, h as isQuestionKey, f as isEscapeKey } from './keyboard-utils-88ea1007.js';
 import { g as getLocaleString, a as getLanguage } from './language-utils-bf701d37.js';
 import { f as findCheckedOption, w as watchForOptions } from './watch-options-dd55bce8.js';
@@ -26,113 +26,6 @@ const DuetChoice = class {
     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;
     };
@@ -200,6 +93,42 @@ const DuetChoice = class {
     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.
@@ -321,49 +250,6 @@ const DuetChoiceGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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));
     };
@@ -385,6 +271,19 @@ const DuetChoiceGroup = class {
       // 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/esm/duet-collapsible.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8469ee1a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4df60498.js';
 import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
 import { f as font_size_medium, t as tokens } from './tokens-0963dc8b.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
@@ -16,46 +16,6 @@ const DuetCollapsible = class {
     registerInstance(this, hostRef);
     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);
@@ -102,6 +62,13 @@ const DuetCollapsible = class {
         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/esm/duet-combobox.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8469ee1a.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4df60498.js';
 import { i as inheritGlobalTheme } from './themeable-component-cb76be7c.js';
 import { d as debounce } from './js-utils-fa98b8cd.js';
 import { n as isEnterKey, f as isEscapeKey, o as isTabKey, b as isArrowUpKey, c as isArrowDownKey } from './keyboard-utils-88ea1007.js';
@@ -32,16 +32,12 @@ 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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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
@@ -56,14 +52,8 @@ const DuetCombobox = class {
     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:",
@@ -81,29 +71,12 @@ const DuetCombobox = class {
         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` : "";
@@ -131,9 +104,6 @@ const DuetCombobox = class {
     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));
@@ -230,7 +200,7 @@ const DuetCombobox = class {
         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 = "";
@@ -253,6 +223,7 @@ const DuetCombobox = class {
     if (isEnterKey(e)) {
       e.preventDefault();
       this.selectActiveItem();
+      this.updateInputText(false);
       this.listOpen = false;
       return;
     }
@@ -306,7 +277,7 @@ const DuetCombobox = class {
       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() {
@@ -334,14 +305,17 @@ const DuetCombobox = class {
    */
   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);
   }
   /**
@@ -365,16 +339,18 @@ const DuetCombobox = class {
    */
   render() {
     const selectElements = this.returnFilteredOrNonFiltered();
-    return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+    return (h(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("slot", null), this.isSafari && (h("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)), h("div", { role: "list", class: {
+      } }, h("slot", null), h("div", { role: "list", class: {
         "duet-combobox-list": true,
         open: this.listOpen,
-      }, ref: el => (this.listContainer = el) }, h("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
-      selectElements.map((item, index) => {
-        return (h(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("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(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 getElement(this); }
   static get watchers() { return {