@duetds/components 6.0.2 → 6.0.4

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

@@ -0,0 +1,396 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { d as debounce } from './p-0b3f675e.js';
+import { l as isArrowKey, m as isNumber, h as isArrowLeftKey, e as isArrowUpKey, j as isArrowRightKey, f as isArrowDownKey } from './p-d8549efe.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$7 } from './p-0a928609.js';
+import { d as defineCustomElement$6 } from './p-ef8eff22.js';
+import { d as defineCustomElement$5 } from './p-e294c0fb.js';
+import { d as defineCustomElement$4 } from './p-7739604d.js';
+import { d as defineCustomElement$3 } from './p-3d987b87.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const shouldDisplayNavigation = (visibleItems, total, take) => {
+  if (visibleItems * 2 > total / take) {
+    return false;
+  }
+  return true;
+};
+
+const duetPaginationCss = "*,*::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}";
+
+const DuetPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetPageChange = createEvent(this, "duetPageChange", 3);
+    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";
+    /**
+     * Described By id
+     */
+    this.accessibleDescribedBy = undefined;
+    /**
+     * 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;
+    /**
+     * 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();
+        }
+      }
+      return true;
+    };
+    //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,
+      });
+    }, 100);
+    // 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);
+  }
+  watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
+    this.calculatePageTake();
+    return true;
+  }
+  watchStateHandler(newValue, oldValue) {
+    return 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;
+    this.emitPageEvent(e);
+  }
+  //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;
+    const takePerVisibleItems = this.take * this.visibleItems;
+    if (next * takePerVisibleItems > this.total) {
+      next = this.internalSectionIndex;
+    }
+    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;
+    this.emitPageEvent(e);
+  }
+  //handles click on the jump (total) button
+  jumpToEnd(e) {
+    e.preventDefault();
+    this.internalSectionIndex = Math.ceil(this.totalPages / this.take - 1);
+    this.current = this.totalPages;
+    this.emitPageEvent(e);
+  }
+  // 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.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, 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 duet-pagination-link-jump-back", "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 duet-pagination-link-dots-back", "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.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "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 duet-pagination-link-jump-forward", "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" }))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "total": ["watchPropTotalHandler"],
+    "current": ["watchStateHandler"]
+  }; }
+  static get style() { return duetPaginationCss; }
+}, [1, "duet-pagination", {
+    "theme": [1025],
+    "jumpString": [1, "jump-string"],
+    "variation": [1],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleLabelsDefaults": [16],
+    "accessibleLabels": [16],
+    "take": [2],
+    "visibleItems": [2, "visible-items"],
+    "total": [2],
+    "ariaControls": [1, "accessible-controls"],
+    "current": [1026],
+    "numbersStore": [32],
+    "totalPages": [32],
+    "internalSectionIndex": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-pagination", "duet-action-button", "duet-badge", "duet-button", "duet-icon", "duet-spinner", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetPagination$1);
+      }
+      break;
+    case "duet-action-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetPagination = DuetPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetPagination, defineCustomElement };

package/lib/dist-custom-elements/duet-paragraph.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetParagraph extends Components.DuetParagraph, HTMLElement {}
+export const DuetParagraph: {
+  prototype: DuetParagraph;
+  new (): DuetParagraph;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetParagraph$1, d as defineCustomElement$1 } from './p-213ef84c.js';
+
+const DuetParagraph = DuetParagraph$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetParagraph, defineCustomElement };

package/lib/dist-custom-elements/duet-progress.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetProgress extends Components.DuetProgress, HTMLElement {}
+export const DuetProgress: {
+  prototype: DuetProgress;
+  new (): DuetProgress;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetProgress$1, d as defineCustomElement$1 } from './p-acdba2db.js';
+
+const DuetProgress = DuetProgress$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetProgress, defineCustomElement };

package/lib/dist-custom-elements/duet-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetRadioGroup extends Components.DuetRadioGroup, HTMLElement {}
+export const DuetRadioGroup: {
+  prototype: DuetRadioGroup;
+  new (): DuetRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-radio-group.js

@@ -0,0 +1,216 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
+import { d as defineCustomElement$6 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$5 } from './p-e4d5fbc0.js';
+import { d as defineCustomElement$4 } from './p-7739604d.js';
+import { d as defineCustomElement$3 } from './p-88511d7a.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetRadioGroupCss = "*.sc-duet-radio-group,*.sc-duet-radio-group::after,*.sc-duet-radio-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-radio-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-radio-group-h .duet-radio-group.sc-duet-radio-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-radio-group-h .duet-radio-group.sc-duet-radio-group{display:flex}}.horizontal.sc-duet-radio-group-h .duet-radio-group.duet-no-stacking.sc-duet-radio-group{display:flex}.deut-radio-group.sc-duet-radio-group{width:100%}";
+
+const DuetRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Direction of the radio group.
+     */
+    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";
+    /**
+     * 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;
+    /**
+     * 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.
+   */
+  async connectedCallback() {
+    const el = this.element;
+    if (this.value === undefined) {
+      const radio = findCheckedOption(el, "duet-radio");
+      if (radio !== undefined) {
+        await radio.componentOnReady();
+        if (this.value === undefined) {
+          this.value = radio.value;
+        }
+      }
+    }
+    this.mutationO = watchForOptions(el, "duet-radio", newOption => {
+      if (newOption !== undefined) {
+        newOption.componentOnReady().then(() => {
+          this.value = newOption.value;
+        });
+      }
+      else {
+        this.updateRadios();
+      }
+    });
+    this.updateRadios();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Local methods.
+   */
+  async updateRadios() {
+    /**
+     * Make sure we get all radios first so values are up to date prior
+     * to caching the radio group value
+     */
+    const radios = Array.from(this.element.querySelectorAll("duet-radio"));
+    const { value } = this;
+    let hasChecked = false;
+    // Walk the DOM in reverse order, since the last selected one wins
+    for (const radio of radios) {
+      radio.name = this.name;
+      radio.groupDisabled = this.disabled;
+      radio.groupDirection = this.direction;
+      radio.groupResponsive = this.responsive;
+      if (!hasChecked && radio.value === value) {
+        // Correct value for this radio, but this radio isn't checked yet
+        // and we haven't found a checked yet
+        hasChecked = true;
+        radio.checked = true;
+      }
+      else {
+        // This radio doesn't have the correct value or the radio group has been already checked
+        radio.checked = false;
+      }
+    }
+    // Reset value if
+    if (!hasChecked) {
+      this.value = undefined;
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    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-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "name": ["updateRadios"],
+    "value": ["updateRadios"],
+    "disabled": ["updateRadios"],
+    "direction": ["updateRadios"],
+    "responsive": ["updateRadios"]
+  }; }
+  static get style() { return duetRadioGroupCss; }
+}, [6, "duet-radio-group", {
+    "direction": [1],
+    "margin": [1],
+    "theme": [1025],
+    "error": [1],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "name": [1],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "caption": [1],
+    "responsive": [4],
+    "value": [1537],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-radio-group", "duet-caption", "duet-fieldset", "duet-icon", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetRadioGroup$1);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-fieldset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetRadioGroup = DuetRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetRadioGroup, defineCustomElement };

package/lib/dist-custom-elements/duet-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetRadio extends Components.DuetRadio, HTMLElement {}
+export const DuetRadio: {
+  prototype: DuetRadio;
+  new (): DuetRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;