@solid-design-system/components 3.23.4 → 4.0.0-next.0

package/dist/package/components/brandshape/brandshape.js

@@ -1,148 +0,0 @@
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { query, property, state } from "lit/decorators.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;
-};
-let SdBrandshape = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "primary";
-    this.shapes = ["top", "middle", "bottom"];
-    this.componentBreakpoint = 0;
-  }
-  getSvg(breakpoint, shape) {
-    return {
-      0: this.smallSvg(shape),
-      414: this.mediumSvg(shape),
-      640: this.largeSvg(shape)
-    }[breakpoint];
-  }
-  largeSvg(shape) {
-    return shape === "top" ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`;
-  }
-  mediumSvg(shape) {
-    return shape === "top" ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`;
-  }
-  smallSvg(shape) {
-    return shape === "top" ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`;
-  }
-  setBreakpoint() {
-    switch (true) {
-      case this.containerElem.clientWidth <= 414:
-        this.componentBreakpoint = 0;
-        break;
-      case this.containerElem.clientWidth < 640:
-        this.componentBreakpoint = 414;
-        break;
-      default:
-        this.componentBreakpoint = 640;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.resizeObserver = new ResizeObserver(() => this.setBreakpoint());
-    this.updateComplete.then(() => {
-      this.setBreakpoint();
-      this.resizeObserver.observe(this.containerElem);
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.containerElem);
-  }
-  renderTopBrandshape() {
-    return html`<div class="relative" part="shape-top">${this.getSvg(this.componentBreakpoint, "top")} ${this.renderWhitespaceFix("top")}</div>`;
-  }
-  renderMiddleBrandshape() {
-    return html`<div class="${cx(
-      { 0: "px-6 py-4", 414: "px-10 py-8", 640: "px-10 py-8" }[this.componentBreakpoint],
-      "w-full block relative"
-    )}"><div part="shape-middle" class="${cx(
-      {
-        "neutral-100": "bg-neutral-100",
-        primary: "bg-primary",
-        white: "bg-white",
-        "border-white": "bg-transparent",
-        "border-primary": "bg-transparent",
-        image: "bg-transparent"
-      }[this.variant],
-      "w-full block absolute h-full top-0 left-0 z-0"
-    )}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`;
-  }
-  renderBottomBrandshape() {
-    return html`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint, "bottom")}${this.renderWhitespaceFix("bottom")}</div>`;
-  }
-  /**
-   * Renders a small line to prevent whitespace between the svg and the div of the middle brandshape.
-   */
-  renderWhitespaceFix(position) {
-    return html`<div class="${cx(
-      {
-        "neutral-100": "bg-neutral-100",
-        primary: "bg-primary",
-        white: "bg-white",
-        "border-white": "bg-transparent",
-        "border-primary": "bg-transparent",
-        image: "bg-transparent"
-      }[this.variant],
-      { top: "bottom-0", bottom: "top-0" }[position],
-      "block absolute left-0 w-full h-[1px]"
-    )}"></div>`;
-  }
-  renderStylizedVariant() {
-    return html`<div part="stylized-container" class="w-full overflow-hidden"><slot class="${cx(this.variant !== "image" && "hidden")}" name="image"></slot></div>`;
-  }
-  renderShapes() {
-    return html`${this.shapes.includes("top") ? this.renderTopBrandshape() : ""} ${this.shapes.includes("middle") ? this.renderMiddleBrandshape() : ""} ${this.shapes.includes("bottom") ? this.renderBottomBrandshape() : ""}`;
-  }
-  render() {
-    const isStylizedVariant = this.variant.startsWith("border-") || this.variant === "image";
-    return html`<div class="${cx(
-      {
-        "neutral-100": "fill-neutral-100",
-        primary: "fill-primary",
-        white: "fill-white",
-        "border-white": "fill-transparent",
-        "border-primary": "fill-transparent",
-        image: "fill-transparent"
-      }[this.variant],
-      "relative"
-    )}" part="base">${isStylizedVariant ? this.renderStylizedVariant() : ""} ${this.renderShapes()} ${this.shapes.includes("middle") ? html`<slot></slot>` : ""}</div>`;
-  }
-};
-SdBrandshape.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{display:block;container-type:inline-size;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan) * var(--adjacent));--curve:calc(
-          (var(--opposite) - (var(--radius) / 3)) * 0.5
-        )}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]::before{position:absolute;top:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);transform:skewY(calc(var(--angle) * -1));height:calc(100% - var(--curve) * 2);border-radius:0 var(--radius);margin-top:calc(var(--curve))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){width:100%;-o-object-fit:cover;object-fit:cover;transform:translateY(calc(var(--curve) * -1)) skewY(var(--angle));height:calc(100% + var(--curve) * 2)!important;position:absolute!important}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]::before{transform:unset;height:100%;margin-top:0}slot[name=image]::slotted(img),slot[name=image]::slotted(video){transform:unset;height:100%!important}}:host([variant=border-primary]){--internal-border-color:rgb(var(--sd-color-primary, 0 53 142))}:host([variant=border-white]){--internal-border-color:var(--sd-color-white, white)}:host([variant^=border-]) [part=stylized-container]::before{right:var(--sd-spacing-0,0);border-width:2px;border-style:solid;content:'';border-color:var(--internal-border-color,#000)}`
-];
-__decorateClass([
-  query("[part=base]")
-], SdBrandshape.prototype, "containerElem", 2);
-__decorateClass([
-  property({ type: String })
-], SdBrandshape.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Array })
-], SdBrandshape.prototype, "shapes", 2);
-__decorateClass([
-  state()
-], SdBrandshape.prototype, "componentBreakpoint", 2);
-SdBrandshape = __decorateClass([
-  customElement("sd-brandshape")
-], SdBrandshape);
-export {
-  SdBrandshape as default
-};

