@solid-design-system/components 3.24.0 → 4.0.0-next.1

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

@@ -1,210 +0,0 @@
-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.variant = "info";
-    this.open = false;
-    this.closable = false;
-    this.duration = Infinity;
-    this.durationIndicator = false;
-    this.toastStack = "top-right";
-    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" @click="${this.handleCloseClick}"><sd-icon label="${this.localize.term("close")}" 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 border border-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({ reflect: true })
-], SdNotification.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNotification.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNotification.prototype, "closable", 2);
-__decorateClass([
-  property({ type: Number })
-], SdNotification.prototype, "duration", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "duration-indicator" })
-], SdNotification.prototype, "durationIndicator", 2);
-__decorateClass([
-  property({ reflect: true, attribute: "toast-stack" })
-], SdNotification.prototype, "toastStack", 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/optgroup/optgroup.d.ts

@@ -1,20 +0,0 @@
-import SdDivider from '../divider/divider';
-import SolidElement from '../../internal/solid-element';
-import type { CSSResultGroup } from 'lit';
-export default class SdOptgroup extends SolidElement {
-    static dependencies: {
-        'sd-divider': typeof SdDivider;
-    };
-    defaultSlot: HTMLSlotElement;
-    private handleDisableOptions;
-    disabled: boolean;
-    label: string;
-    handleDisabledChange(): void;
-    render(): import("lit").TemplateResult;
-    static styles: CSSResultGroup;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-optgroup': SdOptgroup;
-    }
-}

package/dist/package/components/optgroup/optgroup.js

@@ -1,68 +0,0 @@
-import { css } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { html } from "lit/static-html.js";
-import { query, property } from "lit/decorators.js";
-import { watch } from "../../internal/watch.js";
-import componentStyles from "../../styles/component.styles.js";
-import cx from "classix";
-import SdDivider from "../divider/divider.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 SdOptgroup = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.label = "";
-  }
-  /**
-   * Syncs the disabled prop for all slotted sd-options when it is triggered
-   */
-  handleDisableOptions() {
-    const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-option").forEach((opt) => {
-      opt.disabled = disabled;
-    });
-  }
-  handleDisabledChange() {
-    this.handleDisableOptions();
-  }
-  render() {
-    const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-divider id="divider" class="pt-2 pb-4" part="divider"></sd-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="group" part="options"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
-  }
-};
-SdOptgroup.dependencies = {
-  "sd-divider": SdDivider
-};
-SdOptgroup.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{--display-divider:block}#divider{display:var(--display-divider)}`
-];
-__decorateClass([
-  query("slot:not([name])")
-], SdOptgroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  property({ reflect: true, type: Boolean })
-], SdOptgroup.prototype, "disabled", 2);
-__decorateClass([
-  property()
-], SdOptgroup.prototype, "label", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SdOptgroup.prototype, "handleDisabledChange", 1);
-SdOptgroup = __decorateClass([
-  customElement("sd-optgroup")
-], SdOptgroup);
-export {
-  SdOptgroup as default
-};

package/dist/package/components/option/option.d.ts

@@ -1,29 +0,0 @@
-import '../icon/icon';
-import SolidElement from '../../internal/solid-element';
-export default class SdOption extends SolidElement {
-    private readonly hasSlotController;
-    private cachedTextLabel;
-    defaultSlot: HTMLSlotElement;
-    current: boolean;
-    selected: boolean;
-    hasHover: boolean;
-    size: 'lg' | 'md' | 'sm';
-    checkbox: boolean;
-    disabled: boolean;
-    value: string;
-    connectedCallback(): void;
-    private handleDefaultSlotChange;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    handleDisabledChange(): void;
-    handleSelectedChange(): void;
-    handleValueChange(): void;
-    getTextLabel(): string;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-option': SdOption;
-    }
-}

package/dist/package/components/option/option.js

