@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -1,14 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import './string-utils-C6E9F6QT.js';
 
 const duetProgressCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:rgb(240, 247, 250);border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:rgb(255, 241, 241)}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:rgb(0, 119, 179);border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:rgb(198, 12, 48)}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:rgb(0, 119, 179);border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-progress progress[value]::-webkit-progress-bar{background-color:rgb(240, 247, 250);border-radius:0}.duet-progress progress[value]::-webkit-progress-value{background-color:rgb(0, 119, 179);background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-progress progress[value] ::-moz-progress-bar{background-color:rgb(240, 247, 250)}.duet-progress.duet-theme-turva progress[value]{color:rgb(198, 12, 48)}.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar{background-color:rgb(255, 241, 241)}.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value{background-color:rgb(198, 12, 48)}.duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar{background-color:rgb(255, 241, 241)}";
-const DuetProgressStyle0 = duetProgressCss;
 
 const DuetProgress = class {
     constructor(hostRef) {
@@ -18,20 +17,42 @@ const DuetProgress = class {
          */
         this.progressId = createID("DuetProgress");
         this.progressLabelId = createID("DuetProgressLabel");
-        this.accessibleDescribedBy = 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;
-        this.accessibleLabel = undefined;
+        /**
+         * Defaults for accessibleLabel
+         */
         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;
-        this.caption = undefined;
+        /**
+         * Height of progressbar
+         */
         this.height = "10px";
+        /**
+         * Theme of the input.
+         */
         this.theme = "";
     }
     /**
@@ -63,6 +84,6 @@ const DuetProgress = class {
     }
     get element() { return getElement(this); }
 };
-DuetProgress.style = DuetProgressStyle0;
+DuetProgress.style = duetProgressCss;
 
 export { DuetProgress as duet_progress };

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-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-4096ff0d.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-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-B1zQ6tzO.js';
+import { g as getColorByName } from './token-utils-D2bU4zM_.js';
+import './tokens.module-UQH7pb1d.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 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.
@@ -62,6 +78,6 @@ const DuetPromoCard = class {
     }
     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-a830b2de.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-4096ff0d.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-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { b as getElementsFromNamedSlot, h as hasSlot, c as checkNamedSlotElement } from './slot-utils-B1zQ6tzO.js';
+import { f as findCheckedOption, w as watchForOptions } from './watch-options-BgyaCAyh.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 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)
@@ -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.
@@ -183,41 +200,79 @@ const DuetRadio = class {
     }
     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 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;
+        };
     }
     /**
      * Component lifecycle events.
@@ -305,6 +360,6 @@ const DuetRadioGroup = class {
         "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-a830b2de.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-52e2e3f9.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-daf80d44.js';
-import { p as proxyInputToSlot } from './slot-utils-4096ff0d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as colorGray, j as colorPrimary, k as colorGrayTurva, l as colorPrimaryTurva } from './tokens.module-UQH7pb1d.js';
+import { D as DuetInternalLabel } from './label-BrSxwvH-.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.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-B1zQ6tzO.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 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.
@@ -134,6 +172,6 @@ const DuetRangeSlider = class {
     }
     get element() { return getElement(this); }
 };
-DuetRangeSlider.style = DuetRangeSliderStyle0;
+DuetRangeSlider.style = duetRangeSliderCss;
 
 export { DuetRangeSlider as duet_range_slider };