@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/esm/duet-promo-card.entry.js

@@ -1,25 +1,41 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1d0b7c66.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-4e5ed4eb.js';
-import { g as getColorByName } from './token-utils-b9ba8c5e.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BVAkfiYN.js';
+import { i as inheritGlobalTheme } from './themeable-component-B8TGOi99.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-D8NnYUf2.js';
+import { g as getColorByName, p as postfixTheme } from './token-utils-Dw-GA7-4.js';
+import './tokens.module-Bh9dkusU.js';
 
-const duetPromoCardCss = "*,*::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:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-promo-card{display:flex;flex-direction:column;width:100%;height: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-style:normal;color:rgb(8, 42, 77);text-align:left;border-radius:20px}.duet-promo-card.duet-p-0{padding:0 !important}.duet-promo-card.duet-m-0{margin:0 !important}.duet-promo-card .content-wrapper{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}.duet-promo-card .content-wrapper:focus{border-radius:20px;outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-promo-card .image{position:relative;width:100%;overflow:hidden;border-top-left-radius:20px;border-top-right-radius:20px;object-fit:cover}.duet-promo-card .content{display:flex;flex-direction:column;flex-grow:1;gap:8px;padding:20px}@media (min-width: 36em){.duet-promo-card .content{padding:28px}}.duet-promo-card .action{display:flex;flex-grow:1;align-items:flex-end;padding-top:16px}.duet-promo-card.no-bg-color .content{padding:20px 0 0}.duet-promo-card.no-bg-color .image{border-radius:16px}.duet-promo-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-promo-card.duet-theme-turva .content-wrapper:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-promo-card-link{transition:box-shadow 300ms ease}.duet-promo-card-link:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-promo-card-link:hover.duet-theme-turva{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}";
-const DuetPromoCardStyle0 = duetPromoCardCss;
+const duetPromoCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type{margin-right:4px !important}:host(.duet-m-0){margin:0 !important}.duet-promo-card{display:flex;flex-direction:column;width:100%;height: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-style:normal;color:rgb(8, 42, 77);text-align:left;border-radius:20px}.duet-promo-card.duet-p-0{padding:0 !important}.duet-promo-card.duet-m-0{margin:0 !important}.duet-promo-card .content-wrapper{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border-radius:20px}.duet-promo-card .content-wrapper:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-promo-card .content-wrapper:focus,.duet-promo-card .content-wrapper:focus.duet-theme-turva,.duet-theme-turva2 .duet-promo-card .content-wrapper:focus,.duet-promo-card .content-wrapper:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-promo-card .image{position:relative;width:100%;overflow:hidden;object-fit:cover;border-top-left-radius:20px;border-top-right-radius:20px}.duet-promo-card .content{display:flex;flex-grow:1;flex-direction:column;gap:8px;padding:20px}@media (min-width: 36em){.duet-promo-card .content{padding:28px}}.duet-promo-card .action{display:flex;flex-grow:1;align-items:flex-end;padding-top:16px}.duet-promo-card.no-bg-color .content{padding:20px 0 0}.duet-promo-card.no-bg-color .image{border-radius:16px}.duet-promo-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-promo-card-link{transition:box-shadow 300ms ease}.duet-promo-card-link:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-promo-card-link:hover.duet-theme-turva{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}";
 
 const DuetPromoCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Background color.
+         */
         this.backgroundColor = "";
+        /**
+         * Text color.
+         */
         this.textColor = "secondary";
+        /**
+         * Image. Example image is 512x341;
+         */
         this.image = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
         this.headingLevel = "h3";
