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

package/dist-versioned/chunks/chunk.2LMWBUBT.js

@@ -0,0 +1,142 @@
+import {
+  debounce
+} from "./chunk.NOWCQZBS.js";
+import {
+  prefersReducedMotion
+} from "./chunk.EY4JPJJQ.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/carousel/scroll-controller.ts
+var ScrollController = class {
+  constructor(host) {
+    this.pointers = /* @__PURE__ */ new Set();
+    this.dragging = false;
+    this.scrolling = false;
+    this.mouseDragging = false;
+    this.handleScroll = () => {
+      if (!this.scrolling) {
+        this.scrolling = true;
+        this.host.requestUpdate();
+      }
+      this.handleScrollEnd();
+    };
+    this.handlePointerDown = (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      this.pointers.add(event.pointerId);
+      const canDrag = this.mouseDragging && !this.dragging && event.button === 0;
+      if (canDrag) {
+        event.preventDefault();
+        this.host.scrollContainer.addEventListener("pointermove", this.handlePointerMove);
+      }
+    };
+    this.handlePointerMove = (event) => {
+      const scrollContainer = this.host.scrollContainer;
+      const hasMoved = !!event.movementX || !!event.movementY;
+      if (!this.dragging && hasMoved) {
+        scrollContainer.setPointerCapture(event.pointerId);
+        this.handleDragStart();
+      } else if (scrollContainer.hasPointerCapture(event.pointerId)) {
+        this.handleDrag(event);
+      }
+    };
+    this.handlePointerUp = (event) => {
+      this.pointers.delete(event.pointerId);
+      this.host.scrollContainer.releasePointerCapture(event.pointerId);
+      if (this.pointers.size === 0) {
+        this.handleDragEnd();
+      }
+    };
+    this.handleTouchEnd = (event) => {
+      for (const touch of event.changedTouches) {
+        this.pointers.delete(touch.identifier);
+      }
+    };
+    this.handleTouchStart = (event) => {
+      for (const touch of event.touches) {
+        this.pointers.add(touch.identifier);
+      }
+    };
+    this.host = host;
+    host.addController(this);
+  }
+  async hostConnected() {
+    const host = this.host;
+    await host.updateComplete;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.addEventListener("scroll", this.handleScroll, { passive: true });
+    scrollContainer.addEventListener("pointerdown", this.handlePointerDown);
+    scrollContainer.addEventListener("pointerup", this.handlePointerUp);
+    scrollContainer.addEventListener("pointercancel", this.handlePointerUp);
+    scrollContainer.addEventListener("touchstart", this.handleTouchStart, { passive: true });
+    scrollContainer.addEventListener("touchend", this.handleTouchEnd);
+  }
+  hostDisconnected() {
+    const host = this.host;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.removeEventListener("scroll", this.handleScroll);
+    scrollContainer.removeEventListener("pointerdown", this.handlePointerDown);
+    scrollContainer.removeEventListener("pointerup", this.handlePointerUp);
+    scrollContainer.removeEventListener("pointercancel", this.handlePointerUp);
+    scrollContainer.removeEventListener("touchstart", this.handleTouchStart);
+    scrollContainer.removeEventListener("touchend", this.handleTouchEnd);
+  }
+  handleScrollEnd() {
+    if (!this.pointers.size) {
+      this.scrolling = false;
+      this.host.scrollContainer.dispatchEvent(
+        new CustomEvent("scrollend", {
+          bubbles: false,
+          cancelable: false
+        })
+      );
+      this.host.requestUpdate();
+    } else {
+      this.handleScrollEnd();
+    }
+  }
+  handleDragStart() {
+    const host = this.host;
+    this.dragging = true;
+    host.scrollContainer.style.setProperty("scroll-snap-type", "unset");
+    host.requestUpdate();
+  }
+  handleDrag(event) {
+    this.host.scrollContainer.scrollBy({
+      left: -event.movementX,
+      top: -event.movementY
+    });
+  }
+  async handleDragEnd() {
+    const host = this.host;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.removeEventListener("pointermove", this.handlePointerMove);
+    this.dragging = false;
+    const startLeft = scrollContainer.scrollLeft;
+    const startTop = scrollContainer.scrollTop;
+    scrollContainer.style.removeProperty("scroll-snap-type");
+    const finalLeft = scrollContainer.scrollLeft;
+    const finalTop = scrollContainer.scrollTop;
+    scrollContainer.style.setProperty("scroll-snap-type", "unset");
+    scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: "auto" });
+    scrollContainer.scrollTo({ left: finalLeft, top: finalTop, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    if (this.scrolling) {
+      await waitForEvent(scrollContainer, "scrollend");
+    }
+    scrollContainer.style.removeProperty("scroll-snap-type");
+    host.requestUpdate();
+  }
+};
+__decorateClass([
+  debounce(100)
+], ScrollController.prototype, "handleScrollEnd", 1);
+
+export {
+  ScrollController
+};

