@solid-design-system/components 1.25.0 → 1.27.0

package/dist/package/components/icon/library.system.d.ts

@@ -15,6 +15,9 @@ export declare const icons: {
     pause: string;
     risk: string;
     start: string;
+    'confirm-circle': string;
+    warning: string;
+    'exclamation-circle': string;
 };
 declare const systemLibrary: IconLibrary;
 export default systemLibrary;

package/dist/package/components/icon/library.system.js

@@ -75,7 +75,13 @@ const icons = {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
       <path d="m57.44 29.76-37.333-24A2.667 2.667 0 0 0 16 8v48a2.668 2.668 0 0 0 2.667 2.666 2.672 2.672 0 0 0 1.45-.431l-.01.005 37.333-24a2.67 2.67 0 0 0 1.192-2.221c0-.923-.47-1.74-1.184-2.216l-.01-.006.002-.037ZM21.333 51.112V12.89l29.734 19.112-29.734 19.11Z"/>
     </svg>
-  `
+  `,
+  "confirm-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/><path d="M15.843 7.473a.999.999 0 0 0-1.367.329l-.002.004-3.667 6.223-1.757-1.753a1 1 0 0 0-1.413 1.414l-.001-.001 2.667 2.667a.997.997 0 0 0 .695.31h.128c.314-.042.578-.223.731-.479l.003-.005 4.333-7.333a1 1 0 0 0-.345-1.374l-.005-.003v.001Z"/></svg>`,
+  warning: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.893 2.55295C12.725 2.22395 12.388 2.00195 12 2.00195C11.612 2.00195 11.275 2.22295 11.109 2.54695L2.10598 20.553C2.03998 20.683 2.00098 20.837 2.00098 21C2.00098 21.552 2.44798 21.999 2.99998 22H21C21.552 21.999 21.999 21.552 21.999 21C21.999 20.837 21.96 20.683 21.891 20.548L21.894 20.554L12.893 2.55295ZM4.61698 20L12 5.23695L19.383 20H4.61698Z"/><path d="M11 10.667V15C11 15.552 11.448 16 12 16C12.552 16 13 15.552 13 15V10.667C13 10.115 12.552 9.66695 12 9.66695C11.448 9.66695 11 10.115 11 10.667Z"/><path d="M13 18C13 18.552 12.552 19 12 19C11.448 19 11 18.552 11 18C11 17.448 11.448 17 12 17C12.552 17 13 17.448 13 18Z"/></svg>`,
+  "exclamation-circle": `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17C11 16.448 11.448 16 12 16C12.552 16 13 16.448 13 17Z"/><path d="M12 6C11.448 6 11 6.448 11 7V13C11 13.552 11.448 14 12 14C12.552 14 13 13.552 13 13V7C13 6.448 12.552 6 12 6Z"/><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20Z"/></svg>`
 };
 const systemLibrary = {
   name: "system",

package/dist/package/components/notification/notification.d.ts

@@ -0,0 +1,31 @@
+import SolidElement from '../../internal/solid-element.js';
+export default class SdNotification extends SolidElement {
+    private autoHideTimeout;
+    private readonly localize;
+    base: HTMLElement;
+    open: boolean;
+    closable: boolean;
+    variant: 'info' | 'success' | 'error' | 'warning';
+    toastStack: 'top-right' | 'bottom-center';
+    duration: number;
+    durationIndicator: boolean;
+    private remainingDuration;
+    private startTime;
+    firstUpdated(): void;
+    private startAutoHide;
+    private onHover;
+    private onHoverEnd;
+    private handleCloseClick;
+    handleOpenChange(): Promise<void>;
+    handleDurationChange(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toast(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-notification': SdNotification;
+    }
+}

package/dist/package/components/notification/notification.js

@@ -0,0 +1,211 @@
+import { stopAnimations, animateTo } from "../../internal/animate.js";
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
+import { LocalizeController } from "../../utilities/localize.js";
+import { query, property } from "lit/decorators.js";
+import { waitForEvent } from "../../internal/event.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+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;
+};
+const toastStackDefault = Object.assign(document.createElement("div"), {
+  className: "sd-toast-stack sd-toast-stack--top-right"
+});
+const toastStackBottomCenter = Object.assign(document.createElement("div"), {
+  className: "sd-toast-stack sd-toast-stack--bottom-center"
+});
+let SdNotification = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = false;
+    this.variant = "info";
+    this.toastStack = "top-right";
+    this.duration = Infinity;
+    this.durationIndicator = false;
+    this.remainingDuration = this.duration;
+    this.startTime = Date.now();
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  startAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    this.startTime = Date.now();
+    this.remainingDuration = this.duration;
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  onHover() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.duration < Infinity) {
+      this.remainingDuration -= Date.now() - this.startTime;
+    }
+  }
+  onHoverEnd() {
+    this.startTime = Date.now();
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => {
+        this.hide();
+      }, this.remainingDuration);
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("sd-show");
+      if (this.duration < Infinity) {
+        this.startAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "notification.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("sd-after-show");
+    } else {
+      this.emit("sd-hide");
+      clearTimeout(this.autoHideTimeout);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "notification.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("sd-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.startAutoHide();
+  }
+  /** Shows the notification. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sd-after-show");
+  }
+  /** Hides the notification */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sd-after-hide");
+  }
+  /**
+   * Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by
+   * calling this method again. The returned promise will resolve after the notification is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      const toastStack = this.toastStack === "bottom-center" ? toastStackBottomCenter : toastStackDefault;
+      if (toastStack.parentElement === null) {
+        document.body.append(toastStack);
+      }
+      toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "sd-after-hide",
+        () => {
+          toastStack.removeChild(this);
+          resolve();
+          if (toastStack.querySelector("sd-notification") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return html`<div part="base" class="${cx("w-full overflow-hidden flex items-stretch relative m-2")}" role="alert" id="notification" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}"><slot name="icon" part="icon" class="${cx(
+      "min-w-min flex items-center px-3 justify-center",
+      {
+        info: "bg-info",
+        success: "bg-success",
+        warning: "bg-warning",
+        error: "bg-error"
+      }[this.variant]
+    )}"><sd-icon name="${{
+      info: "info-circle",
+      success: "confirm-circle",
+      warning: "exclamation-circle",
+      error: "warning"
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-icon></slot><div part="content" class="${cx(
+      "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
+      "border-solid border-[1px] border-l-0 border-neutral-400"
+    )}"><slot part="message" class="block w-full pl-3 py-2" aria-live="polite"></slot>${this.closable ? html`<sd-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" label="${this.localize.term("close")}" @click="${this.handleCloseClick}"><sd-icon name="close" library="system" color="currentColor"></sd-icon></sd-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute bg-neutral-400"></div>` : ""}</div>`;
+  }
+};
+SdNotification.styles = [
+  componentStyles,
+  SolidElement.styles,
+  css`:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
+];
+__decorateClass([
+  query('[part~="base"]')
+], SdNotification.prototype, "base", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNotification.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdNotification.prototype, "closable", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdNotification.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "toast-stack" })
+], SdNotification.prototype, "toastStack", 2);
+__decorateClass([
+  property({ type: Number })
+], SdNotification.prototype, "duration", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "duration-indicator" })
+], SdNotification.prototype, "durationIndicator", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SdNotification.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], SdNotification.prototype, "handleDurationChange", 1);
+SdNotification = __decorateClass([
+  customElement("sd-notification")
+], SdNotification);
+setDefaultAnimation("notification.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("notification.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+export {
+  SdNotification as default
+};

package/dist/package/components/switch/switch.d.ts

@@ -0,0 +1,37 @@
+import SolidElement from '../../internal/solid-element';
+import type { SolidFormControl } from '../../internal/solid-element';
+export default class SdSwitch extends SolidElement implements SolidFormControl {
+    private readonly formControlController;
+    input: HTMLInputElement;
+    title: string;
+    name: string;
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+    form: string;
+    required: boolean;
+    get validity(): ValidityState;
+    firstUpdated(): void;
+    private handleClick;
+    private handleBlur;
+    private handleInput;
+    private handleInvalid;
+    private handleFocus;
+    handleDisabledChange(): void;
+    handleStateChange(): void;
+    click(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-switch': SdSwitch;
+    }
+}

package/dist/package/components/switch/switch.js

@@ -0,0 +1,162 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { defaultValue } from "../../internal/default-value.js";
+import { FormControlController } from "../../internal/form.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { query, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import cx from "classix";
+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 SdSwitch = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.title = "";
+    this.name = "";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.emit("sd-change");
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleInput() {
+    this.emit("sd-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleStateChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns true when valid and false when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows a validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    return html`<label part="base" class="${cx(
+      "group flex items-center text-base leading-normal text-black cursor-pointer",
+      this.disabled && "hover:cursor-not-allowed"
+    )}"><input id="input" class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.checked ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"}" class="${cx(
+      `relative flex flex-initial items-center justify-center border rounded-full h-4 w-8 transition-colors ease duration-100
+            peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
+            peer-focus-visible:outline-primary`,
+      this.disabled && this.checked && "border-neutral-500 bg-neutral-500" || this.disabled && "border-neutral-500" || this.checked && "border-accent bg-accent hover:bg-accent-550 group-hover:bg-accent-550" || "border-neutral-800 bg-white hover:bg-neutral-200 group-hover:bg-neutral-200"
+    )}"><span id="thumb" part="thumb" class="${cx(
+      "w-2.5 h-2.5 rounded-full transition-transform ease-in-out duration-200",
+      this.checked && "translate-x-2 bg-white" || this.disabled && this.checked && "bg-white" || this.disabled && "-translate-x-2 bg-neutral-500" || "bg-neutral-800 -translate-x-2"
+    )}"></span> </span><span part="label" id="label" class="${cx(
+      "select-none inline-block ml-2 text-black",
+      this.disabled && "text-neutral-500" || "text-neutral-800"
+    )}"><slot></slot></span></label>`;
+  }
+};
+SdSwitch.styles = [
+  SolidElement.styles,
+  css`:host{display:block}:host(:focus-visible){outline:0}:host([required]) #label::after{content:' *'}:host([data-user-invalid]) #label{color:rgb(var(--sd-color-error,204 25 55))}:host([data-user-invalid]) #control{border-color:rgb(var(--sd-color-error,204 25 55));background-color:rgb(var(--sd-color-error,204 25 55))}:host([data-user-invalid]) #thumb{background-color:rgb(var(--sd-white,255 255 255))}:host([data-user-invalid]) #input:hover~#control{background-color:rgb(var(--sd-color-error-400,172 25 56))}`
+];
+__decorateClass([
+  query("input")
+], SdSwitch.prototype, "input", 2);
+__decorateClass([
+  property()
+], SdSwitch.prototype, "title", 2);
+__decorateClass([
+  property()
+], SdSwitch.prototype, "name", 2);
+__decorateClass([
+  property()
+], SdSwitch.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdSwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdSwitch.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], SdSwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdSwitch.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdSwitch.prototype, "required", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdSwitch.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch(["checked"], { waitUntilFirstUpdate: true })
+], SdSwitch.prototype, "handleStateChange", 1);
+SdSwitch = __decorateClass([
+  customElement("sd-switch")
+], SdSwitch);
+export {
+  SdSwitch as default
+};

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

@@ -16,10 +16,12 @@ export { default as SdInclude } from './components/include/include';
 export { default as SdInput } from './components/input/input';
 export { default as SdLink } from './components/link/link';
 export { default as SdNavigationItem } from './components/navigation-item/navigation-item';
+export { default as SdNotification } from './components/notification/notification';
 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 SdSwitch } from './components/switch/switch';
 export { default as SdTag } from './components/tag/tag';
 export { default as SdTeaser } from './components/teaser/teaser';
 export { default as SdTooltip } from './components/tooltip/tooltip';

package/dist/package/solid-components.js

@@ -16,14 +16,16 @@ import { default as default16 } from "./components/include/include.js";
 import { default as default17 } from "./components/input/input.js";
 import { default as default18 } from "./components/link/link.js";
 import { default as default19 } from "./components/navigation-item/navigation-item.js";
-import { default as default20 } from "./components/popup/popup.js";
-import { default as default21 } from "./components/radio/radio.js";
-import { default as default22 } from "./components/radio-group/radio-group.js";
-import { default as default23 } from "./components/spinner/spinner.js";
-import { default as default24 } from "./components/tag/tag.js";
-import { default as default25 } from "./components/teaser/teaser.js";
-import { default as default26 } from "./components/tooltip/tooltip.js";
-import { default as default27 } from "./components/video/video.js";
+import { default as default20 } from "./components/notification/notification.js";
+import { default as default21 } from "./components/popup/popup.js";
+import { default as default22 } from "./components/radio/radio.js";
+import { default as default23 } from "./components/radio-group/radio-group.js";
+import { default as default24 } from "./components/spinner/spinner.js";
+import { default as default25 } from "./components/switch/switch.js";
+import { default as default26 } from "./components/tag/tag.js";
+import { default as default27 } from "./components/teaser/teaser.js";
+import { default as default28 } from "./components/tooltip/tooltip.js";
+import { default as default29 } from "./components/video/video.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 export {
@@ -46,14 +48,16 @@ export {
   default17 as SdInput,
   default18 as SdLink,
   default19 as SdNavigationItem,
-  default20 as SdPopup,
-  default21 as SdRadio,
-  default22 as SdRadioGroup,
-  default23 as SdSpinner,
-  default24 as SdTag,
-  default25 as SdTeaser,
-  default26 as SdTooltip,
-  default27 as SdVideo,
+  default20 as SdNotification,
+  default21 as SdPopup,
+  default22 as SdRadio,
+  default23 as SdRadioGroup,
+  default24 as SdSpinner,
+  default25 as SdSwitch,
+  default26 as SdTag,
+  default27 as SdTeaser,
+  default28 as SdTooltip,
+  default29 as SdVideo,
   registerIconLibrary,
   unregisterIconLibrary
 };