-        this.url = undefined;
     }
     /**
      * Component lifecycle events.
@@ -53,15 +69,15 @@ const DuetPromoCard = class {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '9cbbef0f84fc9ea0995f4efc404887a3d7fcb2b7', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '9dd49ad5394f7da06b48728c697953383359411d', class: {
+        return (h(Host, { key: '6d2ebadbdc4716a50f44a6805ec97f2915476f4e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '12c8b32f7a486ababadb37b0cb125337a4b548f5', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'c2b5c8a5e4ef259545158bac573a4c8886b42bf4', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'c4454d6d77a763e9b218ef80e36612106b8f445e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '29407ebb77fb8476c8d809f4e79a3b1f358cf351', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'ac5d2e4aaef3010cf71bda6e27042f61fccb3729', class: "pre-heading" }, h("slot", { key: '33dead9d00d09fd214d33b3ee9f6845f56ca33d9', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8236efa41a9c1d6f467bb203cb26b6d49b7ea6a9', class: "heading" }, h("duet-heading", { key: 'fa5e03a97c417d2949e8733bf47922b855795e49', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'dd4ced53071aef1ff71c5f1fac916bf69626c45d' }, h("slot", { key: 'a0137eac1c27d9571776388d2dc119a9ac17e994', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '75b0fd24b1399ac5b24bbb8bcf4a9de3366c578a', class: "description" }, h("duet-paragraph", { key: 'cc88387c1d90099543510e6340dbac160cb55a49', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '02328a4e2f140346c6acbdb616fc3cfb6c06b7d7' }, h("slot", { key: '0f693c364072b59acb520ef2eeae2fcda3801415', name: "description" }))))), this.hasActionSlot && (h("div", { key: '66dd94ac45bd090224ce22454abfb822bca0c057', class: "action" }, h("slot", { key: 'b9906bef566f51030ef45a227f468139d67f8e5e', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'caef7b4cd0f222eb2039602c241438ecdd77d7ad', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '59e3b0877935a3ea2de4010312571a89ac32851b', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: 'c27c8862d34045213fb6982cbc790c0d88d5da70', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '9ea892228de3f899f5e1031247b17d095e25e1de', class: "pre-heading" }, h("slot", { key: '4174b492f22e704b0354be13d0a178b9ef02a5eb', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8d21d1464f81c9745c91791a8857fcbe28788dce', class: "heading" }, h("duet-heading", { key: '7716f9540e3fc2638bea8ba30ce266d9f1c13390', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e2ec91a5bdc861f6f228f6e662b347c8c8b06410' }, h("slot", { key: '9d423ea6373cada2b93d47c80a897efd38d97013', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '739454e12666bfb262d6a2243d61c658189410f5', class: "description" }, h("duet-paragraph", { key: '6592dd6a78e64e89ec88a06ce89120a011c2885e', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '599855764a99fba164a1500616f5a766be168b4b' }, h("slot", { key: 'deb8f54c39068fd0a313080a14e5dfdfb072ac14', name: "description" }))))), this.hasActionSlot && (h("div", { key: '32d5c8f68c70b99cd039254054130ea149a436c3', class: "action" }, h("slot", { key: '4185c9a0f8a624e3992481fba39852335746ddbb', name: "action" }))))))));
     }
     get element() { return getElement(this); }
 };
-DuetPromoCard.style = DuetPromoCardStyle0;
+DuetPromoCard.style = duetPromoCardCss;
 
 export { DuetPromoCard as duet_promo_card };

package/lib/esm/duet-radio_2.entry.js

@@ -1,14 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1d0b7c66.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { g as getElementsFromNamedSlot, h as hasSlot, c as checkNamedSlotElement } from './slot-utils-4e5ed4eb.js';
-import { f as findCheckedOption, w as watchForOptions } from './watch-options-e96ecd92.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVAkfiYN.js';
+import { i as inheritGlobalTheme } from './themeable-component-B8TGOi99.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { a as getElementsFromNamedSlot, h as hasSlot, c as checkNamedSlotElement } from './slot-utils-D8NnYUf2.js';
+import { f as findCheckedOption, w as watchForOptions } from './watch-options-BmMFVM-y.js';
 
-const duetRadioCss = "*,*::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:28px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.vertical){margin-right:0 !important}:host(.horizontal){margin-bottom:0 !important;width:auto}:host(.horizontal) .duet-label .duet-label-content{max-width:100%}@media (min-width: 48em){:host(.horizontal-responsive){margin-right:28px !important;margin-bottom:0 !important;width:auto}:host(.horizontal-responsive):last-child,:host(.horizontal-responsive):last-of-type{margin-right:0 !important}:host(.horizontal-responsive) .duet-label .duet-label-content{max-width:100%}}:host(.duet-m-0){margin:0 !important}:host(:last-child:not(:only-child)){margin-right:0 !important;margin-bottom:0 !important}.duet-label{position:relative;z-index:100;display:flex;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;hyphens:auto;line-height:1.5;color:rgb(8, 42, 77);word-break:break-word;overflow-wrap:break-word;cursor:pointer;background:transparent}.duet-theme-turva .duet-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-label .duet-label-content{flex-grow:1;font-size:1rem}.duet-label-hidden .duet-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-radio-container{position:relative;width:100%;height:100%}.duet-label::before{z-index:100;flex-shrink:0;width:20px;height:20px;margin:2px 10px 1px 1px;content:\"\";background:rgb(255, 255, 255);border:1px solid rgb(8, 42, 77);border-radius:50%}.duet-theme-turva .duet-label::before{border-color:rgb(23, 28, 58)}.duet-label.focus::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-label.focus::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-label.checked::after{position:absolute;top:6px;left:5px;z-index:200;flex-shrink:0;width:12px;height:12px;content:\"\";background:rgb(0, 119, 179);border-radius:50%}.duet-theme-turva .duet-label.checked::after{background:rgb(23, 28, 58)}.duet-label.disabled{color:rgb(98, 121, 138)}.duet-theme-turva .duet-label.disabled{color:rgb(143, 147, 158)}.duet-label.disabled::before{border-color:rgb(181, 198, 208)}.duet-theme-turva .duet-label.disabled::before{border-color:rgb(143, 147, 158)}.duet-label.disabled.checked::before{border:1px solid rgb(127, 150, 165)}.duet-label.disabled.checked::after{background:rgb(127, 150, 165)}.duet-theme-turva .duet-label.disabled.checked::after{background:rgb(143, 147, 158);border-color:rgb(143, 147, 158)}*::slotted([slot=input]){padding:14px !important;position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;cursor:pointer;opacity:0}*::slotted([slot=input][disabled]){cursor:default}";
-const DuetRadioStyle0 = duetRadioCss;
+const duetRadioCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:28px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type{margin-right:28px !important}:host(.vertical){margin-right:0 !important}:host(.horizontal){margin-bottom:0 !important;width:auto}:host(.horizontal) .duet-label .duet-label-content{max-width:100%}@media (min-width: 48em){:host(.horizontal-responsive){margin-right:28px !important;margin-bottom:0 !important;width:auto}:host(.horizontal-responsive):last-child,:host(.horizontal-responsive):last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host(.horizontal-responsive):last-of-type{margin-right:28px !important}:host(.horizontal-responsive) .duet-label .duet-label-content{max-width:100%}}:host(.duet-m-0){margin:0 !important}:host(:last-child:not(:only-child)){margin-right:0 !important;margin-bottom:0 !important}.duet-label{position:relative;z-index:100;display:flex;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(8, 42, 77);hyphens:auto;word-break:break-word;overflow-wrap:break-word;cursor:pointer;background:transparent}.duet-theme-turva .duet-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-label .duet-label-content{flex-grow:1;font-size:1rem}.duet-label-hidden .duet-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}.duet-radio-container{position:relative;width:100%;height:100%}.duet-label::before{z-index:100;flex-shrink:0;width:20px;height:20px;margin:2px 10px 1px 1px;content:\"\";background:rgb(255, 255, 255);border:1px solid rgb(8, 42, 77);border-radius:50%}.duet-theme-turva .duet-label::before{border-color:rgb(23, 28, 58)}.duet-label.focus::before{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-label.focus::before,.duet-label.focus::before.duet-theme-turva,.duet-theme-turva2 .duet-label.focus::before,.duet-label.focus::before.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-theme-turva .duet-label.focus::before{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-label.checked::after{position:absolute;top:6px;left:5px;z-index:200;flex-shrink:0;width:12px;height:12px;content:\"\";background:rgb(0, 119, 179);border-radius:50%}.duet-theme-turva .duet-label.checked::after{background:rgb(23, 28, 58)}.duet-label.disabled{color:rgb(98, 121, 138)}.duet-theme-turva .duet-label.disabled{color:rgb(143, 147, 158)}.duet-label.disabled::before{border-color:rgb(181, 198, 208)}.duet-theme-turva .duet-label.disabled::before{border-color:rgb(143, 147, 158)}.duet-label.disabled.checked::before{border:1px solid rgb(127, 150, 165)}.duet-label.disabled.checked::after{background:rgb(127, 150, 165)}.duet-theme-turva .duet-label.disabled.checked::after{background:rgb(143, 147, 158);border-color:rgb(143, 147, 158)}*::slotted([slot=input]){padding:14px !important;position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;cursor:pointer;opacity:0}*::slotted([slot=input][disabled]){cursor:default}:host(.duet-theme-turva2) .duet-theme-turva .duet-label{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-radio+label::before{border-color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-radio:checked+label::after{background:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]+label{color:rgb(120, 145, 164)}:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]+label::before{border-color:rgb(120, 145, 164)}:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]:checked+label::after{background:rgb(120, 145, 164);border-color:rgb(120, 145, 164)}";
 
 const DuetRadio = class {
     constructor(hostRef) {
@@ -16,10 +15,51 @@ const DuetRadio = class {
         this.duetChange = createEvent(this, "duetChange", 7);
         this.duetFocus = createEvent(this, "duetFocus", 7);
         this.duetBlur = createEvent(this, "duetBlur", 7);
+        this.focus = false;
         /**
          * Own Properties.
          */
         this.radioId = createID("DuetRadio");
