@duetds/components 6.2.4 → 6.2.6

package/lib/dist-custom-elements/{p-1302f6e8.js → p-52471a7a.js}

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$1 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$1 } from './p-2d3fc462.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:#f3f9fc;border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:#fcf3f4}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:#0077b3;border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:#c60c30}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:#0077b3;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-theme-turva .duet-progress progress[value]{color:#c60c30}.duet-progress progress[value]::-webkit-progress-bar{background-color:#f3f9fc;border-radius:0}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar{background-color:#fcf3f4}.duet-progress progress[value]::-webkit-progress-value{background-color:#0077b3;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-theme-turva .duet-progress progress[value]::-webkit-progress-value{background-color:#c60c30}.duet-progress progress[value] ::-moz-progress-bar{background-color:#f3f9fc}.duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar{background-color:#fcf3f4}";
 
@@ -18,42 +18,20 @@ const DuetProgress = /*@__PURE__*/ proxyCustomElement(class extends H {
      */
     this.progressId = createID("DuetProgress");
     this.progressLabelId = createID("DuetProgressLabel");
-    /**
-     * Aria Details of the component
-     */
+    this.accessibleDescribedBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
     this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Defaults for accessibleLabel
-     */
+    this.accessibleLabel = undefined;
     this.accessibleLabelUploadDefaults = {
       fi: ["lähetys valmis", "lähetys käynnissä"],
       sv: ["Uppladdningen är klar", "Uppladdning pågår"],
       en: ["upload completed", "upload in progress"],
     };
-    /**
-     * Adds accessible label for upload in progress and upload complete states
-     * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
-     */
     this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
-    /**
-     * Progress of the bar, a value from 0-100
-     */
     this.progress = 0;
-    /**
-     * Height of progressbar
-     */
+    this.caption = undefined;
     this.height = "10px";
-    /**
-     * Theme of the input.
-     */
     this.theme = "";
   }
   /**

package/lib/dist-custom-elements/{p-9ed347f9.js → p-535ce3ec.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { m as mediaQueryXxSmall, a as mediaQueryXSmall, b as mediaQuerySmall, c as mediaQueryMedium, d as mediaQueryLarge, e as mediaQueryXLarge, f as mediaQueryXxLarge, g as mediaQueryXxxLarge, h as mediaQueryXxxSmall, t as tokens } from './p-33e00967.js';
+import { m as mediaQueryXxSmall, i as mediaQueryXSmall, j as mediaQuerySmall, k as mediaQueryMedium, l as mediaQueryLarge, n as mediaQueryXLarge, o as mediaQueryXxLarge, p as mediaQueryXxxLarge, q as mediaQueryXxxSmall, t as tokens } from './p-55325c49.js';
 
 const allowedThemes = ["turva"];
 function isDashCase(str) {

package/lib/dist-custom-elements/{p-33e00967.js → p-55325c49.js}

@@ -304,4 +304,4 @@ const tokens = /*#__PURE__*/Object.freeze({
 	mediaQueryXxSmall: mediaQueryXxSmall
 });
 
-export { mediaQueryXSmall as a, mediaQuerySmall as b, mediaQueryMedium as c, mediaQueryLarge as d, mediaQueryXLarge as e, mediaQueryXxLarge as f, mediaQueryXxxLarge as g, mediaQueryXxxSmall as h, sizeHeader as i, colorGrayLightest as j, colorBrandGrayTurva as k, colorPrimaryTurva as l, mediaQueryXxSmall as m, colorBrandBlue as n, colorGrayTurva as o, colorPrimary as p, colorGray as q, sizeNavigation as s, tokens as t };
+export { colorGrayTurva as a, colorPrimary as b, colorPrimaryTurva as c, colorGray as d, colorGrayLightest as e, colorBrandGrayTurva as f, colorBrandBlue as g, sizeNavigation as h, mediaQueryXSmall as i, mediaQuerySmall as j, mediaQueryMedium as k, mediaQueryLarge as l, mediaQueryXxSmall as m, mediaQueryXLarge as n, mediaQueryXxLarge as o, mediaQueryXxxLarge as p, mediaQueryXxxSmall as q, sizeHeader as s, tokens as t };

package/lib/dist-custom-elements/{p-279dedcd.js → p-5846a06a.js}

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$1 } from './p-908c1151.js';
+import { d as defineCustomElement$1 } from './p-91098fd5.js';
 
 const duetEmptyStateCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";
 
@@ -12,17 +12,8 @@ const DuetEmptyState = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Theme of the empty state component.
-     */
     this.theme = "";
