@duetds/components 6.2.4 → 6.2.6

package/lib/cjs/duet-combobox.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const jsUtils = require('./js-utils-134e0318.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
@@ -36,16 +36,12 @@ const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined,
       index.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) {
     index.registerInstance(this, hostRef);
     this.duetChange = index.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(jsUtils.debounce(entries => {
       var _a, _b;
       // otherwise, something is wrong, expecting 1 element only
@@ -60,14 +56,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:",
@@ -85,29 +75,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 = languageUtils.getLocaleString(stringUtils.parsePossibleJSON(this.accessibleLabelDefaults), languageUtils.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 +108,6 @@ const DuetCombobox = class {
     themeableComponent.inheritGlobalTheme(this);
   }
   connectedCallback() {
-    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
-      this.isSafari = true;
-    }
     this.items = this.processedItems = stringUtils.parsePossibleJSON(this.items);
     this.input = this.element.querySelector("duet-input");
     this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
@@ -234,7 +204,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 = "";
@@ -257,6 +227,7 @@ const DuetCombobox = class {
     if (keyboardUtils.isEnterKey(e)) {
       e.preventDefault();
       this.selectActiveItem();
+      this.updateInputText(false);
       this.listOpen = false;
       return;
     }
@@ -310,7 +281,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() {
@@ -338,14 +309,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);
   }
   /**
@@ -369,16 +343,18 @@ const DuetCombobox = class {
    */
   render() {
     const selectElements = this.returnFilteredOrNonFiltered();
-    return (index.h(index.Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+    return (index.h(index.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,
-      } }, index.h("slot", null), this.isSafari && (index.h("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)), index.h("div", { role: "list", class: {
+      } }, index.h("slot", null), index.h("div", { role: "list", class: {
         "duet-combobox-list": true,
         open: this.listOpen,
-      }, ref: el => (this.listContainer = el) }, index.h("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
-      selectElements.map((item, index$1) => {
-        return (index.h(DuetComboBoxSelect, { item: item, active: index$1 === 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) }, index.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$1) => {
+      return (index.h(DuetComboBoxSelect, { item: item, active: index$1 === 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 index.getElement(this); }
   static get watchers() { return {

package/lib/cjs/duet-cookie-consent.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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}";
@@ -14,18 +14,12 @@ const DuetCookieConsent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.duetCookieConsent = index.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.

package/lib/cjs/duet-date-picker.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-25247ce1.js');
+const focusUtils = require('./focus-utils-0d18f24e.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 require('./string-utils-5cadd058.js');
 
@@ -416,112 +416,6 @@ const DuetDatePicker = class {
     this.initialTouchX = null;
     this.initialTouchY = null;
     this.focusTarget = null;
-    this.open = false;
-    this.focusedDay = new Date();
-    this.inputValue = "";
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * Expands the date picker input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Name of the date picker input.
-     */
-    this.name = "";
-    /**
-     * Adds a unique identifier for the date picker input.
-     */
-    this.identifier = "";
-    /**
-     * Label for the date picker input.
-     */
-    this.label = "";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * The currently active language. This setting changes the month/year/day.
-     * names and button labels as well as all screen reader labels.
-     * @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 = languageUtils.getLanguage();
-    /**
-     * Placeholder defaults.
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
-    this.placeholderDefaults = {
-      fi: "pp.kk.vvvv",
-      en: "dd.mm.yyyy",
-      sv: "dd.mm.åååå",
-    };
-    /**
-     * Hint text to display before the user types into the date picker input.
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
-    this.placeholder = languageUtils.getLocaleString(this.placeholderDefaults, this.language);
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * Makes the date picker 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;
-    /**
-     * Display the date picker input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = 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;
-    /**
-     * Forces the opening direction of the calendar modal to be always left or right.
-     * This setting can be useful when the input is smaller than the opening date picker
-     * would be as by default the picker always opens towards right.
-     */
-    this.direction = "right";
-    /**
-     * Tooltip to display next to the label of the date picker 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";
-    /**
-     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-     */
-    this.value = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.min = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.max = "";
-    /**
-     * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
-     */
-    this.incrementYears = 10;
     this.enableActiveFocus = () => {
       this.focusTarget = "day-button";
     };
@@ -620,6 +514,41 @@ const DuetDatePicker = class {
         this.setValue(parsed);
       }
     };
+    this.open = false;
+    this.focusedDay = new Date();
+    this.inputValue = "";
+    this.theme = "";
+    this.expand = false;
+    this.name = "";
+    this.identifier = "";
+    this.label = "";
+    this.caption = undefined;
+    this.margin = "auto";
+    this.language = languageUtils.getLanguage();
+    this.placeholderDefaults = {
+      fi: "pp.kk.vvvv",
+      en: "dd.mm.yyyy",
+      sv: "dd.mm.åååå",
+    };
+    this.placeholder = languageUtils.getLocaleString(this.placeholderDefaults, this.language);
+    this.echoPlaceholder = false;
+    this.disabled = false;
+    this.error = "";
+    this.labelHidden = false;
+    this.role = undefined;
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.required = false;
+    this.direction = "right";
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.incrementYears = 10;
+    this.validity = undefined;
   }
   updateValidity() {
     this.determineValidity(parseISODate(this.value));

package/lib/cjs/duet-divider_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e009343b.js');
+const index = require('./index-14a34a4b.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 
 const duetDividerCss = "*,*::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-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:#e1e3e6}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:#e4e4e6}";
@@ -13,13 +13,7 @@ const duetDividerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;mar
 const DuetDivider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Theme of the divider.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
   }
   /**
@@ -49,18 +43,8 @@ const duetSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background
 const DuetSpacer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Size variation of the spacer. Can be any of the spacing tokens.
-     */
     this.size = "medium";
-    /**
-     * Direction of the space added.
-     */
     this.direction = "vertical";
-    /**
-     * Adjusts the breakpoint where the spacer is shown in. The functionality
-     * follows 1:1 the media queries defined in design tokens.
-     */
     this.breakpoint = "";
   }
   /**