package/dist/package/components/button/button.d.ts

@@ -1,52 +0,0 @@
-import '../spinner/spinner';
-import SolidElement from '../../internal/solid-element';
-import type { SolidFormControl } from '../../internal/solid-element';
-export default class SdButton extends SolidElement implements SolidFormControl {
-    private readonly formControlController;
-    private readonly hasSlotController;
-    button: HTMLButtonElement | HTMLLinkElement;
-    _iconsInDefaultSlot: HTMLElement[];
-    protected invalid: boolean;
-    title: string;
-    variant: 'primary' | 'secondary' | 'tertiary' | 'cta';
-    inverted: boolean;
-    size: 'lg' | 'md' | 'sm';
-    disabled: boolean;
-    loading: boolean;
-    type: 'button' | 'submit' | 'reset';
-    name: string;
-    value: string;
-    href: string;
-    target: '_blank' | '_parent' | '_self' | '_top';
-    download?: string;
-    form: string;
-    formAction: string;
-    formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-    formMethod: 'post' | 'get';
-    formNoValidate: boolean;
-    formTarget: '_self' | '_blank' | '_parent' | '_top';
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    firstUpdated(): void;
-    private handleBlur;
-    private handleFocus;
-    private handleClick;
-    private handleInvalid;
-    private isButton;
-    private isLink;
-    handleDisabledChange(): void;
-    click(): void;
-    focus(options?: FocusOptions): void;
-    blur(): void;
-    checkValidity(): boolean;
-    getForm(): HTMLFormElement | null;
-    reportValidity(): boolean;
-    setCustomValidity(message: string): void;
-    render(): import("lit").TemplateResult;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-button': SdButton;
-    }
-}

package/dist/package/components/button/button.js

