@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -3,25 +3,79 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C-4fRZp1.js');
+var actionArrowDownSmall = require('./action-arrow-down-small-CDsSJFvZ.js');
+var tokens = require('./tokens-DYbf8HFV.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var slotUtils = require('./slot-utils-DYGV7vRF.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
+require('./_commonjsHelpers-4N64IRaP.js');
 
-const index = require('./index-21e67ab3.js');
-const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');
-const tokens = require('./tokens-57e06fe4.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const slotUtils = require('./slot-utils-382633cf.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
-
-const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{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:rgb(8, 42, 77)}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{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:rgb(8, 42, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-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:rgb(8, 42, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading: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-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(8, 42, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}:host(.negative) .duet-collapsible-heading,:host(.negative) .duet-collapsible-content,:host(.negative) .duet-collapsible-heading-icon{color:rgb(255, 255, 255)}";
-const DuetCollapsibleStyle0 = duetCollapsibleCss;
+const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{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:rgb(8, 42, 77)}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{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:rgb(8, 42, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;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:rgb(8, 42, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-heading-centered .duet-collapsible-heading-caption{margin-inline:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading.has-caption{gap:4px}.duet-collapsible-heading.has-caption .duet-collapsible-heading-caption{margin-left:18px;font-weight:inherit}.duet-collapsible-heading .duet-collapsible-heading-wrapper{display:flex;align-items:center;width:inherit;margin:inherit}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading: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-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(8, 42, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}:host(.negative) .duet-collapsible-heading,:host(.negative) .duet-collapsible-content,:host(.negative) .duet-collapsible-heading-icon{color:rgb(255, 255, 255)}";
 
 const DuetCollapsible = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duetToggle = index.createEvent(this, "duetToggle", 7);
         this.id = createId.createID("DuetCollapsible");
+        /**
+         * Theme of the collapsible.
+         */
+        this.theme = "";
+        /**
+         * Negative variation for collapsible on dark background
+         */
+        this.negative = false;
+        /**
+         * The content for the collapsible heading.
+         */
+        this.heading = "";
+        /**
+         * The caption text to display below the heading.
+         */
+        this.caption = "";
+        /**
+         * Makes collapsible heading full width
+         */
+        this.headingFullWidth = false;
+        /**
+         * Centers heading inside its container
+         */
+        this.centerHeading = false;
+        /**
+         * 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 (keyboardUtils.isKeyboardClick(e)) {
                 this.handleClick(e);
@@ -60,6 +114,15 @@ const DuetCollapsible = class {
                     return "xx-small";
             }
         };
+        this.getAccessibleLabel = () => {
+            if (this.accessibleLabel) {
+                return this.accessibleLabel;
+            }
+            if (this.heading && this.caption) {
+                return `${this.heading}. ${this.caption}`;
+            }
+            return this.heading || null;
+        };
         this.handleClick = (e) => {
             e.preventDefault();
             this.open = !this.open;
@@ -68,17 +131,6 @@ const DuetCollapsible = class {
                 originalEvent: e,
             });
         };
-        this.theme = "";
-        this.negative = false;
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.headingFullWidth = false;
-        this.centerHeading = false;
-        this.headingWeight = "semibold";
-        this.headingSize = undefined;
-        this.headingLevel = undefined;
-        this.margin = "auto";
-        this.open = false;
     }
     /**
      * Component lifecycle events.
@@ -109,17 +161,18 @@ const DuetCollapsible = class {
      */
     render() {
         const HeadingTagName = this.headingLevel ? stringUtils.sanitizeString(this.headingLevel) : "div";
-        return (index.h(index.Host, { key: 'e75871cb9a6fd0f3050c22c4ac9059c8daa8c2ca', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, index.h(HeadingTagName, { key: '4b9571caa365df133f607952f427d5f2662a61d6' }, index.h("button", { key: '29f111d38aeac967f9ef9e2696fe0da79b07210c', class: {
+        return (index.h(index.Host, { key: 'fe41abfdb21abc1fcd1f6d532cb59f60597ad22a', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, index.h(HeadingTagName, { key: '71f1cb941dc0d4a002b653f46ae68de6f9136e9f' }, index.h("button", { key: 'c23e1f918a796a183d3b4541980bfe4d57e03fc9', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'f22a73bf54b611968e8e9ecfac22c4a5d912942a', class: "duet-collapsible-heading-icon" }, index.h("duet-icon", { key: '3f1706b22520ee9e1856ba3d9bd8f4e04a026e20', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.actionArrowDownSmall.svg })), index.h("div", { key: '88b89faf977d753d6d53f838d986b6ec567ed8e3', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (index.h("div", { key: '97304f5806f809b1d7e86306b60901ce96df2f8e', part: "duet-collapsible-after-heading" }, index.h("slot", { key: '0d37e9e85c477aa0f4b3f0f9b7209b429c917bd6', name: "after-heading" }))))), index.h("div", { key: 'cc27c3dca50171f016f3a0991a67f07334223f9b', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, index.h("slot", { key: 'b17cc5907e981ea030f3a070e6cad046e15af55c' }))));
+                "has-caption": !!this.caption,
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: '1b7f11bcbb1e9894806433465088b4fa9cfe0df9', class: "duet-collapsible-heading-wrapper" }, index.h("div", { key: '2ebe50f38af8326dff42b2698c2156e602a13e31', class: "duet-collapsible-heading-icon" }, index.h("duet-icon", { key: '8083a2ce335a218c7812efb574d8c780af69434e', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.arrowDownIcon.svg })), index.h("div", { key: '89e5be1c98ec483d8a16944495f6b2d31bb97e66', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (index.h("div", { key: '9ac908e2b7b01c61cf27fd1a10217170f758f0b9', part: "duet-collapsible-after-heading" }, index.h("slot", { key: '47c4f5bf5e48daf1103cfe2de5ebeaa167ec0a3b', name: "after-heading" })))), this.caption && (index.h("div", { key: '9a861895709d834c561698d78c638fdc654966d0', class: "duet-collapsible-heading-caption" }, index.h("duet-caption", { key: '9c0ab5adc56725d54f348289ac8ce26015fb8d5b', size: "small", margin: "none" }, this.caption))))), index.h("div", { key: 'aee2caf89e030e0e83b7b261b9d78b0e42a8a52d', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, index.h("slot", { key: '654bc193c93877733e95bb3bdfb0ddf86acbcd22' }))));
     }
     get element() { return index.getElement(this); }
 };
-DuetCollapsible.style = DuetCollapsibleStyle0;
+DuetCollapsible.style = duetCollapsibleCss;
 
 exports.duet_collapsible = DuetCollapsible;

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

@@ -3,16 +3,14 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const jsUtils = require('./js-utils-92e24ba1.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-const slotUtils = require('./slot-utils-382633cf.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
+var index = require('./index-C-4fRZp1.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var jsUtils = require('./js-utils-hJ4A2edy.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-DjPkoVoW.js');
+var slotUtils = require('./slot-utils-DYGV7vRF.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
 
 const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
     e.preventDefault();
@@ -32,7 +30,6 @@ const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefine
 };
 
 const duetComboboxCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(8, 42, 77)}:host a{color:rgb(8, 42, 77);transition:none}:host.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host.duet-theme-turva a{color:rgb(23, 28, 58)}.combobox-menu-container{width:var(--popup-width);max-height:200px}";
-const DuetComboboxStyle0 = duetComboboxCss;
 
 const DuetCombobox = class {
     constructor(hostRef) {
@@ -43,6 +40,7 @@ const DuetCombobox = class {
         this.inputId = createId.createID("duet-combobox-input-id");
         this.activeDescendantId = createId.createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
+        this.isInsideModal = false;
         this.resizeObserver = new ResizeObserver(jsUtils.debounce(entries => {
             var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
@@ -52,6 +50,76 @@ const DuetCombobox = class {
                 this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
+        this.processedItems = null;
+        this.inputValue = "";
+        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;
+        /**
+         * Defaults for the accessible labels for the select items
+         */
+        this.accessibleLabelDefaults = {
+            en: {
+                heading: "Select:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtered",
+            },
+            fi: {
+                heading: "Valitse:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} suodatettu",
+            },
+            sv: {
+                heading: "Välj:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtrerade",
+            },
+        };
+        /**
+         * Accessible labels for the select items
+         */
+        this.accessibleLabels = languageUtils.getLocaleString(this.accessibleLabelDefaults, languageUtils.getLanguage());
+        /**
+         * Label for the input if input is not provided as a slotted element.
+         */
+        this.label = "";
+        /**
+         * Caption for the input if input is not provided as a slotted element.
+         */
+        this.caption = "";
+        /**
+         * 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 property also sync input value with selected value on blur.
+         */
+        this.force = false;
+        /**
+         * Allow multiple selections. Selections are displayed as DuetChips.
+         */
+        this.multiple = 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.formatter = (item) => item && item.name ? item.name : "";
+        /**
+         * Defines minimum number of characters that must be given to show search results
+         */
+        this.minCharacters = 0;
+        /**
+         * Defines if items list should always open after clicking on input
+         */
+        this.openListOnClick = false;
+        /**
+         * Defines if filtering of items should be done by includes or startsWith
+         */
+        this.filterType = "startsWith";
         this.onInputChange = async (e) => {
             const newValue = e.detail.value;
             this.inputValue = newValue;
@@ -148,40 +216,6 @@ const DuetCombobox = class {
             }
             return;
         };
-        this.processedItems = null;
-        this.inputValue = "";
-        this.listOpen = false;
-        this.selectedItems = new Set();
-        this.activeItem = undefined;
-        this.accessibleLabelDefaults = {
-            en: {
-                heading: "Select:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
-            },
-            fi: {
-                heading: "Valitse:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
-            },
-            sv: {
-                heading: "Välj:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
-            },
-        };
-        this.accessibleLabels = languageUtils.getLocaleString(this.accessibleLabelDefaults, languageUtils.getLanguage());
-        this.label = "";
-        this.caption = "";
-        this.theme = "";
-        this.force = false;
-        this.multiple = false;
-        this.items = undefined;
-        this.formatter = (item) => item && item.name ? item.name : "";
-        this.value = undefined;
-        this.minCharacters = 0;
-        this.openListOnClick = false;
-        this.filterType = "startsWith";
     }
     popupMenuOpenHandler() {
         if (this.listOpen) {
@@ -289,6 +323,9 @@ const DuetCombobox = class {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        if (this.element.closest("duet-modal")) {
+            this.isInsideModal = true;
+        }
         themeableComponent.inheritGlobalTheme(this);
     }
     connectedCallback() {
@@ -564,7 +601,7 @@ const DuetCombobox = class {
         return (index.h(index.Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, index.h("slot", null), index.h("div", null, index.h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false }, index.h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, index.h("slot", null), index.h("div", null, index.h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, index.h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index$1) => {
                 return (index.h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index$1 === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index$1, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), index.h("duet-spacer", { size: "x-small" }))))));
@@ -578,6 +615,6 @@ const DuetCombobox = class {
         "value": ["processValue"]
     }; }
 };
-DuetCombobox.style = DuetComboboxStyle0;
+DuetCombobox.style = duetComboboxCss;
 
 exports.duet_combobox = DuetCombobox;

package/lib/cjs/duet-contact-card.cjs.entry.js

@@ -3,15 +3,12 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-C-4fRZp1.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var languageUtils = require('./language-utils-DjPkoVoW.js');
+require('./string-utils-B35hEUBv.js');
 
 const duetContactCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:block}:host(.duet-m-0){margin:0 !important}::slotted(*){padding-top:1.5rem}@media (min-width: 48em){::slotted(*){grid-column:2/span 2;padding-top:0}}.duet-contact-card{display:grid;grid-template-columns:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}.duet-contact-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card .image{width:4rem;height:4rem;margin-bottom:8px;border-radius:4px}@media (min-width: 48em){.duet-contact-card .image{width:6rem;height:6rem;padding-bottom:0}}.duet-contact-card .description{padding-bottom:8px}.duet-contact-card .email,.duet-contact-card .phone{display:grid;grid-template-columns:min-content auto;gap:8px;align-items:center;justify-content:flex-start;padding-bottom:8px;overflow-wrap:break-word}";
-const DuetContactCardStyle0 = duetContactCardCss;
 
 const DuetContactCard = class {
     constructor(hostRef) {
@@ -25,16 +22,18 @@ const DuetContactCard = class {
             sv: "Telefon",
         };
         this.language = languageUtils.getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.image = undefined;
-        this.name = undefined;
-        this.description = undefined;
-        this.email = undefined;
-        this.phone = undefined;
-        this.buttonText = undefined;
+        /**
+         * Button icon.
+         */
         this.buttonIcon = "form-date";
-        this.buttonUrl = undefined;
     }
     /**
      * Component lifecycle events.
@@ -55,13 +54,13 @@ const DuetContactCard = class {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (index.h(index.Host, { key: 'ee161f82ee10fff2c20d0a1710bad6af28d693f4', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: 'b9252238696889b1c15f9c7ade693f7e0d28c5da', class: {
+        return (index.h(index.Host, { key: 'b0c36badfe9ad51afdf85655fd60cf2d5aa3c1bc', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '91ae8f5dd2f9d51deec7b7d541815b174192d069', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? index.h("img", { class: "image", src: this.image, alt: this.name }) : index.h("div", null), index.h("div", { key: 'c9575adf25010f58a30f297b89355cf1c404a03e' }, this.name && (index.h("duet-heading", { key: '2158805949358fd34db41c0b182c384ea19e7691', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: 'f9372c59121b55e6247515dba14f557fd73a0c80', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: 'abf9dfb8a80916d11a756d51556f17d63ff3ccb1', class: "email" }, index.h("duet-icon", { key: '8ed9a810ce0a6523541e1f25221d6c0efbe04dfe', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: 'ebe066f4492bf29aa08c0ad4e7bffc3bc33da31d', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: '95d380ceee42f69a6ed0f9d1c611a32a71fce355', class: "phone" }, index.h("duet-icon", { key: '785043c08e6fca93a358f385b4fe1a9fe52ce74b', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '3f798fe2fb406091faadec2e72b7da3ccced7b83', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: '603dc620090b067f6798a117df506ba244163f3a', class: "call-to-action" }, index.h("duet-button", { key: '585f7cf08e0620af3af47ef41436a90d75aa48bd', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: 'f9c5a90f43159f6349b09b515bb9b75fc06bb7d3' }), index.h("slot", { key: 'aac7d0d9a759305ef4986cc11ce446f191f72133' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? index.h("img", { class: "image", src: this.image, alt: this.name }) : index.h("div", null), index.h("div", { key: '2b1b6ce9bea2d827f70ac908db390e480c2ed4f4' }, this.name && (index.h("duet-heading", { key: 'fc5f8996740e7be6f563d7aefdc4f2937922763a', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: '618c252939e12d7de69832fc38625825f7fcccf4', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: '64cfcf022b32d7c26f329463f5d843c390b2e433', class: "email" }, index.h("duet-icon", { key: 'b5736012fefed4c34d135ad282cda14b6353554b', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '5c57b7ed447681f458af6cd668663b9d197a5d08', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: '8c41242e1376c1f8afbcf0b1e7c2d414d7a85640', class: "phone" }, index.h("duet-icon", { key: 'bccc433c5d267385f46ff318be7610fa84cde07a', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '49faa83e88a7feb9533717a08b451b2c9f6164f1', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: 'b4e5155d34f399665499a8f35eb47b9a02c450bc', class: "call-to-action" }, index.h("duet-button", { key: 'f7ab7302ee6b77498628f954ab3553a1cfcd8a5c', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: '6edc65ed13b8b80bef7a4e756c1a942752fd948e' }), index.h("slot", { key: '13472a80b020da3fe1f095d21bc1a20fc8293a09' }))));
     }
     get element() { return index.getElement(this); }
 };
-DuetContactCard.style = DuetContactCardStyle0;
+DuetContactCard.style = duetContactCardCss;
 
 exports.duet_contact_card = DuetContactCard;

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

@@ -3,25 +3,28 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
+var index = require('./index-C-4fRZp1.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.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:not(.descendant-focused):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:not(.descendant-focused).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:rgb(255, 255, 255) !important;background-color:rgba(4, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(4, 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:rgb(255, 255, 255) !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}";
-const DuetCookieConsentStyle0 = duetCookieConsentCss;
 
 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 = "";
     }
     handleFocusIn(event) {
         const eventPath = event.composedPath();
@@ -50,10 +53,10 @@ const DuetCookieConsent = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '61cde7dad29f6806c3bf5f598897ebab55a50c2c', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: 'acb59a9600f655eb3c485a7334dd078c03f82f56', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '5d1eb2561aef70174bb1ca9d11e44ae2d743a13a', class: "duet-cookie-consent-content" }, index.h("div", { key: 'ef24cb4ba0672188c6216da4007746b52fa46526', class: "expand" }, index.h("slot", { key: '7e170fcdf30814f4308ae952a2236e67b5fecf2e' })), index.h("duet-spacer", { key: '3155cd41922ea15d6543243292651832b353461f', size: "large", direction: "horizontal" }), index.h("div", { key: 'e6578866cc2ea81852778c514eb5c04f766a2dcc' }, index.h("duet-button", { key: 'dae7a5c4b619f93d19fbc3e72e0c782fbef9550f', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (index.h(index.Host, { key: '7921497a4e650f12844d8087fafe151a9d8540d7', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '8f9646d7f81988fc9b75788ed0de0065b60707b5', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: 'e93944b488a7e758bbf6ec55d5c0a742bbf0120c', class: "duet-cookie-consent-content" }, index.h("div", { key: '113fd7c908b35e420fc0aa7cdb418633b18aa763', class: "expand" }, index.h("slot", { key: '2983dc8cfbb0031c4fc0e9174aaf0228fd5b3fd6' })), index.h("duet-spacer", { key: '5548894f44e7217869e00bc88b05abf07685ad59', size: "large", direction: "horizontal" }), index.h("div", { key: '2722111a740170dd966f332ef0b0788f023b4152' }, index.h("duet-button", { key: '07a3d59eede200239a4a3087decfc143ae86883b', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetCookieConsent.style = DuetCookieConsentStyle0;
+DuetCookieConsent.style = duetCookieConsentCss;
 
 exports.duet_cookie_consent = DuetCookieConsent;