@duetds/components 5.0.4 → 5.1.1

package/lib/cjs/duet-action-button.cjs.entry.js

@@ -5,15 +5,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
+const index = require('./index-e44f9b36.js');
 const createId = require('./create-id-c3b984b1.js');
 const jsUtils = require('./js-utils-be1d29ae.js');
-const keyboardUtils = require('./keyboard-utils-898cfe14.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-const tokenUtils = require('./token-utils-ac8432d1.js');
-require('./string-utils-267e3dbb.js');
-require('./tokens.module-6afcc9c1.js');
+const keyboardUtils = require('./keyboard-utils-bb32119b.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+const tokenUtils = require('./token-utils-f402e205.js');
+require('./string-utils-5cadd058.js');
+require('./tokens.module-6b2df1c2.js');
 
 const duetActionButtonCss = "*,*::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:inline-block;margin:0 auto}button.duet-action-button{white-space:nowrap}button.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}.duet-theme-turva button.duet-action-button{color:#171c3a;background:#f5f5f7}button.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){button.duet-action-button{width:32px;height:32px}}button.duet-action-button:not(:disabled):hover{background:#e9ecee !important}.duet-theme-turva button.duet-action-button:not(:disabled):hover{background:#e9e9eb !important}button.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva button.duet-action-button:focus{box-shadow:0 0 0 2px #171c3a !important}button.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-theme-turva button.duet-action-button:active:focus{background:#ddddde !important}button.duet-action-button:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}.duet-theme-turva button.duet-action-button:disabled{color:#747475;background:#f5f5f7}";
 

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-require('./string-utils-267e3dbb.js');
+const index = require('./index-e44f9b36.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+require('./string-utils-5cadd058.js');
 
 const duetAlertCss = "*,*::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%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}: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}:host(.duet-alert-is-dismissed){max-height:0;visibility:hidden;opacity:0;transform:scale(0.98)}:host(.duet-alert-is-dismissed) .duet-alert{margin:0 !important}.duet-alert{margin-bottom:16px !important;position:relative;width:100%;padding:16px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:#00294d;background:#f2f8fb;border:1px solid #0077b3;border-radius:4px;transition:margin 100ms 300ms ease}.duet-alert.duet-p-0{padding:0 !important}.duet-alert.duet-m-0{margin:0 !important}.duet-alert.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:#171c3a;background:#f3f4f5;border-color:#171c3a}.duet-alert.warning{background:#fffbf4;border-color:#f7b228}.duet-alert.warning.duet-theme-turva{background:#fffaf3;border-color:#faa40f}.duet-alert.danger{background:#fdf4f7;border-color:#de2362}.duet-alert.danger.duet-theme-turva{background:#fdf4f3;border-color:#e02a0d}.duet-alert.success{background:#f2f9f7;border-color:#00875a}.duet-alert.success.duet-theme-turva{background:#f3f9f6;border-color:#08874e}.duet-alert-dismiss{position:absolute;top:2px;right:2px}.duet-alert-container{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}.duet-alert-container span{width:100%}.duet-alert-has-icon .duet-alert-container{margin-top:2px !important}.duet-alert-icon{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}.duet-alert-icon duet-icon{width:20px;height:20px}.duet-alert-is-dismissible{padding:16px 48px 16px 16px;text-align:left}.duet-alert-is-dismissible .duet-alert-container{text-align:left}";
 

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
+const index = require('./index-e44f9b36.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
 
 const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;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.75rem;font-style:normal;font-weight:600;line-height:1.25;color:#00294d;text-align:center;word-break:break-word;vertical-align:middle;background:#e6f1f7;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:#171c3a;background:#e8e8eb}.duet-badge.warning{background:#fef3df}.duet-badge.warning.duet-theme-turva{background:#fef1db}.duet-badge.danger{background:#fce9ef}.duet-badge.danger.duet-theme-turva{background:#fceae7}.duet-badge.success{background:#e6f3ef}.duet-badge.success.duet-theme-turva{background:#e6f3ed}";
 

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
+const index = require('./index-e44f9b36.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
 
 const duetBreadcrumbCss = "*,*::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-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-require('./string-utils-267e3dbb.js');
+const index = require('./index-e44f9b36.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+require('./string-utils-5cadd058.js');
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
+const index = require('./index-e44f9b36.js');
 const commonStrings = require('./common-strings-de17f887.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-const tokenUtils = require('./token-utils-ac8432d1.js');
-require('./string-utils-267e3dbb.js');
-require('./tokens.module-6afcc9c1.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+const tokenUtils = require('./token-utils-f402e205.js');
+require('./string-utils-5cadd058.js');
+require('./tokens.module-6b2df1c2.js');
 
 const duetButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;min-width:8rem;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;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#0077b3 !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button.duet-button-text-center{text-align:center !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){padding:9px 19px 10px !important;min-width:5.3333333333rem;font-size:0.875rem}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}.duet-theme-turva .duet-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30 !important}.duet-button .duet-button-contents{position:relative;display:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button:active{opacity:0.75;transition:none}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{color:#c60c30 !important;border-color:#e4e4e6}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.default.duet-button-negative{background-color:white}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:#e4e4e6 !important}.duet-button.default.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.primary{color:white !important;background:#0077b3;border-color:#0077b3}.duet-theme-turva .duet-button.primary{color:white !important;background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.primary:focus{outline:0;box-shadow:0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}.duet-button.secondary{color:#00294d !important;background:transparent;border-color:#00294d}.duet-theme-turva .duet-button.secondary{color:#171c3a !important;border-color:#171c3a}.duet-button.secondary:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.secondary.duet-button-negative{color:#e1e3e6 !important;border-color:white}.duet-theme-turva .duet-button.secondary.duet-button-negative{color:#e4e4e6 !important}.duet-button.secondary.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.negative{color:#00294d !important;background:white;border-color:white}.duet-theme-turva .duet-button.negative{color:#171c3a !important}.duet-button.negative:hover{color:white !important;background:transparent;border-color:white}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:white !important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive-primary{color:white !important;background:#e02a0d;border-color:#e02a0d}.duet-button.destructive-primary:hover{background:#b21c4e;border-color:#b21c4e;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:white !important;background:#b3220a;border-color:#b3220a}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:#c60c30 !important;background:transparent;border-color:transparent}.duet-button.plain.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:#657787 !important;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}.duet-button.plain:hover{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:#940925 !important}.duet-button.plain.duet-button-negative{color:white !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:#e4e4e6 !important}.duet-button.plain.duet-button-negative:hover{color:#0077b3 !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:#c60c30 !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:#657787 !important;background:#e1e3e6 !important;border-color:#e1e3e6 !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-button-is-loading.primary{color:white}.duet-button-is-loading.default{color:#0077b3}.duet-button-is-loading.default.duet-theme-turva{color:#c60c30}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
 

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

@@ -5,14 +5,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-const stringUtils = require('./string-utils-267e3dbb.js');
-const tokenUtils = require('./token-utils-ac8432d1.js');
+const index = require('./index-e44f9b36.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+const stringUtils = require('./string-utils-5cadd058.js');
+const tokenUtils = require('./token-utils-f402e205.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
-const languageUtils = require('./language-utils-aa282901.js');
-require('./tokens.module-6afcc9c1.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+require('./tokens.module-6b2df1c2.js');
 
 const duetCaptionCss = ":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:flex;flex:0 0 100%;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#657787;vertical-align:top}:host.duet-p-0{padding:0 !important}:host.duet-m-0{margin:0 !important}:host(.duet-caption-small){font-size:0.875rem;line-height:1.25}: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:#747475}:host(.duet-caption-selected){color:#0077b3}:host(.duet-caption-selected.duet-theme-turva){color:#171c3a}:host(.duet-m-0){margin:0 !important}";
 

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
+const index = require('./index-e44f9b36.js');
 const createId = require('./create-id-c3b984b1.js');
-const keyboardUtils = require('./keyboard-utils-898cfe14.js');
-const stringUtils = require('./string-utils-267e3dbb.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-const tokenUtils = require('./token-utils-ac8432d1.js');
-require('./tokens.module-6afcc9c1.js');
+const keyboardUtils = require('./keyboard-utils-bb32119b.js');
+const stringUtils = require('./string-utils-5cadd058.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+const tokenUtils = require('./token-utils-f402e205.js');
+require('./tokens.module-6b2df1c2.js');
 
 var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
 

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
+const index = require('./index-e44f9b36.js');
 const createId = require('./create-id-c3b984b1.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
 
 const duetCheckboxCss = "*.sc-duet-checkbox,*.sc-duet-checkbox::after,*.sc-duet-checkbox::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-checkbox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-checkbox-h:last-child,.sc-duet-checkbox-h:last-of-type{margin-right:0 !important}.sc-duet-checkbox-h:last-child:not(:only-child){margin-bottom:0 !important}.duet-m-0.sc-duet-checkbox-h{margin:0 !important}.duet-label.sc-duet-checkbox{position:relative;z-index:100;display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#00294d;vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva.sc-duet-checkbox .duet-label.sc-duet-checkbox{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-label.sc-duet-checkbox span.sc-duet-checkbox{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container.sc-duet-checkbox{position:relative;width:100%;height:100%}.duet-checkbox.sc-duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:white;border:1px solid #00294d;border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#00294d;border:1px solid #00294d}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#171c3a;border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox{position:static}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled].sc-duet-checkbox{cursor:default}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#747475}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfcfd1}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#657787;border:1px solid #657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#747475;border-color:#747475}.duet-label-hidden.sc-duet-checkbox .duet-label.sc-duet-checkbox span.sc-duet-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 

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

@@ -5,15 +5,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
+const index = require('./index-e44f9b36.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-88e98997.js');
-const keyboardUtils = require('./keyboard-utils-898cfe14.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
+const focusUtils = require('./focus-utils-a03e60dd.js');
+const keyboardUtils = require('./keyboard-utils-bb32119b.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
 const watchOptions = require('./watch-options-d88afac0.js');
-require('./string-utils-267e3dbb.js');
+require('./string-utils-5cadd058.js');
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef094178.js');
+const index = require('./index-e44f9b36.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');
-const tokens = require('./tokens-72efc7fd.js');
+const tokens = require('./tokens-8596cece.js');
 const createId = require('./create-id-c3b984b1.js');
-const keyboardUtils = require('./keyboard-utils-898cfe14.js');
-const stringUtils = require('./string-utils-267e3dbb.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
+const keyboardUtils = require('./keyboard-utils-bb32119b.js');
+const stringUtils = require('./string-utils-5cadd058.js');
+const themeableComponent = require('./themeable-component-940d3b50.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}: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:#00294d}: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:#171c3a}: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:#00294d}@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:#171c3a}: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:#00294d;cursor:pointer;border-radius:4px}.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:#171c3a}.duet-collapsible-heading .duet-collapsible-heading-content{flex:1}.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-theme-turva) .duet-collapsible-heading: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:#00294d;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)}";
 

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

@@ -0,0 +1,390 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e44f9b36.js');
+const jsUtils = require('./js-utils-be1d29ae.js');
+const keyboardUtils = require('./keyboard-utils-bb32119b.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+const stringUtils = require('./string-utils-5cadd058.js');
+const themeableComponent = require('./themeable-component-940d3b50.js');
+
+const SelectSingle = ({ item, search = "", selected }) => {
+  const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;
+  return (index.h(index.Fragment, null,
+    selected && index.h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }),
+    regEx ? (index.h("span", { class: "option-container", "aria-hidden": "true" },
+      index.h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight">$&</span>') }))) : (item.name),
+    item.tags && index.h("span", { class: "option-tags" }, item.tags.join(", "))));
+};
+
+const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined, clickHandler = e => {
+  e.preventDefault();
+}, keyHandler = e => {
+  e.preventDefault();
+}, search, }) => {
+  return (index.h("li", { class: {
+      "list-item": true,
+      option: true,
+      active: active,
+      selected: selected,
+    }, id: active ? "active_item" : "", "data-index": item.id, "aria-selected": active ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})` },
+    index.h("a", { tabindex: "-1", onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), class: "option-link", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})`, "aria-hidden": "true" },
+      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 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
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        this.listContainer.style.width = `${currentWidth + 1}px`;
+        // this.listElement.style.width = `${currentWidth + 1}px`
+      }
+    }, 100));
+    this.processedItems = null;
+    this.inputWidth = 0;
+    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:",
+        item: "{name}, ({current} of {total})",
+        itemFiltered: "{name}, ({current} of {total}, {hiddenItems} filtered)",
+      },
+      fi: {
+        heading: "Valitse:",
+        item: "{name}, ({current}/{total})",
+        itemFiltered: "{name}, ({current}/{total}, {hiddenItems} suodatettu)",
+      },
+      sv: {
+        heading: "Välj:",
+        item: "{name}, ({current} av {total})",
+        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.formatter = (item) => item && item.name ? item.name : "";
+  }
+  activeItemHandler(state) {
+    this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
+  }
+  handleDocumentClick(e) {
+    //we want to remove all user text if they have NOT selected from the dropdown
+    const path = e.composedPath();
+    const isClickOutside = path.every(el => el !== this.element);
+    if (isClickOutside) {
+      this.updateInputText(true);
+      this.listOpen = false;
+    }
+  }
+  /**
+   * Exposes a formatter function to format the item value displayed after a user selects an item
+   * @param item: DuetComboboxItem
+   */
+  async formatItem(item) {
+    return this.formatter(item);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    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));
+    this.input.addEventListener("click", () => {
+      this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false);
+    });
+    this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    //add correct aria attributes to the input element
+    this.input.accessibleAutocomplete = "list";
+    this.input.accessibleControls = "duet-combobox-list-element";
+  }
+  disconnectedCallback() {
+    this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
+    this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
+    this.element.removeEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    this.listElement.removeEventListener("click", e => {
+      e.stopPropagation();
+    });
+    this.resizeObserver.disconnect();
+  }
+  componentDidLoad() {
+    // observe resize events to dynamically adjust size of dropdown area
+    this.resizeObserver.observe(this.input);
+    this.listElement.addEventListener("click", e => {
+      e.stopPropagation();
+    });
+  }
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param event - event
+   *'param item: DuetComboboxItem - the item that was selected
+   */
+  onListClick(e, item) {
+    e.preventDefault();
+    // update selected item with id
+    this.updateSelectedItems(item.id);
+    this.listOpen = false;
+    return this.listOpen;
+  }
+  /**
+   * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
+   * TODO: this should be disabled in multiple mode
+   */
+  shouldListBeFiltered() {
+    if (this.selectedItems.size && this.input.value === this.inputValue) {
+      const item = this.items.filter(item => this.selectedItems.has(item.id));
+      return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
+    }
+    return true;
+  }
+  /**
+   * Helper function that return correct collection depending on filter status returend by shouldListBeFiltered
+   */
+  returnFilteredOrNonFiltered() {
+    return this.processedItems
+      ? this.shouldListBeFiltered()
+        ? this.getFilteredItems()
+        : this.sortFilteredItems(this.processedItems)
+      : [];
+  }
+  /**
+   * Updates the selected items based on the item id.
+   * @param id
+   * @private
+   */
+  async updateSelectedItems(id) {
+    // for a multiple scenario wrap this in an if/else and just don't clear here
+    this.selectedItems.clear();
+    if (this.selectedItems) {
+      if (this.selectedItems.has(id)) {
+        this.selectedItems.delete(id);
+      }
+      else {
+        this.selectedItems.add(id);
+      }
+    }
+    await this.updateInputText();
+  }
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param bool -override to clear if invoked by "click outside"
+   */
+  async updateInputText(isBlurred = false) {
+    const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
+    if (this.selectedItems.size === 1) {
+      this.input.value = ""; // set value to empty so that cursor position follows accordingly
+      this.input.value = await this.formatItem(item[0]);
+      this.input.scrollLeft = this.input.scrollWidth;
+      this.activeItem = undefined;
+      this.value = await this.formatItem(item[0]);
+      this.duetChange.emit({
+        value: item[0].value,
+        item: item[0],
+        component: "duet-combobox",
+      });
+    }
+    else 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 = "";
+        this.input.value = "";
+      }
+      this.activeItem = undefined;
+    }
+    this.listOpen = false;
+  }
+  updateInputValue(e) {
+    var _a;
+    this.inputValue = e.detail.value;
+    this.listOpen = String(this.inputValue).length > 0 && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleInputKeyDownEvent(e) {
+    //if selection is made, close the list and update internal and external values
+    // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+    // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+    this.input.accessibleActiveDescendant = undefined;
+    if (keyboardUtils.isEnterKey(e)) {
+      e.preventDefault();
+      this.selectActiveItem();
+      this.listOpen = false;
+      return;
+    }
+    //tabbing out or escaping, restore initial state
+    if (keyboardUtils.isEscapeKey(e) || keyboardUtils.isTabKey(e)) {
+      this.updateInputText(true);
+      this.listOpen = false;
+      return;
+    }
+    //handle arrow up/down navigation
+    let nextActiveItem = this.activeItem;
+    if (keyboardUtils.isArrowUpKey(e)) {
+      e.preventDefault();
+      nextActiveItem = this.activeItem - 1;
+    }
+    else if (keyboardUtils.isArrowDownKey(e)) {
+      e.preventDefault();
+      nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
+      this.listOpen = true;
+    }
+    if (keyboardUtils.isArrowDownKey(e) || keyboardUtils.isArrowUpKey(e)) {
+      const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
+      if (nextActiveItem < 0 || !nextActiveItem) {
+        nextActiveItem = 0;
+      }
+      if (nextActiveItem >= listItems.length) {
+        nextActiveItem = listItems.length - 1;
+      }
+      // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+      // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+      this.input.accessibleActiveDescendant = "active_item";
+      this.activeItem = nextActiveItem;
+      this.scrollToActive();
+    }
+    this.announceActive();
+    return;
+  }
+  selectActiveItem() {
+    if (this.activeItem === undefined) {
+      return;
+    }
+    const filteredItem = this.returnFilteredOrNonFiltered();
+    const item = filteredItem[this.activeItem];
+    this.updateSelectedItems(item.id);
+  }
+  announceActive(items) {
+    if (!items) {
+      items = this.returnFilteredOrNonFiltered();
+    }
+    if (this.activeItem === undefined || this.activeItem === -1) {
+      return;
+    }
+    const item = items[this.activeItem];
+    this.selectionMsg = this.formatLabel(item, items.length, this.items.length);
+  }
+  //function that scrolls to the li element with the class "active"
+  scrollToActive() {
+    const activeElement = this.listElement.querySelector(".active");
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }
+  formatLabel(item, length, itemsLength) {
+    if (!item || itemsLength === undefined) {
+      return "";
+    }
+    const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.itemFiltered;
+    return labelString
+      .replace("{name}", String(item.name))
+      .replace("{current}", String(this.activeItem + 1))
+      .replace("{total}", String(length))
+      .replace("{hiddenItems}", String(itemsLength - length));
+  }
+  /**
+   * Filter the items based on the input value
+   */
+  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));
+    return this.sortFilteredItems(filteredItems);
+  }
+  /**
+   * Sort the return from getFilteredItems so that any item with and item.id that matches this.selectedItems is placed first
+   */
+  sortFilteredItems(items) {
+    if (items.length > 0) {
+      items
+        .filter(item => this.selectedItems.has(item.id))
+        .forEach(item => {
+        const index = items.indexOf(item);
+        items.splice(index, 1);
+        items.unshift(item);
+      });
+    }
+    return items;
+  }
+  /**
+   * render() function
+   * Always the last one in the 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: {
+        "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: {
+        "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) }));
+      })))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "activeItem": ["activeItemHandler"]
+  }; }
+};
+DuetCombobox.style = duetComboboxCss;
+
+exports.duet_combobox = DuetCombobox;