@solid-design-system/components 1.0.0

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

@@ -0,0 +1,391 @@
+import "../spinner/spinner.js";
+import { css } from "lit";
+import { query, queryAssignedElements, state, property, customElement } from "lit/decorators.js";
+import { FormControlController } 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 { 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 = "";
+  }
+  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);
+    }
+  }
+  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. */
+  checkValidity() {
+    if (this.isButton()) {
+      return this.button.checkValidity();
+    }
+    return true;
+  }
+  /** 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-md
+        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 border-transparent
+          hover:bg-accent-300
+          active:bg-accent-500
+          ${!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"}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @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" 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 {
+        display: inline-block;
+        position: relative;
+        width: auto;
+        cursor: pointer;
+      }
+
+      sd-spinner {
+        --indicator-color: currentColor;
+        --track-color: var(--tw-varcolor-200);
+      }
+
+      /*
+    * Badges:
+    * Slotted badges are positioned absolutely in the top right corner of the button.
+    */
+
+      ::slotted(sd-badge) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        translate: 50% -50%;
+        pointer-events: none;
+      }
+
+      /**
+       * sd-icons should automatically resize correctly based on the button size.
+       */
+
+      ::slotted(sd-icon),
+      sd-spinner {
+        font-size: calc(var(--tw-varspacing) / 2);
+      }
+
+      ///*
+      // * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
+      // * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
+      // * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
+      // * buttons and we style them here instead.
+      // */
+
+      // :host(.sd-button-group__button--first:not(.sd-button-group__button--last)) .button {
+      //   border-start-end-radius: 0;
+      //   border-end-end-radius: 0;
+      // }
+
+      // :host(.sd-button-group__button--inner) .button {
+      //   border-radius: 0;
+      // }
+
+      // :host(.sd-button-group__button--last:not(.sd-button-group__button--first)) .button {
+      //   border-start-start-radius: 0;
+      //   border-end-start-radius: 0;
+      // }
+
+      // /* All except the first */
+      // :host(.sd-button-group__button:not(.sd-button-group__button--first)) {
+      //   margin-inline-start: calc(-1 * var(--sd-input-border-width));
+      // }
+
+      // /* Add a visual separator between solid buttons */
+      // :host(
+      //     .sd-button-group__button:not(
+      //         .sd-button-group__button--first,
+      //         .sd-button-group__button--radio,
+      //         [variant='default']
+      //       ):not(:hover)
+      //   )
+      //   .button:after {
+      //   content: '';
+      //   position: absolute;
+      //   top: 0;
+      //   inset-inline-start: 0;
+      //   bottom: 0;
+      //   border-left: solid 1px rgb(128 128 128 / 33%);
+      //   mix-blend-mode: multiply;
+      // }
+
+      // /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
+      // :host(.sd-button-group__button--hover) {
+      //   z-index: 1;
+      // }
+
+      // /* Focus and checked are always on top */
+      // :host(.sd-button-group__button--focus),
+      // :host(.sd-button-group__button[checked]) {
+      //   z-index: 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/icon/icon.d.ts

@@ -0,0 +1,22 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdIcon extends SolidElement {
+    private svg;
+    name?: string;
+    src?: string;
+    label: string;
+    library: string;
+    color: 'currentColor' | 'primary' | 'white';
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private getUrl;
+    handleLabelChange(): void;
+    setIcon(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-icon': SdIcon;
+    }
+}

package/dist/package/components/icon/icon.js

