@solid-design-system/components 1.19.0 → 1.21.0

package/dist/package/components/radio-group/radio-group.js

@@ -0,0 +1,321 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { FormControlController, customErrorValidityState, valueMissingValidityState, validValidityState } from "../../internal/form.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { query, state, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import SdButtonGroup from "../../_components/button-group/button-group.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdRadioGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "label", "error-text");
+    this.customValidityMessage = "";
+    this.hasButtonGroup = false;
+    this.defaultValue = "";
+    this.invalid = false;
+    this.errorText = "";
+    this.label = "";
+    this.name = "option";
+    this.value = "";
+    this.size = "lg";
+    this.form = "";
+    this.required = false;
+    this.orientation = "vertical";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      this.invalid = true;
+      return customErrorValidityState;
+    } else if (isRequiredAndEmpty) {
+      this.invalid = true;
+      return valueMissingValidityState;
+    }
+    this.invalid = false;
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      console.log("this.customValidityMessage", this.customValidityMessage);
+      return this.customValidityMessage;
+    } else if (isRequiredAndEmpty) {
+      console.log("this.validationInput.validationMessage", this.validationInput);
+      return this.validationInput.validationMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  getAllRadios() {
+    return [...this.querySelectorAll("sd-radio, sd-radio-button")];
+  }
+  handleRadioClick(event) {
+    const target = event.target.closest("sd-radio, sd-radio-button");
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+    if (target.disabled) {
+      return;
+    }
+    this.value = target.value;
+    radios.forEach((radio) => radio.checked = radio === target);
+    if (this.value !== oldValue) {
+      this.emit("sd-change");
+      this.emit("sd-input");
+    }
+  }
+  handleKeyDown(event) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+      return;
+    }
+    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = radios.indexOf(checkedRadio) + incr;
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+    this.getAllRadios().forEach((radio) => {
+      radio.checked = false;
+      if (!this.hasButtonGroup) {
+        radio.tabIndex = -1;
+      }
+    });
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    if (!this.hasButtonGroup) {
+      radios[index].tabIndex = 0;
+      radios[index].focus();
+    } else {
+      radios[index].shadowRoot.querySelector("button").focus();
+    }
+    if (this.value !== oldValue) {
+      this.emit("sd-change");
+      this.emit("sd-input");
+    }
+    event.preventDefault();
+  }
+  handleLabelClick() {
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const radioToFocus = checked || radios[0];
+    if (radioToFocus) {
+      radioToFocus.focus();
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  async syncRadioElements() {
+    var _a, _b;
+    const radios = this.getAllRadios();
+    await Promise.all(
+      // Sync the checked state and size
+      radios.map(async (radio) => {
+        await radio.updateComplete;
+        radio.checked = radio.value === this.value;
+        radio.size = this.size;
+        radio.invalid = this.invalid;
+      })
+    );
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-radio-button");
+    if (!radios.some((radio) => radio.checked)) {
+      if (this.hasButtonGroup) {
+        const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
+        if (buttonRadio) {
+          buttonRadio.tabIndex = 0;
+        }
+      } else {
+        radios[0].tabIndex = 0;
+      }
+    }
+    if (this.hasButtonGroup) {
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-button-group");
+      if (buttonGroup) {
+        buttonGroup.disableRole = true;
+      }
+    }
+  }
+  syncRadios() {
+    if (customElements.get("sd-radio") && customElements.get("sd-radio-button")) {
+      this.syncRadioElements();
+      return;
+    }
+    if (customElements.get("sd-radio")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("sd-radio").then(() => this.syncRadios());
+    }
+    if (customElements.get("sd-radio-button")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("sd-radio-button").then(() => this.syncRadios());
+    }
+  }
+  updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach((radio) => radio.checked = radio.value === this.value);
+    this.formControlController.setValidity(this.validity.valid);
+  }
+  handleSizeChange() {
+    this.syncRadios();
+  }
+  handleInvalidChange() {
+    this.syncRadios();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedRadio();
+      this.reportValidity();
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (isRequiredAndEmpty || hasCustomValidityMessage) {
+      this.formControlController.emitInvalidEvent();
+      return false;
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  // TODO: https://github.com/solid-design-system/solid/issues/501
+  reportValidity() {
+    const isValid = this.validity.valid;
+    this.errorText = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(this.validationTimeout);
+    if (!isValid) {
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
+    }
+    return isValid;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = "") {
+    this.customValidityMessage = message;
+    this.errorText = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasErrorTextSlot = this.hasSlotController.test("error-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasErrorText = this.errorText ? true : !!hasErrorTextSlot;
+    const defaultSlot = html`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;
+    return html`<fieldset part="form-control" class="${cx(
+      "form-control form-control--radio-group border-0 p-0 m-0",
+      hasLabel && "form-control--has-label",
+      hasErrorText && "text-error",
+      {
+        /* sizes, fonts */
+        sm: "text-sm",
+        lg: "text-base"
+      }[this.size]
+    )}" role="radiogroup" aria-labelledby="label" aria-errormessage="error-text"><label part="form-control-label" id="label" class="form-control__label mb-2 hidden p-0 font-bold leading-normal text-black" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
+      "form-control-input flex",
+      this.invalid && "form-control-input--invalid text-error",
+      {
+        vertical: "form-control-input--vertical flex-col",
+        horizontal: "form-control-input--horizontal flex-row"
+      }[this.orientation]
+    )}"><div class="sr-only"><div id="error-message" aria-live="assertive">${this.errorText}</div><label class="radio-group__validation"><input type="text" class="radio-group__validation-input" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${defaultSlot}</div></fieldset>`;
+  }
+};
+SdRadioGroup.dependencies = { "sd-button-group": SdButtonGroup };
+SdRadioGroup.styles = [
+  componentStyles,
+  SolidElement.styles,
+  css`:host{display:block}.form-control-input--vertical ::slotted(sd-radio){margin-bottom:8px;display:flex}.form-control-input--vertical ::slotted(sd-radio:last-of-type){margin-bottom:0}.form-control-input--horizontal ::slotted(sd-radio){margin-right:24px}.form-control-input--horizontal ::slotted(sd-radio:last-of-type){margin-right:0}.form-control--has-label .form-control__label{display:flex}:host([required]) .form-control--has-label .form-control__label::after{content:'*';margin-left:2px}`
+];
+__decorateClass([
+  query("slot:not([name])")
+], SdRadioGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".radio-group__validation-input")
+], SdRadioGroup.prototype, "validationInput", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "hasButtonGroup", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "errorText", 2);
+__decorateClass([
+  property()
+], SdRadioGroup.prototype, "label", 2);
+__decorateClass([
+  property()
+], SdRadioGroup.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioGroup.prototype, "required", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], SdRadioGroup.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("invalid", { waitUntilFirstUpdate: true })
+], SdRadioGroup.prototype, "handleInvalidChange", 1);
+__decorateClass([
+  watch("value")
+], SdRadioGroup.prototype, "handleValueChange", 1);
+SdRadioGroup = __decorateClass([
+  customElement("sd-radio-group")
+], SdRadioGroup);
+export {
+  SdRadioGroup as default
+};