package/dist-versioned/chunks/chunk.2S2CNWKY.js

@@ -0,0 +1,50 @@
+// src/translations/en.ts
+import { registerTranslation } from "@shoelace-style/localize";
+var translation = {
+  $code: "en",
+  $name: "English",
+  $dir: "ltr",
+  autoplay: "Autoplay",
+  audioPlayer: "Audio Player",
+  clearEntry: "Clear entry",
+  close: "Close",
+  comboboxDefaultPlaceholder: "Please search and select",
+  copy: "Copy",
+  carousel: "Carousel",
+  currentValue: "Current value",
+  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
+  hidePassword: "Hide password",
+  loading: "Loading",
+  mute: "Mute",
+  nextSlide: "Next slide",
+  noResults: "No results found",
+  numOptionsSelected: (num) => {
+    if (num === 0) return "";
+    return `Options Selected (${num})`;
+  },
+  pauseAudio: "Pause Audio",
+  playAudio: "Play Audio",
+  playbackSpeed: "Playback Speed",
+  previousSlide: "Previous slide",
+  progress: "Progress",
+  remove: "Remove",
+  removed: (name) => `${name} removed`,
+  resize: "Resize",
+  scrollToEnd: "Scroll to end",
+  scrollToStart: "Scroll to start",
+  selectAColorFromTheScreen: "Select a color from the screen",
+  selectDefaultPlaceholder: "Please select",
+  showLess: "Show less",
+  showMore: "Show more",
+  showPassword: "Show password",
+  slideNum: (num) => `Slide ${num}`,
+  tagsSelected: "Options selected",
+  toggleColorFormat: "Toggle color format",
+  unmute: "Unmute"
+};
+registerTranslation(translation);
+var en_default = translation;
+
+export {
+  en_default
+};

package/dist-versioned/chunks/chunk.3IT4HBTI.js

@@ -0,0 +1,134 @@
+import {
+  requestIcon
+} from "./chunk.P52GZVKG.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.JCK5DTZN.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/icon/icon.ts
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+var parser;
+var SdIcon = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.svg = "";
+    this.label = "";
+    this.library = "default";
+    this.color = "currentColor";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated() {
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  getUrl() {
+    const library = getIconLibrary(this.library);
+    if (this.name && library) {
+      return library.resolver(this.name);
+    }
+    return this.src;
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    var _a;
+    const library = getIconLibrary(this.library);
+    const url = this.getUrl();
+    if (!parser) {
+      parser = new DOMParser();
+    }
+    if (url) {
+      try {
+        const file = await requestIcon(url);
+        if (url !== this.getUrl()) {
+        } else if (file.ok) {
+          const doc = parser.parseFromString(file.svg, "text/html");
+          const svgEl = doc.body.querySelector("svg");
+          if (svgEl !== null) {
+            (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, svgEl);
+            this.svg = svgEl.outerHTML;
+            this.emit("sd-load");
+          } else {
+            this.svg = "";
+            this.emit("sd-error");
+          }
+        } else {
+          this.svg = "";
+          this.emit("sd-error");
+        }
+      } catch (e) {
+        this.emit("sd-error");
+      }
+    } else if (this.svg.length > 0) {
+      this.svg = "";
+    }
+  }
+  render() {
+    return html`${unsafeSVG(this.svg)}`;
+  }
+};
+SdIcon.styles = [
+  ...SolidElement.styles,
+  css`:host{box-sizing:content-box!important;display:inline-block;height:1em;width:1em}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity,1))}:host([color=white]) svg{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity,1))}`
+];
+__decorateClass([
+  state()
+], SdIcon.prototype, "svg", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdIcon.prototype, "name", 2);
+__decorateClass([
+  property()
+], SdIcon.prototype, "src", 2);
+__decorateClass([
+  property()
+], SdIcon.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdIcon.prototype, "library", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdIcon.prototype, "color", 2);
+__decorateClass([
+  watch("label")
+], SdIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], SdIcon.prototype, "setIcon", 1);
+SdIcon = __decorateClass([
+  customElement("sd-4-0-0-next-0-icon")
+], SdIcon);
+
+export {
+  SdIcon
+};