+        /**
+         * 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;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Theme of the radio.
+         */
+        this.theme = "";
+        /**
+         * Makes the radio component disabled. This prevents users from being able to
+         * interact with the radio, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required 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;
+        /**
+         * Stops the components from emitting events
+         */
+        this.blockEvents = false;
+        /**
+         * Label for the radio.
+         */
+        this.label = "label";
         this.radioInputListenersRemove = radioInput => {
             radioInput.removeEventListener("change", this.onChange);
             //radioInput.removeEventListener("click", this.onRadioClick)
@@ -33,7 +73,7 @@ const DuetRadio = class {
             radioInput.addEventListener("blur", this.onBlur);
         };
         this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=input]");
+            const slotInput = this.element.querySelector("input");
             const radioInput = slotInput || document.createElement("input");
             radioInput.slot = "input";
             radioInput.disabled = this.disabled || this.groupDisabled ? true : undefined;
@@ -121,29 +161,6 @@ const DuetRadio = class {
                 component: "duet-radio",
             });
         };
-        this.focus = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleIndex = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.theme = "";
-        this.disabled = false;
-        this.required = false;
-        this.blockEvents = false;
-        this.identifier = undefined;
-        this.label = "label";
-        this.name = undefined;
-        this.role = undefined;
-        this.groupDisabled = undefined;
-        this.groupDirection = undefined;
-        this.groupResponsive = undefined;
-        this.checked = undefined;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -170,54 +187,97 @@ const DuetRadio = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd0e3f85414ec58c2ad43fc2b5270169f0215d135', onClick: this.onClick, class: {
+        return (h(Host, { key: '5b1a38835b8478e9e31e2893f654d4a7da0de880', onClick: this.onClick, class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '53abf70ecca3cb7982df21e96daf3e534d9830ea', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'bb6b9872a4cad75a191a8ac5b1e7e0678fb8f2d5', name: "input" }), h("label", { key: '9ed92050ef44dbc0c78dc3e815ff9ab50d118c2d', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '7397b43b1104dbdc870ec0ad65793bd372062eaf', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '8daf569056a859f5362236e546a61e958ba4bcaf', name: "input" }), h("label", { key: '3acd012b17207cf38a15085d2cc868b3e4cc8c1c', inert: true, ref: element => (this.labelElement = element), class: {
                 "duet-label": true,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.disabled || this.groupDisabled,
-            } }, h("div", { key: '58c329e0c4ff19df4d30be153a66aac885dcc89d', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: '5fb433fd2fe57f3e560fdefcabff68999301596a', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
     }
     get element() { return getElement(this); }
 };
-DuetRadio.style = DuetRadioStyle0;
+DuetRadio.style = duetRadioCss;
 
-const duetRadioGroupCss = "*,*::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%}:host(.horizontal) .duet-radio-group{display:block}@media (min-width: 48em){:host(.horizontal) .duet-radio-group{display:flex}}:host(.horizontal) .duet-radio-group.duet-no-stacking{display:flex}.deut-radio-group{width:100%}";
-const DuetRadioGroupStyle0 = duetRadioGroupCss;
+const duetRadioGroupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block;width:100%}:host(.horizontal) .duet-radio-group{display:block}@media (min-width: 48em){:host(.horizontal) .duet-radio-group{display:flex}}:host(.horizontal) .duet-radio-group.duet-no-stacking{display:flex}.deut-radio-group{width:100%}";
 
 const DuetRadioGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
-         * Component event handling.
+         * Direction of the radio group.
          */
-        this.onSelect = (ev) => {
-            const selectedRadio = ev.target;
-            if (selectedRadio) {
-                this.value = selectedRadio.value;
-            }
-            // Prevent events from bubbling up the DOM tree in case
-            // this group is a sub-group of another choice group.
-            ev.cancelBubble = true;
-        };
         this.direction = "vertical";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Theme of the radio group.
+         */
         this.theme = "";
+        /**
+         * Display radio group in error state along with an error message.
+         */
         this.error = "";
+        /**
+         * Tooltip to display next to the label of the radio group.
+         */
         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";
-        this.name = undefined;
+        /**
+         * Legend displayed for the radio buttons in this group.
+         */
         this.label = "Label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
         this.labelHidden = false;
+        /**
+         * Additional caption to show inside the label of the radio group.
+         */
         this.caption = "";
+        /**
+         * Enable or disable the automatic responsive behaviour of the radio group
+         * component when horizontal setting is used. Setting this option to "true"
+         * makes sure that contents are stacked vertically on mobile.
+         */
         this.responsive = false;
-        this.value = undefined;
-        this.disabled = undefined;
+        /**
+         * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well.
+         */
         this.required = false;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
         this.accessibleLiveError = "polite";
+        /**
+         * Component event handling.
+         */
+        this.onSelect = (ev) => {
+            const selectedRadio = ev.target;
+            if (selectedRadio) {
+                this.value = selectedRadio.value;
+            }
+            // Prevent events from bubbling up the DOM tree in case
+            // this group is a sub-group of another choice group.
+            ev.cancelBubble = true;
+        };
+    }
+    removeDisabledAttributeWhenFalse() {
+        if (!this.disabled) {
+            this.element.removeAttribute("disabled");
+        }
     }
     /**
      * Component lifecycle events.
@@ -253,6 +313,7 @@ const DuetRadioGroup = class {
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.removeDisabledAttributeWhenFalse();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     /**
@@ -294,17 +355,17 @@ const DuetRadioGroup = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3a6b38dcbedc3d7de4f597f08f5a1d2edb58a1d4', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: 'd0dbe02e0ea371acaa38f790f1d2e3e9dc0b196f', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'a34345c14c27c8700ea94229d874ab8e33338529', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '69c039a5f7cc4fcb98c5f7e625326bebbc10f75e', name: "tooltip" }), h("div", { key: '48e785f3dcf8e2ed2fc5b77847cc351dc0d3fcc6', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '4c2428af487971b847ca3e704a878719629003a4' })))));
+        return (h(Host, { key: 'c9c42e3d578a64ec328ad0b1aad6e9c3906dcc2b', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '6a38b0a95734aea6320ec9bb63cebc7a11279990', label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '3f9d7aa7e79c08a743cd575d5a22542e3f89b26f', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '2a3125a48b3ebd4bc37cf127719ca0be1604e911', name: "tooltip" }), h("div", { key: 'c81542f71fe22646f761dab6fb2864c7fa269f48', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '5ff585a7895db4ad56916a1a7bc06bdc6915dc0e' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["removeDisabledAttributeWhenFalse", "updateRadios"],
         "name": ["updateRadios"],
         "value": ["updateRadios"],
-        "disabled": ["updateRadios"],
         "direction": ["updateRadios"],
         "responsive": ["updateRadios"]
     }; }
 };
-DuetRadioGroup.style = DuetRadioGroupStyle0;
+DuetRadioGroup.style = duetRadioGroupCss;
 
 export { DuetRadio as duet_radio, DuetRadioGroup as duet_radio_group };

package/lib/esm/duet-range-slider.entry.js

@@ -1,17 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1d0b7c66.js';
-import { i as colorPrimaryTurva, j as colorGrayTurva, k as colorPrimary, l as colorGray } from './tokens.module-2d02f5ff.js';
-import { D as DuetInternalLabel } from './label-ce262202.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { i as isInternetExplorer } from './is-internet-explorer-2c48f686.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-439bcc8b.js';
-import { p as proxyInputToSlot } from './slot-utils-4e5ed4eb.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVAkfiYN.js';
+import { c as colorGray, a as colorPrimary, b as colorGrayTurva, d as colorPrimaryTurva } from './tokens.module-Bh9dkusU.js';
+import { D as DuetInternalLabel } from './label-Cqxj4RVo.js';
+import { i as inheritGlobalTheme } from './themeable-component-B8TGOi99.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { i as isInternetExplorer } from './is-internet-explorer-DxESMgwA.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { p as proxyInputToSlot } from './slot-utils-D8NnYUf2.js';
 
-const duetRangeSliderCss = ".duet-internal-label{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;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;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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)}*,*::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:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;text-align:left;vertical-align:bottom}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}.duet-range-container{position:relative;width:100%}.duet-output{position:absolute;top:12px;right:0;z-index:200;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;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);background:rgb(255, 255, 255)}.duet-theme-turva .duet-output{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-range-disabled .duet-output{color:rgb(127, 150, 165)}.duet-range-disabled.duet-theme-turva .duet-output{color:rgb(143, 147, 158)}.duet-range{position:relative;z-index:100;width:100%;height:4px;background:rgb(181, 198, 208);border-radius:4px}.duet-theme-turva .duet-range{background:rgb(199, 202, 207)}.duet-ie .duet-range{display:block;width:auto;height:26px;background:transparent !important}.duet-range::-moz-range-track{height:1px;background:transparent !important;border:0;-moz-appearance:none}.duet-range::-ms-track{color:transparent;background:transparent;border:0}.duet-range:focus,.duet-range:active{outline:0}:host(.user-is-tabbing) .duet-range:focus{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75)}:host(.user-is-tabbing) .duet-theme-turva .duet-range:focus{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75)}.duet-range::-webkit-slider-runnable-track{background:transparent}.duet-range::-webkit-slider-thumb{position:relative;width:24px;height:24px;cursor:-webkit-grab;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:50%;transition:box-shadow 300ms ease;-webkit-appearance:none}.duet-theme-turva .duet-range::-webkit-slider-thumb{border-color:rgb(143, 147, 158)}.duet-range:active::-webkit-slider-thumb{cursor:-webkit-grabbing}.duet-range::-moz-range-thumb{position:relative;width:24px;height:24px;cursor:-moz-grab;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:50%;appearance:none}.duet-theme-turva .duet-range::-moz-range-thumb{border-color:rgb(143, 147, 158)}.duet-range:active::-moz-range-thumb{cursor:-moz-grabbing}.duet-range::-ms-thumb{position:relative;width:24px;height:24px;overflow:visible;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:50%}.duet-theme-turva .duet-range::-ms-thumb{border-color:rgb(143, 147, 158)}.duet-range:disabled{background:rgb(181, 198, 208) !important}.duet-theme-turva .duet-range:disabled{background:rgb(199, 202, 207) !important}.duet-range:disabled::-webkit-slider-thumb{cursor:default;background:rgb(181, 198, 208);border-color:transparent}.duet-theme-turva .duet-range:disabled::-webkit-slider-thumb{background:rgb(199, 202, 207);border-color:transparent}.duet-range:disabled::-moz-range-thumb{cursor:default;background:rgb(181, 198, 208);border-color:transparent}.duet-theme-turva .duet-range:disabled::-moz-range-thumb{background:rgb(199, 202, 207);border-color:transparent}.duet-range:disabled::-ms-thumb{cursor:default;background:rgb(181, 198, 208);border-color:transparent}.duet-theme-turva .duet-range:disabled::-ms-thumb{background:rgb(199, 202, 207);border-color:transparent}.duet-range::-ms-fill-lower{height:4px;background:rgb(0, 119, 179)}.duet-theme-turva .duet-range::-ms-fill-lower{background:rgb(198, 12, 48)}.duet-range::-ms-fill-upper{height:4px;background:rgb(181, 198, 208)}.duet-theme-turva .duet-range::-ms-fill-upper{background:rgb(199, 202, 207)}.duet-label-hidden .duet-internal-label,.duet-label-hidden output{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const DuetRangeSliderStyle0 = duetRangeSliderCss;
+const duetRangeSliderCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !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:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom;text-align:left}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type{margin-right:16px !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}.duet-range-container{position:relative;width:100%}.duet-output{position:absolute;top:12px;right:0;z-index:200;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;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);background:rgb(255, 255, 255)}.duet-theme-turva .duet-output{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-range-disabled .duet-output{color:rgb(127, 150, 165)}.duet-range-disabled.duet-theme-turva .duet-output{color:rgb(143, 147, 158)}.duet-range{position:relative;z-index:100;width:100%;height:4px;background:rgb(181, 198, 208);border-radius:4px}.duet-range:focus{outline:0}:host(.user-is-tabbing) .duet-range:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-range:focus,:host(.user-is-tabbing) .duet-range:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-range:focus,:host(.user-is-tabbing) .duet-range:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-theme-turva .duet-range{background:rgb(199, 202, 207)}.duet-ie .duet-range{display:block;width:auto;height:26px;background:transparent !important}.duet-range::-moz-range-track{height:1px;-moz-appearance:none;background:transparent !important;border:0}.duet-range::-ms-track{color:transparent;background:transparent;border:0}.duet-range:active{outline:0}.duet-range::-webkit-slider-runnable-track{background:transparent}.duet-range::-webkit-slider-thumb{position:relative;width:24px;height:24px;-webkit-appearance:none;cursor:-webkit-grab;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:50%;transition:box-shadow 300ms ease}.duet-theme-turva .duet-range::-webkit-slider-thumb{border-color:rgb(143, 147, 158)}.duet-range:active::-webkit-slider-thumb{cursor:-webkit-grabbing}.duet-range::-moz-range-thumb{position:relative;width:24px;height:24px;appearance:none;cursor:-moz-grab;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:50%}.duet-theme-turva .duet-range::-moz-range-thumb{border-color:rgb(143, 147, 158)}.duet-range:active::-moz-range-thumb{cursor:-moz-grabbing}.duet-range::-ms-thumb{position:relative;width:24px;height:24px;overflow:visible;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:50%}.duet-theme-turva .duet-range::-ms-thumb{border-color:rgb(143, 147, 158)}.duet-range:disabled{background:rgb(181, 198, 208) !important}.duet-theme-turva .duet-range:disabled{background:rgb(199, 202, 207) !important}.duet-range:disabled::-webkit-slider-thumb{cursor:default;background:rgb(181, 198, 208);border-color:transparent}.duet-theme-turva .duet-range:disabled::-webkit-slider-thumb{background:rgb(199, 202, 207);border-color:transparent}.duet-range:disabled::-moz-range-thumb{cursor:default;background:rgb(181, 198, 208);border-color:transparent}.duet-theme-turva .duet-range:disabled::-moz-range-thumb{background:rgb(199, 202, 207);border-color:transparent}.duet-range:disabled::-ms-thumb{cursor:default;background:rgb(181, 198, 208);border-color:transparent}.duet-theme-turva .duet-range:disabled::-ms-thumb{background:rgb(199, 202, 207);border-color:transparent}.duet-range::-ms-fill-lower{height:4px;background:rgb(0, 119, 179)}.duet-theme-turva .duet-range::-ms-fill-lower{background:rgb(198, 12, 48)}.duet-range::-ms-fill-upper{height:4px;background:rgb(181, 198, 208)}.duet-theme-turva .duet-range::-ms-fill-upper{background:rgb(199, 202, 207)}.duet-label-hidden .duet-internal-label,.duet-label-hidden output{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}:host(.duet-theme-turva2) .duet-theme-turva .duet-output{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-range-disabled.duet-theme-turva .duet-output{color:rgb(120, 145, 164)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range{background:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-webkit-slider-thumb{border-color:rgb(120, 145, 164)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-moz-range-thumb{border-color:rgb(120, 145, 164)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-thumb{border-color:rgb(120, 145, 164)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled{background:rgb(178, 194, 205) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-webkit-slider-thumb{background:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-moz-range-thumb{background:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-ms-thumb{background:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-lower{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-upper{background:rgb(178, 194, 205)}";
 
 const colors = {
     turva: {
@@ -33,6 +32,67 @@ const DuetRangeSlider = class {
          */
         this.rangeId = createID("DuetRange");
         this.proxyId = createID("DuetRange");
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = 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;
+        /**
+         * 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;
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Label for the range slider.
+         */
+        this.label = "label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Unit for the range slider.
+         */
+        this.unit = "";
+        /**
+         * Maximum value.
+         */
+        this.max = 100;
+        /**
+         * Step amount.
+         */
+        this.step = 1;
+        /**
+         * Locale used to format the entered value.
+         */
+        this.locale = "fi-FI";
+        /**
+         * Value of the input.
+         */
+        this.value = 0;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the duetChange
+         * event after each keystroke.
+         */
+        this.debounce = 0;
         /**
          * Component event handling.
          */
