@krollins/blueprint 0.2.3 → 0.3.0

package/dist/components/popover.js

@@ -1,600 +1,2 @@
-import { css as b, LitElement as _, nothing as i, html as a } from "lit";
-import { property as r, state as c, query as u, customElement as g } from "lit/decorators.js";
-import { b as v } from "../shared/boolean-converter-XDGfS9LC.js";
-import { closeSvg as m } from "../icons/close.js";
-import { BpIcon as f } from "./icon.js";
-const w = b`
-  /* Base styles */
-  :host {
-    display: inline-block;
-    position: relative;
-  }
-
-  .popover {
-    position: relative;
-    display: inline-block;
-    font-family: var(--bp-font-family);
-    font-size: var(--bp-font-size-base);
-    color: var(--bp-color-text);
-  }
-
-  /* Trigger */
-  .popover__trigger {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    outline: none;
-    user-select: none;
-  }
-
-  .popover__trigger:hover {
-    opacity: 0.8;
-  }
-
-  .popover__trigger:focus-visible {
-    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
-    outline-offset: var(--bp-focus-offset);
-    border-radius: var(--bp-border-radius-sm);
-  }
-
-  .popover--disabled .popover__trigger {
-    cursor: not-allowed;
-    opacity: var(--bp-opacity-disabled);
-  }
-
-  /* Panel base */
-  .popover__panel {
-    position: absolute;
-    z-index: var(--bp-z-popover);
-    min-width: 160px;
-    max-width: 320px;
-    max-height: calc(100vh - 80px);
-    background-color: var(--bp-color-surface-elevated);
-    border: var(--bp-border-width) solid var(--bp-color-border);
-    border-radius: var(--bp-border-radius-lg);
-    box-shadow: var(--bp-shadow-lg);
-    opacity: 1;
-    animation: popover-fade-in var(--bp-transition-fast) ease-out;
-  }
-
-  @keyframes popover-fade-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  /* Panel placements - Bottom */
-  .popover__panel--bottom,
-  .popover__panel--bottom-start,
-  .popover__panel--bottom-end {
-    top: 100%;
-    margin-top: var(--popover-distance);
-  }
-
-  .popover__panel--bottom {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .popover__panel--bottom-start {
-    left: 0;
-  }
-
-  .popover__panel--bottom-end {
-    right: 0;
-  }
-
-  /* Panel placements - Top */
-  .popover__panel--top,
-  .popover__panel--top-start,
-  .popover__panel--top-end {
-    bottom: 100%;
-    margin-bottom: var(--popover-distance);
-  }
-
-  .popover__panel--top {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .popover__panel--top-start {
-    left: 0;
-  }
-
-  .popover__panel--top-end {
-    right: 0;
-  }
-
-  /* Panel placements - Left */
-  .popover__panel--left,
-  .popover__panel--left-start,
-  .popover__panel--left-end {
-    right: 100%;
-    margin-right: var(--popover-distance);
-  }
-
-  .popover__panel--left {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .popover__panel--left-start {
-    top: 0;
-  }
-
-  .popover__panel--left-end {
-    bottom: 0;
-  }
-
-  /* Panel placements - Right */
-  .popover__panel--right,
-  .popover__panel--right-start,
-  .popover__panel--right-end {
-    left: 100%;
-    margin-left: var(--popover-distance);
-  }
-
-  .popover__panel--right {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .popover__panel--right-start {
-    top: 0;
-  }
-
-  .popover__panel--right-end {
-    bottom: 0;
-  }
-
-  /* Arrow */
-  .popover__arrow {
-    position: absolute;
-    width: var(--bp-spacing-5);
-    height: var(--bp-spacing-5);
-    background-color: var(--bp-color-surface-elevated);
-    border: var(--bp-border-width) solid var(--bp-color-border);
-    transform: rotate(45deg);
-    z-index: -1;
-  }
-
-  /* Arrow positions - bottom placements */
-  .popover__panel--bottom .popover__arrow,
-  .popover__panel--bottom-start .popover__arrow,
-  .popover__panel--bottom-end .popover__arrow {
-    top: calc(var(--bp-spacing-2) * -1);
-    border-bottom: none;
-    border-right: none;
-  }
-
-  .popover__panel--bottom .popover__arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-  }
-
-  .popover__panel--bottom-start .popover__arrow {
-    left: var(--bp-spacing-5);
-  }
-
-  .popover__panel--bottom-end .popover__arrow {
-    right: var(--bp-spacing-5);
-  }
-
-  /* Arrow positions - top placements */
-  .popover__panel--top .popover__arrow,
-  .popover__panel--top-start .popover__arrow,
-  .popover__panel--top-end .popover__arrow {
-    bottom: calc(var(--bp-spacing-2) * -1);
-    border-top: none;
-    border-left: none;
-  }
-
-  .popover__panel--top .popover__arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-  }
-
-  .popover__panel--top-start .popover__arrow {
-    left: var(--bp-spacing-5);
-  }
-
-  .popover__panel--top-end .popover__arrow {
-    right: var(--bp-spacing-5);
-  }
-
-  /* Arrow positions - left placements */
-  .popover__panel--left .popover__arrow,
-  .popover__panel--left-start .popover__arrow,
-  .popover__panel--left-end .popover__arrow {
-    right: calc(var(--bp-spacing-2) * -1);
-    border-left: none;
-    border-bottom: none;
-  }
-
-  .popover__panel--left .popover__arrow {
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
-  }
-
-  .popover__panel--left-start .popover__arrow {
-    top: var(--bp-spacing-5);
-  }
-
-  .popover__panel--left-end .popover__arrow {
-    bottom: var(--bp-spacing-5);
-  }
-
-  /* Arrow positions - right placements */
-  .popover__panel--right .popover__arrow,
-  .popover__panel--right-start .popover__arrow,
-  .popover__panel--right-end .popover__arrow {
-    left: calc(var(--bp-spacing-2) * -1);
-    border-right: none;
-    border-top: none;
-  }
-
-  .popover__panel--right .popover__arrow {
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
-  }
-
-  .popover__panel--right-start .popover__arrow {
-    top: var(--bp-spacing-5);
-  }
-
-  .popover__panel--right-end .popover__arrow {
-    bottom: var(--bp-spacing-5);
-  }
-
-  /* Header */
-  .popover__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--bp-spacing-4);
-    padding: var(--bp-spacing-4) var(--bp-spacing-5);
-    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
-  }
-
-  .popover__header ::slotted(*) {
-    margin: 0;
-    font-size: var(--bp-font-size-base);
-    font-weight: var(--bp-font-weight-semibold);
-    color: var(--bp-color-text-strong);
-  }
-
-  /* Body */
-  .popover__body {
-    padding: var(--bp-spacing-4) var(--bp-spacing-5);
-    overflow-y: auto;
-    max-height: calc(100vh - 160px);
-  }
-
-  /* Footer */
-  .popover__footer {
-    display: flex;
-    align-items: center;
-    gap: var(--bp-spacing-4);
-    padding: var(--bp-spacing-4) var(--bp-spacing-5);
-    border-top: var(--bp-border-width) solid var(--bp-color-border);
-  }
-
-  /* Close button */
-  .popover__close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    padding: 0;
-    margin-left: auto;
-    background: transparent;
-    border: none;
-    border-radius: var(--bp-border-radius-sm);
-    color: var(--bp-color-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--bp-transition-fast),
-      color var(--bp-transition-fast),
-      transform var(--bp-transition-fast);
-  }
-
-  .popover__close:hover {
-    background-color: var(--bp-color-surface-subdued);
-    color: var(--bp-color-text);
-  }
-
-  .popover__close:active {
-    background-color: var(--bp-color-surface-pressed);
-    transform: translateY(1px);
-  }
-
-  .popover__close:focus {
-    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
-    outline-offset: var(--bp-focus-offset);
-  }
-
-  .popover__close:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  .popover__close:focus-visible {
-    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
-    outline-offset: var(--bp-focus-offset);
-  }
-
-  .popover__close bp-icon {
-    width: var(--bp-spacing-4);
-    height: var(--bp-spacing-4);
-  }
-
-  /* Reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    .popover__panel {
-      animation: none;
-    }
-
-    .popover__close {
-      transition: none;
-    }
-  }
-`;
-var y = Object.defineProperty, T = Object.getOwnPropertyDescriptor, t = (e, p, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? T(p, l) : p, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (s = (n ? h(p, l, s) : h(s)) || s);
-  return n && s && y(p, l, s), s;
-};
-let o = class extends _ {
-  constructor() {
-    super(), this.hasHeader = !1, this.hasFooter = !1, this.showTimeout = null, this.hideTimeout = null, this.popoverId = `popover-${Math.random().toString(36).substring(2, 11)}`, this.handleTriggerClick = (e) => {
-      this.disabled || this.trigger !== "click" || (e.stopPropagation(), this.toggle());
-    }, this.handleTriggerKeydown = (e) => {
-      this.disabled || this.trigger === "click" && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggle());
-    }, this.handleTriggerMouseEnter = () => {
-      this.disabled || this.trigger !== "hover" || (this.clearTimeouts(), this.showTimeout = window.setTimeout(() => {
-        this.show();
-      }, this.showDelay));
-    }, this.handleTriggerMouseLeave = () => {
-      this.trigger === "hover" && (this.clearTimeouts(), this.hideTimeout = window.setTimeout(() => {
-        this.hide();
-      }, this.hideDelay));
-    }, this.handlePanelMouseEnter = () => {
-      this.trigger === "hover" && this.clearTimeouts();
-    }, this.handlePanelMouseLeave = () => {
-      this.trigger === "hover" && (this.clearTimeouts(), this.hideTimeout = window.setTimeout(() => {
-        this.hide();
-      }, this.hideDelay));
-    }, this.handleTriggerFocus = () => {
-      this.disabled || this.trigger !== "focus" || this.show();
-    }, this.handleTriggerBlur = () => {
-      this.trigger === "focus" && this.hide();
-    }, this.handleDocumentClick = (e) => {
-      if (!this.closeOnOutsideClick || !this.open || this.trigger === "manual") return;
-      e.composedPath().includes(this) || this.hide();
-    }, this.handleDocumentKeydown = (e) => {
-      !this.closeOnEscape || !this.open || e.key === "Escape" && (e.preventDefault(), this.hide(), this.triggerElement?.focus());
-    }, this.handleCloseClick = () => {
-      this.hide();
-    }, this.handleHeaderSlotChange = (e) => {
-      const p = e.target;
-      this.hasHeader = p.assignedNodes({ flatten: !0 }).length > 0;
-    }, this.handleFooterSlotChange = (e) => {
-      const p = e.target;
-      this.hasFooter = p.assignedNodes({ flatten: !0 }).length > 0;
-    }, this.open = !1, this.placement = "bottom", this.trigger = "click", this.arrow = !1, this.showClose = !1, this.closeOnOutsideClick = !0, this.closeOnEscape = !0, this.distance = 8, this.showDelay = 200, this.hideDelay = 200, this.disabled = !1, this.label = "";
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick, {
-      passive: !0
-    }), document.addEventListener("keydown", this.handleDocumentKeydown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick, {
-      passive: !0
-    }), document.removeEventListener("keydown", this.handleDocumentKeydown), this.clearTimeouts();
-  }
-  /** Show the popover */
-  show() {
-    this.disabled || this.open || (this.clearTimeouts(), this.open = !0, this.dispatchEvent(
-      new CustomEvent("bp-show", { bubbles: !0, composed: !0 })
-    ), this.updateComplete.then(() => {
-      this.dispatchEvent(
-        new CustomEvent("bp-after-show", { bubbles: !0, composed: !0 })
-      );
-    }));
-  }
-  /** Hide the popover */
-  hide() {
-    this.open && (this.clearTimeouts(), this.open = !1, this.dispatchEvent(
-      new CustomEvent("bp-hide", { bubbles: !0, composed: !0 })
-    ), this.updateComplete.then(() => {
-      this.dispatchEvent(
-        new CustomEvent("bp-after-hide", { bubbles: !0, composed: !0 })
-      );
-    }));
-  }
-  /** Toggle the popover open/closed */
-  toggle() {
-    this.open ? this.hide() : this.show();
-  }
-  /**
-   * Clears any pending show/hide timeout operations.
-   * Prevents race conditions with rapid trigger interactions.
-   */
-  clearTimeouts() {
-    this.showTimeout !== null && (window.clearTimeout(this.showTimeout), this.showTimeout = null), this.hideTimeout !== null && (window.clearTimeout(this.hideTimeout), this.hideTimeout = null);
-  }
-  render() {
-    return a`
-      <div
-        class="popover ${this.open ? "popover--open" : ""} ${this.disabled ? "popover--disabled" : ""}"
-      >
-        <div
-          class="popover__trigger"
-          part="trigger"
-          tabindex=${this.disabled ? -1 : 0}
-          role="button"
-          aria-haspopup="dialog"
-          aria-expanded=${this.open}
-          aria-controls=${this.open ? this.popoverId : i}
-          aria-disabled=${this.disabled}
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeydown}
-          @mouseenter=${this.handleTriggerMouseEnter}
-          @mouseleave=${this.handleTriggerMouseLeave}
-          @focus=${this.handleTriggerFocus}
-          @blur=${this.handleTriggerBlur}
-        >
-          <slot></slot>
-        </div>
-        ${this.open ? a`
-              <div
-                id=${this.popoverId}
-                class="popover__panel popover__panel--${this.placement}"
-                part="panel"
-                role="dialog"
-                aria-label=${this.label || i}
-                aria-modal="false"
-                style="--popover-distance: ${this.distance}px;"
-                @mouseenter=${this.handlePanelMouseEnter}
-                @mouseleave=${this.handlePanelMouseLeave}
-              >
-                ${this.arrow ? a`<div class="popover__arrow" part="arrow"></div>` : i}
-                ${this.hasHeader || this.showClose ? a`
-                      <div class="popover__header" part="header">
-                        <slot
-                          name="header"
-                          @slotchange=${this.handleHeaderSlotChange}
-                        ></slot>
-                        ${this.showClose ? a`
-                              <button
-                                class="popover__close"
-                                part="close-button"
-                                type="button"
-                                aria-label="Close popover"
-                                @click=${this.handleCloseClick}
-                              >
-                                <bp-icon .svg=${m} size="sm"></bp-icon>
-                              </button>
-                            ` : i}
-                      </div>
-                    ` : a`<slot
-                      name="header"
-                      @slotchange=${this.handleHeaderSlotChange}
-                    ></slot>`}
-                <div class="popover__body" part="body">
-                  <slot name="content"></slot>
-                </div>
-                ${this.hasFooter ? a`
-                      <div class="popover__footer" part="footer">
-                        <slot
-                          name="footer"
-                          @slotchange=${this.handleFooterSlotChange}
-                        ></slot>
-                      </div>
-                    ` : a`<slot
-                      name="footer"
-                      @slotchange=${this.handleFooterSlotChange}
-                    ></slot>`}
-              </div>
-            ` : i}
-      </div>
-    `;
-  }
-};
-o.dependencies = [f];
-o.styles = [w];
-t([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
-t([
-  r({
-    type: String,
-    reflect: !0,
-    converter: {
-      fromAttribute: (e) => [
-        "top",
-        "top-start",
-        "top-end",
-        "bottom",
-        "bottom-start",
-        "bottom-end",
-        "left",
-        "left-start",
-        "left-end",
-        "right",
-        "right-start",
-        "right-end"
-      ].includes(e) ? e : "bottom"
-    }
-  })
-], o.prototype, "placement", 2);
-t([
-  r({
-    type: String,
-    converter: {
-      fromAttribute: (e) => [
-        "click",
-        "hover",
-        "focus",
-        "manual"
-      ].includes(e) ? e : "click"
-    }
-  })
-], o.prototype, "trigger", 2);
-t([
-  r({ type: Boolean })
-], o.prototype, "arrow", 2);
-t([
-  r({ type: Boolean, attribute: "show-close" })
-], o.prototype, "showClose", 2);
-t([
-  r({
-    converter: v,
-    attribute: "close-on-outside-click",
-    reflect: !0
-  })
-], o.prototype, "closeOnOutsideClick", 2);
-t([
-  r({
-    converter: v,
-    attribute: "close-on-escape",
-    reflect: !0
-  })
-], o.prototype, "closeOnEscape", 2);
-t([
-  r({ type: Number })
-], o.prototype, "distance", 2);
-t([
-  r({ type: Number, attribute: "show-delay" })
-], o.prototype, "showDelay", 2);
-t([
-  r({ type: Number, attribute: "hide-delay" })
-], o.prototype, "hideDelay", 2);
-t([
-  r({ type: Boolean })
-], o.prototype, "disabled", 2);
-t([
-  r({ type: String })
-], o.prototype, "label", 2);
-t([
-  c()
-], o.prototype, "hasHeader", 2);
-t([
-  c()
-], o.prototype, "hasFooter", 2);
-t([
-  u(".popover__trigger")
-], o.prototype, "triggerElement", 2);
-o = t([
-  g("bp-popover")
-], o);
-export {
-  o as BpPopover
-};
-//# sourceMappingURL=popover.js.map
+import { t as e } from "../shared/popover-BBmiWhfm.js";
+export { e as BpPopover };

package/dist/components/progress/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../source/components/progress/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IACiC,GAAG,EAAE,MAAM,CAAC;IAEhD;;OAEG;IACgD,OAAO,EAAE,eAAe,CAAC;IAE5E;;OAEG;IACgD,IAAI,EAAE,YAAY,CAAC;IAEtE;;OAEG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IACkC,SAAS,EAAE,OAAO,CAAC;IAExD;;OAEG;IACkC,aAAa,EAAE,OAAO,CAAC;IAE5D,MAAM,CAAC,MAAM,4BAAoB;;IAajC,OAAO,KAAK,UAAU,GAIrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkB/C,MAAM;CA2CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../source/components/progress/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,MAAM,MAAM,eAAe,GACzB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IACiC,GAAG,EAAE,MAAM,CAAC;IAEhD;;OAEG;IACgD,OAAO,EAAE,eAAe,CAAC;IAE5E;;OAEG;IACgD,IAAI,EAAE,YAAY,CAAC;IAEtE;;OAEG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IACkC,SAAS,EAAE,OAAO,CAAC;IAExD;;OAEG;IACkC,aAAa,EAAE,OAAO,CAAC;IAE5D,MAAM,CAAC,MAAM,4BAAoB;IAEjC,cASC;IAED,OAAO,KAAK,UAAU,GAIrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAgB9C;IAED,MAAM,yCAgDL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}