package/dist/package/internal/form.d.ts

@@ -10,6 +10,7 @@ export interface FormControlControllerOptions {
     disabled: (input: SolidFormControl) => boolean;
     reportValidity: (input: SolidFormControl) => boolean;
     setValue: (input: SolidFormControl, value: unknown) => void;
+    assumeInteractionOn: string[];
 }
 export declare class FormControlController implements ReactiveController {
     host: SolidFormControl & ReactiveControllerHost;
@@ -24,12 +25,17 @@ export declare class FormControlController implements ReactiveController {
     private handleFormData;
     private handleFormSubmit;
     private handleFormReset;
-    private handleUserInput;
+    private handleInteraction;
     private reportFormValidity;
     private setUserInteracted;
     private doAction;
+    getForm(): HTMLFormElement | null;
     reset(invoker?: HTMLInputElement | SdButton): void;
     submit(invoker?: HTMLInputElement | SdButton): void;
     setValidity(isValid: boolean): void;
     updateValidity(): void;
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
 }
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

package/dist/package/internal/form.js

@@ -1,8 +1,52 @@
 const formCollections = /* @__PURE__ */ new WeakMap();
-const userInteractedControls = /* @__PURE__ */ new WeakMap();
 const reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+const userInteractedControls = /* @__PURE__ */ new WeakMap();
+const interactions = /* @__PURE__ */ new WeakMap();
 class FormControlController {
   constructor(host, options) {
+    this.handleFormData = (event) => {
+      const disabled = this.options.disabled(this.host);
+      const name = this.options.name(this.host);
+      const value = this.options.value(this.host);
+      const isButton = this.host.tagName.toLowerCase() === "sd-button";
+      if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+        if (Array.isArray(value)) {
+          value.forEach((val) => {
+            event.formData.append(name, val.toString());
+          });
+        } else {
+          event.formData.append(name, value.toString());
+        }
+      }
+    };
+    this.handleFormSubmit = (event) => {
+      var _a;
+      const disabled = this.options.disabled(this.host);
+      const reportValidity = this.options.reportValidity;
+      if (this.form && !this.form.noValidate) {
+        (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
+          this.setUserInteracted(control, true);
+        });
+      }
+      if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    this.handleFormReset = () => {
+      this.options.setValue(this.host, this.options.defaultValue(this.host));
+      this.setUserInteracted(this.host, false);
+      interactions.set(this.host, []);
+    };
+    this.handleInteraction = (event) => {
+      const emittedEvents = interactions.get(this.host);
+      if (!emittedEvents.includes(event.type)) {
+        emittedEvents.push(event.type);
+      }
+      if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+        this.setUserInteracted(this.host, true);
+      }
+    };
     (this.host = host).addController(this);
     this.options = {
       form: (input) => {
@@ -21,26 +65,29 @@ class FormControlController {
       disabled: (input) => input.disabled ?? false,
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["sd-input"],
       ...options
     };
-    this.handleFormData = this.handleFormData.bind(this);
-    this.handleFormSubmit = this.handleFormSubmit.bind(this);
-    this.handleFormReset = this.handleFormReset.bind(this);
-    this.reportFormValidity = this.reportFormValidity.bind(this);
-    this.handleUserInput = this.handleUserInput.bind(this);
   }
   hostConnected() {
     const form = this.options.form(this.host);
     if (form) {
       this.attachForm(form);
     }
-    this.host.addEventListener("sd-input", this.handleUserInput);
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
   }
   hostDisconnected() {
     this.detachForm();
-    this.host.removeEventListener("sd-input", this.handleUserInput);
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
   }
   hostUpdated() {
+    var _a;
     const form = this.options.form(this.host);
     if (!form) {
       this.detachForm();
@@ -50,7 +97,7 @@ class FormControlController {
       this.attachForm(form);
     }
     if (this.host.hasUpdated) {
-      this.setValidity(this.host.checkValidity());
+      this.setValidity((_a = this.host) == null ? void 0 : _a.validity.valid);
     }
   }
   attachForm(form) {
@@ -86,43 +133,6 @@ class FormControlController {
     }
     this.form = void 0;
   }
-  handleFormData(event) {
-    const disabled = this.options.disabled(this.host);
-    const name = this.options.name(this.host);
-    const value = this.options.value(this.host);
-    const isButton = this.host.tagName.toLowerCase() === "sd-button";
-    if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
-      if (Array.isArray(value)) {
-        value.forEach((val) => {
-          event.formData.append(name, val.toString());
-        });
-      } else {
-        event.formData.append(name, value.toString());
-      }
-    }
-  }
-  handleFormSubmit(event) {
-    var _a;
-    const disabled = this.options.disabled(this.host);
-    const reportValidity = this.options.reportValidity;
-    if (this.form && !this.form.noValidate) {
-      (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
-        this.setUserInteracted(control, true);
-      });
-    }
-    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-  handleFormReset() {
-    this.options.setValue(this.host, this.options.defaultValue(this.host));
-    this.setUserInteracted(this.host, false);
-  }
-  async handleUserInput() {
-    await this.host.updateComplete;
-    this.setUserInteracted(this.host, true);
-  }
   reportFormValidity() {
     if (this.form && !this.form.noValidate) {
       const elements = this.form.querySelectorAll("*");
@@ -164,6 +174,10 @@ class FormControlController {
       button.remove();
     }
   }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    return this.form ?? null;
+  }
   /** Resets the form, restoring all the control to their default value */
   reset(invoker) {
     this.doAction("reset", invoker);
@@ -198,15 +212,62 @@ class FormControlController {
     }
   }
   /**
-   * Updates the form control's validity based on the current value of `host.checkValidity()`. Call this when anything
+   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
    * that affects constraint validation changes so the component receives the correct validity states.
    */
   updateValidity() {
     const host = this.host;
-    this.setValidity(host.checkValidity());
+    this.setValidity(host == null ? void 0 : host.validity.valid);
+  }
+  /**
+   * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
+   * If the `sl-invalid` event will be cancelled then the original `invalid`
+   * event (which may have been passed as argument) will also be cancelled.
+   * If no original `invalid` event has been passed then the `sl-invalid`
+   * event will be cancelled before being dispatched.
+   */
+  emitInvalidEvent(originalInvalidEvent) {
+    const slInvalidEvent = new CustomEvent("sd-invalid", {
+      bubbles: false,
+      composed: false,
+      cancelable: true,
+      detail: {}
+    });
+    if (!originalInvalidEvent) {
+      slInvalidEvent.preventDefault();
+    }
+    if (!this.host.dispatchEvent(slInvalidEvent)) {
+      originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
+    }
   }
 }
+const validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+const valueMissingValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  valueMissing: true
+});
+const customErrorValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  customError: true
+});
 export {
   FormControlController,
-  formCollections
+  customErrorValidityState,
+  formCollections,
+  validValidityState,
+  valueMissingValidityState
 };