@@ -61,28 +121,6 @@ const DuetRangeSlider = class {
                 });
             }, this.debounce);
         };
-        this.theme = "";
-        this.margin = "auto";
-        this.expand = false;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.disabled = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.min = 0;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.labelHidden = false;
-        this.unit = "";
-        this.max = 100;
-        this.step = 1;
-        this.locale = "fi-FI";
-        this.value = 0;
-        this.debounce = 0;
     }
     /**
      * Component lifecycle events.
@@ -124,16 +162,16 @@ const DuetRangeSlider = class {
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { key: '98fe15c2f253a8bee32d5271e6de03605e669c28', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: 'e2344803fd443a83024cf3fcfe9ed87d952d1038', class: {
+        return (h(Host, { key: 'b314e267c1ad480ad5bde17e9dcee976fd141e43', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '87813c3a581e46540a20e21013e121db45cb7f5c', class: {
                 "duet-range-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-ie": isInternetExplorer(),
                 "duet-range-disabled": this.disabled,
-            } }, h(DuetInternalLabel, { key: '0780aee7170b90a56e56e59abe19287e536ed531', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: 'eef1575763000465607bb91eec29b4491df22660', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: 'e38f080b37e93b2abc1ce740d413c349ce4c893f', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+            } }, h(DuetInternalLabel, { key: 'b5d4bd9d56df7b88df2bdde8c28f1b01009e8821', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '6c30c88731245730cfcf47e2d00a823147708e7d', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '3e72fea4ee736546b6eee5aa15e70c80d73ee4de', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
     }
     get element() { return getElement(this); }
 };
-DuetRangeSlider.style = DuetRangeSliderStyle0;
+DuetRangeSlider.style = duetRangeSliderCss;
 
 export { DuetRangeSlider as duet_range_slider };