@@ -1,294 +0,0 @@
-import "../spinner/spinner.js";
-import { css } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { FormControlController, validValidityState } from "../../internal/form.js";
-import { HasSlotController } from "../../internal/slot.js";
-import { literal, html } from "lit/static-html.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { query, queryAssignedElements, state, property } from "lit/decorators.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;
-};
-let SdButton = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      form: (input) => {
-        if (input.hasAttribute("form")) {
-          const doc = input.getRootNode();
-          const formId = input.getAttribute("form");
-          return doc.getElementById(formId);
-        }
-        return input.closest("form");
-      }
-    });
-    this.hasSlotController = new HasSlotController(this, "[default]", "icon-left", "icon-right");
-    this.invalid = false;
-    this.title = "";
-    this.variant = "primary";
-    this.inverted = false;
-    this.size = "lg";
-    this.disabled = false;
-    this.loading = false;
-    this.type = "button";
-    this.name = "";
-    this.value = "";
-    this.href = "";
-  }
-  /** Gets the validity state object */
-  get validity() {
-    if (this.isButton()) {
-      return this.button.validity;
-    }
-    return validValidityState;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    if (this.isButton()) {
-      return this.button.validationMessage;
-    }
-    return "";
-  }
-  firstUpdated() {
-    if (this.isButton()) {
-      this.formControlController.updateValidity();
-    }
-  }
-  handleBlur() {
-    this.emit("sd-blur");
-  }
-  handleFocus() {
-    this.emit("sd-focus");
-  }
-  handleClick(event) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    if (this.type === "submit") {
-      this.formControlController.submit(this);
-    }
-    if (this.type === "reset") {
-      this.formControlController.reset(this);
-    }
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-  isButton() {
-    return this.href ? false : true;
-  }
-  isLink() {
-    return this.href ? true : false;
-  }
-  handleDisabledChange() {
-    if (this.isButton()) {
-      this.formControlController.setValidity(this.disabled);
-    }
-  }
-  /** Simulates a click on the button. */
-  click() {
-    this.button.click();
-  }
-  /** Sets focus on the button. */
-  focus(options) {
-    this.button.focus(options);
-  }
-  /** Removes focus from the button. */
-  blur() {
-    this.button.blur();
-  }
-  /** Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    if (this.isButton()) {
-      return this.button.checkValidity();
-    }
-    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. */
-  reportValidity() {
-    if (this.isButton()) {
-      return this.button.reportValidity();
-    }
-    return true;
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    if (this.isButton()) {
-      this.button.setCustomValidity(message);
-      this.formControlController.updateValidity();
-    }
-  }
-  render() {
-    const isLink = this.isLink();
-    const tag = isLink ? literal`a` : literal`button`;
-    const slots = {
-      label: this.hasSlotController.test("[default]"),
-      "icon-left": this.hasSlotController.test("icon-left"),
-      "icon-right": this.hasSlotController.test("icon-right"),
-      "icon-only": this._iconsInDefaultSlot.length > 0
-    };
-    return html`<${tag} part="base" class="${cx(
-      `font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
-        w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center
-        border transition-colors duration-200 ease-in-out rounded-default
-        select-none cursor-[inherit]`,
-      !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
-      this.loading && "relative cursor-wait",
-      this.disabled && "cursor-not-allowed",
-      slots["icon-only"] && "px-0 w-varspacing",
-      /**
-       * Anatomy
-       * */
-      {
-        /* sizes, fonts */
-        sm: "text-sm varspacing-8 px-4",
-        md: "text-base varspacing-10 px-4",
-        lg: "text-base varspacing-12 px-4"
-      }[this.size],
-      {
-        /* variants */
-        primary: !this.inverted ? `text-white bg-primary border-transparent
-          hover:text-primary-100 hover:bg-primary-500
-          active:text-primary-200 active:bg-primary-800
-          disabled:bg-neutral-500` : `text-primary bg-white border-transparent
-          hover:text-primary-500 hover:bg-primary-100
-          active:text-primary-800 active:bg-primary-200
-          disabled:bg-neutral-600 disabled:text-white`,
-        secondary: !this.inverted ? `text-primary border-primary
-          hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100
-          active:text-primary-800 active:border-primary-800 active:bg-primary-200
-          disabled:text-neutral-500 disabled:border-neutral-500` : `text-white border-white
-          hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100
-          active:text-primary-200 active:bg-primary-800 active:border-primary-200
-          disabled:text-neutral-600 disabled:border-neutral-600`,
-        tertiary: !this.inverted ? `text-primary border-transparent
-          hover:text-primary-500 hover:bg-primary-100
-          active:text-primary-800 active:bg-primary-200
-          disabled:text-neutral-500` : `text-white border-transparent
-          hover:text-primary-100 hover:bg-primary-500
-          active:text-primary-200 active:bg-primary-800
-          disabled:text-neutral-600`,
-        cta: `text-white bg-accent-500 border-transparent
-          hover:bg-accent-550
-          active:bg-accent-700
-          ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
-      }[this.variant]
-    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
-      "flex flex-auto items-center pointer-events-none",
-      slots["icon-only"] && "hidden",
-      this.loading && "invisible",
-      slots["icon-left"] && {
-        sm: "mr-1",
-        md: "mr-2",
-        lg: "mr-2"
-      }[this.size]
-    )}"></slot><slot part="label" id="content" class="${cx(
-      slots["icon-only"] ? "flex flex-auto items-center pointer-events-none" : "inline-block",
-      this.loading && "invisible"
-    )}"></slot><slot name="icon-right" part="icon-right" class="${cx(
-      "flex flex-auto items-center pointer-events-none",
-      this.loading && "invisible",
-      slots["icon-only"] && "hidden",
-      slots["icon-right"] && {
-        sm: "ml-1",
-        md: "ml-2",
-        lg: "ml-2"
-      }[this.size]
-    )}"></slot>${this.loading ? html`<sd-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-spinner>` : ""}</${tag}>`;
-  }
-};
-SdButton.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-icon),sd-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
-];
-__decorateClass([
-  query("a, button")
-], SdButton.prototype, "button", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "sd-icon" })
-], SdButton.prototype, "_iconsInDefaultSlot", 2);
-__decorateClass([
-  state()
-], SdButton.prototype, "invalid", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "title", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdButton.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdButton.prototype, "inverted", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdButton.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdButton.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdButton.prototype, "loading", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "type", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "name", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "value", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "href", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "target", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "download", 2);
-__decorateClass([
-  property()
-], SdButton.prototype, "form", 2);
-__decorateClass([
-  property({ attribute: "formaction" })
-], SdButton.prototype, "formAction", 2);
-__decorateClass([
-  property({ attribute: "formenctype" })
-], SdButton.prototype, "formEnctype", 2);
-__decorateClass([
-  property({ attribute: "formmethod" })
-], SdButton.prototype, "formMethod", 2);
-__decorateClass([
-  property({ attribute: "formnovalidate", type: Boolean })
-], SdButton.prototype, "formNoValidate", 2);
-__decorateClass([
-  property({ attribute: "formtarget" })
-], SdButton.prototype, "formTarget", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SdButton.prototype, "handleDisabledChange", 1);
-SdButton = __decorateClass([
-  customElement("sd-button")
-], SdButton);
-export {
-  SdButton as default
-};

