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

package/dist/versioned-package/components/link/link.js

@@ -1,107 +0,0 @@
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { HasSlotController } from "../../internal/slot.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { query, property } from "lit/decorators.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 SdLink = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "[default]", "icon-left", "icon-right");
-    this.standalone = false;
-    this.size = "inherit";
-    this.inverted = false;
-    this.href = "";
-  }
-  handleBlur() {
-    this.emit("sd-blur");
-  }
-  handleFocus() {
-    this.emit("sd-focus");
-  }
-  /** Sets focus on the button. */
-  focus(options) {
-    this.button.focus(options);
-  }
-  /** Removes focus from the button. */
-  blur() {
-    this.button.blur();
-  }
-  render() {
-    const slots = {
-      label: this.hasSlotController.test("[default]"),
-      "icon-left": this.hasSlotController.test("icon-left"),
-      "icon-right": this.hasSlotController.test("icon-right")
-    };
-    return html`<a part="base" class="${cx(
-      "inline",
-      this.href ? "cursor-pointer" : "",
-      {
-        sm: "text-sm",
-        lg: "text-base",
-        inherit: ""
-      }[this.size],
-      {
-        disabled: !this.inverted ? "text-neutral-500" : "text-neutral-600",
-        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`
-      }[this.href ? "enabled" : "disabled"],
-      this.standalone && "flex items-start"
-    )}" href="${ifDefined(this.href || void 0)}" target="${ifDefined(this.target || void 0)}" download="${ifDefined(this.download)}" rel="${ifDefined(this.target ? "noreferrer noopener" : void 0)}" aria-disabled="${!this.href ? "true" : "false"}" tabindex="${!this.href ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"><slot name="icon-left" part="icon-left" class="${cx(
-      "inline",
-      slots["icon-left"] && (!this.standalone ? "mr-[0.25em]" : {
-        sm: "mr-1",
-        lg: "mr-2",
-        inherit: "mr-[0.5em]"
-      }[this.size])
-    )}"></slot><span part="label" class="inline underline underline-offset-2"><slot></slot></span><slot name="icon-right" part="icon-right" class="${cx(
-      "inline",
-      slots["icon-right"] && (!this.standalone ? "ml-[0.25em]" : {
-        sm: "ml-1",
-        lg: "ml-2",
-        inherit: "ml-[0.5em]"
-      }[this.size])
-    )}"></slot></a>`;
-  }
-};
-SdLink.styles = [
-  SolidElement.styles,
-  css`::slotted(sd-3-23-4-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-3-23-4-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-3-23-4-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
-];
-__decorateClass([
-  query("a")
-], SdLink.prototype, "button", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdLink.prototype, "standalone", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdLink.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdLink.prototype, "inverted", 2);
-__decorateClass([
-  property()
-], SdLink.prototype, "href", 2);
-__decorateClass([
-  property()
-], SdLink.prototype, "target", 2);
-__decorateClass([
-  property()
-], SdLink.prototype, "download", 2);
-SdLink = __decorateClass([
-  customElement("sd-3-23-4-link")
-], SdLink);
-export {
-  SdLink as default
-};

package/dist/versioned-package/components/map-marker/map-marker.d.ts

@@ -1,23 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-import type { SVGTemplateResult } from 'lit';
-export default class SdMapMarker extends SolidElement {
-    variant: 'cluster' | 'main' | 'place';
-    state: 'default' | 'hover' | 'active';
-    animated: boolean;
-    notInteractive: boolean;
-    href: string;
-    target: '_blank' | '_parent' | '_self' | '_top';
-    private handleBlur;
-    private handleFocus;
-    private isLink;
-    readonly marker: {
-        [key in 'cluster' | 'main' | 'place']: SVGTemplateResult;
-    };
-    render(): import("lit").TemplateResult;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-23-4-map-marker': SdMapMarker;
-    }
-}

package/dist/versioned-package/components/map-marker/map-marker.js

@@ -1,96 +0,0 @@
-import { css, svg } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { literal, html } from "lit/static-html.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { property } 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 SdMapMarker = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "main";
-    this.state = "default";
-    this.animated = false;
-    this.notInteractive = false;
-    this.href = "";
-    this.marker = {
-      cluster: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" opacity="1" r="20"/><circle cx="25" cy="25" opacity=".3" r="25"/></svg>`,
-      main: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 75"><path d="M51 49A29 29 0 0 0 30 0 29 29 0 0 0 9 49l21 22 21-22Z"/><circle cx="30" cy="28" r="10" fill="#fff"/></svg>`,
-      place: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 75"><path fill-rule="evenodd" d="M51 49A29 29 0 0 0 30 0 29 29 0 0 0 9 49l21 22 21-22Z" clip-rule="evenodd"/></svg>`
-    };
-  }
-  handleBlur() {
-    this.emit("sd-blur");
-  }
-  handleFocus() {
-    this.emit("sd-focus");
-  }
-  isLink() {
-    return this.href ? true : false;
-  }
-  render() {
-    const isLink = this.isLink();
-    const tag = this.notInteractive ? literal`div` : isLink ? literal`a` : literal`button`;
-    return html`<${tag} part="base" class="${cx(
-      "flex justify-center",
-      !this.notInteractive && "focus:outline focus:outline-2 focus:outline-primary focus:outline-offset-2"
-    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" role="${ifDefined(this.notInteractive || isLink ? void 0 : "button")}" aria-labelledby="${ifDefined(!this.notInteractive ? "content" : void 0)}"><div part="marker" class="${cx(
-      "inline-flex",
-      this.animated && (this.variant === "main" || this.variant === "place") && "animate-bounce-once",
-      this.variant === "cluster" && this.state === "hover" && "scale-110 fill-primary-500",
-      this.variant === "cluster" && !this.notInteractive && "transition-all duration-200 ease-in-out hover:scale-110 hover:fill-primary-500",
-      this.variant === "main" && this.state === "hover" && "fill-accent-550",
-      this.variant === "main" && this.state === "active" && "fill-accent-700",
-      this.variant === "main" && !this.notInteractive && "hover:fill-accent-550 active:fill-accent-700",
-      this.variant === "place" && this.state === "default" && "fill-white",
-      this.variant === "place" && this.state === "hover" && "fill-primary-100",
-      this.variant === "place" && this.state === "active" && "fill-primary-200",
-      this.variant === "place" && !this.notInteractive && "hover:fill-primary-100",
-      {
-        cluster: "fill-primary",
-        main: "fill-accent *:drop-shadow-md",
-        place: "*:drop-shadow-md"
-      }[this.variant]
-    )}">${this.marker[this.variant]}</div><div id="content" part="content" class="${cx("absolute self-center pointer-events-none", this.variant === "cluster" && "font-bold text-white")}"><slot></slot></div></${tag}>`;
-  }
-};
-SdMapMarker.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{display:block}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem) * var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{font-size:calc(var(--sd-font-size-3xl,2rem) * var(--map-marker-scaling,1))}`
-];
-__decorateClass([
-  property({ reflect: true })
-], SdMapMarker.prototype, "variant", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdMapMarker.prototype, "state", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdMapMarker.prototype, "animated", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
-], SdMapMarker.prototype, "notInteractive", 2);
-__decorateClass([
-  property()
-], SdMapMarker.prototype, "href", 2);
-__decorateClass([
-  property()
-], SdMapMarker.prototype, "target", 2);
-SdMapMarker = __decorateClass([
-  customElement("sd-3-23-4-map-marker")
-], SdMapMarker);
-export {
-  SdMapMarker as default
-};

package/dist/versioned-package/components/navigation-item/navigation-item.d.ts

@@ -1,34 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-export default class SdNavigationItem extends SolidElement {
-    private readonly hasSlotController;
-    button: HTMLButtonElement | HTMLLinkElement | null;
-    vertical: boolean;
-    size: 'base' | 'lg' | 'sm';
-    href: string;
-    target: '_blank' | '_parent' | '_self' | '_top';
-    download?: string;
-    current: boolean;
-    disabled: boolean;
-    chevron: boolean;
-    relaxed: boolean;
-    divider: boolean;
-    indented: boolean;
-    open: boolean;
-    separated: boolean;
-    private get isButton();
-    private get isLink();
-    private get isAccordion();
-    private handleClickButton;
-    private handleClickSummary;
-    private hideDetails;
-    private showDetails;
-    private get calculatePaddingX();
-    private get tag();
-    render(): import("lit").TemplateResult;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-23-4-navigation-item': SdNavigationItem;
-    }
-}

package/dist/versioned-package/components/navigation-item/navigation-item.js

@@ -1,195 +0,0 @@
-import { unsafeCSS, css } from "lit";
-import { customElement } from "../../internal/register-custom-element.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, property } from "lit/decorators.js";
-import componentStyles from "../../styles/component.styles.js";
-import cx from "classix";
-import InteractiveStyles from "../../styles/interactive/interactive.css.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 SdNavigationItem = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "[default]", "description", "children");
-    this.vertical = false;
-    this.size = "base";
-    this.current = false;
-    this.disabled = false;
-    this.chevron = false;
-    this.relaxed = false;
-    this.divider = false;
-    this.indented = false;
-    this.open = false;
-    this.separated = false;
-  }
-  get isButton() {
-    return !this.href && !this.hasSlotController.test("children");
-  }
-  get isLink() {
-    return !!this.href;
-  }
-  get isAccordion() {
-    return !this.href && this.hasSlotController.test("children");
-  }
-  handleClickButton(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-  handleClickSummary(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!this.disabled) {
-      if (this.open) {
-        this.hideDetails();
-      } else {
-        this.showDetails();
-      }
-    }
-  }
-  hideDetails() {
-    this.open = false;
-    this.emit("sd-hide", { cancelable: true });
-  }
-  showDetails() {
-    this.open = true;
-    this.emit("sd-show", { cancelable: true });
-  }
-  get calculatePaddingX() {
-    if (this.relaxed && this.indented) return "pl-8 pr-4";
-    if (this.relaxed) return "px-4";
-    if (this.indented) return "pl-4";
-    return "";
-  }
-  get tag() {
-    if (this.isAccordion && !this.isLink) {
-      return literal`summary`;
-    }
-    if (this.separated) {
-      return literal`div`;
-    }
-    if (this.isLink) {
-      return literal`a`;
-    }
-    return literal`button`;
-  }
-  render() {
-    const tag = this.tag;
-    const isLink = this.isLink;
-    const isButton = this.isButton;
-    const isAccordion = this.isAccordion;
-    const slots = {
-      label: this.hasSlotController.test("[default]"),
-      main: this.hasSlotController.test("main"),
-      description: this.hasSlotController.test("description"),
-      children: this.hasSlotController.test("children")
-    };
-    const horizontalPaddingBottom = this.vertical ? "pb-3" : "pb-2";
-    const root = html`<${tag} part="base" class="${cx(
-      "cursor-pointer relative focus-visible:focus-outline",
-      { base: "text-base", lg: "text-lg", sm: "text-[14px]" }[this.size],
-      this.disabled ? "text-neutral-500 pointer-events-none" : "text-primary",
-      isAccordion ? "flex flex-col" : "inline-block w-full",
-      this.divider && this.vertical && "mt-0.25",
-      !this.vertical && "inline-flex items-center",
-      !this.separated && "hover:bg-neutral-200 group transition-all min-h-[48px] px-4"
-    )}" aria-controls="${ifDefined(isAccordion ? "navigation-item-details" : void 0)}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" 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="${isLink ? "link" : "button"}" tabindex="${this.disabled || this.separated ? "-1" : "0"}" @click="${this.separated ? void 0 : isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
-      "absolute left-0 pointer-events-none transition-all duration-150",
-      this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-full bottom-0",
-      this.current ? "bg-accent" : "bg-transparent",
-      this.disabled && "bg-neutral-500"
-    )}"></div><span part="content-area" class="${cx(
-      "relative pt-3 inline-flex justify-between items-center",
-      isAccordion ? "grow" : "w-full",
-      slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
-      this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-3-23-4-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-3-23-4-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
-      "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
-      !slots["description"] && "py-4"
-    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="toggle-details" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-3-23-4-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
-      "mr-4 h-6 w-6 transition-all",
-      isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-3-23-4-icon></button>` : html`<sd-3-23-4-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
-      "h-6 w-6 ml-2 transition-all",
-      isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-3-23-4-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
-      "inline-block text-sm text-left text-black",
-      isAccordion || this.separated ? "grow" : "w-full",
-      this.separated ? "px-4" : this.calculatePaddingX,
-      horizontalPaddingBottom
-    )}"></slot>` : ""}</${tag}>`;
-    if (isAccordion) {
-      return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${root}<slot name="children"></slot></details>`;
-    }
-    if (this.separated) {
-      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col">${root}${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
-    }
-    return html`${root}`;
-  }
-};
-SdNavigationItem.styles = [
-  componentStyles,
-  SolidElement.styles,
-  unsafeCSS(InteractiveStyles),
-  css`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`
-];
-__decorateClass([
-  query('a[part="base"], button[part="base"]')
-], SdNavigationItem.prototype, "button", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "vertical", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdNavigationItem.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdNavigationItem.prototype, "href", 2);
-__decorateClass([
-  property()
-], SdNavigationItem.prototype, "target", 2);
-__decorateClass([
-  property()
-], SdNavigationItem.prototype, "download", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "current", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "chevron", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "relaxed", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "divider", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "indented", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdNavigationItem.prototype, "separated", 2);
-SdNavigationItem = __decorateClass([
-  customElement("sd-3-23-4-navigation-item")
-], SdNavigationItem);
-export {
-  SdNavigationItem as default
-};

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

@@ -1,32 +0,0 @@
-import { LocalizeController } from '../../utilities/localize.js';
-import SolidElement from '../../internal/solid-element.js';
-export default class SdNotification extends SolidElement {
-    private autoHideTimeout;
-    localize: LocalizeController;
-    base: HTMLElement;
-    variant: 'info' | 'success' | 'error' | 'warning';
-    open: boolean;
-    closable: boolean;
-    duration: number;
-    durationIndicator: boolean;
-    toastStack: 'top-right' | 'bottom-center';
-    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").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-23-4-notification': SdNotification;
-    }
-}