package/dist/package/internal/solid-element.d.ts

@@ -20,6 +20,8 @@ export interface SolidFormControl extends SolidElement {
     required?: boolean;
     minlength?: number;
     maxlength?: number;
+    readonly validity?: ValidityState;
+    readonly validationMessage?: string;
     checkValidity: () => boolean;
     reportValidity: () => boolean;
     setCustomValidity: (message: string) => void;

package/dist/package/node_modules/.pnpm/{@shoelace-style_localize@3.1.0 → @shoelace-style_localize@3.1.2}/node_modules/@shoelace-style/localize/dist/index.js

@@ -50,7 +50,7 @@ let LocalizeController$1 = class LocalizeController {
   }
   getTranslationData(lang) {
     var _a, _b;
-    const locale = new Intl.Locale(lang);
+    const locale = new Intl.Locale(lang.replace(/_/g, "-"));
     const language = locale === null || locale === void 0 ? void 0 : locale.language.toLowerCase();
     const region = (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.region) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
     const primary = translations.get(`${language}-${region}`);

package/dist/package/solid-components.d.ts

@@ -13,6 +13,8 @@ export { default as SdInclude } from './components/include/include';
 export { default as SdLink } from './components/link/link';
 export { default as SdNavigationItem } from './components/navigation-item/navigation-item';
 export { default as SdPopup } from './components/popup/popup';
+export { default as SdRadio } from './components/radio/radio';
+export { default as SdRadioGroup } from './components/radio-group/radio-group';
 export { default as SdSpinner } from './components/spinner/spinner';
 export { default as SdTag } from './components/tag/tag';
 export { default as SdTeaser } from './components/teaser/teaser';

package/dist/package/solid-components.js

@@ -13,10 +13,12 @@ import { default as default13 } from "./components/include/include.js";
 import { default as default14 } from "./components/link/link.js";
 import { default as default15 } from "./components/navigation-item/navigation-item.js";
 import { default as default16 } from "./components/popup/popup.js";
-import { default as default17 } from "./components/spinner/spinner.js";
-import { default as default18 } from "./components/tag/tag.js";
-import { default as default19 } from "./components/teaser/teaser.js";
-import { default as default20 } from "./components/video/video.js";
+import { default as default17 } from "./components/radio/radio.js";
+import { default as default18 } from "./components/radio-group/radio-group.js";
+import { default as default19 } from "./components/spinner/spinner.js";
+import { default as default20 } from "./components/tag/tag.js";
+import { default as default21 } from "./components/teaser/teaser.js";
+import { default as default22 } from "./components/video/video.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 export {
@@ -36,10 +38,12 @@ export {
   default14 as SdLink,
   default15 as SdNavigationItem,
   default16 as SdPopup,
-  default17 as SdSpinner,
-  default18 as SdTag,
-  default19 as SdTeaser,
-  default20 as SdVideo,
+  default17 as SdRadio,
+  default18 as SdRadioGroup,
+  default19 as SdSpinner,
+  default20 as SdTag,
+  default21 as SdTeaser,
+  default22 as SdVideo,
   registerIconLibrary,
   unregisterIconLibrary
 };