@@ -0,0 +1,129 @@
+import { css, html } from "lit";
+import { state, property, customElement } from "lit/decorators.js";
+import { unwatchIcon, getIconLibrary, watchIcon } from "./library.js";
+import { requestIcon } from "./request.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.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 parser;
+let 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 {
+        this.emit("sd-error");
+      }
+    } else if (this.svg.length > 0) {
+      this.svg = "";
+    }
+  }
+  render() {
+    return html`${unsafeSVG(this.svg)}`;
+  }
+};
+SdIcon.styles = [
+  componentStyles,
+  css`:host{display:inline-block;width:1em;height:1em;box-sizing:content-box!important}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-text-opacity,1))}// text-primary :host([color=white]) svg{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-icon")
+], SdIcon);
+export {
+  SdIcon as default
+};

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

@@ -0,0 +1,16 @@
+import type SdIcon from '../icon/icon';
+export type IconLibraryResolver = (name: string) => string;
+export type IconLibraryMutator = (svg: SVGElement) => void;
+export interface IconLibrary {
+    name: string;
+    resolver: IconLibraryResolver;
+    mutator?: IconLibraryMutator;
+}
+export declare function watchIcon(icon: SdIcon): void;
+export declare function unwatchIcon(icon: SdIcon): void;
+export declare function getIconLibrary(name?: string): IconLibrary | undefined;
+export declare function registerIconLibrary(name: string, options: {
+    resolver: IconLibraryResolver;
+    mutator?: IconLibraryMutator;
+}): void;
+export declare function unregisterIconLibrary(name: string): void;

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

@@ -0,0 +1,17 @@
+import systemLibrary from "./library.system.js";
+let registry = [systemLibrary];
+let watchedIcons = [];
+function watchIcon(icon) {
+  watchedIcons.push(icon);
+}
+function unwatchIcon(icon) {
+  watchedIcons = watchedIcons.filter((el) => el !== icon);
+}
+function getIconLibrary(name) {
+  return registry.find((lib) => lib.name === name);
+}
+export {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+};

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

@@ -0,0 +1,7 @@
+import type { IconLibrary } from './library';
+export declare const icons: {
+    'chevron-down': string;
+    'chevron-up': string;
+};
+declare const systemLibrary: IconLibrary;
+export default systemLibrary;

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

@@ -0,0 +1,26 @@
+const icons = {
+  "chevron-down": `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M20.257 6.333l-8.257 9.173-8.257-9.173c-0.181-0.181-0.431-0.292-0.707-0.292-0.552 0-1 0.448-1 1 0 0.238 0.083 0.456 0.222 0.628l-0.001-0.002 9 10c0.184 0.204 0.449 0.331 0.743 0.331s0.56-0.127 0.743-0.33l0.001-0.001 9-10c0.137-0.17 0.22-0.388 0.22-0.626 0-0.552-0.448-1-1-1-0.276 0-0.526 0.112-0.707 0.293v0z"></path>
+    </svg>
+  `,
+  "chevron-up": `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M12.743 6.333c-0.188-0.195-0.452-0.316-0.743-0.316s-0.555 0.121-0.743 0.315l-0 0-9 10c-0.137 0.17-0.22 0.388-0.22 0.626 0 0.552 0.448 1 1 1 0.276 0 0.526-0.112 0.707-0.293v0l8.257-9.173 8.257 9.173c0.181 0.181 0.431 0.292 0.707 0.292 0.552 0 1-0.448 1-1 0-0.238-0.083-0.456-0.222-0.628l0.001 0.002z"></path>
+    </svg>
+  `
+};
+const systemLibrary = {
+  name: "system",
+  resolver: (name) => {
+    if (name in icons) {
+      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
+    }
+    return "";
+  },
+  mutator: (svg) => svg.setAttribute("fill", "currentColor")
+};
+export {
+  systemLibrary as default,
+  icons
+};

package/dist/package/components/icon/request.d.ts

@@ -0,0 +1,11 @@
+type IconFile = {
+    ok: true;
+    status: number;
+    svg: string;
+} | {
+    ok: false;
+    status: number;
+    svg: null;
+};
+export declare function requestIcon(url: string): Promise<IconFile>;
+export {};

package/dist/package/components/icon/request.js

@@ -0,0 +1,24 @@
+import { requestInclude } from "../include/request.js";
+const iconFiles = /* @__PURE__ */ new Map();
+async function requestIcon(url) {
+  if (iconFiles.has(url)) {
+    return iconFiles.get(url);
+  }
+  const fileData = await requestInclude(url);
+  const iconFileData = {
+    ok: fileData.ok,
+    status: fileData.status,
+    svg: null
+  };
+  if (fileData.ok) {
+    const div = document.createElement("div");
+    div.innerHTML = fileData.html;
+    const svg = div.firstElementChild;
+    iconFileData.svg = (svg == null ? void 0 : svg.tagName.toLowerCase()) === "svg" ? svg.outerHTML : "";
+  }
+  iconFiles.set(url, iconFileData);
+  return iconFileData;
+}
+export {
+  requestIcon
+};

package/dist/package/components/include/include.d.ts

@@ -0,0 +1,16 @@
+import SolidElement from '../../internal/solid-element';
+import type { CSSResultGroup } from 'lit';
+export default class SdInclude extends SolidElement {
+    static styles: CSSResultGroup;
+    src: string;
+    mode: 'cors' | 'no-cors' | 'same-origin';
+    allowScripts: boolean;
+    private executeScript;
+    handleSrcChange(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-include': SdInclude;
+    }
+}