@duetds/components 6.0.4 → 6.0.6

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const tokens = require('./tokens-4c69b122.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const formSearch = require('./form-search-d61b2843.js');
 const tokens = require('./tokens-4c69b122.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const tokenUtils = require('./token-utils-f6e2f4ef.js');
 require('./tokens.module-1bb2d45e.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const formSearch = require('./form-search-d61b2843.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetLayoutCss = "*,*::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;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 

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

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-8a615003.js');
+const focusUtils = require('./focus-utils-dd4ce1de.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 require('./string-utils-5cadd058.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const jsUtils = require('./js-utils-134e0318.js');
@@ -345,7 +345,7 @@ const DuetRangeStepper = class {
     this.stepIndex = 1;
     /**
      * How big is the step
-     * @default 99
+     * @default 50
      */
     this.stepSize = 50;
     /**
@@ -383,30 +383,33 @@ const DuetRangeStepper = class {
     this.ariaControls = "";
     this.handleClick = (e, direction) => {
       e.preventDefault();
-      this.increment(direction);
+      this.stepIndex += direction;
+      this.clampStepIndex();
       this.handleStepClick(e);
     };
   }
   watchStepIndexStateHandler(newValue) {
-    if (newValue <= 1) {
-      this.leftBnRef.setAttribute("disabled", "");
-      this.rightBnRef.focus();
-    }
-    else {
-      this.leftBnRef.removeAttribute("disabled");
-    }
-    if (newValue >= this.total / this.stepSize) {
-      this.rightBnRef.setAttribute("disabled", "");
-      this.leftBnRef.focus();
-    }
-    else {
-      this.rightBnRef.removeAttribute("disabled");
+    if (this.element.shadowRoot.childElementCount > 0) {
+      if (newValue <= 1) {
+        this.leftBnRef.setAttribute("disabled", "");
+        this.rightBnRef.focus();
+      }
+      else {
+        this.leftBnRef.removeAttribute("disabled");
+      }
+      if (newValue >= this.total / this.stepSize) {
+        this.rightBnRef.setAttribute("disabled", "");
+        this.leftBnRef.focus();
+      }
+      else {
+        this.rightBnRef.removeAttribute("disabled");
+      }
     }
   }
   watchStepSizeStateHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
       if (this.stepIndex * newValue > this.total) {
-        this.stepIndex = this.total / newValue;
+        this.stepIndex = Math.ceil(this.total / newValue);
       }
     }
   }
@@ -422,22 +425,17 @@ const DuetRangeStepper = class {
   }
   componentWillLoad() {
     themeableComponent.inheritGlobalTheme(this);
+    this.clampStepIndex();
   }
   componentDidLoad() {
     this.watchStepIndexStateHandler(this.stepIndex);
   }
-  increment(direction) {
-    const newIndex = this.stepIndex + direction;
-    if (newIndex <= 0) {
+  clampStepIndex() {
+    if (this.stepIndex < 1) {
       this.stepIndex = 1;
     }
-    else {
-      if (newIndex * this.stepSize < this.total + this.stepSize) {
-        this.stepIndex = newIndex;
-      }
-      else if (newIndex * this.stepSize > this.total + this.stepSize) {
-        this.stepIndex = Math.floor(this.total / this.stepSize);
-      }
+    else if (this.stepIndex * this.stepSize > this.total) {
+      this.stepIndex = Math.ceil(this.total / this.stepSize);
     }
   }
   getTo() {

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const watchOptions = require('./watch-options-d88afac0.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const tokens_module = require('./tokens.module-1bb2d45e.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const createId = require('./create-id-c3b984b1.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const inputUtils = require('./input-utils-b5e8f524.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const tokens_module = require('./tokens.module-1bb2d45e.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-upload-aria-status.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 
 const DuetUploadAriaStatus = class {
   constructor(hostRef) {

package/lib/cjs/duet-visually-hidden.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 
 const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";
 

package/lib/cjs/duet.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

package/lib/cjs/{focus-utils-8a615003.js → focus-utils-dd4ce1de.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/cjs/{index-d106d801.js → index-e4517eb5.js}

@@ -24,7 +24,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.4"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.6"};
 
 let scopeId;
 let contentRef;

package/lib/cjs/loader.cjs.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d106d801.js');
+const index = require('./index-e4517eb5.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

package/lib/collection/components/duet-button/duet-button.css

@@ -218,7 +218,7 @@
 .duet-theme-turva .duet-button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
-.duet-button:active {
+.duet-button:active:not([disabled]) {
   opacity: 0.75;
   transition: none;
 }
@@ -422,11 +422,13 @@
 }
 .duet-button.plain[disabled] {
   color: #657787 !important;
+  cursor: default;
   background: transparent !important;
   border-color: transparent !important;
 }
 .duet-theme-turva .duet-button.plain[disabled] {
   color: transparent !important;
+  cursor: default;
   background: transparent !important;
   border-color: #e4e4e6 !important;
 }
@@ -495,12 +497,14 @@
 }
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: #657787 !important;
+  cursor: default;
   background: #e1e3e6 !important;
   border-color: #e1e3e6 !important;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button[disabled]:hover, .duet-theme-turva .duet-button.duet-button-negative [disabled], .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
   color: #747475 !important;
+  cursor: default;
   background: #e4e4e6 !important;
   border-color: #e4e4e6 !important;
 }

package/lib/collection/components/duet-button/duet-button.js

@@ -257,7 +257,7 @@ export class DuetButton {
           commonChildren,
           this.external && h("duet-visually-hidden", null,
             ", ",
-            this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }), commonChildren)),
+            this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren)),
         this.loading && h("duet-spinner", { color: "currentColor" }))));
   }
   static get is() { return "duet-button"; }

package/lib/collection/components/duet-choice/duet-choice.js

@@ -176,11 +176,13 @@ export class DuetChoice {
      * Local methods
      */
     this.toggleChecked = ev => {
+      ev.preventDefault();
+      ev.stopPropagation();
       if (this.disabled || this.groupDisabled) {
         return;
       }
       this.isInfoOpen = false;
-      // if it's a radio button and it's already checked
+      // if it's a radio button, and it's already checked
       // we shouldn't fire an event, so exit early
       if (this.type === "radio" && this.checked) {
         return;
@@ -192,8 +194,6 @@ export class DuetChoice {
         value: this.value,
         component: "duet-choice",
       });
-      ev.preventDefault();
-      ev.stopPropagation();
     };
     this.toggleInfo = () => {
       this.isInfoOpen = !this.isInfoOpen;
@@ -923,7 +923,7 @@ export class DuetChoice {
       "name": "duetChange",
       "bubbles": true,
       "cancelable": true,
-      "composed": true,
+      "composed": false,
       "docs": {
         "tags": [],
         "text": "Emitted when the checked property has changed."

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -7,6 +7,7 @@ import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
 export class DuetChoiceGroup {
   constructor() {
+    this.choiceGroupName = "duet-choice-group";
     /**
      * Direction of the choice group.
      */
@@ -61,7 +62,7 @@ export class DuetChoiceGroup {
         return;
       }
       const selectedChoice = ev.target;
-      if (selectedChoice) {
+      if (selectedChoice && selectedChoice.parentElement.classList.contains(this.choiceGroupName)) {
         this.value = selectedChoice.value;
       }
       // Prevent events from bubbling up the DOM tree in case
@@ -154,7 +155,7 @@ export class DuetChoiceGroup {
     return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } },
       h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme },
         this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
-        h("div", { class: { "duet-choice-group": true, "duet-no-stacking": !this.responsive } },
+        h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } },
           h("slot", null)))));
   }
   static get is() { return "duet-choice-group"; }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -25,7 +25,7 @@ export class DuetRangeStepper {
     this.stepIndex = 1;
     /**
      * How big is the step
-     * @default 99
+     * @default 50
      */
     this.stepSize = 50;
     /**
@@ -63,30 +63,33 @@ export class DuetRangeStepper {
     this.ariaControls = "";
     this.handleClick = (e, direction) => {
       e.preventDefault();
-      this.increment(direction);
+      this.stepIndex += direction;
+      this.clampStepIndex();
       this.handleStepClick(e);
     };
   }
   watchStepIndexStateHandler(newValue) {
-    if (newValue <= 1) {
-      this.leftBnRef.setAttribute("disabled", "");
-      this.rightBnRef.focus();
-    }
-    else {
-      this.leftBnRef.removeAttribute("disabled");
-    }
-    if (newValue >= this.total / this.stepSize) {
-      this.rightBnRef.setAttribute("disabled", "");
-      this.leftBnRef.focus();
-    }
-    else {
-      this.rightBnRef.removeAttribute("disabled");
+    if (this.element.shadowRoot.childElementCount > 0) {
+      if (newValue <= 1) {
+        this.leftBnRef.setAttribute("disabled", "");
+        this.rightBnRef.focus();
+      }
+      else {
+        this.leftBnRef.removeAttribute("disabled");
+      }
+      if (newValue >= this.total / this.stepSize) {
+        this.rightBnRef.setAttribute("disabled", "");
+        this.leftBnRef.focus();
+      }
+      else {
+        this.rightBnRef.removeAttribute("disabled");
+      }
     }
   }
   watchStepSizeStateHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
       if (this.stepIndex * newValue > this.total) {
-        this.stepIndex = this.total / newValue;
+        this.stepIndex = Math.ceil(this.total / newValue);
       }
     }
   }
@@ -102,22 +105,17 @@ export class DuetRangeStepper {
   }
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.clampStepIndex();
   }
   componentDidLoad() {
     this.watchStepIndexStateHandler(this.stepIndex);
   }
-  increment(direction) {
-    const newIndex = this.stepIndex + direction;
-    if (newIndex <= 0) {
+  clampStepIndex() {
+    if (this.stepIndex < 1) {
       this.stepIndex = 1;
     }
-    else {
-      if (newIndex * this.stepSize < this.total + this.stepSize) {
-        this.stepIndex = newIndex;
-      }
-      else if (newIndex * this.stepSize > this.total + this.stepSize) {
-        this.stepIndex = Math.floor(this.total / this.stepSize);
-      }
+    else if (this.stepIndex * this.stepSize > this.total) {
+      this.stepIndex = Math.ceil(this.total / this.stepSize);
     }
   }
   getTo() {
@@ -241,7 +239,7 @@ export class DuetRangeStepper {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "99"
+            "text": "50"
           }],
         "text": "How big is the step"
       },

package/lib/dist-custom-elements/duet-action-button.js

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

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-09ed1ffa.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-7289badb.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-d7e59b1c.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-e0a69099.js';
 
 const duetBreadcrumbCss = "*,*::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%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-3fc2d124.js';
+import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-d7e59b1c.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$2 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-e0a69099.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};