package/dist/package/components/carousel/autoplay-controller.js

@@ -1,57 +0,0 @@
-class AutoplayController {
-  constructor(host, tickCallback) {
-    this.timerId = 0;
-    this.activeInteractions = 0;
-    this.paused = false;
-    this.stopped = true;
-    this.pause = () => {
-      if (!this.activeInteractions++) {
-        this.paused = true;
-        this.host.requestUpdate();
-      }
-    };
-    this.resume = () => {
-      if (!--this.activeInteractions) {
-        this.paused = false;
-        this.host.requestUpdate();
-      }
-    };
-    host.addController(this);
-    this.host = host;
-    this.tickCallback = tickCallback;
-  }
-  hostConnected() {
-    this.host.addEventListener("mouseenter", this.pause);
-    this.host.addEventListener("mouseleave", this.resume);
-    this.host.addEventListener("focusin", this.pause);
-    this.host.addEventListener("focusout", this.resume);
-    this.host.addEventListener("touchstart", this.pause, { passive: true });
-    this.host.addEventListener("touchend", this.resume);
-  }
-  hostDisconnected() {
-    this.stop();
-    this.host.removeEventListener("mouseenter", this.pause);
-    this.host.removeEventListener("mouseleave", this.resume);
-    this.host.removeEventListener("focusin", this.pause);
-    this.host.removeEventListener("focusout", this.resume);
-    this.host.removeEventListener("touchstart", this.pause);
-    this.host.removeEventListener("touchend", this.resume);
-  }
-  start(interval) {
-    this.stop();
-    this.stopped = false;
-    this.timerId = window.setInterval(() => {
-      if (!this.paused) {
-        this.tickCallback();
-      }
-    }, interval);
-  }
-  stop() {
-    clearInterval(this.timerId);
-    this.stopped = true;
-    this.host.requestUpdate();
-  }
-}
-export {
-  AutoplayController
-};

package/dist/package/components/carousel/carousel.d.ts

@@ -1,56 +0,0 @@
-import '../icon/icon.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import SolidElement from '../../internal/solid-element.js';
-export default class SdCarousel extends SolidElement {
-    autoplayControls: HTMLElement;
-    previousButton: HTMLButtonElement;
-    nextButton: HTMLButtonElement;
-    paginationItems: HTMLButtonElement[];
-    variant: 'dot' | 'number';
-    inverted: boolean;
-    loop: boolean;
-    autoplay: boolean;
-    slidesPerPage: number;
-    slidesPerMove: number;
-    defaultSlot: HTMLSlotElement;
-    scrollContainer: HTMLElement;
-    paginationContainer: HTMLElement;
-    activeSlide: number;
-    currentPage: number;
-    pausedAutoplay: boolean;
-    private autoplayController;
-    private scrollController;
-    private readonly slides;
-    private intersectionObserver;
-    private readonly intersectionObserverEntries;
-    localize: LocalizeController;
-    private mutationObserver;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected firstUpdated(): void;
-    static getPageCount(totalSlides: number, slidesPerPage: number, slidesPerMove: number): number;
-    static getCurrentPage(totalSlides: number, activeSlide: number, slidesPerPage: number, slidesPerMove: number): number;
-    private getSlides;
-    private handleKeyDown;
-    private handleScrollEnd;
-    private handleSlotChange;
-    private unblockAutoplay;
-    pause(): void;
-    resume(): void;
-    handlePausedAutoplay(): void;
-    initializeSlides(): void;
-    handleSlideChange(): void;
-    handleSlidesPerMoveChange(): void;
-    handleAutoplayChange(): void;
-    previous(behavior?: ScrollBehavior): void;
-    next(behavior?: ScrollBehavior): void;
-    nextTillFirst(behavior?: ScrollBehavior): void;
-    goToSlide(index: number, behavior?: ScrollBehavior): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-carousel': SdCarousel;
-    }
-}