-    /**
-     * Icon shown in the empty state component.
-     */
     this.icon = "messaging-question";
-    /**
-     * The size of the empty state message.
-     */
     this.size = "medium";
   }
   /**

package/lib/dist-custom-elements/{p-e57df145.js → p-626f0ed7.js}

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
-import { m as media_query_large, a as media_query_medium, b as media_query_small } from './p-c4d8cad0.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
+import { m as media_query_large, b as media_query_medium, c as media_query_small } from './p-738bd3c5.js';
 import { w as watchForOptions, a as watchForElement } from './p-12721178.js';
 
 const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
@@ -20,34 +20,11 @@ const DuetGrid = /*@__PURE__*/ proxyCustomElement(class extends H {
       window.matchMedia(media_query_small.replace(/'/g, "")),
     ];
     this.distributeFormElement = false;
-    /**
-     * Enable or disable the automatic responsive behaviour of the grid component.
-     * Setting this option to "true" makes sure that contents are stacked vertically
-     * on mobile (575px and under).
-     */
     this.responsive = false;
-    /**
-     * Switch the breakpoint used to trigger the content stacking. These match to
-     * similar media query tokens: $media-query-small and $media-query-medium.
-     */
     this.breakpoint = "small";
-    /**
-     * Direction of the grid items.
-     */
     this.direction = "horizontal";
-    /**
-     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
-     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
-     * so that they align even when displaying errors.
-     */
     this.alignment = "top";
-    /**
-     * Adjusts the horizontal distribution of the grid items.
-     */
     this.distribution = "default";
-    /**
-     * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
-     */
     this.mobile = "";
   }
   /**

package/lib/dist-custom-elements/{p-c4d8cad0.js → p-738bd3c5.js}

@@ -456,4 +456,4 @@ const tokens$1 = /*#__PURE__*/Object.freeze({
   'default': tokens
 });
 
-export { media_query_medium as a, media_query_small as b, media_query_xx_large as c, font_size_medium as f, media_query_large as m, tokens$1 as t };
+export { media_query_xx_large as a, media_query_medium as b, media_query_small as c, font_size_medium as f, media_query_large as m, tokens$1 as t };

package/lib/dist-custom-elements/{p-862c60cc.js → p-7b1b2eef.js}

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getColorByName } from './p-9ed347f9.js';
+import { g as getColorByName } from './p-535ce3ec.js';
 
 const duetSpinnerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;top:50%;left:50%;z-index:800;max-width:100%}:host(.duet-theme-default) .duet-spinner{color:#0077b3 !important}:host(.duet-theme-turva) .duet-spinner{color:#c60c30 !important}:host(.duet-custom-color){color:inherit}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-spinner{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:800;width:24px;height:24px;color:#0077b3;border:2px solid transparent;border-left:2px solid currentColor;border-radius:50%;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%;animation:duetRotate 0.6s linear infinite}.duet-spinner::after{position:absolute;top:50%;left:50%;z-index:200;box-sizing:content-box;width:100%;height:100%;overflow:hidden;content:\"\";border:2px solid currentColor;border-radius:50%;opacity:0.3;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%}.duet-spinner.medium{width:36px;height:36px;border-width:4px}.duet-spinner.medium::after{border-width:4px}.duet-spinner.large{width:72px;height:72px;border-width:8px}.duet-spinner.large::after{border-width:8px}@keyframes duetRotate{0%{transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}";
 
@@ -12,22 +12,9 @@ const DuetSpinner = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Color of the spinner, as a design token entered in camelCase or kebab-case.
-     * Example: "color-primary". This property can also be set to "currentColor"
-     * which forces the icon to use the CSS text color of parent element instead.
-     * Useful when you want to control the color in stylesheet instead.
-     */
+    this.accessibleLabel = undefined;
     this.color = "gray-lightest";
-    /**
-     * Size variation of the spinner.
-     */
     this.size = "small";
-    /**
-     * Theme of the spinner. When used this will override the color setting and
-     * use "primary" or "primary-turva" as the color depending on which theme
-     * is chosen.
-     */
     this.theme = "";
   }
   /**

package/lib/dist-custom-elements/{p-6e81048c.js → p-88b72658.js}

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { p as parsePossibleJSON } from './p-5a9d75e1.js';
-import { d as defineCustomElement$5 } from './p-c4165359.js';
-import { d as defineCustomElement$4 } from './p-908c1151.js';
-import { d as defineCustomElement$3 } from './p-f51d88cc.js';
-import { d as defineCustomElement$2 } from './p-8c0cf877.js';
-import { d as defineCustomElement$1 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$5 } from './p-4905133d.js';
+import { d as defineCustomElement$4 } from './p-91098fd5.js';
+import { d as defineCustomElement$3 } from './p-f4d2face.js';
+import { d as defineCustomElement$2 } from './p-31b3a82e.js';
+import { d as defineCustomElement$1 } from './p-2d3fc462.js';
 
 const duetSelectCss = "@charset \"UTF-8\";*.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{position:relative;top:-2px;width:72px;margin:0 !important;vertical-align:baseline}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{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:white}.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-wrapper.sc-duet-select::after{content:\"  \"}.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:#909599;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:#747475;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 #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;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:#171c3a;box-shadow:0 0 0 1px #171c3a}.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:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.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 #e02a0d}.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:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.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:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !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:#171c3a;border-color:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-variation-tiny.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{padding-left:10px}.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:#657787;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:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.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}";
 
@@ -42,70 +42,6 @@ const DuetSelect = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.labelId = createID("DuetLabel");
     this.topCaptionId = createID("DuetCaptionTop");
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.processedItems = null;
-    /**
-     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
-     */
-    this.variation = "default";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Display the select in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Theme of the select.
-     */
-    this.theme = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Hint text to display.
-     */
-    this.placeholder = "";
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * Makes the select component disabled. This prevents users from being able
-     * to interact with the select, and conveys its inactive state to assistive
-     * technologies.
-     */
-    this.disabled = false;
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Label for the select.
-     */
-    this.label = "label";
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
     /**
      * Component event handling.
      */