package/dist-versioned/chunks/chunk.3LGDUVS4.js

@@ -0,0 +1,139 @@
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/step/step.ts
+import { css } from "lit";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var SdStep = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.size = "lg";
+    this.orientation = "horizontal";
+    this.disabled = false;
+    this.current = false;
+    this.noTail = false;
+    this.notInteractive = false;
+    this.label = "";
+    this.description = "";
+    this.index = 1;
+    this.href = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleCurrentChange() {
+    if (this.current) {
+      this.disabled = false;
+    }
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.current = false;
+    }
+  }
+  handleInteractivityChange() {
+    if (this.notInteractive) {
+      this.current = false;
+      this.disabled = false;
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = this.notInteractive ? literal`div` : isLink ? literal`a` : literal`button`;
+    return html`<div role="listitem" part="base" class="${cx(
+      "flex pt-1",
+      this.orientation === "horizontal" ? "flex-col w-full" : "flex-row gap-4 items-stretch h-full w-min overflow-hidden",
+      !this.disabled && !this.current && !this.notInteractive && "group"
+    )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${cx(
+      "flex shrink-0 gap-2",
+      this.noTail && "w-max",
+      this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
+      this.orientation === "horizontal" ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
+    )}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined("label")}" aria-describedby="${ifDefined("description")}" class="${cx(
+      "border rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      this.disabled ? "focus-visible:outline-none cursor-not-allowed" : "focus-visible:focus-outline group-hover:cursor-pointer",
+      this.notInteractive ? this.size === "lg" ? "w-[72px]" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
+      this.disabled && "border-neutral-400 text-neutral-700",
+      !this.disabled && !this.current && !this.notInteractive && "border-primary group-hover:bg-primary-100 group-hover:border-primary-500",
+      this.notInteractive && "border-neutral-400",
+      this.current && "bg-accent border-none text-white"
+    )}"><slot name="circle-content" class="${cx(
+      !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
+      this.notInteractive && "text-primary",
+      this.size === "lg" ? "text-lg" : "text-sm"
+    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-0-0-next-0-icon name="status-check" library="system"></sd-4-0-0-next-0-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
+      this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
+      !this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
+    )}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
+  }
+};
+SdStep.styles = [
+  ...SolidElement.styles,
+  css`:host{flex:1 1 0%}:host([no-tail]){flex-grow:0}.translateLg{transform:translateX(55px)}.translateSm{transform:translateX(64px)}`
+];
+__decorateClass([
+  property({ reflect: true })
+], SdStep.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdStep.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdStep.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdStep.prototype, "current", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean, attribute: "no-tail" })
+], SdStep.prototype, "noTail", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
+], SdStep.prototype, "notInteractive", 2);
+__decorateClass([
+  property()
+], SdStep.prototype, "label", 2);
+__decorateClass([
+  property()
+], SdStep.prototype, "description", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "index" })
+], SdStep.prototype, "index", 2);
+__decorateClass([
+  property()
+], SdStep.prototype, "href", 2);
+__decorateClass([
+  watch("current")
+], SdStep.prototype, "handleCurrentChange", 1);
+__decorateClass([
+  watch("disabled")
+], SdStep.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("notInteractive")
+], SdStep.prototype, "handleInteractivityChange", 1);
+SdStep = __decorateClass([
+  customElement("sd-4-0-0-next-0-step")
+], SdStep);
+
+export {
+  SdStep
+};