nve-designsystem 0.2.13 → 0.3.1

package/chunks/chunk.2IGSSN44.js

@@ -0,0 +1,46 @@
+import { i as t } from "./lit-element.js";
+import { w as a } from "./chunk.2FB5TK5H.js";
+import { c as i, b as r, S as o } from "./chunk.5THGRZAA.js";
+import { n as l } from "./property.js";
+var s = t`
+  :host {
+    --color: var(--sl-panel-border-color);
+    --width: var(--sl-panel-border-width);
+    --spacing: var(--sl-spacing-medium);
+  }
+
+  :host(:not([vertical])) {
+    display: block;
+    border-top: solid var(--width) var(--color);
+    margin: var(--spacing) 0;
+  }
+
+  :host([vertical]) {
+    display: inline-block;
+    height: 100%;
+    border-left: solid var(--width) var(--color);
+    margin: 0 var(--spacing);
+  }
+`, e = class extends o {
+  constructor() {
+    super(...arguments), this.vertical = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+e.styles = [i, s];
+r([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "vertical", 2);
+r([
+  a("vertical")
+], e.prototype, "handleVerticalChange", 1);
+var v = e;
+e.define("sl-divider");
+export {
+  v as d
+};

package/chunks/chunk.3MBST6KA.js

@@ -0,0 +1,292 @@
+import { i as g, k as f } from "./lit-element.js";
+import { g as w } from "./chunk.LXDTFLWU.js";
+import { S as y } from "./chunk.62L7S2LE.js";
+import { s as m, w as d, a as h, g as c, b as u } from "./chunk.LHI6QEL2.js";
+import { L as v } from "./chunk.WLV3FVBR.js";
+import { w as b } from "./chunk.2FB5TK5H.js";
+import { c as k, b as i, S as E } from "./chunk.5THGRZAA.js";
+import { R as _ } from "./class-map.js";
+import { t as D } from "./if-defined.js";
+import { n } from "./property.js";
+import { e as p } from "./query.js";
+var C = g`
+  :host {
+    display: inline-block;
+  }
+
+  .dropdown::part(popup) {
+    z-index: var(--sl-z-index-dropdown);
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    box-shadow: var(--sl-shadow-large);
+    border-radius: var(--sl-border-radius-medium);
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(sl-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`, s = class extends E {
+  constructor() {
+    super(...arguments), this.localize = new v(this), this.open = !1, this.placement = "bottom-start", this.disabled = !1, this.stayOpenOnSelect = !1, this.distance = 0, this.skidding = 0, this.hoist = !1, this.sync = void 0, this.handleKeyDown = (e) => {
+      this.open && e.key === "Escape" && (e.stopPropagation(), this.hide(), this.focusOnTrigger());
+    }, this.handleDocumentKeyDown = (e) => {
+      var t;
+      if (e.key === "Escape" && this.open && !this.closeWatcher) {
+        e.stopPropagation(), this.focusOnTrigger(), this.hide();
+        return;
+      }
+      if (e.key === "Tab") {
+        if (this.open && ((t = document.activeElement) == null ? void 0 : t.tagName.toLowerCase()) === "sl-menu-item") {
+          e.preventDefault(), this.hide(), this.focusOnTrigger();
+          return;
+        }
+        setTimeout(() => {
+          var o, a, r;
+          const l = ((o = this.containingElement) == null ? void 0 : o.getRootNode()) instanceof ShadowRoot ? (r = (a = document.activeElement) == null ? void 0 : a.shadowRoot) == null ? void 0 : r.activeElement : document.activeElement;
+          (!this.containingElement || (l == null ? void 0 : l.closest(this.containingElement.tagName.toLowerCase())) !== this.containingElement) && this.hide();
+        });
+      }
+    }, this.handleDocumentMouseDown = (e) => {
+      const t = e.composedPath();
+      this.containingElement && !t.includes(this.containingElement) && this.hide();
+    }, this.handlePanelSelect = (e) => {
+      const t = e.target;
+      !this.stayOpenOnSelect && t.tagName.toLowerCase() === "sl-menu" && (this.hide(), this.focusOnTrigger());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.containingElement || (this.containingElement = this);
+  }
+  firstUpdated() {
+    this.panel.hidden = !this.open, this.open && (this.addOpenListeners(), this.popup.active = !0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeOpenListeners(), this.hide();
+  }
+  focusOnTrigger() {
+    const e = this.trigger.assignedElements({ flatten: !0 })[0];
+    typeof (e == null ? void 0 : e.focus) == "function" && e.focus();
+  }
+  getMenu() {
+    return this.panel.assignedElements({ flatten: !0 }).find((e) => e.tagName.toLowerCase() === "sl-menu");
+  }
+  handleTriggerClick() {
+    this.open ? this.hide() : (this.show(), this.focusOnTrigger());
+  }
+  async handleTriggerKeyDown(e) {
+    if ([" ", "Enter"].includes(e.key)) {
+      e.preventDefault(), this.handleTriggerClick();
+      return;
+    }
+    const t = this.getMenu();
+    if (t) {
+      const o = t.getAllItems(), a = o[0], r = o[o.length - 1];
+      ["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key) && (e.preventDefault(), this.open || (this.show(), await this.updateComplete), o.length > 0 && this.updateComplete.then(() => {
+        (e.key === "ArrowDown" || e.key === "Home") && (t.setCurrentItem(a), a.focus()), (e.key === "ArrowUp" || e.key === "End") && (t.setCurrentItem(r), r.focus());
+      }));
+    }
+  }
+  handleTriggerKeyUp(e) {
+    e.key === " " && e.preventDefault();
+  }
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const t = this.trigger.assignedElements({ flatten: !0 }).find((a) => w(a).start);
+    let o;
+    if (t) {
+      switch (t.tagName.toLowerCase()) {
+        case "sl-button":
+        case "sl-icon-button":
+          o = t.button;
+          break;
+        default:
+          o = t;
+      }
+      o.setAttribute("aria-haspopup", "true"), o.setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  /** Shows the dropdown panel. */
+  async show() {
+    if (!this.open)
+      return this.open = !0, d(this, "sl-after-show");
+  }
+  /** Hides the dropdown panel */
+  async hide() {
+    if (this.open)
+      return this.open = !1, d(this, "sl-after-hide");
+  }
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+  addOpenListeners() {
+    var e;
+    this.panel.addEventListener("sl-select", this.handlePanelSelect), "CloseWatcher" in window ? ((e = this.closeWatcher) == null || e.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
+      this.hide(), this.focusOnTrigger();
+    }) : this.panel.addEventListener("keydown", this.handleKeyDown), document.addEventListener("keydown", this.handleDocumentKeyDown), document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    var e;
+    this.panel && (this.panel.removeEventListener("sl-select", this.handlePanelSelect), this.panel.removeEventListener("keydown", this.handleKeyDown)), document.removeEventListener("keydown", this.handleDocumentKeyDown), document.removeEventListener("mousedown", this.handleDocumentMouseDown), (e = this.closeWatcher) == null || e.destroy();
+  }
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = !1;
+      return;
+    }
+    if (this.updateAccessibleTrigger(), this.open) {
+      this.emit("sl-show"), this.addOpenListeners(), await h(this), this.panel.hidden = !1, this.popup.active = !0;
+      const { keyframes: e, options: t } = c(this, "dropdown.show", { dir: this.localize.dir() });
+      await u(this.popup.popup, e, t), this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide"), this.removeOpenListeners(), await h(this);
+      const { keyframes: e, options: t } = c(this, "dropdown.hide", { dir: this.localize.dir() });
+      await u(this.popup.popup, e, t), this.panel.hidden = !0, this.popup.active = !1, this.emit("sl-after-hide");
+    }
+  }
+  render() {
+    return f`
+      <sl-popup
+        part="base"
+        exportparts="popup:base__popup"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        sync=${D(this.sync ? this.sync : void 0)}
+        class=${_({
+      dropdown: !0,
+      "dropdown--open": this.open
+    })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div aria-hidden=${this.open ? "false" : "true"} aria-labelledby="dropdown">
+          <slot part="panel" class="dropdown__panel"></slot>
+        </div>
+      </sl-popup>
+    `;
+  }
+};
+s.styles = [k, C];
+s.dependencies = { "sl-popup": y };
+i([
+  p(".dropdown")
+], s.prototype, "popup", 2);
+i([
+  p(".dropdown__trigger")
+], s.prototype, "trigger", 2);
+i([
+  p(".dropdown__panel")
+], s.prototype, "panel", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+i([
+  n({ reflect: !0 })
+], s.prototype, "placement", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+i([
+  n({ attribute: "stay-open-on-select", type: Boolean, reflect: !0 })
+], s.prototype, "stayOpenOnSelect", 2);
+i([
+  n({ attribute: !1 })
+], s.prototype, "containingElement", 2);
+i([
+  n({ type: Number })
+], s.prototype, "distance", 2);
+i([
+  n({ type: Number })
+], s.prototype, "skidding", 2);
+i([
+  n({ type: Boolean })
+], s.prototype, "hoist", 2);
+i([
+  n({ reflect: !0 })
+], s.prototype, "sync", 2);
+i([
+  b("open", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleOpenChange", 1);
+m("dropdown.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+m("dropdown.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+var M = s;
+s.define("sl-dropdown");
+export {
+  s as S,
+  M as d
+};

package/chunks/chunk.4SGTRSOV.js

@@ -0,0 +1,243 @@
+import { S as u } from "./chunk.XJILXOW4.js";
+import { s as h, a as i, g as l, b as n, w as c } from "./chunk.LHI6QEL2.js";
+import { H as m } from "./chunk.NYIIDP5N.js";
+import { L as f } from "./chunk.WLV3FVBR.js";
+import { i as v, k as d } from "./lit-element.js";
+import { w as p } from "./chunk.2FB5TK5H.js";
+import { c as b, b as t, S as g } from "./chunk.5THGRZAA.js";
+import { R as y } from "./class-map.js";
+import { n as s } from "./property.js";
+import { e as _ } from "./query.js";
+var w = v`
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    background-color: var(--sl-panel-background-color);
+    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+    border-top-width: calc(var(--sl-panel-border-width) * 3);
+    border-radius: var(--sl-border-radius-medium);
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: 1.6;
+    color: var(--sl-color-neutral-700);
+    margin: inherit;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-large);
+    padding-inline-start: var(--sl-spacing-large);
+  }
+
+  .alert--primary {
+    border-top-color: var(--sl-color-primary-600);
+  }
+
+  .alert--primary .alert__icon {
+    color: var(--sl-color-primary-600);
+  }
+
+  .alert--success {
+    border-top-color: var(--sl-color-success-600);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral {
+    border-top-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--neutral .alert__icon {
+    color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning {
+    border-top-color: var(--sl-color-warning-600);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger {
+    border-top-color: var(--sl-color-danger-600);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--sl-color-danger-600);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--sl-spacing-large);
+    overflow: hidden;
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-medium);
+    padding-inline-end: var(--sl-spacing-medium);
+  }
+`, a = Object.assign(document.createElement("div"), { className: "sl-toast-stack" }), e = class extends g {
+  constructor() {
+    super(...arguments), this.hasSlotController = new m(this, "icon", "suffix"), this.localize = new f(this), this.open = !1, this.closable = !1, this.variant = "primary", this.duration = 1 / 0;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout), this.open && this.duration < 1 / 0 && (this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration));
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("sl-show"), this.duration < 1 / 0 && this.restartAutoHide(), await i(this.base), this.base.hidden = !1;
+      const { keyframes: r, options: o } = l(this, "alert.show", { dir: this.localize.dir() });
+      await n(this.base, r, o), this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide"), clearTimeout(this.autoHideTimeout), await i(this.base);
+      const { keyframes: r, options: o } = l(this, "alert.hide", { dir: this.localize.dir() });
+      await n(this.base, r, o), this.base.hidden = !0, this.emit("sl-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (!this.open)
+      return this.open = !0, c(this, "sl-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (this.open)
+      return this.open = !1, c(this, "sl-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((r) => {
+      a.parentElement === null && document.body.append(a), a.appendChild(this), requestAnimationFrame(() => {
+        this.clientWidth, this.show();
+      }), this.addEventListener(
+        "sl-after-hide",
+        () => {
+          a.removeChild(this), r(), a.querySelector("sl-alert") === null && a.remove();
+        },
+        { once: !0 }
+      );
+    });
+  }
+  render() {
+    return d`
+      <div
+        part="base"
+        class=${y({
+      alert: !0,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger"
+    })}
+        role="alert"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mousemove=${this.handleMouseMove}
+      >
+        <div part="icon" class="alert__icon">
+          <slot name="icon"></slot>
+        </div>
+
+        <div part="message" class="alert__message" aria-live="polite">
+          <slot></slot>
+        </div>
+
+        ${this.closable ? d`
+              <sl-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></sl-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+e.styles = [b, w];
+e.dependencies = { "sl-icon-button": u };
+t([
+  _('[part~="base"]')
+], e.prototype, "base", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "closable", 2);
+t([
+  s({ reflect: !0 })
+], e.prototype, "variant", 2);
+t([
+  s({ type: Number })
+], e.prototype, "duration", 2);
+t([
+  p("open", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleOpenChange", 1);
+t([
+  p("duration")
+], e.prototype, "handleDurationChange", 1);
+h("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+h("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+var D = e;
+e.define("sl-alert");
+export {
+  D as a
+};