@@ -1,140 +0,0 @@
-import "../icon/icon.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.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 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 SdOption = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "default", "left", "right");
-    this.current = false;
-    this.selected = false;
-    this.hasHover = false;
-    this.size = "lg";
-    this.checkbox = false;
-    this.disabled = false;
-    this.value = "";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "option");
-    this.setAttribute("aria-selected", "false");
-  }
-  handleDefaultSlotChange() {
-    const textLabel = this.getTextLabel();
-    if (typeof this.cachedTextLabel === "undefined") {
-      this.cachedTextLabel = textLabel;
-      return;
-    }
-    if (textLabel !== this.cachedTextLabel) {
-      this.cachedTextLabel = textLabel;
-      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
-    }
-  }
-  handleMouseEnter() {
-    this.hasHover = true;
-  }
-  handleMouseLeave() {
-    this.hasHover = false;
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleSelectedChange() {
-    this.setAttribute("aria-selected", this.selected ? "true" : "false");
-  }
-  handleValueChange() {
-    if (this.value.includes(" ")) {
-      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
-      this.value = this.value.replace(/ /g, "_");
-    }
-  }
-  /** Returns a plain text label based on the option's content. */
-  getTextLabel() {
-    return (this.textContent ?? "").trim();
-  }
-  render() {
-    const slots = {
-      default: this.hasSlotController.test("default"),
-      left: this.hasSlotController.test("left"),
-      right: this.hasSlotController.test("right")
-    };
-    return html`<div part="base" class="${cx(
-      "px-4 flex items-center w-full transition-all text-left text-base relative text-black",
-      {
-        sm: "text-sm py-1",
-        md: "text-base py-2",
-        lg: "text-base py-3"
-      }[this.size],
-      this.disabled ? "text-neutral-500 cursor-not-allowed" : "cursor-pointer",
-      this.hasHover && !this.disabled ? "bg-neutral-200" : "",
-      this.current && "bg-neutral-200"
-    )}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}"><span class="${cx(
-      "absolute w-full left-0 top-0 pointer-events-none transition-all duration-150 border-l-4 h-[calc(100%-8px)]",
-      this.selected && !this.checkbox ? "border-accent" : "border-transparent",
-      this.disabled && "border-neutral-500 top-1",
-      !this.disabled && this.hasHover ? "h-full top-0" : "top-1"
-    )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
-      "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
-      this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "border-neutral-800"
-    )}">${this.selected ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
-  }
-};
-SdOption.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{position:relative;display:block;width:100%;outline:2px solid transparent!important;outline-offset:2px!important}`
-];
-__decorateClass([
-  query('[part="base"]')
-], SdOption.prototype, "defaultSlot", 2);
-__decorateClass([
-  state()
-], SdOption.prototype, "current", 2);
-__decorateClass([
-  state()
-], SdOption.prototype, "selected", 2);
-__decorateClass([
-  state()
-], SdOption.prototype, "hasHover", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdOption.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdOption.prototype, "checkbox", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdOption.prototype, "disabled", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdOption.prototype, "value", 2);
-__decorateClass([
-  watch("disabled")
-], SdOption.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("selected")
-], SdOption.prototype, "handleSelectedChange", 1);
-__decorateClass([
-  watch("value")
-], SdOption.prototype, "handleValueChange", 1);
-SdOption = __decorateClass([
-  customElement("sd-option")
-], SdOption);
-export {
-  SdOption as default
-};

package/dist/package/components/popup/popup.d.ts

@@ -1,45 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-export default class SdPopup extends SolidElement {
-    private anchorEl;
-    private cleanup;
-    private mutationObserver;
-    popup: HTMLElement;
-    private arrowEl;
-    anchor: Element | string;
-    active: boolean;
-    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-    strategy: 'absolute' | 'fixed';
-    distance: number;
-    skidding: number;
-    arrow: boolean;
-    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
-    arrowPadding: number;
-    flip: boolean;
-    flipFallbackPlacements: string;
-    flipFallbackStrategy: 'best-fit' | 'initial';
-    flipBoundary: Element | Element[];
-    flipPadding: number;
-    shift: boolean;
-    shiftBoundary: Element | Element[];
-    shiftPadding: number;
-    autoSize: 'horizontal' | 'vertical' | 'both';
-    sync: 'width' | 'height' | 'both';
-    autoSizeBoundary: Element | Element[];
-    autoSizePadding: number;
-    connectedCallback(): Promise<void>;
-    disconnectedCallback(): void;
-    updated(changedProps: Map<string, unknown>): Promise<void>;
-    private setupMutationObserver;
-    private handleCurrentPlacementChange;
-    private handleAnchorChange;
-    private start;
-    private stop;
-    reposition(): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-popup': SdPopup;
-    }
-}