@duetds/components 4.35.4 → 5.0.0

package/lib/collection/components/duet-pagination/duet-pagination-utils.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+export const shouldDisplayNavigation = (visibleItems, total, take) => {
+  if (visibleItems * 2 > total / take) {
+    return false;
+  }
+  return true;
+};

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

@@ -0,0 +1,61 @@
+*,
+*::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: inline-block;
+  margin: 0 auto;
+}
+
+.duet-pagination-nav {
+  position: relative;
+}
+
+.duet-pagination ::part(button) {
+  border: 0;
+}
+.duet-pagination, .duet-pagination li {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.1rem;
+  align-items: center;
+}
+.duet-pagination-item-is-active .duet-pagination-page-number {
+  border-bottom-color: inherit;
+  border-bottom-style: solid;
+  border-bottom-width: 2px;
+}
+.duet-pagination duet-button {
+  width: 30px;
+  min-width: 36px;
+  font-weight: 600;
+  text-decoration: none;
+  border-left-width: 0;
+}
+.duet-pagination-overlay {
+  position: absolute;
+  top: 1rem;
+  z-index: 300;
+  width: 100%;
+  text-align: center;
+}
+.duet-pagination.duet-pagination-is-dimmed {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,541 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, Fragment, h, Host, Prop, State, Watch } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { debounce } from "../../utils/js-utils";
+import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { shouldDisplayNavigation } from "./duet-pagination-utils";
+export class DuetPagination {
+  constructor() {
+    this.listId = createID("duet-pagination-list");
+    this.numbersStore = "";
+    /**
+     * State() variables
+     * @internal
+     */
+    this.totalPages = 10;
+    /**
+     * State() variables
+     * @internal
+     */
+    this.internalSectionIndex = 0;
+    /**
+     * Theme of the pagination.
+     */
+    this.theme = "";
+    /**
+     * Characters to use for the jump buttons.
+     */
+    this.jumpString = "...";
+    /**
+     * Variation of the paginator (compact and default supported)
+     */
+    this.variation = "default";
+    /**
+     * Default pagination labels
+     */
+    this.accessibleLabelsDefaults = {
+      en: {
+        next_page: "Next page",
+        previous_page: "Previous page",
+        first_page: "First page",
+        last_page: "Last page",
+        jump_to: "Jump to page",
+        go_to: "Go to page",
+        description: "You may use arrow keys to select page number, or enter a page number when this element is in focus to jump to a page",
+        pagination_label: "Pagination, choose a number to jump to a page",
+        prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate",
+        next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate",
+      },
+      fi: {
+        next_page: "Seuraava sivu",
+        previous_page: "Edellinen sivu",
+        first_page: "Ensimmäinen sivu",
+        last_page: "Viimeinen sivu",
+        jump_to: "Siirry sivulle",
+        go_to: "Siirry sivulle",
+        description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen, tai kirjoittaa sivunumeron, jos tämä elementti on aktiivinen, siirtymään sivulle",
+        pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle",
+        prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
+        next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
+      },
+      sv: {
+        next_page: "Nästa sida",
+        previous_page: "Föregående sida",
+        first_page: "Första sidan",
+        last_page: "Sista sidan",
+        jump_to: "Hoppa till sida",
+        go_to: "Hoppa till sida",
+        description: "Du kan använda piltangenterna för att välja sida, eller skriva in sida när elementet är i fokus för att hoppa till en sida",
+        pagination_label: "Sidutning, välj en siffra för att hoppa till en sida",
+        prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
+        next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+    /**
+     * The size of the take, when paginating.
+     */
+    this.take = 5;
+    /**
+     * Amount of visible page numbers to show
+     */
+    this.visibleItems = 5;
+    /**
+     * The total size of the paginating data
+     */
+    this.total = 1000;
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    /**
+     * The current page
+     */
+    this.current = 1;
+    /**
+     * Private methods.
+     */
+    // called from the watcher and used to make sure any changed to current also updates the internal section index
+    this.actionChain = async (after, before) => {
+      if (after === 0) {
+        this.current = 1;
+      }
+      else if (before !== after) {
+        const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+        if (calculatedSectionIndex !== this.internalSectionIndex) {
+          this.internalSectionIndex = calculatedSectionIndex;
+          await this.setFocus();
+        }
+      }
+    };
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce((ev, passedPage) => {
+      const page = Number(passedPage || this.current);
+      this.duetPageChange.emit({
+        component: "duet-pagination",
+        from: page * this.take,
+        to: page * this.take + this.take,
+        current: page,
+        take: this.take,
+        type: "page",
+        originalEvent: ev,
+      });
+    }, 500);
+    // this will return the entered number, or the current page if the user presses enter
+    this.getEnteredNumber = debounce(ev => {
+      this.emitPageEvent(ev, this.numbersStore);
+      this.current = Number(this.numbersStore);
+      this.numbersStore = "";
+      this.duetPageChange.emit({
+        component: "duet-pagination",
+        from: this.current * this.take,
+        to: this.current * this.take + this.take,
+        current: this.current,
+        take: this.take,
+        type: "jump",
+        originalEvent: ev,
+      });
+    }, 500);
+  }
+  watchStateHandler(newValue, oldValue) {
+    this.actionChain(newValue, oldValue);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    // we want to keep the internal current index in sync with the current prop, but take advantage of the multiple with 0 for the first iteration
+    this.internalSectionIndex = Math.ceil(this.current / this.visibleItems) - 1;
+    this.calculatePageTake();
+    inheritGlobalTheme(this);
+  }
+  componentWillRender() {
+    if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
+      this.calculatePageTake();
+    }
+  }
+  componentDidRender() {
+    this.setFocus();
+  }
+  //get totalpages from visible and total
+  calculatePageTake() {
+    this.totalPages = Math.ceil(this.total / this.take);
+  }
+  //set update current when mouse click on page number
+  async onMouseHandler(e, dir) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.current = this.current + dir;
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    let next = this.current;
+    // handle a11y based keyboard navigation for left/right/up/down
+    if (isArrowLeftKey(e) || isArrowUpKey(e)) {
+      next--;
+    }
+    if (isArrowRightKey(e) || isArrowDownKey(e)) {
+      next++;
+    }
+    if (isArrowKey(e)) {
+      if (next <= this.totalPages) {
+        this.current = next;
+        this.emitPageEvent(e);
+      }
+    }
+    //handle the jump feature, where numbers can be entered
+    if (isNumber(e) && this.shouldDisplayNavigation()) {
+      this.numbersStore = this.numbersStore + e.key;
+      if (Number(this.numbersStore) > this.totalPages) {
+        this.numbersStore = this.totalPages + "";
+      }
+      this.getEnteredNumber(e);
+    }
+  }
+  // utility to set focus on active button
+  async setFocus() {
+    const currentDomElement = this.nativeNav.querySelector(`li.duet-pagination-item-is-active duet-button`);
+    currentDomElement && (await currentDomElement.setFocus());
+  }
+  //handles click on page numbers
+  pageClickHandler(e) {
+    e.preventDefault();
+    const clickedId = Number(e.target.getAttribute("data-id"));
+    this.current = clickedId;
+    this.emitPageEvent({}, clickedId);
+  }
+  //handles click on the next section buttons
+  sectionClickHandler(e, direction) {
+    e.preventDefault();
+    let next = this.internalSectionIndex + direction;
+    if (next >= this.totalPages / this.take) {
+      next = this.totalPages / this.take - 1;
+    }
+    const newSection = next;
+    this.internalSectionIndex = newSection >= 0 ? newSection : 0;
+  }
+  //handles click on the jump (1)button
+  jumpToStart(e) {
+    e.preventDefault();
+    this.internalSectionIndex = 0;
+    this.current = 1;
+  }
+  //handles click on the jump (total) button
+  jumpToEnd(e) {
+    e.preventDefault();
+    this.internalSectionIndex = this.totalPages / this.take - 1;
+    this.current = this.totalPages;
+  }
+  // render the individual page numbers
+  renderPageNumbers() {
+    const items = [];
+    let i = this.internalSectionIndex * this.visibleItems;
+    do {
+      i++;
+      if (i > this.totalPages) {
+        break;
+      }
+      items.push(h("li", { class: {
+          "duet-pagination-item": true,
+          "duet-pagination-item-is-active": i === this.current,
+        }, role: "menuitem" },
+        h("duet-button", { class: {
+            "duet-pagination-link": true,
+          }, color: i !== this.current ? "secondary" : "primary", "data-id": i, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.accessibleLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) },
+          h("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
+    } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
+    return items;
+  }
+  shouldDisplayNavigation() {
+    if (this.variation !== "compact") {
+      return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    }
+    return false;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) },
+      h("nav", { role: "navigation", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+          "duet-pagination-nav": true,
+          [`duet-pagination-variation-${this.variation}`]: true,
+        } },
+        this.numbersStore !== "" && (h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" },
+          h("duet-badge", null,
+            "jump to page : ",
+            this.numbersStore))),
+        h("ol", { id: this.listId, class: {
+            "duet-pagination": true,
+            "duet-pagination-is-dimmed": this.numbersStore !== "",
+          }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description },
+          h("li", { class: {
+              "duet-pagination-page-button": true,
+              "duet-pagination-button-first": true,
+            }, role: "menuitem", part: "navigation-arrow" },
+            h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small" })),
+          this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null,
+            h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" },
+              h("duet-button", { class: "duet-pagination-link", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) },
+                h("div", { class: "duet-pagination-page-number" }, "1"))),
+            h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" },
+              h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) },
+                h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))),
+          this.renderPageNumbers(),
+          this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (h(Fragment, null,
+            h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" },
+              h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) },
+                h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))),
+            h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" },
+              h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) },
+                h("div", { class: "duet-pagination-page-number" }, this.totalPages))))),
+          h("li", { class: {
+              "duet-pagination-page-button": true,
+              "duet-pagination-button-last": true,
+            }, role: "menuitem", part: "navigation-arrow" },
+            h("duet-action-button", { disabled: this.current === this.totalPages &&
+                this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, class: "duet-date-dialog-next", "aria-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-arrow-right-small" }))))));
+  }
+  static get is() { return "duet-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-pagination.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-pagination.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the pagination."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "jumpString": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Characters to use for the jump buttons."
+      },
+      "attribute": "jump-string",
+      "reflect": false,
+      "defaultValue": "\"...\""
+    },
+    "variation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetPaginationVariation",
+        "resolved": "\"compact\" | \"default\"",
+        "references": {
+          "DuetPaginationVariation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variation of the paginator (compact and default supported)"
+      },
+      "attribute": "variation",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
+    "accessibleLabelsDefaults": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject",
+        "resolved": "DuetLangObject",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default pagination labels"
+      },
+      "defaultValue": "{\n    en: {\n      next_page: \"Next page\",\n      previous_page: \"Previous page\",\n      first_page: \"First page\",\n      last_page: \"Last page\",\n      jump_to: \"Jump to page\",\n      go_to: \"Go to page\",\n      description:\n        \"You may use arrow keys to select page number, or enter a page number when this element is in focus to jump to a page\",\n      pagination_label: \"Pagination, choose a number to jump to a page\",\n      prev_section: \"Show previous {0} page numbers, screen reader user should use arrowkeys to navigate\",\n      next_section: \"Show next {0} page numbers, screen reader user should use arrowkeys to navigate\",\n    },\n    fi: {\n      next_page: \"Seuraava sivu\",\n      previous_page: \"Edellinen sivu\",\n      first_page: \"Ensimm\u00E4inen sivu\",\n      last_page: \"Viimeinen sivu\",\n      jump_to: \"Siirry sivulle\",\n      go_to: \"Siirry sivulle\",\n      description:\n        \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen, tai kirjoittaa sivunumeron, jos t\u00E4m\u00E4 elementti on aktiivinen, siirtym\u00E4\u00E4n sivulle\",\n      pagination_label: \"Sivutus, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      prev_section: \"N\u00E4yt\u00E4 edelliset {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n      next_section: \"N\u00E4yt\u00E4 seuraavat {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n    },\n    sv: {\n      next_page: \"N\u00E4sta sida\",\n      previous_page: \"F\u00F6reg\u00E5ende sida\",\n      first_page: \"F\u00F6rsta sidan\",\n      last_page: \"Sista sidan\",\n      jump_to: \"Hoppa till sida\",\n      go_to: \"Hoppa till sida\",\n      description:\n        \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida, eller skriva in sida n\u00E4r elementet \u00E4r i fokus f\u00F6r att hoppa till en sida\",\n      pagination_label: \"Sidutning, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      prev_section: \"Visa f\u00F6reg\u00E5ende {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n      next_section: \"Visa n\u00E4sta {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n    },\n  }"
+    },
+    "accessibleLabels": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, string>",
+        "resolved": "{ [x: string]: string; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default pagination labels"
+      },
+      "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
+    },
+    "take": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the take, when paginating."
+      },
+      "attribute": "take",
+      "reflect": false,
+      "defaultValue": "5"
+    },
+    "visibleItems": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Amount of visible page numbers to show"
+      },
+      "attribute": "visible-items",
+      "reflect": false,
+      "defaultValue": "5"
+    },
+    "total": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total size of the paginating data"
+      },
+      "attribute": "total",
+      "reflect": false,
+      "defaultValue": "1000"
+    },
+    "ariaControls": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to indicate which dom element with ID this element controls"
+      },
+      "attribute": "accessible-controls",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "current": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current page"
+      },
+      "attribute": "current",
+      "reflect": false,
+      "defaultValue": "1"
+    }
+  }; }
+  static get states() { return {
+    "numbersStore": {},
+    "totalPages": {},
+    "internalSectionIndex": {}
+  }; }
+  static get events() { return [{
+      "method": "duetPageChange",
+      "name": "duetPageChange",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted a page selection has been made"
+      },
+      "complexType": {
+        "original": "DuetPaginationPageEvent",
+        "resolved": "{ originalEvent?: Event; component: \"duet-pagination\"; current: number; take: number; from: number; to: number; type: \"page\" | \"jump\"; }",
+        "references": {
+          "DuetPaginationPageEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "current",
+      "methodName": "watchStateHandler"
+    }]; }
+}

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

@@ -0,0 +1,49 @@
+*,
+*::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: inline-block;
+  margin: 0 auto;
+}
+
+.duet-range-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  align-items: baseline;
+  justify-content: center;
+  min-width: 30px;
+  min-height: 30px;
+  font-weight: 600;
+  text-decoration: none;
+  border-left-width: 0;
+}
+
+.duet-range-stepper {
+  white-space: nowrap;
+}
+.duet-range-stepper .duet-range-step-counter {
+  font-weight: 600;
+  color: #00294d;
+}
+.duet-range-stepper ::part(button) {
+  border: 0;
+}