@@ -133,6 +69,30 @@ const DuetSelect = /*@__PURE__*/ proxyCustomElement(class extends H {
         component: "duet-select",
       });
     };
+    this.processedItems = null;
+    this.variation = "default";
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.margin = "auto";
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.error = "";
+    this.expand = false;
+    this.value = undefined;
+    this.theme = "";
+    this.labelHidden = false;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.placeholder = "";
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.items = undefined;
+    this.disabled = false;
+    this.required = false;
+    this.label = "label";
+    this.role = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   valueChanged() {
     if (this.nativeSelect) {

package/lib/dist-custom-elements/{p-908c1151.js → p-91098fd5.js}

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { E as Env, p as proxyCustomElement, H, h, b as Host } from './p-4367369a.js';
+import { E as Env, p as proxyCustomElement, H, h, b as Host } from './p-a1724291.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getColorByName } from './p-9ed347f9.js';
+import { g as getColorByName } from './p-535ce3ec.js';
 
 const cleanupSvg = (svgContent) => {
   if (typeof document === "undefined" || !svgContent) {
@@ -82,47 +82,16 @@ const DuetIcon = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Theme of the icon. This setting will be overridden when you set the color
-     * property
-     */
+    this.svgContent = undefined;
     this.theme = "";
-    /**
-     * Icon name from Duet to display.
-     */
+    this.icon = undefined;
+    this.src = undefined;
     this.name = "action-add";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Whether the icon changes its size responsively or not.
-     */
     this.responsive = true;
-    /**
-     * Custom color to be used for the icon, as a design token entered in camelCase
-     * or kebab-case. Example: "color-primary". This property can also be set to
-     * "currentColor" which forces the icon to use the CSS text color of parent
-     * element instead. Useful when you want to control the color in stylesheet
-     * instead.
-     */
     this.color = "";
-    /**
-     * Custom color to be used for a circular background, as a design token entered
-     * in camelCase or kebab-case. Using this option the icon will always be resized
-     * to $size-icon-medium on mobile viewports. Example: "color-primary".
-     */
     this.background = "";
-    /**
-     * Icon size. Entered as one of the icon size design tokens.
-     */
     this.size = "medium";
-    /**
-     * Custom color to be used for a circular border and icon outline, as a design
-     * token entered in camelCase or kebab-case. Using this option the icon will
-     * always be resized to $size-icon-medium on mobile viewports.
-     * Example: "color-primary".
-     */
     this.outline = "";
   }
   /**

package/lib/dist-custom-elements/{p-0b8f16f1.js → p-9986919d.js}

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h } from './p-b9058029.js';
+import { h } from './p-e4a60f42.js';
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/dist-custom-elements/{p-3fa8edce.js → p-9d08c707.js}

@@ -1,18 +1,18 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-4367369a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-a1724291.js';
 import { f as formSearch } from './p-d004da5f.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { c as cleanValue, r as resetCursor } from './p-56118313.js';
 import { b as isEscapeKey } from './p-d8549efe.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$5 } from './p-c4165359.js';
-import { d as defineCustomElement$4 } from './p-908c1151.js';
-import { d as defineCustomElement$3 } from './p-f51d88cc.js';
-import { d as defineCustomElement$2 } from './p-8c0cf877.js';
-import { d as defineCustomElement$1 } from './p-70d1ca9f.js';
+import { d as defineCustomElement$5 } from './p-4905133d.js';
+import { d as defineCustomElement$4 } from './p-91098fd5.js';
+import { d as defineCustomElement$3 } from './p-f4d2face.js';
+import { d as defineCustomElement$2 } from './p-31b3a82e.js';
+import { d as defineCustomElement$1 } from './p-2d3fc462.js';
 
 var formEmail={"title":"form-email","tags":"form email","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 23.999c-3.205 0-6.218-1.248-8.484-3.514S.001 15.206.001 12.001s1.248-6.218 3.514-8.485C5.782 1.25 8.795.001 12 .001s6.218 1.248 8.485 3.514A11.92 11.92 0 0 1 24 12v2.25A3.754 3.754 0 0 1 20.25 18a3.77 3.77 0 0 1-3.48-2.365A6.009 6.009 0 0 1 12 18c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6v2.25c0 1.241 1.009 2.25 2.25 2.25s2.25-1.009 2.25-2.25V12c0-2.804-1.092-5.441-3.075-7.424A10.433 10.433 0 0 0 12 1.501c-2.804 0-5.441 1.092-7.424 3.075S1.501 9.196 1.501 12c0 2.805 1.092 5.441 3.075 7.424s4.619 3.074 7.423 3.074c2.257 0 4.494-.746 6.299-2.1a.749.749 0 1 1 .9 1.199A12.049 12.049 0 0 1 12 23.999zM12 7.5c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z\"/></svg>"};
 
@@ -51,111 +51,6 @@ const DuetInput = /*@__PURE__*/ proxyCustomElement(class extends H {
       fi: "Aika",
       sv: "Tid",
     });
-    /**
-     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
-     */
-    this.accessibleDescribedBy = "";
-    /**
-     * Indicates value of any popup element associated with the input.
-     */
-    this.accessibleHasPopup = undefined;
-    /**
-     * Aria Details of the component
-     */
-    this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
-    this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
-    this.accessibleDescription = undefined;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
-     * event after each keystroke.
-     */
-    this.debounce = 0;
-    /**
-     * If set, the input field will display a clear button that can be accessed with tabbing.
-     */
-    this.clear = false;
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * Theme of the input.
-     */
-    this.theme = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Makes the input component disabled. This prevents users from being able to
-     * interact with the input, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Type of the input.
-     */
-    this.type = "text";
-    /**
-     * Variation of button.
-     */
-    this.variation = "default";
-    /**
-     * Label for the input.
-     */
-    this.label = "label";
-    /**
-     * Display the input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Enable numeric keyboard for the input.
-     */
-    this.numericKeyboard = false;
-    /**
-     * Used internally in Duet to adjust whether this component acts as e.g. number input.
-     */
-    this.component = "input";
-    /**
-     * Enable or disable automatic completion by the browser
-     */
-    this.autoComplete = "on";
-    /**
-     * A regular expression that matches any characters which should be *disallowed*.
-     * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
-     * e.g. the following will disallow any non-numeric characters `[^0-9]`
-     */
-    this.disallowPattern = null;
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
     /**
      * Component event handling.
      */
@@ -221,6 +116,45 @@ const DuetInput = /*@__PURE__*/ proxyCustomElement(class extends H {
       }
       return event;
     };
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleAutocomplete = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleExpanded = undefined;
+    this.accessibleDescribedBy = "";
+    this.accessibleHasPopup = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.debounce = 0;
+    this.clear = false;
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.theme = "";
+    this.expand = false;
+    this.disabled = false;
+    this.identifier = undefined;
+    this.margin = "auto";
+    this.required = false;
+    this.type = "text";
+    this.variation = "default";
+    this.label = "label";
+    this.error = "";
+    this.labelHidden = false;
+    this.numericKeyboard = false;
+    this.name = undefined;
+    this.pattern = undefined;
+    this.maxlength = undefined;
+    this.minlength = undefined;
+    this.placeholder = undefined;
+    this.component = "input";
+    this.role = undefined;
+    this.icon = undefined;
+    this.autoComplete = "on";
+    this.disallowPattern = null;
+    this.value = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;