@duetds/components 10.5.0 → 10.6.0

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

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
+var index = require('./index-BeiMjjVl.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
 var createId = require('./create-id-DtslnIOq.js');
-var slotUtils = require('./slot-utils-BXdHT3A1.js');
+var slotUtils = require('./slot-utils-Dny6EJ_G.js');
 
 const duetCheckboxCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{margin-right:8px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host(.form-distribute:last-of-type:not(:last-child)){margin-right:8px !important}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host(:last-child:not(:only-child)){margin-bottom:0 !important}:host(.duet-m-0){margin:0 !important}.duet-label{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;vertical-align:top;color:rgb(8, 42, 77);cursor:pointer;background:transparent;transition:300ms ease}.duet-label span{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container{position:relative;width:100%;height:100%}.duet-checkbox{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox+label::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:rgb(255, 255, 255);border:1px solid rgb(8, 42, 77);border-radius:4px}.duet-checkbox:checked+label::before{background:rgb(0, 119, 179);border:1px solid rgb(0, 119, 179)}.duet-checkbox:focus+label::before{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-checkbox:focus+label::before,.duet-checkbox:focus+label::before.duet-theme-turva{outline-color:rgba(53, 79, 101, 0.8)}.duet-checkbox[aria-invalid=true]+label::before{background:#fdf4f6;border-color:rgb(214, 28, 82)}.duet-checkbox+label{position:static}.duet-checkbox:checked+label::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]{cursor:default}.duet-checkbox[disabled]+label{color:rgb(98, 121, 138)}.duet-checkbox[disabled]+label::before{border-color:rgb(181, 198, 208)}.duet-checkbox[disabled]:checked+label::before{background:rgb(127, 150, 165);border:1px solid rgb(127, 150, 165)}.duet-after-label{position:relative;z-index:3;padding-left:31px;margin-top:12px;cursor:default}.duet-checkbox-error{position:relative;z-index:3;padding-left:31px;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;font-weight:400;line-height:1.25;color:rgb(214, 28, 82);border-radius:4px}.duet-label-hidden .duet-label span,.duet-label-hidden .duet-checkbox-error span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}.duet-theme-turva .duet-label{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, 42, 59)}.duet-theme-turva .duet-checkbox+label::before{border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-checkbox:checked+label::before{background:rgb(23, 42, 59);border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-checkbox:focus+label::before{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-theme-turva .duet-checkbox[aria-invalid=true]+label::before{background:#fdf4f6;border-color:rgb(214, 28, 82)}.duet-theme-turva .duet-checkbox[disabled]+label{color:rgb(120, 145, 164)}.duet-theme-turva .duet-checkbox[disabled]+label::before{border-color:rgb(178, 194, 205)}.duet-theme-turva .duet-checkbox[disabled]:checked+label::before{background:rgb(120, 145, 164);border-color:rgb(120, 145, 164)}.duet-theme-turva .duet-checkbox-error{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(214, 28, 82)}";
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
+var index = require('./index-BeiMjjVl.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
 
 const duetCheckmarkCss = ".duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 300ms ease}.duet-checkmark-container.center{margin-right:auto}.duet-theme-turva .duet-checkmark-container{border-color:rgb(120, 145, 164)}.checked .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked .duet-checkmark-container{background:rgb(23, 42, 59);border-color:rgb(23, 42, 59) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}[disabled]+label .duet-checkmark-container{border-color:rgb(181, 198, 208) !important}.duet-theme-turva [disabled]+label .duet-checkmark-container{border-color:rgb(178, 194, 205) !important}.checked [disabled]+label .duet-checkmark-container{background:rgb(181, 198, 208) !important}.duet-theme-turva .checked [disabled]+label .duet-checkmark-container{background:rgb(178, 194, 205) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}:host(.duet-theme-turva.duet-theme-turva) .checked .duet-checkmark-container{background:rgb(23, 42, 59);border-color:rgb(23, 42, 59) !important}";
 
@@ -39,11 +39,11 @@ const DuetCheckmark = class {
         themeableComponent.inheritGlobalTheme(this);
     }
     render() {
-        return (index.h(index.Host, { key: '77d8d9cfa205def19022cd899ab98eb36007d2e2', class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: 'b93b32d626ceca01d12390209e700eef8665fd8b', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, index.h("div", { key: 'fa4d7323cf416248275604e05b261bc1f542ea6e', class: {
+        return (index.h(index.Host, { key: '588662850d35631ef6cb3c242d050f4049af0f59', class: { "duet-theme-turva": this.theme === "turva" } }, index.h("div", { key: '301f41ca7f4d90729bffe6940380d56b4d226407', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, index.h("div", { key: 'b0c88fd8e22781c438ec744fc2b24b6263ecf272', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && index.h("div", { key: 'd2a988ecdd6f5d41ce318365966515ff92c252c6', class: "duet-checkmark" })))));
+            } }, this.checked && index.h("div", { key: '389644f6a51bf281434c674aefc560e35dec4a6e', class: "duet-checkmark" })))));
     }
 };
 DuetCheckmark.style = duetCheckmarkCss;

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

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
+var index = require('./index-BeiMjjVl.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
 var createId = require('./create-id-DtslnIOq.js');
-var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-C7Z0KYg-.js');
+var keyboardUtils = require('./keyboard-utils-DibQafwg.js');
+var languageUtils = require('./language-utils-B3NubUDr.js');
 require('./string-utils-B35hEUBv.js');
 
 const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type:not(:last-child){margin-right:8px !important}:host(.input){margin-top:6px !important;margin-right:0 !important;margin-bottom:6px !important;margin-left:4px !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;line-height:1.1;color:rgb(8, 42, 77) !important;text-align:center;hyphens:none;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(181, 198, 208);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(98, 121, 138) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.duet-chip-container button,.duet-chip-container label{display:flex;align-items:center;width:100%;height:100%;padding:8px 14px;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;font-weight:600;line-height:1rem;color:rgb(8, 42, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:8px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:12px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:12px}.duet-chip-container duet-icon:not(.check-mark){visibility:visible;width:auto;transform:scaleX(1);transition:width 300ms ease, transform 300ms ease}.duet-chip-container duet-icon.check-mark{visibility:hidden;width:0;overflow:hidden;transform:scaleX(0);transition:width 300ms ease, transform 300ms ease}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{padding:0 !important;background:rgb(228, 241, 247);border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(198, 225, 238)}.duet-chip-container.duet-chip-filter-checked.chip-has-icon button,.duet-chip-container.duet-chip-filter-checked.chip-has-icon label,.duet-chip-container.duet-chip-radio-checked.chip-has-icon button,.duet-chip-container.duet-chip-radio-checked.chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon:not(.check-mark){visibility:hidden;width:0;overflow:hidden;transform:scaleX(0);transition:width 300ms ease, transform 300ms ease}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{visibility:visible;width:auto;transform:scaleX(1);transition:width 300ms ease, transform 300ms ease}.duet-chip-container .duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.duet-chip-container .duet-chip-popup-disclosure duet-icon{transition:transform 300ms ease}.duet-chip-container.duet-chip-filter-popup-open{background:rgb(240, 247, 250);border-color:rgb(240, 247, 250)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input:hover{padding:1px !important;border-color:rgb(181, 198, 208);border-width:1px}.duet-chip-container.duet-chip-input.duet-chip-hover,.duet-chip-container.duet-chip-input.duet-chip-selected{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-input.duet-chip-hover .duet-chip-remove-button,.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button{right:0;width:34px;height:34px;background:transparent}.duet-chip-container.duet-chip-input.duet-chip-delete-focus{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input .duet-chip-input-button{margin-right:22px}.duet-chip-container.duet-chip-input .duet-chip-remove-button{position:absolute;top:-1px;right:-1px;width:36px;height:36px;padding-left:10px;border:3px solid transparent;border-radius:8px}.duet-chip-container.duet-chip-input .duet-chip-remove-button:hover{background:rgb(217, 236, 245);background-clip:padding-box}.duet-chip-container.duet-chip-input.duet-chip-selected{background:rgb(240, 247, 250)}.duet-chip-container.duet-chip-input.duet-chip-selected.duet-chip-hover{background:rgb(217, 236, 245)}.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(198, 225, 238);background-clip:padding-box}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 18px}.duet-chip-container.large.duet-chip-has-icon .duet-chip-icon-container{width:30px;padding-right:10px}.duet-chip-container.large .duet-chip-popup-disclosure{padding-right:6.5px;padding-left:14.5px}:host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-chip-focus,:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,.duet-theme-turva :host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button,:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva{outline-color:rgba(53, 79, 101, 0.8)}.duet-chip-container input,*::slotted([slot=input]){position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-width:2px;border-radius:8px;opacity:0}*::slotted([slot=input]:not([aria-disabled=true])){z-index:1}.duet-chip-container.duet-theme-turva{color:rgb(23, 42, 59) !important;background:rgb(255, 255, 255);border-color:rgb(178, 194, 205)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(230, 23, 64)}.duet-chip-container.duet-theme-turva.duet-chip-disabled{color:rgb(120, 145, 164) !important;background:rgb(245, 246, 247);border-color:rgb(245, 246, 247)}.duet-chip-container.duet-theme-turva.duet-chip-disabled:hover{background:rgb(245, 246, 247);border-color:rgb(245, 246, 247)}.duet-chip-container.duet-theme-turva.duet-chip-filter-checked,.duet-chip-container.duet-theme-turva.duet-chip-radio-checked{background:rgb(253, 247, 242);border-color:rgb(230, 23, 64)}.duet-chip-container.duet-theme-turva.duet-chip-filter-checked:hover,.duet-chip-container.duet-theme-turva.duet-chip-radio-checked:hover{background:rgb(251, 225, 209)}.duet-chip-container.duet-theme-turva.duet-chip-filter-popup-open{background:rgb(253, 247, 242);border-color:rgb(178, 194, 205)}.duet-chip-container.duet-theme-turva.duet-chip-input .duet-chip-remove-button:hover{background:rgb(255, 242, 242)}.duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected{background:rgb(255, 242, 242)}.duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected.duet-chip-hover{background:rgb(255, 229, 230);background-clip:padding-box}.duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected .duet-chip-remove-button:hover{background:rgb(255, 201, 204);background-clip:padding-box}.duet-chip-container.duet-theme-turva.duet-chip-input:hover{border-color:rgb(178, 194, 205)}.duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-hover,.duet-chip-container.duet-theme-turva.duet-chip-input.duet-chip-selected{border-color:rgb(230, 23, 64)}";
@@ -39,9 +39,11 @@ const DuetChip = class {
         /**
          * Variation of the chip.
          * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
-         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
-         * used with a value. Input represents items input by the user, and the chip can be removed with a click.
-         * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with
+         * a value. Filter can also be used with a popup-menu - then the initial text describes the type of category of
+         * filtering, and the selection from the popup-menu sets the filter value. Input represents items input by the user,
+         * and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group,
+         * and it should be used with a value and name.
          */
         this.variation = "button";
         /**
@@ -75,6 +77,10 @@ const DuetChip = class {
          * Use this property to add an aria-haspopup attribute.
          */
         this.accessiblePopup = "false";
+        /**
+         * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+         */
+        this.accessibleDescribedBy = "";
         this.enforceNoDisabledSelected = () => {
             if (this.disabled && this.checked) {
                 console.error("Duet error: pre-selected chip may not be disabled");
@@ -106,6 +112,9 @@ const DuetChip = class {
             radioInput.value = this.value;
             radioInput.checked = this.checked;
             radioInput.ariaLabel = this.element.textContent;
+            if (!!this.accessibleDescribedBy) {
+                radioInput.setAttribute("aria-describedby", this.accessibleDescribedBy);
+            }
             if (slotInput) {
                 this.radioInputListenersRemove(radioInput);
             }
@@ -115,13 +124,15 @@ const DuetChip = class {
             this.radioInputListenersAdd(radioInput);
             this.focusableElement = radioInput;
         };
+        this.originalFilterChipText = "";
+        this.originalFilterChipValue = "";
         this.popupSetUp = () => {
             const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
             if (popup) {
                 this.popupElement = popup;
                 popup.controller = this.element;
-                const originalText = this.element.textContent;
-                const originalValue = this.value;
+                this.originalFilterChipText = this.element.textContent;
+                this.originalFilterChipValue = this.value;
                 if (!popup.id) {
                     popup.id = "popup-menu";
                 }
@@ -146,8 +157,8 @@ const DuetChip = class {
                         }
                         else {
                             clearActive();
-                            this.element.textContent = originalText;
-                            this.value = originalValue;
+                            this.element.textContent = this.originalFilterChipText;
+                            this.value = this.originalFilterChipValue;
                             this.checked = false;
                         }
                         this.emitChange(evt);
@@ -298,6 +309,11 @@ const DuetChip = class {
     getAccessibleInputChipLabel() {
         return `${this.element.textContent}${this.selected ? ` (${languageUtils.getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
     }
+    getAccessibleFilterLabel() {
+        return this.value !== this.originalFilterChipValue
+            ? `${this.originalFilterChipText}: ${this.element.textContent}`
+            : undefined;
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -342,7 +358,7 @@ const DuetChip = class {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (index.h(index.Host, { key: 'ebc8f8cba112ee9f682c22ba09f04b05968d4ba2', class: { [this.variation]: true } }, this.variation === "button" && (index.h("span", { key: '6bf0c0545a457d2917df074d7d263e12e07e3255', class: classes }, index.h("button", Object.assign({ key: '51780aa4be42824dd17784e59b17ff23cdca4ea1', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), index.h("span", { key: '52036fee728f26c3b21701d9ed870caf45e9295f', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: '7ef322e3c74ca552fb91a03d1d4d7cbba4b325e3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: 'b781a521f1dc02c0c7b0792309d4fb730acc5c2d' })))), this.variation === "input" && (index.h("span", { key: 'c997bfd1f27de93629210b953c9788bdf754538f', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, index.h("button", Object.assign({ key: 'c1ff3d503dda53884a42637460d048a27fe0d40e', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), index.h("span", { key: '73d0e2250e46b6bdd1ffd65f9879e7c9d90da448', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: 'f5353d825977fb008fb2d71fe796a2c6f4720181', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: '2932e26e6266957b80953b2ce275d580466e47ba' })), index.h("button", { key: '248c016d99211ec7893a1cc74f7ecd268d44d343', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, index.h("duet-icon", { key: '6172cedf507d0e6f69ea39ce8fa6a4e21b714d11', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (index.h("span", { key: '8c7b88c4c077b7bd4afd0c7bdf36d01f9c9092ae', class: classes }, index.h("input", Object.assign({ key: 'b97c5cba016483f506521d00100f022160f48680', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), index.h("label", { key: 'cc082e72c8f2a782f4bfd44afc35daea973c6b08', htmlFor: identifier }, this.icon && (index.h("span", { key: 'a453948d4d0507fe5dbd080f573d83356f95f35c', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: '4545c9c75f4ac311e19d9932328eb7e6d8318ac9', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: '2dd3e4bc69e6efd4138ba8b74a5fddf52394416f', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: '5367a32b3b34e7c67412bd0a0dfa9ace24636687' }), this.popupElement && (index.h("span", { key: 'edad2d024ba464eea661cd1990629633438b6ba0', class: "duet-chip-popup-disclosure" }, index.h("duet-icon", { key: 'aa76a07f9446fea95dc61660c92c5bee645f27d4', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (index.h("span", { key: '97fe2aee42e9823b794acaeda3df724470c4c832', class: classes }, index.h("slot", { key: 'f820fe5d09ff67433693698dd9d60848535cab8a', name: "input" }), index.h("label", { key: '0953b3248cc1c8f6fa46f2684f7fc465bfd0a412', htmlFor: identifier }, this.icon && (index.h("span", { key: '25e66d3992af529de900ead65488bf64a4c12650', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: '731d3562a51b7c231d8142c7b0ec8d95675439ab', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: '9b041e11ab55414369bcd45962c31263129fd5b6', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: '9a9dd5c4ba7e327a2df00f24bb272f61a4061d65' }))))));
+        return (index.h(index.Host, { key: '84203a4f6d7de284823eb560bfb95b2aec1ac5e4', class: { [this.variation]: true } }, this.variation === "button" && (index.h("span", { key: '3c735a109cf161c40ff2eb4cdd3ab6ae9ccd07f1', class: classes }, index.h("button", Object.assign({ key: 'd91978a69db645b988514f9fe147ff6a0e618f06', id: identifier, "aria-label": this.accessibleLabel, "aria-describedby": this.accessibleDescribedBy || undefined, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), index.h("span", { key: '00a9bfa1e9b1654a6b1bdbd47298f54ccdc445f5', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: '2f8756f5ffb41e04e5842dab15f1b908086c753d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: '2e791bd8bab1495608208ad696fe9150ddc28e34' })))), this.variation === "input" && (index.h("span", { key: 'd6a9ece4abe8ebac562a31e3970255bbe4f8eadd', class: classes }, index.h("button", Object.assign({ key: 'dbb7a3ee7849bb53b58bae7dcb6373ec685de638', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.getAccessibleInputChipLabel(), "aria-describedby": this.accessibleDescribedBy, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), index.h("span", { key: '1e0b295b70924c7bbaf945ba1af950f63668c5a8', class: "duet-chip-icon-container" }, this.icon && (index.h("duet-icon", { key: '1d5ec89006c85f4b8a630215a19055d863c67416', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), index.h("slot", { key: '5f52df5a6d4d675f24a6bd927593e336612997f5' })), index.h("button", { key: 'f056e733dcc146eed6228a060736690a33c40311', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, index.h("duet-icon", { key: '6f052eca141e3eea229954f7034c479d14c38d6f', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (index.h("span", { key: 'b573900d3ad93f1e8f49bb1f27e7d1d5e87f1ad3', class: classes }, index.h("input", Object.assign({ key: 'd558bee064252fff70ef6db2b7292d8e5019bd78', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.getAccessibleFilterLabel(), "aria-describedby": this.accessibleDescribedBy || undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), index.h("label", { key: '7f88107a9734bd1142d00dc26ce1ceed694b0904', htmlFor: identifier }, this.icon && (index.h("span", { key: '35559b51d65f9d609edebe6d641c11f936b43bd2', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: 'a1a51b616e4fb7c9d949bfca74a6cb1a7fa549a5', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: '320133b510ed5702a9fd1a30f01deb9b266531f8', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: 'b1133a5c686b6c8fc8a6f7d16281b25a584f8943' }), this.popupElement && (index.h("span", { key: 'd6d6785289ba11bfcb83877c45f85e9ad9f43683', class: "duet-chip-popup-disclosure" }, index.h("duet-icon", { key: '3c930adbf23abfeee3d2c5fcbbb151878a4b9a39', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (index.h("span", { key: 'aa5035fea2416069bc01fe07a28b3da134fdd886', class: classes }, index.h("slot", { key: 'f861682874396c57779c427fb4f89556884f9434', name: "input" }), index.h("label", { key: '80a7465dae485bf1cdcbee5b10210dc158c6425b', htmlFor: identifier }, this.icon && (index.h("span", { key: 'dc5ffe43af42a08253de88bdc17a16022cd3a40d', class: "duet-chip-icon-container" }, index.h("duet-icon", { key: 'c0b3326871d1f440b1196fdef2d6a6961b8b883f', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), index.h("duet-icon", { key: 'f6d6f16565393969a6945d11f00736726e95aef1', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), index.h("slot", { key: '8ba0c81daff6bc6f966afd5f75582a89f932e8b1' }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
+var index = require('./index-BeiMjjVl.js');
 var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
 var commonStrings = require('./common-strings-DMaSb4Ld.js');
 var createId = require('./create-id-DtslnIOq.js');
-var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-C7Z0KYg-.js');
-var slotUtils = require('./slot-utils-BXdHT3A1.js');
+var keyboardUtils = require('./keyboard-utils-DibQafwg.js');
+var languageUtils = require('./language-utils-B3NubUDr.js');
+var slotUtils = require('./slot-utils-Dny6EJ_G.js');
 require('./string-utils-B35hEUBv.js');
 
 var messagingInfo;
@@ -647,14 +647,14 @@ const DuetChoiceGroup = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '94d0ad93557a1487328291dec3786b2a54809a33', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (index.h(index.Host, { key: '0d7434c28155b9472c8819d53c34843052a58d0d', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, index.h("duet-fieldset", { key: '21ef6afa85bf7d3dddc001aae2583adbd3dee304', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (index.h("duet-tooltip", { key: '5ff31a8282e6e7eace9d2bb035d325af2d073fea', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), index.h("slot", { key: '8e9b7d9abb95cd49f4bbc5fa9a694c2691a32c7d', name: "tooltip", slot: "tooltip" }), index.h("div", { key: 'be989adb0d4a5794d0132a3ee00979cf1bf79bd9', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, index.h("slot", { key: '725c965b94dd5e8555d9e2e450ac6d61e74cefb6' })))));
+            } }, index.h("duet-fieldset", { key: 'd0abc308f9f4e0b001efb4923b0e5203ae1d00a6', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (index.h("duet-tooltip", { key: 'f8e3bbac49fdb91180c3caa1b32e7d6eb1305086', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), index.h("slot", { key: '9ebac012a0024a84eaa3b320a9d1aca91bb48480', name: "tooltip", slot: "tooltip" }), index.h("div", { key: '9b811428dda8073221eedb0b5a64ddff1662828d', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, index.h("slot", { key: '22ab1bec355e45e4bd35c68e2d9c86815b99852f' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
+var index = require('./index-BeiMjjVl.js');
 var actionArrowDownSmall = require('./action-arrow-down-small-CDsSJFvZ.js');
 var tokens = require('./tokens-COLlUECP.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
 var createId = require('./create-id-DtslnIOq.js');
-var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var slotUtils = require('./slot-utils-BXdHT3A1.js');
+var keyboardUtils = require('./keyboard-utils-DibQafwg.js');
+var slotUtils = require('./slot-utils-Dny6EJ_G.js');
 require('./_commonjsHelpers-4N64IRaP.js');
 
 const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;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-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;line-height:1.5;color:rgb(8, 42, 77);-webkit-hyphens:auto;hyphens:auto}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}: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:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus,:host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva{outline-color:rgba(53, 79, 101, 0.8)}.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-collapsible-heading-content{min-width:0}.duet-collapsible-heading .duet-collapsible-heading-content ::slotted(*){padding:0;margin:0;font-family:inherit !important;font-size:inherit !important;font-weight:inherit !important;color:inherit !important}.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}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px}.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}[alignment=form-distribute]>.duet-collapsible-heading-icon:last-of-type:not(:last-child){margin-right:8px !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)}.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, 42, 59)}.duet-theme-turva .duet-collapsible-content.duet-theme-turva,.duet-theme-turva .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, 42, 59)}";

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

@@ -3,15 +3,15 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
+var index = require('./index-BeiMjjVl.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.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-C7Z0KYg-.js');
-var slotUtils = require('./slot-utils-BXdHT3A1.js');
+var keyboardUtils = require('./keyboard-utils-DibQafwg.js');
+var languageUtils = require('./language-utils-B3NubUDr.js');
+var slotUtils = require('./slot-utils-Dny6EJ_G.js');
 var stringUtils = require('./string-utils-B35hEUBv.js');
-var tokens_module = require('./tokens.module-CTbvyezn.js');
+var tokens_module = require('./tokens.module-CGRpZaa1.js');
 
 const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
     e.preventDefault();

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

@@ -3,12 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
-var languageUtils = require('./language-utils-C7Z0KYg-.js');
-require('./string-utils-B35hEUBv.js');
+var index = require('./index-BeiMjjVl.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
+var languageUtils = require('./language-utils-B3NubUDr.js');
+var pictureUtils = require('./picture-utils-D_HVgfq5.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
 
-const duetContactCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;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)}@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}.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, 42, 59)}";
+const duetContactCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;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)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card picture{display:block}.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}.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, 42, 59)}";
 
 const DuetContactCard = class {
     constructor(hostRef) {
@@ -54,10 +55,19 @@ const DuetContactCard = class {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (index.h(index.Host, { key: '6cf20cb225b22fbb826b136c3909234684d30e3d', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '24e57cbe34b4d01ff024fe8128d3168b61e61af6', class: {
+        const pictureSource = {
+            img: {
+                src: this.image,
+                alt: this.name || "",
+                loading: "lazy",
+                class: "image",
+            },
+            sources: stringUtils.parsePossibleJSON(this.sources),
+        };
+        return (index.h(index.Host, { key: 'f64dabbe00a4d4f03132a6adc7bc3b95bdd6042a', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '0f5bf8d1828462b3f5e6aa9f5d7e11b338a2b61c', 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: 'f3c40c440d2d9dd97e3c1e24817d60e62f6347f0' }, this.name && (index.h("duet-heading", { key: 'cde7a70f10cfdd45e801c9ef923e116b2ee12e42', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: '1c855114d2101701a8b39f75fe8b2ae76d5ffe57', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: 'b552b0f0de5e16059e77ee518e2087d24a2171c4', class: "email" }, index.h("duet-icon", { key: '2048a5cb8e29d7d664c984c72031cdfd1894e0a6', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '6e2a9b632e0fb1df3efd51dc66d6df1891eaa3a1', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: '1a263f67d1844f9c2ba334ba24ebc32d9faf4b86', class: "phone" }, index.h("duet-icon", { key: 'dab3c18ed7f4c092aa8644ef6d9a915854c9e33d', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: '68c6b2ff4480300f563b7d8d65fb4d47160fcd8b', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: '70288a25480b39a333831a129def567c99f202b7', class: "call-to-action" }, index.h("duet-button", { key: 'c5fccd74b8b2b6b4917b464c5e723c657e326bb0', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: '9fd8e574534d15aa89eaac786c257586a6f9f845' }), index.h("slot", { key: 'ab0fa1cc3232c70441d441e4c673b8b562ffbe92' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? index.h(pictureUtils.DuetPicture, Object.assign({}, pictureSource)) : index.h("div", null), index.h("div", { key: 'c7f1a34d6324e755b84db0dc4da6ccfe23c2caea' }, this.name && (index.h("duet-heading", { key: 'b5e344e3a442dd32b215a64c5ac5050004205cd2', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (index.h("duet-paragraph", { key: 'c0691195632640e79ff0138fd59b974764f4e653', class: "description", margin: "none", theme: theme }, this.description)), this.email && (index.h("div", { key: '69b2e8b159c01ac6a10b0e9f5db6484e24d7ba88', class: "email" }, index.h("duet-icon", { key: '610229dce2bd62cdd469f1507a3d7ab2fb9bbf2e', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: 'b8de1672468624fb4d187f2284d59057abc6fc02', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (index.h("div", { key: 'f1f0f4cb51fb389b4af742d8aff457575ba2fea8', class: "phone" }, index.h("duet-icon", { key: 'bf01da4d50e3c15d6e5e6578e560746cd0290cdc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), index.h("duet-link", { key: 'b13decd3ea2cbe80e5eb96f4214db65bcf318918', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (index.h("div", { key: 'e9d62c80a434400828e323a802e873df327e9c28', class: "call-to-action" }, index.h("duet-button", { key: '5603fe9f97b490a96cfb04cb6efbc98093d8e216', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), index.h("div", { key: '6fd00f636dd39f1ad02f62fa2a63cfe7f00f67b2' }), index.h("slot", { key: 'f91dc7abe608519b46f5bf421f09258cabdda749' }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-ZxE6MB5V.js');
-var themeableComponent = require('./themeable-component-CIDaln0Z.js');
-var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var index = require('./index-BeiMjjVl.js');
+var themeableComponent = require('./themeable-component-Csdvrnsd.js');
+var keyboardUtils = require('./keyboard-utils-DibQafwg.js');
 
 const duetCookieConsentCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;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){outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8);border-radius:4px}.duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus),:host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva{outline-color:rgba(53, 79, 101, 0.8)}.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)}}@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;white-space:nowrap;text-decoration:underline}::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:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva ::slotted(a:focus),::slotted(a:focus).duet-theme-turva{outline-color:rgba(53, 79, 101, 0.8)}.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, 21, 30, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 21, 30, 0.8)}}";