@duetds/components 8.6.8 → 8.7.0

package/lib/dist-custom-elements/duet-upload.js

@@ -1,31 +1,31 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, F as Fragment, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, F as Fragment, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
 import { d as debounce } from './p-9e371678.js';
-import { g as getLocaleString, s as sanitizeString } from './p-2e36d5bf.js';
+import { g as getLocaleString, s as sanitizeString } from './p-2f5e2da8.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
-import { g as getError, d as defineCustomElement$3, a as getI18nError } from './p-f3fed1d1.js';
-import { h } from './p-33937fd7.js';
-import { d as defineCustomElement$j } from './p-e4489c9c.js';
-import { d as defineCustomElement$i } from './p-45ce252d.js';
-import { d as defineCustomElement$h } from './p-f010dbb0.js';
-import { d as defineCustomElement$g } from './p-e4f40301.js';
-import { d as defineCustomElement$f } from './p-5d1b1309.js';
-import { d as defineCustomElement$e } from './p-188198bb.js';
-import { d as defineCustomElement$d } from './p-f390637a.js';
-import { d as defineCustomElement$c } from './p-3ee1ee19.js';
-import { d as defineCustomElement$b } from './p-2933d260.js';
-import { d as defineCustomElement$a } from './p-a1b81dbc.js';
-import { d as defineCustomElement$9 } from './p-fe0978ef.js';
-import { d as defineCustomElement$8 } from './p-184196bf.js';
-import { d as defineCustomElement$7 } from './p-164f1743.js';
-import { d as defineCustomElement$6 } from './p-674040a2.js';
-import { d as defineCustomElement$5 } from './p-2a29afc3.js';
-import { d as defineCustomElement$4 } from './p-2f74a80b.js';
-import { d as defineCustomElement$2 } from './p-c6788c34.js';
+import { g as getError, a as getI18nError, d as defineCustomElement$3 } from './p-6bd18890.js';
+import { h } from './p-47c44289.js';
+import { d as defineCustomElement$j } from './p-45dd5240.js';
+import { d as defineCustomElement$i } from './p-8fb1d873.js';
+import { d as defineCustomElement$h } from './p-03c64124.js';
+import { d as defineCustomElement$g } from './p-7eef087e.js';
+import { d as defineCustomElement$f } from './p-00eccbc8.js';
+import { d as defineCustomElement$e } from './p-61ffea9e.js';
+import { d as defineCustomElement$d } from './p-9dc74a9b.js';
+import { d as defineCustomElement$c } from './p-d7ff39b6.js';
+import { d as defineCustomElement$b } from './p-955053f9.js';
+import { d as defineCustomElement$a } from './p-2a041992.js';
+import { d as defineCustomElement$9 } from './p-7666f1bc.js';
+import { d as defineCustomElement$8 } from './p-12a09bbc.js';
+import { d as defineCustomElement$7 } from './p-3e74515a.js';
+import { d as defineCustomElement$6 } from './p-9d348a4b.js';
+import { d as defineCustomElement$5 } from './p-b8bb3910.js';
+import { d as defineCustomElement$4 } from './p-02911244.js';
+import { d as defineCustomElement$2 } from './p-bb20326f.js';
 
 const errorCodes = [
 	{
@@ -334,6 +334,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
 };
 
 const duetUploadCss = "*,*::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}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}::slotted([slot=uploadfooter]){margin-top:20px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:rgb(245, 248, 250)}.duet-upload-filelist-empty-label{font-size:1rem;font-weight:400}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:1rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending{position:relative}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress,.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-progress{position:absolute;bottom:0;width:100%}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button),.duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-action-button::part(button){border:0}duet-paragraph::part(duet-paragraph){word-break:break-word}duet-editable-table tfoot{display:none}.upload-bottom-caption{margin-top:12px;margin-bottom:16px;line-height:1.4rem}.items-header{display:none;flex-direction:row;margin-bottom:0}@media (min-width: 36em){.items-header{display:flex}}.items-header:not(:last-child),.items-header:not(:first-child){margin-top:12px}.items-header .category-header{width:35%}.items-header .filename-header{width:65%}.items-header .filename-header.no-category{width:100%}.upload-item-row{display:flex;flex-direction:column;gap:16px;align-content:center;align-items:center;padding:16px 0 16px 0;border-bottom:1px solid rgb(225, 227, 230)}@media (min-width: 36em){.upload-item-row{flex-direction:row;gap:10px}}.upload-item-row .item-categories{width:100%}@media (min-width: 36em){.upload-item-row .item-categories{width:35%}}.upload-item-row .item-name{position:relative;bottom:2px;width:100%;text-align:left}@media (min-width: 36em){.upload-item-row .item-name{width:50%}.upload-item-row .item-name.no-category{width:85%}}.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:block}@media (min-width: 36em){.upload-item-row .item-categories .heading,.upload-item-row .item-name .heading{display:none}}.upload-item-row .item-actions{width:100%;margin-left:-8px;text-align:left}@media (min-width: 36em){.upload-item-row .item-actions{width:15%;padding-top:0;margin-left:auto;text-align:right}}.upload-item-row .duet-upload-item-name duet-icon{position:relative;top:4px}.upload-item-row .duet-upload-item-name duet-progress{display:block;margin-top:16px}";
+const DuetUploadStyle0 = duetUploadCss;
 
 const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class DuetUpload extends H {
     constructor() {
@@ -1079,10 +1080,10 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class DuetUpload extends H
             this.externalUploadButton.accessibleLabel = caption;
         }
         // @ts-ignore
-        return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h$1("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("slot", { name: "uploadfooter" }), this.captionOnBottom && (h$1("duet-caption", { margin: "none", size: "small" }, h$1("div", { class: "upload-bottom-caption" }, caption))), h$1("slot", { name: "afterfooter" }), !this.hideButton && (h$1(Fragment, null, h$1("duet-spacer", { size: "large" }), h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+        return (h$1(Host, { key: 'fbb23e4c7dafe25f609164ab839dfe2b773e4656', class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { key: '06b9887702d76107263650313313f1a9d0da18e1', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h$1("slot", { key: '09d08704944030cfcf9577d1e9ff5743530cb087', name: "header" }), !this.files.size && (h$1("duet-empty-state", { key: '9455c1f4ec1c6f23ec1d005aa6aa1f0c902ea6d5', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h$1("duet-paragraph", { key: '33c49028d666ce29fd441817062f5fce1d5d87df', margin: "none" }, this.fileListEmpty))), !!this.files.size && h$1("slot", { key: 'ec41dfe1c379d717f4514d819118e8484feadc61', name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { key: 'ba56e1700f6254c05f0aeebded23eb071c2712a8', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h$1("slot", { key: 'c751122858e240739f4a439b89f9ff7f7603ee65', name: "filefooter" }), h$1("slot", { key: '44add8b2fd77cb942db72bd83cad90cab6e3b83a', name: "uploadfooter" }), this.captionOnBottom && (h$1("duet-caption", { key: 'b788d8ba602fe61da7ff8c06509ea0521027082f', margin: "none", size: "small" }, h$1("div", { key: '905be51cf09c625bd19737b9fa28c85f7911a2a4', class: "upload-bottom-caption" }, caption))), h$1("slot", { key: '2da304d7094152a7c38607af3d74d5d8b076c711', name: "afterfooter" }), !this.hideButton && (h$1(Fragment, { key: '74cc919f60e229c4fa1f7f8f4472c2d5cd731a6c' }, h$1("duet-spacer", { key: 'f60c7893de953a3551e5f0b826bc34510e205d42', size: "large" }), h$1("duet-button", { key: '20792f561a4a6b35ea120d6f24d5e6e49e366c7a', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
             this.bytesMaxReached ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h$1(Fragment, null, h$1("duet-spacer", { size: "medium" }), h$1("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h$1("duet-visually-hidden", { "aria-hidden": "true" }, h$1("input", { ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h$1(Fragment, { key: 'dd237b355a77db2eb3c3a6bea07eae884ffce4ca' }, h$1("duet-spacer", { key: '0ecfd226ae4a1b30e1a3598848327c9e7d1d6cce', size: "medium" }), h$1("duet-alert", { key: '45e1d585869c782cd624d6c6c8bf93e819944980', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h$1("duet-visually-hidden", { key: '3783514ca6994a7cabf2f2027c7a61f8147e633a', "aria-hidden": "true" }, h$1("input", { key: '6e79027a037da18e89b2dbebdb6ce3d750d11c3b', ref: input => {
                 this.nativeInput = input;
             }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
                 "duet-upload": true,
@@ -1266,7 +1267,7 @@ const DuetUpload$1 = /*@__PURE__*/ proxyCustomElement(class DuetUpload extends H
     static get watchers() { return {
         "valid": ["watchValidHandler"]
     }; }
-    static get style() { return duetUploadCss; }
+    static get style() { return DuetUploadStyle0; }
 }, [1, "duet-upload", {
         "accessibleActiveDescendant": [1, "accessible-active-descendant"],
         "accessibleDescribedBy": [1, "accessible-described-by"],

package/lib/dist-custom-elements/duet-visually-hidden.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-c6788c34.js';
+import { D as DuetVisuallyHidden$1, d as defineCustomElement$1 } from './p-bb20326f.js';
 
 const DuetVisuallyHidden = DuetVisuallyHidden$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/index.js

@@ -1,7 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-d160ca6a.js';
+import './p-47c44289.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-955746f9.js';
 
 const setupLoggers = () => {
     {

package/lib/dist-custom-elements/{p-5d1b1309.js → p-00eccbc8.js}

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.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:rgb(101, 119, 135);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:rgb(116, 116, 117)}:host(.duet-caption-selected){color:rgb(0, 119, 179)}:host(.duet-caption-selected.duet-theme-turva){color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}";
+const DuetCaptionStyle0 = duetCaptionCss;
 
 const DuetCaption = /*@__PURE__*/ proxyCustomElement(class DuetCaption extends H {
     constructor() {
@@ -27,16 +28,16 @@ const DuetCaption = /*@__PURE__*/ proxyCustomElement(class DuetCaption extends H
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '3e38c62d454dfed7441c080efc8d3d836310bee6', class: {
                 "duet-caption": true,
                 "duet-caption-selected": this.selected,
                 "duet-caption-small": this.size === "small",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'a6a279b8c145c11eb9452b6b90e224a032a2232f' })));
     }
     get element() { return this; }
-    static get style() { return duetCaptionCss; }
+    static get style() { return DuetCaptionStyle0; }
 }, [1, "duet-caption", {
         "theme": [1025],
         "margin": [1],

package/lib/dist-custom-elements/{p-dcbd3217.js → p-0231ea20.js}

@@ -1,13 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-785686e3.js';
-import { d as defineCustomElement$1 } from './p-2933d260.js';
+import { d as defineCustomElement$1 } from './p-955053f9.js';
 
 const duetChipCss = "*,*::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;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}: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;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(207, 210, 212);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.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(207, 207, 209)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(101, 119, 135) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.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(0, 41, 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:10px}.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:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{padding:0 !important;background:rgb(230, 242, 248);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(205, 229, 241)}.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){width:0;overflow:hidden;visibility:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.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{width:auto;visibility:visible;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(198, 12, 48)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(228, 228, 230)}.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(243, 249, 252);border-color:rgb(243, 249, 252)}.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon{transform:rotate(180deg)}.duet-chip-container.duet-chip-input{display:flex;align-items:center;padding-right:0 !important}.duet-chip-container.duet-chip-input .duet-chip-input-button{flex-grow:1}.duet-chip-container.duet-chip-input .duet-chip-remove-button{width:26px;padding:8px 16px 8px 0;margin:-8px 0}.duet-chip-container.large button,.duet-chip-container.large label{padding:15px 22px}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input,*::slotted([slot=input]){position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
+const DuetChipStyle0 = duetChipCss;
 
 const DuetChip = /*@__PURE__*/ proxyCustomElement(class DuetChip extends H {
     constructor() {
@@ -264,13 +265,13 @@ const DuetChip = /*@__PURE__*/ proxyCustomElement(class DuetChip extends H {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { class: { [this.variation]: true } }, this.variation === "button" && (h("span", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("span", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel }, focusHandlers), h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { class: classes }, h("input", Object.assign({ "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)), h("label", { htmlFor: identifier }, this.icon && (h("span", { class: "duet-chip-icon-container" }, h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", null), this.popupElement && (h("span", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { class: classes }, h("slot", { name: "input" }), h("label", { htmlFor: identifier }, this.icon && (h("span", { class: "duet-chip-icon-container" }, h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", null))))));
+        return (h(Host, { key: '63d116523c6f8fd4c61d150adac9759f2e0e29a1', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'a3e43367f9e537aeaf1b257684888c067075e3e8', class: classes }, h("button", Object.assign({ key: '7a762c378f1d718523cb35bbf50ebaf60c59d062', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '8f1a0d6e8f6a980f3da318918f5e21235140ebfb', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '2336e0011ee6931b63934af2e4982c06d9a0d456', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '7bf8172d3f1310d8cdf19d260eb2b0646e1dabcd' })))), this.variation === "input" && (h("span", { key: 'b5959dbf57ef68ccac4cad2368d485137303a5b6', class: classes }, h("button", Object.assign({ key: '6395bcf3de40496dae48c1e6f184c6a1ce969e5d', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel }, focusHandlers), h("span", { key: '47115e51b88864aba6ea47307d071f7cda181550', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '50c466515758a2f625435f2c35a3714d8c33f174', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '3dd5e1c1621582f7c7058bbc77d31748f6fab688' })), h("button", { key: 'e252ac9a1e9a710972a3e7fd6839ac6cee9041d0', class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { key: '9b4adf2cec01d524e9dc0196f972dc557d10d8a8', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '3c6c3c4f4d4402a7400e03b7d74fb95d352967b6', class: classes }, h("input", Object.assign({ key: 'bb101690fb37507a4405df9509aa7b469e48c255', "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)), h("label", { key: 'ecd0105df1f88ff1d5ee22c74fd040e2ee19fd3c', htmlFor: identifier }, this.icon && (h("span", { key: 'cefe4394d500de2353bd7ae42b93c132c32a58de', class: "duet-chip-icon-container" }, h("duet-icon", { key: '57d6081fed000289fe066dc6ec4db761554557e2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '5c7b9acbf6fb5de394186734e636c93fcf175a14', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '770c2ff769e2fb063607d943735be580cc323d06' }), this.popupElement && (h("span", { key: '9e7095323427853f41854f6e0f1d5901c7f9207d', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '72031bdb57fa12468b8f318d6380f845ff272248', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'd1b2ac7c1fe1415094d639f57b3cd232a0355bc4', class: classes }, h("slot", { key: '4fd7346e9e40355f863a53aa95e97bbd05b94ec1', name: "input" }), h("label", { key: 'a6f74dc9687dc5abba3d2d3c4bb4cbbab8e72d6e', htmlFor: identifier }, this.icon && (h("span", { key: 'adf688f4c9a7a153c52193a8effd643aeaf1008a', class: "duet-chip-icon-container" }, h("duet-icon", { key: '7aca800ab15bcb1d1d7b86cd6276fbe37514e93d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '84000545953f8f7dfdf214a5dbdee3b029cd42bc', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '9364faebdb2a14195e36d4645ae81058e2c3a04c' }))))));
     }
     get element() { return this; }
     static get watchers() { return {
         "checked": ["clearOtherRadioButtons"]
     }; }
-    static get style() { return duetChipCss; }
+    static get style() { return DuetChipStyle0; }
 }, [1, "duet-chip", {
         "accessibleLabel": [1, "accessible-label"],
         "variation": [1],

package/lib/dist-custom-elements/{p-2f74a80b.js → p-02911244.js}

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d160ca6a.js';
-import { d as defineCustomElement$1 } from './p-c6788c34.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-955746f9.js';
+import { d as defineCustomElement$1 } from './p-bb20326f.js';
 
 const DuetUploadAriaStatus = /*@__PURE__*/ proxyCustomElement(class DuetUploadAriaStatus extends H {
     constructor() {
@@ -65,7 +65,7 @@ const DuetUploadAriaStatus = /*@__PURE__*/ proxyCustomElement(class DuetUploadAr
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", null, this.statusMessage)));
+        return (h(Host, { key: 'f107e96e1a039ff07fa07dc6d45a85240bf183d0', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'ea0da6ca5f4f40aae2f60f49249bbdacbc41f0aa' }, this.statusMessage)));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/{p-f010dbb0.js → p-03c64124.js}

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.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{display:inline-block;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:rgb(0, 41, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;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:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fee8c3}.duet-badge.danger{background:#f8d3e0}.duet-badge.danger.duet-theme-turva{background:#f9d4cf}.duet-badge.success{background:#cce7de}.duet-badge.success.duet-theme-turva{background:#cee7dc}.duet-badge.subtle{color:rgb(101, 119, 135);background:none;outline:1px solid rgb(225, 227, 230);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(68, 68, 69);background:none;outline-color:rgb(228, 228, 230)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#fbb63f}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(222, 35, 98)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(224, 42, 13)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(0, 135, 90)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(8, 135, 78)}.duet-badge.background-strong.subtle{border-color:rgb(207, 210, 212);outline-color:rgb(0, 41, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(207, 207, 209);outline-color:rgb(23, 28, 58)}";
+const DuetBadgeStyle0 = duetBadgeCss;
 
 const DuetBadge = /*@__PURE__*/ proxyCustomElement(class DuetBadge extends H {
     constructor() {
@@ -28,15 +29,15 @@ const DuetBadge = /*@__PURE__*/ proxyCustomElement(class DuetBadge extends H {
      */
     render() {
         const backgroundClass = `background-${this.background}`;
-        return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("span", { class: {
+        return (h(Host, { key: 'c2ea9d2c0fa542ce15a331b897255ddd269a9aa7', class: { "duet-m-0": this.margin === "none" } }, h("span", { key: 'af1bf65c2440d312bb0a4b271e4743b3b9cfacc8', class: {
                 "duet-badge": true,
                 [this.variation]: true,
                 [backgroundClass]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("slot", null))));
+            } }, h("slot", { key: '290964c30c35cf1926a1834f8156aabd2c26db58' }))));
     }
     get element() { return this; }
-    static get style() { return duetBadgeCss; }
+    static get style() { return DuetBadgeStyle0; }
 }, [1, "duet-badge", {
         "theme": [1025],
         "variation": [1],

package/lib/dist-custom-elements/{p-184196bf.js → p-12a09bbc.js}

@@ -1,13 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2e36d5bf.js';
-import { d as defineCustomElement$1 } from './p-c6788c34.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2f5e2da8.js';
+import { d as defineCustomElement$1 } from './p-bb20326f.js';
 
 const duetProgressCss = "*,*::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;width:100%;height:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:rgb(243, 249, 252);border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:rgb(252, 243, 244)}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:rgb(0, 119, 179);border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:rgb(198, 12, 48)}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:rgb(0, 119, 179);border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-progress progress[value]::-webkit-progress-bar{background-color:rgb(243, 249, 252);border-radius:0}.duet-progress progress[value]::-webkit-progress-value{background-color:rgb(0, 119, 179);background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-progress progress[value] ::-moz-progress-bar{background-color:rgb(243, 249, 252)}.duet-progress.duet-theme-turva progress[value]{color:rgb(198, 12, 48)}.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar{background-color:rgb(252, 243, 244)}.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value{background-color:rgb(198, 12, 48)}.duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar{background-color:rgb(252, 243, 244)}";
+const DuetProgressStyle0 = duetProgressCss;
 
 const DuetProgress = /*@__PURE__*/ proxyCustomElement(class DuetProgress extends H {
     constructor() {
@@ -62,7 +63,7 @@ const DuetProgress = /*@__PURE__*/ proxyCustomElement(class DuetProgress extends
             } }, h("duet-visually-hidden", null, h("label", { htmlFor: this.progressLabelId }, h("span", null, this.accessibleLabel, this.progress !== 0 && `, ${this.accessibleLabelUpload[this.progress < 99 ? 1 : 0]}`))), this.caption && (h("div", { class: "duet-progress-caption" }, h("span", null, this.caption))), h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { class: "progress-bar" }, h("span", { style: { width: `${this.progress}%;` } }, "Progress: ", this.progress, "%"))))));
     }
     get element() { return this; }
-    static get style() { return duetProgressCss; }
+    static get style() { return DuetProgressStyle0; }
 }, [0, "duet-progress", {
         "accessibleDescribedBy": [1, "accessible-described-by"],
         "accessibleDetails": [1, "accessible-details"],

package/lib/dist-custom-elements/{p-8806e54e.js → p-151934ce.js}

@@ -1,15 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { F as FocusGuard } from './p-4bd749d9.js';
+import { F as FocusGuard } from './p-d2f0147b.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-785686e3.js';
 import { T as Teleport } from './p-5c488cf4.js';
-import { d as defineCustomElement$2 } from './p-2933d260.js';
-import { d as defineCustomElement$1 } from './p-c6788c34.js';
+import { d as defineCustomElement$2 } from './p-955053f9.js';
+import { d as defineCustomElement$1 } from './p-bb20326f.js';
 
 const duetTooltipPopupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;z-index:950}.duet-tooltip{position:relative;width:282px;min-height:48px;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(0, 41, 77);visibility:hidden;background:rgb(255, 255, 255);border:1px solid rgb(225, 227, 230);border-radius:4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:300ms ease;transform-origin:100% 100%}.duet-tooltip.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(228, 228, 230);box-shadow:0 2px 10px 0 rgba(117, 117, 117, 0.13)}.duet-tooltip .arrow{position:absolute;width:22px;height:22px;pointer-events:none}.duet-tooltip .arrow.bottom,.duet-tooltip .arrow.bottom-start,.duet-tooltip .arrow.bottom-end{top:-20px}.duet-tooltip .arrow-container{position:relative;left:4px;width:100%;height:100%;pointer-events:none}.duet-tooltip .arrow-container::after{position:absolute;z-index:200;width:0;height:0;pointer-events:none;content:\"\"}.duet-tooltip .arrow-container::before{position:absolute;z-index:100;width:0;height:0;pointer-events:none;content:\"\"}.duet-tooltip .arrow-container.top::after,.duet-tooltip .arrow-container.top-start::after,.duet-tooltip .arrow-container.top-end::after{bottom:2px;left:2px;border:10px solid transparent;border-top:10px solid rgb(255, 255, 255)}.duet-tooltip .arrow-container.top::before,.duet-tooltip .arrow-container.top-start::before,.duet-tooltip .arrow-container.top-end::before{bottom:-1px;left:1px;border:11px solid transparent;border-top:11px solid rgb(225, 227, 230)}.duet-theme-turva .duet-tooltip .arrow-container.top::before,.duet-theme-turva .duet-tooltip .arrow-container.top-start::before,.duet-theme-turva .duet-tooltip .arrow-container.top-end::before{border-top:11px solid rgb(228, 228, 230)}.duet-tooltip .arrow-container.bottom::after,.duet-tooltip .arrow-container.bottom-start::after,.duet-tooltip .arrow-container.bottom-end::after{bottom:1px;left:2px;border:10px solid transparent;border-bottom:10px solid rgb(255, 255, 255)}.duet-tooltip .arrow-container.bottom::before,.duet-tooltip .arrow-container.bottom-start::before,.duet-tooltip .arrow-container.bottom-end::before{bottom:1px;left:1px;border:11px solid transparent;border-bottom:11px solid rgb(225, 227, 230)}.duet-theme-turva .duet-tooltip .arrow-container.bottom::before,.duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before,.duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before{border-top:11px solid rgb(228, 228, 230)}.duet-tooltip.duet-tooltip-has-label{right:auto !important;left:0;width:282px !important;transform-origin:0 0 !important}.duet-tooltip.duet-tooltip-active{visibility:visible;opacity:1;transition-property:transform, opacity}.duet-tooltip-content-area{padding:20px !important;width:100%;padding-right:25px !important;overflow-y:auto;-webkit-hyphens:auto;hyphens:auto;border-radius:4px;-webkit-overflow-scrolling:touch}.duet-tooltip-content-area:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-content-area:focus{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-tooltip-content-area:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tooltip-content-area::-webkit-scrollbar{width:4px}.duet-tooltip-content-area::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-content-area::-webkit-scrollbar-thumb{background:rgb(225, 227, 230);border-radius:4px}.duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb{background:rgb(228, 228, 230)}.duet-tooltip-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:17px;height:17px;min-height:0 !important;padding:0 !important;margin:0 !important;line-height:normal;color:rgb(0, 41, 77);cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;-webkit-appearance:none;appearance:none}.duet-tooltip-close:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva .duet-tooltip-close:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px #171c3a !important}";
+const DuetTooltipPopupStyle0 = duetTooltipPopupCss;
 
 const DuetTooltipPopup = /*@__PURE__*/ proxyCustomElement(class DuetTooltipPopup extends H {
     constructor() {
@@ -55,14 +56,14 @@ const DuetTooltipPopup = /*@__PURE__*/ proxyCustomElement(class DuetTooltipPopup
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: 'dc3ca4ba9ef2e919f83aca37e6341ff34395ffaa' }, h("div", { key: 'efb0386ce9c7b976bf65aaf785540fcb5f0b719e', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)), h(FocusGuard, { moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: 'd8932d7ddac08d3429c7972bfbebb070cb083f71', moveFocusTo: this.buttonEl }), h("div", { key: '3d89efd0dfe21334173ae7141616a955439eb2c6', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'ae21e55ab3bfb1a25eb167c1a598a264a3568121' })), h("div", { key: '88166e6bc68a62d6df21ed962d0a5a192fe27aef', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '27ec390ca052f884a69fd761d9196d29832c9160', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '21e54548f177faa13933fe6617e1ace266255d9e', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '9f1ac2403232e6aca7d25bf48b8b63632bd7ca2c', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '429898e8fa996f763fd5baf735a9b0b5301582a3' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'd42579384165f3d801045c761412e5d620103489', moveFocusTo: this.contentEl }))));
     }
     get element() { return this; }
-    static get style() { return duetTooltipPopupCss; }
+    static get style() { return DuetTooltipPopupStyle0; }
 }, [1, "duet-tooltip-popup", {
         "theme": [1025],
         "active": [4],

package/lib/dist-custom-elements/{p-8b931125.js → p-1c341405.js}

@@ -1,20 +1,21 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { c as createID } from './p-5e59e970.js';
-import { c as checkNamedSlotElement } from './p-06e608ae.js';
+import { c as checkNamedSlotElement } from './p-895db398.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
-import { d as defineCustomElement$7 } from './p-5d1b1309.js';
-import { d as defineCustomElement$6 } from './p-2933d260.js';
-import { d as defineCustomElement$5 } from './p-2e4d752a.js';
-import { d as defineCustomElement$4 } from './p-b59388e4.js';
-import { d as defineCustomElement$3 } from './p-9a63d9a1.js';
-import { d as defineCustomElement$2 } from './p-8806e54e.js';
-import { d as defineCustomElement$1 } from './p-c6788c34.js';
+import { d as defineCustomElement$7 } from './p-00eccbc8.js';
+import { d as defineCustomElement$6 } from './p-955053f9.js';
+import { d as defineCustomElement$5 } from './p-26d4d49e.js';
+import { d as defineCustomElement$4 } from './p-fd601808.js';
+import { d as defineCustomElement$3 } from './p-ad23e869.js';
+import { d as defineCustomElement$2 } from './p-151934ce.js';
+import { d as defineCustomElement$1 } from './p-bb20326f.js';
 
 const duetSelectCss = "*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-select-variation-tiny.sc-duet-select-h,.duet-select-variation-compact.sc-duet-select-h{position:relative;top:-2px;width:72px;margin:0 !important;vertical-align:baseline}.duet-select-variation-compact.sc-duet-select-h{width:auto}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select,.sc-duet-select-s>duet-tooltip{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select,.sc-duet-select-s>duet-tooltip{position:relative;top:4px;right:auto}}.duet-select-placeholder.sc-duet-select{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-container.duet-select-variation-tiny.sc-duet-select{width:72px}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !important;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}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-variation-tiny.sc-duet-select .duet-select-wrapper.sc-duet-select{width:81px;padding:0 !important}.duet-select-variation-compact.sc-duet-select .duet-select-wrapper.sc-duet-select{padding:0 !important;line-height:1}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:rgb(144, 149, 153);box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:rgb(116, 116, 117);box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e55039}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:rgb(23, 28, 58)}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:rgb(0, 119, 179)}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e55039}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:rgb(0, 41, 77) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:rgb(0, 41, 77) !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:rgb(23, 28, 58) !important;background:rgb(245, 245, 247) !important;border-color:rgb(245, 245, 247) !important;-webkit-text-fill-color:rgb(23, 28, 58) !important}.duet-select-wrapper.sc-duet-select span.duet-keep-container-height.sc-duet-select{opacity:0}.duet-select-variation-compact.sc-duet-select .duet-select-wrapper.sc-duet-select span.duet-keep-container-height.sc-duet-select{display:none}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;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(0, 41, 77);text-align:left;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255);border:1px solid rgb(144, 149, 153);border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:rgb(222, 35, 98) !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:rgb(222, 35, 98) !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:rgb(224, 42, 13) !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:rgb(224, 42, 13) !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(116, 116, 117)}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:rgb(0, 41, 77);pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:rgb(23, 28, 58)}.duet-select-variation-tiny.sc-duet-select .duet-select.sc-duet-select,.duet-select-variation-compact.sc-duet-select .duet-select.sc-duet-select{width:72px;min-width:inherit;padding:0 !important;margin-bottom:-4px;overflow:visible;font-weight:600;text-align:center}.duet-select-variation-tiny.sc-duet-select .duet-select.sc-duet-select duet-icon.sc-duet-select,.duet-select-variation-compact.sc-duet-select .duet-select.sc-duet-select duet-icon.sc-duet-select{padding-left:10px}.duet-select-variation-compact.sc-duet-select .duet-select.sc-duet-select{position:relative;width:fit-content;padding:7px 16px !important;font-size:0.875rem;line-height:1.1;text-align:right;border-radius:8px}.duet-select-help.sc-duet-select{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:0.875rem;font-weight:400;line-height:1.25;color:rgb(101, 119, 135);border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{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(116, 116, 117)}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:rgb(222, 35, 98)}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:rgb(224, 42, 13)}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const DuetSelectStyle0 = duetSelectCss;
 
 function isOptionGroup(item) {
     return "options" in item;
@@ -185,7 +186,7 @@ const DuetSelect = /*@__PURE__*/ proxyCustomElement(class DuetSelect extends H {
         "value": ["valueChanged"],
         "items": ["refresh"]
     }; }
-    static get style() { return duetSelectCss; }
+    static get style() { return DuetSelectStyle0; }
 }, [6, "duet-select", {
         "variation": [1],
         "accessibleActiveDescendant": [1, "accessible-active-descendant"],

package/lib/dist-custom-elements/{p-0301d789.js → p-21e0af47.js}

@@ -1,15 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { h as hasSlot, g as getElementsFromDefaultSlot } from './p-06e608ae.js';
-import { d as defineCustomElement$4 } from './p-e4f40301.js';
-import { d as defineCustomElement$3 } from './p-2933d260.js';
-import { d as defineCustomElement$2 } from './p-2a29afc3.js';
-import { d as defineCustomElement$1 } from './p-c6788c34.js';
+import { h as hasSlot, g as getElementsFromDefaultSlot } from './p-895db398.js';
+import { d as defineCustomElement$4 } from './p-7eef087e.js';
+import { d as defineCustomElement$3 } from './p-955053f9.js';
+import { d as defineCustomElement$2 } from './p-b8bb3910.js';
+import { d as defineCustomElement$1 } from './p-bb20326f.js';
 
-const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer;transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--top{align-self:flex-start}:host .duet-scrollable-items .duet-scrollable-button--bottom{align-self:flex-end}:host .duet-scrollable-items .duet-scrollable-button--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;padding-right:5px;padding-left:5px;margin:0 -5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}";
+const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button-container{position:relative;flex:0 0 auto;flex-basis:40px;transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button-container.left::after{position:relative;top:-50px;left:20px;z-index:950;display:block;width:30px;height:100%;content:\"\";background-image:linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button-container.right::after{position:relative;top:-50px;right:15px;z-index:950;display:block;width:30px;height:100%;content:\"\";background-image:linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button-container--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;height:100%;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--top{align-self:flex-start}:host .duet-scrollable-items .duet-scrollable-button--bottom{align-self:flex-end}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;padding-right:5px;padding-left:5px;margin:0 -5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}";
+const DuetScrollableStyle0 = duetScrollableCss;
 
 const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable extends H {
     constructor() {
@@ -59,6 +60,7 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
     }
     componentDidLoad() {
         this.resizeObserver.observe(this.scrollPaneElement);
+        this.updateScrollButtons(this.getScrollPaneElements()[0]);
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
@@ -92,10 +94,21 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
         }
         return elementIndex;
     }
-    updateScrollButtons(container = this.scrollPaneElement) {
+    updateScrollButtons(element = null, container = this.scrollPaneElement) {
         if (!this.buttons) {
             return;
         }
+        // handle case when element is wider than container
+        if (element && element.clientWidth > this.scrollPaneElement.clientWidth) {
+            const elementIndex = this.getScrollPaneElements().indexOf(element);
+            if (elementIndex == 0) {
+                this.scrollPaneAtStart = true;
+            }
+            if (elementIndex == this.getScrollPaneElements().length - 1) {
+                this.scrollPaneAtEnd = true;
+            }
+            return;
+        }
         if (container.scrollLeft <= 0) {
             this.scrollPaneAtStart = true;
         }
@@ -133,7 +146,7 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
                     window.requestAnimationFrame(getAnimationFrame);
                     return;
                 }
-                this.updateScrollButtons();
+                this.updateScrollButtons(elements[index]);
             }
             else {
                 window.requestAnimationFrame(getAnimationFrame);
@@ -160,36 +173,42 @@ const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class DuetScrollable ext
     render() {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
         const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
-        return (h(Host, { class: {
+        return (h(Host, { key: '4fcbcaecb236d22e3d81a6d2269dcb564aeee649', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'dfe6ad7c7d152f899bddbca6f8ae4564abc65f66', class: {
                 collapse: true,
                 hide: !this.isScrollPaneContentSmallerThanWrapper && !this.collapsed,
-            } }, h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { name: "collapse-button-label" })))), h("div", { class: {
+            } }, h("duet-button", { key: '3402503fbbcc184c193518fdbc60bb2118c038cb', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '40cce68dae00f3724cabbd691f665b72fc39f193', name: "collapse-button-label" })))), h("div", { key: '181cc8c335be1c8a5cb5bbb0992650d0401aa60f', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+            } }, h("div", { key: '1f639ddf0e5818d4b14d5b5d677fd70021150732', class: {
+                "duet-scrollable-button-container": true,
+                left: true,
+                "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
+            } }, h("button", { key: '39dbfb43d7048347804b5d35a2a174cc0dc38070', part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--left": true,
-                "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
+            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: '9a183412d07974d452858ab9d7e4f3fa1e1ca239', color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left", size: "small", margin: "none" }))), h("div", { key: '6befc01423321a62ebb54e54edc9f3734d435887', class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'b857a63d05c43c84d58b66847835b14adea92671' })), h("div", { key: 'dff2e6af23b3201d89433c110189c72cded05227', class: {
+                "duet-scrollable-button-container": true,
+                right: true,
+                "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
+            } }, h("button", { key: 'ec0e6149990950c3f9f92597af6123b8bc1aa903', part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--right": true,
-                "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right-small", size: "small", margin: "none" })))));
+            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: 'c234e9218a01017220da205292d69fd20ce2985f', color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right", size: "small", margin: "none" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
         "selected": ["watchPropHandler"]
     }; }
-    static get style() { return duetScrollableCss; }
+    static get style() { return DuetScrollableStyle0; }
 }, [1, "duet-scrollable", {
         "theme": [1025],
         "identifier": [1],

package/lib/dist-custom-elements/{p-2e4d752a.js → p-26d4d49e.js}

@@ -1,11 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d160ca6a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-955746f9.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { g as getColorByName } from './p-3ec3eb5f.js';
 
 const duetLabelCss = "*.sc-duet-label,*.sc-duet-label::after,*.sc-duet-label::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-label-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;line-height:1.25;cursor:default}.duet-p-0.sc-duet-label-h{padding:0 !important}.duet-m-0.sc-duet-label-h{margin:0 !important}.duet-m-0.sc-duet-label-h{margin-bottom:0 !important}.duet-small-margin.sc-duet-label-h{margin-top:8px !important;margin-bottom:4px !important}.duet-has-tooltip.sc-duet-label-h{padding-right:48px}@media (min-width: 48em){.duet-has-tooltip.sc-duet-label-h{padding-right:0}}label.sc-duet-label{margin:0;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 !important;line-height:1.25;color:rgb(0, 41, 77);text-align:left;word-break:break-word}label.sc-duet-label span.sc-duet-label{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-label-small.sc-duet-label-h label.sc-duet-label{font-size:0.875rem}.duet-label-small.sc-duet-label-h label.sc-duet-label span.sc-duet-label{font-size:0.875rem}.duet-weight-normal.sc-duet-label-h label.sc-duet-label{font-weight:400 !important}.duet-weight-normal.sc-duet-label-h label.sc-duet-label span.sc-duet-label{font-weight:400 !important}.duet-theme-turva.sc-duet-label-h label.sc-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, 28, 58)}";
+const DuetLabelStyle0 = duetLabelCss;
 
 const DuetLabel = /*@__PURE__*/ proxyCustomElement(class DuetLabel extends H {
     constructor() {
@@ -40,7 +41,7 @@ const DuetLabel = /*@__PURE__*/ proxyCustomElement(class DuetLabel extends H {
             } }, h("label", { htmlFor: this.for, style: { color } }, h("span", null, h("slot", null)))));
     }
     get element() { return this; }
-    static get style() { return duetLabelCss; }
+    static get style() { return DuetLabelStyle0; }
 }, [6, "duet-label", {
         "theme": [1025],
         "for": [1],